/* LEGS v2.1 — polish layer (M6 design pass, repaired).
   RULES OF THIS FILE:
   1. Never hardcode a color. Everything derives from the active theme's tokens
      (--green, --accent, --bg, --card, --line, --ink ...) so all seven era
      themes, custom themes, and every per-era night palette keep their identity.
   2. No :root token overrides — the in-app theme engine owns the palette.
   3. Only depth, shape, and focus polish: things that make EVERY theme better. */

/* App bar: subtle depth over the theme's own header color */
.appbar{
  background-image:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 45%,rgba(255,255,255,.06));
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.brand-mark{letter-spacing:.09em}

/* Tabs: pill style, colored entirely by theme tokens */
.tabs{padding:6px 12px}
.tab{border-radius:999px;border-bottom:0;padding:8px 15px;transition:background .15s,color .15s}
.tab:hover{background:rgba(255,255,255,.10)}
.tab.active{background:var(--accent);color:var(--green-2);font-weight:700;border-bottom:0}

/* Cards: slightly deeper, softer */
.card{border-radius:12px}

/* Buttons: shape + feedback only (colors stay theme-owned) */
.btn{border-radius:8px;font-weight:600;transition:background .12s,transform .06s,box-shadow .12s}
.btn:active{transform:translateY(1px)}

/* Inputs: visible focus states in every palette */
input:focus,select:focus,textarea:focus,.inp:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,0,0,.10);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  input:focus,select:focus,textarea:focus,.inp:focus{
    box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
  }
}

/* Question rows: gentle lift on interaction */
.q-row{border-radius:10px;transition:box-shadow .12s}
.q-row.open{box-shadow:0 2px 12px rgba(0,0,0,.12)}

/* v2 injected buttons match the pill language */
#legsAccountBtn,#legsLibraryBtn,#legsAdminBtn{border-radius:999px}

/* Print: never ship decorative ink to paper */
@media print{
  .appbar{background-image:none;box-shadow:none}
}


/* ---- M24: responsive + symmetry sweep (ADR-031) ----
   RULES still apply: no hardcoded theme colors, no :root overrides. */

/* The injected controls (Account, Library, bell, version, Sign out, thread)
   cluster into ONE right-aligned action group in a stable order, instead of
   wrapping wherever their module happened to load. */
.appbar{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;column-gap:2px}
/* Row 1: brand + the app's own unit/ARMS/binder controls (appbar-right).
   Row 2: every injected control in ONE right-aligned cluster, fixed order.
   ::after = full-width line break, ::before = right-pusher on the new row. */
.appbar::after{content:"";flex-basis:100%;height:0;order:88}
.appbar::before{content:"";order:89;margin-left:auto}
.appbar > #legsAdminBtn{order:90}
.appbar > #legsInspMsg{order:91}
.appbar > #legsAccountBtn{order:92}
.appbar > #legsLibraryBtn{order:93}
.appbar > .legs-bell{order:94}
.appbar > #legsVerTag{order:95}
.appbar > #legsSignOut{order:96}
/* one visual language for every injected pill */
#legsAccountBtn,#legsLibraryBtn,#legsAdminBtn,#legsSignOut,#legsInspMsg{
  border-radius:999px!important;padding:5px 12px!important;font-size:12px!important}

/* laptop */
@media (max-width:1280px){
  #legsAccountBtn,#legsLibraryBtn,#legsAdminBtn,#legsSignOut,#legsInspMsg{padding:4px 10px!important;font-size:11.5px!important;margin-left:6px!important}
  .appbar{padding-left:10px;padding-right:10px}
}
/* small laptop / split screen */
@media (max-width:1000px){
  #legsVerTag{display:none}                     /* version stays in the tab title + About */
  /* M26: scrollable tabs WITHOUT a visible scrollbar — edge fade signals more */
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{white-space:nowrap}
}
/* very narrow (portrait split / small tablet) */
@media (max-width:760px){
  .appbar .brand-sub{display:none}
  .kpi-row{flex-wrap:wrap}
  .kpi-row .kpi{min-width:44%}
}


/* M20: glidepath (replaces the legacy trend look) */
.tr-glide{stroke:#8a97a5;stroke-width:1.6;stroke-dasharray:6 5;opacity:.85}
.tr-line.ahead{stroke:#2e7d32!important}
.tr-line.behind{stroke:#c62828!important}


/* M28: native controls follow the dark theme (selects, dates, scrollbars) */
[data-theme="dark"]{color-scheme:dark}