/* ============================================================================
   Verity · app.css — the console shell. Topbar, sidebar, drawer, page
   furniture and the structural breakpoints. Components live elsewhere.
   ========================================================================== */

/* ── Grid ────────────────────────────────────────────────────────────────── */
.shell {
  min-height: 100vh;
  display: grid;
  /* minmax(0,1fr) is load-bearing: without it a wide table forces the grid
     track and the whole page scrolls sideways. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar topbar" "sidebar main drawer";
}
.shell[data-drawer='docked'] { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--drawer-w); }
.shell[data-sidebar='rail']  { --sidebar-w: var(--sidebar-w-rail); }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--chrome);
  color: var(--ink-on-chrome);
  border-bottom: 1px solid var(--chrome-line);
}
/* .brand and .brand-mark live in components.css — both shells use them. */

.topbar-sep { width: 1px; height: 22px; background: var(--chrome-line); flex: none; }

/* Scope bar — org › region › home › unit. Each segment is a real control. */
.scope { display: flex; align-items: center; gap: 2px; min-width: 0; }
.scope-seg {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 30px; padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  color: var(--ink-on-chrome-2); font-size: var(--t-meta); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.scope-seg:last-child { color: var(--ink-on-chrome); font-weight: 600; }
.scope-seg .ic { opacity: .55; }
.scope-div { color: var(--ink-on-chrome-2); opacity: .5; font-size: var(--t-meta); }
@media (hover: hover) and (pointer: fine) {
  .scope-seg:hover { background: var(--chrome-2); color: var(--ink-on-chrome); }
}

/* Search opens the command palette. Never animated — it is keyboard-first. */
.topbar-search {
  flex: 1 1 auto; max-width: 460px; min-width: 0;
  display: flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-3);
  background: var(--chrome-2); border: 1px solid var(--chrome-line);
  border-radius: var(--r-sm); color: var(--ink-on-chrome-2);
  font-size: var(--t-meta); cursor: pointer; text-align: left;
}
.topbar-search:hover { border-color: var(--chrome-3); color: var(--ink-on-chrome); }
.topbar-search .kbd { margin-left: auto; }
.kbd {
  font-family: var(--font-mono); font-size: var(--t-micro);
  padding: 2px 5px; border-radius: 3px;
  background: rgba(255,255,255,.09); border: 1px solid var(--chrome-line);
  color: var(--ink-on-chrome-2); white-space: nowrap;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-on-chrome-2);
  position: relative;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.icon-btn:hover { background: var(--chrome-2); color: var(--ink-on-chrome); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-full);
  background: var(--st-critical-fill); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  font-family: var(--font-mono);
}

.who {
  display: flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-2) 0 var(--s-1);
  border-radius: var(--r-sm); color: var(--ink-on-chrome);
  font-size: var(--t-meta); cursor: pointer;
}
.who:hover { background: var(--chrome-2); }
.who-av {
  width: 26px; height: 26px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center;
  background: var(--brand-fill); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.who-name { font-weight: 600; line-height: 1.15; }
.who-role { color: var(--ink-on-chrome-2); font-size: var(--t-micro); line-height: 1.15; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  background: var(--chrome); border-right: 1px solid var(--chrome-line);
  overflow: hidden auto; overscroll-behavior: contain;
}
.nav { padding: var(--s-3) var(--s-2) var(--s-2); flex: 1 1 auto; }
/* Only shown when the topbar has dropped the scope bar (below 768). */
.nav-scope { display: none; padding: var(--s-3) var(--s-2) 0; }
.nav-scope .scope { display: flex; flex-wrap: wrap; }
.nav-section {
  padding: var(--s-4) var(--s-3) var(--s-1);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-on-chrome-2);
}
.nav-section:first-child { padding-top: var(--s-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink-on-chrome-2); text-decoration: none;
  font-size: var(--t-body); font-weight: 500;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.nav-item .ic { flex: none; opacity: .8; }
.nav-item .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--chrome-2); color: var(--ink-on-chrome); }
}
.nav-item.is-active {
  background: var(--chrome-3); color: #fff; font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-ring);
}
.nav-item.is-active .ic { opacity: 1; color: var(--brand-ring); }
.nav-item.is-locked { opacity: .48; cursor: not-allowed; }
.nav-item.is-locked:hover { background: transparent; }
.nav-count {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--chrome-3); color: var(--ink-on-chrome);
  display: grid; place-items: center; flex: none;
}
.nav-count.is-urgent { background: var(--st-critical-fill); color: #fff; }
.nav-count.is-elevated { background: var(--st-elevated); color: #fff; }

.sidebar-foot {
  padding: var(--s-2); border-top: 1px solid var(--chrome-line);
  display: flex; flex-direction: column; gap: 2px; flex: none;
}
.side-btn {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 34px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  color: var(--ink-on-chrome-2); font-size: var(--t-meta); font-weight: 500;
  width: 100%; text-decoration: none;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.side-btn:hover { background: var(--chrome-2); color: var(--ink-on-chrome); }
.side-btn .grow { text-align: left; }
.side-btn .kbd { margin-left: auto; }
.side-btn.is-primary { color: var(--brand-ring); font-weight: 600; }

/* Rail mode: labels become tooltips, nothing is lost. */
.shell[data-sidebar='rail'] .nav-label,
.shell[data-sidebar='rail'] .nav-section,
.shell[data-sidebar='rail'] .side-btn .grow,
.shell[data-sidebar='rail'] .side-btn .kbd { display: none; }
.shell[data-sidebar='rail'] .nav-item,
.shell[data-sidebar='rail'] .side-btn { justify-content: center; padding: 0; }
.shell[data-sidebar='rail'] .nav-section { display: block; height: 1px; padding: var(--s-2) var(--s-3);
  overflow: hidden; text-indent: -999px; }
.shell[data-sidebar='rail'] .nav-section::after {
  content: ''; display: block; height: 1px; background: var(--chrome-line); text-indent: 0; }
.shell[data-sidebar='rail'] .nav-count {
  position: absolute; transform: translate(12px, -12px); }
.shell[data-sidebar='rail'] .nav-item { position: relative; }

/* ── Main ────────────────────────────────────────────────────────────────── */
.main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }

.page-head {
  position: sticky; top: var(--topbar-h); z-index: calc(var(--z-sticky) - 1);
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) var(--gutter) var(--s-3);
  display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap;
}
.page-head h1 { font-size: var(--t-h2); }
.page-title-block { min-width: 0; flex: 1 1 320px; }
.crumbs {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--ink-3); margin-bottom: var(--s-1);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.page-sub { color: var(--ink-2); font-size: var(--t-body); margin-top: var(--s-1); }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.page-body { padding: var(--gutter); flex: 1 1 auto; }
.page-body > * + * { margin-top: var(--gutter); }

/* Layout grids live in base.css — the landing, hub and design-system
   pages use them without loading the console shell. */

/* ── Drawer ──────────────────────────────────────────────────────────────── */
.drawer {
  grid-area: drawer;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.shell:not([data-drawer='docked']) .drawer { display: none; }
.drawer-head {
  padding: var(--s-4); border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: var(--s-3); flex: none;
}
.drawer-body { padding: var(--s-4); overflow: hidden auto; flex: 1 1 auto; }

/* Overlay drawer, below 1440. */
.shell[data-drawer='overlay'] .drawer {
  display: flex; position: fixed; right: 0; top: var(--topbar-h);
  width: var(--drawer-w); z-index: var(--z-drawer); box-shadow: var(--e-3);
  animation: drawerIn var(--d-drawer) var(--ease-out);
}
@keyframes drawerIn { from { transform: translateX(12px); opacity: 0; } }

/* ── Mobile sidebar sheet ────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgba(12, 14, 19, .5);
  animation: fade var(--d-pop) var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }

/* ── Responsive. Structural only — type never resizes. ───────────────────── */
/* Only a page that actually asks for a drawer gets the third track. Reserving
   it unconditionally silently stole 400px from every page. */
@media (min-width: 1440px) {
  .shell[data-drawer='docked'],
  .shell[data-drawer='overlay'] { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--drawer-w); }
}
@media (max-width: 1279px) {
  [data-col-pri='3'] { display: none; }
}
@media (max-width: 1023px) {
  .shell { --sidebar-w: var(--sidebar-w-rail); }
  .shell .nav-label, .shell .nav-section, .shell .side-btn .grow,
  .shell .side-btn .kbd { display: none; }
  .shell .nav-item, .shell .side-btn { justify-content: center; padding: 0; position: relative; }
  .shell .nav-count { position: absolute; transform: translate(12px, -12px); }
  [data-col-pri='2'] { display: none; }
  .split, .split-even { grid-template-columns: minmax(0, 1fr); }
  .topbar-search { max-width: none; }
}
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .sidebar {
    position: fixed; left: 0; top: var(--topbar-h); z-index: var(--z-drawer);
    width: 264px; --sidebar-w: 264px;
    transform: translateX(-100%);
    transition: transform var(--d-drawer) var(--ease-out);
  }
  .shell[data-nav-open='true'] .sidebar { transform: translateX(0); }
  .shell[data-nav-open='true'] .nav-label,
  .shell[data-nav-open='true'] .nav-section,
  .shell[data-nav-open='true'] .side-btn .grow { display: block; }
  .shell[data-nav-open='true'] .nav-item,
  .shell[data-nav-open='true'] .side-btn { justify-content: flex-start; padding: 0 var(--s-3); }
  .shell[data-nav-open='true'] .nav-count { position: static; transform: none; }
  .shell[data-nav-open='true'] .nav-scope { display: block; }
  .shell[data-nav-open='true'] .nav-scope .scope-seg,
  .shell[data-nav-open='true'] .nav-scope .scope-div { display: inline-flex; }
  .drawer { position: fixed !important; inset: var(--topbar-h) 0 0 auto !important;
    width: min(100vw - 40px, 440px) !important; z-index: var(--z-drawer); }
  /* The topbar has to shed things in a deliberate order below 768, or the
     scope bar and the search collapse into each other. Scope is still
     reachable — it is repeated at the top of the off-canvas nav sheet. */
  .scope, .topbar-sep { display: none; }
  .topbar { gap: var(--s-2); padding: 0 var(--s-2); }
  .brand { font-size: var(--t-body); }
  .topbar-search {
    flex: 0 0 auto; width: 36px; padding: 0; justify-content: center;
    margin-left: auto;
  }
  .topbar-search .search-label, .topbar-search .kbd { display: none; }
  .topbar-right { margin-left: 0; }
  .who { padding: 0; }
  .who .ic { display: none; }
  .page-head { padding: var(--s-3) var(--s-4); }
  .page-body { padding: var(--s-4); }
  .who-name, .who-role { display: none; }
  /* Management screens degrade to one column and say so rather than
     pretending a CQC evidence pack can be built on a phone. */
  .desktop-only-note { display: block; }
}
.desktop-only-note { display: none; }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .topbar, .sidebar, .drawer, .page-actions, .scrim, .no-print { display: none !important; }
  .shell { display: block; }
  .main { display: block; }
}