/* GOLDLEAF shell wiring (installed DS01 increment 2). Proposed: static/design-system/shell.css
   Load AFTER /styles.css and the design-system tokens.css/components.css.
   Scoped to [data-gl-theme]; without the attribute the legacy dark shell is untouched.
   Only tokens from tokens.css. Pairs used (must be present in build.cjs::measure):
   sidebar-foreground/sidebar, muted-foreground/sidebar, sidebar-accent-foreground/sidebar-accent,
   card-foreground/card, foreground/background, muted-foreground/background,
   primary-foreground/primary, primary/background (link-button), ring & sidebar-ring vs adjacent fills.
   No display/opacity/visibility transitions. Focus outlines never transition. */

[data-gl-theme] body { background-color: var(--gl-background); color: var(--gl-foreground); font-family: var(--gl-font-sans); }

/* Sidebar */
[data-gl-theme] .sidebar {
  background-color: var(--gl-sidebar);
  color: var(--gl-sidebar-foreground);
  border-right: 1px solid var(--gl-sidebar-border);
  padding: var(--gl-space-6) var(--gl-space-4) var(--gl-space-4);
}
[data-gl-theme] .brand-lockup { padding: var(--gl-space-1) var(--gl-space-2) var(--gl-space-6); border-bottom: 1px solid var(--gl-sidebar-border); }
[data-gl-theme] .brand-lockup small {
  color: var(--gl-muted-foreground);
  font-size: 14px; letter-spacing: .04em; margin-top: var(--gl-space-2);
}
/* The original black artwork needs a light backing; never recolour the image. */
[data-gl-theme="light"] .sidebar .brand-lockup .master-logo {
  background-color: var(--gl-background);
  border-radius: var(--gl-radius-control);
  padding: var(--gl-space-3);
}
[data-gl-theme] .sidebar .master-logo img { display: block; max-inline-size: 100%; block-size: auto; }
/* Match the sidebar sizing rule's scope so it cannot expose both originals.
   Keep theme visibility local: public, document and print marks are unchanged. */
[data-gl-theme] .sidebar .master-logo img.gl-brand-light { display: none; }
[data-gl-theme="light"] .sidebar .master-logo img.gl-brand-dark { display: none; }
[data-gl-theme="light"] .sidebar .master-logo img.gl-brand-light { display: block; }

[data-gl-theme] .account-early { border-bottom: 1px solid var(--gl-sidebar-border); color: var(--gl-muted-foreground); font-size: 14px; padding: var(--gl-space-3) var(--gl-space-2); }

[data-gl-theme] .nav { margin: var(--gl-space-6) 0; gap: var(--gl-space-1); }
[data-gl-theme] .nav button {
  min-block-size: 44px;
  padding: var(--gl-space-2) var(--gl-space-3);
  border-radius: var(--gl-radius-control);
  color: var(--gl-sidebar-foreground);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: inset 0 0 0 0 transparent;
  transition-property: background-color, color, box-shadow;
  transition-duration: var(--gl-motion-feedback);
  transition-timing-function: ease-out;
}
[data-gl-theme] .nav button:hover {
  background-color: var(--gl-card);
  color: var(--gl-card-foreground);
  box-shadow: inset 2px 0 0 var(--gl-sidebar-border);
}
/* Selected state is never conveyed by color alone: weight + inset rule + accent fill. */
[data-gl-theme] .nav button.active {
  background-color: var(--gl-sidebar-accent);
  color: var(--gl-sidebar-accent-foreground);
  box-shadow: inset 3px 0 0 var(--gl-sidebar-primary);
  font-weight: 600;
}
[data-gl-theme] .nav-icon { opacity: 1; }

[data-gl-theme] .user-block { border-top: 1px solid var(--gl-sidebar-border); padding: var(--gl-space-4) var(--gl-space-2) 0; }
[data-gl-theme] .user-block strong { font-size: 15px; }
[data-gl-theme] .user-block span { color: var(--gl-muted-foreground); font-size: 14px; margin: var(--gl-space-1) 0 var(--gl-space-3); }
/* Keep the full touch target and focus ring inside the scrollport, including
   fractional font/layout metrics when focus scrolls the long mobile drawer. */
[data-gl-theme] .user-block [data-action="logout"] { scroll-margin-block: var(--gl-space-2); }

[data-gl-theme] .link-button {
  color: var(--gl-primary);
  font-size: 14px;
  min-block-size: 44px;
  text-decoration: underline;
  text-underline-offset: .2em;
}
[data-gl-theme="dark"] .link-button { color: var(--gl-sidebar-accent-foreground); }

/* Theme toggle (new native button, see WIRING.md). */
[data-gl-theme] .gl-theme-toggle {
  display: inline-flex; align-items: center; gap: var(--gl-space-2);
  min-block-size: 44px; margin-block-end: var(--gl-space-3);
  padding: var(--gl-space-2) var(--gl-space-3);
  border: 1px solid var(--gl-input); border-radius: var(--gl-radius-control);
  background-color: var(--gl-card); color: var(--gl-card-foreground);
  font: inherit; font-size: 14px; font-weight: 600;
  transition-property: background-color, color;
  transition-duration: var(--gl-motion-feedback);
}
[data-gl-theme] .gl-theme-toggle:hover { text-decoration: underline; text-underline-offset: .2em; }
[data-gl-theme] .gl-theme-toggle .gl-theme-toggle-state { color: var(--gl-muted-foreground); font-weight: 400; }

/* Main column */
[data-gl-theme] .topbar {
  background-color: var(--gl-background);
  backdrop-filter: none;
  border-bottom: 1px solid var(--gl-border);
  min-block-size: 76px; block-size: auto;
  gap: var(--gl-space-3);
  padding: var(--gl-space-3) var(--gl-space-8);
}
[data-gl-theme] .breadcrumb { color: var(--gl-muted-foreground); font-size: 14px; }
[data-gl-theme] .breadcrumb strong { color: var(--gl-foreground); font-family: var(--gl-font-serif); font-weight: 500; font-size: 18px; }
[data-gl-theme] .top-actions { gap: var(--gl-space-2); flex-wrap: wrap; justify-content: flex-end; min-inline-size: 0; }
[data-gl-theme] .env-pill {
  border: 1px solid var(--gl-input); color: var(--gl-muted-foreground);
  border-radius: var(--gl-radius-control);
  font-size: 14px; letter-spacing: .04em; text-transform: none;
  padding: var(--gl-space-1) var(--gl-space-2);
}
[data-gl-theme] .mobile-nav-button {
  min-block-size: 44px; min-inline-size: 44px;
  color: var(--gl-foreground); border-color: var(--gl-input); border-radius: var(--gl-radius-control);
}
[data-gl-theme] .content { padding: var(--gl-space-8); }
[data-gl-theme] .app-footer {
  border-top: 1px solid var(--gl-border);
  color: var(--gl-muted-foreground);
  font-size: 14px; letter-spacing: .02em;
  padding: var(--gl-space-4) var(--gl-space-8) var(--gl-space-6);
}

/* Skip link: off-screen by position only (never opacity/display). */
[data-gl-theme] .skip-link {
  background-color: var(--gl-primary); color: var(--gl-primary-foreground);
  border-radius: var(--gl-radius-control);
  padding: var(--gl-space-3) var(--gl-space-4);
  transition: none;
}

/* Immediate focus, no transition. Overrides the legacy #f2d28f literal with the measured ring. */
[data-gl-theme] :is(.skip-link, .nav button, .link-button, .mobile-nav-button, .gl-theme-toggle,
  .topbar .btn, .sidebar.open [data-mobile-open-focus]):is(:focus-visible, [data-mobile-open-focus]) {
  outline: 3px solid var(--gl-ring);
  outline-offset: 3px;
  transition-property: background-color, color, box-shadow;
}
[data-gl-theme] .sidebar :is(.nav button, .link-button, .gl-theme-toggle):focus-visible { outline-color: var(--gl-sidebar-ring); }
[data-gl-theme] .skip-link:focus { top: var(--gl-space-3); outline: 3px solid var(--gl-ring); outline-offset: 3px; }
[data-gl-theme] .main:focus-visible { outline: 3px solid var(--gl-ring); outline-offset: -3px; }

/* Mobile drawer: transform only; open state still driven by existing .open/inert logic. */
@media (max-width: 880px) {
  [data-gl-theme] .sidebar {
    transition: transform var(--gl-motion-panel) ease-out;
    box-shadow: none;
    border-right: 1px solid var(--gl-sidebar-border);
  }
  [data-gl-theme] .topbar { padding: var(--gl-space-2) var(--gl-space-4); }
  [data-gl-theme] .content { padding: var(--gl-space-6) var(--gl-space-4); }
  [data-gl-theme] .app-footer { padding: var(--gl-space-4); }
}
@media (max-width: 480px) {
  [data-gl-theme] .sidebar { width: min(260px, 100vw); }
  [data-gl-theme] .topbar { align-items: flex-start; }
  [data-gl-theme] .breadcrumb strong { font-size: 16px; }
  [data-gl-theme] .content { padding: var(--gl-space-4) var(--gl-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  [data-gl-theme] :is(.sidebar, .nav button, .gl-theme-toggle, .skip-link) { transition: none; }
}
@media (forced-colors: active) {
  [data-gl-theme] .nav button.active { forced-color-adjust: none; outline: 2px solid Highlight; color: HighlightText; background: Highlight; }
  [data-gl-theme] :is(.nav button, .link-button, .gl-theme-toggle, .mobile-nav-button):focus-visible { outline-color: Highlight; }
}

/* ===========================================================================
   Legacy semantic variable bridge (shared component wiring, candidate).
   Rebinds the existing styles.css :root names under the theme attribute so
   current controls consume accepted tokens. Every right-hand side is a
   variable defined in design-system/tokens.css (checked 1:1) or a radius /
   shadow derived from the spec. This is NOT a completed page restyle.
   Gaps (blocking for light theme, see groups/INSTALL.md §Semantic gap):
   tokens.json has no success/warning/info roles. Dark keeps the existing
   owner hues via identical chart tokens (#86C8A0, #8CB9DF) or the legacy
   --warning literal (left unbridged). Light maps those three to
   --gl-foreground text so nothing unmeasured is used as text; meaning is
   carried by the existing label text and boundary marks.
   =========================================================================== */
[data-gl-theme] {
  --bg: var(--gl-background);
  --bg-2: var(--gl-background);
  --panel: var(--gl-card);
  --panel-2: var(--gl-secondary);
  --panel-3: var(--gl-popover);
  --panel-solid: var(--gl-card);
  --surface: var(--gl-card);
  --card: var(--gl-card);
  --line: var(--gl-border);
  --border: var(--gl-border);
  --line-strong: var(--gl-input);
  --text: var(--gl-foreground);
  --ink: var(--gl-foreground);
  --muted: var(--gl-muted-foreground);
  --subtle: var(--gl-muted-foreground); /* legacy #6f6c67 fails 4.5:1; deliberate upgrade */
  --gold: var(--gl-primary);
  --gold-2: var(--gl-accent-foreground);
  --gold-3: var(--gl-primary);
  --on-gold: var(--gl-primary-foreground);
  --accent: var(--gl-accent);
  --danger: var(--gl-destructive);
  --radius: var(--gl-radius-card);
  --radius-sm: var(--gl-radius-control);
  --font-sans: var(--gl-font-sans);
  --font-display: var(--gl-font-serif);
}
[data-gl-theme="dark"] {
  --success: var(--gl-chart2);
  --info: var(--gl-chart4);
  --shadow: 0 16px 48px rgb(0 0 0 / .5);
}
[data-gl-theme="light"] {
  --success: var(--gl-foreground);
  --warning: var(--gl-foreground);
  --info: var(--gl-foreground);
  --shadow: 0 12px 32px rgb(23 22 20 / .14);
}

/* Base primary/secondary button pairing (existing .btn markup, no new classes). */
[data-gl-theme] .btn {
  min-height: 44px;
  border-radius: var(--gl-radius-control);
  border: 1px solid var(--gl-input);
  background: var(--gl-secondary);
  color: var(--gl-secondary-foreground);
  font-size: 14px;
  font-weight: 600;
  transition-property: background-color, border-color, color, transform;
  transition-duration: var(--gl-motion-feedback);
}
[data-gl-theme] .btn:hover:not(:disabled) { background: var(--gl-card); color: var(--gl-card-foreground); border-color: var(--gl-primary); }
[data-gl-theme] .btn-primary {
  background: var(--gl-primary);
  color: var(--gl-primary-foreground);
  border-color: var(--gl-primary);
  box-shadow: none;
}
[data-gl-theme] .btn-primary:hover:not(:disabled) {
  background: var(--gl-primary);
  color: var(--gl-primary-foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
}
[data-gl-theme] .btn-ghost { background: transparent; color: var(--gl-foreground); }
[data-gl-theme] .btn-danger { background: var(--gl-destructive); color: var(--gl-destructive-foreground); border-color: var(--gl-destructive); }
[data-gl-theme] .btn-success { background: var(--gl-secondary); color: var(--gl-secondary-foreground); border-color: var(--gl-input); }
[data-gl-theme] .btn-sm { min-height: 36px; font-size: 14px; }
/* Disabled: native disabled kept; measured muted pair instead of opacity. */
[data-gl-theme] .btn:disabled {
  opacity: 1;
  background: var(--gl-muted);
  color: var(--gl-muted-foreground);
  border-color: var(--gl-input);
  text-decoration: none;
}
[data-gl-theme] :is(.btn, .link-button, .service-link, a, summary, [tabindex]:not(.main)):focus-visible {
  outline: 3px solid var(--gl-ring);
  outline-offset: 3px;
}
/* Existing inputs remove the outline; restore an immediate ring and stop the legacy all-property transition. */
[data-gl-theme] :is(.input, .textarea, .select) {
  background: var(--gl-card);
  color: var(--gl-card-foreground);
  border-color: var(--gl-input);
  border-radius: var(--gl-radius-control);
  min-height: 44px;
  transition-property: border-color, background-color;
  transition-duration: var(--gl-motion-feedback);
}
[data-gl-theme] :is(.input, .textarea, .select)::placeholder { color: var(--gl-muted-foreground); opacity: 1; }
[data-gl-theme] :is(.input, .textarea, .select):focus { outline: 3px solid var(--gl-ring); outline-offset: 2px; border-color: var(--gl-ring); box-shadow: none; }
[data-gl-theme] .field label { color: var(--gl-foreground); font-size: 14px; font-weight: 600; }
[data-gl-theme] .field-hint { color: var(--gl-muted-foreground); font-size: 14px; }
[data-gl-theme] .check-chip span { background: var(--gl-card); color: var(--gl-card-foreground); border-color: var(--gl-input); font-size: 14px; transition-property: background-color, border-color, color; transition-duration: var(--gl-motion-feedback); }
[data-gl-theme] .check-chip input:checked + span { background: var(--gl-accent); color: var(--gl-accent-foreground); border-color: var(--gl-primary); font-weight: 600; }
[data-gl-theme] .check-chip input:focus-visible + span { outline: 3px solid var(--gl-ring); outline-offset: 2px; }

[data-gl-theme] .card { background: var(--gl-card); color: var(--gl-card-foreground); border-color: var(--gl-border); border-radius: var(--gl-radius-card); box-shadow: none; }
[data-gl-theme] :is(.muted, .subtle) { color: var(--gl-muted-foreground); }
[data-gl-theme] .small { font-size: 14px; }
[data-gl-theme] th { color: var(--gl-muted-foreground); font-size: 13px; border-bottom-color: var(--gl-input); }
[data-gl-theme] td { font-size: 14px; border-bottom-color: var(--gl-border); font-variant-numeric: tabular-nums; }
[data-gl-theme] tr[data-clickable]:hover td { background: var(--gl-secondary); }
[data-gl-theme] .badge { color: var(--gl-foreground); border-color: var(--gl-input); background: transparent; font-size: 12px; }
[data-gl-theme] .badge.success { color: var(--success); border-color: var(--gl-chart2); background: transparent; }
[data-gl-theme] .badge.danger { color: var(--gl-destructive); border-color: var(--gl-destructive); background: transparent; }
[data-gl-theme] .badge.info { color: var(--info); border-color: var(--gl-chart4); background: transparent; }
[data-gl-theme] .badge.warning { color: var(--warning); border-style: dashed; background: transparent; }
[data-gl-theme] .badge.gold { color: var(--gl-accent-foreground); background: var(--gl-accent); border-color: var(--gl-primary); }
[data-gl-theme] .modal { background: var(--gl-popover); color: var(--gl-popover-foreground); border-color: var(--gl-input); border-radius: var(--gl-radius-dialog); }
[data-gl-theme] .modal-backdrop { backdrop-filter: none; }
[data-gl-theme] .toast { background: var(--gl-popover); color: var(--gl-popover-foreground); border-color: var(--gl-input); border-left-color: var(--gl-primary); }
[data-gl-theme] .toast.error { border-left-color: var(--gl-destructive); }
[data-gl-theme] .toast.success { border-left-color: var(--gl-chart2); }
[data-gl-theme] .skeleton { background: var(--gl-muted); }
[data-gl-theme] .empty .symbol { border-color: var(--gl-input); color: var(--gl-primary); }
[data-gl-theme] .empty :is(p, h3) { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  [data-gl-theme] :is(.btn, .input, .textarea, .select, .check-chip span) { transition: none; }
  [data-gl-theme] .btn:hover { transform: none; }
  [data-gl-theme] :is(.skeleton, .toast) { animation: none; }
}
@media (forced-colors: active) {
  [data-gl-theme] :is(.btn, .input, .textarea, .select):focus-visible { outline-color: Highlight; }
}