/* Mobile layout, injected into every page by the Worker (see src/chrome.js).
 *
 * Why a stylesheet and not edits to the pages: the .dc.html files are exports
 * from the Claude Design project, regenerated whole whenever anything in there
 * is touched. Anything written into them by hand disappears on the next sync.
 * This file is repo-owned, so it survives, and it applies to pages that do not
 * exist yet.
 *
 * Every rule below sits inside a max-width query. Nothing here can change how
 * the site renders on a desktop — that is the point, and it is the reason the
 * selectors are allowed to be as blunt as they are.
 *
 * The pages style almost everything inline, so overriding needs !important and
 * attribute selectors. Where a selector matches on structure rather than a
 * class, it is written to survive the design tool emitting slightly different
 * markup.
 */

/* ---------------------------------------------------------------- always --- */

html {
  /* Stop iOS inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor links land below the sticky header rather than under it. */
  scroll-padding-top: 84px;
}

/* clip, not hidden: hidden on an ancestor silently kills position:sticky,
 * which the marketing header depends on. */
body { overflow-x: clip; }

img, svg, video, canvas, iframe { max-width: 100%; }

/* Momentum scrolling inside the log and any other scroller. */
[style*="overflow-x:auto"], [style*="overflow-y:auto"], .scroll {
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------- the app shells --- */

/* The audit workspace is a three-column desktop app: a 230px rail, the sheet,
 * and a 296px inspector. Below a laptop it has to become one column or the
 * middle column is squeezed to nothing. */
@media (max-width: 1000px) {
  [style*="grid-template-columns:230px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Paired fields sit side by side on a desktop and are unusable at phone width. */
@media (max-width: 700px) {
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* A row only wraps when it would otherwise overflow, so this changes nothing
 * that already fits — it just stops narrow screens scrolling sideways. The
 * account bubble is excluded: it is a single pill that must stay on one line. */
@media (max-width: 760px) {
  [style*="display:flex"]:not([data-vosky-bubble]):not([data-vosky-bubble] *) {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------- the header --- */

@media (max-width: 900px) {
  nav[style*="position:sticky"] > div {
    height: auto !important;
    min-height: 58px;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    gap: 12px !important;
  }
}

/* "SYSTEMS OPERATIONAL" is decoration; it is the first thing to go. */
@media (max-width: 820px) {
  nav[style*="position:sticky"] span[style*="border-radius:999px"] { display: none !important; }
}

/* Then the in-page section links, keeping the brand, Sign in, and the CTA —
 * the three things somebody on a phone actually came for. */
@media (max-width: 640px) {
  nav[style*="position:sticky"] a[href^="#"]:not([href="#book"]):not([href="#top"]) {
    display: none !important;
  }
  nav[style*="position:sticky"] a[href="#book"] { padding: 9px 14px !important; font-size: 13.5px !important; }
}

/* ------------------------------------------------------------ spacing --- */

@media (max-width: 620px) {
  [style*="max-width:1180px"], [style*="max-width:1080px"], [style*="max-width:1240px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Section rhythm that reads as generous on a monitor reads as dead space on
   * a phone. */
  [style*="padding:70px 0"], [style*="padding:80px 0"], [style*="padding:90px 0"] {
    padding-top: 44px !important;
    padding-bottom: 34px !important;
  }
}

/* ---------------------------------------------------------------- type --- */

@media (max-width: 820px) {
  /* Under 16px, iOS zooms the whole page in when a field takes focus and does
   * not zoom back out. This one rule is most of what "feels wrong on mobile"
   * turns out to be on a form. */
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 620px) {
  /* Thumbs, not cursors. Text-style actions keep their size — inflating them
   * would push list rows apart for no gain. */
  button:not(.quiet), a[style*="border-radius:9px"], a[style*="border-radius:11px"] {
    min-height: 44px;
  }
  button:not(.quiet) { display: inline-flex; align-items: center; justify-content: center; }
}

/* -------------------------------------------------- the account bubble --- */

/* Below this the name is dropped and the disc alone is the control, which
 * keeps it clear of whatever the page has in its own top-right corner. */
@media (max-width: 600px) {
  [data-vosky-name] { display: none !important; }
}

/* --------------------------------------------------- the account pages --- */

/* These are ours, not the design tool's, so the selectors can be direct.
 *
 * Everything here is scoped to body.app (/account and /people) or to .card
 * (the sign-in, invite and link pages). A bare `section` or `h1` rule would
 * also land on the marketing page and flatten its vertical rhythm — its
 * sections and its hero heading are inline-styled, and !important beats them. */

@media (max-width: 620px) {
  /* The sign-in, invite and link cards. */
  .card { padding: 24px 20px !important; }

  body.app { padding-left: 14px !important; padding-right: 14px !important; }
  body.app section { padding: 18px 16px !important; }
  body.app h1 { font-size: 20px !important; }

  /* The device and passkey lists: name on its own line with its actions
   * beneath, rather than three columns fighting over 340px. */
  body.app li .grow { min-width: 100% !important; }
  body.app li { gap: 6px !important; }

  /* The invite form's fields go single-file rather than to a 160px minimum. */
  body.app .grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* The access log is genuinely tabular. Let it scroll rather than crush it. */
  body.app .scroll { overflow-x: auto; }
  body.app .scroll table { min-width: 560px; }
}