/* =====================================================================
   ARAPL Project Management Portal - stylesheet
   Self-contained: no CDN, no framework. Works offline on an intranet.
   ===================================================================== */

:root {
    /* surfaces and ink */
    --surface:        #ffffff;
    --page:           #f4f5f7;
    --sidebar:        #14243a;
    --sidebar-hover:  #1d3355;
    --sidebar-active: #2a78d6;
    --ink:            #0b0b0b;
    --ink-2:          #52514e;
    --ink-muted:      #898781;
    --line:           #e3e5e9;
    --line-strong:    #c9ccd3;

    /* categorical series (validated: adjacent CVD dE 9.1, normal-vision 19.6) */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;

    /* status - reserved, never used as a series colour */
    --good:     #0ca30c;
    --warning:  #fab219;
    --serious:  #ec835a;
    --critical: #d03b3b;

    --radius:   6px;
    --shadow:   0 1px 2px rgba(11,11,11,.06), 0 1px 8px rgba(11,11,11,.04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--page);
}

a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ---------------------------------------------------------------
   Shell
   --------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--sidebar);
    color: #cfd8e6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand .brand-name { color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.brand .brand-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: #7f93b0; }

.nav { padding: 10px 0; flex: 1; }
.nav-group-label {
    padding: 14px 20px 6px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6d81a0;
}
.nav a {
    display: block;
    padding: 8px 20px;
    color: #cfd8e6;
    border-left: 3px solid transparent;
    font-size: .9rem;
}
.nav a:hover { background: var(--sidebar-hover); text-decoration: none; color: #fff; }
.nav a.active { background: var(--sidebar-hover); border-left-color: var(--sidebar-active); color: #fff; font-weight: 600; }

.sidebar-foot {
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .78rem;
    color: #7f93b0;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar .page-title { font-weight: 600; font-size: 1.05rem; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: .85rem; color: var(--ink-2); }
.topbar .who strong { color: var(--ink); }

.content { padding: 20px 24px 48px; }

/* ---------------------------------------------------------------
   Cards, grid
   --------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}
.card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1400px) {
    .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .grid.cols-4, .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}

/* ---------------------------------------------------------------
   Stat tiles
   --------------------------------------------------------------- */

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.stat .label { font-size: .78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.stat .value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.stat .note { font-size: .8rem; color: var(--ink-muted); margin-top: 2px; }
.stat.alert .value { color: var(--critical); }
.stat.blocked .value { color: #8a5b00; }
a.stat { display: block; color: inherit; }
a.stat:hover { text-decoration: none; border-color: var(--line-strong); }
.stat.warn .value { color: #b07600; }

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

table.grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.grid-table th {
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    background: #fafbfc;
    border-bottom: 1px solid var(--line);
    padding: 9px 12px;
    white-space: nowrap;
}
table.grid-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.grid-table tbody tr:hover { background: #f7f9fc; }
table.grid-table td.num, table.grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid-table .empty { text-align: center; color: var(--ink-muted); padding: 28px 12px; }
.table-wrap { overflow-x: auto; }

.wbs-indent-1 { padding-left: 22px !important; }
.wbs-indent-2 { padding-left: 44px !important; }
.wbs-indent-3 { padding-left: 66px !important; }
.wbs-indent-4 { padding-left: 88px !important; }
.row-summary td { background: #fbfcfd; font-weight: 600; }

/* ---------------------------------------------------------------
   Pills and badges
   --------------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pill-idle     { background: #eef0f3; color: #4b5563; border-color: #dfe3e8; }
.pill-progress { background: #e6f0fc; color: #1a5aa6; border-color: #cbdff8; }
.pill-done     { background: #e4f6e4; color: #0a7a0a; border-color: #c6ecc6; }
.pill-hold     { background: #fdf1dc; color: #8a5b00; border-color: #f7e0b5; }
.pill-cancel   { background: #f1f2f4; color: #6b7280; border-color: #e0e2e6; text-decoration: line-through; }
.pill-late     { background: #fbe6e6; color: #a32424; border-color: #f3cccc; }

/* ---------------------------------------------------------------
   Dependency chips

   A separate visual family from the status pills above: outlined,
   not filled. Status answers "what state is the work in"; a chip
   answers "how does this task relate to the rest of the plan", so a
   row can carry both without the two colour systems competing.
   Every chip is labelled in words - colour never carries the meaning
   on its own.
   --------------------------------------------------------------- */

.dep {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}
.dep + .dep { margin-left: 4px; }

.dep-blocked { color: #8a5b00; border-color: #f0cf8a; background: #fdf7ec; }
.dep-ready   { color: #0a7a0a; border-color: #a8dda8; background: #f1faf1; }
.dep-auto    { color: #4a3aa7; border-color: #cfc9ee; background: #f5f3fd; }
.dep-linked  { color: #52514e; border-color: #dfe3e8; background: #fafbfc; font-variant-numeric: tabular-nums; }

.health { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .8rem; }
.health .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.health-green  .dot { background: var(--good); }
.health-amber  .dot { background: var(--warning); }
.health-red    .dot { background: var(--critical); }
.health-green  { color: #0a7a0a; }
.health-amber  { color: #8a5b00; }
.health-red    { color: #a32424; }

.prio-1 { color: var(--critical); font-weight: 600; }
.prio-2 { color: #b56221; font-weight: 600; }
.prio-3 { color: var(--ink-2); }
.prio-4 { color: var(--ink-muted); }

.overdue-flag { color: var(--critical); font-weight: 600; }

/* ---------------------------------------------------------------
   Progress bars
   --------------------------------------------------------------- */

.progress {
    position: relative;
    height: 8px;
    background: #eceef2;
    border-radius: 999px;
    overflow: hidden;
    min-width: 90px;
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--series-1);
    border-radius: 999px;
}
.progress.done > span { background: var(--good); }
.progress.late > span { background: var(--critical); }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .pct { font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

.plan-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--ink-2);
}

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

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 4px;
}
.field input[type=text],
.field input[type=password],
.field input[type=email],
.field input[type=number],
.field input[type=date],
.field select,
.field textarea,
.inline-form input, .inline-form select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    font: inherit;
    color: var(--ink);
    background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--series-1);
    box-shadow: 0 0 0 3px rgba(42,120,214,.15);
}
.field .hint { font-size: .78rem; color: var(--ink-muted); margin-top: 3px; }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check label { margin: 0; font-weight: 500; color: var(--ink); }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.filters .field { min-width: 170px; }
.filters .field.wide { min-width: 260px; }

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 6px;
}

.validation-summary {
    background: #fbe6e6;
    border: 1px solid #f3cccc;
    color: #a32424;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .875rem;
}
.validation-summary ul { margin: 0; padding-left: 18px; }
.field-error { color: #a32424; font-size: .78rem; display: block; margin-top: 3px; }
.input-validation-error { border-color: #d03b3b !important; }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: #f4f6f9; text-decoration: none; }
.btn-primary { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.btn-primary:hover { background: #1f66bd; border-color: #1f66bd; }
.btn-danger { background: #fff; border-color: #e6bcbc; color: #a32424; }
.btn-danger:hover { background: #fbe6e6; }
.btn-sm { padding: 4px 9px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--series-1); padding: 0; cursor: pointer; font: inherit; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------- */

.flash {
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: .9rem;
    border: 1px solid;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.flash-success { background: #e4f6e4; border-color: #c6ecc6; color: #0a6b0a; }
.flash-error   { background: #fbe6e6; border-color: #f3cccc; color: #a32424; }
.flash .icon { font-weight: 700; }

/* ---------------------------------------------------------------
   Charts
   --------------------------------------------------------------- */

.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; font-size: .82rem; }
.legend .item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.legend .swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.legend .count { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.bar-chart { display: flex; flex-direction: column; gap: 9px; }
.bar-chart .row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 10px; font-size: .84rem; }
.bar-chart .track { background: #f0f2f5; border-radius: 4px; height: 16px; position: relative; overflow: hidden; }
.bar-chart .fill { height: 100%; border-radius: 0 4px 4px 0; }
.bar-chart .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar-chart .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-center { font-size: 1.4rem; font-weight: 600; fill: var(--ink); }
.donut-label  { font-size: .62rem; fill: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------------------------------------------------------------
   Gantt
   --------------------------------------------------------------- */

.gantt-shell { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.gantt-left { flex: 0 0 320px; border-right: 1px solid var(--line); overflow: hidden; }
.gantt-right { flex: 1; overflow-x: auto; overflow-y: hidden; }

.gantt-head { height: 46px; border-bottom: 1px solid var(--line); background: #fafbfc; display: flex; align-items: flex-end; }
.gantt-left .gantt-head { padding: 0 12px 8px; font-size: .78rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }

.gantt-row {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
    font-size: .82rem;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-row.summary { font-weight: 600; background: #fbfcfd; }
.gantt-row .wbs { color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-right: 8px; font-size: .76rem; }
.gantt-row a { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gantt-row a:hover { color: var(--series-1); }
/* The title may be long; let it ellipsis so the flag is never pushed
   out of the fixed-width left pane. */
.gantt-row .dep { flex: 0 0 auto; margin-left: 6px; }

.gantt-canvas { position: relative; }
.gantt-scale { height: 46px; position: relative; border-bottom: 1px solid var(--line); background: #fafbfc; }
.gantt-month { position: absolute; top: 4px; font-size: .74rem; font-weight: 600; color: var(--ink-2); padding-left: 6px; border-left: 1px solid var(--line); height: 18px; }
.gantt-day  { position: absolute; top: 24px; font-size: .68rem; color: var(--ink-muted); width: 22px; text-align: center; }
.gantt-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: #f0f2f5; }
.gantt-gridline.week { background: #e3e5e9; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--critical); opacity: .55; z-index: 3; }

.gantt-bars { position: relative; }
.gantt-lane { height: 30px; border-bottom: 1px solid #f0f2f5; position: relative; }
.gantt-lane.summary { background: #fbfcfd; }

.gbar {
    position: absolute;
    top: 8px;
    height: 14px;
    border-radius: 4px;
    background: var(--series-1);
    cursor: pointer;
    min-width: 4px;
}
.gbar.summary { background: #35435c; height: 10px; top: 10px; border-radius: 3px; }
.gbar.done { background: var(--good); }
.gbar.late { background: var(--critical); }

/* Blocked bars are hatched as well as amber, so the state survives a
   colour-blind reader, a black-and-white print and forced-colors mode. */
.gbar.blocked {
    background: repeating-linear-gradient(45deg,
        #fab219, #fab219 4px, #f6dca2 4px, #f6dca2 8px);
}
/* Distinct from .gbar.done - a Ready task is not started, let alone finished. */
.gbar.ready { background: #7fc37f; }

/* A darker cap on the left edge marks a bar that waits on something. */
.gbar.linked::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 4px 0 0 4px;
    background: rgba(11, 11, 11, .45);
}
.gbar .gfill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.42); border-radius: 4px 0 0 4px; }
.gbar .glabel { position: absolute; left: 100%; top: -2px; margin-left: 8px; font-size: .74rem; color: var(--ink-2); white-space: nowrap; }

.gbaseline { position: absolute; top: 24px; height: 3px; background: #b9bec8; border-radius: 2px; }

.gmilestone {
    position: absolute;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--series-4);
    transform: rotate(45deg);
    border: 1px solid #b07600;
}
.gmilestone.late { background: var(--critical); border-color: #8f2020; }
.gmilestone.done { background: var(--good); border-color: #086b08; }

.glink { position: absolute; pointer-events: none; }

.gantt-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); padding: 10px 2px 0; }
.gantt-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend .sw { width: 16px; height: 8px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------------------
   Login
   --------------------------------------------------------------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #14243a 0%, #1d3355 55%, #24507f 100%);
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
    padding: 30px 30px 26px;
}
.login-card h1 { font-size: 1.25rem; margin-bottom: 2px; }
.login-card .sub { color: var(--ink-2); font-size: .87rem; margin-bottom: 20px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; justify-content: center; }
.login-foot { text-align: center; color: #9fb0c8; font-size: .78rem; margin-top: 18px; }
.login-site { text-align: center; margin-top: 16px; }
.login-site-note {
    display: block;
    margin-top: 7px;
    color: #cbd8ea;
    font-size: .78rem;
}
.login-site-bad { color: #ffd6d6; font-weight: 600; }

/* ---------------------------------------------------------------
   Which installation am I on

   Three signals, because one is easy to stop seeing: a coloured hairline
   along the very top, a chip under the company name, and the site tag at
   the front of the browser tab title. All three are driven by the Site.*
   keys in site.config, so they follow the deployment and not the data.

   Everything here is fixed-position or lives inside the existing sidebar
   block, so adding a site badge never shifts the page by a pixel.
   --------------------------------------------------------------- */

.site-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: #2a78d6;   /* overridden inline per site */
}

.site-chip {
    display: inline-block;
    margin-top: 9px;
    padding: 2px 9px;
    border-radius: 10px;
    background: #2a78d6;   /* overridden inline per site */
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* The non-production notice. Fixed to the corner rather than banded across
   the top, so it cannot scroll out of sight and cannot push the sticky
   sidebar past the bottom of the viewport. */
.site-warn {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 70;
    max-width: 300px;
    padding: 9px 13px;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-left: 4px solid #eda100;   /* overridden inline per site */
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(15, 30, 55, .18);
    color: var(--ink-2);
    font-size: .78rem;
    line-height: 1.45;
}
.site-warn strong { color: var(--ink); }
.site-warn-db { display: block; margin-top: 3px; color: var(--ink-muted); font-family: ui-monospace, Consolas, monospace; }

/* A config mismatch is not a caution, it is a fault: red, and never the
   site's own accent colour, because the site's own colour is exactly the
   thing that cannot be trusted at that moment. */
.site-warn-bad {
    border-left-color: #d03b3b;
    background: #fff5f5;
}

/* The notice floats over the bottom-right corner, where pagers, button rows
   and the Gantt's horizontal scrollbar live. Reserve the space rather than
   covering them; the class is only emitted on pages that show a notice. */
body.has-site-warn .content { padding-bottom: 96px; }


/* ---------------------------------------------------------------
   Misc
   --------------------------------------------------------------- */

.muted { color: var(--ink-muted); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hidden { display: none; }

.crumbs { font-size: .82rem; color: var(--ink-muted); margin-bottom: 8px; }
.crumbs a { color: var(--ink-2); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: none; }
.timeline .meta { font-size: .78rem; color: var(--ink-muted); }

.pager { display: flex; gap: 6px; align-items: center; padding: 12px 16px; }
.pager a, .pager span {
    padding: 4px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    font-size: .82rem;
    color: var(--ink-2);
}
.pager span.current { background: var(--series-1); border-color: var(--series-1); color: #fff; font-weight: 600; }

.week-nav { display: flex; align-items: center; gap: 12px; }
.week-nav .range { font-weight: 600; }

@media print {
    .sidebar, .topbar, .toolbar, .filters, .btn { display: none !important; }
    .content { padding: 0; }
    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }

    /* The strip is decoration and goes. The notice stays, pinned back into the
       flow so it prints at the top of the first page: a schedule printed off
       the test system and handed to a customer is the expensive mistake here,
       and the sidebar chip is hidden on paper along with the sidebar. */
    .site-strip { display: none; }
    body.has-site-warn .content { padding-bottom: 0; }
    .site-warn {
        position: static;
        max-width: none;
        margin: 0 0 10px;
        box-shadow: none;
    }
}