/* layout.css — App-shell grid.
   Ported from qa/web-redesign/direction-A.html L150-528.
   Provides: .app .sidebar .main .topbar .content .inspector
             data-inspector="open" | data-drawer="open"
   Consumed by: index.html (F21), components/sidebar.js (F9), router.js (F12).
   Depends on: tokens.css (F1) — uses --sidebar-w, --inspector-w, --topbar-h,
               --surface, --separator, --hairline, --material-bar, --blur-*, etc. */

/* ===========================================================================
   §1 APP SHELL GRID
   =========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 100vh;
  height: 100vh;
}

.app[data-inspector="open"] {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--inspector-w);
}

/* ===========================================================================
   §2 LEFT SIDEBAR (persistent nav)
   =========================================================================== */
.sidebar {
  grid-row: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: var(--hairline) solid var(--separator);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  flex: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-pressed));
  display: grid;
  place-items: center;
  color: #fff;
  font: var(--t-title-3);
  box-shadow: var(--shadow-1);
}

.brand-text h1 { font: var(--t-headline); margin: 0; letter-spacing: -.2px; }
.brand-text p  { font: var(--t-caption-2); letter-spacing: .3px; color: var(--text-3); margin: 2px 0 0; text-transform: uppercase; }

.nav-sections { padding: 0 var(--sp-3) var(--sp-2); flex: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font: var(--t-subhead);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.nav-link .ic { width: 22px; text-align: center; font-size: 16px; flex: none; }
.nav-link:hover { background: var(--fill); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-link[aria-current="page"] .ic { filter: none; }

.side-divider  { height: var(--hairline); background: var(--separator); margin: var(--sp-3) var(--sp-5); }
.side-scroll   { flex: 1 1 auto; min-height: 0; padding: 0 var(--sp-3) var(--sp-4); overflow-y: auto; }

.side-grouplabel {
  font: var(--t-caption-1);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Product-line picker rows */
.pl-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-standard);
}
.pl-row:hover { background: var(--fill); }
.pl-row[aria-current="true"] { background: var(--accent-soft); }

.pl-dot   { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pl-name  { font: var(--t-subhead); flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pl-name small { font: var(--t-caption-2); color: var(--text-3); letter-spacing: .2px; text-transform: none; }
.pl-count {
  font: var(--t-caption-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  background: var(--fill);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.pl-row[aria-current="true"] .pl-count { background: var(--accent-soft-2); color: var(--accent-ink); }

/* Tube-spec rows nested under selected line */
.tube-list { margin: var(--sp-1) 0 var(--sp-2) var(--sp-5); display: none; }
.pl-row[aria-current="true"] + .tube-list { display: block; }

.tube-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 6px var(--sp-3);
  border: none;
  background: transparent;
  border-left: 2px solid var(--separator);
  cursor: pointer;
  text-align: left;
  color: var(--text-2);
  font: var(--t-footnote);
}
.tube-row:hover { background: var(--fill); }
.tube-row[aria-current="true"] { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; }
.tube-row .mono { font-size: 12px; }

/* ===========================================================================
   §3 MAIN COLUMN (topbar + scrollable content)
   =========================================================================== */
.main {
  grid-row: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Topbar — 56px, fixed height, frosted glass; FIX v7 §1.5: no large-title collapse */
.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-6);
  border-bottom: var(--hairline) solid var(--separator);
  background: var(--material-bar);
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
          backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-bar));
  position: relative;
  z-index: 30;
}
.topbar h2 { font: var(--t-title-3); margin: 0; letter-spacing: -.2px; white-space: nowrap; }
.crumb { font: var(--t-footnote); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.crumb b { color: var(--text-2); font-weight: 600; }
.topbar-spacer { flex: 1; }

/* Search widget (topbar) */
.search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-3);
  min-width: 220px;
  background: var(--fill);
  border-radius: var(--r-pill);
  color: var(--text-3);
  border: var(--hairline) solid transparent;
}
.search:focus-within { border-color: var(--accent); background: var(--surface); }
.search input { border: none; background: transparent; outline: none; font: var(--t-subhead); color: var(--text); width: 100%; }
.search input::placeholder { color: var(--text-4); }

/* Icon button (topbar actions) */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-spring);
}
.icon-btn:hover  { background: var(--fill); }
.icon-btn:active { transform: scale(.94); }

/* Content pane — independent scroll; FIX v7: no shared body scroll */
.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-7) var(--sp-10);  /* more-Toss: breezier */
}
.content-inner { max-width: 1080px; margin: 0 auto; }

/* View slots (router toggles .active) */
.view { display: none; }
.view.active {
  display: block;
  animation: viewIn var(--dur-base) var(--ease-decel);
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to   { opacity: 1; transform: none; }
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.page-head .lt  { font: var(--t-title-1); letter-spacing: -.3px; margin: 0; }
.page-head .sub { font: var(--t-footnote); color: var(--text-3); margin-top: 4px; }

/* ===========================================================================
   §4 RIGHT INSPECTOR PANEL — grid column on desktop; overlay on mobile
   =========================================================================== */
.inspector {
  grid-row: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: var(--hairline) solid var(--separator);
}
.app:not([data-inspector="open"]) .inspector { display: none; }

.insp-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: var(--hairline) solid var(--separator);
}
.insp-title { flex: 1; min-width: 0; }
.insp-title .eyebrow { font: var(--t-caption-1); letter-spacing: .3px; text-transform: uppercase; color: var(--text-3); }
.insp-title h3 { font: var(--t-title-3); margin: 2px 0 0; letter-spacing: -.2px; }

.insp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5); }

.insp-actions {
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--hairline) solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface);
}
.insp-actions .pill { width: 100%; }
.insp-actions .row-actions { display: flex; gap: var(--sp-2); }
.insp-actions .row-actions .pill { flex: 1; }

/* ===========================================================================
   §5 RESPONSIVE — reflow to stacked + drawer on narrow viewports.
   Inspector becomes a right overlay sheet; sidebar becomes a slide-in drawer.
   Touch sizing (44px) via @media(pointer:coarse) only — never penalise desktop.
   NO mobile bottom-bars. NO large-title-collapse.
   =========================================================================== */
@media (max-width: 1180px) {
  :root {
    --inspector-w: 340px;
    --sidebar-w:   256px;
  }
}

@media (max-width: 900px) {
  .app,
  .app[data-inspector="open"] {
    grid-template-columns: 1fr;
  }

  /* Sidebar → slide-in drawer from left */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 280px;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-decel);
    box-shadow: var(--shadow-3);
  }
  .app[data-drawer="open"] .sidebar { transform: translateX(0); }

  /* Overlay scrim behind drawer */
  .drawer-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base);
  }
  .app[data-drawer="open"] .drawer-scrim { opacity: 1; pointer-events: auto; }

  /* Hamburger button (hidden on desktop) */
  .menu-btn { display: grid !important; }

  /* Inspector → right overlay sheet (NOT bottom-sheet — side panel) */
  .inspector {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(420px, 92vw);
    z-index: 130;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-decel);
    box-shadow: var(--shadow-3);
    display: flex !important;
  }
  .app[data-inspector="open"] .inspector { transform: translateX(0); }
  .app:not([data-inspector="open"]) .inspector { display: flex !important; }

  .content-inner { max-width: none; }
}

/* Hamburger hidden by default (desktop) */
.menu-btn { display: none; }

/* Touch-target gate — coarse pointer only (never penalise desktop density) */
@media (pointer: coarse) {
  .row      { min-height: 44px; }
  .nav-link { padding: var(--sp-3); }
  .pl-row   { padding: var(--sp-3); }
  .icon-btn { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRAFT ELEVATION (audit BALANCED — additive; appended so the cached prefix
   above is preserved. Motion all reduce-motion-guarded by tokens.css §BASE.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* B10 — topbar glyph sizing parity with .nav-link .ic so the ☰/🌙/⚙ emoji+symbol
   mix stops jumping the baseline. The icon-btn itself keeps its 36px hit box. */
.icon-btn { line-height: 1; }

/* Nav + product-line rows: spring press feedback (Toss micro-interaction).
   Transform-only, GPU-cheap, neutralised under prefers-reduced-motion. */
.nav-link, .pl-row, .tube-row {
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-spring);
}
.nav-link:active, .pl-row:active { transform: scale(.985); }
.tube-row:active { transform: scale(.99); }

/* active nav-link gets a hairline accent edge — Apple inset-group precision,
   stacks with the existing --accent-soft fill (no contrast change). */
.nav-link[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }

/* B6 — hero rhythm: the large-title → sub relationship is the Toss signature.
   Tighten the title tracking a hair and give the sub a calmer measure. */
.page-head .lt  { letter-spacing: -.4px; }
.page-head .sub { max-width: 60ch; }

/* squircle continuity on the brand mark (leaf element, no overflow children):
   superellipse mask with a graceful border-radius fallback. */
@supports (mask-image: paint(squircle)) or (-webkit-mask-image: none) {
  .brand-mark {
    -webkit-mask-image: radial-gradient(circle, #000 100%, transparent 100%);
  }
}

/* view-enter spring (Toss): swap the decel ease for a gentle overshoot. The
   8px rise is unchanged; reduce-motion collapses the whole keyframe. */
.view.active { animation: viewIn var(--dur-base) var(--ease-spring); }

/* ═══════════════════════════════════════════════════════════════════════════
   more-TOSS DIAL (appended; preserves cached prefix). Springier + more press
   delight + breezier hero air. All motion neutralised by the tokens.css §BASE
   prefers-reduced-motion guard (which stays LAST in the cascade).
   ═══════════════════════════════════════════════════════════════════════════ */

/* a touch more press travel on the nav + product-line rows (Toss micro-delight) */
.nav-link:active, .pl-row:active { transform: scale(.97); }
.tube-row:active { transform: scale(.98); }
.icon-btn:active { transform: scale(.9); }

/* hero title air — the large-title→sub relationship is the Toss signature */
.page-head .lt  { letter-spacing: -.4px; }