/* ════════════════════════════════════════════════════════════════
   Companion Health — Shared Mobile Stylesheet
   Loaded by every static institutional surface (/docs, /trust,
   /cin, /brandOS). Desktop layouts inherit unchanged.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  html, body { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.55; }

  .bos,
  .fdd, .fdd-shell, .fdd-doc,
  .gtp, .gtp-shell, .gtp-doc,
  .cin, .cin-shell, .cin-doc,
  [class*="-grid"][style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .bos-nav, .fdd-nav, .gtp-nav, .cin-nav,
  aside[role="navigation"], aside.toc, aside.sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 280px;
    overflow-y: auto;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(10,20,12,0.12) !important;
    padding: 18px 18px !important;
  }

  .bos-doc, .fdd-doc, .gtp-doc, .cin-doc,
  main, article, .doc, .doc-col {
    padding: 24px 18px !important;
    max-width: 100% !important;
  }

  h1, .h1, .display, .display-1 {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
  }
  h2, .h2 { font-size: clamp(22px, 5.4vw, 32px) !important; line-height: 1.18 !important; }
  h3, .h3 { font-size: clamp(18px, 4.6vw, 24px) !important; }

  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  a, button, [role="button"], .btn, .cta { min-height: 44px; }
  a, button { touch-action: manipulation; }

  img, svg, figure, .figure, .diagram { max-width: 100% !important; height: auto !important; }

  html, body { overflow-x: hidden; }
}

/* ────────────────────────────────────────────────────────────────
   Content overflow remediation (Docs / Trust / CIN cards & code)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Force any inline 2-col grid (the "Why Fetch Exists" card pair, etc.)
     to a single column so each cell has full width. */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards: ensure padding + text wrap room */
  main div[style*="border:1px solid"],
  main div[style*="border: 1px solid"] {
    min-width: 0 !important;
  }

  /* Code blocks: allow horizontal scroll inside the card instead of clipping */
  pre, code,
  div[style*="overflow-x:auto"],
  div[style*="overflow:auto"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  pre { white-space: pre !important; }

  /* Tab strips (cURL / Node / Python / POST …) — let them wrap */
  div[style*="display:flex"][style*="border-bottom"] {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Mobile drawer for static institutional surfaces with inline-styled
   side panels (docs, trust, cin). Activated by mobile-drawer.js.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Hide the fixed-width left nav and right rail by default */
  nav[style*="width:266px"],
  nav[style*="width:280px"],
  nav[style*="width:288px"],
  .bos-nav,
  .cin-mobile-drawer,
  aside[style*="width:280px"],
  aside[style*="width:288px"] {
    display: none !important;
  }

  /* CIN: hide right-edge dot rail */
  .cin-mobile-hide,
  div[style*="position:fixed"][style*="right:30px"][style*="top:50%"]:not(.cin-mobile-drawer) {
    display: none !important;
  }

  /* Drawer overlay — SOLID background so content behind never bleeds through */
  body.mobile-nav-open nav[style*="width:266px"],
  body.mobile-nav-open nav[style*="width:280px"],
  body.mobile-nav-open nav[style*="width:288px"],
  body.mobile-nav-open .bos-nav,
  body.mobile-nav-open .cin-mobile-drawer {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important;
    transform: none !important;
    width: min(82vw, 312px) !important;
    height: 100dvh !important;
    height: 100svh !important;
    max-height: 100dvh !important;
    max-height: 100svh !important;
    z-index: 130 !important;
    background: #071008 !important;
    color: #F4F6F1 !important;
    box-shadow: 18px 0 44px rgba(0,0,0,0.34);
    animation: mdDrawerIn .24s ease-out both;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    padding-top: 56px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  }
  /* Force every text/dot child inside the drawer to a readable light tone */
  body.mobile-nav-open nav[style*="width:266px"] *,
  body.mobile-nav-open nav[style*="width:280px"] *,
  body.mobile-nav-open nav[style*="width:288px"] *,
  body.mobile-nav-open .bos-nav *,
  body.mobile-nav-open .cin-mobile-drawer * {
    color: #F4F6F1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  body.mobile-nav-open nav[style*="width:266px"] [style*="background"],
  body.mobile-nav-open nav[style*="width:280px"] [style*="background"],
  body.mobile-nav-open nav[style*="width:288px"] [style*="background"],
  body.mobile-nav-open .bos-nav .active,
  body.mobile-nav-open .cin-mobile-drawer [style*="background"] {
    background: rgba(177,218,185,0.12) !important;
  }
  body.mobile-nav-open nav[style*="width:266px"] [style*="border"],
  body.mobile-nav-open nav[style*="width:280px"] [style*="border"],
  body.mobile-nav-open nav[style*="width:288px"] [style*="border"],
  body.mobile-nav-open .bos-nav [style*="border"] {
    border-color: rgba(177,218,185,0.20) !important;
  }
  body.mobile-nav-open nav[style*="width:266px"]::-webkit-scrollbar,
  body.mobile-nav-open nav[style*="width:280px"]::-webkit-scrollbar,
  body.mobile-nav-open nav[style*="width:288px"]::-webkit-scrollbar,
  body.mobile-nav-open .bos-nav::-webkit-scrollbar,
  body.mobile-nav-open .cin-mobile-drawer::-webkit-scrollbar { width: 6px; }
  body.mobile-nav-open nav[style*="width:266px"]::-webkit-scrollbar-thumb,
  body.mobile-nav-open nav[style*="width:280px"]::-webkit-scrollbar-thumb,
  body.mobile-nav-open nav[style*="width:288px"]::-webkit-scrollbar-thumb,
  body.mobile-nav-open .bos-nav::-webkit-scrollbar-thumb,
  body.mobile-nav-open .cin-mobile-drawer::-webkit-scrollbar-thumb {
    background: rgba(177,218,185,0.54);
    border-radius: 3px;
  }

  @keyframes mdDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

  /* Topbar: reserve room for the hamburger on the LEFT */
  div[style*="height:54px"][style*="background:#070D08"] {
    padding-left: 58px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  /* Hide secondary widgets that crowd the bar */
  div[style*="height:54px"][style*="background:#070D08"] > div[style*="min-width:230px"],
  div[style*="height:54px"][style*="background:#070D08"] > div[style*="height:30px"][style*="rgba(177,218,185,0.18)"],
  div[style*="height:54px"][style*="background:#070D08"] > span[style*="#C79AD4"] {
    display: none !important;
  }

  /* Hamburger — top-LEFT, blends with nav header */
  .md-hamburger {
    position: fixed !important;
    top: 10px; left: 12px; right: auto;
    z-index: 140;
    width: auto;
    height: 34px;
    min-height: 34px !important;
    min-width: 34px;
    padding: 0 9px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    gap: 6px;
    background: rgba(7,16,8,0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #B1DAB9;
    border: 1px solid rgba(177,218,185,0.48);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Suisse Intl Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
  }
  .md-hamburger svg { width: 16px; height: 16px; flex: none; }
  .md-hamburger:hover { background: rgba(177,218,185,0.14); border-color: rgba(177,218,185,0.66); }
  .md-hamburger:active { transform: scale(.97); }
  .md-hamburger .md-hamburger-label { display: inline; }
  body.mobile-nav-open .md-hamburger {
    background: rgba(177,218,185,0.18);
    border-color: rgba(177,218,185,0.6);
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
  }

  /* Scrim */
  .md-scrim {
    position: fixed; inset: 0;
    background: rgba(6,12,7,0.42);
    z-index: 125;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.mobile-nav-open .md-scrim { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }
}

/* Page identity chip injected into the property nav bar. */
.md-page-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 42vw;
  height: 30px;
  padding: 0 10px;
  color: #B1DAB9;
  border: 1px solid rgba(177,218,185,0.28);
  border-radius: 4px;
  font-family: 'Suisse Intl Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-floating-header {
  display: none;
}

@media (max-width: 1024px) {
  .md-floating-header {
    position: fixed;
    top: 8px;
    left: 56px;
    right: 10px;
    z-index: 120;
    height: 38px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    pointer-events: none;
  }
  .md-floating-header .md-page-title,
  .md-floating-header .md-home-link {
    pointer-events: auto;
    background: rgba(7,16,8,0.98);
  }
  .md-floating-header .md-home-link { margin-left: 0; }
  body.md-has-floating-header .bos-main,
  body.md-has-floating-header main:first-of-type {
    padding-top: 42px !important;
  }
}

/* Substitute the Companion wordmark with the white brandmark on phones.
   Use absolute /brand/mark-white.svg so any property serves it. */
@media (max-width: 640px) {
  div[style*="height:54px"][style*="background:#070D08"] a[aria-label*="Companion"] img {
    content: url("/brand/mark-white.svg") !important;
    height: 24px !important;
    width: 24px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  .md-hamburger { padding: 0 !important; min-width: 34px !important; width: 34px !important; }
  .md-hamburger .md-hamburger-label { display: none !important; }
  /* Hide the property badge (Docs/Trust) chip on phones to free width */
  div[style*="height:54px"][style*="background:#070D08"] > div:first-child > span[style*="border:1px solid rgba(255,255,255,.18)"] {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .md-hamburger, .md-scrim { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   Home-link affordance — appears in every property topbar and at
   the top of the mobile drawer. Suisse Mono, sage outline on dark.
   ──────────────────────────────────────────────────────────────── */
.md-home-link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  margin-left: 8px;
  background: rgba(177,218,185,0.06);
  color: #B1DAB9;
  border: 1px solid rgba(177,218,185,0.32);
  border-radius: 4px;
  font-family: 'Suisse Intl Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.md-home-link:hover {
  background: rgba(177,218,185,0.16);
  border-color: rgba(177,218,185,0.55);
}
.md-home-drawer {
  display: block;
  padding: 14px 18px;
  margin: 0 0 8px;
  background: rgba(177,218,185,0.06);
  color: #B1DAB9 !important;
  border: 1px solid rgba(177,218,185,0.28);
  border-radius: 4px;
  font-family: 'Suisse Intl Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

/* On tablets/phones, hamburger is at top-left — push the home link
   to the right of the brand so it stays visible and tappable. */
@media (max-width: 1024px) {
  .md-home-link {
    height: 30px;
    font-size: 10px;
    margin-left: auto;
  }
}

/* ────────────────────────────────────────────────────────────────
   Mobile brand compliance + overflow hardening across property pages.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body { overflow-x: hidden !important; }

  main, article, section, header, footer,
  .fdd-doc, .gtp-doc, .cin-doc, .bos-main,
  .vol-inner, .preamble, .bos-cover, .vol-open {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main [style*="grid-template-columns"],
  section [style*="grid-template-columns"],
  .bos-main [style*="grid-template-columns"],
  .rules, .htr, .vocab, .swatches, .logo-wall, .inventory,
  .signature, .charlist, .mesh-grid, .meshgrad-grid,
  .constmap .cm-cols, .repo-defs .rd {
    grid-template-columns: 1fr !important;
  }

  main [style*="display:flex"],
  section [style*="display:flex"] {
    min-width: 0 !important;
  }

  main [style*="min-width:240px"],
  section [style*="min-width:240px"],
  main [style*="width:300px"],
  section [style*="width:300px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  main div[style*="padding:64px"],
  main div[style*="padding:54px"],
  main div[style*="padding:48px"],
  main div[style*="padding:46px"],
  main div[style*="padding:18px 64px"],
  .vol-inner, .preamble, .bos-cover, .vol-open {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  main h1, main h2, main h3,
  .bos-main h1, .bos-main h2, .bos-main h3,
  .art-title, .vo-title, .cv-inner h1 {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  main p, main li, main span, main div,
  .bos-main p, .bos-main li, .bos-main span, .bos-main div {
    overflow-wrap: anywhere;
  }

  pre, code, .repo, table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  img[src*="Companion"], img[src*="companion"], img[alt*="Companion"] {
    max-height: 28px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  footer img, [class*="footer"] img, [class*="Footer"] img, .nav-foot img,
  footer svg, [class*="footer"] svg, [class*="Footer"] svg {
    max-height: 22px !important;
    width: auto !important;
  }

  footer, [class*="footer"], [class*="Footer"], .nav-foot {
    font-family: 'Suisse Intl Mono', ui-monospace, monospace !important;
    font-size: 9px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.10em !important;
    overflow-wrap: anywhere !important;
  }

  /* CIN-specific typography: preserve institutional tone, prevent oversized mobile headings. */
  body:has(#cin-00) h1 { font-size: clamp(40px, 13vw, 58px) !important; line-height: 1.02 !important; }
  body:has(#cin-00) h2 { font-size: clamp(28px, 9vw, 44px) !important; line-height: 1.08 !important; }
  body:has(#cin-00) section { padding-left: 22px !important; padding-right: 22px !important; }
  body:has(#cin-00) canvas { max-width: 100% !important; height: min(420px, 70vh) !important; }
}

@media (max-width: 480px) {
  .md-page-title { max-width: 38vw; height: 28px; padding: 0 8px; font-size: 9px; letter-spacing: 0.12em; }
  .md-home-link { height: 28px; padding: 0 9px; font-size: 9px; letter-spacing: 0.12em; }
  main div[style*="padding:64px"],
  main div[style*="padding:54px"],
  main div[style*="padding:48px"],
  main div[style*="padding:46px"],
  .vol-inner, .preamble, .bos-cover, .vol-open {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}