/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * The guest chat pins the page; every other guest page scrolls normally.
 *
 * This is a stylesheet rule rather than a class on <html> because Turbo Drive
 * replaces <body> and merges <head> on a visit but never touches the <html>
 * element's attributes — so a class put there on the chat's own render is
 * simply not present when a guest arrives from the entry form, which is how
 * every real guest arrives. Measured: <body> pinned correctly at 701px while
 * <html> stayed 1275px and the page still dragged 574px behind a composer
 * that was exactly where it should be.
 *
 * :has() rather than JavaScript because the selector is the whole logic, and
 * this app already requires a browser modern enough for it (allow_browser
 * versions: :modern in ApplicationController).
 */
html:has(> body.app-shell) {
  height: 100dvh;
  overflow: hidden;
}

/*
 * Printing a guide. Guests do this — a paper copy in a kitchen drawer is a
 * real artifact of a rental stay — and without these rules the fixed ask bar
 * stamps itself over the middle of every printed page.
 *
 * Hidden: the interactive chrome only — the ask bar, the chapter grid (its
 * anchors are dead on paper), the search form, and the help card. Everything
 * id-scoped to this guest page on purpose:
 * the host QR print sheet (host/qr_codes/print) shares this compiled build
 * and owns its own print design, so nothing here may name its ids.
 *
 * Deliberately NOT hidden: #report-guide (the Terms abuse route) and
 * #powered-by-askello (branding truth) — compliance surfaces survive on
 * paper. test/design_system/print_stylesheet_test.rb reads this file off
 * disk and holds both lists.
 */
@media print {
  #guide-action-bar,
  #guide-chapters,
  #whole-guide,
  #all-chapters,
  #guide-help-card,
  #get-started {
    display: none !important;
  }
}

/* The cover's way in is an anchor, so the jump is the browser's — smooth
   where the reader has not asked for less motion, instant where they have.
   scroll-margin keeps the tiles clear of the top edge on arrival. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

#guide-chapters {
  scroll-margin-top: 1rem;
}

/* The guide's utility controls: "Read the whole guide", "Ask a question" and
   "Add this guide to your phone". One class rather than three copies of a
   utility string, because the whole point is that they are indistinguishable
   — they were a coloured link, a bordered box and an underlined link, and the
   owner's fourth walk-through called that out as broken.

   The brand colour comes from the page's own --brand-primary, so the row
   belongs to the property like everything else on the guide. `list-style` and
   the webkit marker are for the <details> summary in the middle of it: a
   button does not carry a disclosure triangle. */
.guide-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  background-color: #fff;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.guide-utility::-webkit-details-marker {
  display: none;
}

/* The chat bubble and the sheet it opens (guest/guides/_ask_sheet.html.erb).
   One <details>: closed, its summary is the bubble in the bottom corner;
   open, the element covers the screen, its panel is the chat's shape, and
   the same summary sits in the panel's header as "Back to the guide" — the
   one element that can close a <details> is always where a thumb expects
   it. `position: fixed` like the bar it replaced: inside /sample's bezel the
   device's transform is the containing block, so the sheet fills the phone.
   z-index 20 sits under the real chat sheet (#guide-chat-sheet, z-30),
   which opens over this one once the first question is sent. */
.ask-sheet {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 20;
}
.ask-sheet > summary {
  list-style: none;
  cursor: pointer;
}
.ask-sheet > summary::-webkit-details-marker {
  display: none;
}
.ask-sheet__bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding-inline: 0.9rem 1.2rem;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
}
.ask-sheet__back {
  display: none;
}
.ask-sheet[open] {
  inset: 0;
}
.ask-sheet[open] > summary {
  position: absolute;
  top: 0.45rem;
  inset-inline-end: 1rem;
  z-index: 2;
}
.ask-sheet[open] .ask-sheet__bubble {
  display: none;
}
.ask-sheet[open] .ask-sheet__back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: underline;
}
.ask-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
}
.ask-sheet__head {
  flex: none;
  padding: 0.625rem 1rem;
  padding-inline-end: 8.5rem;
}
.ask-sheet__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}
.ask-sheet__foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid var(--color-gray-200);
  padding: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* S1's "link or text" choice (start/drafts/new), with no JavaScript at all.
   The radios are real form controls, so the panel that follows the chosen one
   is a CSS question — which matters here: this is the front door, both fields
   are always in the form, and a wizard whose first screen needs a script to
   show you a field is a wizard that can lose a signup to a blocked bundle.

   A browser too old for :has() shows both panels. That is exactly what this
   screen looked like before the choice existed, so the fallback is the
   previous product rather than a broken one. */
#source-panels:has(#source_text:checked) #source-link,
#source-panels:has(#source_link:checked) #source-text {
  display: none;
}

/* /sample and the lead preview: one phone size (askello/pages/_guide_device).
   The device is laid out at a real phone's 390px and drawn at a fixed
   fraction of it, a step smaller on short laptop screens. Below `sm` there
   is no bezel: the guide is the page. */
@media (min-width: 40rem) {
  .sample-zoom { zoom: 0.8; }
}
@media (min-width: 40rem) and (max-height: 860px) {
  .sample-zoom { zoom: 0.72; }
}
@media (min-width: 40rem) and (max-height: 720px) {
  .sample-zoom { zoom: 0.62; }
}

/* /sample's phone is whole on screen beside its words, so it steps down
   further, by measurement (2026-09-25): its top edge sits 173px down at
   every zoom from 64rem up (the strip, the toggle and the live pill are not
   zoomed) and it is 770px tall before zoom, so zoom z needs a page
   173 + 770z px tall, and each step keeps 8px to spare. The steps above
   left the bezel's bottom edge off a /sample page 721 to 728px tall, and off
   any page under 651px, the chat bubble too under 638px: a 1366x768
   laptop's browser leaves the page about 600 to 640px. Not for the lead
   preview, whose phone sits below its banner and is scrolled to at every
   height, and not for a touch screen: no step fits a phone held sideways,
   and a smaller phone would only be harder to read. */
@media (min-width: 40rem) and (max-height: 735px) {
  @media not all and (pointer: coarse) {
    .sample-stage .sample-zoom { zoom: 0.62; }   /* needs 659px */
  }
}
@media (min-width: 40rem) and (max-height: 658px) {
  @media not all and (pointer: coarse) {
    .sample-stage .sample-zoom { zoom: 0.56; }   /* needs 613px */
  }
}
@media (min-width: 40rem) and (max-height: 612px) {
  @media not all and (pointer: coarse) {
    .sample-stage .sample-zoom { zoom: 0.5; }    /* needs 567px */
  }
}

/* /sample's page (owner, 2026-09-25: the phone "should be in center of the
   screen not on the side"). On a laptop, three columns whose outer two are
   equal, so the phone in the middle is centred on the screen exactly: the
   words that say what this is on its left, what to try and the door card on
   its right, each filling its column, so their outer edges are the footer's
   (the stage and the footer are one width). On a tablet the phone is on top
   and the two columns sit side by side under it; on a phone the guide comes
   first and the words follow. In web mode (the toggle's Web button pressed)
   the words step aside and the guide takes the width — `:has()` so the page
   needs no script of its own. */
.sample-stage {
  display: flex;
  flex-direction: column;
}
.sample-phone {
  order: 1;
  min-width: 0;
}
/* On a phone the guide is the page, edge to edge, as a guest's phone shows
   it (2026-09-25): out through the stage's own side padding. */
@media (width < 40rem) {
  .sample-phone { margin-inline: -1rem; }
}
.sample-intro {
  order: 2;
  padding-block: 1.5rem 0.5rem;
}
.sample-aside {
  order: 3;
  padding-block: 1rem 0.5rem;
}
@media (min-width: 48rem) and (width < 64rem) {
  .sample-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .sample-phone {
    grid-column: 1 / -1;
  }
  .sample-aside {
    padding-block: 1.5rem 0.5rem;
  }
}
@media (min-width: 64rem) {
  .sample-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 3.5vw, 4rem);
    padding-block: 0.5rem;
  }
  .sample-intro,
  .sample-phone,
  .sample-aside {
    order: 0;
    padding-block: 0;
  }
}
.sample-stage:has(#sample-mode-web[aria-pressed="true"]) {
  display: block;
}
.sample-stage:has(#sample-mode-web[aria-pressed="true"]) .sample-intro,
.sample-stage:has(#sample-mode-web[aria-pressed="true"]) .sample-aside {
  display: none;
}

/* The card a guest scans by the door, in miniature: the printed card's
   white, its name, its code and its address (host/qr_codes/print), set down
   at a slight angle beside the phone like the card itself on a shelf. Here
   it opens this sample on the visitor's own phone. */
.sample-door__card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--color-line);
  border-radius: 0.9rem;
  background: #fff;
  padding: 0.65rem 0.65rem 0.5rem;
  box-shadow: 0 18px 30px -22px rgba(18, 33, 58, 0.55);
  transform: rotate(-2.5deg);
}
.sample-door__name {
  max-width: 7.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-ink);
}
.sample-door__host {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--color-slate);
}

/* The footer's other languages: this page wears the guest layout, which does
   not load the marketing sheet where the flags are sized. */
.sample-foot .ak-locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.sample-foot .ak-locale-switch:hover,
.sample-foot nav a:hover {
  color: var(--color-ink);
}
.sample-foot .ak-flag {
  flex: none;
  width: 1.25rem;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(18, 33, 58, 0.18);
}

/* /sample: the phone says it is live (owner, 2026-09-23: "make sure … its
   obvious to users that the mobile sample is interactive"). A pill above it
   with a breathing dot, and a lamp-coloured pulse on the two things to tap —
   the cover's "Get started" and the chat bubble — until the first tap
   inside the phone (sample_hint_controller.js adds .is-touched). */
.sample-live {
  display: flex;
  width: fit-content;
  margin: 0 auto -0.25rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
}
/* A prospect's sample on a phone keeps its strip at the top of the screen
   (lead_previews/_phone_strip), so a jump to a chapter stops below the
   strip rather than under it. */
@media (width < 40rem) {
  html:has(#lead-preview-strip) { scroll-padding-top: 4.5rem; }
}
/* On a phone the guide below it is the page, edge to edge, so the pill
   keeps its own room under the strip. */
@media (width < 40rem) {
  .sample-live { margin-block: 0.75rem -0.25rem; }
}
.sample-live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-lamp);
}
.sample-try {
  transition: border-color 0.15s, transform 0.15s;
}
.sample-try:hover {
  transform: translateY(-1px);
}
@media (min-width: 64rem) {
  .sample-try:hover {
    transform: translateX(-2px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sample-live__dot {
    animation: sample-breathe 1.8s ease-in-out infinite;
  }
  .sample-stage:not(.is-touched) #get-started,
  .sample-stage:not(.is-touched) .ask-sheet:not([open]) > summary .ask-sheet__bubble {
    animation: sample-pulse 1.9s ease-out infinite;
  }
}
@keyframes sample-breathe {
  50% { opacity: 0.35; }
}
@keyframes sample-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 178, 76, 0.75); }
  70% { box-shadow: 0 0 0 14px rgba(242, 178, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 178, 76, 0); }
}