/* hrplus-assets: 1.9.3 */
/* HR PLUS — internal HR application
   Surfaces are defined by hairlines, not shadows; the only accent is a deep
   teal used for the active nav marker, primary actions and focus rings.
   Numeric columns use tabular figures because this app is mostly dates and
   day counts. */

:root {
    --ink:          #17222c;
    --ink-soft:     #3c4a55;
    --muted:        #63727c;
    --paper:        #f4f6f7;
    --surface:      #ffffff;
    --line:         #d9e0e4;
    --line-strong:  #b9c4cb;
    --accent:       #2c6b64;
    --accent-ink:   #1e4f4a;
    --accent-wash:  #e7f0ee;
    --warn:         #8a6320;
    --warn-wash:    #fdf4e3;
    --danger:       #9d3535;
    --danger-wash:  #fbeceb;
    --info:         #2b5f8e;
    --info-wash:    #e8f0f8;
    --on-accent:    #ffffff;
    --weekend:      #f7f8f9;
    --usage-track:  #dfe4e8;

    --radius: 3px;
    --gap: 1.25rem;
    --sidebar: 15rem;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

/* Dark is opt-in, never automatic: the switch next to Sign out writes a
   cookie and the server renders data-theme on <html>, so the page arrives in
   the right theme with no flash and no inline script (the content security
   policy forbids one anyway). */
[data-theme="dark"] {
    --ink:         #e6ecef;
    --ink-soft:    #c2ced6;
    --muted:       #93a3ad;
    --paper:       #131a20;
    --surface:     #1a232b;
    --line:        #2b3843;
    --line-strong: #3e4d59;
    --accent:      #6fb3a9;
    --accent-ink:  #9ed0c8;
    --accent-wash: #1e2f2e;
    --warn:        #d3ab63;
    --warn-wash:   #2a2418;
    --danger:      #e08a8a;
    --danger-wash: #2c1c1c;
    --info:        #8fb8e0;
    --info-wash:   #1b2733;
    --on-accent:   #10191f;
    --weekend:     #161e25;
    --usage-track: #2f3b45;
}

/* Form controls and scrollbars follow the chosen theme too, otherwise a date
   picker opens bright white in a dark page. */
:root { color-scheme: light; }
/* More specific than :root, so it wins: native lists, date pickers and
   scrollbars are drawn dark — a highlighted option stays readable. */
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p  { margin: 0 0 0.75rem; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

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

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

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 10;
    background: var(--surface); padding: 0.5rem 1rem; border: 1px solid var(--line);
}
.skip:focus { left: 0; }

/* ---------- shell ---------- */

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

.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.brand {
    font-weight: 650;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink);
}

.sidebar-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 1rem 0.75rem 1.25rem;
    gap: 0.5rem;
}

.nav-group {
    margin: 1rem 0.5rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-list a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.nav-list a:hover { background: var(--paper); color: var(--ink); }
.nav-list a[aria-current="page"] {
    border-left-color: var(--accent);
    background: var(--accent-wash);
    color: var(--accent-ink);
    font-weight: 550;
}

.sidebar-foot {
    margin-top: auto;
    padding: 0.875rem 0.75rem 0;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 0.5rem;
}

.who { display: flex; flex-direction: column; margin: 0; }
.who-name { font-weight: 550; }
.who-role { font-size: 0.8125rem; color: var(--muted); }

.locale-form { display: flex; gap: 0.25rem; }
.locale-button {
    font: inherit; font-size: 0.75rem;
    padding: 0.15rem 0.45rem;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
}
.locale-button.is-current { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

.main {
    flex: 1;
    min-width: 0;
    padding: 1.75rem 2rem 4rem;
    max-width: 88rem;   /* wide screens use their width: tables need it more than prose does */
}

.main-head { margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }

.menu-toggle { display: none; }

/* ---------- guest pages ---------- */

.body-centred {
    /* A column: the sign-in form, and under it the thought of the moment. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem;
}

.panel {
    width: 100%; max-width: 24rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
}

.panel-brand { margin-bottom: 1.5rem; display: flex; flex-direction: column; }
.brand-mark { font-size: 1.25rem; font-weight: 650; }
.brand-sub { color: var(--muted); font-size: 0.875rem; }

/* ---------- forms ---------- */

.stack { display: flex; flex-direction: column; gap: 1rem; }
.form-narrow { max-width: 30rem; }
.form-wide { max-width: 46rem; }

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
    background: var(--surface);
}
legend { padding: 0 0.4rem; font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.875rem; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: 0.875rem; color: var(--ink-soft); }

/* Every text-like field, listed by exclusion rather than by name: the old rule
   named the types one by one, so a tel or time field added later fell back to
   the browser's own look and stood out next to the rest. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]),
select, textarea {
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}
textarea { resize: vertical; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.error { color: var(--danger); font-size: 0.8125rem; margin: 0; }
.hint  { color: var(--muted); font-size: 0.8125rem; margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.check { display: inline-flex; align-items: center; gap: 0.4rem; }
.check input { width: auto; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.inline-form { display: inline; }

.filters {
    display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}
.filters .field { margin-bottom: 0.5rem; min-width: 11rem; }
.field-actions { flex-direction: row; gap: 0.5rem; align-items: center; }

/* ---------- buttons ---------- */

.button {
    display: inline-block;
    font: inherit;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.button:hover { border-color: var(--accent); color: var(--accent-ink); }

.button-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 550;
}
.button-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }

.button-danger { border-color: var(--danger); color: var(--danger); }
.button-danger:hover { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }

.button-quiet { border-color: transparent; color: var(--muted); }
.button-quiet:hover { border-color: var(--line-strong); }

.button-small { padding: 0.25rem 0.6rem; font-size: 0.8125rem; }
.button-block { width: 100%; text-align: center; }

/* ---------- data ---------- */

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.table th { font-size: 0.8125rem; color: var(--muted); font-weight: 550; background: var(--paper); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--accent-wash); }
.table-dense th, .table-dense td { padding: 0.4rem 0.7rem; font-size: 0.875rem; }
.table .is-muted td { color: var(--muted); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Dates and times: the ordinary font, with digits of equal width so a
   column still lines up — the monospace looked like a different application. */
.cell-mono { font-family: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-meta { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--muted); max-width: 22rem; overflow-wrap: anywhere; }

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
    overflow: hidden;
}
.facts > div { background: var(--surface); padding: 0.85rem 1rem; }
.facts dt { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.15rem; }
.facts dd { margin: 0; font-weight: 550; }
.facts dd.num { text-align: left; font-size: 1.25rem; }

.tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius);
    border: 1px solid currentColor;
}
.tag-on  { color: var(--accent-ink); background: var(--accent-wash); }
.tag-off { color: var(--muted); }

.block { margin: 2rem 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.note-body { white-space: pre-line; color: var(--ink-soft); }

.lede { font-size: 1.0625rem; color: var(--ink-soft); }
.muted { color: var(--muted); }
.empty { padding: 2rem; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.link-back { font-size: 0.875rem; }

.pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }

/* ---------- notices ---------- */

.notice {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-left-width: 3px;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    background: var(--surface);
}
.notice-success { border-left-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.notice-error   { border-left-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
.notice-warning { border-left-color: var(--warn); background: var(--warn-wash); color: var(--warn); }

.error-code { font-size: 2.5rem; font-weight: 650; margin: 0; color: var(--muted); }
.trace { font-family: var(--mono); font-size: 0.75rem; background: var(--paper); padding: 0.75rem; overflow-x: auto; border: 1px solid var(--line); }

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
    .shell { flex-direction: column; }

    .sidebar { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--line); }

    .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.25rem; height: 2.25rem;
        background: transparent; border: 1px solid var(--line-strong);
        border-radius: var(--radius); cursor: pointer;
    }
    .menu-bars, .menu-bars::before, .menu-bars::after {
        display: block; width: 1rem; height: 2px; background: var(--ink); content: "";
    }
    .menu-bars { position: relative; }
    .menu-bars::before { position: absolute; top: -5px; }
    .menu-bars::after  { position: absolute; top: 5px; }

    .sidebar-body { display: none; }
    .sidebar-body.is-open { display: flex; }

    .sidebar-foot { margin-top: 1rem; }

    .main { padding: 1.25rem 1rem 3rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .filters { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- calendar, feed and status colours ---------- */

.month-nav {
    /* Wraps on a phone: the "next" button used to slide off the screen. */
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.month-nav strong { font-size: 1.0625rem; letter-spacing: 0.01em; }
/* The bar is a pill, so square buttons inside it look like an accident. */
.month-nav .button { border-radius: 999px; padding-inline: 0.9rem; }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -16px rgba(0, 0, 0, 0.35);
}

.cal-head {
    background: var(--paper);
    padding: 0.5rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.cal-cell {
    position: relative;
    background: var(--surface);
    min-height: 5.75rem;
    padding: 0.4rem 0.4rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.cal-cell.is-empty   { background: var(--paper); }
.cal-cell.is-weekend { background: var(--weekend); }
.cal-cell.is-holiday { background: var(--warn-wash); }

/* Today: the date in a filled circle, as before. Nothing around the cell —
   a tint and a ring say "you picked this day", and a day that marks itself
   must not look like a day the reader chose. */
.cal-cell.is-today .cal-day {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800;
}

.cal-day {
    flex: 0 0 auto;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: 0.975rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.cal-holiday {
    font-size: 0.6875rem; color: var(--warn); font-weight: 550;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cal-person {
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    border-left: 3px solid currentColor;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-approved { color: var(--accent-ink); background: var(--accent-wash); }
.cal-pending  { color: var(--warn); background: var(--warn-wash); }

.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; font-size: 0.8125rem; }

/* status tags reuse the tag base */
.tag-approved  { color: var(--accent-ink); background: var(--accent-wash); }
.tag-pending   { color: var(--warn); background: var(--warn-wash); }
.tag-rejected  { color: var(--danger); background: var(--danger-wash); }
.tag-cancelled { color: var(--muted); }

.badge {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.6875rem;
    text-align: center;
    line-height: 1.25rem;
}

.is-negative { color: var(--danger); font-weight: 600; }

.cell-actions { white-space: nowrap; }
.cell-actions select,
.cell-actions input { width: auto; display: inline-block; margin-right: 0.25rem; }

.feed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feed-item {
    display: flex; gap: 0.75rem; align-items: baseline;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item.is-unread { border-left: 3px solid var(--accent); background: var(--accent-wash); }
.feed-time { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 60rem) {
    .calendar { font-size: 0.75rem; }
    .cal-cell { min-height: 4rem; }
    .cell-actions select, .cell-actions input { margin-bottom: 0.25rem; }
}

/* ---------- dashboard ---------- */

.two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0 2rem;
}

.plain { list-style: none; margin: 0; padding: 0; }
.plain li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.plain li:last-child { border-bottom: 0; }

/* ---------- brand ---------- */

/* The image carries width/height attributes so the page does not jump while it
   loads, which also means it renders at its full 440px if these rules ever fail
   to arrive. max-width is the belt to the width's braces: whatever happens, the
   logo cannot push past the box it sits in. */
.brand-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* An explicit width, not just max-width: inside a flex row an <a> whose only
   child is an image with width:100% has no intrinsic size of its own. */
.sidebar-head { gap: 0.75rem; overflow: hidden; }
.sidebar-head .brand {
    display: block;
    flex: 0 1 auto;
    width: 8.25rem;
    max-width: 100%;
    min-width: 0;
    color: var(--ink);
}
.sidebar-head .brand:hover { color: var(--ink); }

.panel-brand { align-items: flex-start; }
.panel-brand .brand-logo { width: 10.5rem; max-width: 100%; margin-bottom: 0.5rem; color: var(--ink); }

@media (max-width: 60rem) {
    .sidebar-head .brand { width: 7.25rem; }
}

/* ---------- absence types ---------- */

.tag-type { color: var(--muted); border-color: var(--line-strong); }

/* In the calendar the status gives the fill, the type gives the left edge, so
   a glance separates annual leave from sick days without reading anything. */
.cal-person.type-sick         { border-left-color: var(--danger); }
.cal-person.type-paid_leave   { border-left-color: var(--warn); }
.cal-person.type-unpaid_leave { border-left-color: var(--muted); }
.cal-person.type-remote       { border-left-color: var(--accent-ink); border-left-style: dashed; }

/* The sign-in screen is the one place with time to spare, so the logo settles
   in once. Runs about half a second and is skipped for reduced motion. */
@keyframes logo-settle {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.panel-brand .brand-logo {
    animation: logo-settle 0.55s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .panel-brand .brand-logo { animation: none; }
}

/* ---------- selectable calendar ---------- */

.cal-cell[data-date] { cursor: pointer; transition: background 0.12s ease; }
.cal-cell[data-date]:hover { outline: 1px solid var(--line-strong); outline-offset: -1px; }

/* A selected day has to be unmistakable at a glance, so it takes the accent as
   a fill rather than a hint of one, and breathes until the choice is acted on. */
/* A selected day is marked with a ring and a tint, not by being painted over.
   Filling the cell with the accent hid exactly what the reader needs to see —
   who is already away that day. */
.cal-cell.is-selected {
    background: var(--accent-wash);
    box-shadow: inset 0 0 0 2px var(--accent);
    animation: day-pulse 1.6s ease-in-out infinite;
}
.cal-cell.is-selected .cal-day {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

@keyframes day-pulse {
    0%, 100% { box-shadow: inset 0 0 0 2px var(--accent); }
    50%      { box-shadow: inset 0 0 0 3px var(--accent-ink); }
}

@media (prefers-reduced-motion: reduce) {
    .cal-cell.is-selected { animation: none; }
}

.cal-slot {
    margin-top: auto;
    font-size: 0.6875rem;
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    border: 1px dashed var(--accent);
    color: var(--accent-ink);
    text-align: center;
}
.cal-slot.is-taken { border-style: solid; border-color: var(--line-strong); color: var(--muted); }
.tag-slot { color: var(--accent-ink); border-style: dashed; }

/* A class that sets display beats the browser's own rule for [hidden], so an
   element the script hides would stay on screen. This restores the attribute's
   meaning for every element, not only the two that need it today. */
[hidden] { display: none !important; }

.selection-bar {
    position: sticky;
    bottom: 0;
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

.dialog {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.dialog::backdrop { background: rgba(10, 16, 22, 0.45); }
.dialog h2 { margin-bottom: 0.25rem; }
.dialog-form { margin: 0 0 0.5rem; }
.dialog button[disabled] { opacity: 0.45; cursor: not-allowed; }

.check-inline { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 1rem 0.35rem 0; }

/* A day can carry one on-call slot per team; the viewer's own team is the one
   they can actually take, so it is the one that stands out. */
.cal-slot { border-color: var(--line-strong); color: var(--muted); }
.cal-slot.is-mine { border-color: var(--accent); color: var(--accent-ink); }
.cal-slot.is-mine.is-taken { border-style: solid; }

/* A day whose only rota belongs to another team is not offered at all. */
.cal-cell[data-slot="other"] .cal-slot { opacity: 0.6; }

/* ---------- weekly survey ---------- */

/* The survey asks for a moment of somebody's attention once a week, so it is
   worth making it feel like an invitation rather than a form: a warm panel,
   numbered questions that read as a short list, and stars big enough to aim at
   on a phone. */
.survey {
    background:
        linear-gradient(180deg, var(--accent-wash) 0%, transparent 70%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1.25rem;
}
.survey > h2 { margin-top: 0; }
.survey > .hint { margin-bottom: 1rem; }

/* Plain block layout on purpose: a <legend> inside a flex fieldset renders
   inconsistently across browsers, and the stacked result is the same. */
.survey-question {
    padding: 0.7rem 0.85rem 0.6rem;
    margin: 0 0 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    transition: border-color 0.15s ease;
}
.survey-question:focus-within { border-color: var(--accent); }

.survey-question legend {
    padding: 0;
    margin-bottom: 0.45rem;
    font-weight: 550;
    line-height: 1.35;
}
.survey-question legend > span { vertical-align: middle; }

.survey-number {
    width: 1.4rem; height: 1.4rem;
    margin-right: 0.45rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--accent-wash);
    color: var(--accent-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

/* The stars are radio buttons in reverse order, so :checked can colour itself
   and every sibling that follows it in the markup — which is everything to its
   left on screen. Keyboard and screen readers get the real inputs. */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.15rem; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.stars label {
    padding: 0.15rem;
    cursor: pointer;
    line-height: 0;
    color: var(--line-strong);
    transition: color 0.12s ease, transform 0.12s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.stars svg { width: 1.7rem; height: 1.7rem; fill: currentColor; display: block; }

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label { color: #f0b429; }

.stars label:hover,
.stars label:hover ~ label { transform: scale(1.08); }
.stars label:active { transform: scale(0.94); }
.stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.survey-comment {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line-strong);
}
.survey-comment textarea { min-height: 4.5rem; }

.survey-average {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--muted);
}

@media (max-width: 34rem) {
    .stars svg { width: 2rem; height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .stars label { transition: color 0.12s ease; }
    .stars label:hover, .stars label:hover ~ label, .stars label:active { transform: none; }
}

/* ---------- meters ---------- */

.meter {
    display: block;
    height: 0.5rem;
    min-width: 6rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter-good > span { background: var(--accent); }
.meter-fair > span { background: var(--warn); }
.meter-poor > span { background: var(--danger); }
.meter-cell { width: 40%; }

.comment { border-left: 3px solid var(--line-strong); padding: 0.1rem 0 0.1rem 0.75rem; margin-bottom: 0.9rem; }
.comment-meta { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.2rem; }
.comment-body { margin: 0; white-space: pre-wrap; }

/* Two parts, two colours. The old bar drew the used share in the accent on a
   near-invisible track, so at a glance you could not tell where one ended and
   the other began — which is the only thing the bar is there to show. */
.usage { display: flex; align-items: center; gap: 0.55rem; margin: 0.4rem 0 0.15rem; }

/* The track is deliberately neutral, not a pale version of the fill: the first
   attempt used the same colour family for both, so at a glance the bar looked
   like one solid line and said nothing. */
.usage-bar {
    position: relative;
    flex: 1 1 auto;
    height: 0.65rem;
    min-width: 6rem;
    border-radius: 999px;
    background: var(--usage-track);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    overflow: hidden;
}

.usage-used {
    display: block;
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: var(--usage-used);
    transition: width 0.3s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.usage-used[style*="100"] { border-radius: 999px; }

.usage-label {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--usage-used);
    font-weight: 600;
    min-width: 2.2rem;
    text-align: right;
}

/* The filled part is what has been used; the track is what is left. The fill
   colour says how much remains, not how much is spent. */
.usage-good { --usage-used: var(--accent-ink); }
.usage-fair { --usage-used: var(--warn); }
.usage-poor { --usage-used: var(--danger); }

/* ---------- date picker ---------- */

.date-text { width: 100%; }

/* The field and its popup share this box; the popup is placed from it. */
.date-wrap { position: relative; display: block; }
.date-wrap > .date-text { width: 100%; }

.date-popup {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    padding: 0.6rem;
    width: 17rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.date-popup.is-right { left: auto; right: 0; }
.date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.date-nav {
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    border-radius: 4px; width: 1.75rem; height: 1.75rem; cursor: pointer; line-height: 1;
}
.date-nav:hover { border-color: var(--accent); color: var(--accent-ink); }

.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-weekday { text-align: center; font-size: 0.7rem; color: var(--muted); padding-bottom: 0.2rem; }

.date-day {
    border: 0; background: transparent; color: var(--ink);
    padding: 0.35rem 0; border-radius: 4px; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.date-day:hover { background: var(--accent-wash); }
.date-day.is-today { outline: 1px solid var(--line-strong); }
.date-day.is-chosen { background: var(--accent); color: var(--on-accent); font-weight: 650; }

.date-clear {
    margin-top: 0.45rem; width: 100%;
    border: 1px solid var(--line); background: transparent; color: var(--muted);
    border-radius: 4px; padding: 0.3rem; cursor: pointer; font-size: 0.8rem;
}

/* The popup is positioned against the field, so the field's box is the anchor. */
.field { position: relative; }

/* ---------- a little warmth ----------
   The application was correct but flat: every surface the same, every edge the
   same weight, nothing moving. These are small, cheap touches — depth where the
   eye needs to separate things, motion only where something actually changed,
   and the brand colour used sparingly so it still means something. */

.card,
.table-wrap,
.block > .table-wrap {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -22px rgba(0, 0, 0, 0.45);
}

/* Fact tiles carry the numbers people open the app for, so they get a hairline
   of the accent on top rather than another grey box. */
/* A card that is a link (the bonus) gets exactly what the others get; it
   used to miss all of it, being an <a> and not a <div>. */
.facts > div, .facts > a {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.facts > div::before, .facts > a::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-ink));
    opacity: 0.85;
}
.facts > div:hover, .facts > a:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 14px 28px -20px rgba(0,0,0,0.5); }
.facts dd.num { font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.02em; }

.table tbody tr { transition: background 0.1s ease; }
.table tbody tr:hover { background: var(--accent-wash); }

.button { transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.button-primary:hover { box-shadow: 0 4px 12px -4px var(--accent-ink); }

.tag { transition: background 0.12s ease; }

input, select, textarea { transition: border-color 0.12s ease, box-shadow 0.12s ease; }
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.block > h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.block > h2::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

.notice { border-radius: calc(var(--radius) - 2px); }

.plain li { transition: background 0.1s ease; border-radius: 3px; }
.plain li:hover { background: var(--accent-wash); }

@media (prefers-reduced-motion: reduce) {
    .facts > div, .button, .table tbody tr { transition: none; }
    .facts > div:hover, .button:hover { transform: none; }
}

/* ---------- events ---------- */

.events { list-style: none; margin: 0; padding: 0; }

.event {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    gap: 0.25rem 1rem;
    align-items: start;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: calc(var(--radius) - 2px);
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.event:hover { transform: translateX(2px); }

/* Something happening today or already running should not need reading twice. */
.event.is-now { border-left-color: var(--accent); background: var(--accent-wash); }

.event-when { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8125rem; }
.event-when strong { font-variant-numeric: tabular-nums; }

.event-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.event-title { font-size: 1rem; }
.event-description { font-size: 0.8125rem; color: var(--ink-soft); }

.event-actions { display: flex; gap: 0.4rem; align-items: center; }

.events-past .event { opacity: 0.65; border-left-color: var(--line); }

@media (max-width: 42rem) {
    .event { grid-template-columns: 1fr; }
    .event-when { flex-direction: row; gap: 0.5rem; align-items: baseline; }
}

/* ---------- proportional fills ----------
   One class per whole percent. The application's content security policy is
   style-src 'self', so an inline style="width:28%" is discarded and the bar
   would be drawn at full width — which is exactly what happened. */
.fill-0 { width: 0%; }
.fill-1 { width: 1%; }
.fill-2 { width: 2%; }
.fill-3 { width: 3%; }
.fill-4 { width: 4%; }
.fill-5 { width: 5%; }
.fill-6 { width: 6%; }
.fill-7 { width: 7%; }
.fill-8 { width: 8%; }
.fill-9 { width: 9%; }
.fill-10 { width: 10%; }
.fill-11 { width: 11%; }
.fill-12 { width: 12%; }
.fill-13 { width: 13%; }
.fill-14 { width: 14%; }
.fill-15 { width: 15%; }
.fill-16 { width: 16%; }
.fill-17 { width: 17%; }
.fill-18 { width: 18%; }
.fill-19 { width: 19%; }
.fill-20 { width: 20%; }
.fill-21 { width: 21%; }
.fill-22 { width: 22%; }
.fill-23 { width: 23%; }
.fill-24 { width: 24%; }
.fill-25 { width: 25%; }
.fill-26 { width: 26%; }
.fill-27 { width: 27%; }
.fill-28 { width: 28%; }
.fill-29 { width: 29%; }
.fill-30 { width: 30%; }
.fill-31 { width: 31%; }
.fill-32 { width: 32%; }
.fill-33 { width: 33%; }
.fill-34 { width: 34%; }
.fill-35 { width: 35%; }
.fill-36 { width: 36%; }
.fill-37 { width: 37%; }
.fill-38 { width: 38%; }
.fill-39 { width: 39%; }
.fill-40 { width: 40%; }
.fill-41 { width: 41%; }
.fill-42 { width: 42%; }
.fill-43 { width: 43%; }
.fill-44 { width: 44%; }
.fill-45 { width: 45%; }
.fill-46 { width: 46%; }
.fill-47 { width: 47%; }
.fill-48 { width: 48%; }
.fill-49 { width: 49%; }
.fill-50 { width: 50%; }
.fill-51 { width: 51%; }
.fill-52 { width: 52%; }
.fill-53 { width: 53%; }
.fill-54 { width: 54%; }
.fill-55 { width: 55%; }
.fill-56 { width: 56%; }
.fill-57 { width: 57%; }
.fill-58 { width: 58%; }
.fill-59 { width: 59%; }
.fill-60 { width: 60%; }
.fill-61 { width: 61%; }
.fill-62 { width: 62%; }
.fill-63 { width: 63%; }
.fill-64 { width: 64%; }
.fill-65 { width: 65%; }
.fill-66 { width: 66%; }
.fill-67 { width: 67%; }
.fill-68 { width: 68%; }
.fill-69 { width: 69%; }
.fill-70 { width: 70%; }
.fill-71 { width: 71%; }
.fill-72 { width: 72%; }
.fill-73 { width: 73%; }
.fill-74 { width: 74%; }
.fill-75 { width: 75%; }
.fill-76 { width: 76%; }
.fill-77 { width: 77%; }
.fill-78 { width: 78%; }
.fill-79 { width: 79%; }
.fill-80 { width: 80%; }
.fill-81 { width: 81%; }
.fill-82 { width: 82%; }
.fill-83 { width: 83%; }
.fill-84 { width: 84%; }
.fill-85 { width: 85%; }
.fill-86 { width: 86%; }
.fill-87 { width: 87%; }
.fill-88 { width: 88%; }
.fill-89 { width: 89%; }
.fill-90 { width: 90%; }
.fill-91 { width: 91%; }
.fill-92 { width: 92%; }
.fill-93 { width: 93%; }
.fill-94 { width: 94%; }
.fill-95 { width: 95%; }
.fill-96 { width: 96%; }
.fill-97 { width: 97%; }
.fill-98 { width: 98%; }
.fill-99 { width: 99%; }
.fill-100 { width: 100%; }

.date-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.2rem 0.3rem;
    font-size: 0.8125rem;
}
.date-head { gap: 0.3rem; }

.day-details { margin-top: 1rem; }
.day-details h2 { font-variant-numeric: tabular-nums; }
.day-details .plain li { justify-content: flex-start; }

/* ---------- own pay ---------- */

.reveal-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.reveal-bar .hint { font-variant-numeric: tabular-nums; min-width: 1.5rem; }

#payroll-figures { transition: filter 0.18s ease; }
#payroll-figures.is-blurred { filter: blur(6px); user-select: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { #payroll-figures { transition: none; } }

/* ---------- work anniversary ---------- */

.anniversary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: linear-gradient(120deg, var(--accent-wash), var(--surface) 70%);
}

.anniversary-years {
    flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 1.25rem;
    font-weight: 750;
    box-shadow: 0 0 0 4px var(--accent-wash);
}

.anniversary-text { display: flex; flex-direction: column; gap: 0.1rem; }
.anniversary-text strong { font-size: 1.0625rem; }

/* ---------- notice board ---------- */

.notices { display: grid; gap: 0.75rem; }

.notice-card {
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.notice-card.is-pinned { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.notice-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.4rem; }
.notice-card h2 { margin: 0; font-size: 1.0625rem; flex: 1 1 auto; }
.notice-body { margin: 0 0 0.6rem; white-space: pre-wrap; color: var(--ink-soft); }
.notice-card footer { margin-top: 0.5rem; }

/* ---------- birthdays and anniversaries in the calendar ---------- */

.cal-occasion {
    font-size: 0.72rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-birthday    { background: #fdecf3; color: #a3245b; }
.cal-anniversary { background: var(--accent-wash); color: var(--accent-ink); }
[data-theme="dark"] .cal-birthday { background: #3a1f2c; color: #f19ac0; }

/* ---------- storage settings ---------- */

.storage-choice, .storage-group { border: 0; padding: 0; margin: 0 0 1rem; }
.storage-choice legend, .storage-group legend { font-weight: 650; margin-bottom: 0.5rem; }

.storage-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem; }
.storage-option {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.storage-option:hover { border-color: var(--line-strong); }
.storage-option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.storage-option span { display: flex; flex-direction: column; gap: 0.15rem; }

.storage-group { padding: 0.8rem; border: 1px dashed var(--line-strong); border-radius: calc(var(--radius) - 2px); }

/* ---------- work shifts ---------- */

.shift-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.shift-list li {
    display: flex; align-items: baseline; gap: 1rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface);
}
.shift-list li.is-today { background: var(--accent-wash); }
.shift-day { min-width: 8.5rem; font-size: 0.8125rem; color: var(--muted); }
.shift-day strong { color: var(--ink); margin-left: 0.25rem; }
.shift-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.0625rem; }

.shift-request { margin-top: 0.5rem; }
.shift-request > summary { list-style: none; display: inline-block; }
.shift-request > summary::-webkit-details-marker { display: none; }
.shift-request[open] > summary { margin-bottom: 0.6rem; }
.subhead { font-size: 0.9375rem; margin: 1rem 0 0.4rem; }

/* The grid: one row per person, one column per day. Every cell is a
   <details>, so adding or changing a shift happens where it is shown. */
.shift-grid th, .shift-grid td { text-align: center; vertical-align: top; }
.shift-grid tbody th { text-align: left; white-space: nowrap; font-weight: 600; }
.shift-grid thead th.is-today { background: var(--accent-wash); color: var(--accent-ink); }
.shift-grid thead th.is-weekend { background: var(--weekend); }
.shift-cell { min-width: 6.5rem; padding: 0.3rem; position: relative; }
.shift-cell.is-past { opacity: 0.6; }

.shift-cell details > summary { list-style: none; cursor: pointer; }
.shift-cell details > summary::-webkit-details-marker { display: none; }

.shift-chip {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.shift-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem;
    border-radius: 999px;
    border: 1px dashed var(--line-strong);
    color: var(--muted);
    font-size: 1.1rem;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.shift-add:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

.shift-pop {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-top: 0.35rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    background: var(--paper);
    text-align: left;
}
.shift-pop input, .shift-pop select { width: 100%; padding: 0.25rem 0.35rem; font-size: 0.8125rem; }

.weekday-picks { border: 0; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.weekday-picks legend { width: 100%; font-weight: 600; margin-bottom: 0.35rem; }
.weekday-picks label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}
.weekday-picks label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

.inline-decide { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.inline-decide input { min-width: 9rem; flex: 1 1 9rem; }

/* ---------- calendar: busy days ---------- */

/* A cell grows with its content instead of clipping it, and anything past the
   first few entries collapses into "+N", with the full list one click away in
   the day details below the calendar. */
.cal-cell { min-height: 5.5rem; height: auto; }
.cal-more { font-size: 0.7rem; color: var(--muted); padding-left: 0.2rem; }
.cal-myshift {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    align-self: flex-start;
}

/* ---------- on-call in the calendar ---------- */

.cal-oncall {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    border-left: 3px solid #6b5bd2;
    background: #efedfb;
    color: #3d2f9e;
    font-size: 0.72rem;
    line-height: 1.35;
}
.cal-oncall-icon { font-size: 0.7rem; }
.cal-oncall-name { font-weight: 650; }
.cal-oncall-team { color: #6b62a8; font-size: 0.66rem; }
.cal-oncall.is-open { background: transparent; border: 1px dashed #9b90e0; border-left-width: 3px; color: #6b62a8; }
.cal-oncall.is-open .cal-oncall-name { font-weight: 500; }
.cal-oncall.is-mine { box-shadow: inset 0 0 0 1px #6b5bd2; }

[data-theme="dark"] .cal-oncall { background: #25213d; color: #c9c2f5; }
[data-theme="dark"] .cal-oncall-team { color: #9d95d6; }
[data-theme="dark"] .cal-oncall.is-open { background: transparent; }

/* ---------- on-call: start / finish ---------- */

/* Built from the same parts as the rest of the dashboard — the card surface,
   the accent, the facts' top hairline — so it belongs to the page rather than
   sitting on it. Red only while something is actually running. */
.oncall-card {
    position: relative;
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -22px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.oncall-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, #6b5bd2, var(--accent));
}
.oncall-card.is-running::before { background: linear-gradient(90deg, #d9534f, #e8833a); }

.oncall-head {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.9rem 1.1rem 0.6rem;
}
.oncall-icon {
    width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: #efedfb; color: #5646b8;
    font-size: 1.05rem;
}
.oncall-card.is-running .oncall-icon { background: #fdecea; color: #b52b27; }
.oncall-title { display: flex; flex-direction: column; line-height: 1.25; }
.oncall-title strong { font-size: 1rem; }
.oncall-title .muted { font-size: 0.8125rem; }

.oncall-state {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--muted);
}
.oncall-state.is-live { background: #fdecea; border-color: #f3c3c0; color: #a12622; font-weight: 600; }

.oncall-body { padding: 0.2rem 1.1rem 1rem; }
.oncall-clock { margin: 0.1rem 0 0.7rem; }
.oncall-timer {
    font-size: 2rem; font-weight: 750; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.oncall-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.oncall-form input[type="text"] { flex: 1 1 14rem; }
.oncall-form .hint { flex: 1 1 14rem; margin: 0; }

.oncall-button {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 1.15rem 0.6rem 0.7rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.oncall-button-icon {
    width: 1.7rem; height: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.75rem;
}
.oncall-button:hover  { transform: translateY(-1px); filter: brightness(1.06); }
.oncall-button:active { transform: translateY(0) scale(0.98); }
.oncall-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }
.oncall-button.is-start { background: var(--accent); box-shadow: 0 6px 16px -10px var(--accent-ink); }
.oncall-button.is-stop  { background: #c9302c; box-shadow: 0 6px 16px -10px #8f1f1c; }

.oncall-pulse {
    width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #d9534f;
    animation: oncall-pulse 1.6s ease-out infinite;
}
@keyframes oncall-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.55); }
    100% { box-shadow: 0 0 0 0.5rem rgba(217, 83, 79, 0); }
}

.oncall-blocked {
    margin: 0.7rem 0 0;
    padding: 0.45rem 0.7rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--warn-wash);
    color: var(--warn);
    font-size: 0.85rem;
}

.oncall-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.oncall-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.oncall-sessions li {
    display: inline-flex; gap: 0.45rem; align-items: baseline;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 0.8rem;
}
.oncall-sessions li.is-open { border-color: #e8a19e; background: #fdecea; }
.oncall-total { font-size: 0.85rem; color: var(--muted); }
.oncall-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* own and open on-call days */
.oncall-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.25rem; }
.oncall-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.oncall-list li {
    display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface);
}
.oncall-list li.is-locked { background: var(--paper); color: var(--muted); }
.oncall-list-date { display: flex; flex-direction: column; line-height: 1.25; }
.oncall-list-date .muted { font-size: 0.75rem; }
.oncall-locked { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.tag-special { background: var(--info-wash); color: var(--info); }

.oncall-kind { border: 0; padding: 0; margin: 0 0 0.9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; }
.oncall-kind legend { font-weight: 650; margin-bottom: 0.4rem; }
.kind-option {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
}
.kind-option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.kind-option > span { display: flex; flex-direction: column; gap: 0.1rem; }
.kind-capacity { margin: 0; }

[data-theme="dark"] .oncall-icon { background: #25213d; color: #c9c2f5; }
[data-theme="dark"] .oncall-state.is-live, [data-theme="dark"] .oncall-sessions li.is-open { background: #3a2322; border-color: #6a3431; color: #f2a19d; }

@media (max-width: 40rem) {
    .oncall-state { margin-left: 0; }
    .oncall-list li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .oncall-pulse { animation: none; }
    .oncall-button { transition: none; }
}

/* monthly overview */
.oncall-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.oncall-stat {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.7rem 0.8rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--line);
    border-top: 3px solid #6b5bd2;
    background: var(--surface);
}
.oncall-stat strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.oncall-stat-name { font-weight: 650; }

.oncall-days { display: grid; gap: 0.5rem; }
.oncall-day { border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); background: var(--surface); overflow: hidden; }
.oncall-day-head { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0.8rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.oncall-person { display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0.8rem; }
.oncall-person + .oncall-person { border-top: 1px dashed var(--line); }
.oncall-person-name { font-weight: 600; }
.oncall-person-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.oncall-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.oncall-chip {
    display: inline-flex; gap: 0.35rem; align-items: baseline;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #efedfb;
    color: #3d2f9e;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.oncall-chip em { font-style: normal; font-weight: 700; }
.oncall-chip.is-open { background: #fdecea; color: #a12622; }
.oncall-chip.is-suspicious { background: #fff4d6; color: #8a5a00; outline: 1px dashed #d9a400; }

[data-theme="dark"] .oncall-chip { background: #25213d; color: #c9c2f5; }

@media (max-width: 40rem) {
    .oncall-person { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .oncall-pulse { animation: none; }
    .oncall-button { transition: none; }
}

/* ---------- day view: timeline and quality ---------- */

/* Six team colours, used for bars (fill) and dots (background). */
.tc-0 { fill: #2f7d6d; } .tc-bg-0 { background: #2f7d6d; }
.tc-1 { fill: #6b5bd2; } .tc-bg-1 { background: #6b5bd2; }
.tc-2 { fill: #d17a22; } .tc-bg-2 { background: #d17a22; }
.tc-3 { fill: #2b7bbf; } .tc-bg-3 { background: #2b7bbf; }
.tc-4 { fill: #b8457a; } .tc-bg-4 { background: #b8457a; }
.tc-5 { fill: #6f8a2a; } .tc-bg-5 { background: #6f8a2a; }
.team-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 999px; margin-right: 0.45rem; vertical-align: middle; }

.timeline-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); background: var(--surface); padding: 0.4rem 0.3rem; }
.timeline { display: block; min-width: 640px; font-family: inherit; }
.tl-grid { stroke: var(--line); stroke-width: 1; }
.tl-grid.is-major { stroke: var(--line-strong); }
.tl-peak { fill: var(--accent-wash); }
.tl-hour { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.tl-name { font-size: 12.5px; fill: var(--ink); font-weight: 600; }
.tl-strip-label { font-weight: 700; fill: var(--muted); }
.tl-bar { opacity: 0.92; }
.tl-bar:hover { opacity: 1; }
.tl-bar-text { font-size: 11.5px; fill: #fff; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-cov-text { font-size: 12px; font-weight: 700; fill: var(--ink); pointer-events: none; }

.cov-none    { fill: var(--paper); }
.cov-ok      { fill: #cfeedd; }
.cov-under   { fill: #f7c9c6; }
.cov-over    { fill: #fbe3b0; }
.cov-outside { fill: #dde3ea; }
[data-theme="dark"] .cov-ok      { fill: #1f4a38; }
[data-theme="dark"] .cov-under   { fill: #5a2724; }
[data-theme="dark"] .cov-over    { fill: #5a4719; }
[data-theme="dark"] .cov-outside { fill: #2c3640; }

.cov-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; }
.cov-chip.cov-ok { background: #cfeedd; } .cov-chip.cov-under { background: #f7c9c6; }
.cov-chip.cov-over { background: #fbe3b0; } .cov-chip.cov-outside { background: #dde3ea; }

.day-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.day-block-head h2 { margin: 0; }
.day-block-head h2::after { display: none; }

.quality { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.8rem 0.35rem 0.35rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.quality-score {
    min-width: 2.6rem; height: 2.6rem; padding: 0 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 1.1rem; font-weight: 800; color: #fff; background: var(--muted);
    font-variant-numeric: tabular-nums;
}
.quality-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.85rem; }
.q-excellent .quality-score { background: #1f8a55; }
.q-good      .quality-score { background: #4f9a3b; }
.q-weak      .quality-score { background: #d18b12; }
.q-poor      .quality-score { background: #c9302c; }

.quality-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.85rem; }
.hint-short, .hint-heavy { padding: 0.2rem 0.6rem; border-radius: 999px; }
.hint-short { background: #fdecea; color: #a12622; }
.hint-heavy { background: #fff4d6; color: #8a5a00; }

.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 1rem; }
.week-day {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.45rem 0.2rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    border-bottom-width: 4px;
    transition: transform 0.1s ease;
}
.week-day:hover { transform: translateY(-1px); }
.week-day.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.week-day-name { font-size: 0.72rem; color: var(--muted); }
.week-day-score { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.week-day-people { font-size: 0.68rem; color: var(--muted); }
.week-day.q-excellent { border-bottom-color: #1f8a55; }
.week-day.q-good      { border-bottom-color: #4f9a3b; }
.week-day.q-weak      { border-bottom-color: #d18b12; }
.week-day.q-poor      { border-bottom-color: #c9302c; }

.day-link { color: inherit; text-decoration: none; display: block; }
.day-link:hover { color: var(--accent-ink); }
.quality-explain summary { cursor: pointer; font-weight: 650; }
.quality-explain p { max-width: 62rem; }

@media (max-width: 40rem) {
    .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- calendar: on-call, compact ---------- */

/* An open day is a gap, not an event: one small line, no box. */
.cal-oncall-free {
    font-size: 0.66rem;
    line-height: 1.3;
    color: #7a70b8;
    padding-left: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-oncall-free.is-mine { color: #5646b8; font-weight: 600; }
.cal-oncall { font-size: 0.68rem; padding: 0.05rem 0.3rem; line-height: 1.3; }
.cal-oncall-team { font-size: 0.62rem; }
.cal-oncall.is-special { border-left-color: #d9a400; background: #fff6df; color: #7a5200; }
.cal-oncall.is-special .cal-oncall-team { color: #9a7a2e; }
.cal-palm { font-size: 0.7rem; margin-right: 0.1rem; }
.cal-cell[data-slot="locked"]::after {
    content: "🔒";
    position: absolute; top: 0.3rem; right: 0.35rem;
    font-size: 0.62rem; opacity: 0.55;
}
[data-theme="dark"] .cal-oncall.is-special { background: #3d321a; color: #f0c56b; }
[data-theme="dark"] .cal-oncall-free { color: #9d95d6; }

/* ---------- director signature ---------- */
.signature-row { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 1rem; align-items: start; }
.signature-preview {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 7rem; padding: 0.8rem;
    border: 1px dashed var(--line-strong); border-radius: calc(var(--radius) - 2px);
    /* a checkerboard, so a transparent PNG is visibly transparent */
    background: repeating-conic-gradient(var(--paper) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px;
}
.signature-preview img { max-width: 100%; max-height: 6rem; }
.signature-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
@media (max-width: 40rem) { .signature-row { grid-template-columns: 1fr; } }

/* ---------- on-call bonus ---------- */

/* The bonus card is a fact like the others, and a link to its details. */
.facts > a.fact-link { display: block; background: var(--surface); padding: 0.85rem 1rem; color: inherit; text-decoration: none; }
.facts > a.fact-link dt { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.15rem; }
.facts > a.fact-link dd { margin: 0; font-weight: 550; }
.facts > a.fact-link:hover dd { color: var(--accent-ink); }
.facts > a.fact-link .hint { margin: 0.35rem 0 0; }

.bonus-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.bonus-total { display: flex; flex-direction: column; }
.bonus-total strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.button-pay { font-weight: 800; letter-spacing: 0.06em; }
.table td.money, .table th.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; white-space: nowrap; }
.bonus-status.s-earned     { background: var(--accent-wash); color: var(--accent-ink); }
.bonus-status.s-paid       { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.bonus-status.s-not_earned { background: var(--paper); color: var(--muted); }
.bonus-status.s-blocked    { background: var(--warn-wash); color: var(--warn); }
.bonus-calc { font-size: 0.78rem; color: var(--muted); }
.bonus-fix { margin-top: 0.3rem; }
.bonus-fix form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.35rem; }
.bonus-fix input[name="amount"] { width: 8rem; }
.bonus-fix input[name="reason"] { flex: 1 1 12rem; }
.bonus-rule { border: 1px dashed var(--line-strong); border-radius: calc(var(--radius) - 2px); padding: 0.7rem 0.8rem; margin: 0 0 0.9rem; }
.bonus-rule legend { font-weight: 650; padding: 0 0.3rem; }
.bonus-rule .kind-option { margin-bottom: 0.4rem; }

/* ---------- clock and weather above the profile ---------- */
.sidebar-now {
    margin-top: auto;
    padding: 0.75rem 0.75rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.sidebar-now + .sidebar-foot { margin-top: 0; }
.now-clock { display: flex; flex-direction: column; line-height: 1.15; }
.now-time { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.now-date { font-size: 0.75rem; color: var(--muted); }
.now-weather {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--paper);
    border: 1px solid var(--line);
}
.now-weather[hidden] { display: none !important; }
.now-icon { font-size: 1.35rem; line-height: 1; }
.now-temp { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.now-desc { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.75rem; }
.now-city { color: var(--muted); font-size: 0.7rem; }

/* ---------- administrator assign ---------- */
.button-super {
    background: linear-gradient(180deg, #3b2f7d, #2a2160);
    color: #fff; border-color: #2a2160;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.button-super:hover { filter: brightness(1.12); }
.super-icon { color: #ffd34d; }
.dialog-wide { width: min(40rem, calc(100vw - 2rem)); }
.assign-actions { border: 0; padding: 0; margin: 0 0 0.8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; }
.assign-actions legend { font-weight: 650; margin-bottom: 0.4rem; }
.assign-part[hidden] { display: none !important; }
#assign-gap-warning { color: var(--warn); }
dialog::backdrop { cursor: pointer; }

.money-fact { white-space: nowrap; }
.money-cur { font-size: 0.55em; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }

/* ---------- several shifts at once ---------- */
.shift-cell.is-picked { background: var(--accent-wash); box-shadow: inset 0 0 0 2px var(--accent); }
.shift-cell.is-picked .shift-add { background: var(--accent); color: var(--on-accent); border-style: solid; border-color: var(--accent); }
.shift-cell.is-picked .shift-add::before { content: "✓"; }
.shift-cell.is-picked .shift-add { font-size: 0; }
.shift-cell.is-picked .shift-add::before { font-size: 0.95rem; }

.shift-bulk {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, 0.45);
}
.shift-bulk[hidden] { display: none !important; }
.shift-bulk-what { display: flex; flex-direction: column; min-width: 12rem; }
.shift-bulk-what .muted { font-size: 0.8rem; }
.shift-bulk-set { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.shift-bulk-set label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.shift-bulk-set input.time-24h { width: 5.5rem; }

/* ---------- bonus card: dots until asked ---------- */
/* Only looks: the covering itself is done by leaving the amount out of the
   page text, so an old stylesheet cannot expose it. */
.money-dots { letter-spacing: 0.14em; color: var(--ink-soft); }
.money-eye { font-size: 0.8em; margin-left: 0.15rem; opacity: 0.75; transition: opacity 0.12s ease; }
.bonus-card:hover .money-eye { opacity: 1; }
.bonus-card.is-showing dd { color: var(--accent-ink); }

.bonus-on-salary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin: 0; }
.bonus-on-salary strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* ---------- notifications ---------- */
.notif-summary { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.notif-new-pill {
    padding: 0.15rem 0.65rem; border-radius: 999px;
    background: var(--accent); color: var(--on-accent);
    font-size: 0.8rem; font-weight: 700;
}
.notif-day { margin-bottom: 1.1rem; }
.notif-day-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); margin: 0 0 0.45rem;
}
.notif-day-title::after { display: none; }
.notif-list {
    list-style: none; margin: 0; padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -24px rgba(0, 0, 0, 0.45);
}
.notif {
    position: relative;
    display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    transition: background 0.12s ease;
}
.notif + .notif { border-top: 1px solid var(--line); }
.notif:hover { background: var(--paper); }
.notif.is-new { background: var(--accent-wash); }
.notif.is-new::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.notif-icon {
    width: 2.2rem; height: 2.2rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
    background: var(--paper); color: var(--muted);
}
.tone-ok     .notif-icon { background: var(--accent-wash); color: var(--accent-ink); }
.tone-bad    .notif-icon { background: var(--danger-wash); color: var(--danger); }
.tone-warn   .notif-icon { background: var(--warn-wash); color: var(--warn); }
.tone-info   .notif-icon { background: var(--info-wash); color: var(--info); }
.tone-oncall .notif-icon { background: #efedfb; color: #5646b8; }
.tone-shift  .notif-icon { background: #e6f0fb; color: #2b6cb0; }
.tone-fun    .notif-icon { background: #fdecf3; color: #a3245b; }
.notif-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-text { color: var(--ink); text-decoration: none; line-height: 1.4; }
a.notif-text:hover { color: var(--accent-ink); }
/* The whole row is the link's target area. */
a.notif-text::after { content: ""; position: absolute; inset: 0; }
.notif-meta { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.notif-new {
    padding: 0 0.45rem; border-radius: 999px;
    background: var(--accent); color: var(--on-accent);
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.notif-go { color: var(--line-strong); font-size: 1.3rem; }
.notif:hover .notif-go { color: var(--accent); }
.notif-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.notif-empty-icon { font-size: 2rem; display: block; margin-bottom: 0.4rem; opacity: 0.6; }
[data-theme="dark"] .tone-ok .notif-icon { background: #1f3b2c; color: #7fd6a3; }
[data-theme="dark"] .tone-bad .notif-icon { background: #3b2322; color: #f2a19d; }
[data-theme="dark"] .tone-warn .notif-icon { background: #3d321a; color: #f0c56b; }
[data-theme="dark"] .tone-oncall .notif-icon { background: #25213d; color: #c9c2f5; }
[data-theme="dark"] .tone-shift .notif-icon { background: #1d2c3d; color: #8fbcea; }
[data-theme="dark"] .tone-fun .notif-icon { background: #3a1f2c; color: #f19ac0; }

/* ---------- devices ---------- */
.device-status { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.device-status.s-active   { background: var(--accent-wash); color: var(--accent-ink); }
.device-status.s-spare    { background: var(--warn-wash); color: var(--warn); }
.device-status.s-inactive { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.device-table tbody tr.row-link { position: relative; cursor: pointer; }
.device-table tbody tr.row-link:hover { background: var(--paper); }
.device-table .row-link-target { color: var(--ink); text-decoration: none; }
.device-table .row-link-target::after { content: ""; position: absolute; inset: 0; }
.device-table tbody td:first-child { min-width: 13rem; }
.device-table tfoot td { font-weight: 600; border-top: 2px solid var(--line-strong); }
.value-bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 0.3rem; overflow: hidden; min-width: 5rem; margin-left: auto; }
.value-bar span { display: block; height: 100%; background: var(--accent); }
.value-bar .w0 { width: 0%; }
.value-bar .w5 { width: 5%; }
.value-bar .w10 { width: 10%; }
.value-bar .w15 { width: 15%; }
.value-bar .w20 { width: 20%; }
.value-bar .w25 { width: 25%; }
.value-bar .w30 { width: 30%; }
.value-bar .w35 { width: 35%; }
.value-bar .w40 { width: 40%; }
.value-bar .w45 { width: 45%; }
.value-bar .w50 { width: 50%; }
.value-bar .w55 { width: 55%; }
.value-bar .w60 { width: 60%; }
.value-bar .w65 { width: 65%; }
.value-bar .w70 { width: 70%; }
.value-bar .w75 { width: 75%; }
.value-bar .w80 { width: 80%; }
.value-bar .w85 { width: 85%; }
.value-bar .w90 { width: 90%; }
.value-bar .w95 { width: 95%; }
.value-bar .w100 { width: 100%; }
.device-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.details { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.45rem 1rem; margin: 0; }
.details dt { color: var(--muted); font-size: 0.85rem; }
.details dd { margin: 0; }
.prewrap { white-space: pre-wrap; }
.secret { font-family: var(--font-mono, monospace); letter-spacing: 0.08em; margin-right: 0.5rem; }
.file-list { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.file-list li form { margin-left: auto; }
.upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.upload-row input[type="text"] { flex: 1 1 14rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.8rem; margin: 0.4rem 0; }
.photo-grid figure { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); padding: 0.4rem; }
.photo-grid img { display: block; width: 100%; height: 8.5rem; object-fit: cover; border-radius: 4px; }
.photo-grid figcaption { font-size: 0.78rem; margin: 0.35rem 0 0.2rem; }
.photo-file { display: flex; align-items: center; justify-content: center; height: 8.5rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
.my-devices { display: grid; gap: 1rem; }
.my-device header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.my-device header h2 { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.page-actions .spacer { flex: 1; }
.form-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem 0.4rem; margin: 0 0 1rem; background: var(--surface); }
.form-section legend { font-weight: 650; padding: 0 0.35rem; }
.oncall-table tr.is-open td { background: var(--paper); }
.oncall-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: flex-start; }
.oncall-edit[open] .shift-pop { position: static; margin-top: 0.4rem; }
/* With the bonus part the form is too wide for the last column, so on wider
   screens it opens as a panel over the row instead of stretching the table.
   On a phone the rows are cards and the form simply sits in the card. */
@media (min-width: 40.01rem) {
    .oncall-edit:has(.bonus-edit) { position: relative; }
    .oncall-edit[open] .shift-pop:has(.bonus-edit) {
        position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 30;
        width: min(21rem, 80vw); margin: 0;
        padding: 0.65rem 0.7rem;
        background: var(--surface);
        box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
    }
    .table-wrap:has(.oncall-edit[open] .bonus-edit) { overflow: visible; }
}
/* Bonus of a day already opened — administrators only. */
.bonus-edit { display: grid; gap: 0.35rem; margin-top: 0.2rem; padding-top: 0.45rem; border-top: 1px dashed var(--line-strong); }
.bonus-edit-title { font-weight: 650; font-size: 0.8125rem; }
.bonus-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bonus-chip { position: relative; display: inline-flex; }
.shift-pop .bonus-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bonus-chip span {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.78rem;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.bonus-chip:hover span { border-color: var(--line-strong); }
.bonus-chip input:checked + span { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.bonus-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.bonus-edit-flat, .bonus-edit-fixed { display: none; gap: 0.3rem 0.45rem; align-items: end; font-size: 0.8125rem; }
.bonus-edit:has(input[value="flat"]:checked) .bonus-edit-flat { display: grid; }
.bonus-edit:has(input[value="fixed"]:checked) .bonus-edit-fixed { display: grid; grid-template-columns: 1fr 1fr; }
.bonus-edit-fixed .span-2 { grid-column: 1 / -1; }
@supports not selector(:has(*)) { .bonus-edit-flat, .bonus-edit-fixed { display: grid; } }
.bonus-edit .hint { margin: 0; font-size: 0.75rem; }
.bonus-edit-shared { color: var(--warn); }
.bonus-edit-locked { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.3rem; align-items: center; }

/* ---------- profile, address requests, benefits ---------- */
.profile-block .facts { margin-bottom: 0.4rem; }
.address-current { font-size: 1.02rem; margin: 0 0 0.7rem; }
.request-state { border-radius: calc(var(--radius) - 2px); padding: 0.7rem 0.9rem; margin: 0 0 0.8rem; border: 1px solid var(--line); }
.request-state p { margin: 0 0 0.35rem; }
.request-state.is-pending  { background: #fff7e6; border-color: #f0d28c; }
.request-state.is-rejected { background: var(--paper); }
[data-theme="dark"] .request-state.is-pending { background: #3a3120; border-color: #6d5a2a; }
.address-change > summary { list-style: none; display: inline-flex; cursor: pointer; }
.address-change > summary::-webkit-details-marker { display: none; }
.address-change[open] > summary { margin-bottom: 0.7rem; }
.request-cards { display: grid; gap: 0.8rem; }
.request-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; background: var(--surface); }
.request-card header { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.request-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; }
.reject-form { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 18rem; }
.reject-form input { flex: 1 1 12rem; }
.nav-badge { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--danger, #c0392b); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.3rem; margin-left: 0.3rem; }
.benefit-form .benefit-kind { border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); padding: 0.6rem 0.9rem 0.7rem; margin: 0 0 0.8rem; }
.benefit-form legend { font-weight: 650; padding: 0 0.3rem; }
.benefit-visible { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; color: var(--muted); }
.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.benefit-list li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); background: var(--surface); }
.benefit-list p { margin: 0.25rem 0 0; }
.benefit-icon { font-size: 1.4rem; line-height: 1; }

/* ---------- audit: changes and accesses ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
tr.is-refused td { background: #fff5f5; }
[data-theme="dark"] tr.is-refused td { background: #3a2626; }
.button-day-view { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.button-day-view:hover { background: var(--accent); color: #fff; }
.day-view-icon { margin-right: 0.25rem; }
.notif-more { margin-top: 0.8rem; }
.notif-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
.notif-more > summary::-webkit-details-marker { display: none; }
.notif-more[open] > summary { margin-bottom: 0.6rem; }
.shift-cell { position: relative; }
.shift-pick { position: absolute; top: 1px; right: 2px; border: 0; background: none; color: var(--muted); font-size: 0.85rem; line-height: 1; padding: 2px; cursor: pointer; opacity: 0.55; }
.shift-pick:hover, .shift-pick:focus-visible { opacity: 1; color: var(--accent); }
.shift-cell.is-picked .shift-pick { opacity: 1; color: var(--accent); }
.lock-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.lock-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); background: var(--paper); }
.lock-list li form { margin-left: auto; }
.lock-list.is-past li { background: none; border-style: dashed; }
.lock-scope { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lock-history { margin-top: 0.7rem; }
.lock-history > summary { list-style: none; display: inline-flex; cursor: pointer; }
.lock-history > summary::-webkit-details-marker { display: none; }
.notify-prefs .form-section { margin-bottom: 0.8rem; }
.notify-prefs .check { display: flex; align-items: center; gap: 0.45rem; margin: 0.2rem 0; }
.team-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.2rem 1rem; }
.who-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.who-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px); background: var(--surface); }
.who-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 6.5rem; }
.who-list .who-name { flex: 1 1 10rem; }   /* scoped: the sidebar's .who-name is a different thing */
.who-remote { margin-left: 0.25rem; }
.who-list.is-away li { background: var(--paper); }
.shift-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.remote-only { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; margin: 0.7rem 0 0; }

/* The date and the day's weather share one row at the top of the cell.
   (.cal-head is already taken by the weekday header row above the grid.) */
.cal-daybar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.25rem;
    min-height: 1.7rem;
}
.cal-weather {
    display: inline-flex; align-items: center; gap: 0.15rem;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
.cal-sky { font-size: 0.85rem; }

/* On a narrow phone the cell is about forty pixels wide inside: the date and
   the icon both shrink so they sit side by side, and the temperature goes —
   the icon alone still says whether to expect rain. */
@media (max-width: 30rem) {
    .cal-temp { display: none; }
    .cal-cell { padding: 0.3rem 0.2rem 0.3rem; }
    .cal-daybar { gap: 0.05rem; min-height: 1.2rem; }
    .cal-day  { min-width: 1.1rem; height: 1.2rem; padding: 0 0.1rem; font-size: 0.78rem; }
    .cal-sky  { font-size: 0.62rem; }
}
.day-details-links { margin: 0.8rem 0 0; }
.cal-company { background: var(--info-wash); color: var(--info); border: 1px solid transparent; }

/* ---------- important notices ---------- */

/* On the home page: a card that reads like a notice pinned to a door, not a
   coloured wash with a headline. The urgency is in the edge and the small
   badge; the words stay in plain ink so they can actually be read. */
.alert-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem 0.9rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -20px rgba(0, 0, 0, 0.4);
}
.alert-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--danger);
}
.alert-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 999px;
    background: currentColor;
    animation: alert-pulse 1.6s ease-in-out infinite;
}
@keyframes alert-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.2;  transform: scale(0.7); }
}
.alert-text { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.alert-meta { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* The publisher's own list. */
.alert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.alert-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; background: var(--surface); }
.alert-list li.is-live { border-left: 4px solid var(--danger); }
.alert-list li.is-over { background: var(--paper); }
.alert-body { margin: 0 0 0.4rem; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.alert-actions .republish { display: flex; gap: 0.35rem; align-items: center; }

/* Motion is a choice: whoever asked the system for less gets a steady dot. */
@media (prefers-reduced-motion: reduce) {
    .alert-dot { animation: none; }
}

/* The confirmation dialog: a question, and two clear ways out. */
.confirm-dialog { max-width: 26rem; }
.confirm-dialog p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.5; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

/* ---------- the wellbeing check ---------- */

/* A small button in the corner, quiet until the question is due. It sits above
   the page but below any dialog, and it never covers the content it floats
   over — it is one button wide. */
.wb-float {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 40;
    width: 2.6rem; height: 2.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 24px -16px rgba(0,0,0,0.5);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.wb-float:hover, .wb-float:focus-visible { opacity: 1; transform: translateY(-1px); }
.wb-float.is-due {
    opacity: 1;
    color: var(--accent-ink, var(--accent));
    border-color: var(--accent);
    animation: wb-breathe 3.2s ease-in-out infinite;
}
@keyframes wb-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44, 107, 100, 0.35); }
    50%      { box-shadow: 0 0 0 0.5rem rgba(44, 107, 100, 0); }
}

.wb-dialog { max-width: 27rem; }
.wb-close-row { display: flex; justify-content: flex-end; margin: -0.3rem -0.3rem 0 0; }
.wb-dialog h2 { margin-top: 0; }
.wb-scale { border: 0; padding: 0; margin: 0 0 1rem; }
.wb-scale legend { font-weight: 650; padding: 0; margin-bottom: 0.35rem; }
.wb-buttons { display: flex; gap: 0.4rem; }
.wb-score {
    flex: 1 1 auto;
    padding: 0.55rem 0;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface);
    font-size: 1rem; font-weight: 600;
    cursor: pointer;
}
.wb-score:hover { border-color: var(--accent); }
.wb-score.is-picked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.wb-ends { display: flex; justify-content: space-between; margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--muted); }

.wb-days { display: flex; align-items: flex-end; gap: 0.35rem; height: 4.5rem; margin: 0.9rem 0 0.2rem; }
.wb-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.wb-day small { font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; }
.wb-bar { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.wb-day.is-empty .wb-bar { background: var(--line); }
.wb-bar.h0 { height: 6%; }
.wb-bar.h1 { height: 6%; }
.wb-bar.h2 { height: 6%; }
.wb-bar.h3 { height: 6%; }
.wb-bar.h4 { height: 8%; }
.wb-bar.h5 { height: 10%; }
.wb-bar.h6 { height: 12%; }
.wb-bar.h7 { height: 14%; }
.wb-bar.h8 { height: 16%; }
.wb-bar.h9 { height: 18%; }
.wb-bar.h10 { height: 20%; }
.wb-bar.h11 { height: 22%; }
.wb-bar.h12 { height: 24%; }
.wb-bar.h13 { height: 26%; }
.wb-bar.h14 { height: 28%; }
.wb-bar.h15 { height: 30%; }
.wb-bar.h16 { height: 32%; }
.wb-bar.h17 { height: 34%; }
.wb-bar.h18 { height: 36%; }
.wb-bar.h19 { height: 38%; }
.wb-bar.h20 { height: 40%; }
.wb-bar.h21 { height: 42%; }
.wb-bar.h22 { height: 44%; }
.wb-bar.h23 { height: 46%; }
.wb-bar.h24 { height: 48%; }
.wb-bar.h25 { height: 50%; }
.wb-bar.h26 { height: 52%; }
.wb-bar.h27 { height: 54%; }
.wb-bar.h28 { height: 56%; }
.wb-bar.h29 { height: 58%; }
.wb-bar.h30 { height: 60%; }
.wb-bar.h31 { height: 62%; }
.wb-bar.h32 { height: 64%; }
.wb-bar.h33 { height: 66%; }
.wb-bar.h34 { height: 68%; }
.wb-bar.h35 { height: 70%; }
.wb-bar.h36 { height: 72%; }
.wb-bar.h37 { height: 74%; }
.wb-bar.h38 { height: 76%; }
.wb-bar.h39 { height: 78%; }
.wb-bar.h40 { height: 80%; }
.wb-bar.h41 { height: 82%; }
.wb-bar.h42 { height: 84%; }
.wb-bar.h43 { height: 86%; }
.wb-bar.h44 { height: 88%; }
.wb-bar.h45 { height: 90%; }
.wb-bar.h46 { height: 92%; }
.wb-bar.h47 { height: 94%; }
.wb-bar.h48 { height: 96%; }
.wb-bar.h49 { height: 98%; }
.wb-bar.h50 { height: 100%; }
.wb-footer { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .wb-float, .wb-float.is-due { animation: none; transition: none; }
}

/* The wellbeing wordmark: the app's own face, small and friendly. */
.wb-brand { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; }
.wb-mark-ring  { fill: none; stroke: var(--accent); stroke-width: 2.4; opacity: 0.35; }
.wb-mark-smile { fill: var(--accent); }
.wb-mark-eye   { fill: var(--accent); }
.wb-brand-text { font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ink); }
.wb-brand-text strong { font-weight: 750; }
.wb-brand-by { color: var(--muted); font-size: 0.8rem; }
.wb-brand-plus { color: var(--accent); font-weight: 750; }
.wb-nudge { margin: -0.4rem 0 0.8rem; font-size: 0.88rem; color: var(--muted); font-style: italic; }

/* ---------- Moja kancelarija: nabavke ---------- */
.supply-category h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.supply-meta { margin-top: -0.3rem; }
.supply-list { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; display: grid; gap: 0.5rem; }
.supply-list li {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; justify-content: space-between;
    border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px);
    padding: 0.6rem 0.8rem; background: var(--surface);
}
.supply-list li.is-on_hold { background: var(--paper); }
.supply-list li.is-done { background: var(--accent-wash); }
.supply-main { flex: 1 1 18rem; }
.supply-name { margin: 0 0 0.15rem; }
.supply-by { font-size: 0.78rem; margin: 0.25rem 0 0; }
.supply-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.supply-add { margin-top: 0.3rem; }
.supply-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.supply-add > summary::-webkit-details-marker { display: none; }
.supply-add[open] > summary { margin-bottom: 0.6rem; }
.supply-form { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.supply-questions { border-left: 4px solid var(--accent); }
.supply-question + .supply-question { border-top: 1px solid var(--line); margin-top: 0.7rem; padding-top: 0.7rem; }
.supply-question p { margin: 0 0 0.25rem; }
.supply-answer { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* The line at the foot of every page: present, never loud. */
.app-footer {
    margin: 2rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    opacity: 0.75;
    text-align: center;
}

/* ---------- one set of meanings for every status ----------
   Five meanings, the same in every module, so a colour learnt once is read
   everywhere: success (accent), warning, danger, information, neutral. A
   request waiting for approval, a purchase waiting for the next order and a
   device in reserve are all "waiting" — and all the same yellow. */
.tag-danger, .tag-rejected { color: var(--danger); background: var(--danger-wash); }
.tag-info                  { color: var(--info);   background: var(--info-wash); }
.tag-warn                  { color: var(--warn);   background: var(--warn-wash); }
.tag-neutral               { color: var(--muted);  background: var(--paper); border: 1px solid var(--line); }

/* ---------- icons ----------
   Strokes in the colour of the surrounding text, one size with the text, and
   sitting on its baseline — so an icon in a button, a tag or a heading lines
   up without per-place tweaking. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
    width: 1.1em; height: 1.1em;
    flex: none;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-lg { width: 1.4em; height: 1.4em; }
.icon + span, span + .icon { margin-left: 0.3em; }

/* ---------- toasts ---------- */
.toasts {
    position: fixed;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    z-index: 60;
    display: grid; gap: 0.5rem;
    width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--surface);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
    font-size: 0.92rem;
    pointer-events: auto;
    animation: toast-in 0.2s ease-out;
}
.toast.is-bad { background: var(--danger); color: #fff; }
.toast span { flex: 1 1 auto; }
.toast-close { border: 0; background: none; color: inherit; opacity: 0.75; cursor: pointer; padding: 0.2rem; line-height: 0; }
.toast-close:hover { opacity: 1; }
.toast.is-leaving { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* ---------- fingers, not cursors ----------
   On a touch screen a button must be big enough to hit with a thumb: about
   44 px. The desktop keeps its compact buttons. */
@media (pointer: coarse) {
    .button { min-height: 2.75rem; }
    .button-small { min-height: 2.5rem; padding-left: 0.85rem; padding-right: 0.85rem; }
    .nav-list a { min-height: 2.75rem; display: flex; align-items: center; }
    .check input[type="checkbox"], .check input[type="radio"],
    .field-check input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
    .wb-score { min-height: 2.75rem; }
    .toast-close { padding: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .toast, .toast.is-leaving { animation: none; transition: none; }
}

/* ---------- "Za tebe": what waits for this person ---------- */
.todo {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.7rem 0.9rem;
    margin: 0 0 1.2rem;
}
.todo-title { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.todo-list a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.4rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--ink); text-decoration: none; font-weight: 550;
}
.todo-list a:hover, .todo-list a:focus-visible { background: var(--accent-wash); }
.todo-list .icon { color: var(--accent); }
.todo-list span:first-of-type { flex: 1 1 auto; }
.todo-go { color: var(--muted); }
.todo-done { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1.2rem; color: var(--muted); font-size: 0.9rem; }
.todo-done .icon { color: var(--accent); }

/* ---------- the "⋯" row menu ---------- */
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-list {
    position: absolute; right: 0; top: calc(100% + 0.3rem);
    z-index: 30;
    min-width: 12rem;
    padding: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
}
.row-menu-list form { margin: 0; }
.row-menu-list button {
    display: block; width: 100%;
    padding: 0.5rem 0.7rem;
    border: 0; border-radius: calc(var(--radius) - 3px);
    background: none; color: var(--ink); text-align: left;
    font: inherit; font-size: 0.9rem; cursor: pointer;
}
.row-menu-list button:hover, .row-menu-list button:focus-visible { background: var(--paper); }
@media (pointer: coarse) { .row-menu-list button { padding: 0.75rem 0.8rem; } }

/* An empty state that offers the next step instead of ending the road. */
.empty-action { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.empty-action p { margin: 0; }

/* ---------- the phone's bottom bar ---------- */
.bottom-nav { display: none; }

@media (max-width: 60rem) {
    .bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 45;
        display: flex;
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.35);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .bottom-nav a {
        flex: 1 1 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
        min-height: 3.6rem;
        color: var(--muted);
        text-decoration: none;
        font-size: 0.7rem; font-weight: 600;
    }
    .bottom-nav a[aria-current="page"] { color: var(--accent-ink); }
    .bottom-nav a[aria-current="page"] .bottom-nav-icon { background: var(--accent-wash); }
    .bottom-nav-icon { position: relative; display: inline-flex; padding: 0.2rem 0.9rem; border-radius: 999px; }
    .bottom-nav-icon .icon { width: 1.35rem; height: 1.35rem; }
    .bottom-nav-badge {
        position: absolute; top: -0.2rem; right: 0.3rem;
        min-width: 1.1rem; padding: 0 0.3rem;
        border-radius: 999px;
        background: var(--danger); color: #fff;
        font-size: 0.65rem; line-height: 1.1rem; text-align: center;
    }

    /* Everything that floats sits above the bar, not behind it. */
    .main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0)); }
    .wb-float { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0)); }
    .toasts { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0)); }
    .actions-sticky { bottom: calc(3.6rem + env(safe-area-inset-bottom, 0)); }
}

/* ---------- tables as cards on a narrow screen ---------- */
@media (max-width: 40rem) {
    .table.is-stackable, .table.is-stackable tbody, .table.is-stackable tfoot,
    .table.is-stackable tr, .table.is-stackable td { display: block; width: 100%; }
    .table.is-stackable thead { display: none; }
    .table.is-stackable tr {
        margin: 0 0 0.6rem;
        padding: 0.5rem 0.8rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }
    .table.is-stackable td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
        padding: 0.3rem 0;
        border: 0;
        text-align: right;
    }
    .table.is-stackable td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--muted);
        font-size: 0.78rem;
        text-align: left;
    }
    .table.is-stackable td:not([data-label])::before { content: none; }
    .table.is-stackable td:not([data-label]) { justify-content: flex-start; }
    /* The first value is the card's title. */
    .table.is-stackable td:first-child { font-weight: 600; text-align: left; justify-content: flex-start; border-bottom: 1px solid var(--line); margin-bottom: 0.2rem; padding-bottom: 0.45rem; }
    .table.is-stackable td:first-child::before { content: none; }
    .table.is-stackable td.money, .table.is-stackable td.num { font-variant-numeric: tabular-nums; }
    /* Only a wrapper whose table became cards lets go of its frame; the shift
       planner stays a grid and must keep scrolling inside its own box. */
    .table-wrap.is-stacked { overflow: visible; border: 0; box-shadow: none; background: none; }
}

/* ---------- the sticky save bar ---------- */
.actions-sticky {
    position: sticky; bottom: 0;
    z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 18px -16px rgba(0, 0, 0, 0.3);
}
.unsaved-note { order: -1; flex: 1 1 100%; font-size: 0.8rem; color: var(--warn); }
form.is-dirty .actions-sticky .button-primary { box-shadow: 0 0 0 3px var(--warn-wash); }
@media (min-width: 40rem) {
    .unsaved-note { flex: 0 1 auto; order: 0; margin-right: auto; }
}

/* The wellbeing button floats in the bottom corner; a bar of buttons that
   sticks to the bottom leaves it room, so it never covers "Odustani". */
.actions-sticky { padding-right: 3.8rem; }

/* Phone numbers: the same font and size as the rest of the row, with digits
   of equal width so the column lines up — not a smaller monospace that made
   the numbers look like a different size from everything beside them. */
.cell-phone { font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.01em; }

/* ---------- month navigation on a phone ----------
   Three things never fit on one line at 390 px, and letting them wrap left
   the two buttons stacked on the left, the title stranded on the right and
   the pill-shaped frame stretched into an oval. On a narrow screen the title
   takes the first row, centred, and the two buttons share the second, one on
   each side — the order a thumb expects: back on the left, forward on the right. */
@media (max-width: 40rem) {
    .month-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "prev  next";
        gap: 0.5rem;
        padding: 0.6rem;
        border-radius: var(--radius);
    }
    .month-nav > strong           { grid-area: title; text-align: center; }
    .month-nav > a:first-child    { grid-area: prev; text-align: center; justify-content: center; }
    .month-nav > a:last-child     { grid-area: next; text-align: center; justify-content: center; }
    .month-nav .button            { border-radius: var(--radius); padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Something above the navigation (a button, a form) should not touch it. */
* + .month-nav { margin-top: 1rem; }

/* ---------- cards: labels in the ordinary font, empty fields hidden ---------- */
@media (max-width: 40rem) {
    .table.is-stackable td::before { font-family: var(--font); letter-spacing: normal; }
    .table.is-stackable td[data-empty] { display: none; }
}

/* On a touch screen the buttons were made taller; the text must sit in the
   middle of that height, not at the top of it. */
@media (pointer: coarse) {
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; }
    .button-block { display: flex; width: 100%; }
}

/* ---------- the logo ----------
   Drawn inline: the letters take the text colour, the person-plus the accent,
   so the same drawing works in the light and the dark theme. */
.brand-logo { display: block; width: 100%; max-width: 100%; height: auto; }
.brand-logo-letters { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.brand-logo-mark { fill: var(--accent); }

/* ---------- icons in the menu ----------
   One icon before every item, the same size, quieter than the words: it helps
   the eye find "Kalendar" without shouting. The current page's icon takes the
   accent, as its text does. A count, when there is one, sits at the far end. */
.nav-list a { display: flex; align-items: center; gap: 0.65rem; }
.nav-list a .icon { width: 1.15rem; height: 1.15rem; color: var(--muted); stroke-width: 1.8; flex: none; }
.nav-list a span:first-of-type { flex: 1 1 auto; min-width: 0; }
.nav-list a:hover .icon { color: var(--ink); }
.nav-list a[aria-current="page"] .icon { color: var(--accent); }
.nav-list a .badge { margin-left: auto; }

/* ---------- the tick box on a shift ----------
   It was a faint "▫" the size of a letter, and nobody could tell it was
   something to click. Now it is a box that looks like one: an outline when
   empty, filled with a tick when chosen — bigger again on a touch screen. The
   shift's time keeps clear of it. */
.shift-cell.has-shift { padding-right: 1.75rem; }
.shift-pick {
    position: absolute; top: 4px; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; padding: 0;
    border: 1.5px solid var(--line-strong); border-radius: 5px;
    background: var(--surface); color: var(--on-accent);
    opacity: 1; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.shift-pick .icon { width: 0.85rem; height: 0.85rem; stroke-width: 3.2; opacity: 0; }
.shift-pick:hover, .shift-pick:focus-visible { border-color: var(--accent); background: var(--accent-wash); }
.shift-cell.is-picked .shift-pick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.shift-cell.is-picked .shift-pick .icon { opacity: 1; }
@media (pointer: coarse) {
    .shift-cell.has-shift { padding-right: 2.2rem; }
    .shift-pick { width: 1.6rem; height: 1.6rem; }
    .shift-pick .icon { width: 1.05rem; height: 1.05rem; }
}

/* A card cell with fields in it: the name on its own line, the fields below,
   wrapping as needed — never wider than the card. */
@media (max-width: 40rem) {
    .table.is-stackable td[data-controls] { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem; text-align: left; }
    .table.is-stackable td[data-controls]::before { flex: 1 1 100%; }
    .table.is-stackable td[data-controls] input,
    .table.is-stackable td[data-controls] select { max-width: 100%; min-width: 0; }
}

/* ---------- the foot of the sidebar ----------
   Name and role together, the way out beside them as one icon. */
.who-row { display: flex; align-items: center; gap: 0.5rem; }
.who-row .who { flex: 1 1 auto; min-width: 0; }
.who-row .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin: 0; }
.logout-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--muted); cursor: pointer;
}
.logout-button .icon { width: 1.35rem; height: 1.35rem; }
.logout-button:hover, .logout-button:focus-visible { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }

/* ---------- the page title carries its menu icon ---------- */
.main-head h1 { display: flex; align-items: center; gap: 0.45em; }
.title-icon { width: 0.85em; height: 0.85em; color: var(--accent); stroke-width: 2; flex: none; }

/* ---------- tables: headings stay on one line ---------- */
.table th { white-space: nowrap; }

/* ---------- a row's fields behind one button (Stanje odmora) ---------- */
.row-edit { position: relative; display: inline-block; }
.row-edit > summary { list-style: none; cursor: pointer; }
.row-edit > summary::-webkit-details-marker { display: none; }
.row-edit-pop {
    /* Without JavaScript the fields simply open inside the cell. */
    position: static;
    display: grid; gap: 0.55rem; width: 16rem; margin-top: 0.5rem;
    padding: 0.8rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35);
    text-align: left; white-space: normal;
}
/* With it, they float above the page next to the button: a table frame that
   scrolls sideways clips anything hanging out of it, so the box is placed
   against the window rather than inside the table. */
.row-edit-pop.is-floating { position: fixed; z-index: 60; margin: 0; }
.row-edit-pop label { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.row-edit-pop input, .row-edit-pop select { width: 100%; font: inherit; color: var(--ink); }
@media (max-width: 40rem) { .row-edit-pop, .row-edit-pop.is-floating { position: static; width: auto; margin-top: 0.5rem; box-shadow: none; } }

/* A table whose rows should read on one line: nothing inside wraps. If it is
   still wider than the page, it scrolls inside its own frame — a row broken
   over two lines is harder to read than a table that scrolls. */
.table-oneline th, .table-oneline td { white-space: nowrap; }
.balances-table .usage-bar { width: 3.5rem; }
.balances-table th, .balances-table td { padding-left: 0.45rem; padding-right: 0.45rem; }
.balances-table th { font-size: 0.8rem; }

/* A status pill is one phrase: it never breaks. */
.device-status, .tag, .bonus-status { white-space: nowrap; }

/* ---------- the devices list: every line is one line ----------
   The long "serial · vendor" line under a name used to take the width the
   other columns needed, so a name and a date broke over four lines. Now the
   name column has a fixed measure and anything longer ends in an ellipsis,
   with the whole text on hover. */
.device-table td:first-child { min-width: 0; max-width: 15rem; }
.device-table .device-name, .device-table .device-sub {
    display: block; max-width: 15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-table .row-link-target.device-name { position: static; }
.device-table .device-usage { font-size: 0.8rem; margin-top: 0.2rem; }
/* On a wide screen there is room for the whole name. */
@media (min-width: 95rem) {
    .device-table td:first-child, .device-table .device-name, .device-table .device-sub { max-width: 22rem; }
}

/* On a phone the one-line rule gives way: a card has a fixed width, and a
   value that does not fit wraps inside the card instead of pushing it out. */
@media (max-width: 40rem) {
    .table.is-stackable.table-oneline td { white-space: normal; }
    .table.is-stackable td { flex-wrap: wrap; }
    .table.is-stackable td > * { max-width: 100%; }
    .device-table.is-stackable .device-name, .device-table.is-stackable .device-sub { max-width: 100%; }
}

/* ---------- the person-plus in motion ----------
   Only the mark moves; the letters stay put. Every entrance ends with the logo
   exactly as it is at rest. */
.brand-logo { overflow: visible; }
.brand-logo-mark .bm-figure, .brand-logo-mark .bm-solid > *, .brand-logo-mark .bm-armR-wave > * { transform-box: fill-box; }
.brand-logo-mark .bm-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.brand-logo-mark .bm-outline * { fill: none; stroke: var(--accent); stroke-width: 2; }

/* the header: a heartbeat and a ring, over and over */
.bm-pulse .bm-head { transform-origin: 50% 50%; animation: bm-beat 2.8s ease-in-out 0.6s infinite; }
.bm-pulse .bm-ring { transform-origin: 50% 50%; animation: bm-ring 2.8s ease-out 0.6s infinite; }
@keyframes bm-beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(0.98); } 28% { transform: scale(1.1); } }
@keyframes bm-ring { 0% { transform: scale(1); opacity: 0; } 8% { opacity: 0.7; } 60%, 100% { transform: scale(2.6); opacity: 0; } }

/* login, 1: it builds itself, then waves once */
.bm-build .brand-logo-letters { animation: bm-fadein 0.5s ease-out both; }
.bm-build .bm-body { transform-origin: 50% 100%; animation: bm-grow-y 0.45s cubic-bezier(.2,.8,.2,1) 0.3s both; }
.bm-build .bm-armL { transform-origin: 100% 50%; animation: bm-grow-x 0.4s cubic-bezier(.2,.8,.2,1) 0.7s both; }
.bm-build .bm-armR { transform-origin: 0% 50%; animation: bm-grow-x 0.4s cubic-bezier(.2,.8,.2,1) 0.7s both; }
.bm-build .bm-armR-wave { transform-origin: 18% 50%; animation: bm-wave 1.1s ease-in-out 1.75s both; }
.bm-build .bm-head { animation: bm-drop 0.7s cubic-bezier(.3,1.6,.5,1) 1.05s both; }

/* login, 2: crouch, jump with both arms up, land */
.bm-jump .bm-figure { transform-origin: 50% 100%; animation: bm-jump 1.3s ease-in-out 0.4s both; }
.bm-jump .bm-armL { transform-origin: 100% 50%; animation: bm-arm-up-l 1.3s ease-in-out 0.4s both; }
.bm-jump .bm-armR { transform-origin: 0% 50%; animation: bm-arm-up-r 1.3s ease-in-out 0.4s both; }

/* login, 3: drawn as a line, then filled; the line fades as the colour comes */
.bm-draw .brand-logo-letters { animation: bm-fadein 0.6s ease-out both; }
.bm-draw .bm-outline * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bm-draw 1s ease-in-out 0.3s both, bm-fadeout 0.4s ease-out 1.5s both; }
.bm-draw .bm-solid { animation: bm-fadein 0.5s ease-out 1.15s both; }

@keyframes bm-fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes bm-grow-y  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bm-grow-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bm-drop    { 0% { transform: translateY(-26px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bm-wave    { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-40deg); } 50% { transform: rotate(-16deg); } 75% { transform: rotate(-36deg); } }
@keyframes bm-jump    { 0%, 100% { transform: none; } 18% { transform: translateY(2px) scaleY(0.86); }
                        45% { transform: translateY(-13px) scaleY(1.04); } 72% { transform: translateY(1px) scaleY(0.92); } 86% { transform: none; } }
@keyframes bm-arm-up-l { 0%, 18%, 86%, 100% { transform: rotate(0); } 45% { transform: rotate(38deg); } }
@keyframes bm-arm-up-r { 0%, 18%, 86%, 100% { transform: rotate(0); } 45% { transform: rotate(-38deg); } }
@keyframes bm-draw    { to { stroke-dashoffset: 0; } }

/* Less motion, when asked for: the finished logo, still. */
@media (prefers-reduced-motion: reduce) {
    .brand-logo * { animation: none !important; }
    .brand-logo .bm-ring, .brand-logo .bm-outline { display: none; }
}

/* ---------- two-step sign-in ---------- */
.code-input { font-size: 1.35rem; letter-spacing: 0.18em; text-align: center; font-variant-numeric: tabular-nums; max-width: 12rem; }
.twofactor-lead { margin: 0 0 1rem; color: var(--ink-soft); }
.twofactor-cancel { margin-top: 0.75rem; text-align: center; }
.twofactor-setup { display: grid; gap: 1.25rem; margin-bottom: 1rem; }
.twofactor-step { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: start; }
.twofactor-step p { margin: 0 0 0.4rem; }
.twofactor-num {
    width: 2rem; height: 2rem; border-radius: 999px; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-wash); color: var(--accent-ink); font-weight: 700;
}
.totp-qr { width: 12rem; height: 12rem; margin: 0.5rem 0 0.8rem; padding: 0.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.totp-qr svg { display: block; width: 100%; height: 100%; }
.totp-secret { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: 0.08em; padding: 0.3rem 0.5rem; background: var(--paper); border-radius: 6px; user-select: all; }
.twofactor-confirm { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.twofactor-manage { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 0.8rem; }
.twofactor-pw { display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.twofactor-pw p { margin: 0; }
.recovery-block { border-left: 4px solid var(--warn); }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem 1rem; padding-left: 1.4rem; margin: 0.6rem 0; }
.recovery-codes code { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: 0.06em; user-select: all; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The Wiki opens in its own tab: a small arrow says so. */
.nav-list a .nav-external { width: 0.8rem; height: 0.8rem; margin-left: auto; opacity: 0.6; }

/* ---------- misao trenutka on the sign-in page ----------
   A speech bubble under the form, pointing up at it: soft, small, quieter
   than everything above it. It fades in once the logo has done its entrance,
   and simply stands still for anyone who asked for less motion. */
.login-thought {
    position: relative;
    width: 100%; max-width: 22rem;
    margin: 1.4rem auto 0;
    padding: 0.85rem 1.1rem 0.75rem;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--muted);
    box-shadow: 0 10px 28px -22px rgba(0, 0, 0, 0.45);
    animation: thought-in 0.6s ease-out 0.45s both;   /* soon, not at once: in view within a second */
}
.login-thought::before {           /* the little tail, pointing up at the form */
    content: "";
    position: absolute; top: -7px; left: 50%;
    width: 12px; height: 12px;
    background: inherit;
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: translateX(-50%) rotate(45deg);
    border-top-left-radius: 3px;
}
.login-thought blockquote { margin: 0; font-size: 0.9rem; line-height: 1.5; font-style: italic; }
.login-thought figcaption { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; opacity: 0.85; }
@keyframes thought-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-thought { animation: none; } }

/* On-call bonus amounts in the schedule: settled ones plain, estimates quieter. */
.bonus-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-amount.is-estimate { font-weight: 500; color: var(--muted); cursor: help; }

/* An event put in the calendar: it stands apart from leave and on-call. */
.cal-event {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.1rem 0.35rem;
    border-left: 3px solid var(--info);
    border-radius: 3px;
    background: var(--info-wash); color: var(--info);
    font-size: 0.72rem; font-weight: 650;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-event .icon { flex: none; }
.cal-event-time { font-variant-numeric: tabular-nums; opacity: 0.8; font-weight: 600; }
.cal-event-tag { background: var(--info-wash); color: var(--info); border-left: 3px solid var(--info); }

/* Today in the calendar: the whole square in a soft blue — enough to find it
   at a glance, not enough to compete with what is on it. A weekend or a
   holiday that falls today still shows as today; a selected day shows as
   selected. */
.cal-cell.is-today { background: var(--info-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 30%, transparent); }
.cal-cell.is-today.is-selected { background: var(--accent-wash); }

/* A select that submits its form the moment something is picked. */
select[data-autosubmit] { cursor: pointer; }

/* Only for a browser without JavaScript (assets/css/nojs.css shows it again). */
.nojs-only { display: none; }

/* Wellbeing: patterns in when the answers come. */
.wb-patterns { margin: 0.9rem 0 0.4rem; }
.wb-patterns h3 { margin: 0 0 0.45rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wb-patterns ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.wb-pattern { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.55rem; align-items: start; padding: 0.5rem 0.65rem; border-radius: var(--radius); background: var(--paper); font-size: 0.88rem; line-height: 1.45; }
.wb-pattern .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--muted); }
.wb-pattern.is-warn { background: var(--warn-wash); }
.wb-pattern.is-warn .icon { color: var(--warn); }
.wb-pattern.is-good { background: var(--accent-wash); }
.wb-pattern.is-good .icon { color: var(--accent); }

/* ---------- Najave za DC ----------
   One white card; each section a small heading and its choices underneath.
   The global fieldset look (frame, white fill) is switched off inside it. */
.dc-form {
    display: grid; gap: 1.35rem;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.dc-form fieldset { border: 0; background: none; padding: 0; margin: 0; min-width: 0; }
.dc-form legend, .dc-form .field > label {
    display: block; padding: 0; margin: 0 0 0.45rem;
    font-size: 0.85rem; font-weight: 650; color: var(--ink-soft);
}
.dc-form .field { margin: 0; }
.dc-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dc-row > legend { width: 100%; }
.dc-choice {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); cursor: pointer; font-size: 0.92rem;
}
.dc-choice:hover { border-color: var(--accent); }
.dc-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.dc-when { display: grid; grid-template-columns: minmax(10rem, 13rem) 7.5rem 7.5rem; gap: 1rem; justify-content: start; }
.dc-when input { width: 100%; }
.dc-equip { display: grid; grid-template-columns: repeat(2, max-content); gap: 1rem 3rem; }
.dc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.dc-people > legend { grid-column: 1 / -1; }
.dc-person {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.25rem;
    align-content: start;
    padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); cursor: pointer;
}
.dc-person > input { grid-row: 1 / span 2; margin-top: 0.2rem; }
.dc-person:hover { border-color: var(--accent); }
.dc-person:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.dc-person-name { font-weight: 600; line-height: 1.3; }
.dc-person-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; align-items: center; font-size: 0.85rem; min-height: 1.3rem; }
.dc-people .hint { grid-column: 1 / -1; margin: 0.2rem 0 0; }
.dc-form textarea { width: 100%; }
.dc-form .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding-top: 0.25rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.dc-generate { font-weight: 700; letter-spacing: 0.02em; }
.dc-result { border-left: 4px solid var(--accent); }
.dc-file { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; overflow-wrap: anywhere; }
.dc-mail h3 { margin: 1rem 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dc-mail-fields { display: grid; gap: 0.5rem; margin: 0 0 0.6rem; }
.dc-mail-fields > div { display: grid; grid-template-columns: 5rem 1fr; gap: 0.6rem; align-items: start; }
.dc-mail-fields dt { color: var(--muted); font-size: 0.85rem; padding-top: 0.2rem; }
.dc-mail-fields dd { margin: 0; display: flex; flex-wrap: wrap; align-items: start; gap: 0.5rem; }
.dc-body { white-space: pre-line; }
.dc-plates { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.4rem; }
.dc-plates li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dc-plates form { margin: 0; }
.dc-add-plate { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dc-add-plate input { max-width: 14rem; text-transform: uppercase; }
.dc-time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
@media (max-width: 40rem) {
    .dc-form { padding: 1rem; }
    .dc-when { grid-template-columns: 1fr 1fr; }
    .dc-when .field:first-child { grid-column: 1 / -1; }
    .dc-equip { grid-template-columns: 1fr; gap: 1rem; }
}

/* A past day in the calendar cannot be picked for a request (non-administrators). */
.calendar[data-min-date] .cal-cell.is-past { cursor: default; }

/* Events: "Prisustvujem" and who is coming. */
.event-attend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.55rem; }
.event-attend form { margin: 0; }
.event-going { display: block; margin-top: 0.4rem; font-size: 0.88rem; color: var(--ink-soft); }
.event-going strong { margin-right: 0.25rem; }

/* Holidays: edit and delete side by side. */
.holiday-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.holiday-actions .row-edit-form label { display: grid; gap: 0.25rem; font-size: 0.85rem; }

/* Purchases: fields filled in from a link flash softly once. */
.is-autofilled { animation: autofilled 1.6s ease-out; }
@keyframes autofilled { from { background: var(--accent-wash); } to { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .is-autofilled { animation: none; } }

/* Directory: the office extension, easy to read at a glance. */
.cell-extension { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Purchases: favourites — one click back on the list. */
.supply-favs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0.5rem; }
.supply-favs-title { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 650; color: var(--muted); margin-right: 0.2rem; }
.supply-favs-title .icon { color: var(--warn); }
.supply-fav { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.supply-fav form { margin: 0; display: flex; }
.supply-fav-add, .supply-fav-remove { border: 0; background: none; font: inherit; cursor: pointer; color: var(--ink); }
.supply-fav-add { padding: 0.3rem 0.4rem 0.3rem 0.75rem; font-size: 0.86rem; }
.supply-fav-add:hover { color: var(--accent-ink); background: var(--accent-wash); }
.supply-fav-remove { padding: 0.3rem 0.6rem 0.3rem 0.35rem; color: var(--muted); }
.supply-fav-remove:hover { color: var(--danger); }
.supply-save-fav { margin-top: 0.2rem; }
.supply-save-fav .icon { color: var(--warn); }

/* Home page: "Prisustvujem" at the right end of an event's row. */
.event-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem 0.5rem; align-self: center; }
.event-side form { margin: 0; }
.event-count { font-size: 0.82rem; color: var(--muted); white-space: nowrap; cursor: default; }
@media (max-width: 40rem) { .event-side { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- Troškovi prevoza ---------- */
.transport-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.transport-head h2 { margin: 0; }
.transport-month { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.transport-files { list-style: none; margin: 0.8rem 0; padding: 0; display: grid; gap: 0.5rem; }
.transport-files li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.transport-files form { margin: 0; }
.transport-thumb { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 6px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.transport-thumb img { width: 100%; height: 100%; object-fit: cover; }
.transport-pdf { font-size: 0.75rem; font-weight: 800; color: var(--danger); letter-spacing: 0.04em; }
.transport-file-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.transport-file-main a { font-weight: 600; overflow-wrap: anywhere; }
.transport-file-main .muted { font-size: 0.8rem; }
.transport-upload { display: grid; gap: 0.8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.transport-summary { font-weight: 600; }
.transport-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0.1rem 0.35rem 0.1rem 0; font-size: 0.85rem; white-space: nowrap; }

/* Troškovi prevoza: what a fiscal QR code said. */
.transport-fiscal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--accent-ink); }
.transport-fiscal .icon { width: 0.95em; height: 0.95em; }
.qr-status { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.qr-status .is-fiscal { color: var(--accent-ink); font-weight: 600; }
.transport-verify { font-size: 0.75rem; margin-right: 0.5rem; white-space: nowrap; }

/* Troškovi prevoza: reading a QR code with the camera, up close. */
.qr-rescue { margin-left: 0.3rem; }
.qr-scan { border: 0; border-radius: var(--radius); padding: 1rem; width: min(30rem, calc(100vw - 2rem)); background: var(--surface); color: var(--ink); }
.qr-scan::backdrop { background: rgba(0, 0, 0, 0.6); }
.qr-scan-title { margin: 0 0 0.6rem; font-weight: 650; }
.qr-scan-view { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.qr-scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25); }
.qr-scan-hint { margin: 0.6rem 0; }

/* "zašto?" — what was tried for a receipt that would not read. */
.qr-why { display: block; margin: 0.15rem 0 0.35rem; font-size: 0.78rem; }
.qr-why summary { cursor: pointer; color: var(--muted); text-decoration: underline dotted; }
.qr-why pre { margin: 0.3rem 0 0; padding: 0.5rem 0.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; font-size: 0.75rem; max-width: 40rem; }

/* Troškovi prevoza: reading, then sending by itself. */
.qr-progress { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-weight: 600; color: var(--accent-ink); }
.qr-progress::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--accent-wash); border-top-color: var(--accent); animation: qr-spin 0.8s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qr-progress::before { animation: none; } }
.qr-later { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-size: 0.82rem; color: var(--muted); }
.qr-later .qr-why { flex-basis: 100%; margin: 0; }

/* Profile: the phone's calendar address. */
.feed-url { display: flex; gap: 0.5rem; max-width: 46rem; }
.feed-url input { flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem; }
.feed-howto { margin: 0.8rem 0; }
.feed-howto summary { cursor: pointer; font-weight: 600; }
.feed-howto ul { margin: 0.5rem 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }

/* A form saving by itself: quietly dimmed until the page returns. */
form.is-saving { opacity: 0.6; transition: opacity 0.2s; }

/* Purchases: the next purchase day, moved right where it is shown. */
.supply-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.2rem 0 0.8rem; }
.supply-meta-row .supply-meta { margin: 0; }
.supply-next-edit .row-edit-pop { display: grid; gap: 0.45rem; min-width: 15rem; }
.supply-next-edit .row-edit-pop .hint { max-width: 18rem; }

/* The date picker: days outside the field's limits cannot be chosen. */
.date-day[disabled], .date-day.is-off { opacity: 0.3; cursor: not-allowed; background: none; }
.date-day[disabled]:hover { border-color: transparent; color: inherit; }