/* Add-on pages: /addons.html, /addons/electricity.html, /addons/guest-app.html
   Loaded after css/styles.css and css/zoom.css. Uses only the tokens defined in styles.css, so light and dark
   both work. Every class here starts with "ad-". Nothing in styles.css is changed.

   Design read: product pages for hotel staff, trust first, calm and exact. Same navy ink, one orange accent,
   Bricolage Grotesque and Plus Jakarta Sans. Few boxes: rules and spacing do the grouping.

   Screens (sharpness rule: a screen is shown at 0.40 or more of its natural width on a computer and 0.36 or more
   on a phone; the files are double density, so 0.50 is true size):
   - .ad-crop      a cropped window into a screen, built on the existing .crop variables. The window is set per
                   figure: --dvw / --dvh (computer) and --mvw / --mvh (phone) are the visible size in file pixels.
   - .ad-pan       a whole wide screen. Full width on a computer. Below 1024px it keeps 0.40 of its natural width
                   and slides sideways inside its own frame instead of shrinking.
   - .ad-phones    the portrait phone screens. A row on a computer, a swipe row on a phone. */

:root {
  --ad-measure: 68ch;
}

/* ---------- Back link and hero ---------- */
.ad-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 0.92rem; margin-bottom: var(--space-2); }

.ad-hero { padding: var(--space-6) 0 var(--space-7); }
.ad-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) 500px; column-gap: var(--space-7); row-gap: var(--space-5); align-items: center; }
.ad-badge { display: block; width: fit-content; max-width: 100%; color: var(--color-ink); font-weight: 700; font-size: 0.95rem; line-height: 1.35; padding: 0 0 0 var(--space-3); border-left: 3px solid var(--color-accent); margin: 0 0 var(--space-4); }
.ad-hero h1 { font-size: clamp(2.1rem, 3.5vw, 2.9rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; margin-bottom: var(--space-4); }
.ad-lede { font-size: 1.2rem; line-height: 1.55; color: var(--color-foreground); max-width: 38ch; margin-bottom: var(--space-5); }
.ad-hero .hero-ctas { margin-top: 0; }
.ad-hero-media { min-width: 0; }
@media (max-width: 1100px) {
  .ad-hero { padding: var(--space-4) 0 var(--space-6); }
  .ad-hero .container { grid-template-columns: minmax(0, 1fr); }
  .ad-hero-media { max-width: 560px; width: 100%; }
}
@media (max-width: 520px) {
  .ad-hero .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---------- Section rhythm and headings ---------- */
.ad-section { padding: var(--section-s) 0; }
/* A tall whole-page screen shown by its top part. The zoom link still opens the whole picture. */
@media (min-width: 1200px) { .ad-pan--short > a.zoomable { max-height: 520px; overflow: hidden; } }
@media (max-width: 1199px) { .ad-pan--short > a.zoomable { max-height: 440px; overflow: auto; } }
.ad-section--s { padding: var(--section-s) 0; }
.ad-section > .container > h2, .ad-head h2 { max-width: 22ch; }
.ad-head { margin-bottom: var(--space-5); }
.ad-head p { font-size: 1.05rem; max-width: var(--ad-measure); margin-bottom: 0; }
.ad-prose { max-width: var(--ad-measure); }
.ad-prose p { color: var(--color-foreground); }
.ad-prose p strong { color: var(--color-ink); }
@media (max-width: 720px) {
  .ad-section { padding: var(--section-s) 0; }
}

/* ---------- Steps: a numbered list, the verb is the label ---------- */
.ad-steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; counter-reset: ad-step; display: grid; gap: var(--space-4); max-width: 760px; }
.ad-steps > li { counter-increment: ad-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.ad-steps > li::before { content: counter(ad-step); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-ink); color: var(--color-ink); font: 700 1.1rem/1 var(--font-display); display: flex; align-items: center; justify-content: center; }
.ad-steps h3 { margin: 0 0 var(--space-1); font-size: 1.2rem; }
.ad-steps p { margin: 0; color: var(--color-foreground); }
@media (max-width: 480px) { .ad-steps > li { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); } .ad-steps > li::before { width: 36px; height: 36px; font-size: 1rem; } }

/* styles.css narrows .rows to a 36px icon column on a phone. These rows have no icon, so keep one full-width column. */
.ad-section .rows--plain > * { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) { .ad-section .rows--plain > * { grid-template-columns: minmax(0, 1fr); } }

/* "The exact rule" fold-out on the electricity page. */
.ad-rule { border-top: 1px solid var(--color-border); margin-top: var(--space-3); }
.ad-rule p { color: var(--color-foreground); max-width: none; }
.ad-rule summary { min-height: 44px; }

/* Steps on the left, notes on the right. */
.ad-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-7); align-items: start; margin-bottom: var(--space-6); }
.ad-two .ad-steps, .ad-two .ad-notes { margin-bottom: 0; }
@media (max-width: 960px) { .ad-two { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } }

/* Two phone screens side by side, each with its own heading and text under it. */
.ad-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: var(--space-6); align-items: start; }
.ad-pair-item { min-width: 0; }
.ad-pair-item .ad-phone { margin-bottom: var(--space-4); }
.ad-pair-item h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: none; }
.ad-pair-item p { color: var(--color-foreground); }
@media (max-width: 900px) { .ad-pair { grid-template-columns: minmax(0, 1fr); } }

/* "Where it stands" beside its heading: the term sits above its sentence. */
.statement .ad-stand { max-width: none; }
.statement .ad-stand > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

/* ---------- Notes under a list: bold lead-in, plain sentence ---------- */
.ad-notes { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); max-width: var(--ad-measure); }
.ad-notes li { padding-left: var(--space-4); border-left: 3px solid var(--color-border); color: var(--color-foreground); }
.ad-notes li strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 2px; }
.ad-notes li.is-honest { border-left-color: var(--color-accent); }

/* ---------- Groups: a top rule, a small heading, short lines. Used for "what you need" and "what it does not do" ---------- */
.ad-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: var(--space-6); }
.ad-group { border-top: 3px solid var(--color-ink); padding-top: var(--space-3); min-width: 0; }
.ad-group h3 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.ad-group p { margin: 0 0 var(--space-2); color: var(--color-foreground); }
.ad-group p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .ad-groups { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } }

/* ---------- Two-column split: a list on one side, a screen on the other ---------- */
.ad-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-7); row-gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .ad-split { grid-template-columns: minmax(0, 1fr); } }

/* Term and description pairs (the list of pages). No rule on every row. */
.ad-defs { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-3); }
.ad-defs dt { font-weight: 700; color: var(--color-ink); }
.ad-defs dd { margin: 0; color: var(--color-foreground); }
@media (max-width: 520px) { .ad-defs { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .ad-defs dd { margin-bottom: var(--space-3); } }

/* ---------- Where it stands: dated facts ---------- */
.ad-stand { margin: 0; display: grid; gap: var(--space-4); max-width: 820px; }
.ad-stand > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--space-5); }
.ad-stand dt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-ink); }
.ad-stand dd { margin: 0; color: var(--color-foreground); }
@media (max-width: 720px) { .ad-stand > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } }

/* ---------- Screens ---------- */
.ad-fig { margin: 0; min-width: 0; }
.ad-fig figcaption { margin-top: var(--space-3); max-width: 62ch; }
.ad-fig figcaption .ad-sample { font-weight: 700; color: var(--color-accent-text); white-space: nowrap; }

/* Crop window. Defaults come from the figure's inline custom properties. */
.ad-crop { --vw: var(--dvw); --vh: var(--dvh); }
@media (max-width: 720px) {
  .ad-crop { --vw: var(--mvw, var(--dvw)); --vh: var(--mvh, var(--dvh)); }
}

.ad-crop picture, .ad-pan picture { display: contents; }

/* Whole wide screen (2880px files). The link is the frame.
   1200px and up: it bleeds 24px past the text column so it is 1180px wide, which is 0.41 of the file.
   Below 1200px: it keeps --k of the file width (0.40, or 0.36 on a phone) and slides sideways inside the frame.
   --nw is the file width in pixels. */
.ad-pan, .ad-phone { --k: 0.4; min-width: 0; }
@media (max-width: 520px) { .ad-pan, .ad-phone { --k: 0.36; } }
.ad-pan img { display: block; width: 100%; max-width: none; height: auto; }
@media (min-width: 1200px) {
  .ad-pan { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
}
@media (max-width: 1199px) {
  .ad-pan > a.zoomable { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .ad-pan img { width: calc(var(--nw) * var(--k) * 1px); }
  .ad-pan .zoom-hint { display: none; }
  /* --skip: file pixels of the left edge that start off-screen (a menu column the sentence is not about). */
  .ad-pan[style*="--skip"] img { margin-left: calc(var(--skip) * var(--k) * -1px); }
}
.ad-pan-hint, .ad-swipe-hint { display: none; margin: var(--space-2) 0 0; font-size: 0.9rem; max-width: none; }
@media (max-width: 1199px) { .ad-pan-hint { display: block; } }

/* Portrait phone screens (1170px files, 3x). A fixed window shows part of the long capture at --k of its width.
   --nw file width, --vy top of the window and --vh its height, all in file pixels.
   468px wide (0.40) on a computer; 421px (0.36) on a phone, where it slides sideways inside its frame
   because a phone screen is narrower than that. */
.ad-phone { width: min(100%, calc(var(--nw) * 0.4px + 20px)); margin: 0; }
.ad-phone--hero { margin: 0 auto; }
.ad-pcrop { display: block; position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--nw) / var(--vh); background: var(--color-card); border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 14%, transparent); }
.ad-pcrop picture { display: contents; }
.ad-pcrop img { display: block; max-width: none; width: 100%; height: auto; margin-top: calc(var(--vy) / var(--nw) * -100%); }
@media (max-width: 560px) {
  /* A phone: the screen fills its frame (about 0.9 of its real size, so text is as large as on a real phone). The mat is thinner to give it room. */
  .ad-phone > a.zoomable { padding: 4px; }
}
.ad-phone-row { display: grid; grid-template-columns: minmax(0, 488px) minmax(0, 1fr); column-gap: var(--space-7); row-gap: var(--space-5); align-items: center; }
.ad-phone-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 488px); }
.ad-phone-row--flip > .ad-phone { order: 2; justify-self: end; }
.ad-phone-row > div { min-width: 0; }
.ad-phone-row h2 { max-width: 20ch; }
.ad-phone-row p { color: var(--color-foreground); }
.ad-phone figcaption { max-width: 468px; }
@media (max-width: 960px) {
  .ad-phone-row, .ad-phone-row--flip { grid-template-columns: minmax(0, 1fr); }
  .ad-phone-row--flip > .ad-phone { order: 0; justify-self: start; }
}

/* ---------- Hub page: two product rows and two quiet rows ---------- */
.ad-products { display: grid; gap: var(--space-5); }
.ad-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-6); row-gap: var(--space-3); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ad-product { grid-template-rows: auto auto 1fr; }
.ad-product h3 { grid-column: 1; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; margin: 0; }
.ad-product .ad-tag { grid-column: 1; margin: 0; }
.ad-product-body { grid-column: 2; grid-row: 1 / span 4; min-width: 0; align-self: center; }
.ad-product-body p { color: var(--color-foreground); }
.ad-product-body p:last-of-type { margin-bottom: var(--space-4); }
.ad-product .btn { grid-column: 1; justify-self: start; align-self: end; }
.ad-tag { display: block; width: fit-content; font-size: 0.85rem; font-weight: 700; color: var(--color-ink); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; line-height: 1.4; }
.ad-quiet { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); }
.ad-quiet > li { border-top: 3px solid var(--color-ink); padding-top: var(--space-3); min-width: 0; }
.ad-quiet h3 { font-size: 1.35rem; margin: var(--space-2) 0; }
.ad-quiet p { color: var(--color-foreground); }
.ad-quiet .ad-tag { margin-top: 0; }
.ad-quiet .ad-tag--dev { background: transparent; border-style: dashed; border-color: var(--color-accent); }
.ad-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (max-width: 900px) {
  .ad-product { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .ad-product { grid-template-rows: none; }
  .ad-product .ad-tag, .ad-product h3, .ad-product-body, .ad-product .btn { grid-column: 1; grid-row: auto; }
  .ad-product .btn { order: 3; }
  .ad-quiet { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Keycard page: status panel in the hero and the card-history figures ---------- */
/* A cropped screen that keeps 0.40 of its file width (0.36 on a phone) below 1200px and slides sideways inside its frame. */
.ad-slide { --k: 0.4; }
@media (max-width: 520px) { .ad-slide { --k: 0.36; } }
.ad-slide-hint { display: none; margin: var(--space-2) 0 0; font-size: 0.9rem; max-width: none; }
@media (max-width: 1199px) {
  .ad-slide > a.zoomable { display: block; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .ad-slide .ad-crop { width: max(100%, calc(var(--dvw) * var(--k) * 1px)); }
  .ad-slide .zoom-hint { display: none; }
  .ad-slide-hint { display: block; }
}
@media (min-width: 721px) { .ad-slide-hint--phone { display: none; } }
/* Shorter page on a phone (Keycard page only): tighter section rhythm, two stat tiles across, the wide log screen left to the enlarge view on computers. */
@media (max-width: 720px) {
  .ad-compact .ad-section { padding: 36px 0; }
  .ad-compact .ad-head { margin-bottom: var(--space-4); }
  .ad-compact .ad-hide-phone { display: none; }
  .ad-compact .ad-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: var(--space-4); }
  .ad-compact .ad-figs dt { font-size: 0.85rem; }
  .ad-compact .ad-figs dd:not(.ad-fig-note) { font-size: 1.55rem; }
  .ad-compact .ad-figs .ad-fig-note { font-size: 0.85rem; }
  .ad-compact .ad-notes { margin-bottom: var(--space-4); }
}
.ad-group--wide { grid-column: 1 / -1; }
@media (min-width: 801px) { .ad-group--wide p { max-width: var(--ad-measure); } }
.ad-after { margin-top: var(--space-6); }
.ad-split.ad-after { align-items: center; }
.ad-two + .ad-notes { margin: var(--space-5) 0 0; }

.ad-figs { margin: 0 0 var(--space-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); }
.ad-figs > div { border-top: 3px solid var(--color-ink); padding-top: var(--space-3); min-width: 0; display: flex; flex-direction: column; }
.ad-figs dt { font-weight: 700; color: var(--color-ink); font-size: 0.95rem; line-height: 1.35; order: 1; }
.ad-figs dd { margin: 0; color: var(--color-foreground); }
.ad-figs dd:not(.ad-fig-note) { order: 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink); margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.ad-figs .ad-fig-note { order: 3; font-size: 0.95rem; }
@media (max-width: 1100px) { .ad-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ad-figs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ and closing band ---------- */
.ad-faq { max-width: 760px; }
.ad-faq .faq-item summary { min-height: 44px; }
.ad-faq .faq-item p { color: var(--color-foreground); max-width: none; }
.ad-close { padding: var(--section-s) 0 var(--section-m); }

/* The status strip reuses .logo-strip from styles.css. These lines only make longer sentences read well. */
.ad-status .container > span { font-size: 1.05rem; }

/* Hover lift on a screen is already handled in styles.css; keep it still for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .ad-pan .ad-scroll { scroll-behavior: auto; }
}

/* Print: show the content, not the controls. */
@media print {
  .ad-pan-hint, .ad-swipe-hint { display: none !important; }
}