/* ─────────────────────────────────────────────────────────────────────────
   App shell — layout only. Every colour, radius, font and space here is a
   design-system token, so the same markup renders in any of the six
   directions in ds/. Load exactly one ds/frame-<system>.css alongside it
   (or all six, on the comparison canvas).

   Responsiveness is driven by a container query on .app-shell, not the
   viewport, so a 390px-wide frame on a 1440px canvas gets the mobile
   layout. Density scales through --density-mult, set on .app-shell.

   Specificity note. The design systems scope every component rule as
   `.frame-<system> .btn`, `.frame-<system> .nav` and so on — (0,2,0). Where
   this file restyles an element that also carries a design-system class
   (.app-topbar is also .nav; the two nav toggles are also .btn) a plain
   single-class rule loses, whatever the load order. Those three rules below
   are written as `.app-shell .x.y` — (0,3,0) — so app layout wins outright.
   Everywhere else the app uses classes the systems never touch, and single
   class selectors are correct.
   ───────────────────────────────────────────────────────────────────────── */

/* Visually hidden but still announced — used for the industry select's label,
   which the design shows as an unlabelled control in the topbar. */
.u-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.app-shell { display: flex; height: 100%; width: 100%; background: var(--color-bg); color: var(--color-text); container-type: inline-size; container-name: shell; position: relative; overflow: hidden; }

/* — sidebar — */
/* No width transition, deliberately. Inside a size container (.app-shell is
   container-type: inline-size) a transition on width never progresses here:
   the sidebar stays pinned at its start value for good. Carried over from the
   design doc, where it was equally inert — with the collapse toggle it only
   cost the animation, but once the tablet breakpoint also changes this width
   it left the rail stuck at 240px. Snapping is correct and reliable. */
.app-sidebar { width: 240px; flex: none; display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-divider); overflow: hidden; }
.app-sidebar.collapsed { width: 72px; }
.app-sidebar.collapsed .nav-label { display: none; }
.sidebar-head { display: flex; align-items: center; gap: 10px; padding: calc(var(--space-4) * var(--density-mult, 1)); }
.brand-mark { width: 26px; height: 26px; flex: none; border-radius: var(--radius-md); background: var(--color-accent); }
.brand-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; margin-right: auto; white-space: nowrap; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 calc(var(--space-2) * var(--density-mult, 1)); flex: 1; overflow-y: auto; }
.side-link { display: flex; align-items: center; gap: 12px; padding: calc(9px * var(--density-mult, 1)) calc(10px * var(--density-mult, 1)); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-size: 13.5px; white-space: nowrap; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
.side-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.side-link.active { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.side-link .icon { flex: none; display: flex; }
.icon svg { width: 18px; height: 18px; display: block; stroke-width: 1.75; }
.sidebar-foot { display: flex; align-items: center; gap: 10px; padding: var(--space-4); border-top: 1px solid var(--color-divider); }
.avatar-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--color-neutral-400); flex: none; }
.avatar-circle.small { width: 30px; height: 30px; }
.user-meta { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; overflow: hidden; }
.user-meta strong { font-size: 13px; }
.user-meta span { opacity: .65; }

/* — main column — */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* .app-topbar is also .nav — beats .frame-<system> .nav { border-bottom } */
.app-shell .app-topbar.nav { justify-content: flex-end; border-bottom: 1px solid var(--color-divider); flex: none; }
/* also .btn — beats .frame-<system> .btn { display: inline-flex } */
.app-shell .mobile-menu-btn.btn { display: none; }
.topbar-search { display: flex; align-items: center; gap: 8px; margin-right: auto; max-width: 320px; flex: 1; }
.topbar-search .icon { opacity: .55; }
.topbar-search .input { border: none; background: transparent; padding-left: 0; }
.topbar-industry { display: flex; align-items: center; margin-right: 12px; }
.topbar-link { white-space: nowrap; text-decoration: none; }
.device-toggle { display: flex; align-items: center; gap: 2px; }
.app-shell .device-toggle .btn.active { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }

/* Device preview, demo only. Constraining the mount is the whole mechanism:
   .app-shell measures 100% of it and its own inline size is what the
   container queries read, so what appears is the real layout for that width
   — not a shrunken picture of the desktop one. */
[data-device="tablet"], [data-device="mobile"] {
  margin-inline: auto; max-width: 100%;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 44px rgba(0,0,0,.3);
}
[data-device="tablet"] { width: 834px; }
[data-device="mobile"] { width: 390px; }
.topbar-industry select.input { width: auto; max-width: 240px; font-size: 13px; }
.app-content { flex: 1; overflow-y: auto; padding: calc(var(--space-6) * var(--density-mult, 1)); display: flex; flex-direction: column; gap: calc(var(--space-6) * var(--density-mult, 1)); }
.content-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--density-mult, 1)); }
.content-head h1 { margin-bottom: 4px; }

/* — dashboard pieces — */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--space-4) * var(--density-mult, 1)); }
.stat-card { min-height: 90px; }
.stat-value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; }
.trend-up { color: var(--color-accent); }
.trend-down { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.trend-warn { color: var(--color-accent-2); }
.table-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.table-card { overflow-x: auto; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-4) * var(--density-mult, 1)); }
.progress-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); }
.bar-chart { display: flex; align-items: flex-end; gap: var(--space-4); height: 200px; padding-top: var(--space-4); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar-shape { width: 100%; max-width: 40px; background: var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bar-label { font-size: 11px; opacity: .65; }
.settings-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }

/* — layout-feel variants: nav position and card elevation — */
.topnav-bar { display: none; align-items: center; gap: 4px; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-divider); overflow-x: auto; }
.topnav-bar .side-link { width: auto; }
.app-shell.nav-topbar .app-sidebar { display: none; }
.app-shell.nav-topbar .topnav-bar { display: flex; }
.app-shell.card-flat .elev-sm, .app-shell.card-flat .elev-md, .app-shell.card-flat .elev-lg { box-shadow: none; border: 1px solid var(--color-divider); }

/* — tablet: the sidebar drops to an icon rail —
   A 240px sidebar eats a third of an 834px screen, so the tablet band is a
   real layout of its own rather than a narrow desktop: the rail keeps
   navigation one tap away while the content gets the width back. Must precede
   the mobile block, which overrides it. */
@container shell (max-width: 900px) {
  .app-sidebar { width: 72px; }
  .app-sidebar .nav-label { display: none; }
  .app-shell .sidebar-desktop-collapse.btn { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .topbar-search { max-width: 200px; }
  .topbar-industry select.input { max-width: 170px; }
}

/* — mobile: the sidebar becomes an overlay drawer — */
@container shell (max-width: 520px) {
  .app-sidebar { position: absolute; top: 0; left: 0; height: 100%; z-index: 20; width: 240px !important; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
  .app-shell.mobile-open .app-sidebar { transform: translateX(0); }
  .app-shell.mobile-open::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 10; }
  .app-shell .mobile-menu-btn.btn { display: inline-flex; }
  .app-shell .sidebar-desktop-collapse.btn { display: none; }
  .app-shell.nav-topbar .app-sidebar { position: absolute; }
  .app-shell.nav-topbar .mobile-menu-btn { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .topbar-search { display: none; }
  .topbar-industry select.input { max-width: 130px; font-size: 11px; padding: 6px 8px; }
  /* 390px does not fit the whole topbar. What goes is what is decorative or
     reachable elsewhere; the device toggle stays, because hiding it in the
     narrowest preview would strand you there with no way back to desktop. */
  .app-shell .notif-btn.btn { display: none; }
  .app-shell .topbar-link { display: none; }
  .app-topbar .avatar-circle.small { display: none; }
  .app-topbar.nav { gap: var(--space-2); }
  .content-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .app-content { padding: var(--space-4); }
}