/* shared/theme.css — document-level chrome + theme tokens.
   Linked from index.html <head>; its :root custom properties inherit into every
   component's shadow root. Holds the light-DOM shell chrome (header/nav/main/
   tab/capacity), while shared/styles.css holds the classes used inside shadow
   roots. */

:root {
    --bg: #0b0f17; --panel: #121826; --panel-2: #172033; --line: #243049;
    /* --muted raised from #8595ad to clear WCAG AAA (~7:1) for small secondary
       text on the panel/bg surfaces — the pervasive "low contrast" grade flag. */
    --txt: #e6edf6; --muted: #a6b4cc; --accent: #4dd6c1; --accent-2: #7c9cff;
    --warn: #ffb454; --err: #ff6b7d; --ok: #57d977; --radius: 14px;
    /* --purple staffs the Assembly Line Researcher role (Delivery tab); a role
       accent alongside --accent-2 (Developer) and --ok (Tester). */
    --purple: #a78bfa;
    /* Text drawn OVER a gauge (spans fill + track). Custom properties inherit
       through the shadow boundary, so this is how the theme reaches shadow-DOM
       gauge labels (which can't see html[data-theme] directly). */
    --on-gauge: #ffffff; --on-gauge-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Light theme (opt-in via html[data-theme="light"]). Custom properties inherit
   through the shadow boundary, so redefining the tokens at the root reskins the
   whole app — chrome + every view. A few chrome bits hardcode dark values
   (body gradient, topbar backdrop, nav hover) and are overridden below. */
html[data-theme="light"] {
    --bg: #f7f8fb; --panel: #ffffff; --panel-2: #f1f3f8; --line: #e4e8f0;
    --txt: #1a2233; --muted: #5b6780; --accent: #0e9f8e; --accent-2: #4f6bff;
    --warn: #b07a12; --err: #d64b5c; --ok: #1a9e54;
    --purple: #7c50e6;
    --on-gauge: #12202e; --on-gauge-shadow: 0 1px 2px rgba(255, 255, 255, .75);
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .85); }
html[data-theme="light"] .nav a:hover:not(.active) { background: rgba(0, 0, 0, .04); }

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; } /* never scroll the page sideways */

body {
    margin: 0;
    background: radial-gradient(1200px 600px at 80% -10%, #14243d 0%, var(--bg) 55%);
    color: var(--txt);
    font: 14px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    min-height: 100vh;
}

/* ── Shell: a left sidebar + a main column (console layout — direction B). ── */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.sidebar {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--panel); border-right: 1px solid var(--line);
    padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px;
    font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
.brand b { color: var(--accent); font-size: 18px; }

.navlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--muted); padding: 14px 11px 6px; opacity: .85; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    border-radius: 9px; color: var(--muted); text-decoration: none;
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.nav a .i { width: 18px; text-align: center; opacity: .95; }
.nav a.active { background: var(--panel-2); color: var(--txt); box-shadow: inset 2px 0 0 var(--accent); }
.nav a:hover:not(.active) { background: rgba(255, 255, 255, .04); color: var(--txt); }

.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px;
    display: flex; flex-direction: column; gap: 10px; }

.main { min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.topbar {
    display: flex; align-items: center; gap: 14px; padding: 14px 24px;
    border-bottom: 1px solid var(--line); position: sticky; top: 0;
    background: rgba(11, 15, 23, .85); backdrop-filter: blur(8px); z-index: 5;
}
.crumb { font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.crumb b { color: var(--accent); }
.theme-toggle {
    margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--muted);
    border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1;
}
.theme-toggle:hover { color: var(--txt); border-color: var(--accent-2); }

main { padding: 20px 24px 40px; min-width: 0; overflow-x: hidden; }

/* Capacity + sign-out live in the sidebar footer. */
.caps { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cap-pill {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--panel-2); font-size: 11px; line-height: 1;
}
.cap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.cap-name { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cap-detail { color: var(--txt); font-weight: 700; }
#signout {
    background: transparent; color: var(--muted); border: 1px solid var(--line);
    border-radius: 8px; cursor: pointer; padding: 7px 12px; font: inherit; font-weight: 600;
}
#signout:hover { color: var(--txt); border-color: var(--accent-2); }

/* Feature-view host visibility (the router toggles .active). */
.view { display: none; }
.view.active { display: block; }

stat-tile {
    display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
stat-tile .st-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
stat-tile .st-value { font-weight: 700; }

/* Below 820px the sidebar folds into a horizontal top strip (no JS drawer). */
@media (max-width: 820px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto; flex-direction: row; flex-wrap: wrap;
        align-items: center; gap: 6px; padding: 10px 12px;
        border-right: 0; border-bottom: 1px solid var(--line);
    }
    .brand { padding: 0 8px 0 4px; }
    .navlabel { display: none; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .nav a { padding: 7px 10px; }
    .nav a.active { box-shadow: inset 0 -2px 0 var(--accent); }
    .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; align-items: center; }
    .topbar { padding: 12px 16px; }
    main { padding: 16px; }
}