/* GideonHelm design system.
 *
 * Two rules carry the whole look:
 *   green  = activity data and positive status (the heatmap scale)
 *   iris   = anything you can act on (links, primary buttons, focus, active tab)
 * Variable names predate this file and are used inline across templates, so
 * the originals are kept and only their values changed.
 */
:root {
    color-scheme: dark;

    --bg: #0f1217;          /* night: page */
    --surface: #161a21;     /* panel */
    --raised: #1e232c;      /* inputs, hover rows, menus */
    --raised-hover: #252b36;
    --border: #2a303b;      /* rule */
    --border-strong: #3a4252;
    --text: #e8ebf1;
    --text-muted: #8c94a4;
    --text-faint: #5f6778;

    --iris: #8f9dff;
    --iris-strong: #a9b4ff;
    --iris-ink: #10142b;    /* text on iris fills */
    --iris-tint: rgba(143, 157, 255, .14);
    --iris-line: rgba(143, 157, 255, .38);
    --link: var(--iris);

    --green-1: #0e4429;
    --green-2: #006d32;
    --green-3: #26a641;
    --green-4: #39d353;
    --green-tint: rgba(38, 166, 65, .14);
    --green-line: rgba(38, 166, 65, .38);
    --orange: #e0a440;
    --orange-ink: #f3cf8d;
    --orange-tint: rgba(224, 164, 64, .10);
    --orange-line: rgba(224, 164, 64, .38);
    --red: #f2555a;
    --red-ink: #ff8a8e;
    --red-tint: rgba(242, 85, 90, .10);
    --red-line: rgba(242, 85, 90, .40);
    --gray: #4a5160;
    --danger: var(--red);

    --row-hover: rgba(255, 255, 255, .025);
    --scrim: rgba(5, 7, 10, .62);
    --shadow: rgba(0, 0, 0, .5);
    --cell-empty: #191d24;

    /* Teams presence, one colour per state on every page (see static/js/palette.js) */
    --presence-available: #39d353;
    --presence-call: #58a6ff;
    --presence-conference: #1f6feb;
    --presence-meeting: #56d4dc;
    --presence-presenting: #ffa657;
    --presence-calendar: #a371f7;
    --presence-busy: #d18616;
    --presence-away: #484f58;
    --presence-offline: #2a303b;

    /* Data series in charts and activity */
    --series-github: #f0883e;
    --series-jira: #6cb6ff;
    --series-meeting: #d2a8ff;
    --series-online: #39d353;

    --radius-panel: 10px;
    --radius-control: 6px;

    --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

/* Light theme: when chosen, or when the system is light and no theme is chosen */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #f5f6f8;
    --surface: #ffffff;
    --raised: #f0f2f5;
    --raised-hover: #e6e9ef;
    --border: #dde1e8;
    --border-strong: #c4cad5;
    --text: #1c2028;
    --text-muted: #5c6577;
    --text-faint: #8b93a3;

    --iris: #4c58d9;
    --iris-strong: #3a45b8;
    --iris-ink: #ffffff;
    --iris-tint: rgba(76, 88, 217, .10);
    --iris-line: rgba(76, 88, 217, .35);

    --green-1: #c6efd0;
    --green-2: #6fd38a;
    --green-3: #2da44e;
    --green-4: #1a7f37;
    --green-tint: rgba(26, 127, 55, .10);
    --green-line: rgba(26, 127, 55, .35);
    --orange: #a15c00;
    --orange-ink: #7d4600;
    --orange-tint: rgba(161, 92, 0, .10);
    --orange-line: rgba(161, 92, 0, .35);
    --red: #cf222e;
    --red-ink: #a40e26;
    --red-tint: rgba(207, 34, 46, .08);
    --red-line: rgba(207, 34, 46, .35);
    --gray: #9aa3b2;

    --row-hover: rgba(15, 20, 30, .03);
    --scrim: rgba(20, 24, 32, .35);
    --shadow: rgba(15, 20, 30, .18);
    --cell-empty: #eceef2;

    --presence-available: #2da44e;
    --presence-call: #0969da;
    --presence-conference: #0550ae;
    --presence-meeting: #1b8a99;
    --presence-presenting: #bc4c00;
    --presence-calendar: #8250df;
    --presence-busy: #a15c00;
    --presence-away: #9aa3b2;
    --presence-offline: #e3e6eb;

    --series-github: #c4540a;
    --series-jira: #0969da;
    --series-meeting: #8250df;
    --series-online: #2da44e;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --bg: #f5f6f8;
        --surface: #ffffff;
        --raised: #f0f2f5;
        --raised-hover: #e6e9ef;
        --border: #dde1e8;
        --border-strong: #c4cad5;
        --text: #1c2028;
        --text-muted: #5c6577;
        --text-faint: #8b93a3;

        --iris: #4c58d9;
        --iris-strong: #3a45b8;
        --iris-ink: #ffffff;
        --iris-tint: rgba(76, 88, 217, .10);
        --iris-line: rgba(76, 88, 217, .35);

        --green-1: #c6efd0;
        --green-2: #6fd38a;
        --green-3: #2da44e;
        --green-4: #1a7f37;
        --green-tint: rgba(26, 127, 55, .10);
        --green-line: rgba(26, 127, 55, .35);
        --orange: #a15c00;
        --orange-ink: #7d4600;
        --orange-tint: rgba(161, 92, 0, .10);
        --orange-line: rgba(161, 92, 0, .35);
        --red: #cf222e;
        --red-ink: #a40e26;
        --red-tint: rgba(207, 34, 46, .08);
        --red-line: rgba(207, 34, 46, .35);
        --gray: #9aa3b2;

        --row-hover: rgba(15, 20, 30, .03);
        --scrim: rgba(20, 24, 32, .35);
        --shadow: rgba(15, 20, 30, .18);
        --cell-empty: #eceef2;

        --presence-available: #2da44e;
        --presence-call: #0969da;
        --presence-conference: #0550ae;
        --presence-meeting: #1b8a99;
        --presence-presenting: #bc4c00;
        --presence-calendar: #8250df;
        --presence-busy: #a15c00;
        --presence-away: #9aa3b2;
        --presence-offline: #e3e6eb;

        --series-github: #c4540a;
        --series-jira: #0969da;
        --series-meeting: #8250df;
        --series-online: #2da44e;
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--iris-strong); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 4px; }

h1 {
    font-family: var(--font-display);
    font-size: 30px; font-weight: 600; line-height: 1.15;
    letter-spacing: -.01em; margin-bottom: 16px;
}
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
p + p { margin-top: 8px; }
strong { font-weight: 600; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------- Native controls, themed everywhere ---------- */

input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input:not([type]), select, textarea {
    background: var(--raised);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-control);
    padding: 7px 10px;
    font-size: 14px;
    min-height: 34px;
    transition: border-color .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-tint); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { padding-right: 28px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--iris); width: 15px; height: 15px; cursor: pointer; vertical-align: middle; }

/* ---------- Sidebar ----------
 * One grouped sidebar replaces the old top nav. Desktop collapses it to an
 * icon rail (html.side-collapsed, restored in <head> before paint); at phone
 * width it is an overlay opened from .mobile-bar (html.side-open). Icons sit
 * at the same x in both desktop states, so collapsing never moves them.
 */

:root { --side-w: 232px; --side-rail: 60px; }

.app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.app-main { min-width: 0; }

/* The menu is part of the page: it runs the page's full height and scrolls with
   it, with no scroll pane of its own. Account links sit at its foot. */
.sidebar {
    position: relative; min-height: 100vh; width: var(--side-w);
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--border);
    overflow-x: hidden; z-index: 100;
    transition: width .16s ease;
}
.side-top { flex: none; padding: 0 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.side-head {
    display: flex; align-items: center; gap: 8px; height: 52px;
    padding: 0 12px 0 23px; flex: none; white-space: nowrap;
}
.side-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text);
}
.side-brand:hover { color: var(--text); text-decoration: none; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-mark {
    display: inline-grid; grid-template-columns: repeat(2, 6px); gap: 2px; flex: none;
}
.brand-mark i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--green-2); }
.brand-mark i:nth-child(2) { background: var(--green-4); }
.brand-mark i:nth-child(3) { background: var(--green-3); }
.brand-mark i:nth-child(4) { background: var(--green-1); }
.build-badge {
    font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.side-scroll { flex: 1; padding: 2px 0 8px; }
.side-foot { flex: none; border-top: 1px solid var(--border); padding: 6px 0 10px; }
.side-group + .side-group { margin-top: 8px; }
.side-group ul { list-style: none; }
/* The only uppercase in the app: group headings are wayfinding, not content */
.side-heading {
    height: 22px; padding: 4px 22px 0; font-size: 11px; line-height: 18px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
/* Account needs no visible heading at the foot; it stays as the list's label */
.side-foot .side-heading {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}

.side-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    margin: 0 8px; padding: 0 14px; height: 28px;
    border-radius: var(--radius-control); color: var(--text-muted);
    font-size: 14px; font-weight: 500; white-space: nowrap;
    background: none; border: 0; cursor: pointer; width: calc(100% - 16px); text-align: left;
}
.side-icon { flex: none; }
.side-label { overflow: hidden; text-overflow: ellipsis; }
a.side-link:hover, button.side-link:hover { color: var(--text); background: var(--raised); text-decoration: none; }
.side-link.active { color: var(--text); background: var(--iris-tint); }
.side-link.active .side-icon { color: var(--iris); }
.side-link.active::before {
    content: ""; position: absolute; left: -8px; top: 5px; bottom: 5px;
    width: 3px; border-radius: 0 2px 2px 0; background: var(--iris);
}
.side-user { cursor: default; color: var(--text); }
.side-toggle .side-icon { transition: transform .16s ease; }

.side-btn {
    display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
    background: none; border: 0; border-radius: var(--radius-control);
    color: var(--text-muted); cursor: pointer;
}
.side-btn:hover { color: var(--text); background: var(--raised); }
.side-close, .mobile-bar, .side-scrim { display: none; }

.public-bar {
    display: flex; align-items: center; height: 56px; padding: 0 24px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}

/* Desktop rail: labels clip to screen-reader text, headings become rules */
@media (min-width: 761px) {
    .side-collapsed .sidebar { width: var(--side-rail); }
    .side-collapsed .side-brand-text { display: none; }
    .side-collapsed .side-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    /* Same height as the label it replaces, so items keep their place */
    .side-collapsed .side-scroll .side-heading { position: relative; font-size: 0; }
    .side-collapsed .side-scroll .side-heading::after {
        content: ""; position: absolute; left: 18px; right: 18px; top: 50%;
        border-top: 1px solid var(--border);
    }
    .side-collapsed .side-toggle .side-icon { transform: scaleX(-1); }
}

/* Phone: slim top strip, sidebar slides in over a scrim */
@media (max-width: 760px) {
    .app { display: block; }
    .mobile-bar {
        display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 6px;
        background: var(--surface); border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 90;
    }
    .mobile-bar .side-brand { font-size: 17px; }
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; height: auto;
        width: min(280px, 86vw); z-index: 210;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
        box-shadow: 0 12px 40px var(--shadow);
    }
    .side-open .sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
    .sidebar { overflow-y: auto; min-height: 0; }  /* the slide-in menu scrolls within itself */
    .side-top { display: none; }
    .side-close { display: inline-grid; margin-left: auto; }
    .side-toggle { display: none; }
    .side-link { height: 36px; }
    .side-scrim {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: var(--scrim); opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .side-open .side-scrim { opacity: 1; pointer-events: auto; }
    .side-open body { overflow: hidden; }
}

.breadcrumbs {
    padding: 10px 24px 0; font-size: 13px; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    max-width: 1400px; margin: 0 auto;
}
.breadcrumbs:empty, .breadcrumbs.is-empty { display: none; }
.bc-sep { color: var(--text-faint); margin: 0 2px; }
.bc-link { color: var(--text-muted); }
.bc-link:hover { color: var(--iris); }
.bc-current { color: var(--text); }

.container { max-width: 1400px; margin: 0 auto; padding: 20px 24px 48px; }

/* ---------- Page header and section tabs ---------- */

.page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h1 { margin-bottom: 0; }
.page-sub { color: var(--text-muted); margin-top: 4px; max-width: 72ch; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Panels, notices ---------- */

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-panel); padding: 20px; margin-bottom: 16px;
}
.card > h2:first-child { margin-bottom: 14px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { margin-bottom: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: 16px 20px 0; }

.notice {
    display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    padding: 12px 16px; border-radius: var(--radius-panel); margin-bottom: 16px;
    border: 1px solid var(--border); background: var(--surface);
}
.notice-error { border-color: var(--red-line); background: var(--red-tint); color: var(--red-ink); }
.notice-warn { border-color: var(--orange-line); background: var(--orange-tint); color: var(--orange-ink); }
.notice-info { border-color: var(--iris-line); background: var(--iris-tint); }

.empty { color: var(--text-muted); padding: 28px 0; text-align: center; }

/* ---------- Forms ---------- */

.form-group { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-group label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-group input[type="checkbox"], .form-group input[type="radio"] { width: 15px; flex: none; }
.form-group label.check { color: var(--text); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.form-grid .form-group { margin-bottom: 0; }
.form-row { display: flex; gap: 12px 14px; align-items: flex-end; flex-wrap: wrap; }
.form-row .form-group { margin-bottom: 0; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.hint { font-size: 13px; color: var(--text-muted); }

.controls { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.controls button { cursor: pointer; }

/* ---------- Buttons ---------- */

.btn, .controls button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; min-height: 34px; border-radius: var(--radius-control);
    border: 1px solid var(--border); background: var(--raised);
    color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.btn:hover, .controls button:hover { border-color: var(--border-strong); background: var(--raised-hover); text-decoration: none; color: var(--text); }
.btn-primary, .controls button.active { background: var(--iris); border-color: var(--iris); color: var(--iris-ink); }
.btn-primary:hover, .controls button.active:hover { background: var(--iris-strong); border-color: var(--iris-strong); color: var(--iris-ink); }
.btn-danger { background: transparent; border-color: var(--red-line); color: var(--red); }
.btn-danger:hover { background: var(--red-tint); border-color: var(--red); color: var(--red-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--raised); color: var(--text); }
.btn-active { background: var(--iris-tint); border-color: var(--iris-line); color: var(--iris-strong); }
.btn-sm { padding: 3px 10px; min-height: 28px; font-size: 13px; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table th {
    color: var(--text-muted); font-weight: 500; font-size: 13px; white-space: nowrap;
    background: var(--surface);
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sortable::after { content: "↕"; margin-left: 6px; opacity: .35; font-size: 11px; }
.data-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--iris); }
.data-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--iris); }
.data-table tr.filter-row th { padding-top: 0; padding-bottom: 8px; }
.data-table .filter-control { width: 100%; min-width: 90px; min-height: 30px; padding: 4px 8px; font-size: 13px; font-weight: 400; }
.data-table select.filter-control { padding-right: 26px; }
.data-table tbody tr[hidden] { display: none; }
/* Finance overview: quarter pies and the quarter-over-quarter table */
.pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.pie-grid .card { margin-bottom: 0; }
.pie-body { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding-top: 4px; }
.pie-wrap { position: relative; width: 220px; height: 220px; flex: none; }
.pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pie-total { font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-note { font-size: 12px; color: var(--text-muted); }
.pie-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: grid; gap: 8px; font-size: 14px; }
.pie-legend li { display: grid; grid-template-columns: 12px 1fr auto 3.2em; align-items: center; gap: 10px; }
.pie-val { font-variant-numeric: tabular-nums; }
.pie-pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.pie-legend .swatch { margin-right: 0; }
.quarter-table td:first-child { white-space: nowrap; }
.quarter-table tfoot th { color: var(--text); font-weight: 500; font-size: 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.quarter-table tfoot tr:first-child th { border-top: 1px solid var(--text-faint); }
.quarter-table tfoot tr.total th { font-weight: 600; }
.quarter-table tfoot tr:last-child th { color: var(--text-muted); border-bottom: none; }
@media (max-width: 640px) { .pie-grid { grid-template-columns: 1fr; } }

/* Relationships */
.rel-graph-wrap { width: 100%; max-width: 760px; margin: 0 auto; }
.rel-graph { width: 100%; height: auto; display: block; }
.rel-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.rel-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rel-legend i { display: inline-block; }
.lg-line { width: 20px; height: 4px; border-radius: 2px; background: var(--iris); }
.lg-drift { width: 20px; border-top: 2px dashed var(--orange); }
.lg-ring { width: 12px; height: 12px; border-radius: 50%; }
.lg-spof { border: 3px solid var(--red); }
.lg-loner { border: 2px dashed var(--orange); }
.rel-flags, .rel-top { list-style: none; margin: 0; padding: 0; }
.rel-flags li { display: flex; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.45; flex-wrap: wrap; }
.rel-flag { flex: none; width: 170px; font-size: 12px; font-weight: 600; }
.rel-flag-spof, .rel-flag-bottleneck { color: var(--red); }
.rel-flag-loner, .rel-flag-drifting { color: var(--orange); }
.rel-flags li > span:last-child { flex: 1; min-width: 200px; }
.rel-top li { border-top: 1px solid var(--border); }
.rel-top summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; cursor: pointer; list-style: none; }
.rel-top summary::-webkit-details-marker { display: none; }
.rel-top summary .num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rel-top details p { margin: 0; padding: 0 20px 12px; }
.rel-top li.empty { padding: 16px 20px; }

/* Member page tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 20px; overflow-x: auto; }
.tab-link {
    padding: 10px 14px; color: var(--text-muted); font-weight: 500; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-link:hover { color: var(--text); text-decoration: none; }
.tab-link.active { color: var(--text); border-bottom-color: var(--iris); }
button.tab-link { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }
button.tab-link.active { border-bottom-color: var(--iris); }
button.tab-link:focus-visible { outline: 2px solid var(--iris); outline-offset: -2px; }
.period-form { padding: 14px 20px; }
.section-title { font-family: var(--font-display); font-size: 22px; margin: 28px 0 14px; display: flex; align-items: baseline; gap: 10px; }
.loc-add { color: var(--green-4); }
.loc-del { color: var(--red); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.branch { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit-toggle {
    background: none; border: 0; padding: 0 6px 0 0; color: var(--text-muted); cursor: pointer;
    font-size: 12px; line-height: 1; vertical-align: 1px;
}
.commit-toggle:hover { color: var(--text); }
.commit-toggle[aria-expanded="true"] .chev { display: inline-block; transform: rotate(90deg); }
.commit-files { margin-top: 10px; }
.file-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.file-table td { padding: 3px 8px 3px 0; border: 0; }
.file-table td.num { text-align: right; width: 4.5em; font-variant-numeric: tabular-nums; }
.file-table td.mono { word-break: break-all; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 13px; color: var(--text); background: var(--iris-tint); border: 1px solid var(--iris-line);
}
.chip:hover { text-decoration: none; border-color: var(--iris); }
.data-table tbody tr:hover td { background: var(--row-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.empty { text-align: center; color: var(--text-muted); }
.data-table select { min-height: 30px; padding: 4px 26px 4px 8px; font-size: 13px; }
.card-flush .data-table th:first-child, .card-flush .data-table td:first-child { padding-left: 20px; }
.card-flush .data-table th:last-child, .card-flush .data-table td:last-child { padding-right: 20px; }

.key { font-weight: 600; white-space: nowrap; }
.sub { display: block; color: var(--text-muted); font-size: 13px; }

/* ---------- Stats (condensed readouts) ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; margin-bottom: 20px; }
.stat { background: var(--surface); padding: 14px 18px; }
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.stat-value { white-space: nowrap; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 12px; color: var(--text-muted); }
.stat-value.good { color: var(--green-4); }
.stat-value.warn { color: var(--orange); }
.stat-value.bad { color: var(--red); }

/* ---------- Badges ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
    border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 20px;
    background: var(--raised); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap;
}
.badge-ok { background: var(--green-tint); color: var(--green-4); border-color: var(--green-line); }
.badge-error { background: var(--red-tint); color: var(--red-ink); border-color: var(--red-line); }
.badge-warn { background: var(--orange-tint); color: var(--orange); border-color: var(--orange-line); }
.badge-info { background: var(--iris-tint); color: var(--iris-strong); border-color: var(--iris-line); }
.badge-running { background: var(--iris-tint); color: var(--iris-strong); border-color: var(--iris-line); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Activity heatmap (dashboard) ---------- */

.heatmap { overflow-x: auto; margin-top: 16px; }
.heatmap-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.heatmap-table th {
    padding: 4px 2px; font-weight: 400; color: var(--text-faint); font-size: 11px;
    position: sticky; top: 0; background: var(--bg); font-variant-numeric: tabular-nums;
}
.heatmap-table td { padding: 1px; }
.heatmap-name {
    padding: 4px 12px 4px 0 !important; font-size: 13px; white-space: nowrap;
    position: sticky; left: 0; background: var(--bg); cursor: pointer;
}
.heatmap-name:hover { color: var(--iris); }
.heatmap-cell { width: 14px; height: 20px; border-radius: 3px; display: inline-block; }
.cell-offline { background: var(--cell-empty); }
.cell-away { background: var(--gray); }
.cell-busy, .cell-dnd { background: var(--orange); }
.cell-active-1 { background: var(--green-1); }
.cell-active-2 { background: var(--green-2); }
.cell-active-3 { background: var(--green-3); }
.cell-active-4 { background: var(--green-4); }

.legend { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.timeline {
    position: relative; height: 40px; background: var(--raised);
    border-radius: var(--radius-control); margin: 8px 0; overflow: hidden;
}
.timeline-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%; z-index: 1;
}
.dot-github { background: var(--green-3); }
.dot-jira { background: var(--iris); }

/* ---------- Salary history editor (roster Edit dialog) ---------- */

.salary-editor td { padding: 6px 8px; }
.salary-editor input[type="date"] { width: 150px; }
.salary-editor input[type="number"] { width: 130px; }
.salary-editor input[type="text"] { width: 100%; min-width: 120px; }
.salary-editor tr.removing td:not(:last-child) { opacity: .45; text-decoration: line-through; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Org chart ---------- */

.org-tree, .org-tree ul { list-style: none; }
.org-tree ul { margin-left: 22px; padding-left: 18px; border-left: 1px solid var(--border); }
.org-tree li { position: relative; margin: 6px 0; }
.org-tree ul > li::before {
    content: ""; position: absolute; left: -18px; top: 22px; width: 14px; border-top: 1px solid var(--border);
}
.org-tree > ul { margin: 0; padding: 0; border-left: none; }
.org-tree > ul > li::before { display: none; }
.org-tree summary { list-style: none; cursor: pointer; }
.org-tree summary::-webkit-details-marker { display: none; }
.org-node {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-panel);
    background: var(--surface); min-width: 260px;
}
details > summary .org-node::before {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg); transition: transform .15s; margin: 0 2px;
}
details[open] > summary .org-node::before { transform: rotate(45deg); }
.org-node .who { display: flex; flex-direction: column; line-height: 1.3; }
.org-node .who a { color: var(--text); font-weight: 600; }
.org-node .who a:hover { color: var(--iris); }
.org-node .role { color: var(--text-muted); font-size: 13px; }
.org-node .count { margin-left: auto; }
.org-leaf .org-node { padding-left: 14px; }

/* Top-to-bottom chart (wide screens); the indented list above is for phones */
.org-chart-wrap { overflow-x: auto; padding: 24px 16px; }
.org-chart { width: max-content; margin: 0 auto; --org-line: var(--border-strong); }
.org-chart ul { display: flex; justify-content: center; position: relative; padding-top: 22px; margin: 0; list-style: none; }
.org-chart > ul { padding-top: 0; gap: 28px; }
.org-chart li { position: relative; padding: 22px 6px 0; display: flex; flex-direction: column; align-items: center; }
.org-chart > ul > li { padding-top: 0; }
/* Connectors: each child draws half the bar above it plus its own drop */
.org-chart ul ul > li::before, .org-chart ul ul > li::after {
    content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 1px solid var(--org-line);
}
.org-chart ul ul > li::before { right: 50%; }
.org-chart ul ul > li::after { left: 50%; border-left: 1px solid var(--org-line); }
.org-chart ul ul > li:first-child::before, .org-chart ul ul > li:last-child::after { border-top: 0; }
.org-chart ul ul > li:last-child::before { border-right: 1px solid var(--org-line); border-top-right-radius: 6px; }
.org-chart ul ul > li:first-child::after { border-top-left-radius: 6px; }
.org-chart ul ul > li:only-child::before { display: none; }
.org-chart ul ul > li:only-child::after { border-top: 0; border-radius: 0; }
.org-chart ul ul > li:last-child:not(:only-child)::after { display: none; }
.org-chart li > ul::before {  /* the drop from a manager to the bar */
    content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--org-line);
}
/* Individual contributors in a column, joined by a spine behind the cards */
.org-chart ul.org-stack { flex-direction: column; align-items: center; gap: 10px; }
.org-chart ul.org-stack::before { bottom: 24px; height: auto; }
.org-chart ul.org-stack > li { padding: 0; }
.org-chart ul.org-stack > li::before, .org-chart ul.org-stack > li::after { display: none; }
.org-card {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; text-align: left;
    width: 210px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-panel);
    background: var(--surface);
}
.org-card .who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.org-card .who a { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.org-card .who a:hover { color: var(--iris); }
.org-card .role { color: var(--text-muted); font-size: 12.5px; }
.org-card .count { color: var(--text-muted); font-size: 12px; font-family: var(--font-display); margin-top: 2px; }
@media (min-width: 761px) { .org-tree { display: none; } }
@media (max-width: 760px) { .org-chart-wrap { display: none; } }

/* Avatars: Microsoft 365 photo, or initials */
.avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: var(--av, 32px); height: var(--av, 32px); border-radius: 50%; overflow: hidden;
    background: var(--raised); border: 1px solid var(--border);
    color: var(--text-muted); font-size: calc(var(--av, 32px) * .38); font-weight: 600; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-header-who { display: flex; align-items: center; gap: 14px; }
.name-with-avatar { display: flex; align-items: center; gap: 10px; }
/* Capitalization settings: projects that aren't synced are quieter */
.proj-modes tr.proj-off td strong, .proj-modes tr.proj-off td .sub { opacity: .6; }
.proj-kind { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.proj-kind-scrum { color: var(--iris-strong); border-color: var(--iris-line); }

/* Team review: column headers are sort buttons */
.team-sort { background: none; border: 0; padding: 0; color: var(--text-muted); font: inherit; cursor: pointer; white-space: nowrap; }
.team-sort span { color: var(--text-faint); font-size: 10px; }
.team-sort:hover, .team-sort.active, .team-sort.active span { color: var(--text); }
.team-sort:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 3px; }

/* Code quality */
.cq-score { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.cq-grade {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 15px;
    border: 1px solid var(--border); background: var(--raised); color: var(--text);
}
.cq-grade-a { color: var(--green-4); border-color: var(--green-line); }
.cq-grade-d, .cq-grade-f { color: var(--orange); border-color: var(--orange-line); }
.cq-mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--raised); }
.cq-mix span { display: block; height: 100%; }
.cq-mix-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.cq-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 20px 16px; font-size: 12px; color: var(--text-muted); }
.cq-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cq-why summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.cq-why p { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; max-width: 70ch; }
.faint-row td { opacity: .55; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.split-grid .card { margin-bottom: 20px; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }
.prose p { color: var(--text-muted); max-width: 80ch; margin: 10px 0 0; line-height: 1.55; }
.prose strong { color: var(--text); }

/* ---------- Utilities ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Investment rules (ordered list, editor) ---------- */

.notice[hidden] { display: none; }
.rules-table .handle-cell { width: 36px; padding-right: 0; }
.drag-handle {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px;
    border: 1px solid transparent; border-radius: var(--radius-control); background: transparent;
    color: var(--text-faint); font-size: 15px; letter-spacing: -3px; cursor: grab;
}
.drag-handle:hover, .drag-handle:focus-visible { color: var(--text); background: var(--raised); border-color: var(--border); }
.drag-handle:active { cursor: grabbing; }
.rules-table tr.dragging td { background: var(--iris-tint); }
.rules-table tr.dragging td:first-child { box-shadow: inset 3px 0 0 var(--iris); }
.rules-table .rule-conditions { min-width: 320px; max-width: 560px; }
.rules-table tr.rule-inactive td:not(:first-child):not(:last-child) { color: var(--text-muted); }
.joiner { font-weight: 600; }
.default-count { margin-top: 12px; color: var(--text-muted); }
.default-count a { font-weight: 600; }
.rules-table .rule-name { display: block; font-size: 12px; margin-bottom: 2px; }
.rules-table .rule-sentence { color: var(--text); }
.rules-table .rule-sentence:hover { color: var(--iris); }
.rules-table .then-arrow { color: var(--text-muted); }
.match-mode { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.match-mode label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.match-mode select { width: auto; min-height: 30px; padding: 4px 26px 4px 8px; font-size: 13px; }
.cond-table td { padding: 6px 8px; vertical-align: top; }
.cond-table td:first-child { padding-left: 0; }
.cond-table .cond-prefix { width: 44px; padding-top: 13px; text-align: right; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.cond-table tr:first-child .cond-prefix { color: var(--text); }
.rule-then-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--iris); border-radius: var(--radius-control); background: var(--iris-tint); }
.rule-then-row .then-label { font-weight: 600; color: var(--text); white-space: nowrap; }
.rule-then-row select { width: auto; min-width: 240px; max-width: 100%; }
.rule-meta { margin-top: 16px; }
.cond-table select { min-width: 130px; }
.cond-table .cond-op-cell { width: 230px; }
.cond-table .cond-value { width: 100%; min-width: 180px; }
.cond-table [hidden] { display: none; }
.cond-hint { margin-top: 6px; max-width: 230px; }
.add-condition { margin-top: 10px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.preview-body { padding: 0 20px 14px; }
.preview-more { padding: 10px 20px 14px; }

/* ---------- Auth pages ---------- */

.auth-wrap { min-height: calc(100vh - 140px); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 28px; }
.auth-card .btn { width: 100%; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 13px; margin: 18px 0 14px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .container { padding: 16px 16px 40px; }
    .breadcrumbs { padding: 10px 16px 0; }
}
@media (max-width: 768px) {
    .controls { align-items: stretch; }
    h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
.rel-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.rel-row .num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rel-open { font-size: 13px; white-space: nowrap; margin-left: 4px; }

/* ---------- Stability ------------------------------------------------- */
/* The window selector sits above the tabs because it scopes every sentence
   on every tab, so it belongs to the section and not to one page. */

.win-select { display: flex; gap: 6px; }

.subtabs {
    display: flex; gap: 2px; margin: 0 0 18px;
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.subtab {
    padding: 8px 14px; color: var(--text-muted); font-size: 13px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--text); text-decoration: none; }
.subtab.active { color: var(--text); border-bottom-color: var(--iris); }
.subtab-end { margin-left: auto; }

.stats-tight .stat { padding: 12px 14px; }

/* A window nobody could see renders as a question mark, never a zero.
   "0 unplanned outages" while completely blind is the exact failure this
   product exists to prevent. */
.stat-blind { color: var(--orange); }

.trend { font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-worse { color: var(--red); }
.trend-better { color: var(--green-4); }

.budget {
    height: 7px; background: var(--raised); border-radius: 4px;
    position: relative; overflow: hidden; min-width: 90px;
}
.budget > i { position: absolute; inset: 0 auto 0 0; background: var(--iris); }

td.rationale { max-width: 460px; color: var(--text-muted); font-size: 12.5px; }

/* Incident calendar. The day number is positioned absolutely so a tall bar
   cannot paint over it, and the bar is an SVG rect rather than a sized span:
   a span inside a button is not reliably blockified and clamps to a few px. */
.cal-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 4px; margin-bottom: 14px;
}
.cal-cell {
    position: relative; height: 56px; border-radius: var(--radius-control);
    background: var(--raised); border: 1px solid var(--border); overflow: hidden;
}
.cal-day {
    position: absolute; top: 3px; left: 5px; font-size: 10px;
    color: var(--text-faint); z-index: 2;
}
.cal-bar { position: absolute; inset: 0; width: 100%; height: 100%; }
.cal-bar rect { fill: var(--gray); }
.cal-bad .cal-bar rect { fill: var(--red); }
.cal-planned .cal-bar rect { fill: var(--iris); }
.cal-some .cal-bar rect { fill: var(--orange); }
.cal-flag { position: absolute; bottom: 2px; right: 4px; color: var(--orange); z-index: 2; }
.cal-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.cal-key .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.sw-bad { background: var(--red); } .sw-planned { background: var(--iris); }
.sw-some { background: var(--orange); } .sw-none { background: var(--gray); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 10px 0 4px; }
.spark > i { flex: 1; min-height: 1px; background: var(--iris); border-radius: 2px 2px 0 0; }

.stab-review td { vertical-align: top; }
.stab-review-grid { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stab-review-grid select, .stab-review-grid input { min-width: 120px; }
.stab-review-grid input[type="text"] { min-width: 200px; }
.row-saved { animation: stability-saved 1.6s ease-out; }
.row-child { opacity: .72; }
@keyframes stability-saved { from { background: var(--iris-tint); } to { background: transparent; } }

.cfg { border-top: 1px solid var(--border); padding: 10px 0; }
.cfg > summary { cursor: pointer; padding: 4px 0; }
.sigform { border-left: 2px solid var(--border); padding-left: 12px; margin: 10px 0; }
.form-grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-wide { grid-column: 1 / -1; }
.row-actions form { display: flex; gap: 6px; }

pre.token {
    background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-control);
    padding: 10px; margin-top: 8px; overflow-x: auto; font-size: 12px; user-select: all;
}

/* Confirmation after a settings change. A bare redirect back to a page that
   looks unchanged is indistinguishable from nothing having happened, which is
   how a silent no-op reads as a broken form. */
.notice-ok {
    background: var(--green-tint);
    border: 1px solid var(--green-line);
}

/* ---------- Overview (the landing page) ---------- */

.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1400px; margin: 0 auto; padding: 10px 24px 0; }
.top-bar .breadcrumbs { padding: 0; margin: 0; max-width: none; }
.top-bar .breadcrumbs.is-empty { display: block; visibility: hidden; }
.ov-add-btn { color: var(--text-muted); }
.ov-add-btn .side-icon { width: 14px; height: 14px; }
.ov-add-btn:hover { color: var(--text); }

/* A 12-column grid of 40px rows. Each card spans --w columns and --h rows
   (its kind's default height until resized) and its body scrolls vertically. */
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 40px; gap: 16px; }
.ov-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
    min-width: 0; display: flex; flex-direction: column;
}
.ov-card { grid-column: span var(--w, 4); grid-row: span var(--h, 8); position: relative; overflow: hidden; }
.ov-card.resizing { border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris); user-select: none; }
.ov-resize {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; padding: 0;
    border: none; background: transparent; cursor: nwse-resize; touch-action: none;
    color: var(--text-faint);
}
.ov-resize::after {
    content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-bottom-right-radius: 2px;
}
.ov-resize:hover, .ov-resize:focus-visible, .ov-card.resizing .ov-resize { color: var(--iris); }
.ov-resize:focus-visible { outline: 2px solid var(--iris); outline-offset: -2px; border-radius: 4px; }
.ov-card.dragging { opacity: .55; border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris); }
.ov-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 0 6px; }
.ov-head h2 { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-head h2 a { color: var(--text); }
.ov-head h2 a:hover { color: var(--iris); }
.ov-tools { display: flex; gap: 2px; opacity: .55; transition: opacity .12s; }
.ov-card:hover .ov-tools, .ov-card:focus-within .ov-tools { opacity: 1; }
@media (hover: none) { .ov-tools { opacity: 1; } }
.ov-body { padding: 10px 16px 14px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: break-word; scrollbar-width: thin; }
.ov-body .ov-table { table-layout: fixed; }
.ov-body .ov-table td, .ov-body .ov-table th { overflow: hidden; text-overflow: ellipsis; }
.ov-body .nowrap, .ov-body .ov-table .num { white-space: normal; }
.ov-body .ov-table td .ov-ellipsis { max-width: 100%; }
.ov-empty { text-align: center; padding: 40px 20px; }
.ov-empty p { max-width: 560px; margin: 8px auto 18px; }

.ov-loading { display: flex; gap: 6px; padding: 30px 0; justify-content: center; }
.ov-loading span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: ov-pulse 1s infinite ease-in-out; }
.ov-loading span:nth-child(2) { animation-delay: .15s; }
.ov-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes ov-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ov-loading span { animation: none; opacity: .6; } }

.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.ov-stat { display: flex; flex-direction: column; min-width: 0; }
.ov-stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-stat-value.ov-money { font-size: 20px; }
.ov-stat-value small { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.ov-stat-value.warn { color: var(--orange); }
.ov-stat-value.bad { color: var(--red); }
.ov-stat-label { font-size: 12px; color: var(--text-muted); }
.ov-stat .ov-dot { margin-bottom: 4px; }
.ov-note, .ov-problem { color: var(--text-muted); padding: 10px 0; }
.ov-problem { border-left: 2px solid var(--orange); padding: 6px 0 6px 10px; }
.ov-foot { font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.ov-bad { color: var(--red); }
.ov-add { color: var(--green-4); }
.ov-del { color: var(--red); }

.ov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.ov-dot-available { background: var(--green-4); }
.ov-dot-busy { background: var(--orange); }
.ov-dot-away { background: var(--text-faint); }
.ov-people { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ov-people a { position: relative; display: inline-flex; }
.ov-dot-badge { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--surface); }

.ov-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ov-list li { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ov-list li > .badge:not(:first-child) { margin-left: auto; }
.ov-list .sub { flex-basis: 100%; }
.ov-ellipsis { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-table th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: 12px; padding: 0 8px 6px 0; border-bottom: 1px solid var(--border); }
.ov-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ov-table tr:last-child td { border-bottom: none; }
.ov-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-table td .ov-ellipsis { display: inline-block; max-width: 28ch; vertical-align: bottom; }

.ov-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--raised); }
.ov-bar i { display: block; height: 100%; }
.ov-bar-gh { background: var(--green-3); }
.ov-bar-jira { background: var(--iris); }
.ov-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: 0; }
.ov-key:first-child { margin-left: 0; }
.ov-key-gh { background: var(--green-3); }
.ov-key-jira { background: var(--iris); }

.ov-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-bottom: 10px; }
.ov-spark i { flex: 1; min-height: 2px; background: var(--green-3); border-radius: 2px 2px 0 0; }

.ov-sprint-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ov-progress { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--raised); margin-bottom: 12px; }
.ov-progress i { display: block; height: 100%; }
.ov-p-done { background: var(--green-3); }
.ov-p-doing { background: var(--iris); opacity: .7; }

.ov-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ov-who-name { color: var(--text); font-weight: 600; }

.ov-dialog {
    width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-panel); padding: 20px; box-shadow: 0 24px 64px var(--shadow);
}
.ov-dialog::backdrop { background: var(--scrim); }
.ov-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-form-head h2 { font-size: 17px; }
.ov-form fieldset { border: none; }
.ov-desc { margin-bottom: 12px; }
.ov-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ov-fields > .form-group:has(select), .ov-fields > .ov-check, .ov-fields > .form-group:has(input[type=text]), .ov-fields > .form-group:has(.ov-sizes) { grid-column: 1 / -1; }
.ov-check { margin: 4px 0 14px; }
.ov-label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.ov-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-size { cursor: pointer; }
.ov-size input { position: absolute; opacity: 0; pointer-events: none; }
.ov-size span { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); font-size: 13px; }
.ov-size input:checked + span { background: var(--iris-tint); border-color: var(--iris-line); color: var(--iris-strong); }
.ov-size input:focus-visible + span { outline: 2px solid var(--iris); outline-offset: 2px; }
.ov-errors, .ov-done { margin: 12px 0 0; }

/* Narrower screens keep each widget's height; widths stretch to the screen */
@media (max-width: 1100px) {
    .ov-card.ov-half { grid-column: span 6; }
    .ov-card.ov-whole { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .ov-card { grid-column: 1 / -1; }
    .top-bar { padding: 10px 16px 0; }
    .ov-fields { grid-template-columns: 1fr; }
}
.ov-list .rel-flag { width: auto; flex: none; }
.ov-columns { grid-column: 1 / -1; border: none; margin-bottom: 14px; }
.ov-column-picks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 5px; }
.ov-column-picks .check { font-size: 13px; }
.ov-when { font-size: 12px; color: var(--text-muted); display: block; }
.ov-table th .team-sort { font-size: 12px; font-weight: 500; text-align: inherit; }
.ov-table th.num .team-sort { width: 100%; text-align: right; }
.ov-table .ov-col-bar { width: 22%; }
.ov-table td.ov-col-bar { vertical-align: middle; }

/* Integrations: each card's collector schedule */
.int-schedule { border: none; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.int-schedule legend { font-size: 13px; font-weight: 600; padding: 0 6px 0 0; }
.int-schedule legend .hint { font-weight: 400; margin-left: 6px; }
.int-schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 14px; margin-top: 8px; }
.int-minutes { display: flex; align-items: center; gap: 6px; }
.int-minutes input { width: 90px; }
.int-minutes span { color: var(--text-muted); font-size: 13px; }
.oncall-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.oncall-checks .check { font-size: 13px; }

/* Service desk: on call, next 7 days */
.oncall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.oncall-schedule { border: 1px solid var(--border); border-radius: var(--radius-control); padding: 12px 14px; min-width: 0; }
.oncall-schedule h3 { font-size: 14px; margin-bottom: 6px; }
.oncall-rotation { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 10px; }
.oncall-now { font-size: 13px; margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }
.oncall-shifts { width: 100%; border-collapse: collapse; font-size: 13px; }
.oncall-shifts th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-muted); padding: 0 8px 4px 0; border-bottom: 1px solid var(--border); }
.oncall-shifts td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.oncall-shifts tr:last-child td { border-bottom: none; }
.oncall-current td { color: var(--text); font-weight: 600; }
.oncall-current td:first-child { box-shadow: inset 2px 0 0 var(--green-4); padding-left: 6px; }

/* Logs */
.logs-wrap { max-height: 75vh; overflow-y: auto; }
.logs-table { font-size: 13px; }
.logs-table .logs-source { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-table .logs-message { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* Member page: one card per day of the week */
.week-label { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.day-card { margin-bottom: 8px; padding: 12px; }
.day-card.is-today { border-color: var(--iris); box-shadow: inset 3px 0 0 var(--iris); }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.day-name { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.day-stats { font-size: 12px; color: var(--text-muted); }

/* Theme toggle in the sidebar's Account group: one icon for the current choice */

.theme-toggle .theme-icon { display: none; line-height: 0; }
.theme-toggle[data-choice="system"] .is-system,
.theme-toggle[data-choice="light"] .is-light,
.theme-toggle[data-choice="dark"] .is-dark { display: inline-flex; }

/* A presence state's dot (static/js/palette.js) */
.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.detail-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.bc-section { color: var(--text-faint); }

/* ---------- In-place navigation ----------
   The scrollbar's space is always kept, so a short page and a long one line up
   (its appearing was shifting the whole layout sideways). A heading focused
   after navigation (for keyboard and screen-reader users) shows no ring for mouse users. */
html { scrollbar-gutter: stable; }
h1[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* You and the theme, top right of every page */
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.top-user { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.top-user .side-icon { width: 14px; height: 14px; }
.top-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface);
    color: var(--text-muted); cursor: pointer;
}
.top-icon:hover { color: var(--text); border-color: var(--border-strong); background: var(--raised-hover); }
.top-icon .side-icon { width: 16px; height: 16px; }
@media (max-width: 700px) { .top-user span { display: none; } }

/* Rename one of your Overview pages: a small panel under its button */
.page-menu { position: relative; }
.page-menu > summary { list-style: none; }
.page-menu > summary::-webkit-details-marker { display: none; }
.page-menu-form {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px;
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
    box-shadow: 0 12px 32px var(--shadow);
}
.page-menu-form label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Overview: the relationship graph fills its widget */
.ov-body:has(.ov-graph) { display: flex; flex-direction: column; }
.ov-graph { flex: 1; min-height: 180px; display: flex; }
.ov-graph-svg { width: 100%; height: 100%; flex: 1; display: block; }

/* Overview: the incident calendar, a week to a row */
.ov-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }
.ov-cal-cell { height: 30px; }
.ov-cal-key { margin-bottom: 10px; }
.ov-cal-week { margin-bottom: 2px; font-size: 11px; color: var(--text-faint); text-align: center; }

/* Presence: a row per person, their name beside the day's bar */
.pres-hours { margin-left: 260px; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.pres-row { display: flex; align-items: center; margin-bottom: 4px; }
.pres-name {
    width: 260px; flex: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 8px; cursor: pointer; display: flex; align-items: center;
}
.pres-bar { flex: 1; min-width: 0; height: 28px; background: var(--surface); border-radius: 3px; position: relative; overflow: hidden; }

/* ---------- Phones ----------
   iPhone browsers (Safari, Brave, Chrome: all WebKit) zoom into any field whose
   text is under 16px when it's tapped, and leave the page zoomed, so fields are
   16px here. Tables scroll sideways inside their card instead of being cut off,
   Overview widgets stack full width and are only as tall as what's in them (up
   to their set height), and nothing sits under the notch or the home bar. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.card-flush { overflow-x: auto; }
@supports (min-height: 100dvh) {
    .app, .sidebar { min-height: 100dvh; }
    .auth-wrap { min-height: calc(100dvh - 140px); }
}

@media (max-width: 760px) {
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="date"], input[type="search"], input:not([type]), select, textarea { min-height: 40px; }
    /* Beats the smaller sizes some filters and tables set for themselves */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
    .btn, .controls button { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }

    /* Added to the home screen, the page runs under the status bar: keep clear of it */
    .mobile-bar {
        height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
        padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
    }
    .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
    .container {
        padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }

    /* You, the theme and Add to overview on one row; the trail on its own below */
    .top-bar { flex-wrap: wrap; row-gap: 8px; padding: 10px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    .top-bar .breadcrumbs { order: 2; flex: 1 1 100%; }
    .top-bar .breadcrumbs.is-empty { display: none; }
    .top-actions { order: 1; }
    .top-icon { width: 36px; height: 36px; }

    h1 { font-size: 24px; margin-bottom: 10px; }
    .page-header { margin-bottom: 14px; gap: 10px; }
    .page-sub { font-size: 14px; }

    .stats { grid-template-columns: 1fr 1fr; }
    .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stat { padding: 12px 14px; }
    .stat-value { font-size: 24px; }

    /* A table wider than the screen scrolls within its card */
    .card:has(> table), .card:has(> .data-table), .card:has(> form > table) { overflow-x: auto; }
    .data-table th, .data-table td { padding: 9px 10px; }

    .page-menu-form { width: min(300px, calc(100vw - 32px)); }

    .ov-grid { display: flex; flex-direction: column; gap: 12px; }
    .ov-card, .ov-card.ov-half, .ov-card.ov-whole { max-height: calc(var(--h, 8) * 56px - 16px); }
    .ov-body:has(.ov-graph) { min-height: 320px; }
    .ov-resize, .ov-card .drag-handle { display: none; }  /* drag and resize are for a mouse */
    .ov-head { padding-left: 16px; }
    .ov-tools .btn { min-height: 34px; }
    /* A widget's table keeps its columns readable and scrolls sideways */
    .ov-body { overflow-x: auto; }
    .ov-body .ov-table { table-layout: auto; }
    .ov-body .ov-table th, .ov-body .ov-table td { white-space: nowrap; }
    .ov-body .ov-table td .ov-ellipsis { max-width: 220px; }

    .pres-hours { margin-left: 0; }
    .pres-hours span:nth-child(even) { display: none; }
    .pres-row { flex-wrap: wrap; margin-bottom: 8px; }
    .pres-name { width: 100%; padding: 0 0 3px; }
    .pres-bar { flex-basis: 100%; }
}

/* iPhone only: Safari draws empty date fields with no height and centres their text */
@supports (-webkit-touch-callout: none) {
    input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}

/* Sprint predictability (Scrum page and the Scrum trends widget) */
.pred-hint { font-size: 13px; }
.pred-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pred-table th, .pred-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pred-table thead th { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.pred-table tbody th { text-align: left; font-weight: 500; }
.pred-table tbody tr:last-child th, .pred-table tbody tr:last-child td { border-bottom: none; }
.pred-table td.num { text-align: right; white-space: nowrap; }
.pred-table td .sub { font-size: 12px; }
.pred-big { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pred-big.good { color: var(--green-4); }
.pred-big.warn { color: var(--orange); }
.pred-big.bad { color: var(--red); }
.pred-sprints { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.pred-sprints li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 3.5em; gap: 10px; align-items: center; font-size: 13px; }
.pred-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
/* The bar is the share of the plan delivered; the tick is where "met" begins */
.pred-bar { position: relative; height: 10px; border-radius: 3px; background: var(--raised); }
.pred-bar i { display: block; height: 100%; border-radius: 3px; background: var(--gray); }
.pred-bar i.good { background: var(--green-3); }
.pred-bar i.warn { background: var(--orange); }
.pred-bar i.bad { background: var(--red); }
.pred-bar { display: flex; }
.pred-bar i:first-child { border-radius: 3px 0 0 3px; }
.pred-bar i:only-child { border-radius: 3px; }
/* In QA at close: development done, not yet delivered, so hatched rather than solid */
.pred-bar i.pred-qa-seg, .pred-key-qa {
    background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px);
    box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: 0 3px 3px 0;
}
.pred-qa-pct { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.1; }
.pred-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.pred-key span { display: inline-flex; align-items: center; gap: 6px; }
.pred-key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.pred-key-done { width: 21px !important; background: linear-gradient(90deg, var(--green-3) 0 33%, var(--orange) 33% 67%, var(--red) 67%); }
.pred-key-met { width: 2px !important; height: 14px !important; background: var(--text-faint); }
.pred-bar::after { content: ""; position: absolute; left: var(--met); top: -3px; bottom: -3px; width: 2px; background: var(--text-faint); }
.pred-pct { text-align: right; font-variant-numeric: tabular-nums; }
.ov-body .pred-big { font-size: 22px; }
@media (max-width: 760px) {
    /* The explanations sit under the table on a phone, so the numbers keep their room */
    .pred-table tbody th .sub, .pred-last { display: none; }
    .pred-table th, .pred-table td { padding: 8px 6px; }
    .pred-big, .ov-body .pred-big { font-size: 20px; }
    .pred-sprints li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3em; }
}

/* Scrum page: eight readouts for the sprint fit one row on a laptop */
#sprint-cards { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
#sprint-cards .stat { padding: 12px 14px; }
#sprint-cards .stat-value { font-size: 22px; white-space: normal; }

/* ---------- Administration → Teams ---------- */
/* Each level steps in, with a corner from its parent */
.team-tree .team-name { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--depth, 0) * 22px); }
.team-tree .team-name input { width: 220px; max-width: 100%; }
.team-tree select { width: 260px; max-width: 100%; }
.team-branch { flex: none; width: 12px; height: 12px; margin-top: -10px; border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); border-bottom-left-radius: 3px; }

/* ---------- Delivery → Releases ---------- */
/* A release is a card that folds; under it a tree of request › epic › ticket,
   each level a quiet row with a rule down its left to show what it's under. */
.rls { padding: 0; margin-bottom: 14px; }
.rls > summary { list-style: none; cursor: pointer; padding: 16px 20px 14px; }
.rls > summary::-webkit-details-marker, .rls-node > summary::-webkit-details-marker { display: none; }
.rls[open] > summary { border-bottom: 1px solid var(--border); }
.rls-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rls-title h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 0; }
.rls-title h3::before {
    content: ""; display: inline-block; width: 0; height: 0; margin-right: 10px; vertical-align: 3px;
    border-left: 5px solid var(--text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}
.rls[open] .rls-title h3::before { transform: rotate(90deg); }
.rls-when { font-weight: 600; color: var(--text); }
.rls-when.is-today { color: var(--iris); }
.rls-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rls-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-left: 15px; }
.rls-projects { display: flex; gap: 6px; flex-wrap: wrap; }
.rls-project {
    font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-control);
    border: 1px solid var(--border-strong); color: var(--text-muted);
}
.rls-project small { font-weight: 500; }
.rls-project.is-released { border-color: var(--green-line); color: var(--green-4); background: var(--green-tint); }
.rls-bar { display: inline-flex; width: 140px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--raised); }
.rls-bar i { display: block; height: 100%; }
.rls-bar .is-done { background: var(--green-3); }
.rls-bar .is-doing { background: var(--iris); opacity: .55; }
.rls-count { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rls-desc { margin: 8px 0 0 15px; color: var(--text-muted); font-size: 13px; max-width: 80ch; }
.rls-empty { padding: 12px 0 4px; text-align: left; }
.rls-none { color: var(--text-muted); font-size: 13px; padding: 6px 0 10px 20px; margin: 0; }

.rls-list { list-style: none; margin: 0; padding: 0; }
.rls-top { padding: 6px 12px 12px; }
.rls-list .rls-list { margin-left: 18px; border-left: 1px solid var(--border); padding-left: 6px; }
.rls-row {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 34px; padding: 4px 8px;
    border-radius: var(--radius-control); font-size: 14px;
}
.rls-node > summary { list-style: none; cursor: pointer; }
.rls-node > summary:hover { background: var(--raised); }
.rls-node > summary::before {
    content: ""; flex: none; width: 0; height: 0;
    border-left: 5px solid var(--text-faint); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}
.rls-node[open] > summary::before { transform: rotate(90deg); }
.rls-ticket > .rls-row { padding-left: 23px; }
.rls-kind { flex: none; font-size: 12px; font-weight: 600; color: var(--text-faint); width: 76px; white-space: nowrap; }
.rls-req > summary .rls-summary { font-weight: 600; }
.rls-loose > summary .rls-summary { font-weight: 500; color: var(--text-muted); }
.rls-key { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rls-type { flex: none; font-size: 12px; color: var(--text-faint); width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rls-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rls-summary a { color: inherit; }
.rls-meta { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rls-who { font-size: 13px; color: var(--text-muted); width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
    .rls > summary { padding: 14px 14px 12px; }
    .rls-top { padding: 4px 4px 10px; }
    .rls-row { flex-wrap: wrap; gap: 4px 8px; }
    .rls-summary { flex-basis: 100%; order: 3; white-space: normal; }
    .rls-ticket > .rls-row { padding-left: 8px; }
    .rls-meta { margin-left: 0; order: 4; }
    .rls-kind, .rls-type { width: auto; }
    .rls-who { width: auto; }
    .rls-list .rls-list { margin-left: 8px; }
}