/*
 * A copy of services' public/css/look.css (services 1202133): services' file is the original - change it there and copy
 * it here whole. id loads it on every page (components/look-sheets), after app.css; each area of id maps its own states
 * in its own sheet (look-sign-in.css, look-workspaces.css, look-projects.css, look-account.css, look-billing.css).
 */
/*
 * The 2027 look (4.11.2026), shared by the products that have moved to it (the layout loads it after app.css and before
 * a product's own sheet, for the modules it lists). The owner: "everything looks boring white-grayish" - black, white,
 * blue and orange, very well balanced. Four colours, four jobs, and red kept as a state:
 *   - black: the frame and the main action (the top bar, the one dark panel of a page, a player's stage, Save);
 *   - white: room - white sheets on a cool grey ground;
 *   - blue: where you can go and what went fine (links, progress, meters, healthy data);
 *   - orange: needs you - a dot, a mark or a bar, never a tinted box behind text; an orange fill with words on it
 *     ("Back", a count) is the deep --orange-fill with white words;
 *   - red stays the kit's --neg: broken or destroying (a monitor down, Delete), never a mere "needs a look".
 * Dark mode is never a white slab: the main action is blue, what is chosen a raised dark tone.
 * Here: the tokens, the shell (top bar, sidebar, usage), switches, sheets and the deltas' tones. Each product maps its
 * own states to the colours in its own sheet (sessions.css' badges: a problem outlined with an orange glyph). Moving the
 * whole family later means moving this into app.css's kit and copying it to id, Status and Auth.
 */
:root {
    --lk-bar: #0b0d12;
    --lk-bar-2: #1a1d24;
    --lk-bar-3: #23262e;
    --lk-bar-line: #2a2e37;
    --lk-bar-ink: #f2f3f5;
    --lk-bar-ink-2: #9aa0ab;
    --orange: light-dark(#f26a1b, #ff7a2f);
    --orange-ink: light-dark(#b4470a, #ffa266);
    /* An orange fill with words on it ("Back", a count): the deep orange, its words white - 5.2:1, where white on the
       bright one is 3:1. The bright one stays for marks with no words: dots, bars, pins. */
    --orange-fill: #c2410c;
    --blue: light-dark(#2453e8, #5b7fff);
    --blue-soft: light-dark(#b9c9ff, #34488c);
    --blue-on-black: #7fa0ff;

    --chrome: light-dark(#ffffff, #0e1014);
    --chrome-2: light-dark(#f1f2f5, #1a1d24);
    --canvas: light-dark(#f4f5f7, #0a0b0e);
    --surface: light-dark(#ffffff, #13151a);
    --surface-2: light-dark(#f8f9fb, #181b21);
    --raised: light-dark(#ffffff, #1a1d24);
    --overlay: light-dark(#ffffff, #1e2128);
    --line-chrome: light-dark(#e6e8ec, #1c1f26);
    --line: light-dark(#e6e8ec, #23272f);
    --line-2: light-dark(#d5d9e0, #323743);
    --ink: light-dark(#0b0d12, #e8eaee);
    --ink-2: light-dark(#4a505c, #b9bec8);
    --ink-3: light-dark(#6b7280, #8f96a3);

    /* The main action: black in light mode; blue in dark, where a white fill would be the loudest thing on the page. */
    --primary: light-dark(#0b0d12, #3a5fe5);
    --on-primary: #ffffff;
    --primary-hover: light-dark(#2a2e37, #4a6cf0);
    /* What is chosen (the sidebar's page, a view): black in light mode; in dark a raised tone, never a white slab. */
    --lk-sel: light-dark(#0b0d12, #262a33);
    --lk-sel-ink: light-dark(#ffffff, #f2f3f5);
    --lk-sel-edge: light-dark(#0b0d12, #353a45);
    /* A white button on a dark panel (a page's one dark panel): blue in dark mode, as the main action. */
    --lk-on-dark: light-dark(#ffffff, #3a5fe5);
    --lk-on-dark-ink: light-dark(#0b0d12, #ffffff);
    --lk-on-dark-hover: light-dark(#e9ebef, #4a6cf0);
    /* A page's one dark panel: black in light mode, a lifted near-black in dark. */
    --lk-panel: light-dark(#0b0d12, #161922);
    --lk-panel-edge: light-dark(#0b0d12, #2a2f3a);
    --lk-panel-line: #2a2f3a;
    --chart: var(--blue);
    --accent: light-dark(#2453e8, #8ea8ff);
    --accent-ink: light-dark(#2453e8, #8ea8ff);
    --accent-wash: light-dark(#eef2ff, #18213d);
    --shade-1: light-dark(rgb(11 13 18 / 0.04), rgb(0 0 0 / 0.4));
}

/* The top bar is black in both looks: the frame. Its doors, search and account read light on it; the menus they open
   stay sheets. */
.top { background: var(--lk-bar); box-shadow: inset 0 -1px 0 light-dark(var(--lk-bar), #1c1f26); }
.top-mark { color: #ffffff; }
.top-mark .mark-dot { fill: var(--lk-bar); }
.top-mark:hover { background: var(--lk-bar-2); color: #ffffff; }
.top-door { color: var(--lk-bar-ink); }
.top-door:hover { background: var(--lk-bar-2); }
.top-menu[open] > .top-door { background: var(--lk-bar-3); box-shadow: none; }
.top-door .top-chevron, .top-door.is-none { color: var(--lk-bar-ink-2); }
.top-door .product-icon { color: #c7cbd3; }
.top-sep { color: #3a3f4a; }
.top-search { background: var(--lk-bar-2); border-color: var(--lk-bar-line); color: var(--lk-bar-ink-2); box-shadow: none; }
.top-search:hover { border-color: #3a3f4a; color: #c7cbd3; }
.top-key { background: var(--lk-bar-3); border-color: #353a44; color: var(--lk-bar-ink-2); }
.top-account .avatar { background: #ffffff; color: var(--lk-bar); }
.top :focus-visible { outline-color: var(--blue-on-black); }

/* The sidebar is a white column (near black in dark), the page on the grey ground beside it, square. The page's place
   is a black pill (a raised dark one in dark), its icon blue: weight and aria-current say it too. */
.side { border-right: 1px solid var(--line-chrome); background: var(--chrome); }
.page { border-top: 0; }
.shell.has-side > .page { border-left: 0; border-top-left-radius: 0; }
.side-link { color: var(--ink-2); }
.side-link:hover { background: var(--chrome-2); }
.side-link[aria-current], .side-link[aria-current]:hover { background: var(--lk-sel); color: var(--lk-sel-ink); box-shadow: inset 0 0 0 1px var(--lk-sel-edge); }
.side-link[aria-current] .nav-icon { color: light-dark(var(--blue-on-black), #8ea8ff); }
.side-link[aria-current]::before { display: none; }
@media (max-width: 900px) { .side { border-right: 0; border-bottom: 1px solid var(--line-chrome); } }

/* The usage at the sidebar's foot: a card of its own, the meters blue. */
.side-usage { margin-inline: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.side-usage .meter-track { fill: var(--line); }
.side-usage .meter-fill { fill: var(--blue); }
.side-usage-head > a { color: var(--accent-ink); font-weight: 500; }

/* Headings a touch larger and tighter; numbers in even columns. */
body { font-variant-numeric: tabular-nums; }
h1 { font-size: 2rem; letter-spacing: -0.025em; }
.panel-head h2, .panel h2 { letter-spacing: -0.01em; }

/* A change against the stretch before: worse in the orange's ink, better in blue (no green in the look). */
.kpi-delta.tone-neg { color: var(--orange-ink); }
.kpi-delta.tone-pos { color: var(--accent-ink); }
.kpi.kpi-neg, .kpi.kpi-caut { border-color: var(--line); }

/* The segmented switches: the chosen one a white sheet on a grey well, lifted, its edge no darker than a sheet's. */
.segmented { background: light-dark(#e9ebef, #1a1d24); border-color: transparent; }
.segmented a[aria-current='page'] { background: light-dark(#ffffff, #2c313b); box-shadow: 0 1px 2px rgb(11 13 18 / 0.12); font-weight: 600; }

/* Sheets: a hairline and the faintest shadow, corners a little rounder. */
.card, .panel, .kpi { border-radius: 16px; }