/* ============================================================
   TIDAL Stack — CHROME (canonical stylesheet)
   Version: chrome v1.1.2 (kit components use private BEM names — .tdl-nav__section / .tdl-header__eyebrow / .tdl-user__avatar / .tdl-actions__btn / .tdl-actions__toggle / .tdl-brand__badge — so the kit shares ZERO class names with host app CSS [v1.1.0]; chrome roots pin line-height:normal so a host body line-height can't inflate chrome text [v1.1.1]; .tdl-header__eyebrow opacity 0.85→1 for WCAG AA contrast, 4.39→5.81:1 [v1.1.2]. No scoping hacks; collisions impossible by construction.) · June 2026

   This file IS the design. It is the single source of truth for the
   sidebar, mobile nav, page header, and header actions across every
   TIDAL product, regardless of stack.

   RULES
   - Products LINK this file unchanged. They do not re-author any rule here.
   - Requires tokens.css to be imported first (provides all var() values).
   - Products emit the exact DOM/classes shown in chrome.html.
   - The ONLY per-product variation is data (logo, badge, nav items,
     eyebrow text, title/subtitle, header actions) — never styling.
   - To change the design, edit THIS file once, bump the version, and
     re-propagate. Never override chrome styles inside a product.

   ENCODED DECISIONS (the regions the old prose spec left open — now closed.
   Disagree? Change the one line here; every product inherits it.)
   1. Active nav item (desktop): subtle grey fill + orange outline + orange
      icon square. (This is what the products converged on; made canonical.)
   2. Active nav item (mobile drawer): translucent orange fill + soft border.
   3. Header actions: defined below (primary / secondary / ghost / toggle).
   4. Mobile page header: 24px 20px 20px, fluid title.
   5. Subtitle: uniform muted grey (no per-figure emphasis).
   6. Logo: per-product lockup + orange badge (both retained).
   ============================================================ */

/* ——— Page width ————————————————————————————————————————————— */
/* Sidebar is pinned to the far-left edge; the content tier (the header + page
   body inside .tdl-main) is capped at --tdl-page-max so content doesn't stretch
   on wide monitors. Change here once; every product inherits it.
   To centre the capped content instead of left-aligning it after the sidebar,
   add margin-inline: auto to .tdl-main. */
:root { --tdl-page-max: 1440px; }html, body { margin: 0; background: var(--tdl-bg); }

/* ——— App layout ———————————————————————————————————————————— */
.tdl-app {
  display: grid;
  grid-template-columns: var(--tdl-side-w) 1fr;
  min-height: 100vh;
  background: var(--tdl-bg);
  color: var(--tdl-fg);
  font-family: var(--tdl-font-body);
}

/* Chrome owns border-box on its own elements (the design system applies it
   globally; scoped here so product page content inside .tdl-main is untouched). */
.tdl-side, .tdl-side *, .tdl-header, .tdl-header *, .tdl-topbar, .tdl-topbar *, .tdl-overlay, .tdl-close, .tdl-close *, .tdl-drawer, .tdl-drawer * {
  box-sizing: border-box;
}

/* Chrome pins its own line-height at the ROOT so a host's body line-height can't
   inflate chrome text. Inheritance only — NOT a descendant selector (.tdl-header *),
   which would override .tdl-title / .tdl-subtitle { line-height: 1 }. Elements that set
   their own line-height (title, subtitle, badge) keep it; everything else inherits normal. */
.tdl-side, .tdl-drawer, .tdl-topbar, .tdl-header { line-height: normal; }

/* ——— Sidebar (desktop) ————————————————————————————————————— */
.tdl-side {
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--tdl-side-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tdl-black);
  border-right: 1px solid var(--tdl-hairline);
}.tdl-brand {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--tdl-hairline);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}.tdl-logo {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}.tdl-brand__badge {
  align-self: flex-start;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tdl-accent-fg);
  background: var(--tdl-accent);
  padding: 3px 7px;
  border-radius: 3px;
}

/* ——— Nav body ——————————————————————————————————————————————— */
.tdl-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 8px;
  scrollbar-width: none;
}.tdl-nav::-webkit-scrollbar { display: none; }.tdl-nav__section {
  padding: 16px 16px 5px;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tdl-fg-4);
  user-select: none;
}.tdl-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--tdl-radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdl-fg-3);
  transition:
    background var(--tdl-dur-fast) var(--tdl-ease-out),
    color var(--tdl-dur-fast) var(--tdl-ease-out),
    border-color var(--tdl-dur-fast) var(--tdl-ease-out);
}.tdl-item:hover {
  background: var(--tdl-surf-1);
  color: var(--tdl-fg);
  text-decoration: none;
}.tdl-item.is-active {
  background: var(--tdl-surf-3);            /* #191919 subtle grey fill — no border, per the style pack */
  color: var(--tdl-accent);
  text-decoration: none;
}.tdl-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--tdl-dur-fast) var(--tdl-ease-out);
}.tdl-item__icon svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}.tdl-item.is-active .tdl-item__icon {
  background: var(--tdl-accent);            /* solid orange square */
  color: var(--tdl-accent-fg);              /* black icon */
}.tdl-item__label { flex: 1; }.tdl-item__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tdl-accent);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--tdl-dur-fast);
}.tdl-item.is-active .tdl-item__dot { opacity: 1; }

/* ——— User footer ———————————————————————————————————————————— */
.tdl-user {
  border-top: 1px solid var(--tdl-hairline);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}.tdl-user__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tdl-surf-4);
  border: 1px solid var(--tdl-hairline-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--tdl-fg);
  flex-shrink: 0;
}.tdl-user__meta { flex: 1; min-width: 0; }.tdl-user__name {
  font-family: var(--tdl-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--tdl-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.tdl-user__role {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tdl-fg-4);
  margin-top: 1px;
}.tdl-logout {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--tdl-fg-4);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--tdl-dur-fast);
}.tdl-logout:hover { color: var(--tdl-fg); }.tdl-logout svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ——— Main + page header ————————————————————————————————————— */
.tdl-main { min-width: 0; max-width: var(--tdl-page-max); }   /* 1440 content tier, left-aligned after the sidebar */

.tdl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--tdl-hairline);
  flex-shrink: 0;
}.tdl-header__main { min-width: 0; }.tdl-header__eyebrow {
  margin: 0 0 10px;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tdl-accent);
  opacity: 1;   /* full-strength accent — WCAG AA: 0.85 dimmed it to 4.39:1, 1.0 = 5.81:1 */
}.tdl-title {
  margin: 0;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tdl-fg);
}.tdl-title__dot { color: var(--tdl-accent); }.tdl-subtitle {
  margin: 9px 0 0;
  font-family: var(--tdl-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--tdl-fg-3);            /* uniform muted grey — no per-figure emphasis */
}

/* ——— Header actions ————————————————————————————————————————— */
.tdl-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}.tdl-actions__btn {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--tdl-radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--tdl-dur-fast) var(--tdl-ease-out), color var(--tdl-dur-fast) var(--tdl-ease-out);
}.tdl-actions__btn--primary { background: var(--tdl-accent); color: var(--tdl-accent-fg); }.tdl-actions__btn--primary:hover { background: #ff5a22; }.tdl-actions__btn--secondary { background: var(--tdl-surf-3); color: var(--tdl-fg); border-color: var(--tdl-hairline-2); }.tdl-actions__btn--secondary:hover { background: var(--tdl-surf-4); }.tdl-actions__btn--ghost { background: transparent; color: var(--tdl-fg-3); padding: 0 8px; }.tdl-actions__btn--ghost:hover { color: var(--tdl-fg); }.tdl-actions__toggle-group {
  display: inline-flex;
  background: var(--tdl-surf-2);
  border: 1px solid var(--tdl-hairline-2);
  border-radius: var(--tdl-radius-pill);
  padding: 3px;
}.tdl-actions__toggle {
  height: 34px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  border-radius: var(--tdl-radius-pill);
  cursor: pointer;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdl-fg-3);
  transition: background var(--tdl-dur-fast), color var(--tdl-dur-fast);
}.tdl-actions__toggle:hover { color: var(--tdl-fg); }.tdl-actions__toggle.is-active { background: var(--tdl-accent); color: var(--tdl-accent-fg); }
/* Amber is RESERVED for a deliberate "pending / needs-attention" status only. */
.tdl-actions__toggle.is-active.is-warn { background: var(--tdl-warn); color: var(--tdl-accent-fg); }

/* ——— Accessibility / quality floor —————————————————————————— */
.tdl-item:focus-visible, .tdl-actions__btn:focus-visible, .tdl-actions__toggle:focus-visible, .tdl-logout:focus-visible, .tdl-hamburger:focus-visible {
  outline: 2px solid var(--tdl-accent);
  outline-offset: 2px;
}

/* ============================================================
   MOBILE  (≤ 768px)
   ============================================================ */
.tdl-topbar, .tdl-overlay, .tdl-close, .tdl-drawer { display: none; }

@media (max-width: 768px) {.tdl-app { grid-template-columns: 1fr; }.tdl-side { display: none; }.tdl-main { padding-top: 60px; }   /* clears the fixed top bar */

  /* Top bar */
  .tdl-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--tdl-black);
    border-bottom: 1px solid var(--tdl-hairline);
  }.tdl-topbar__logo { height: 44px; width: auto; object-fit: contain; object-position: left; }.tdl-hamburger {
    width: 44px; height: 44px;
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surf-3);
    border: 1px solid var(--tdl-hairline-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }.tdl-hamburger svg { width: 18px; height: 18px; stroke: var(--tdl-fg); stroke-width: 1.5; fill: none; stroke-linecap: round; }

  /* Overlay */
  .tdl-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 30;
    background: rgba(0,0,0,0.6);
    opacity: 0; pointer-events: none;
    transition: opacity var(--tdl-dur-med) var(--tdl-ease-out);
  }.tdl-overlay.is-open { opacity: 1; pointer-events: all; }

  /* Close button */
  .tdl-close {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; right: 12px; z-index: 50;
    width: 44px; height: 44px;
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surf-3);
    border: 1px solid var(--tdl-hairline-2);
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity var(--tdl-dur-fast);
  }.tdl-close.is-open { opacity: 1; pointer-events: all; }.tdl-close svg { width: 16px; height: 16px; stroke: var(--tdl-fg); stroke-width: 1.5; fill: none; stroke-linecap: round; }

  /* Drawer */
  .tdl-drawer {
    display: flex;
    flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: 83%; max-width: 320px;
    background: var(--tdl-black);
    border-right: 1px solid var(--tdl-hairline);
    transform: translateX(-100%);
    transition: transform var(--tdl-dur-med) var(--tdl-ease-out);
  }.tdl-drawer.is-open { transform: translateX(0); }

  /* Drawer active item — translucent orange fill + soft border (mobile variant) */
  .tdl-drawer .tdl-item.is-active {
    background: rgba(255,64,0,0.12);
    border: 1px solid rgba(255,64,0,0.2);
    border-radius: var(--tdl-radius-lg);
    padding: 10px 12px;
  }

  /* Drawer footer avatar — larger, orange (mobile variant) */
  .tdl-drawer .tdl-user__avatar {
    width: 38px; height: 38px;
    background: var(--tdl-accent);
    border-color: transparent;
    color: var(--tdl-accent-fg);
  }.tdl-drawer .tdl-user__name { font-size: 14px; }

  /* Mobile page header */
  .tdl-header { padding: 22px 20px 20px; flex-direction: column; gap: 18px; }.tdl-header__eyebrow { margin: 0 0 8px; }.tdl-title { font-size: clamp(30px, 8.5vw, 38px); overflow-wrap: break-word; }.tdl-subtitle { margin: 10px 0 0; }
  /* full-width action row below the subtitle; segmented toggles stretch to fill */
  .tdl-actions { width: 100%; flex-wrap: wrap; }.tdl-actions__toggle-group { width: 100%; }.tdl-actions__toggle { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {.tdl-item, .tdl-item__icon, .tdl-item__dot, .tdl-actions__btn, .tdl-actions__toggle, .tdl-overlay, .tdl-close, .tdl-drawer, .tdl-logout { transition: none; }
}