/* The admin dashboard's look (static/desk.css) for every other page.
   Loaded after style.css: it points style.css's colours at the dashboard's
   light and dark palettes, then gives the shared pieces (top bar, cards,
   buttons, fields, tables, tabs, pills) the same raised, rounded style.
   The pages' own markup doesn't change. */

:root {
    --bg: var(--d-bg);
    --bg-wash: var(--d-ground);
    --card: var(--d-card);
    --text: var(--d-text);
    --ink: var(--d-ink);
    --muted: var(--d-muted);
    --border: var(--d-line);
    --border-strong: rgba(0, 0, 0, .14);
    --rule-soft: var(--d-soft);
    --silver: var(--d-ink);
    --silver-tint: var(--d-soft);
    --silver-tint-strong: rgba(0, 0, 0, .08);
    --green-text: var(--d-green-text);
    --green-tint: var(--d-green-tint);
    --green-tint-strong: rgba(63, 161, 68, .28);
    --danger: #C2412C;
    --danger-tint: var(--d-red-tint);
    --danger-text: var(--d-red);
    --warn: var(--d-amber);
    --warn-tint: var(--d-amber-tint);
    --primary: var(--d-green);
    --primary-hover: #2a7d38;
    --primary-edge: transparent;
    --panel: var(--d-card);
    --glass: var(--d-card);
    --glass-strong: var(--d-card);
    --glass-thin: var(--d-soft);
    --glass-edge: var(--d-rim);
    --glass-rim: var(--d-line);
    --glass-specular: 0 0 0 transparent;
    --glass-shadow: var(--d-raise);
    --glass-shadow-lift: var(--d-raise-hover);
    --radius: 22px;
}
:root[data-theme="dark"] {
    --border-strong: rgba(255, 255, 255, .16);
    --silver-tint-strong: rgba(255, 255, 255, .12);
}

body.skin {
    background: var(--d-ground);
    background-attachment: fixed;
    color: var(--d-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
}
body.skin a { color: var(--d-green-text); }

/* ── Top bar: a frosted pill floating over the page ─────────────────── */
body.skin .topbar {
    position: sticky; top: 12px; z-index: 200;
    margin: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    background: var(--d-frost);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--d-rim);
    box-shadow: var(--d-raise);
    justify-content: flex-start;
    gap: 8px;
}
body.skin .topbar::after { display: none; }
body.skin .topbar .brand img { height: 30px; }
body.skin .topbar .brand .logo-dark { display: none; }
:root:not([data-theme="dark"]) body.skin .topbar .brand .logo-white { display: none; }
:root:not([data-theme="dark"]) body.skin .topbar .brand .logo-dark { display: block; }
body.skin .tb-spacer { flex: 1; }
body.skin .back-btn {
    width: 36px; height: 36px; margin-right: 4px; color: var(--d-ink);
    background: var(--d-card); border: 1px solid var(--d-rim); box-shadow: var(--d-raise);
}
body.skin .back-btn:hover { background: var(--d-card); box-shadow: var(--d-raise-hover); }
body.skin .back-btn + .brand { margin-right: 0; }
body.skin .topbar .d-icon-btn { padding: 0; box-shadow: var(--d-raise); background: var(--d-card); border-color: var(--d-rim); }
body.skin .topbar form button.d-icon-btn { color: var(--d-muted); }

/* The burger menu is for pages without the rail (the old pages' extra
   links live in the rail now). */
body.skin .topbar .nav-toggle { display: none; }
body.skin .topbar nav#site-nav { display: none !important; }

/* ── Rail and page ───────────────────────────────────────────────────── */
body.skin .skin-wrap { display: flex; gap: 14px; align-items: flex-start; max-width: 1440px; margin: 14px auto 0; padding: 0 16px; }
body.skin .skin-wrap .d-rail { position: sticky; top: 92px; flex: none; }
body.skin .skin-wrap .container {
    flex: 1; min-width: 0; max-width: none; margin: 0;
    padding: 2px 0 calc(110px + env(safe-area-inset-bottom, 0px));
}
body.skin .skin-wrap:not(.has-rail) .container { max-width: 1200px; margin: 0 auto; padding-top: 28px; }
@media (max-width: 900px) {
    body.skin .skin-wrap { flex-direction: column; }
    body.skin .skin-wrap .d-rail { position: static; width: 100%; }
}
@media (max-width: 600px) {
    body.skin .topbar { margin: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; border-radius: 26px; position: static; }
    body.skin .skin-wrap { padding: 0 10px; }
}

/* ── Type ────────────────────────────────────────────────────────────── */
body.skin h1 { font-size: 24px; font-weight: 600; letter-spacing: -.3px; color: var(--d-ink); }
body.skin h2 { font-size: 16px; font-weight: 600; color: var(--d-ink); }
body.skin .muted, body.skin p.muted, body.skin .meta, body.skin .tz-note { color: var(--d-muted); }
body.skin .section-head { color: var(--d-muted); border-left-color: var(--d-green); }

/* ── Cards: raised bubbles ───────────────────────────────────────────── */
body.skin .card {
    background: var(--d-card);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--d-rim);
    border-radius: 22px;
    box-shadow: var(--d-raise);
    padding: 20px;
}
body.skin a.card:hover { background: var(--d-card); border-color: var(--d-rim); box-shadow: var(--d-raise-hover); transform: translateY(-1px); }
body.skin .stat { background: var(--d-card); }
body.skin .stat::before { display: none; }
body.skin .stat .num { color: var(--d-ink); font-weight: 600; font-size: 28px; letter-spacing: -.3px; }
body.skin .stat .muted { font-size: 12.5px; }

/* ── Buttons: pills with a little lift ───────────────────────────────── */
body.skin button, body.skin .btn {
    background: var(--d-green); color: #fff; border: 1px solid var(--d-green);
    font-weight: 600; font-size: 14px; padding: 10px 18px;
    box-shadow: 0 8px 18px -8px rgba(47, 138, 62, .6);
}
body.skin button:hover, body.skin .btn:hover { background: #2a7d38; box-shadow: 0 10px 22px -8px rgba(47, 138, 62, .7); }
body.skin .btn-secondary, body.skin button.btn-secondary {
    background: var(--d-card); color: var(--d-text); border: 1px solid var(--d-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
body.skin .btn-secondary:hover { background: var(--d-soft); color: var(--d-ink); border-color: var(--d-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
body.skin .btn-danger, body.skin button.btn-danger { background: #C2412C; border-color: #C2412C; color: #fff; box-shadow: 0 8px 18px -8px rgba(194, 65, 44, .6); }
body.skin .btn-danger:hover { background: #a8382a; }
body.skin .btn-success, body.skin button.btn-success { background: var(--d-green); border-color: var(--d-green); }
body.skin .mini, body.skin table .btn.mini, body.skin table button.mini { padding: 5px 12px; font-size: 12.5px; }
/* The rail, the top bar and Ask Hafa have buttons of their own. */
body.skin .d-icon-btn {
    background: var(--d-card); color: var(--d-muted); border: 1px solid var(--d-rim);
    padding: 0; box-shadow: var(--d-raise); font-weight: 400;
}
body.skin .d-icon-btn:hover { background: var(--d-card); color: var(--d-ink); box-shadow: var(--d-raise-hover); }
body.skin .hafa-close { box-shadow: none; }
body.skin .hafa-close { background: transparent; border: 0; }

/* ── Fields ──────────────────────────────────────────────────────────── */
body.skin input, body.skin select, body.skin textarea {
    background: var(--d-soft); color: var(--d-text);
    border: 1px solid var(--d-line); border-radius: 12px;
    box-shadow: none;
}
body.skin input:focus, body.skin select:focus, body.skin textarea:focus {
    border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-green-tint); outline: 0;
    background: var(--d-card);
}
body.skin input::placeholder, body.skin textarea::placeholder { color: var(--d-muted); opacity: .7; }
body.skin select option, body.skin select optgroup { background: var(--d-card); color: var(--d-text); }
body.skin label { color: var(--d-text); }
body.skin input[type="checkbox"], body.skin input[type="radio"] { accent-color: var(--d-green); }
body.skin input.computed { background: var(--d-soft); color: var(--d-muted); }

/* ── Tables ──────────────────────────────────────────────────────────── */
body.skin th {
    color: var(--d-muted); background: transparent;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    border-bottom: 1px solid var(--d-line);
}
body.skin th, body.skin td { border-bottom-color: var(--d-line); padding: 12px 10px; }
body.skin tbody tr:hover { background: var(--d-soft); }

/* ── Status pills, tabs, filters ─────────────────────────────────────── */
body.skin .status-pill { font-size: 11.5px; font-weight: 500; padding: 3px 10px; box-shadow: none; }
body.skin .status-Pending { background: var(--d-amber-tint); color: var(--d-amber); }
body.skin .status-Approved { background: var(--d-green-tint); color: var(--d-green-text); }
body.skin .status-Rejected { background: var(--d-red-tint); color: var(--d-red); }
body.skin .status-Cancelled { background: var(--d-soft); color: var(--d-muted); }
body.skin .tabs a {
    background: var(--d-card); border: 1px solid var(--d-rim); color: var(--d-muted);
    font-size: 12.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
body.skin .tabs a:hover { background: var(--d-card); color: var(--d-ink); border-color: var(--d-rim); }
body.skin .tabs a.active { background: var(--d-seg); color: var(--d-on-seg); border-color: transparent; box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .35); }
body.skin .pager a, body.skin .pager span.current { border-color: var(--d-line); color: var(--d-text); background: var(--d-card); }
body.skin .pager span.current { background: var(--d-seg); color: var(--d-on-seg); }

/* ── Notes and errors ────────────────────────────────────────────────── */
body.skin .error { background: var(--d-red-tint); color: var(--d-red); border: 1px solid transparent; border-radius: 14px; }
body.skin .flash { border-left-width: 1px; }

/* ── The staff dashboard's clock card and tiles ──────────────────────── */
body.skin .clock-status {
    background: var(--d-card); border: 1px solid var(--d-rim); box-shadow: var(--d-raise);
    border-radius: 22px; color: var(--d-text);
}
body.skin .clock-status label, body.skin .clock-status .muted { color: var(--d-muted); }
body.skin .clock-status.is-in { background: var(--d-card); }
body.skin .clock-status .state-line { background: var(--d-soft); color: var(--d-ink); }
body.skin .slide-clock { border-radius: 999px; }
body.skin .action-card { background: var(--d-card); border: 1px solid var(--d-rim); border-left-width: 1px; box-shadow: var(--d-raise); }
body.skin .action-card-icon { background: var(--d-green-tint); color: var(--d-green-text); border-radius: 50%; }
/* Home | Requests: the same pill switch as the admin dashboard's tabs. */
body.skin .dash-tabs {
    display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 14px;
    background: var(--d-soft); border: 0; border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06);
}
body.skin button.dash-tab {
    background: transparent; color: var(--d-muted); border: 0; border-radius: 999px;
    padding: 7px 18px; box-shadow: none; font-weight: 500; transition: background .25s, color .25s;
}
body.skin button.dash-tab:hover { background: transparent; color: var(--d-ink); box-shadow: none; }
body.skin button.dash-tab.active { background: var(--d-seg); color: var(--d-on-seg); box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .35); }
body.skin .day-row { border-color: var(--d-line); }
body.skin .day-row.today { background: var(--d-green-tint); }
body.skin .agenda-item { background: var(--d-card); }

/* ── Sign-in page ────────────────────────────────────────────────────── */
body.skin .hero-card .card { box-shadow: var(--d-raise-hover); }

/* The sign-in page's logo: white lettering on dark, grey on light. */
body.skin .lp-logo-dark { display: none; }
:root:not([data-theme="dark"]) body.skin .lp-logo-white { display: none; }
:root:not([data-theme="dark"]) body.skin .lp-logo-dark { display: block; }

/* The rail's links are menu items, not text links: no underline, black
   (white in dark), white on the green one you're on. */
body.skin .d-rail a { color: var(--d-ink); text-decoration: none; }
body.skin .d-rail a:hover { color: var(--d-ink); }
body.skin .d-rail a.on, body.skin .d-rail a.on:hover { color: #fff; }
body.skin .topbar a, body.skin .back-btn { text-decoration: none; }

/* ── The transporter's pages (transport_*.html) ──────────────────────── */
body.skin .tr-due {
    display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
    background: var(--d-green-tint); border-color: transparent;
}
body.skin .tr-due .tr-due-ic { color: var(--d-green-text); display: flex; }
body.skin .tr-due .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.skin .tr-due .who b { color: var(--d-ink); font-weight: 600; }
body.skin .tr-due .who span { color: var(--d-muted); font-size: 13px; }
body.skin a.d-btn { text-decoration: none; }
body.skin .tr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
body.skin .tr-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
    color: var(--d-text); text-decoration: none; cursor: pointer; font: inherit;
    padding: 18px; border-radius: 22px; background: var(--d-card); border: 1px solid var(--d-rim);
    box-shadow: var(--d-raise); transition: box-shadow .2s, transform .2s;
}
body.skin button.tr-tile:hover, body.skin a.tr-tile:hover { background: var(--d-card); color: var(--d-text); box-shadow: var(--d-raise-hover); transform: translateY(-1px); }
body.skin .tr-tile .ic {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--d-green-tint); color: var(--d-green-text);
}
body.skin .tr-tile b { color: var(--d-ink); font-weight: 600; font-size: 15px; }
body.skin .tr-tile .soon { color: var(--d-muted); }
body.skin .tr-tile.nudge { animation: tr-nudge .4s ease; }
@keyframes tr-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
body.skin .tr-left { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.3px; margin: 6px 0 12px; }
body.skin .tr-left.none { color: var(--d-red); }
body.skin .tr-left small { font-size: 14px; font-weight: 400; color: var(--d-muted); }
body.skin .tr-form { display: flex; flex-direction: column; gap: 6px; }
body.skin .tr-form label { margin-top: 8px; font-size: 13px; font-weight: 600; }
body.skin .tr-form button { margin-top: 14px; }
body.skin .d-rows a.d-row { color: inherit; text-decoration: none; border-radius: 14px; }
body.skin .tr-steps { display: flex; justify-content: space-between; margin-bottom: 12px; position: relative; padding: 18px 26px; }
body.skin .tr-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; color: var(--d-muted); font-size: 12.5px; }
body.skin .tr-step::before {
    content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--d-track); z-index: 0;
}
body.skin .tr-step:first-child::before { display: none; }
body.skin .tr-step .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--d-track); position: relative; z-index: 1; }
body.skin .tr-step.done { color: var(--d-ink); font-weight: 600; }
body.skin .tr-step.done .dot { background: var(--d-green); box-shadow: 0 0 0 4px var(--d-green-tint); }
body.skin .tr-step.done::before { background: var(--d-green); }
body.skin .tr-steps.stopped .tr-step:first-child .dot { background: var(--d-muted); box-shadow: none; }
body.skin .tr-file {
    display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px;
    border: 1.5px dashed var(--d-line); border-radius: 16px; background: var(--d-soft);
    color: var(--d-muted); cursor: pointer; margin: 6px 0 12px; padding: 12px; position: relative;
}
body.skin .tr-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.skin .tr-file.has-file { border-color: var(--d-green); color: var(--d-green-text); }
body.skin .tr-receipt { width: 100%; border-radius: 14px; border: 1px solid var(--d-line); display: block; }
body.skin .tr-details { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 10px 0 0; }
body.skin .tr-details dt { color: var(--d-muted); }
body.skin .tr-details dd { margin: 0; color: var(--d-ink); font-weight: 600; }
body.skin .tr-details dd.ok { color: var(--d-green-text); }
body.skin .tr-timeline { list-style: none; margin: 10px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--d-line); }
body.skin .tr-timeline li { position: relative; padding: 0 0 16px 6px; display: flex; flex-direction: column; gap: 2px; }
body.skin .tr-timeline li::before {
    content: ""; position: absolute; left: -25px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--d-green);
}
body.skin .tr-timeline b { color: var(--d-ink); font-weight: 600; }
body.skin .tr-timeline p { margin: 2px 0 0; }
@media (max-width: 700px) {
    body.skin .tr-tiles { grid-template-columns: minmax(0, 1fr); }
    body.skin .tr-due { flex-wrap: wrap; }
}
body.skin a.d-chip { text-decoration: none; color: var(--d-muted); }
body.skin a.d-chip:hover { color: var(--d-ink); }
body.skin .container > .d-card, body.skin .container > .d-grid { margin-bottom: 12px; }
@media (max-width: 600px) {
    /* A request row on a phone: number and truck on one line, litres and
       status under them. */
    body.skin .d-rows a.d-row .code { flex: 0 0 auto; }
    body.skin .d-rows a.d-row .who { flex: 1 1 calc(100% - 90px); }
    body.skin .d-rows a.d-row .h { margin-left: auto; }
}

/* Sign-in buttons: the same black pill as the Staff | Transporter switch
   (light in dark mode), full width like it. */
body.skin .lp-btn--primary, body.skin .lp-btn--bio,
body.skin .lp-btn.is-loading, body.skin .lp-btn.is-loading:hover {
    width: 100%; border: 0; border-radius: 999px;
    background: var(--d-seg); color: var(--d-on-seg);
    font-size: 15px; font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .35);
}
body.skin .lp-btn--primary:hover, body.skin .lp-btn--bio:hover {
    background: var(--d-seg); color: var(--d-on-seg); filter: brightness(1.15);
    box-shadow: 0 6px 16px -4px rgba(16, 24, 40, .4);
}
body.skin .lp-btn .lp-spinner { border-color: currentColor; border-top-color: transparent; opacity: .8; }

/* ── Access pills on Add / Edit employee ───────────────────────────── */
.access-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body.skin .access-pill {
    position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0;
    padding: 8px 16px; border-radius: 999px; cursor: pointer; user-select: none;
    font-weight: 600; font-size: .9rem; color: var(--d-text);
    background: var(--d-soft); border: 1px solid var(--d-line);
    transition: background .15s, border-color .15s, color .15s;
}
body.skin .access-pill:hover { border-color: var(--d-muted); }
.access-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.access-pill .tick { display: none; }
body.skin .access-pill:has(input:checked) { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.access-pill:has(input:checked) .tick { display: inline-flex; }
.access-pill:has(input:focus-visible) { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ── Admin fuel requests ───────────────────────────────────────────── */
.fuel-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fuel-filters .d-chip b { margin-left: 4px; font-weight: 600; }
body.skin a.d-chip.on { color: var(--d-on-seg); }
.tr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tr-actions button { margin: 0; }

/* ── Employees | Transporters tabs ─────────────────────────────────── */
.people-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.people-head h1 { margin: 0; }
.people-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--d-track); }
body.skin .people-tabs a {
    padding: 7px 16px; border-radius: 999px; color: var(--d-muted); text-decoration: none;
    font-weight: 600; font-size: .9rem; transition: background .2s, color .2s;
}
body.skin .people-tabs a:hover { color: var(--d-ink); }
body.skin .people-tabs a.on { background: var(--d-seg); color: var(--d-on-seg); }
.people-tabs b { margin-left: 4px; opacity: .7; font-weight: 600; }
.tp-month .d-bar { margin-top: 6px; max-width: 160px; }

/* Slide to clock in: a black ring and black words (light in dark mode). */
body.skin .slide-clock.slide-in { background: transparent; border-color: var(--d-ink); box-shadow: none; }
body.skin .slide-in .slide-clock-label { color: var(--d-ink); }
body.skin .slide-in .slide-clock-thumb { background: var(--d-green); color: #fff; box-shadow: none; }

/* Fields the browser filled in (saved ID and PIN) keep the normal field
   colours: the older rules painted them in the old dark theme. */
body.skin input:-webkit-autofill,
body.skin input:-webkit-autofill:hover,
body.skin input:-webkit-autofill:focus,
body.skin .lp-field input:-webkit-autofill,
body.skin .lp-field input:-webkit-autofill:hover,
body.skin .lp-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--d-text);
    caret-color: var(--d-text);
    box-shadow: 0 0 0 1000px var(--d-soft) inset;
}

/* The lines under the sign-in buttons: grey words, a green link (the old
   white was invisible on the white card). */
body.skin .lp-footer { color: var(--d-muted); }
body.skin .lp-footer a, body.skin .lp-footer a:hover { color: var(--d-green-text); }
/* No coloured glows behind the sign-in card: a plain ground, as elsewhere. */
body.skin .lp-blob { display: none; }

/* The clock card's words on the plain card: dark, not the old white. */
body.skin .clock-greeting, body.skin .clock-status .indicator,
body.skin .clock-status .indicator.in, body.skin .clock-status .indicator.out { color: var(--d-ink); }
body.skin .clock-greeting div, body.skin .clock-status .clock-since { color: var(--d-muted); }
body.skin .clock-photo { background: var(--d-green-tint); border-color: var(--d-green); }
body.skin .clock-photo .photo-initials { color: var(--d-green-text); }
body.skin .clock-status .state-dot { background: var(--d-muted); box-shadow: none; }
body.skin .clock-status.is-in .state-dot { background: var(--d-green); animation: none; }

/* Slide to clock out: the same ring as clock in, with a black handle. */
body.skin .slide-clock.slide-out { background: transparent; border-color: var(--d-ink); box-shadow: none; }
body.skin .slide-out .slide-clock-label { color: var(--d-ink); }
body.skin .slide-out .slide-clock-thumb { background: var(--d-ink); color: var(--d-card); box-shadow: none; }

/* The clock card's top band: solid brand green with white words while
   you're on the clock, a quiet grey once you're clocked out. It runs to
   the card's edges; the site picker and slider sit on white below it. */
body.skin .clock-status { overflow: hidden; }
body.skin .clock-band {
    margin: -30px -18px 18px; padding: 24px 18px 20px;
    background: var(--d-soft);
}
body.skin .clock-band .indicator:empty { display: none; }
body.skin .clock-status .clock-band { background: var(--d-green); }
body.skin .clock-status .clock-band .state-line { background: rgba(255, 255, 255, .18); color: #fff; }
body.skin .clock-status .clock-band .state-dot { background: #fff; }
body.skin .clock-status .clock-band .clock-greeting { color: #fff; }
body.skin .clock-status .clock-band .clock-greeting div { color: rgba(255, 255, 255, .85); }
body.skin .clock-status .clock-band .clock-photo { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
body.skin .clock-status .clock-band .photo-initials { color: #fff; }
body.skin .clock-band .clock-who { margin-bottom: 0; }
body.skin .clock-band .state-line { margin-bottom: 14px; }

/* On the clock: frosted green glass. The Hafa Peak leaves sit large and
   blurred behind a see-through green layer, with a soft light edge along
   the top, so the band reads as glass rather than flat paint. */
body.skin .clock-status .clock-band {
    position: relative; isolation: isolate; overflow: hidden;
    background: #2F8A3E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.skin .clock-status .clock-band::before {
    content: ""; position: absolute; z-index: -2; pointer-events: none;
    width: 380px; height: 380px; right: -70px; top: -130px;
    background: url("intro/leaf-top.png") center / contain no-repeat,
                url("intro/leaf-right.png") center / contain no-repeat,
                url("intro/leaf-left.png") center / contain no-repeat;
    filter: blur(12px) brightness(1.7) saturate(1.2); opacity: .8;
}
body.skin .clock-status .clock-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
                rgba(37, 120, 50, .45);
}
@media (prefers-reduced-transparency: reduce) {
    body.skin .clock-status .clock-band::before { display: none; }
}

/* The slider's handle: a green disc with a white arrow, clocking in and
   out alike. */
body.skin .slide-in .slide-clock-thumb,
body.skin .slide-out .slide-clock-thumb { background: var(--d-green); color: #fff; box-shadow: none; }

/* Every overview tile opens or filters something: it lifts under the
   pointer, and the one filtering the list stays outlined in green. */
a.d-stat { cursor: pointer; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.d-stat:hover { box-shadow: var(--d-raise-hover); transform: translateY(-1px); }
a.d-stat[aria-pressed="true"] { border-color: var(--d-green); box-shadow: 0 0 0 2px var(--d-green-tint), var(--d-raise); }

/* An announcement on the staff dashboard: a green bar down the side. */
body.skin .notice-card {
    display: flex; gap: 12px; align-items: flex-start; text-align: left;
    border-left: 4px solid var(--d-green); padding: 14px 16px; margin-bottom: 12px;
}
body.skin .notice-card .notice-ic {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--d-green-tint); color: var(--d-green-text);
}
body.skin .notice-card b { color: var(--d-ink); }
body.skin .notice-card p { margin: 4px 0; color: var(--d-text); white-space: pre-line; }
body.skin .notice-card .muted { font-size: 12.5px; }