/* Ello HR — "Living Sky" skin (Oct 2026).
   Loaded after app.css by /js/sky.js. Look-only: overrides app.css by its existing class names.
   Type scale: desktop 12.5 · 15 · 32 · 64 px; phone 13 · 16 · 22 · 100 px.
   Sections: 1 fonts · 2 tokens · 3 base · 4 shell · 5 page head · 6 components · 7 phone · 9 sky scene · 10 dashboard · 11 inner pages · 8 responsive */

/* ===================== 1. Fonts (vendored, OFL — see /fonts/OFL.txt) ===================== */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2-variations"), url("/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-var.woff2") format("woff2-variations"), url("/fonts/jost-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2-variations"), url("/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ===================== 2. Tokens ===================== */
:root {
  /* Living Sky palette (5 colours) */
  --sky-blue: #3E7CC0;
  --sea: #13A7C0;
  --sea-ink: #0A6E86;
  --sun-1: #F6B44A;
  --sun-2: #FFD98A;
  --coral: #E2553F;
  --ink: #0F1F2E;
  /* shape + type */
  --panel-r: 24px;
  --ctl-r: 14px;
  --f-display: "Fraunces";
  --f-ui: "Instrument Sans";
  /* supporting neutrals and tints */
  --ink-2: #4c5c6a;
  --ink-3: #6b7884;
  --line: rgba(15, 31, 46, .07);
  --line-2: rgba(15, 31, 46, .12);
  --well: #f2f1ee;
  --well-2: #e9e7e3;
  --gold-ink: #8f5410;
  --tint-sea: #e6f4f7;
  --tint-gold: #fdf4e6;
  --tint-coral: #fbece8;
  --tint-sky: #eaf2f9;
  --sky-shadow: 0 1px 2px rgba(15, 31, 46, .04), 0 12px 32px -18px rgba(15, 31, 46, .18);

  /* app.css tokens re-pointed at the palette, so every page inherits it */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f7f6f3;
  --muted: var(--ink-3);
  --border: #e9ebec;
  --border-strong: #dcdfe1;
  --navy: var(--ink);
  --navy-2: #1c3346;
  --teal: var(--sea-ink);
  --teal-2: #085a6e;
  --teal-soft: var(--tint-sea);
  --gold: var(--sun-1);
  --focus: var(--sky-blue);
  --pending: var(--gold-ink); --pending-bg: var(--tint-gold); --pending-bd: #f3dcb4;
  --approved: #2f68a8; --approved-bg: var(--tint-sky); --approved-bd: #c6daee;
  --suspended: #c43f2b; --suspended-bg: var(--tint-coral); --suspended-bd: #f2c6bd;
  --paid: var(--sea-ink); --paid-bg: var(--tint-sea); --paid-bd: #bfe2ea;
  --radius: var(--panel-r);
  --radius-sm: 10px;
  --shadow-sm: var(--sky-shadow);
  --shadow: 0 1px 2px rgba(15, 31, 46, .05), 0 16px 36px -18px rgba(15, 31, 46, .24);
  --shadow-lg: 0 30px 70px -20px rgba(15, 31, 46, .35);
  --sidebar: 256px;
  --font: var(--f-ui), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===================== 3. Base ===================== */
html { background: var(--bg); }
body { font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--bg) linear-gradient(180deg, #eef3f5 0, var(--bg) 420px) no-repeat; }
::selection { background: rgba(19, 167, 192, .2); }
a { color: var(--sea-ink); }
:focus-visible { outline: 2px solid var(--sky-blue); outline-offset: 2px; border-radius: 6px; }
h1 { font-family: var(--f-display), Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
h2, h3 { font-size: 15px; font-weight: 600; }

/* utilities used by later tasks */
.sky-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none !important; color: #3a1e04;
  background: linear-gradient(180deg, var(--sun-2), var(--sun-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px -10px rgba(200, 120, 30, .7); }
.sky-panel { background: var(--surface); border-radius: var(--panel-r); box-shadow: var(--sky-shadow); }
.sky-num { font-family: var(--f-display), Georgia, serif; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }

/* ===================== 4. Shell: sidebar + top bar ===================== */
.sidebar { background: #f8f9f9; color: var(--ink-2); border-right: 1px solid var(--line); padding: 28px 14px 0; }
.brand { padding: 0 10px 22px; border-bottom: 0; }
.sidebar .brand-mark, .auth-art .brand-mark { width: 150px; height: 50px; flex: none; border-radius: 0; overflow: visible;
  background: url("/img/logo.svg") left center / contain no-repeat; }
.sidebar .brand-mark img, .auth-art .brand-mark img { display: none; }
.sidebar .brand-mark::before, .auth-art .brand-mark::before { content: none; }
.sidebar .brand { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 10px 18px; }
.sidebar .brand-name, .auth-art .brand-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sidebar .brand-sub { margin-top: 0; text-transform: none; }
/* sign-in panel is dark navy: seat the wordmark on a white plate */
.auth-art > .flex { flex-direction: column; align-items: flex-start; gap: 10px; }
.auth-art .brand-mark { width: 180px; height: 60px; padding: 12px 16px; box-sizing: content-box; background-color: #fff; background-origin: content-box; background-clip: padding-box; border-radius: 14px; }
.brand-mark svg { display: none; }
.sidebar .brand-name { color: var(--ink); }
.brand-name { font-weight: 700; font-size: 12.5px; letter-spacing: .08em; white-space: nowrap; }
.sidebar .brand-sub { color: var(--ink-3); }
.brand-sub { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; margin-top: 2px; }
.nav { padding: 0; gap: 0; }
.nav-section { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); padding: 20px 12px 6px; }
.nav a { height: 38px; padding: 0 12px; border-radius: var(--ctl-r); color: var(--ink-2); font-size: 15px; font-weight: 400; }
.nav a svg { opacity: .8; }
.nav a:hover { background: rgba(255, 255, 255, .8); color: var(--ink); }
.nav a.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--sky-shadow); }
.nav a.active svg { color: var(--sea-ink); opacity: 1; }
.nav .badge-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.sidebar-foot { margin: 16px -14px 0; padding: 16px 24px 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.sidebar-foot .who { color: var(--ink); font-size: 15px; font-weight: 600; }

.topbar { height: 68px; padding: 10px 40px 0; gap: 18px; background: #eef3f5; border-bottom: 0; }
.topbar .crumb { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
.bell { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); }
.bell:hover { background: rgba(255, 255, 255, .8); }
.bell .dot { background: var(--coral); border-color: #eef3f5; font-size: 12.5px; font-weight: 600; }
.user-chip { padding: 0; }
.user-chip .avatar { width: 38px; height: 38px; background: var(--sky-blue); color: #fff; font-size: 12.5px; font-weight: 600; }
.user-chip .nm { font-size: 15px; font-weight: 600; line-height: 1.3; }
.user-chip .rl { font-size: 12.5px; color: var(--ink-3); }
.content { padding: 20px 40px 56px; }

/* ===================== 5. Page head ===================== */
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: 32px; }
.page-head p { color: var(--ink-2); }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--sea-ink); }
.subtle { color: var(--ink-3); }
.back { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); }

/* ===================== 6. Components ===================== */
/* panels */
.card { border: 0; border-radius: var(--panel-r); box-shadow: var(--sky-shadow); }
.card-head { padding: 22px 28px 14px; border-bottom: 1px solid var(--line); }
.card-head h2 svg { color: var(--sea-ink); }
.card-head h2 svg.warn-ic { color: var(--coral); }
.card-pad { padding: 22px 28px 24px; }
.form-section { padding: 24px 28px; }
.form-section + .form-section { border-top-color: var(--line); }
h3 > .num, .form-section h3 .num { background: var(--tint-sea); color: var(--sea-ink); font-weight: 700; }
.list-row, .feed li, .case-list li a, .ret-list li, .doc-row, .doc + .doc, .pager, .chips { border-color: var(--line); }
.list-row { padding: 12px 28px; }
.feed li { padding: 10px 28px; }
.case-list li a { padding: 12px 28px; }
.pager { padding: 14px 28px; font-size: 12.5px; color: var(--ink-3); }
.filters { background: transparent; border-bottom: 1px solid var(--line); padding: 16px 28px; }
.empty { color: var(--ink-3); }
.empty .big { font-size: 15px; color: var(--ink); }
.muted-box { background: var(--well); border: 0; border-radius: var(--ctl-r); color: var(--ink-2); }
.divider { background: var(--line); }

/* key / value */
.kv { font-size: 15px; gap: 12px 16px; }
.kv dt { color: var(--ink-3); font-weight: 400; }
.kv dd { font-weight: 500; color: var(--ink); }

/* big numbers in Fraunces */
.scard .n, .att-stat .n, .dc-n, .od-n, .big-amount, .fa-tile b {
  font-family: var(--f-display), Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.dc-n { color: var(--ink); }
.od-n span { font-family: var(--font); font-size: 12.5px; letter-spacing: 0; }
.scard, .od-tile, .fa-tile, .dept-card, .form-card { border-color: transparent; border-radius: 18px; }
.scard { box-shadow: var(--sky-shadow); }
.scard .t { font-size: 12.5px; font-weight: 600; }
.att-stat .l { font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.att-stats, .att-stat { border-color: var(--line); }

/* buttons */
.btn { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--well); color: var(--ink); font-size: 15px; font-weight: 600; }
.btn:hover { background: var(--well-2); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.primary { color: #3a1e04; background: linear-gradient(180deg, var(--sun-2), var(--sun-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px -10px rgba(200, 120, 30, .7); }
.btn.primary:hover { background: linear-gradient(180deg, #ffe3a6, #f8bd5e); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--navy-2); }
.btn.danger { background: var(--well); color: var(--coral); }
.btn.danger:hover { background: var(--tint-coral); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--well); color: var(--ink); }
.btn.ghost.danger { color: var(--coral); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 999px; }
.btn.sm svg { width: 15px; height: 15px; }
.btn.lg { height: 52px; padding: 0 24px; font-size: 15px; }
.btn[disabled] { opacity: .5; }
table.data td:last-child .btn { padding: 0 12px; }
.link-btn { color: var(--sea-ink); }
.chip-x { background: var(--tint-sea); color: var(--sea-ink); }

/* segmented controls and tabs */
.seg, .tabs-line { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: var(--well); }
.seg button, .seg a, .tabs-line a { height: 34px; padding: 0 14px; border: 0; margin: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 400; white-space: nowrap; text-decoration: none; }
.seg button:hover, .seg a:hover, .tabs-line a:hover { background: rgba(255, 255, 255, .6); color: var(--ink); text-decoration: none; }
.seg button.on, .seg a.on, .tabs-line a.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 31, 46, .12); }
.seg button .cnt { background: rgba(15, 31, 46, .08); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.seg button.on .cnt { background: var(--tint-sea); color: var(--sea-ink); }
.tabs-line .badge-count, .tab-count:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; line-height: 1; }
.tabs-line .badge-count[hidden] { display: none; }
.tabs-line { margin-bottom: 20px; }
.card > .toolbar { padding: 16px 20px; }
.chip { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--well); color: var(--ink-2); font-size: 12.5px; }
.chip:hover { background: var(--well-2); }
.chip.on { background: var(--ink); color: #fff; }
.dir > * { min-width: 0; }
.dept-rail a { border-radius: 12px; font-size: 15px; font-weight: 400; color: var(--ink-2); }
.dept-rail a.on { background: var(--tint-sea); color: var(--sea-ink); font-weight: 600; }
.dept-rail a b { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

/* tables */
table.data { font-size: 15px; }
table.data th { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 12px 10px; }
table.data td { padding: 14px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.data td:first-child, table.data th:first-child { padding-left: 28px; }
table.data td:last-child, table.data th:last-child { padding-right: 28px; }
table.data tbody tr.click:hover, tr.clickable:hover td, table.data tr.nt-row:hover td { background: #f8fafa; }
table.data tfoot td, tr.tot td { background: var(--surface-2); border-top: 1px solid var(--line-2); }
table.data th.sorted .arr { color: var(--sea-ink); }
.cell-main, table.data td a.cell-main, table.data td:first-child > a { color: var(--ink); font-weight: 600; }
.cell-sub { font-size: 12.5px; color: var(--ink-3); }
tr.sel td { background: var(--tint-sea); }

/* status: dot + coloured word (no chips) */
.tag, .pill { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.pill { white-space: nowrap; }
.tag::before, .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tag + .tag { margin-left: 10px; }
.tag.red { background: transparent; color: var(--coral); }
.tag.teal, .tag.green { background: transparent; color: var(--sea-ink); }
.tag.gold { background: transparent; color: var(--gold-ink); }
.pill.SUBMITTED, .pill.APPROVED, .pill.SUSPENDED, .pill.PAID, .pill.POP, .pill.DRAFT, .pill.CANCELLED, .pill.gold { background: transparent; border: 0; }
.pill.SUSPENDED { color: var(--coral); }
.pill.gold { color: var(--gold-ink); }
.pill.lg { font-size: 15px; padding: 0; }

/* banners and alerts */
.banner, .alert { border: 0; border-radius: var(--ctl-r); padding: 14px 18px; font-size: 15px; }
.banner.warn, .alert.warn { background: var(--tint-gold); color: #6f4108; }
.banner.danger, .alert.err { background: var(--tint-coral); color: #9a2e1f; }
.banner.info, .alert.info { background: var(--tint-sky); color: #23548a; }
.banner.ok, .alert.ok { background: var(--tint-sea); color: #07566a; }

/* inputs */
.field > label, .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .help, .err-text { font-size: 12.5px; }
.input, select.input, textarea.input { min-height: 42px; padding: 9px 14px; border: 1px solid transparent; border-radius: var(--ctl-r); background-color: var(--well); color: var(--ink); font-size: 15px; }
.input:hover { border-color: var(--line-2); }
.input:focus { background-color: #fff; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(19, 167, 192, .18); }
.input.sm { min-height: 34px; padding: 5px 12px; font-size: 12.5px; }
.input-group .input:first-child { border-radius: var(--ctl-r) 0 0 var(--ctl-r); }
.input-group .input:last-child { border-radius: 0 var(--ctl-r) var(--ctl-r) 0; border-left: 1px solid var(--line-2); }
.checkbox input, .radio-card input, .nt-pick input, .nt-radio input { accent-color: var(--sea-ink); }
.radio-card, .nt-radio label, .nt-pick { border-color: var(--border-strong); border-radius: var(--ctl-r); }
.dropzone { border-color: var(--border-strong); border-radius: var(--panel-r); background: var(--surface-2); }

/* modal, toast, notifications */
.modal-backdrop { background: rgba(15, 31, 46, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal { border-radius: var(--panel-r); }
.modal-head { padding: 24px 28px 6px; }
.modal-head h2 { font-family: var(--f-display), Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.modal-body { padding: 12px 28px 20px; }
.modal-foot { padding: 14px 28px 24px; }
.modal-close { width: 34px; height: 34px; border-radius: 50%; background: var(--well); }
.confirm-box { border-color: var(--line-2); border-radius: var(--ctl-r); }
.toast { background: var(--ink); border-radius: var(--ctl-r); }
.toast.ok { background: var(--sea-ink); }
.toast.err { background: #a83424; }
.notif-panel { border: 0; border-radius: var(--panel-r); }
.notif-item { border-color: var(--line); }
.notif-item.unread { background: #f3f9fa; }

/* ===================== 7. Phone (global components only; page layouts come later) ===================== */
.clk-brand .brand-mark, .ntc-top .brand-mark { background: transparent; }
.clk-brand .brand-name, .ntc-top .brand-name { color: var(--ink); }
.clk-login h1 { font-size: 32px; }
.input.lg { font-size: 16px; min-height: 52px; }
.input.pin { font-size: 22px; }
.clk-card { border: 0; border-radius: var(--panel-r); box-shadow: var(--sky-shadow); }
.clk-nav { border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(15, 31, 46, .25); }
.clk-nav button { min-height: 52px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.clk-nav button.on { background: transparent; color: var(--sea-ink); }

/* ===================== 9. Living sky scene (sky.js paints [data-sky-scene]) ===================== */
/* Scene is built by sky.js: .sky-art > stars, glow, sun, haze over a plain horizon band (the --sea* variables).
   Positions come from --hz / --sx / --sy set via CSSOM. No backdrop-filter; motion = opacity/transform only. */
.sky-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-sky-scene] { position: relative; overflow: hidden; isolation: isolate; --hz: 66%; --sx: 50%; --sy: 30%; }
[data-sky-scene][data-phase="dawn"] {
  --s0: #3c76b4; --s1: #6fa3d2; --s2: #b8cfe0; --s3: #f3cfb2; --s4: #fde6cc;
  --sea0: #b9c3cf; --sea1: #8a99aa; --sea2: #5d6c7e;
  --sun: #fff6dc; --glow: rgba(255, 226, 170, .75); --sil: #163349; --sil2: #2a5370; --shim: rgba(255, 248, 232, .85);
}
[data-sky-scene][data-phase="morning"] {
  --s0: #2f7fcb; --s1: #5aa4dc; --s2: #a9d3ec; --s3: #f6dcc0; --s4: #ffeacb;
  --sea0: #c3ced9; --sea1: #92a3b5; --sea2: #627488;
  --sun: #fffaea; --glow: rgba(255, 240, 200, .8); --sil: #123c4d; --sil2: #1f5b6d; --shim: rgba(255, 255, 255, .88);
}
[data-sky-scene][data-phase="day"] {
  --s0: #1d7fd0; --s1: #3fa6e8; --s2: #86cdf2; --s3: #c8ecfa; --s4: #e8f8fd;
  --sea0: #cdd8e2; --sea1: #9aabbd; --sea2: #66798d;
  --sun: #fffdf2; --glow: rgba(255, 255, 236, .8); --sil: #0f3a4a; --sil2: #1e5a6c; --shim: rgba(255, 255, 255, .9);
}
[data-sky-scene][data-phase="sunset"] {
  --s0: #1c2f55; --s1: #4f4a6e; --s2: #c76f4a; --s3: #f2a24c; --s4: #ffd47e;
  --sea0: #a98a7c; --sea1: #6b5a5f; --sea2: #2f2b3a;
  --sun: #ffe3a1; --glow: rgba(255, 178, 92, .85); --sil: #1a1424; --sil2: #3a2633; --shim: rgba(255, 214, 140, .9);
}
[data-sky-scene][data-phase="night"] {
  --s0: #040a1c; --s1: #0b1736; --s2: #14264f; --s3: #203a6b; --s4: #2c4b7e;
  --sea0: #1f2a40; --sea1: #121a2b; --sea2: #080c16;
  --sun: #f6f2e4; --glow: rgba(190, 210, 255, .35); --sil: #02050f; --sil2: #0a1430; --shim: rgba(214, 226, 255, .7);
}
[data-sky-scene] .sky-art {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--s0) 0%, var(--s1) calc(var(--hz) * .42), var(--s2) calc(var(--hz) * .7), var(--s3) calc(var(--hz) * .9), var(--s4) var(--hz), var(--sea0) var(--hz), var(--sea1) calc(var(--hz) + 14%), var(--sea2) 100%);
}
.sky-art i { position: absolute; display: block; }
.sky-art .sky-glow {
  width: 78%; max-width: 440px; aspect-ratio: 1; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
}
.sky-art .sky-sun {
  width: 30px; height: 30px; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff 0, var(--sun) 55%, var(--sun) 100%);
  box-shadow: 0 0 18px 6px var(--glow), 0 0 60px 20px var(--glow);
}
[data-phase="sunset"] .sky-art .sky-sun { width: 46px; height: 46px; }
.sky-moon .sky-art .sky-sun {
  width: 22px; height: 22px;
  background: radial-gradient(circle at 38% 40%, #fffdf6 0, #f2eedd 45%, #d9d5c3 100%);
  box-shadow: 0 0 14px 4px rgba(220, 230, 255, .45), 0 0 70px 24px rgba(150, 175, 240, .18);
}
.sky-art .sky-haze { left: 0; right: 0; top: calc(var(--hz) - 14%); height: 16%; background: linear-gradient(180deg, transparent, var(--s4)); opacity: .65; }
.sky-art .sky-sea { left: 0; right: 0; top: var(--hz); bottom: 0; background: linear-gradient(180deg, var(--sea0), var(--sea1) 40%, var(--sea2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.sky-art .sky-stars { left: 0; top: 0; right: 0; height: calc(var(--hz) - 4%); background-color: transparent; background-repeat: no-repeat; opacity: 0; }
[data-phase="night"] .sky-art .sky-stars { opacity: 1; }
.sky-art .sky-shim { height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--shim), transparent); opacity: 0; animation: sky-shim 7s ease-in-out infinite; }
@keyframes sky-shim { 0%, 100% { opacity: 0; transform: translateX(-14px); } 45% { opacity: .75; } 60% { opacity: .55; transform: translateX(16px); } }
.sky-art svg { position: absolute; display: block; overflow: visible; }
.sky-art .sky-jetty { left: -2%; top: calc(var(--hz) + 3%); width: min(46%, 260px); height: 14%; fill: var(--sil2); }
.sky-art .sky-palm { right: 2%; bottom: 8%; height: 78%; width: 30%; fill: var(--sil); transform: scaleX(-1); transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .sky-art .sky-shim { animation: none !important; } }


/* ===================== 10. HR Overview dashboard (Task 3) ===================== */
/* Sky band: page head left, staff on the books right, GM queue along the sea. */
.hero.sky-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 32px; min-height: 300px;
  padding: 40px 48px 28px; border-radius: var(--panel-r); background: var(--s0, #3c76b4); color: #fff; box-shadow: 0 24px 48px -32px rgba(20, 60, 100, .45); }
.hero.sky-hero::after { content: none; }
/* soft scrim behind the text so white stays readable on the pale horizon and at sunset */
.hero.sky-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 28, 52, .22) 0, rgba(8, 28, 52, 0) 42%, rgba(8, 28, 52, 0) 58%, rgba(8, 28, 52, .2) 100%); }
.sky-hero > :not(.sky-art) { position: relative; z-index: 1; }
/* band-specific scene placement: lower horizon (as the mockup), jetty mid-sea, palm on the right edge */
.hero.sky-hero[data-sky-scene] { --hz: 77% !important; }
.sky-hero .sky-art .sky-jetty { left: 63%; width: 220px; }
/* night: keep the moon in the open sky between the two text blocks */
.hero.sky-hero.sky-moon[data-sky-scene] { --sx: 54% !important; --sy: 18% !important; }
.sky-hero .sky-art .sky-palm { right: 0; bottom: 4%; width: 150px; height: 104%; }
.sky-hero, .sky-hero .hero-count, .sky-hero .hero-sub { text-shadow: 0 1px 14px rgba(8, 30, 60, .35), 0 1px 2px rgba(8, 30, 60, .25); }
.sky-hero .page-head { display: block; margin: 0; }
.sky-hero .page-head .eyebrow, .sky-hero .hero-label { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.sky-hero .page-head h1 { font-size: 64px; font-weight: 360; line-height: 1; letter-spacing: -.03em; margin: 12px 0; color: #fff; }
.sky-hero .page-head p { max-width: 460px; color: rgba(255, 255, 255, .95); }
.sky-hero .page-head .btn-row { margin-top: 22px; gap: 10px; }
.sky-hero .page-head .btn { text-shadow: none; }
.sky-hero .page-head .btn:not(.primary) { background: rgba(255, 255, 255, .9); color: var(--ink); }
.sky-hero .page-head .btn:not(.primary):hover { background: #fff; }
.sky-hero .hero-top { display: block; text-align: right; padding-right: 120px; }
.sky-hero .hero-count { font-size: 15px; color: rgba(255, 255, 255, .94); margin-top: 6px; }
.sky-hero .hero-amount { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; margin-top: 14px;
  font-family: var(--f-display), Georgia, serif; font-size: 64px; font-weight: 340; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.sky-hero .hero-amount .alt { display: inline; margin: 0; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: 0; color: #fff; }
.sky-hero .hero-sub { font-size: 12.5px; font-weight: 500; color: #fff; margin-top: 14px; }
.sky-hero .hero-sub b { color: #fff; font-weight: 700; }
.sky-hero .hero-gq { grid-column: 1 / -1; margin-top: 6px; }
.sky-hero .gq-pill { padding: 8px 16px; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink-2); font-size: 12.5px; text-shadow: none;
  box-shadow: 0 8px 20px -12px rgba(8, 30, 60, .5); }
.sky-hero .gq-pill svg { color: var(--coral); }
.sky-hero .gq-pill b { color: var(--ink); }
.sky-hero .gq-pill a { color: var(--sea-ink); font-weight: 600; }
.sky-hero .gq-pill .gq-go { color: var(--ink); }

/* Department panel: period tabs + period nav on one row, 8 px bar, compact legend */
.dash-depts { margin-top: 24px; padding: 24px 32px 26px; }
.dash-row1 { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.dash-row1 .toolbar { gap: 10px; }
.dash-depts .seg button { height: 32px; padding: 0 11px; }
.dash-depts .hero-period { margin-left: auto; display: flex; align-items: center; gap: 8px; text-align: left; white-space: nowrap; }
.dash-depts .hero-period .lbl { order: 0; margin-right: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dash-depts .hero-period .nav-arrows { display: contents; }
.dash-depts .hero-period #prev { order: 1; }
.dash-depts .hero-period .rng { order: 2; margin: 0; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dash-depts .hero-period #next { order: 3; }
.dash-depts .hero-period .nav-arrows button { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--well); color: var(--ink-2); font-size: 15px; cursor: pointer; }
.dash-depts .hero-period .nav-arrows button:hover { background: var(--well-2); color: var(--ink); }
.dash-depts .hero-bars { gap: 2px; height: 8px; margin: 24px 0 16px; border-radius: 4px; background: var(--well); }
.dash-depts .hero-bars span { min-width: 2px; }
.dash-depts .hero-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 28px; margin: 0; }
.dash-depts .hero-legend a { color: var(--ink-2); font-size: 12.5px; gap: 8px; white-space: nowrap; min-width: 0; }
.dash-depts .hero-legend a:hover { color: var(--ink); text-decoration: none; }
.dash-depts .hero-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dash-depts .hero-legend b { margin-left: auto; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Case tiles: one strip, only non-zero tiles tinted */
.status-cards.sky-panel { gap: 8px; padding: 8px; margin-top: 24px; }
.status-cards .scard { padding: 20px 20px 22px; border: 0; border-radius: 18px; box-shadow: none; background: transparent; }
.status-cards .scard::before { content: none; }
.status-cards .scard:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.status-cards .scard .t { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }
.status-cards .scard .n { margin: 14px 0 8px; line-height: 1; color: #a7b1b9; }
.status-cards .scard .hint { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.status-cards .scard.c-pending:not([data-n="0"]), .status-cards .scard.c-approved:not([data-n="0"]) { background: var(--tint-gold); }
.status-cards .scard.c-pending:not([data-n="0"]) .n, .status-cards .scard.c-approved:not([data-n="0"]) .n { color: var(--gold-ink); }
.status-cards .scard.c-pop:not([data-n="0"]) { background: var(--tint-sky); }
.status-cards .scard.c-pop:not([data-n="0"]) .n { color: #2f68a8; }
.status-cards .scard.c-suspended:not([data-n="0"]) { background: var(--tint-coral); }
.status-cards .scard.c-suspended:not([data-n="0"]) .n { color: #c43f2b; }
.status-cards .scard.c-paid:not([data-n="0"]) { background: var(--tint-sea); }
.status-cards .scard.c-paid:not([data-n="0"]) .n { color: var(--sea-ink); }
#onduty-dash > .onduty { margin-top: 24px; }

/* Time & attendance — today: one row of 7 equal figures, week bar, plain coloured numbers */
.att-dash.card { margin-top: 24px; }
.att-dash .card-head { padding: 28px 32px 0; border-bottom: 0; gap: 16px; }
.att-dash .card-head h2 { flex: none; white-space: nowrap; font-family: var(--f-display), Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.att-dash .card-head h2 svg { width: 22px; height: 22px; }
.att-dash .card-head .btn { height: 42px; padding: 0 18px; font-size: 15px; }
.att-dash .card-head .btn:last-child { background: var(--ink); color: #fff; }
.att-dash .card-head .btn:last-child:hover { background: var(--navy-2); }
.att-dash .att-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.15fr) minmax(0, 1.7fr); margin: 28px 32px 12px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.att-dash .att-stat { padding: 0 18px; border-right: 0; }
.att-dash .att-stat:first-child { padding-left: 0; }
.att-dash .att-stat + .att-stat { border-left: 1px solid var(--line); }
.att-dash .att-stat .n { line-height: 1; color: var(--ink); white-space: nowrap; }
.att-dash .att-stat .l { margin-top: 8px; }
.att-dash .att-stat.LATE .n { color: var(--gold-ink); }
.att-dash .att-stat.NOT_IN .n, .att-dash .att-stat.ABSENT .n { color: var(--coral); }
.att-dash .att-stat[data-n="0"] .n { color: #a7b1b9; }
.att-track { height: 4px; margin-top: 12px; border-radius: 4px; background: #ecebe8; overflow: hidden; }
.att-track span { display: block; height: 100%; border-radius: 4px; background: var(--sea-ink); }
.att-dash .table-wrap { padding: 0 32px 12px; }
.att-dash table.data td:first-child, .att-dash table.data th:first-child { padding-left: 0; }
.att-dash table.data td:last-child, .att-dash table.data th:last-child { padding-right: 0; }
.att-dash table.data th { text-transform: uppercase; }
.att-dash table.data td { padding: 15px 10px; }
.att-dash .att-bar { width: 72px; height: 4px; border: 0; border-radius: 4px; background: #ecebe8; margin-right: 12px; }
.att-dash .att-bar .on { background: var(--sea-ink); }
.att-dash .att-bar .ros { background: rgba(19, 167, 192, .22); }
.att-dash td.due-soon { color: var(--gold-ink); font-weight: 600; }
.att-dash td.due-over { color: var(--coral); font-weight: 600; }

@media (max-width: 1280px) {
  .hero.sky-hero { padding: 36px 36px 24px; gap: 8px 24px; }
  .sky-hero .hero-top { padding-right: 72px; }
  .sky-hero .hero-sub { max-width: 300px; margin-left: auto; }
  .sky-hero .sky-art .sky-palm { width: 120px; }
  .status-cards .scard .t { white-space: normal; }
  .att-dash .att-stat { padding: 0 12px; }
}
@media (max-width: 1100px) {
  .att-dash .att-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .att-dash .att-stat:nth-child(5) { padding-left: 0; border-left: 0; }
  .att-dash .att-week { grid-column: span 2; }
}
@media (max-width: 900px) {
  .hero.sky-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 22px; }
  .sky-hero .page-head h1 { font-size: 40px; }
  .sky-hero .hero-top { text-align: left; padding-right: 0; }
  .sky-hero .hero-amount { justify-content: flex-start; font-size: 40px; }
  .sky-hero .hero-sub { max-width: none; margin-left: 0; }
  .hero.sky-hero::before { background: linear-gradient(180deg, rgba(8, 28, 52, .1) 0, rgba(8, 28, 52, .26) 70%, rgba(8, 28, 52, .08) 100%); }
  .sky-hero .gq-pill { border-radius: 18px; }
  .dash-depts .hero-period { flex-wrap: wrap; white-space: normal; }
  .dash-depts .hero-period .rng { flex: 1 1 0; min-width: 0; text-align: center; }
  .dash-depts { padding: 18px 20px; }
  .dash-depts .hero-period { margin-left: 0; }
  .status-cards.sky-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-dash .card-head { padding: 20px 20px 0; }
  .att-dash .card-head h2 { white-space: normal; font-size: 22px; }
  .att-dash .att-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 20px 8px; }
  .att-dash .att-stat, .att-dash .att-stat + .att-stat { padding: 0 12px; border-left: 0; }
  .att-dash .att-week { grid-column: span 2; }
  .att-dash .table-wrap { padding: 0 20px 8px; }
}

/* ===================== 11. Inner pages (Task 4): sky strip, staff file, attendance, forms ===================== */
/* 11a. Sky strip. sky.js paints `.page-head > .grow` (or the staff file's `.ph-band`) and marks the head `.has-strip`.
   The head's own buttons/pills drop to a row under the strip, so they never sit on the sky. */
.page-head.has-strip { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; }
.page-head.has-strip > :not(.sky-strip) { align-self: flex-start; max-width: 100%; }
.sky-strip { min-width: 0; min-height: 148px; padding: 30px 40px 58px; border-radius: var(--panel-r); color: #fff; background: var(--s0, #3c76b4);
  box-shadow: 0 24px 48px -32px rgba(20, 60, 100, .45); text-shadow: 0 1px 12px rgba(8, 30, 60, .4), 0 1px 2px rgba(8, 30, 60, .35); }
.sky-strip[data-sky-scene] { --hz: calc(100% - 36px) !important; }
/* soft scrim on the text side so white stays readable on the pale horizon, at sunset and at night */
.sky-strip::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 28, 52, .3) 0, rgba(8, 28, 52, .16) 45%, rgba(8, 28, 52, 0) 78%); }
.sky-strip > :not(.sky-art) { position: relative; z-index: 1; }
/* strip sky: pale band kept thin just above the sea so the subtitle sits on colour */
.sky-strip .sky-art { background: linear-gradient(180deg, var(--s0) 0%, var(--s1) 46%, var(--s2) calc(var(--hz) - 10%), var(--s3) calc(var(--hz) - 3%), var(--s4) var(--hz),
  var(--sea0) var(--hz), var(--sea1) calc(var(--hz) + 10%), var(--sea2) 100%); }
.sky-strip .sky-art .sky-palm { display: none; }
.sky-strip .sky-art .sky-shim { top: calc(var(--hz) + 7px) !important; }
.sky-strip .sky-art .sky-shim:nth-of-type(7) { top: calc(var(--hz) + 20px) !important; }
.sky-strip .sky-art .sky-shim:nth-of-type(8) { top: calc(var(--hz) + 12px) !important; }
.sky-strip .sky-art .sky-shim:nth-of-type(9) { top: calc(var(--hz) + 26px) !important; }
.sky-strip .sky-art .sky-jetty { left: auto; right: 6%; width: 190px; top: calc(var(--hz) - 20px); height: 30px; }
.sky-strip .sky-art .sky-glow { width: 280px; }
/* sun low and to the right; sunset sits on the sea line; the moon high on the right */
.sky-strip[data-sky-scene]:not(.sky-moon) { --sx: 80% !important; --sy: calc(100% - 58px) !important; }
.sky-strip[data-sky-scene][data-phase="sunset"] { --sy: calc(100% - 42px) !important; }
.sky-strip.sky-moon[data-sky-scene] { --sx: 82% !important; --sy: 42px !important; }
.sky-strip .eyebrow { margin-bottom: 8px; color: rgba(255, 255, 255, .92); }
.sky-strip h1 { margin: 0; color: #fff; font-size: 32px; }
.sky-strip h1 a, .sky-strip p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-head .sky-strip p { max-width: min(72%, 1000px); margin-top: 8px; color: rgba(255, 255, 255, .96); }
.sky-strip b { color: #fff; }
.sky-strip .subtle { color: rgba(255, 255, 255, .82); }
@media print { .sky-strip { color: var(--ink); background: none; box-shadow: none; text-shadow: none; } .sky-strip .sky-art, .sky-strip::before { display: none; } .sky-strip h1, .sky-strip .eyebrow, .page-head .sky-strip p { color: var(--ink); } }

/* 11b. Staff file: sky band with photo + name, actions row under it */
.profile-head.card { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.profile-head .ph-band { display: flex; align-items: center; gap: 22px; padding: 22px 40px 52px; }
.ph-band .ph-photo .avatar.xl { width: 96px; height: 96px; border-radius: 50%; font-size: 32px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 12px 24px -12px rgba(8, 30, 60, .6); text-shadow: none; }
.ph-band .ph-cam { right: -2px; bottom: -2px; border-color: #fff; background: var(--ink); }
.ph-band .grow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; min-width: 0; }
.ph-band .grow > .eyebrow, .ph-band .grow > h1 { flex: 0 0 100%; }
.ph-band h1 { overflow-wrap: anywhere; }
.ph-band .ph-sub { margin-top: 8px; color: rgba(255, 255, 255, .95); }
.ph-band .ph-flags { margin-top: 8px; }
.ph-band .pill, .ph-band .tag { color: #fff; }
.ph-band .pill::before { background: #7fe3c8; }
.ph-band .pill.SUSPENDED::before, .ph-band .tag.red::before { background: #ff9b88; }
.ph-band .pill.gold::before, .ph-band .tag.gold::before { background: var(--sun-2); }
.profile-head .ph-actions { width: auto; margin: 18px 0 0; gap: 10px; }
.detail-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
.detail-grid.mt-16 { margin-top: 24px; }
.detail-grid > .stack:first-child { display: flex; flex-direction: column; gap: 24px; }
.detail-grid > .stack:first-child > * { margin-top: 0; }
.detail-grid > .stack > #att-card { order: -1; }
.detail-grid > aside.stack > * + * { margin-top: 24px; }
.detail-grid aside .card-head { padding: 24px 28px 6px; border-bottom: 0; }
.detail-grid aside .card-head .btn.ghost { color: var(--sea-ink); }
.detail-grid aside .card-pad { padding: 14px 28px 24px; }
.detail-grid aside .case-list li { padding: 12px 28px; }
.detail-grid aside .timeline { padding: 8px 28px 20px; }
/* time & attendance week strip */
.ts-card .card-head { padding: 24px 28px 16px; border-bottom: 0; gap: 12px; }
.ts-card .card-head h2 { flex: none; }
.ts-card .card-head .btn-row { gap: 12px; }
.ts-card .card-head .btn-row b { font-size: 15px; font-weight: 600; }
.ts-card .card-head [data-wk] { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 22px; }
.ts-card > .table-wrap { margin: 0 28px; padding: 6px; border-radius: 20px; background: var(--well); }
.ts-card table.timesheet.one { border-collapse: separate; border-spacing: 0; }
.ts-card table.timesheet.one th { padding: 14px 6px 6px; border: 0; background: transparent; text-align: center; text-transform: uppercase; color: var(--ink-3); }
.ts-card table.timesheet.one td.ts-c { min-width: 72px; height: auto; padding: 6px 6px 14px; border: 0; background: transparent; font-size: 12.5px; color: var(--ink-2); }
.ts-card table.timesheet.one td:first-child, .ts-card table.timesheet.one th:first-child { padding-left: 6px; }
.ts-card table.timesheet.one td:last-child, .ts-card table.timesheet.one th:last-child { padding-right: 6px; }
.ts-card table.timesheet.one th.today { background: #fff; color: var(--sea-ink); border-radius: 14px 14px 0 0; }
.ts-card table.timesheet.one:has(th.today:nth-child(1)) td:nth-child(1), .ts-card table.timesheet.one:has(th.today:nth-child(2)) td:nth-child(2),
.ts-card table.timesheet.one:has(th.today:nth-child(3)) td:nth-child(3), .ts-card table.timesheet.one:has(th.today:nth-child(4)) td:nth-child(4),
.ts-card table.timesheet.one:has(th.today:nth-child(5)) td:nth-child(5), .ts-card table.timesheet.one:has(th.today:nth-child(6)) td:nth-child(6),
.ts-card table.timesheet.one:has(th.today:nth-child(7)) td:nth-child(7) { background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 10px 18px -14px rgba(15, 31, 46, .35); }
.ts-card td.ts-c.ts-click:hover { background: rgba(255, 255, 255, .7); }
.ts-card .ts-h { font-size: 15px; color: var(--ink); }
.ts-card .ts-l { font-size: 12.5px; }
.ts-card .rtime, #tab:has(.att-stats) table.data .rtime { padding: 3px 8px; border: 0; border-radius: 8px; background: var(--tint-sea); color: var(--sea-ink); font-size: 12.5px; }
.ts-card .ts-sum { gap: 6px 28px; padding: 20px 28px 6px; border-top: 0; font-size: 15px; color: var(--ink-2); }
.ts-card .ts-sum b { color: var(--ink); }
.ts-card .ts-sum .due-over b { color: inherit; }
.ts-card > .card-pad.cell-sub { padding: 6px 28px 26px; }
.ts-card .ts-face { margin-top: 14px; padding: 16px 28px; border-top-color: var(--line); }
.ts-card .ts-hist { border-top-color: var(--line); }
.ts-card .ts-hist summary { padding: 16px 28px; font-size: 15px; }
/* clock-in set-up: checks in one row */
.setup-card .card-head { padding: 24px 28px 16px; border-bottom: 0; gap: 14px; }
.setup-card .card-head h2 { flex: none; }
/* done checks share one row with dividers; anything still to do gets its own full-width row with its hint */
.setup-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0 28px 24px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.setup-list li { flex: 1 1 0; min-width: 0; padding: 18px 16px; font-size: 15px; }
.setup-list li.ok:not(li.ok ~ li.ok) { padding-left: 0; }
.setup-list li.ok ~ li.ok { border-left: 1px solid var(--line); }
.setup-list li.todo { order: 1; flex-basis: 100%; padding-left: 0; border-top: 1px solid var(--line); }
.setup-list .cell-sub { display: block; margin-top: 4px; font-size: 12.5px; }
/* document folders as one panel */
.folders { gap: 0; overflow: hidden; border-radius: var(--panel-r); background: var(--surface); box-shadow: var(--sky-shadow); }
.folders > .folder.card { margin: 0; border-radius: 0; box-shadow: none; }
.folders > .folder + .folder { border-top: 1px solid var(--line); }
.folder .card-head { padding: 18px 28px; border-bottom: 0; gap: 14px; }
.folder .card-head h2 { flex: none; font-size: 15px; }
.folder .card-head .tag { color: var(--ink-3); }
.folder .card-head .tag::before { content: none; }
.folder .card-head [data-add] { margin-left: auto; }
.folder-ic, .folder[data-group] .folder-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--tint-sea); color: var(--sea-ink); }
.folder.empty-folder .folder-ic { background: var(--well); color: var(--ink-3); }
.folder .docs { padding: 0 28px 14px 78px; }
.folder.empty-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 18px 28px; opacity: 1; }
.folder.empty-folder > .card-head { display: contents; }
.folder.empty-folder > .card-pad { order: 1; padding: 0; font-size: 15px; color: var(--ink-3); }
.folder.empty-folder [data-add] { order: 2; margin-left: auto; }
.folder:not(.empty-folder) > .card-pad.subtle { padding: 0 28px 20px 78px; }

/* grids of cards: no stacked-card offset inside a grid row (Settings, Account, Import) */
.grid > .card + .card { margin-top: 0; }

/* 11c. Attendance: tabs, Today board as one panel, Approvals */
.page-head.has-strip + .tabs-line { margin-bottom: 24px; }
#tab > .card:first-child:has(> .att-stats) { padding: 22px 28px 0; border-radius: var(--panel-r) var(--panel-r) 0 0; clip-path: inset(-40px -40px 0 -40px); }
#tab > .card:first-child:has(> .att-stats) + .card { margin-top: 0; border-radius: 0 0 var(--panel-r) var(--panel-r); clip-path: inset(0 -40px -40px -40px); }
#tab > .card:first-child > .toolbar { padding: 0 0 20px; border-bottom: 1px solid var(--line); }
#tab > .card:first-child > .toolbar .btn-row { gap: 8px; }
#tab > .card:first-child > .toolbar #pv, #tab > .card:first-child > .toolbar #nx { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 22px; }
#tab > .card:first-child > .toolbar .input.sm { min-height: 42px; font-size: 15px; }
#tab .att-stats { grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); }
#tab .att-stat { padding: 0 14px; border: 0; }
#tab .att-stat:first-child { padding-left: 0; }
#tab .att-stat + .att-stat { border-left: 1px solid var(--line); }
#tab .att-stat .n { color: var(--ink); line-height: 1; }
#tab .att-stat .l { margin-top: 8px; }
#tab .att-stat.IN .n { color: var(--sea-ink); }
#tab .att-stat.NOT_IN .n, #tab .att-stat.ABSENT .n { color: var(--coral); }
#tab .att-stat.LATE .n { color: var(--gold-ink); }
#tab:has(.att-stats) table.data th { text-transform: uppercase; }
#tab:has(.att-stats) table.data td { padding-top: 16px; padding-bottom: 16px; }
/* approvals: summary bar, waiting cards (two across), then the no-clock-in list */
#tab:has(> .ap-list) { display: flex; flex-direction: column; gap: 24px; }
#tab:has(> .ap-list) > * { margin: 0; }
#tab:has(> .ap-list) > .bulk-bar { order: 0; }
#tab:has(> .ap-list) > .ap-list { order: 1; }
#tab:has(> .ap-list) > .card:not(.bulk-bar) { order: 2; }
.bulk-bar .card-pad { flex-wrap: wrap; padding: 24px 28px; gap: 16px; }
.bulk-bar .card-pad > .grow { flex: 1 1 260px; }
.bulk-bar .card-pad b { font-size: 15px; }
.bulk-bar .card-pad .cell-sub { margin-top: 4px; color: var(--ink-2); }
.bulk-bar .btn.primary, .ap .btn.primary { color: #fff; background: var(--sea-ink); box-shadow: 0 10px 20px -12px rgba(10, 110, 134, .8); }
.bulk-bar .btn.primary:hover, .ap .btn.primary:hover { background: #085a6e; }
.ap-list { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.ap .card-pad { padding: 26px 28px; }
.ap-top { gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ap-top b { font-size: 15px; }
.ap-when { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.ap .kv { grid-template-columns: 150px minmax(0, 1fr); gap: 14px 16px; }
.ap .btn-row.mt-8 { margin-top: 22px; }
#tab .card-head h2 .tab-count:not(:empty) { margin-left: 6px; background: transparent; color: var(--ink-3); }
#tab .card:has([data-abs], #ab-all) .card-head { padding: 24px 28px 8px; border-bottom: 0; }
#tab .card:has([data-abs], #ab-all) .card-head h2 { display: flex; align-items: center; gap: 8px; }
#tab .card:has([data-abs], #ab-all) .card-head h2 svg { color: var(--coral); }
#tab #ab-all { color: var(--ink); background: var(--well); box-shadow: none; }
#tab #ab-all:hover { background: var(--well-2); }
#tab .card-head + .card-pad.cell-sub { padding: 6px 28px 18px; font-size: 15px; color: var(--ink-2); }
#tab .card-head + .card-pad.cell-sub b { color: var(--ink); }
#tab table.data td .btn.sm[data-fi], #tab table.data td .btn.sm[data-ns], #tab table.data td .btn.sm[data-abs], #tab table.data td .btn.sm[data-exc] { padding: 0 10px; background: transparent; }
#tab table.data td .btn.sm[data-fi] { color: var(--sea-ink); }
#tab table.data td .btn.sm[data-fi]:hover, #tab table.data td .btn.sm[data-exc]:hover { background: var(--well); }
#tab table.data td .btn.sm[data-ns]:hover, #tab table.data td .btn.sm[data-abs]:hover { background: var(--tint-coral); }

/* 11d. Forms & letters: one panel of groups (label left, forms in two columns), signature + payroll side by side */
#view:has(> .form-cards) { display: grid; grid-template-columns: 200px minmax(0, .8fr) minmax(0, 1.6fr); column-gap: 0; align-content: start; }
#view:has(> .form-cards) > * { grid-column: 1 / -1; min-width: 0; }
#view:has(> .form-cards) > .section-title { grid-column: 1; align-self: stretch; align-items: flex-start; gap: 14px; margin: 0; padding: 26px 12px 26px 28px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 32px; }
#view:has(> .form-cards) > .section-title svg { width: 32px; height: 32px; flex: none; padding: 7px; border-radius: 10px; background: var(--tint-sea); color: var(--sea-ink); }
#view:has(> .form-cards) > .form-cards { grid-column: 2 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 16px 28px 16px 0; background: var(--surface); }
#view:has(> .form-cards) > .form-cards + .section-title, #view:has(> .form-cards) > .form-cards + .section-title + .form-cards { border-top: 1px solid var(--line); }
#view:has(> .form-cards) > .page-head + .section-title { border-top-left-radius: var(--panel-r); }
#view:has(> .form-cards) > .page-head + .section-title + .form-cards { border-top-right-radius: var(--panel-r); }
#view:has(> .form-cards) > .section-title:has(+ .form-cards + :not(.section-title)) { border-bottom-left-radius: var(--panel-r); }
#view:has(> .form-cards) > .form-cards:has(+ :not(.section-title)) { border-bottom-right-radius: var(--panel-r); }
.form-cards .form-card { position: relative; gap: 4px; padding: 12px 40px 12px 14px; border: 0; border-radius: 14px; background: transparent; box-shadow: none; }
.form-cards .form-card:hover { background: var(--well); box-shadow: none; }
.form-cards .form-card b { font-size: 15px; font-weight: 600; }
.form-cards .form-card span { font-size: 12.5px; color: var(--ink-2); }
.form-cards .form-card::after { content: ""; position: absolute; top: 19px; right: 18px; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); }
#view:has(> .form-cards) > .card { margin-top: 24px; }
#view:has(> .form-cards) > .card:has(#sig-file):has(+ .card #pay-email) { grid-column: 1 / 3; margin-right: 12px; }
#view:has(> .form-cards) > .card:has(#sig-file) + .card:has(#pay-email) { grid-column: 3 / 4; margin-left: 12px; }
#view:has(> .form-cards) > .card .card-head { padding: 24px 28px 6px; border-bottom: 0; }
#view:has(> .form-cards) > .card .card-pad.stack { padding: 14px 28px 26px; color: var(--ink-2); }
#view:has(> .form-cards) > .card .card-pad.stack b { color: var(--ink); }
.card:has(#pay-email) .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card:has(#pay-email) #pay-name { max-width: 220px; }
.card:has(#pay-email) #pay-email { max-width: 280px; }
.card:has(#pay-email) .help { color: var(--ink-3); }
#view:has(> .form-cards) table.data td .btn.sm { padding: 0 10px; background: transparent; color: var(--ink-2); }
#view:has(> .form-cards) table.data td .btn.sm:hover { background: var(--well); color: var(--ink); }
#view:has(> .form-cards) table.data td a:not(.btn) { color: var(--sea-ink); font-weight: 600; }

@media (max-width: 1280px) {
  #tab .att-stat { padding: 0 10px; }
}
@media (max-width: 1100px) {
  #tab .att-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 20px; }
  #tab .att-stat:nth-child(6) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .sky-strip { min-height: 132px; padding: 22px 20px 66px; }
  .sky-strip .sky-art .sky-jetty { width: 130px; right: 2%; height: 24px; top: calc(var(--hz) - 16px); }
  .page-head .sky-strip p { max-width: none; }
  .sky-strip::before { background: linear-gradient(180deg, rgba(8, 28, 52, .22), rgba(8, 28, 52, .1) 80%, rgba(8, 28, 52, 0)); }
  .page-head.has-strip { margin-bottom: 20px; }
  .profile-head .ph-band { gap: 16px; padding: 20px 20px 66px; align-items: flex-start; }
  .ph-band .ph-photo .avatar.xl { width: 64px; height: 64px; font-size: 22px; }
  .profile-head .ph-actions { margin-top: 16px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .ts-card .card-head, .setup-card .card-head { padding: 18px 20px 12px; }
  .ts-card > .table-wrap { margin: 0 12px; overflow-x: auto; }
  .ts-card .ts-sum { padding: 16px 20px 4px; gap: 6px 18px; }
  .ts-card > .card-pad.cell-sub { padding: 6px 20px 20px; }
  .ts-card .ts-face, .ts-card .ts-hist summary { padding-left: 20px; padding-right: 20px; }
  .setup-list { flex-direction: column; margin: 0 20px 18px; }
  .setup-list li, .setup-list li.ok:not(li.ok ~ li.ok) { padding: 14px 0; }
  .setup-list li.ok ~ li.ok { border-left: 0; }
  .setup-list li + li, .setup-list li.todo { border-top: 1px solid var(--line); }
  .folder .card-head, .folder.empty-folder { padding: 16px 20px; }
  .folder .docs { padding: 0 12px 12px; }
  .folder .doc { flex-wrap: wrap; }
  .folder .doc-main { flex: 1 1 100%; }
  .folder .doc-acts { margin-left: auto; opacity: 1; }
  .folder:not(.empty-folder) > .card-pad.subtle { padding: 0 20px 18px; }
  .detail-grid aside .card-head { padding: 18px 20px 4px; }
  .detail-grid aside .card-pad { padding: 12px 20px 20px; }
  .detail-grid aside .case-list li { padding: 12px 20px; }
  .detail-grid aside .timeline { padding: 8px 20px 16px; }
  #tab > .card:first-child:has(> .att-stats) { padding: 18px 20px 0; }
  #tab .att-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0; }
  #tab .att-stat:nth-child(n) { padding: 0 10px; border-left: 0; }
  #tab .att-stat:nth-child(3n + 1) { padding-left: 0; }
  #tab .att-stat:nth-child(3n + 2), #tab .att-stat:nth-child(3n + 3) { border-left: 1px solid var(--line); }
  .ap-list { grid-template-columns: minmax(0, 1fr); }
  .ap .card-pad, .bulk-bar .card-pad { padding: 20px; }
  .ap .kv { grid-template-columns: 110px minmax(0, 1fr); }
  #tab .card:has([data-abs], #ab-all) .card-head { padding: 18px 20px 6px; flex-wrap: wrap; }
  #tab .card-head + .card-pad.cell-sub { padding: 6px 20px 16px; }
  #view:has(> .form-cards) { display: block; }
  #view:has(> .form-cards) > .section-title { padding: 20px 20px 4px; border-radius: 0; }
  #view:has(> .form-cards) > .form-cards { grid-template-columns: minmax(0, 1fr); padding: 4px 8px 12px; border-radius: 0; }
  #view:has(> .form-cards) > .form-cards + .section-title + .form-cards { border-top: 0; }
  #view:has(> .form-cards) > .page-head + .section-title { border-radius: var(--panel-r) var(--panel-r) 0 0; }
  #view:has(> .form-cards) > .form-cards:has(+ :not(.section-title)) { border-radius: 0 0 var(--panel-r) var(--panel-r); }
  #view:has(> .form-cards) > .card:has(#sig-file):has(+ .card #pay-email), #view:has(> .form-cards) > .card:has(#sig-file) + .card:has(#pay-email) { margin-left: 0; margin-right: 0; }
  #view:has(> .form-cards) > .card .card-head { padding: 18px 20px 4px; }
  #view:has(> .form-cards) > .card .card-pad.stack { padding: 12px 20px 20px; }
  .card:has(#pay-email) #pay-name, .card:has(#pay-email) #pay-email { max-width: none; }
}

/* ===================== 12. Phone clock-in home (Task 5) ===================== */
/* Shift arc (sky.js paintArc): thin line, brighter elapsed part, teal trail from clock-in to now, "now" dot at sunset/night. */
.sky-art .sky-arc { left: 0; top: 0; width: 100%; height: 100%; fill: none; }
.sky-arc path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sky-arc .sky-arc-base { stroke: rgba(255, 255, 255, .34); stroke-width: 1.25px; }
.sky-arc .sky-arc-done { stroke: rgba(255, 255, 255, .75); stroke-width: 1.5px; }
.sky-arc .sky-arc-trail { stroke: #7ff0e2; stroke-width: 2.5px; }
.sky-art .sky-now { display: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; left: var(--nx); top: var(--ny); transform: translate(-50%, -50%); }
.sky-art .sky-now.on { display: block; }

/* Layout: sky scene on top (header, date, HH:MM, shift line), sheet below (status + location card, roster, pill, recent). */
.clock-app.clk-home {
  --clk-sheet: #fbfaf8; --clk-card: #f0f2f2; --clk-ink: var(--ink); --clk-ink-2: var(--ink-2); --clk-teal: var(--sea-ink);
  --clk-gold: var(--gold-ink); --clk-alert: #b23a26; --clk-line: rgba(15, 31, 46, .07); --clk-today: rgba(19, 167, 192, .09);
  max-width: 480px; padding: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--clk-sheet); color: var(--clk-ink);
}
.clock-app.clk-home[data-phase="night"] {
  --clk-sheet: #0d1830; --clk-card: #15233f; --clk-ink: #e8edf6; --clk-ink-2: #a8b6cb; --clk-teal: #6fe0d4;
  --clk-gold: #f3c97a; --clk-alert: #ff9c8a; --clk-line: rgba(255, 255, 255, .07); --clk-today: rgba(47, 208, 194, .12);
}
.clk-sky { flex: none; height: clamp(300px, 44vh, 400px); padding: 16px 16px 0; color: #fff; }
/* soft scrim behind the clock so white text holds on the pale horizon and at sunset */
.clk-sky::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 40% at 50% 42%, rgba(8, 24, 48, .2), transparent 72%), linear-gradient(180deg, rgba(8, 24, 48, .18), transparent 30%); }
.clk-sky > .clk-top, .clk-sky > .hero-clock, .clk-sky > .clk-arc-lab { position: relative; z-index: 1; }
.clk-sky .clk-top { padding: 4px 0 0; text-shadow: 0 1px 8px rgba(10, 30, 60, .3); }
.clk-sky .clk-top .avatar { width: 48px; height: 48px; font-size: 16px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .2); }
.clk-sky .clk-top .nm { font-size: 16px; font-weight: 600; color: #fff; }
.clk-sky .clk-top .cell-sub { font-size: 15px; color: rgba(255, 255, 255, .92); }
.clk-sky .clk-top .bell { width: 48px; height: 48px; color: #fff; background: rgba(255, 255, 255, .16); }
.clk-sky .clk-top .bell:hover { background: rgba(255, 255, 255, .26); }
.clk-home .hero-clock { margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(10, 30, 70, .3); }
.clk-home .clk-date { font-size: 16px; font-weight: 500; color: #fff; }
.clk-home .clk-time { margin: 2px 0 0; font-family: var(--f-display), Georgia, serif; font-weight: 330; font-size: min(100px, 27vw); line-height: 1; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.clk-home .clk-time .s { margin-left: 4px; font-family: var(--f-ui), system-ui, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 0; opacity: .75; }
.clk-home .clk-shift { margin-top: 10px; gap: 8px; font-size: 16px; font-weight: 500; color: #fff; }
.clk-home .clk-shift b { font-weight: 600; }
.clk-home .clk-shift .shift-chip { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.clk-home .clk-shift .cell-sub { font-size: 15px; color: rgba(255, 255, 255, .9); }
.clk-home .clk-shift .tag { font-size: 16px; font-weight: 600; color: #fff; }
.clk-home .clk-shift .tag::before { width: 9px; height: 9px; background: rgba(255, 255, 255, .85); }
.clk-home .clk-shift .tag.gold::before { background: var(--sun-2); }
.clk-arc-lab { position: absolute !important; top: calc(var(--hz) + 6px); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(10, 30, 60, .35); transform: translateX(-50%); }
.clk-arc-lab.start { left: 8%; }
.clk-arc-lab.end { left: 92%; }

.clk-sheet { position: relative; z-index: 1; flex: 1; margin-top: -28px; padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; background: var(--clk-sheet); color: var(--clk-ink); box-shadow: 0 -12px 32px -16px rgba(10, 30, 60, .3); }
.clk-home .clk-card { margin: 0 0 12px; padding: 18px 18px 16px; border: 0; border-radius: 20px; background: var(--clk-card); box-shadow: none; color: var(--clk-ink); }
.clk-home .clk-card .cell-sub { color: var(--clk-ink-2); }
.clk-home .presence-card .loc, .clk-home .clk-card:not(.clk-main) > .loc { margin: 0; color: var(--ink); }
.clk-home .clk-card:not(.clk-main) > .loc .cell-sub { color: var(--ink-2); }

/* status: dot + one big line, "Since …" in teal under it */
.clk-home .clk-status { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; border-radius: 0; background: none; text-align: left; }
.clk-home .clk-status b { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.clk-home .clk-status .cell-sub { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--clk-ink-2); }
.clk-home .clk-status.pending .cell-sub { color: var(--clk-gold); }
.clk-dot { flex: none; width: 10px; height: 10px; margin-top: 9px; border-radius: 50%; background: var(--sun-1); box-shadow: 0 0 0 3px rgba(246, 180, 74, .25); }
.clk-status.in .clk-dot { background: var(--sea); box-shadow: 0 0 0 3px rgba(19, 167, 192, .22); }
.clk-status.pending .clk-dot { background: var(--sun-1); box-shadow: 0 0 0 3px rgba(143, 84, 16, .25); }
.clk-status.done .clk-dot { background: var(--sea); box-shadow: 0 0 0 3px rgba(19, 167, 192, .28); }
.clk-home .clk-status .clk-done-msg { margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.4; opacity: .85; }
.clk-loc-done { display: none; }

/* location row inside the card: icon · text · Refresh (48px tap area) */
.clk-main .loc { margin: 12px 0 0; padding: 0; gap: 10px; align-items: flex-start; border: 0; border-radius: 0; background: none; font-size: 16px; color: var(--clk-ink); }
.clk-main .loc > svg { width: 20px; height: 20px; margin-top: 1px; color: var(--clk-teal); }
.clk-main .loc b { font-weight: 500; }
.clk-main .loc .cell-sub { margin-top: 2px; font-size: 15px; color: var(--clk-ink-2); }
.clk-main .loc.warn, .clk-main .loc.bad { padding: 12px; border-radius: var(--ctl-r); color: var(--ink); }
.clk-main .loc.warn { background: var(--tint-gold); }
.clk-main .loc.bad { background: var(--tint-coral); }
.clk-main .loc.warn .cell-sub, .clk-main .loc.bad .cell-sub { color: var(--ink-2); }
.clk-main .loc.warn > svg { color: var(--gold-ink); }
.clk-main .loc.bad > svg { color: #b23a26; }
.clk-main .loc.out-area { padding: 14px; border: 2px solid #b3261e; background: #fdecea; }
.clk-main .loc .link-btn { display: inline-flex; align-items: center; min-height: 48px; vertical-align: middle; color: var(--sea-ink); font-weight: 600; }
.clk-main .loc > .link-btn { flex: none; gap: 6px; margin: -13px -10px -13px auto; padding: 0 10px; font-size: 16px; font-weight: 500; color: var(--clk-teal); }
.clk-main .loc.warn > .link-btn, .clk-main .loc.bad > .link-btn { color: var(--sea-ink); }
.clk-main .loc > .link-btn::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.clk-main .howto { font-size: 15px; }
.clk-main .howto summary { display: flex; align-items: center; min-height: 48px; padding: 0; color: var(--sea-ink); list-style: none; }
.clk-main .howto summary::-webkit-details-marker { display: none; }
.clk-main .howto summary::before { content: "\25B8"; margin-right: 6px; }
.clk-main .howto[open] summary::before { content: "\25BE"; }
.clk-home .clk-share { display: block; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--clk-line); font-size: 15px; line-height: 1.4; color: var(--clk-ink-2); text-align: left; }
.clk-main .bio-note { justify-content: flex-start; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 15px; line-height: 1.4; text-align: left; color: var(--clk-teal); }
.clk-main .bio-note svg { margin-top: 2px; }
.clk-main .bio-note.warn { color: var(--clk-alert); text-align: left; }

/* roster: tight rows, date column, today as a soft teal row; colour squares hidden (hooks kept) */
.clk-home .clk-roster, .clk-home .clk-recent { margin: 20px 2px 0; }
.clk-home .clk-roster h3, .clk-home .clk-recent h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--clk-ink); }
.clk-roster .clk-list li { justify-content: flex-start; gap: 0; min-height: 36px; padding: 6px 0; border-bottom: 0; border-top: 1px solid var(--clk-line); font-size: 16px; font-weight: 400; color: var(--clk-ink-2); }
.clk-roster .clk-list li:first-child { border-top: 0; }
.clk-roster .clk-list li > span:first-child { flex: none; width: 108px; font-weight: 500; color: var(--clk-ink); }
.clk-roster .clk-list li > span:last-child { flex: 1; justify-content: flex-start; text-align: left; font-variant-numeric: tabular-nums; }
.clk-roster .shift-chip { display: none; }
.clk-roster .subtle { color: inherit; }
.clk-roster .clk-list li.today { margin: 0 -10px; padding: 6px 10px; border-radius: 10px; border-top-color: transparent; background: var(--clk-today); }
.clk-roster .clk-list li.today + li { border-top-color: transparent; }
.clk-roster .clk-list li.today > span { font-weight: 600; color: var(--clk-teal); }

/* primary action: gold "Clock in" / dark "Clock out" pill, kept in the thumb zone above the tabs */
.clk-cta { position: sticky; z-index: 2; bottom: calc(68px + env(safe-area-inset-bottom)); margin: 12px -16px 0; padding: 12px 16px 8px; background: linear-gradient(180deg, transparent, var(--clk-sheet) 16px); }
/* while an on-site check or the notifications card is showing, the pill stays in the flow so it never covers their buttons */
.clk-cta.clk-cta-flow { position: static; }
.clk-home .clk-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; padding: 0 24px; border-radius: 999px; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.clk-home .clk-btn.in { color: #3a1e04; background: linear-gradient(180deg, var(--sun-2), var(--sun-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -12px rgba(220, 140, 40, .7); }
/* GM (18 Oct 2026): clock out is a red button (white text 5.1:1), day and night. */
.clk-home .clk-btn.out { color: #fff; background: linear-gradient(180deg, #d4482f, #c43f2b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(150, 40, 20, .7); }
.clk-home[data-phase="night"] .clk-btn.out { color: #fff; background: linear-gradient(180deg, #d4482f, #c43f2b); }
.clk-home .clk-btn.in .spinner { border-color: rgba(58, 30, 4, .3); border-top-color: #3a1e04; }
.clk-home #clk-go::after { content: ""; flex: none; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* done state: the button is off, so no "go" arrow */
.clk-home #clk-go.done::after { content: none; display: none; }
.clk-home .clk-btn:disabled { opacity: .55; }
.clk-home #clk-hint { margin-top: 8px; font-size: 15px; color: var(--clk-ink-2); }
.clk-home #clk-hint:empty { display: none; }
.clk-home[data-phase="night"] .out-area-hint { color: var(--clk-alert); }

/* recent + footnote: quiet rows */
.clk-recent .clk-list li { min-height: 36px; padding: 8px 0; border-bottom-color: var(--clk-line); font-size: 15px; color: var(--clk-ink-2); }
.clk-recent .clk-list li > span:first-child { color: var(--clk-ink); font-weight: 500; }
.clk-recent .cell-sub, .clk-recent .subtle { color: var(--clk-ink-2); }
.clk-home .tag { font-size: 13px; }
.clk-home[data-phase="night"] .tag.teal, .clk-home[data-phase="night"] .tag.green { color: var(--clk-teal); }
.clk-home[data-phase="night"] .tag.gold { color: var(--clk-gold); }
.clk-home[data-phase="night"] .tag.red { color: var(--clk-alert); }
.clk-home .clk-foot { margin: 20px 8px 0; font-size: 15px; color: var(--clk-ink-2); }

/* bottom tabs follow the sheet colour; active tab teal, no background */
.clk-home .clk-nav { background: var(--clk-sheet); border-top-color: var(--clk-line); }
.clk-home .clk-nav button { color: var(--clk-ink-2); }
.clk-home .clk-nav button.on { color: var(--clk-teal); background: transparent; }

/* phone tap targets >= 48px (carry-over from Task 1): small buttons in the staff app, modal close and modal buttons on touch */
.clock-app .btn.sm { height: auto; min-height: 48px; }
@media (pointer: coarse), (max-width: 600px) {
  .modal-close { width: 48px; height: 48px; }
  .modal .btn, .modal .chip { min-height: 48px; }
}

/* ===================== 13. Phone sign-in, My leave, My files, face check (Task 6) ===================== */
/* Icons as CSS masks (decorative, no markup change) */
.clock-app { --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ic-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z'/%3E%3Cpath d='M5 19.5A1.5 1.5 0 0 0 6.5 21H19v-3'/%3E%3C/svg%3E"); }

/* 13a. Sign-in: sky scene with the Ello HR wordmark, sheet with the form */
.clock-app.clk-signin {
  --sl-sheet: #fbfaf8; --sl-ink: var(--ink); --sl-ink-2: var(--ink-2); --sl-field: #fff; --sl-fline: rgba(15, 31, 46, .16); --sl-link: var(--sea-ink); --sl-ring: var(--sea);
  max-width: 480px; padding: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--sl-sheet); color: var(--sl-ink);
}
.clock-app.clk-signin[data-phase="night"] { --sl-sheet: #0d1830; --sl-ink: #e8edf6; --sl-ink-2: #a8b6cb; --sl-field: #15233f; --sl-fline: rgba(255, 255, 255, .14); --sl-link: #6fe0d4; --sl-ring: #2fd0c2; }
.sl-sky { flex: none; height: clamp(300px, 44vh, 360px); color: #fff; }
.sl-sky .sky-art .sky-haze { top: calc(var(--hz) - 8%); height: 9%; }
/* scrim behind the wordmark + softer sun glow: white brand text stays >= 4.5:1 on the pale day sky */
.sl-sky::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 24, 48, .28) 0, rgba(8, 24, 48, 0) 40%); }
.sl-sky .clk-brand::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(50% + 12px); width: min(160%, 560px); height: calc(100% + 130px); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(8, 24, 48, .36), rgba(8, 24, 48, .34) 62%, rgba(8, 24, 48, 0)); }
/* light phases: a deeper blue upper sky (pale warm band kept just above the sea) so the wordmark reads without a heavy scrim */
.sl-sky[data-phase="dawn"], .sl-sky[data-phase="morning"], .sl-sky[data-phase="day"] { --s1: #2c69a8; --s2: #3874b0; }
.sl-sky .sky-art .sky-glow { opacity: .5; }
.sl-sky[data-phase="night"] .clk-brand::before { display: none; } /* the night sky is dark enough; keeps the moon bright */
/* sign-in only: the sun keeps its left-right time position but never rises behind the wordmark (stays in the low sky) */
.sl-sky .sky-art .sky-sun, .sl-sky .sky-art .sky-glow { top: max(var(--sy), 74%); }
.sl-sky.sky-moon .sky-art .sky-sun, .sl-sky.sky-moon .sky-art .sky-glow { top: var(--sy); }
.sl-sky .clk-brand { position: relative; z-index: 1; display: block; padding-top: clamp(36px, 7vh, 64px); text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(10, 30, 70, .3); }
.sl-sky .clk-brand .brand-mark { display: none; }
.sl-sky .brand-name { color: #fff; font-family: "Jost", var(--f-ui), sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .42em; line-height: 1.2; white-space: normal; }
.sl-sky .brand-name > span { display: block; padding-left: .42em; }
.sl-sky .wm-main { font-size: 44px; font-weight: 600; letter-spacing: -.01em; line-height: 1; padding-left: 0 !important; }
.sl-sky .wm-hr { font-weight: 300; margin-left: .12em; }
.sl-sky .wm-main::after { content: ""; display: block; width: 96px; height: 1.5px; margin: 12px auto 10px; background: rgba(255, 255, 255, .88); }
.sl-sky .wm-co { margin-top: 4px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.sl-sky .brand-sub { margin-top: 16px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; }

.clk-login.sl-sheet { position: relative; z-index: 1; flex: 1; margin-top: -28px; padding: 28px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; background: var(--sl-sheet); color: var(--sl-ink); box-shadow: 0 -12px 32px -16px rgba(10, 30, 60, .3); }
.sl-sheet h1 { margin: 0 0 6px; font-size: 32px; color: var(--sl-ink); }
.sl-sheet .subtle, .sl-sheet .cell-sub { font-size: 16px; line-height: 1.45; color: var(--sl-ink-2); }
.sl-sheet .cell-sub.mt-24 { margin-top: 20px; font-size: 15px; }
.sl-sheet #sl-msg .alert { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border: 0; border-radius: var(--ctl-r); font-size: 16px; font-weight: 500; line-height: 1.4; }
.sl-sheet #sl-msg .alert.err { background: rgba(226, 85, 63, .1); color: #9a2e1f; }
.clk-signin[data-phase="night"] #sl-msg .alert.err { background: rgba(240, 138, 108, .14); color: #ffb39c; }
.clk-signin[data-phase="night"] #sl-msg .alert.info { background: rgba(111, 160, 224, .16); color: #cfe0f6; }
.sl-sheet .field { margin-top: 18px; }
.sl-sheet .field > label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--sl-ink); }
.sl-sheet .input.lg { height: 56px; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--sl-fline); border-radius: var(--ctl-r); background-color: var(--sl-field); color: var(--sl-ink); font-size: 16px; }
.sl-sheet .input.pin { font-size: 22px; letter-spacing: .4em; }
.sl-sheet .input::placeholder { color: var(--sl-ink-2); opacity: .8; }
.sl-sheet .input:focus { border-color: var(--sl-ring); box-shadow: 0 0 0 4px rgba(19, 167, 192, .16); background-color: var(--sl-field); }
.sl-sheet #sl-go { height: 60px; margin-top: 20px; border-radius: 999px; font-size: 22px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -12px rgba(220, 140, 40, .7); }
.sl-sheet #sl-go .spinner { border-color: rgba(58, 30, 4, .3); border-top-color: #3a1e04; }
.sl-sheet a[href="#/login"] { display: inline-flex; align-items: center; min-height: 48px; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--sl-link); }

/* 13b. Tab pages (My leave, My files): short sky band behind the staff header, sheet below (reuses the clock-home sheet + night tokens) */
.clk-tab .clk-sky.clk-band { height: 152px; padding: 16px 16px 0; }
.clk-band .sky-art .sky-palm, .clk-band .sky-art .sky-jetty, .clk-band .sky-art .sky-arc { display: none; }
/* the header sits low in this short band: a deeper scrim + softer sun glow keep the white name/sub-line >= 4.5:1 */
.clk-tab .clk-sky.clk-band::before { background: linear-gradient(180deg, rgba(8, 24, 48, .5) 0, rgba(8, 24, 48, .56) 44%, rgba(8, 24, 48, 0) 86%); }
.clk-tab .clk-band .clk-top .cell-sub { color: #fff; }
.clk-band .sky-art .sky-glow { opacity: .55; }
.clk-tab .clk-sheet { padding-top: 26px; }
.clk-tab .loading { padding: 40px 0; }
.clk-tab .clk-sheet h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--clk-ink); }
.clk-tab .clk-sheet .cell-sub, .clk-tab .clk-sheet .subtle { font-size: 15px; color: var(--clk-ink-2); }
.clk-tab .clk-btn { height: 60px; margin-top: 16px; text-decoration: none !important; }
.clk-tab .clk-btn svg { width: 22px; height: 22px; flex: none; }
.clk-tab .tag { font-size: 13px; }
.clk-tab .tag.red { color: var(--clk-alert); }
.clk-tab .tag.teal, .clk-tab .tag.green { color: var(--clk-teal); }
.clk-tab .tag.gold { color: var(--clk-gold); }
.clk-tab .tag:not(.red):not(.teal):not(.green):not(.gold) { color: var(--clk-ink-2); }
.clk-tab .link-btn { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--clk-teal); }
.clk-tab .clk-list li { border-bottom-color: var(--clk-line); color: var(--clk-ink-2); }
.clk-tab .clk-list li b { color: var(--clk-ink); font-weight: 600; }
.clk-tab .shift-chip { display: none; }

/* My leave */
.lv-ask h3 { font-size: 22px !important; letter-spacing: -.01em; }
.lv-ask .cell-sub { font-size: 16px !important; line-height: 1.45; }
.lv-sec { margin-top: 28px; }
.clk-tab .lv-balcard { padding: 16px 18px 14px; }
.lv-balcard .lv-bal { padding: 12px 0 14px; border-bottom: 0; border-top: 1px solid var(--clk-line); }
.lv-balcard .lv-bal:first-child { padding-top: 4px; border-top: 0; }
.lv-balcard .lv-bal-top { align-items: baseline; font-size: 16px; color: var(--clk-ink-2); }
.lv-balcard .lv-bal-top > b { font-weight: 600; color: var(--clk-ink); }
.lv-balcard .lv-bal-top span b { margin-right: 2px; font-family: var(--f-display), Georgia, serif; font-size: 22px; font-weight: 500; color: var(--clk-ink); font-variant-numeric: lining-nums tabular-nums; }
.lv-balcard .lv-bar { height: 4px; margin: 10px 0 0; border-radius: 4px; background: var(--clk-line); }
.lv-balcard .lv-bar i { border-radius: 4px; background: var(--sea) !important; } /* one progress style (type colours stay on the desktop) */
.lv-balcard .lv-bal .cell-sub { margin-top: 8px; }
.lv-balcard .lv-foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--clk-line); }
.lv-list li { align-items: flex-start; min-height: 48px; padding: 12px 0; font-size: 16px; }
.lv-list li:first-child { padding-top: 4px; }
.lv-list li.subtle { padding: 4px 0; font-size: 15px; }
.lv-list li > span:first-child { flex: 1; min-width: 0; }
.lv-list li > span:last-child { flex: none; font-size: 15px; }
.lv-list li .cell-sub { margin-top: 3px; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* Coming up: type · days on the first line, dates left and "Back …" right under it */
.lv-list li:not(.lv-req):not(.subtle) { flex-wrap: wrap; }
.lv-list li:not(.lv-req):not(.subtle) > span:first-child { flex-basis: 100%; color: var(--clk-ink); font-weight: 600; }
.lv-list li:not(.lv-req):not(.subtle) > span:last-child { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 3px; text-align: left; color: var(--clk-ink-2); font-variant-numeric: tabular-nums; }
.lv-list li:not(.lv-req):not(.subtle) > span:last-child .cell-sub { margin-top: 0; font-size: 15px; }
.lv-acts { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 0 -12px; }
.lv-acts .link-btn + .link-btn { margin-left: 0; }

/* My files */
.hb-main { padding: 20px 18px 18px; }
.hb-ic { display: grid; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: rgba(19, 167, 192, .12); }
.hb-ic::before { content: ""; width: 24px; height: 24px; margin: auto; background: var(--clk-teal); -webkit-mask: var(--ic-book) center / contain no-repeat; mask: var(--ic-book) center / contain no-repeat; }
.clk-tab .eyebrow { margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--clk-teal); }
.clk-tab .hb-title { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.hb-main > p { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--clk-ink); }
.hb-main > p.cell-sub { margin-top: 6px; font-variant-numeric: tabular-nums; }
.hb-main > p.cell-sub.mt-8 { margin-top: 12px; }
.clk-tab .hb-docs { margin: 28px 0 0; padding: 0; background: transparent; }
.hb-docs .clk-list li { position: relative; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; min-height: 48px; padding: 14px 0 14px 34px; font-size: 16px; border-bottom: 0; border-top: 1px solid var(--clk-line); }
.hb-docs .clk-list li:first-child { padding-top: 4px; border-top: 0; }
.hb-docs .clk-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 22px; height: 22px; background: var(--clk-ink-2); -webkit-mask: var(--ic-doc) center / contain no-repeat; mask: var(--ic-doc) center / contain no-repeat; }
.hb-docs .clk-list li:first-child::before { top: 5px; }
.hb-docs .clk-list li > span:first-child { flex: 1; min-width: 0; }
.hb-docs .clk-list li .cell-sub { margin-top: 3px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* loans: "View / download PDF" as a teal link under the text */
.hb-loans .clk-list li > span:last-child { flex-basis: 100%; justify-content: flex-start; text-align: left; }
.hb-loans .btn.sm { gap: 8px; margin: 0 0 -12px -12px; padding: 0 12px; background: transparent; box-shadow: none; font-size: 16px; font-weight: 500; color: var(--clk-teal); }
.hb-loans .btn.sm svg { width: 20px; height: 20px; }
/* policies: outline "Open" pill on the right */
.hb-pol .btn.sm { height: 48px; padding: 0 18px; border: 1.5px solid var(--clk-line); border-color: rgba(15, 31, 46, .16); background: transparent; font-size: 16px; color: var(--clk-ink); }
.clk-tab[data-phase="night"] .hb-pol .btn.sm { border-color: rgba(255, 255, 255, .2); }
.clk-tab[data-phase="night"] .hb-ic { background: rgba(47, 208, 194, .14); }

/* 13c. Staff-app modals on a phone: bottom sheet, roomy fields, gold primary pill, outline Cancel */
@media (max-width: 600px) {
  body:has(.clock-app) .modal-backdrop { place-items: end center; padding: 0; }
  body:has(.clock-app) .modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 32px 32px 0 0; background: #fbfaf8; }
  body:has(.clock-app) .modal-head { align-items: center; padding: 22px 22px 6px; }
  body:has(.clock-app) .modal-head h2 { font-family: var(--f-ui), system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
  body:has(.clock-app) .modal-close { margin-right: -6px; background: #f0f2f2; font-size: 22px; color: var(--ink-2); }
  body:has(.clock-app) .modal-body { padding: 8px 22px 8px; }
  body:has(.clock-app) .modal-foot { grid-template-columns: 1fr 1.55fr; padding: 16px 22px calc(24px + env(safe-area-inset-bottom)); }
  body:has(.clock-app) .modal-foot > :only-child { grid-column: 1 / -1; }
  body:has(.clock-app) .modal .field > label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
  body:has(.clock-app) .modal .field > label .cell-sub { font-size: 16px; font-weight: 500; color: var(--ink-3); }
  body:has(.clock-app) .modal .input { min-height: 56px; padding: 12px 16px; border: 1.5px solid rgba(15, 31, 46, .16); border-radius: var(--ctl-r); background-color: #fff; font-size: 16px; }
  body:has(.clock-app) .modal textarea.input { min-height: 84px; }
  body:has(.clock-app) .modal .input:focus { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(19, 167, 192, .16); }
  body:has(.clock-app) .modal .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  body:has(.clock-app) .modal .form-grid .input { width: 100%; min-width: 0; }
  body:has(.clock-app) .modal .leave-calc { padding: 13px 16px; border-radius: var(--ctl-r); background: rgba(19, 167, 192, .08); color: var(--sea-ink); font-size: 16px; line-height: 1.4; }
  body:has(.clock-app) .modal .leave-calc b { font-weight: 600; }
  body:has(.clock-app) .modal .leave-calc .due-over { color: #9a2e1f; }
  body:has(.clock-app) .modal-foot .btn { height: 56px; font-size: 16px; }
  body:has(.clock-app) .modal-foot .btn:not(.primary):not(.danger) { border: 1.5px solid rgba(15, 31, 46, .16); background: transparent; color: var(--ink); }
  body:has(.clock-app) .modal-foot .btn.primary svg { width: 20px; height: 20px; }
}

/* 13d. Face check (public/js/face.js classes): full-screen camera, oval white -> teal, instruction sheet, Cancel */
@media (max-width: 600px) {
  body .modal:has(.cam) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-height: none; overflow: hidden; border-radius: 0; background: #0a1422; animation: none; }
  .modal-backdrop:has(.cam) { padding: 0; background: #0a1422; }
  body .modal:has(.cam) .modal-head { position: absolute; z-index: 4; left: 0; right: 0; top: 0; align-items: center; padding: 20px 22px 40px; background: linear-gradient(180deg, rgba(10, 28, 52, .7), rgba(10, 28, 52, 0)); }
  body .modal:has(.cam) .modal-head h2 { font-size: 16px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
  body .modal:has(.cam) .modal-close { background: rgba(255, 255, 255, .18); color: #fff; }
  body .modal:has(.cam) .modal-body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .modal .cam { --ow: min(62vw, 260px); flex: 1; width: 100%; max-width: none; min-height: 0; margin: 0; aspect-ratio: auto; border-radius: 0; }
  .modal .cam-oval { top: 46%; width: var(--ow); height: calc(var(--ow) * 1.32); border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 0 0 999px rgba(6, 14, 26, .52); transition: border-color .2s, box-shadow .2s; }
  .modal .cam-oval.good { border-color: #2fd0c2; box-shadow: 0 0 0 999px rgba(6, 14, 26, .52), 0 0 24px 2px rgba(47, 208, 194, .45); }
  .modal .cam-dots { top: calc(46% + var(--ow) * .66 + 18px); bottom: auto; }
  .modal .cam-dots i.on { background: #2fd0c2; box-shadow: 0 0 0 4px rgba(47, 208, 194, .25); }
  body .modal:has(.cam) .cam-status { position: relative; z-index: 2; margin: -32px 0 0; padding: 26px 22px 0; border-radius: 32px 32px 0 0; background: #fbfaf8; color: var(--ink); text-align: left; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; min-height: calc(2.6em + 26px); }
  body .modal:has(.cam) .modal-body > p.cell-sub { margin: 0; padding: 6px 22px 0; background: #fbfaf8; text-align: left; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
  body .modal:has(.cam) .modal-foot { padding: 20px 22px calc(28px + env(safe-area-inset-bottom)); background: #fbfaf8; }
  body .modal:has(.cam) .modal-foot .btn { height: 56px; border: 1.5px solid rgba(15, 31, 46, .16); background: transparent; color: var(--ink); font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .modal .cam-oval { transition: none; } }

/* ===================== 8. Responsive ===================== */
@media (max-width: 1200px) { .topbar, .content { padding-left: 28px; padding-right: 28px; } }
@media (max-width: 900px) {
  .sidebar { padding-top: 20px; }
  .topbar { padding: 6px 16px 0; height: 60px; }
  .content { padding: 16px 16px 56px; }
  .card-head { padding: 18px 20px 12px; }
  .card-pad, .form-section { padding: 18px 20px; }
  table.data td:first-child, table.data th:first-child { padding-left: 20px; }
  table.data td:last-child, table.data th:last-child { padding-right: 20px; }
  .seg, .tabs-line { border-radius: 20px; }
}
@media print {
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ===================== 14. Every other page inherits cleanly (Task 7) ===================== */
/* card grids: no stacked-card offset */
.dept-grid > .card, .dept-grid > .card + .card { margin-top: 0; }
/* duty roster: department rows were a solid navy block, now a soft sea tint */
tr.rgroup td { background: var(--tint-sea); color: var(--sea-ink); border-top: 1px solid var(--line-2); }
tr.rgroup .cell-sub { color: var(--ink-2); }
@media print { tr.rgroup td { background: #e6f4f7; color: #0A6E86; } }

/* phone staff-app sheet: the action row stays reachable at the bottom of the sheet */
@media (max-width: 600px) {
  body:has(.clock-app) .modal-foot { position: sticky; bottom: 0; z-index: 2; background: #fbfaf8; border-top: 1px solid var(--line); }
  /* no blur on any phone modal backdrop (cheap Android GPUs) */
  .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* filter rows (Audit Log): fields never push past the card */
.filters > .field { min-width: 0; }
.filters .input { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 16px; }
  .filters .q { grid-column: 1 / -1; }
}
@media (max-width: 600px) { table.data td:first-child { min-width: 120px; } }

/* ===================== upstream: Ask Ello button + 4-tab nav ===================== */
/* 4 equal tabs (also defined in app.css upstream; repeated so it holds regardless), one-line labels, >= 48px targets */
.clk-nav.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clk-nav.four button { min-width: 0; min-height: 52px; padding-left: 2px; padding-right: 2px; }
.clk-nav.four button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
/* header: name / staff-no line shrinks with an ellipsis so both round buttons always stay on screen */
.clk-top > .grow { min-width: 0; }
.clk-top .nm, .clk-top .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clk-top .bell { flex: none; }
/* on the plain sheet (My file / Ask Ello pages): both buttons 48px round, ink on a soft tint; Ask is teal-soft, stronger when on */
.clk-top .bell { width: 48px; height: 48px; background: rgba(15, 31, 46, .06); color: var(--ink-2); }
.clk-top .bell.ask-btn { margin-right: 4px; color: var(--sea-ink); background: var(--teal-soft); border: 1px solid #c4e3e5; }
.clk-top .bell.ask-btn.on { background: var(--teal); color: #fff; border-color: var(--teal); }
/* on the sky: same 48px translucent white as the menu button; .on = stronger white fill + sea-ink icon */
.clk-sky .clk-top .bell.ask-btn { margin-right: 4px; color: #fff; background: rgba(255, 255, 255, .16); border: 0; }
.clk-sky .clk-top .bell.ask-btn:hover { background: rgba(255, 255, 255, .26); }
.clk-sky .clk-top .bell.ask-btn.on { color: var(--sea-ink); background: rgba(255, 255, 255, .92); text-shadow: none; }

/* ===================== IOD — Injury at work (public/js/pages/iod.js) ===================== */
.iod-tabs { margin: 14px 0 14px; }
.iod-form .form-section h3 { font-family: var(--f-display), Georgia, serif; font-weight: 500; }
.iod-form .iod-emp { padding: 10px 0 0; }
.iod-row { display: grid; gap: 8px; align-items: start; margin-bottom: 8px; }
.iod-wit { grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto; }
.iod-act, .iod-act-head { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 150px 150px 40px; }
.iod-act-head { display: grid; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.iod-ev td { vertical-align: middle; }
.iod-ev td:first-child { width: 42%; }
.iod-ev .input.sm { width: 100%; }
.iod-train { margin-top: 6px; }
.iod-train .input.sm { max-width: 170px; }
.iod-yn label { display: inline-flex; cursor: pointer; }
.iod-yn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iod-yn span { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.iod-yn input:checked + span { background: var(--navy); color: #fff; }
.iod-yn input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.iod-desc { white-space: pre-wrap; margin: 12px 0 0; line-height: 1.55; }
.iod-wlist { padding: 4px 20px; }
.iod-resp { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.iod-final { font-size: 18px; font-weight: 650; margin: 2px 0; }
.iod-setting { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.iod-setting label { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); }
.iod-setting .input.sm { width: 80px; }
.iod-setting .help { flex-basis: 100%; }
.iod-report .iodr-custom { display: inline-flex; gap: 6px; align-items: center; }
.iod-report .iodr-custom[hidden] { display: none; }
.iodr-range { padding-top: 12px; padding-bottom: 12px; font-size: 13px; }
.iod-tiles { border-bottom: 1px solid var(--border); }
.iod-tiles .att-stat.warn .n { color: var(--pending); }
.iod-tiles .att-stat.bad .n { color: var(--suspended); }
.iod-bars { gap: 14px; }
.iod-bars .card { box-shadow: none; border: 1px solid var(--border); }
.iod-bars .card-head { padding: 10px 14px; }
.iod-bars .card-head h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.iod-bars .card-pad { padding: 12px 14px; }
.iod-bars .hb-row { grid-template-columns: 110px 1fr 28px; }
@media (max-width: 900px) {
  .iod-bars.grid-3 { grid-template-columns: 1fr; }
  .iod-act, .iod-act-head { grid-template-columns: 1fr 1fr; }
  .iod-act [data-a="action"] { grid-column: 1 / -1; }
  .iod-act-head { display: none; }
  .iod-wit { grid-template-columns: 1fr auto; }
  .iod-wit textarea { grid-column: 1 / -1; grid-row: 2; }
}
/* ===================== end IOD ===================== */

/* ===================== Warnings & discipline (staff file panel, dashboard, forms duplicate guard) ==============
   One source of truth: src/discipline.js (cases + letters issued in the app + uploaded letters). */
.detail-grid > .stack > #disc-panel { order: -2; } /* top of the main column, above the timesheet (which is order -1) */
.disc-panel .card-head { gap: 14px; flex-wrap: wrap; }
.disc-panel .card-head h2 { flex: none; }
.disc-panel .card-head .tag { font-size: 13px; }
.disc-body { padding: 18px 28px 22px; display: grid; gap: 16px; }
.disc-panel.clean { padding: 0; }
.disc-clean-row { display: flex; align-items: center; gap: 14px; padding: 18px 28px; font-size: 15px; }
.disc-clean-row + .disc-body { padding-top: 0; }
.disc-ok { width: 32px; height: 32px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); display: grid; place-items: center; flex: none; }
.disc-ok svg { width: 17px; height: 17px; }
.disc-dupe { display: flex; align-items: center; gap: 12px; margin: 0; }
.disc-dupe > svg { width: 20px; height: 20px; flex: none; }
.disc-dupe .cell-sub { color: #8a5a1b; margin-top: 2px; }
.disc-dupe .btn { flex: none; background: #fff; }

/* the ladder: Verbal · First written · Final written · Hearing */
.disc-ladder-wrap { display: grid; gap: 8px; }
.disc-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.disc-ladder li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.disc-ladder li::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--well-2); z-index: 0; }
.disc-ladder li:first-child::before { display: none; }
.disc-ladder .dl-dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: var(--surface); border: 3px solid var(--well-2); box-sizing: border-box; }
.disc-ladder li.done { color: var(--ink-2); }
.disc-ladder li.done::before, .disc-ladder li.current::before { background: var(--sun-1); }
.disc-ladder li.done .dl-dot { background: var(--sun-1); border-color: var(--sun-1); }
.disc-ladder li.current { color: var(--ink); }
.disc-ladder li.current .dl-dot { background: var(--coral); border-color: #f7c3b8; width: 23px; height: 23px; margin-top: -2px; box-shadow: 0 0 0 5px var(--tint-coral); }
.disc-ladder li.current .dl-lbl { font-weight: 700; }
.disc-ladder li.next { color: var(--coral); }
.disc-ladder li.next .dl-dot { border-style: dashed; border-color: var(--coral); }
.disc-next { text-align: center; }

.disc-h { margin: 4px 0 -6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.disc-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tint-coral); color: #9a2e1f; font-size: 11.5px; letter-spacing: 0; }
.disc-none { margin: 0; }
.disc-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--surface-2); }
.disc-list > li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.disc-list > li + li { border-top: 1px solid var(--line); }
.disc-stage { width: 4px; align-self: stretch; border-radius: 4px; flex: none; background: var(--sun-1); }
.disc-stage.s-red { background: var(--coral); }
.disc-stage.s-gold { background: var(--sun-1); }
.disc-stage.s-teal { background: var(--sea); }
.disc-stage.s-case { background: var(--sky-blue); }
.disc-stage.s-notice { background: var(--well-2); }
.disc-w-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; }
.disc-w-top .tag + .tag { margin-left: 0; }
.disc-w-top a { color: inherit; }
.disc-w-dates { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.disc-w-src { margin-top: 6px; }
.disc-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--well); color: var(--ink-2); }
.disc-src svg { width: 13px; height: 13px; }
.disc-src.case { background: var(--tint-sky); color: #23548a; }
.disc-src.case:hover { text-decoration: none; background: #dce9f6; }
.disc-src.form { background: var(--tint-sea); color: var(--sea-ink); }
.disc-src.upload { background: var(--tint-gold); color: var(--gold-ink); }
.disc-soon { color: var(--coral); font-weight: 600; }
.disc-sum { margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.disc-unlinked { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gold-ink); }
.disc-unlinked svg { width: 14px; height: 14px; flex: none; }
.disc-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.disc-acts .btn.sm:not(.primary):not(.ghost) { background: var(--surface); }
.disc-w.expired { opacity: .72; }
.disc-w.expired .disc-stage { background: var(--well-2); }
.disc-history > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 0; list-style-position: inside; }
.disc-history[open] > summary { margin-bottom: 10px; }
.disc-cases li a { padding-top: 10px; padding-bottom: 10px; }
.dw-src a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); }
.dup-issue { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dup-issue > svg { width: 20px; height: 20px; flex: none; }
.dup-issue .btn { background: #fff; }
@media (max-width: 700px) {
  .disc-body { padding: 14px 18px 18px; }
  .disc-clean-row { padding: 16px 18px; }
  .disc-list > li { flex-wrap: wrap; }
  .disc-acts { width: 100%; justify-content: flex-start; padding-left: 18px; }
  .disc-dupe { flex-wrap: wrap; }
  .disc-ladder li { font-size: 11px; }
}
/* ===================== end Warnings & discipline ===================== */
/* ===================== Promotion & pay change (public/js/pages/rolechanges.js) ===================== */
.rc-arrow { color: var(--ink-3); padding: 0 2px; }
.rc-dot { color: var(--line-2); padding: 0 8px; }
.rc-pct { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rc-pct.up { color: var(--sea-ink); }
.rc-pct.down { color: var(--coral); }
.rc-reject { color: var(--suspended); margin-top: 2px; }
/* staff file */
.rc-banner-host:empty { display: none; }
.rc-banner-host .rc-banner { margin-top: 16px; align-items: center; }
.rc-banner-line { margin: 3px 0 2px; }
.rc-banner .btn-row { flex: none; }
.rc-card .folder-ic.rc-ic { background: var(--tint-sea); color: var(--sea-ink); }
.rc-hist td { vertical-align: top; }
.rc-move .cell-sub { margin-top: 2px; }
.rc-move b { color: var(--ink); }
.rc-hist td:last-child .btn + .btn { margin-left: 4px; }
.rc-hist td.num div { margin-top: 2px; }
.rc-sum { background: var(--well); border-radius: var(--ctl-r); padding: 14px 16px; line-height: 1.6; }
/* change form */
.rc-types { margin-top: 2px; }
.rc-types button { height: 40px; padding: 0 20px; }
.rc-hint { margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; }
.rc-cmp { display: grid; grid-template-columns: minmax(0, 0.9fr) 36px minmax(0, 1.25fr); gap: 18px; align-items: start; }
.rc-col { border-radius: 18px; padding: 18px 20px 20px; }
.rc-now { background: var(--surface-2); }
.rc-new { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tint-sea), 0 10px 26px -20px rgba(10, 110, 134, .45); }
.rc-col-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.rc-new .rc-col-h { color: var(--sea-ink); }
.rc-now .kv { font-size: 14.5px; margin: 0 0 14px; }
.rc-now .py-comp td { padding: 9px 4px; font-size: 14px; }
.rc-now .py-comp td:first-child, .rc-now .py-comp td:last-child { padding-left: 4px; padding-right: 4px; }
.rc-mid { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); }
.rc-mid svg { width: 18px; height: 18px; }
.rc-grid { grid-template-columns: 1fr 1fr; }
.rc-paybox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rc-paybox[hidden], .rc-samepay[hidden] { display: none; }
.rc-sub-h { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.rc-paybox .py-total { display: none; }
.rc-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--ctl-r); background: var(--tint-sea); }
.rc-gross { font-family: var(--f-display), Georgia, serif; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.rc-gross .rc-pct { font-family: inherit; font-weight: 400; }
.rc-gw { margin-top: 10px; padding: 10px 14px; font-size: 13.5px; }
.rc-gok { margin-top: 10px; font-size: 13px; color: var(--sea-ink); font-weight: 600; }
.rc-samepay { margin-top: 16px; padding: 12px 14px; border-radius: var(--ctl-r); background: var(--well); font-size: 13.5px; }
.rc-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rc-letter-wrap { position: static; max-height: 70vh; }
.rc-letter-wrap .letter { min-height: 0; }
/* list page */
.rc-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.rc-filters .rc-dep { width: auto; min-width: 200px; }
.rc-table td { vertical-align: top; }
.rc-table td:last-child .btn + .btn { margin-left: 6px; }
@media (max-width: 900px) {
  .rc-cmp { grid-template-columns: 1fr; }
  .rc-mid { transform: rotate(90deg); justify-self: center; }
  .rc-grid { grid-template-columns: 1fr; }
  .rc-banner-host .rc-banner { flex-wrap: wrap; }
}
/* ===================== end Promotion & pay change ===================== */
/* ===================== IOD letters + "write it in your own words" (src/iodletters.js, public/js/pages/iod.js) ===================== */
/* draft box on the New IOD report page */
.iod-draft { margin-bottom: 16px; border: 1px solid #c4e3e5; background: linear-gradient(180deg, var(--teal-soft) 0%, #fff 90px); }
.iod-draft .card-head h2 { display: flex; align-items: center; gap: 8px; font-family: var(--f-display), Georgia, serif; font-weight: 500; }
.iod-draft .card-head h2 svg { width: 18px; height: 18px; color: var(--teal); }
.iod-draft textarea { min-height: 96px; background: #fff; }
.iod-draft-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.iod-draft-row .spacer { flex: 1; }
.iod-draft-row .btn .spinner { width: 14px; height: 14px; border-width: 2px; }
.iod-af-banner { align-items: flex-start; margin-top: 0; }
.iod-af-notes { margin: 8px 0 0; padding-left: 18px; }
.iod-af-notes li { margin: 2px 0; }
.iod-af-cands { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* fields filled from the note: teal edge until the user edits them; amber = a guess to check */
.iod-form .field.iod-af > label { color: var(--teal-2); }
.iod-form .field.iod-af > label::after { content: "from your note"; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); border-radius: 99px; padding: 1px 7px; }
.iod-form .field.iod-af .input { border-color: #7cc3c8; background: #f3fafa; }
.iod-form .field.iod-af-low > label { color: #7a4706; }
.iod-form .field.iod-af-low > label::after { content: "check this"; color: var(--pending); background: var(--pending-bg); }
.iod-form .field.iod-af-low .input { border-color: var(--pending-bd); background: #fffaf0; }
.iod-form .field.iod-af .checkbox { color: var(--teal-2); }
.iod-wit.iod-af .input { border-color: #7cc3c8; background: #f3fafa; }

/* letter chooser on the IOD letters page */
.iodl-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.iodl-kind { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 12px; background: #fff; border: 1px solid #dfe6ec; border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.iodl-kind:hover { border-color: var(--teal); }
.iodl-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iodl-kind:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(12, 122, 131, .18); background: linear-gradient(180deg, var(--teal-soft), #fff 70%); }
.iodl-kind:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.iodl-k-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--navy-2); border: 1px solid var(--border); }
.iodl-kind:has(input:checked) .iodl-k-ic { background: var(--teal); color: #fff; border-color: var(--teal); }
.iodl-k-ic svg { width: 17px; height: 17px; }
.iodl-k-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iodl-k-tx b { font-size: 14px; line-height: 1.3; }
.iodl-k-tx small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.iodl-st { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.iodl-st.ok { color: #0f5b33; }
.iodl-st.lock { color: var(--pending); }
.iodl-wname { margin-top: 8px; }
.iodl-wname[hidden] { display: none; }
#iodl-notes .banner { margin: 0 0 12px; align-items: flex-start; }
.iodl-nsitf { align-items: flex-start; }
.iodl-nsitf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.iodl-nsitf-row .input.sm { width: auto; min-width: 150px; background: #fff; }

/* "IOD letters" card on the IOD report page */
.iodl-list { padding: 2px 16px; }
.iodl-list li { justify-content: flex-start; }
.iodl-list li > span.grow { flex: 1; min-width: 0; text-align: left; display: block; }
.iodl-row-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-2); }
.iodl-row-ic svg { width: 15px; height: 15px; }
.iodl-todo .iodl-row-ic { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border-strong); }
.iodl-todo b { color: var(--ink-2); font-weight: 600; }
.iodl-acts { flex: none; display: inline-flex; gap: 6px; }
.iodl-old { border-top: 1px solid var(--border); padding: 8px 16px 4px; font-size: 13px; }
.iodl-old summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 0; }
.iodl-old .iodl-list { padding: 0; }
.iodl-foot { border-top: 1px solid var(--border); padding-top: 10px; padding-bottom: 12px; margin: 0; }
@media (max-width: 1200px) { .iodl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .iodl-kinds { grid-template-columns: 1fr; } .iodl-list li { flex-wrap: wrap; } .iodl-acts { width: 100%; justify-content: flex-end; } }
/* ===================== end IOD letters ===================== */

/* ===================== 9. Sidebar: collapsible sections, page finder, "New" tag ===================== */
.nav-find { position: sticky; top: -1px; z-index: 2; margin: 0 -14px; padding: 4px 14px 8px; background: #f8f9f9; }
.nav-filter { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--ctl-r); background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.nav-filter::placeholder { color: var(--ink-3); }
.nav-filter:focus { outline: none; border-color: var(--sea-ink); box-shadow: 0 0 0 3px rgba(31, 122, 140, .16); }
.nav-group { display: block; }
.nav-group .nav-items { display: flex; flex-direction: column; gap: 2px; }
.nav-group .nav-items[hidden] { display: none; }
button.nav-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; text-transform: uppercase; border-radius: var(--ctl-r); padding: 16px 12px 6px; }
button.nav-section:hover { color: var(--ink); }
button.nav-section:focus-visible, .nav a:focus-visible { outline: 2px solid var(--sea-ink); outline-offset: -2px; }
.nav-chev { flex: none; transition: transform .15s ease; }
button.nav-section[aria-expanded="false"] .nav-chev { transform: rotate(-90deg); }
.nav-filtering .nav-chev { opacity: .35; }
.nav-new { margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: var(--sea-ink); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 16px; }
.nav-empty { padding: 14px 12px; font-size: 14px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .nav-chev { transition: none; } }
.nav a > span:not(.nav-new):not(.badge-count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-new { flex: none; margin-left: 6px; }
/* Forms & Letters: payroll contact inputs (was inline style, blocked by CSP) */
.input.pay-w220 { max-width: 220px; }
.input.pay-w280 { max-width: 280px; }
.nav-new { margin-left: 6px; padding: 0 5px; font-size: 9px; line-height: 15px; letter-spacing: .05em; }
.nav a:has(.nav-new) .badge-count { min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; margin-left: auto; }
.nav a:has(.nav-new) .nav-new { margin-left: 4px; }
/* a little extra width so "Promotions & pay" + New + count fit on one line */
:root { --sidebar: 292px; }
@media (max-width: 900px) { .sidebar { width: min(300px, 86vw); } }

/* ===================== 10. My details (staff app › My file) + Details updates (office), Oct 2026 =====================
   Staff screens: big type (values 19px), 52px buttons, dark ink on light cards for outdoor sun. Office: queue page,
   staff-file chip and pending-changes card (old / new side by side, proof photo). Prefixes: md- (staff), dcu- (office). */
.md-app { font-size: 17px; }
.md-app .clk-card { border-radius: 18px; padding: 18px; }
.md-back, .md-app .mf-back { display: inline-flex; align-items: center; min-height: 48px; margin: 0 0 6px; font-size: 17px; color: var(--sea-ink); }
.md-title { margin: 0 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.md-intro { padding: 2px 4px 10px; }
.md-intro p { margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.md-intro .md-last { font-size: 15px; color: var(--ink-2); }
.md-small { margin: 10px 2px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.md-big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 19px; font-weight: 650; cursor: pointer; }
.md-big svg { width: 22px; height: 22px; flex: none; }
.md-big.gold { color: #3a1e04; background: linear-gradient(180deg, var(--sun-2), var(--sun-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -12px rgba(220, 140, 40, .7); }
.md-big:disabled { opacity: .6; cursor: default; }
.md-big .spinner { border-color: rgba(58, 30, 4, .3); border-top-color: #3a1e04; }
/* My file card */
.md-card { border: 2px solid transparent; }
.md-card.due { border-color: #f3dcb4; background: #fffaf1; }
.md-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.md-card-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--tint-sea); color: var(--sea-ink); }
.md-card-ic svg { width: 28px; height: 28px; }
.md-card-h { margin: 0 !important; font-size: 20px !important; color: var(--ink); }
.md-card-sub { margin-top: 2px; font-size: 16px; color: var(--ink-2); }
.md-card .md-note { margin: 0 0 12px; }
/* notes: done / not accepted / waiting for HR */
.md-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 14px; border-radius: 14px; font-size: 16px; line-height: 1.4; }
.md-note svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.md-note b { display: block; font-size: 17px; }
.md-note.ok { background: #e3f4ea; color: #145c33; }
.md-note.bad { background: var(--tint-coral); color: #8f2a1b; }
.md-note.wait { background: var(--tint-gold); color: #6e3f08; }
/* the list */
.md-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px !important; font-size: 20px !important; color: var(--ink); }
.md-hr { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--tint-gold); color: #6e3f08; font-size: 13px; font-weight: 700; white-space: nowrap; }
.md-hr svg { width: 14px; height: 14px; }
.md-gnote { margin: 0 0 6px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.md-list { list-style: none; margin: 0; padding: 0; }
.md-row { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.md-row:first-child { border-top: 0; }
.md-lbl { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.md-val { font-size: 19px; font-weight: 650; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.md-val.md-empty { color: #b23a26; font-weight: 600; }
.md-row.missing { margin: 4px -10px; padding: 12px 10px; border-top-color: transparent; border-radius: 14px; background: var(--tint-coral); }
.md-row.missing + .md-row { border-top-color: transparent; }
.md-row.ticked .md-val::after { content: " \2713"; color: var(--sea-ink); }
.md-pend { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 600; color: #6e3f08; }
.md-pend svg { width: 16px; height: 16px; flex: none; }
.md-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.md-acts.one { grid-template-columns: 1fr; }
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 2px solid transparent; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 650; cursor: pointer; }
.md-btn svg { width: 20px; height: 20px; flex: none; }
.md-btn.ok { background: #fff; border-color: var(--sea-ink); color: var(--sea-ink); }
.md-btn.ok.on { background: var(--sea-ink); color: #fff; }
.md-btn.change { background: var(--well-2); color: var(--ink); }
.md-btn:focus-visible, .md-big:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: 2px; }
.md-file { position: relative; }
.md-foot { position: sticky; z-index: 2; bottom: calc(66px + env(safe-area-inset-bottom)); margin: 4px -14px 0; padding: 12px 14px 8px; background: linear-gradient(180deg, rgba(246, 245, 242, 0), var(--bg) 18px); }
.md-app .md-small.center { margin: 6px 6px 0; text-align: center; }
/* change screen */
.md-edit .md-title { margin-bottom: 8px; }
.md-step { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 18px; font-weight: 700; color: var(--ink); }
.md-step:first-of-type { margin-top: 8px; }
.md-step-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; }
.md-field { margin-top: 14px; }
.md-field > label { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 650; color: var(--ink); }
.md-now { margin-bottom: 6px; font-size: 15px; color: var(--ink-2); }
.md-now b { color: var(--ink); }
.md-hint { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.md-input.input { width: 100%; min-height: 56px; padding: 0 14px; border: 2px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--ink); font-size: 19px; }
textarea.md-input.input { min-height: 104px; padding: 12px 14px; line-height: 1.4; }
.md-input.input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px rgba(19, 167, 192, .18); }
.md-pin.input { max-width: 240px; font-size: 26px; letter-spacing: .45em; text-align: center; }
.md-help { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.md-proof { display: grid; place-items: center; gap: 8px; min-height: 150px; padding: 10px; border: 2px dashed var(--line-2); border-radius: 16px; background: var(--well); }
.md-proof-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; color: var(--ink-2); }
.md-proof-empty svg { width: 34px; height: 34px; }
.md-proof-img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 12px; }
.md-proof-pdf { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.md-proof-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: #145c33; }
.md-proof-ok svg { width: 20px; height: 20px; }
.md-alert.alert { margin-top: 14px; font-size: 16px; font-weight: 600; }
/* done / waiting */
.md-done { text-align: center; padding: 28px 20px 22px !important; }
.md-done-ic { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 50%; background: #e3f4ea; color: #145c33; }
.md-done-ic svg { width: 46px; height: 46px; }
.md-done.wait .md-done-ic { background: var(--tint-gold); color: #6e3f08; }
.md-done-p { margin: 0 0 14px; font-size: 18px; line-height: 1.45; color: var(--ink); }
.md-done-list { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; }
.md-done-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.md-done-list li span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.md-done-list li b { font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.md-done .md-note { text-align: left; }
/* after-clock-in prompt */
.md-prompt { text-align: center; }
.md-prompt-ic { display: grid; place-items: center; width: 76px; height: 76px; margin: 4px auto 12px; border-radius: 22px; background: var(--tint-sea); color: var(--sea-ink); }
.md-prompt-ic svg { width: 40px; height: 40px; }
.md-prompt-p { margin: 0 0 6px; font-size: 19px; line-height: 1.4; color: var(--ink); }
.md-prompt-s { margin: 0; font-size: 16px; color: var(--ink-2); }
.md-prompt-modal .modal-head h2 { font-size: 21px; }
.md-prompt-modal .modal-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.md-prompt-modal .modal-foot .btn { height: auto; min-height: 54px; font-size: 18px; }
/* office: chip, pending card, queue */
.dcu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.dcu-chip svg { width: 14px; height: 14px; }
.dcu-chip.green { background: #e3f4ea; color: #1e6b3f; }
.dcu-chip.gold { background: var(--tint-gold); color: var(--gold-ink); }
.dcu-chip.grey { background: var(--well); color: var(--ink-2); }
.dcu-list { display: grid; gap: 14px; padding: 4px 20px 18px; }
.dcu-item { padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: #fff; }
.dcu-item-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dcu-who { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; color: var(--ink); text-decoration: none; }
.dcu-who > span { display: flex; flex-direction: column; }
.dcu-what { font-size: 16px; font-weight: 700; color: var(--ink); }
.dcu-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; margin-top: 14px; }
.dcu-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dcu-tbl th, .dcu-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.dcu-tbl thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dcu-tbl tbody th { width: 28%; font-weight: 600; color: var(--ink-2); }
.dcu-old { color: var(--ink-2); }
.dcu-new { background: #eef8f1; color: var(--ink); font-weight: 650; }
.dcu-tbl thead th:last-child { color: #1e6b3f; }
.dcu-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--tint-gold); color: var(--gold-ink); font-size: 13.5px; line-height: 1.45; }
.dcu-tip svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.dcu-proof { display: flex; flex-direction: column; gap: 6px; }
.dcu-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--well); color: var(--ink-2); font: inherit; font-size: 13px; text-align: center; cursor: zoom-in; }
.dcu-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dcu-thumb.locked { cursor: default; }
.dcu-thumb svg { width: 22px; height: 22px; }
.dcu-acts { justify-content: flex-end; margin-top: 14px; }
.dcu-hist { border-top: 1px solid var(--border); }
.dcu-hist summary { padding: 12px 20px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.dcu-hlist { list-style: none; margin: 0; padding: 0 0 8px; }
.dcu-hlist li { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--border); }
.dcu-prog { padding: 22px 24px 18px; }
.dcu-prog-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dcu-prog-n { font-family: var(--f-display), Georgia, serif; font-size: 26px; color: var(--ink); }
.dcu-prog-n b { font-size: 40px; font-weight: 500; letter-spacing: -.02em; }
.dcu-prog-l { font-size: 15px; color: var(--ink-2); }
.dcu-bar { height: 12px; margin: 16px 0 8px; overflow: hidden; border-radius: 99px; background: var(--well-2); }
.dcu-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sea), var(--sea-ink)); }
.preview-img.dcu-big { max-height: 78vh; object-fit: contain; }
@media (max-width: 900px) { .dcu-body { grid-template-columns: 1fr; } .dcu-proof { max-width: 260px; } }
.detail-grid > .stack > #dcu-card.has-pending { order: -2; }
/* ===================== end My details ===================== */

/* ===================== Leave balance (Oct 2026) =====================
   Staff file sidebar "Leave balance <year>" block, its Adjust modal, the planner's adjusted-entitlement note
   and the pro-rata setting. Segment colours: taken = sea ink, booked = sun, left = well track. */
.lvb-host { padding-top: 18px; }
.lvb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lvb-head h4 { flex: 1; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lvb-year.input.sm { width: auto; height: 30px; padding: 0 28px 0 10px; font-size: 13px; }
.lvb-adj { font-size: 13.5px; }
.lvb-annual { padding: 2px 0 4px; }
.lvb-big { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display), Georgia, serif; color: var(--ink); }
.lvb-big b { font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.lvb-big span { font-size: 17px; color: var(--ink-2); }
.lvb-type { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lvb-note { font-weight: 500; color: var(--sea-ink); }
.lvb-std { font-weight: 500; color: var(--ink-3); }
.lvb-overmsg { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--suspended); }
.lvb-annual.over .lvb-big b, .lvb-annual.over .lvb-big span { color: var(--suspended); }
.lvb-bar { display: flex; height: 12px; margin: 14px 0 10px; overflow: hidden; border-radius: 99px; background: var(--well-2); }
.lvb-bar i { display: block; height: 100%; }
.lvb-bar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.lvb-s-taken { background: var(--sea-ink); }
.lvb-s-booked { background: var(--sun-1); }
.lvb-s-left { background: var(--well-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lvb-annual.over .lvb-bar { box-shadow: 0 0 0 2px var(--suspended-bd); }
.lvb-s-over { background: repeating-linear-gradient(135deg, var(--coral) 0 5px, var(--suspended) 5px 10px); }
.lvb-legend .lvb-lg-over, .lvb-legend .lvb-lg-over b { color: var(--suspended); }
.lvb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.lvb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lvb-legend b { color: var(--ink); font-weight: 650; }
.lvb-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lvb-rows { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lvb-rows li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.lvb-rows li:last-child { border-bottom: 0; }
.lvb-rl { font-weight: 600; color: var(--ink); white-space: nowrap; }
.lvb-rv { text-align: right; color: var(--ink-2); }
.lvb-rv b { color: var(--ink); font-weight: 650; }
.lvb-rv .cell-sub { display: block; }
.lvb-rows li.over .lvb-rv, .lvb-rows li.over .lvb-rv b { color: var(--suspended); }
.lvb-pend { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--tint-gold); color: var(--gold-ink); font-size: 13.5px; font-weight: 600; }
.lvb-pend a { color: inherit; }
.lvb-adjnote { margin-top: 10px; }
.adj-grid { grid-template-columns: 1fr 1fr; }
.adj-grid .adj-reason, .adj-grid .adj-type { grid-column: 1 / -1; }
.adj-h { margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.adj-items { margin: 0; padding: 0; list-style: none; }
.adj-items li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.adj-pos { color: #1e6b3f; }
.adj-neg { color: var(--suspended); }
.adj-items .btn.danger { color: var(--suspended); }
td .bal-adj { color: var(--sea-ink); white-space: nowrap; }
.prorata-box { border-top: 1px solid var(--border); }
@media (max-width: 520px) { .adj-grid { grid-template-columns: 1fr; } .lvb-big b { font-size: 40px; } }
/* ===================== end Leave balance ===================== */

/* Payroll email status on promotions & pay changes (16 Oct 2026) */
.rc-payroll { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.rc-payroll svg { width: 14px; height: 14px; vertical-align: -2px; }
.rc-payroll.ok { color: #1f7a3d; }
.rc-payroll.bad { color: var(--coral); }
.rc-payroll.warn { color: var(--ink-2); font-weight: 500; }

/* ===================== Old wage → new wage with increment (role changes, Oct 2026) ===================== */
.rc-wage { display: grid; gap: 2px; justify-items: end; font-variant-numeric: tabular-nums; }
.rc-wage .cell-sub { display: inline; margin-right: 4px; }
.rc-inc { font-weight: 650; color: var(--ink-2); }
.rc-inc.up { color: #1f7a4d; }
.rc-inc.down { color: #b4232a; }
.rc-wage-line { margin-top: 6px; font-variant-numeric: tabular-nums; }
/* ===================== end Old wage → new wage ===================== */

/* ===================== Wave 3 (manager side), Oct 2026 =====================
   12a "Needs you today" strip on the HR Overview (ts-), 12b sidebar groups, 12c staff file "More" menu (ph-more / ph-mi).
   Living Sky tokens only. Count chips are tinted by meaning: sea = waiting for your approval, gold = coming up, coral = overdue. */
/* 12a. Needs you today */
.today-host:empty { display: none; }
.today-strip { margin-top: 24px; padding: 20px 28px 22px; background: var(--surface); border-radius: var(--panel-r); box-shadow: var(--sky-shadow); }
.ts-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-ui), system-ui, sans-serif; font-size: 18px; font-weight: 650; letter-spacing: -.005em; color: var(--ink); }
.ts-total { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-groups { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 14px; }
.ts-group { min-width: 0; }
.ts-gl { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5b6672; }
.ts-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ts-item { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 6px; border-radius: 999px; background: var(--well); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.ts-item:hover { background: var(--well-2); text-decoration: none; }
.ts-item:focus-visible { outline: 2px solid var(--sea-ink); outline-offset: 2px; }
.ts-n { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 18px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-item.t-sea .ts-n { background: var(--sea-ink); color: #fff; }
.ts-item.t-gold .ts-n { background: var(--sun-2); color: var(--gold-ink); }
.ts-item.t-coral .ts-n { background: var(--coral); color: #fff; }
.today-strip.clear { display: flex; align-items: center; gap: 12px; padding: 16px 24px; }
.today-strip.clear p { margin: 0; font-size: 15px; color: var(--ink-2); }
.today-strip.clear b { color: var(--ink); }
.ts-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); flex: none; }
.ts-ok svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .today-strip { margin-top: 16px; padding: 16px; }
  .ts-groups { flex-direction: column; gap: 14px; }
  .ts-items li { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .ts-item { width: 100%; padding-right: 12px; font-size: 14.5px; line-height: 1.2; }
}

/* 12b. Sidebar: 7 groups, headings are real tap targets in plain sentence case */
.nav-top { margin-bottom: 6px; }
.nav .nav-group + .nav-group:not(.nav-top) { margin-top: 2px; }
button.nav-section { justify-content: flex-start; min-height: 44px; padding: 0 12px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
button.nav-section:hover { background: rgba(255, 255, 255, .8); }
button.nav-section .nav-chev { margin-left: auto; color: var(--ink-3); transition: transform .15s ease; }
.nav-gcount { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); color: #fff; font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.nav-gcount[hidden], button.nav-section[aria-expanded="true"] .nav-gcount, .nav-filtering .nav-gcount { display: none; }
.nav-gcount:not([hidden]) + .nav-chev { margin-left: 8px; }
button.nav-section[aria-expanded="true"] .nav-gcount + .nav-chev { margin-left: auto; }
.nav-group .nav-items { padding-bottom: 6px; }
.nav-top .nav-items { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { button.nav-section .nav-chev { transition: none; } }

/* 12c. Staff file: 3 main actions + More menu */
.ph-more { position: relative; }
.ph-more-btn .ph-chev { transition: transform .15s ease; }
.ph-more-btn[aria-expanded="true"] .ph-chev { transform: rotate(180deg); }
.ph-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 300px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgba(15, 31, 46, .06), 0 24px 48px -16px rgba(15, 31, 46, .3); }
.ph-menu[hidden] { display: none; }
.ph-mg + .ph-mg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.ph-mgl { padding: 6px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5b6672; }
.ph-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.ph-mi svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.ph-mi-sp { width: 18px; flex: none; }
.ph-mi:hover { background: var(--well); text-decoration: none; }
.ph-mi:focus-visible { outline: none; background: var(--well); box-shadow: inset 0 0 0 2px var(--sea-ink); }
.ph-mi.danger, .ph-mi.danger svg { color: var(--coral); }
@media (max-width: 600px) {
  .profile-head .ph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
  .profile-head .ph-actions > .btn, .ph-more-btn { width: 100%; height: 48px; }
  .ph-more { position: static; }
  .ph-menu { left: 0; right: 0; width: auto; max-width: none; }
  .ph-mi { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ph-more-btn .ph-chev { transition: none; } }
/* ===================== end Wave 3 (manager side) ===================== */

/* ===================== Wave 3 — staff phone: readable in sunlight, To do, read aloud, language, quiz feedback (Oct 2026) =====================
   Staff phone screens only: every selector is inside .clock-app (the staff app root) or body:has(.clock-app) (its sheets and dialogs).
   The office desktop is not touched. Secondary text 15px+, labels 13px+, tap targets 48px+.
   Secondary ink #3f4d5a: 7.7:1 on the card grey #f0f2f2, 8.3:1 on the sheet #fbfaf8, 8.7:1 on white (WCAG AA needs 4.5:1). */
body:has(.clock-app) { --ink-2: #3f4d5a; --ink-3: #3f4d5a; --muted: #3f4d5a; }
.clock-app.clk-home, .clock-app.clk-tab { --clk-ink-2: #3f4d5a; }
.clock-app.clk-home[data-phase="night"], .clock-app.clk-tab[data-phase="night"] { --clk-ink-2: #c3cedd; --muted: #c3cedd; --ink-2: #c3cedd; --ink-3: #c3cedd; } /* 9.8:1 on the night card */

/* text sizes (screens that use the older phone layout: My file, Ask Ello, My details, News, sheets) */
.clock-app .cell-sub, .clock-app .subtle { font-size: 15px; line-height: 1.45; }
.clock-app .clk-top .cell-sub { font-size: 15px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
.clock-app .clk-top .nm { overflow-wrap: anywhere; }
.clock-app .news-meta { font-size: 15px; color: var(--clk-ink-2, var(--ink-2)); }
.clock-app .news-body { font-size: 16px; line-height: 1.5; color: var(--clk-ink, var(--ink)); }
.clock-app .mf-kpi-sub { font-size: 15px; color: var(--ink-2); }
.clock-app .mf-eyebrow2 { font-size: 15px; color: var(--ink-2); }
.clock-app .mf-row .cell-sub { font-size: 15px; }
.clock-app .mf-pill, .clock-app .mf-auto { font-size: 13px; }
.clock-app .p3-kpi span, .clock-app .p3-kpi small { font-size: 13px; color: var(--ink-2); }
.clock-app .offline-bar, .clock-app .offline-bar b { font-size: 15px; }
.clock-app .ak-bot, .clock-app .ak-me { font-size: 16px; }
.clock-app .ak-src { font-size: 15px; color: var(--ink-2); }
.clock-app .ak-hr .cell-sub { font-size: 15px; }
.clock-app .queue-item .cell-sub { font-size: 15px; }
.clock-app .rule-bad, .clock-app .rule-ok, .clock-app .read-mark, .clock-app .check-ok { font-size: 15px; }
.clock-app .tag { font-size: 13px; }
.clock-app .alert { font-size: 15px; }
.bsheet .cell-sub, .bsheet .subtle, .bsheet p { font-size: 16px; line-height: 1.45; }
.bsheet .p3-q { font-size: 18px; font-weight: 600; line-height: 1.35; }
.bsheet .p3-quiz label { min-height: 52px; font-size: 16px; }
.bsheet .p3-lesson { font-size: 16px; line-height: 1.55; }
body:has(.clock-app) .modal .cell-sub, body:has(.clock-app) .modal .subtle, body:has(.clock-app) .modal p { font-size: 16px; }
body:has(.clock-app) .modal .chip { font-size: 15px; }
body:has(.clock-app) .toast { font-size: 16px; }

.clock-app .sh-date span { font-size: 13px; }
.clock-app .btn.sm { font-size: 15px; }
.clock-app .mf-change { font-size: 15px; }
.clk-tab[data-phase="night"] .sh-day.today .sh-date b, .clk-tab[data-phase="night"] .read-mark { color: var(--clk-teal); }
/* bottom tabs: labels 13px (was 11px), still one line on a 360px phone */
.clock-app .clk-nav.six button { min-height: 56px; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.clock-app .clk-nav.six button svg { width: 22px; height: 22px; }
.clock-app .clk-nav.six { padding-left: 2px; padding-right: 2px; gap: 0; }
.clk-home .clk-nav button, .clock-app .clk-nav button { color: var(--clk-ink-2, var(--ink-2)); }
@media (max-width: 340px) { .clock-app .clk-nav.six button { font-size: 12.5px; letter-spacing: -.03em; } }

/* tap targets 48px+ */
.clock-app .ak-chip { min-height: 48px; padding: 10px 16px; font-size: 16px; }
.clock-app .ak-form .input { min-height: 52px; font-size: 16px; }
.clock-app .ak-form .btn { min-height: 52px; padding: 0 22px; font-size: 16px; }
.clock-app .ak-actions .btn { min-height: 48px; font-size: 16px; }
.clock-app .link-btn { min-height: 48px; display: inline-flex; align-items: center; }
.clock-app .mf-row { min-height: 56px; }
.clock-app .icon-btn { min-width: 48px; min-height: 48px; }
.clock-app .btn { min-height: 48px; }
.bsheet .btn, .bsheet .clk-btn { min-height: 52px; font-size: 16px; }

/* status card: room for the speaker button in the corner */
.clk-main { position: relative; }
.clk-main > .say-btn { position: absolute; top: 12px; right: 12px; }
.clk-main > .clk-status { padding-right: 56px; }

/* ---------- read aloud (speechSynthesis) ---------- */
.say-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-width: 48px; min-height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: var(--tint-sea); color: #085a6e; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.say-btn svg { width: 22px; height: 22px; flex: none; }
.say-btn.compact { width: 48px; padding: 0; }
.say-btn.on { background: #085a6e; color: #fff; }
.say-btn:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: 2px; }
.clk-home[data-phase="night"] .say-btn, .clk-tab[data-phase="night"] .say-btn { background: rgba(111, 224, 212, .14); color: #6fe0d4; }
.clk-home[data-phase="night"] .say-btn.on, .clk-tab[data-phase="night"] .say-btn.on { background: #6fe0d4; color: #0d1830; }
@media (prefers-reduced-motion: no-preference) { .say-btn.on svg path:last-child { animation: say-pulse 1.1s ease-in-out infinite; } }
@keyframes say-pulse { 50% { opacity: .35; } }
.news-meta .say-btn { margin-left: auto; }
.ntc-meta .say-btn { margin-left: auto; }
.ak-say { float: right; margin: -4px -6px 4px 8px; }
.ak-hr > .say-btn { float: right; margin: 0 0 6px 8px; }
.lv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lv-h h3 { margin: 0 !important; }
.p3-sheet-top, .p3-res-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p3-res-top h3 { margin: 0; }
.p3-say { display: flex; justify-content: flex-start; margin-top: 10px; }

/* ---------- To do strip (clock-in home) ---------- */
.clk-todo { margin: 0 0 12px; padding: 6px 6px 6px; border-radius: 20px; background: var(--tint-gold); color: var(--ink); }
.clk-todo[hidden] { display: none; }
.todo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 4px 12px; }
.todo-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); }
.todo-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #8f5410; color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.clk-todo .say-btn { background: rgba(143, 84, 16, .1); color: #6e3f08; }
.clk-todo .say-btn.on { background: #6e3f08; color: #fff; }
.todo-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 10px 10px 12px; border: 0; border-top: 1px solid rgba(143, 84, 16, .14); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.todo-row:first-of-type { border-top: 0; }
.todo-row:active { background: rgba(143, 84, 16, .08); }
.todo-row:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: -3px; border-radius: 14px; }
.todo-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.todo-row b { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.todo-kind { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #6e3f08; }
.clk-home[data-phase="night"] .todo-kind { color: #f3c97a; }
.todo-sub { font-size: 15px; line-height: 1.35; color: #5a3608; }
.todo-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #8f5410; }
.todo-ic svg { width: 22px; height: 22px; }
.todo-go { flex: none; font-size: 26px; line-height: 1; color: #8f5410; }
.todo-new { flex: none; padding: 3px 9px; border-radius: 999px; background: #b23a26; color: #fff; font-size: 13px; font-weight: 700; }
.clk-home[data-phase="night"] .clk-todo { background: #2a2414; color: #f6efe0; }
.clk-home[data-phase="night"] .todo-head h3, .clk-home[data-phase="night"] .todo-row { color: #f6efe0; }
.clk-home[data-phase="night"] .todo-sub { color: #e9d9b8; }
.clk-home[data-phase="night"] .todo-ic { background: rgba(243, 201, 122, .14); color: #f3c97a; }
.clk-home[data-phase="night"] .todo-go { color: #f3c97a; }
.clk-home[data-phase="night"] .todo-row { border-top-color: rgba(243, 201, 122, .16); }
.clk-home[data-phase="night"] .clk-todo .say-btn { background: rgba(243, 201, 122, .14); color: #f3c97a; }
.clk-home[data-phase="night"] .todo-n { background: #f3c97a; color: #2a1a04; }

/* ---------- language switch (Menu) ---------- */
.lang-pick { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.lang-pick .lbl { margin-bottom: 8px; font-size: 15px; font-weight: 650; color: var(--ink); }
.lang-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--well); }
.lang-opt { min-height: 52px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.lang-opt.on { background: #fff; color: #085a6e; box-shadow: 0 1px 2px rgba(15, 31, 46, .08), 0 4px 12px -6px rgba(15, 31, 46, .25); }
.lang-pick .cell-sub { margin-top: 8px; }

/* ---------- quiz: what you got wrong ---------- */
.p3-need { display: inline-block; margin-top: 4px; font-size: 16px; font-weight: 650; color: var(--ink); }
.p3-res p { font-size: 16px; }
.p3-review { margin: 16px 0 14px; }
.p3-rv-h { margin: 0 0 10px; font-size: 17px; font-weight: 650; color: var(--ink); }
.p3-rv { padding: 12px 0; border-top: 1px solid var(--line-2); }
.p3-rv:first-of-type { border-top: 0; padding-top: 4px; }
.p3-rv-q { margin: 0 0 8px; font-size: 16px !important; font-weight: 600; line-height: 1.4; color: var(--ink); }
.p3-rv-a { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; font-size: 16px; line-height: 1.35; }
.p3-rv-a svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.p3-rv-a.bad { background: var(--tint-coral); color: #7d2416; }
.p3-rv-a.ok { background: var(--tint-sea); color: #064c5d; }
.p3-rv-l { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.p3-allright { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--tint-sea); color: #064c5d; font-weight: 600; }
.p3-allright svg { width: 20px; height: 20px; }
/* ===================== end Wave 3 ===================== */

/* Phone dashboard: compact sky hero so "Needs you today" sits on the first screen (desktop untouched) */
@media (max-width: 640px) {
  .hero.sky-hero { min-height: 0; padding: 18px 20px 16px; gap: 4px; }
  .sky-hero .sky-art .sky-palm, .sky-hero .sky-art .sky-jetty { display: none; }
  .sky-hero .page-head h1 { font-size: 28px; margin: 4px 0 0; }
  .sky-hero .page-head p { display: none; }
  .sky-hero .page-head .btn-row { margin-top: 10px; }
  .sky-hero .hero-label { display: none; }
  .sky-hero .hero-count { font-size: 13px; margin-top: 0; }
  .sky-hero .hero-amount { font-size: 30px; margin-top: 6px; }
  .sky-hero .hero-amount .alt { font-size: 14px; }
  .sky-hero .hero-sub { font-size: 12px; margin-top: 6px; }
  .today-strip { margin-top: 14px; padding: 16px 18px 18px; }
}

/* ---------- Contractor daily task log (src/contractortasks.js): phone screens (.tk-*) and the office page (.ct-*) ---------- */
.tk-app .tk-headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-app .tk-headline .sd-h { margin: 4px 0; }
.tk-app .tk-pick { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.tk-app .tk-start { margin-top: 14px; }
.tk-app .tk-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.tk-app .tk-row:first-of-type { border-top: 0; }
.tk-app .tk-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-app .tk-reason, .tk-app .tk-reason-big { font-size: 13px; color: #6f4108; overflow-wrap: anywhere; }
.tk-app .tk-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-app .tk-item { border-left: 5px solid var(--well-2); }
.tk-app .tk-item.is-done { border-left-color: var(--sea); }
.tk-app .tk-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tk-app .tk-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.tk-app .tk-ph { position: relative; width: 76px; height: 76px; }
.tk-app .tk-thumb { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--well); cursor: zoom-in; }
.tk-app .tk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-app .tk-x { position: absolute; top: -7px; right: -7px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--coral); color: #fff; display: grid; place-items: center; cursor: pointer; }
.tk-app .tk-x svg { width: 14px; height: 14px; }
.tk-app .tk-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-app .tk-photo-btns .btn { min-height: 48px; cursor: pointer; }
.tk-app .tk-done { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--tint-sea); font-weight: 650; align-items: center; }
.tk-app .tk-done input { width: 24px; height: 24px; margin: 0; }
.tk-app .tk-add { min-height: 52px; margin-top: 4px; }
.tk-app .tk-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.tk-app .tk-actions .btn { min-height: 52px; }
.tk-app .tk-delete { margin-top: 10px; color: var(--coral); }
.tk-lightbox .tk-big, .ct-lightbox .ct-lb-img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; border-radius: 10px; }
.tk-home .todo-row { border-top: 0; }

.ct-filters { align-items: center; }
.ct-filters .ct-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.ct-filters .ct-date .input { width: auto; min-width: 140px; flex: none; }
.ct-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ct-meta > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ct-task { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ct-task.done { border-left: 4px solid var(--sea); }
.ct-task-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-task-head b { flex: 1; min-width: 160px; }
.ct-tick { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; color: #fff; }
.ct-tick.on { background: var(--sea); border-color: var(--sea); }
.ct-tick svg { width: 13px; height: 13px; }
.ct-desc { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-thumb { width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--well); cursor: zoom-in; }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-lb { display: flex; align-items: center; gap: 10px; }
.ct-lb .ct-lb-img { flex: 1; min-width: 0; object-fit: contain; }
.ct-sites { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-sites li { display: flex; gap: 8px; align-items: center; }
.ct-sites li.off .input { opacity: .55; }
.ct-site-add { display: flex; gap: 8px; }
/* ===================== Engagement survey (Oct 2026) — src/survey.js, pages/survey.js, pages/surveyphone.js ===================== */
/* Score bands: always paired with a word or number, never colour alone. Series: happiness = sea, response rate = amber (validated pair). */
:root { --sv-good: #0F8FA8; --sv-mid: #D9A033; --sv-low: #E2553F; --sv-rate: #B7791F; }
/* --- answering (phone + office) --- */
.sv-wrap { padding: 12px 16px 96px; max-width: 560px; margin: 0 auto; }
.sv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 18px 16px; box-shadow: var(--sky-shadow); }
.sv-eyebrow { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sea-ink); }
.sv-h { font-family: var(--f-display), Georgia, serif; font-size: 25px; line-height: 1.22; font-weight: 600; margin: 8px 0 16px; color: var(--ink); outline: none; }
.sv-lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.sv-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.sv-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.sv-points svg { width: 20px; height: 20px; flex: none; color: var(--sea-ink); margin-top: 1px; }
.sv-prog { height: 6px; border-radius: 3px; background: var(--well-2); overflow: hidden; margin-bottom: 16px; }
.sv-prog span { display: block; height: 100%; background: var(--sea); border-radius: 3px; transition: width .25s ease; }
.sv-scale, .sv-yn { display: grid; gap: 8px; }
.sv-yn { grid-template-columns: 1fr 1fr; }
.sv-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 14px; font: inherit; font-size: 17px; font-weight: 550; text-align: left;
  color: var(--ink); background: var(--surface-2); border: 2px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.sv-yn .sv-opt { justify-content: center; min-height: 72px; font-size: 19px; }
@media (hover: hover) { .sv-opt:hover { border-color: var(--sea); } }
.sv-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sv-opt.on { border-color: var(--sea-ink); background: var(--tint-sea); }
.sv-num { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); font-size: 16px; }
.sv-opt.on .sv-num { background: var(--sea-ink); border-color: var(--sea-ink); color: #fff; }
.sv-text { width: 100%; font-size: 16px; min-height: 120px; }
.sv-warn { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--tint-gold); color: var(--gold-ink); font-size: 14px; line-height: 1.4; }
.sv-warn svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sv-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.sv-nav .btn { min-height: 44px; }
.sv-anon { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.sv-anon svg { width: 16px; height: 16px; flex: none; color: var(--sea-ink); }
.sv-count { text-align: center; font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.sv-done { text-align: center; padding: 12px 0 4px; }
.sv-tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); }
.sv-tick svg { width: 32px; height: 32px; }
.sv-office-form { max-width: 560px; }
.sv-office-form .sv-card { box-shadow: none; }
/* --- dashboard --- */
.sv-tabs { margin: 0 0 16px; }
.sv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.sv-kl { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sv-kv { font-family: var(--f-display), Georgia, serif; font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.sv-kv-sm { font-size: 18px; margin-top: 12px; }
.sv-ks { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.sv-kpi-main { border-width: 1px 1px 1px 5px; }
.sv-kpi-main.b-good { border-left-color: var(--sv-good); }
.sv-kpi-main.b-mid { border-left-color: var(--sv-mid); }
.sv-kpi-main.b-low { border-left-color: var(--sv-low); }
.sv-meter { height: 6px; border-radius: 3px; background: var(--well-2); margin-top: 10px; overflow: hidden; }
.sv-meter span { display: block; height: 100%; background: var(--sv-rate); border-radius: 3px; }
.sv-chg { display: inline-block; margin-left: 4px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sv-chg.up { color: #17804a; }
.sv-chg.down { color: #b23a26; }
.sv-chg.flat { color: var(--ink-3); }
.sv-att .card-head h2 svg.warn-ic { color: var(--coral); }
.sv-att-list { list-style: none; margin: 0; padding: 8px 28px 18px; display: grid; gap: 8px; }
.sv-att-list li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.sv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sv-two > .card { margin: 0; }
.sv-bars { list-style: none; margin: 0; padding: 12px 28px 8px; }
.sv-bars li { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 56px 64px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.sv-bars li:last-child { border-bottom: 0; }
.sv-bl { font-size: 14px; font-weight: 550; color: var(--ink); min-width: 0; }
.sv-bl small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.sv-track { position: relative; display: block; height: 12px; border-radius: 6px; background: var(--well); }
.sv-fill { display: block; height: 100%; border-radius: 0 6px 6px 0; min-width: 4px; }
.sv-fill.b-good, .sv-legend .b-good, .sv-cell.b-good { background: var(--sv-good); }
.sv-fill.b-mid, .sv-legend .b-mid, .sv-cell.b-mid { background: var(--sv-mid); }
.sv-fill.b-low, .sv-legend .b-low, .sv-cell.b-low { background: var(--sv-low); }
.sv-mark60 { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .35; border-radius: 1px; }
.sv-bv { font-size: 14px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv-bc { text-align: right; }
.sv-hidden { grid-template-columns: minmax(110px, 34%) 1fr !important; }
.sv-hid { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); font-style: italic; }
.sv-hid svg { width: 14px; height: 14px; flex: none; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 28px 18px; font-size: 12.5px; color: var(--ink-2); }
.sv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv-legend i, .sv-tip i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sv-legend .sv-l60 { width: 2px; height: 14px; background: var(--ink); opacity: .35; }
.sv-legend-in { padding: 0; margin-left: auto; }
.sv-lh { background: var(--sv-good); }
.sv-lr { background: var(--sv-rate); }
.sv-chart { position: relative; padding: 8px 20px 4px; }
.sv-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-gl { stroke: var(--line-2); stroke-width: 1; }
.sv-g60 { stroke: var(--ink); stroke-opacity: .35; stroke-dasharray: 4 4; }
.sv-ax { font-size: 12px; fill: var(--ink-3); font-family: var(--f-ui), sans-serif; }
.sv-line-h, .sv-line-r { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-line-h { stroke: var(--sv-good); }
.sv-line-r { stroke: var(--sv-rate); stroke-dasharray: 6 5; }
.sv-dot-h, .sv-dot-r { stroke: var(--surface); stroke-width: 2; }
.sv-dot-h { fill: var(--sv-good); }
.sv-dot-r { fill: var(--sv-rate); }
.sv-dl { font-size: 12.5px; font-weight: 650; fill: var(--ink); font-family: var(--f-ui), sans-serif; }
.sv-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.sv-hit { fill: transparent; cursor: crosshair; }
.sv-tip { position: absolute; top: 8px; width: 170px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 13px; line-height: 1.5; pointer-events: none; box-shadow: var(--shadow-lg); }
.sv-tip .cell-sub { color: rgba(255,255,255,.7); }
.sv-tip i { margin-right: 6px; vertical-align: -1px; }
.sv-table { padding: 0 28px 18px; font-size: 13px; }
.sv-table summary { cursor: pointer; color: var(--sea-ink); font-weight: 600; padding: 6px 0; }
.sv-grid td.num, .sv-grid th.num { text-align: center; }
.sv-cell { display: inline-block; min-width: 56px; padding: 3px 8px; border-radius: 8px; color: #fff; font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; }
.sv-cell.b-mid { color: #3d2a05; }
.sv-cell.b-none { background: transparent; color: var(--ink-3); }
.sv-comments { list-style: none; margin: 0; padding: 4px 28px 0; display: grid; gap: 10px; }
.sv-comments li { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sv-comments p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: var(--ink); }
/* --- question editor --- */
.sv-qwrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.sv-qwrap > .card { margin: 0; }
.sv-months ul { list-style: none; margin: 0; padding: 8px; }
.sv-months a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sv-months a:hover { background: var(--surface-2); }
.sv-months a.on { background: var(--tint-sea); }
.sv-months small { display: block; font-size: 12px; color: var(--ink-3); }
.sv-qlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.sv-qrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.sv-qn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); font-weight: 700; font-size: 13px; margin-top: 2px; }
.sv-qtop { display: grid; grid-template-columns: 170px 124px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.sv-qrow .input { width: 100%; max-width: none; margin: 0; }
.sv-qtext { font-size: 15px; }
.sv-qbtn { display: flex; gap: 2px; }
.sv-preview .sv-anon { border-top: 0; padding-top: 0; }
.sv-settings .form-grid .help { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.sv-dash-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 28px 22px; }
@media (max-width: 960px) {
  .sv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-two, .sv-qwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sv-kpis, .sv-dash-row { grid-template-columns: minmax(0, 1fr); }
  .sv-bars, .sv-comments, .sv-att-list, .sv-legend, .sv-table, .sv-dash-row { padding-left: 16px; padding-right: 16px; }
  .sv-bars li { grid-template-columns: minmax(0, 1fr) 52px; }
  .sv-bars li .sv-track { grid-column: 1 / -1; grid-row: 2; }
  .sv-bars li .sv-bc { display: none; }
  .sv-qrow { grid-template-columns: minmax(0, 1fr); }
  .sv-qn { display: none; }
  .sv-qtop { grid-template-columns: minmax(0, 1fr); }
}
/* ===================== end Engagement survey ===================== */
/* ===================== Recognition & Employee of the Month (pages/recognition.js, pages/recognition-staff.js) =====================
   Sun gold marks awards (Star of the Month, Ellothean); sea marks points. Strict CSP: widths via data-w + applyStyles. */
.rc-ph { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--well); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--sea-ink); }
.rc-ph.sm { width: 32px; height: 32px; font-size: 12px; }
.rc-ph.lg { width: 52px; height: 52px; font-size: 17px; }
.rc-ph.rc-ini { background: var(--tint-sea); }
.rc-meter { height: 10px; border-radius: 99px; background: var(--well); overflow: hidden; }
.rc-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sea), var(--sun-1)); transition: width .5s ease; }
.rc-rate-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.rc-rate-h b { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
.rc-n { display: block; font-family: var(--f-display); font-size: 34px; line-height: 1.05; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-l { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.rc-quote { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--sun-2); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rc-cat { color: var(--gold-ink); font-weight: 600; }
.rc-feed { list-style: none; margin: 0; padding: 0; }
.rc-feed li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.rc-feed li:first-child { border-top: 0; }
/* Recognition feed dot (scoped: .rc-dot alone is the role-change "·" separator) */
.rc-feed .rc-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; padding: 0; border-radius: 50%; background: var(--sun-1); box-shadow: 0 0 0 4px var(--tint-gold); }
.rc-feed.office { padding: 4px 18px 10px; }
.rc-ann { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, var(--tint-gold), #fff7e3); border: 1px solid #f3dcb4; color: var(--gold-ink); }
.rc-ann svg { width: 30px; height: 30px; flex: none; color: var(--sun-1); }
.rc-ann b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.rc-ann span { display: block; font-size: 13px; }
.rc-ann.office { margin-bottom: 16px; }
.rc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--tint-sea); color: var(--sea-ink); font-size: 13px; font-weight: 600; }
.rc-badge b { font-weight: 700; }
.rc-badge svg { width: 14px; height: 14px; }
.rc-badge.award { background: var(--tint-gold); color: var(--gold-ink); }
.rc-badge.award.top { background: var(--sun-1); color: #3d2405; }
ul.rc-hist { list-style: none; margin: 0; padding: 0; } /* ul only: table.rc-hist is the role-change history */
ul.rc-hist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
ul.rc-hist li:first-child { border-top: 0; }
ul.rc-hist li.rev { opacity: .75; }
.rc-hp { flex: none; min-width: 48px; padding: 4px 0; border-radius: 10px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tint-sea); color: var(--sea-ink); }
.rc-hp.neg { background: var(--tint-coral); color: #9a2f1f; }
.rc-catopt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.rc-catopt input { position: absolute; opacity: 0; pointer-events: none; }
.rc-catopt:has(input:checked) { border-color: var(--sea-ink); background: var(--tint-sea); box-shadow: 0 0 0 3px rgba(19, 167, 192, .15); }
.rc-catopt:has(input:focus-visible) { outline: 2px solid var(--sky-blue); outline-offset: 2px; }
.rc-catn { font-weight: 650; color: var(--ink); line-height: 1.25; }
.rc-catp { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.rc-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-cats.office { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-people { list-style: none; margin: 8px 0 0; padding: 0; max-height: 360px; overflow-y: auto; }
.rc-people.office { max-height: 260px; border: 1px solid var(--border); border-radius: 12px; }
.rc-person { display: flex; width: 100%; gap: 12px; align-items: center; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.rc-person:hover, .rc-person:focus-visible { background: var(--surface-2); }
.rc-person .cell-sub { display: block; }
.rc-none { padding: 12px 8px; }
.rc-picked { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tint-sea); }
.rc-who { display: flex; gap: 10px; align-items: center; }

/* ---- phone ---- */
.clk-card.rc-home h3 { margin-top: 4px; }
.rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rc-act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 78px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); font: inherit; font-size: 15px; font-weight: 650; color: var(--ink); text-align: left; cursor: pointer; }
.rc-act svg { width: 22px; height: 22px; color: var(--sea-ink); }
.rc-act.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.rc-act.primary svg { color: var(--sun-1); }
.rc-bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.rc-bar h2 { margin: 0; font-family: var(--f-display); font-size: 24px; font-weight: 600; }
.rc-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 99px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rc-back svg { width: 18px; height: 18px; }
.rc-score .rc-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.rc-wait { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.rc-wait svg { width: 16px; height: 16px; }
.rc-cta { width: 100%; margin: 4px 0 14px; }
.rc-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc-awards li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tint-gold); color: var(--gold-ink); }
.rc-awards li svg { width: 26px; height: 26px; flex: none; color: var(--sun-1); }
.rc-awards li.top { background: linear-gradient(120deg, var(--sun-2), var(--sun-1)); color: #3d2405; }
.rc-awards li.top svg { color: #3d2405; }
.rc-awards b { display: block; color: var(--ink); }
.rc-awards span { font-size: 13px; }
.rc-sent { list-style: none; margin: 0; padding: 0; }
.rc-sent li { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rc-sent li:first-child { border-top: 0; }
.rc-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.rc-toggle input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--sea-ink); flex: none; }
.rc-toggle .cell-sub { display: block; margin-top: 2px; }
.rc-intro { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.rc-left { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 99px; background: var(--tint-sea); color: var(--sea-ink); font-size: 13px; font-weight: 600; }
.rc-left.none { background: var(--tint-coral); color: #9a2f1f; }
.rc-step h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.rc-num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.rc-search { position: relative; }
.rc-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); }
.rc-search .input { padding-left: 38px; min-height: 48px; font-size: 16px; }
.rc-why { width: 100%; font-size: 16px; line-height: 1.45; }
.rc-count { margin-top: 6px; text-align: right; }
.rc-files { list-style: none; margin: 8px 0; padding: 0; }
.rc-files li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.rc-files li svg { width: 18px; height: 18px; color: var(--sea-ink); }
.rc-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; cursor: pointer; }
.rc-add svg { width: 18px; height: 18px; }
.rc-sent-ok { text-align: center; padding: 28px 20px; }
.rc-sent-ok h2 { margin: 12px 0 6px; font-family: var(--f-display); font-size: 26px; font-weight: 600; }
.rc-sent-ok p { margin: 0 0 18px; color: var(--ink-2); }
.rc-sent-ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--tint-sea); color: var(--sea-ink); }
.rc-sent-ic svg { width: 32px; height: 32px; }

/* ---- office ---- */
.rc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.rc-h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; }
.rc-noms { display: grid; gap: 12px; }
.rc-nom { padding: 16px 18px; }
.rc-nom-h { display: flex; gap: 12px; align-items: center; }
.rc-nom-cat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rc-chip { padding: 4px 10px; border-radius: 99px; background: var(--tint-gold); color: var(--gold-ink); font-size: 13px; font-weight: 650; white-space: nowrap; }
.rc-pts { font-weight: 700; color: var(--sea-ink); font-variant-numeric: tabular-nums; }
.rc-mot { margin: 12px 0 8px; padding: 10px 14px; border-left: 3px solid var(--sun-1); border-radius: 0 12px 12px 0; background: var(--surface-2); font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.rc-nom-meta { font-size: 13px; color: var(--ink-3); }
.rc-sim { margin: 10px 0 0; }
.rc-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rc-dec { margin-top: 12px; }
.rc-empty { color: var(--ink-3); }
.rc-mini { list-style: none; margin: 0; padding: 0 16px 8px; }
.rc-mini li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.rc-mini li:first-child { border-top: 0; }
.rc-monthbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; }
.rc-monthbar h2 { margin: 0; min-width: 170px; text-align: center; font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.rc-monthbar .tag svg { width: 12px; height: 12px; vertical-align: -1px; }
.rc-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; padding: 0; }
.rc-steps li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border-strong); color: var(--ink-3); }
.rc-steps li b { color: var(--ink-2); }
.rc-steps li span { font-size: 13px; }
.rc-steps li.now { border-style: solid; border-color: var(--sun-1); background: var(--tint-gold); }
.rc-steps li.done { border-style: solid; border-color: #bfe2ea; background: var(--tint-sea); }
.rc-bus { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin: 14px 0; }
.rc-bu .card-head h3 { margin: 0; }
.rc-bu .tag svg { width: 12px; height: 12px; vertical-align: -1px; }
.rc-pend { display: flex; align-items: center; gap: 6px; padding: 0 18px 8px; color: var(--gold-ink); }
.rc-pend svg { width: 14px; height: 14px; }
.rc-star { display: flex; gap: 12px; align-items: center; margin: 0 14px 12px; padding: 12px; border-radius: 14px; background: var(--tint-gold); }
.rc-medal { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--sun-1); color: #3d2405; }
.rc-medal svg { width: 22px; height: 22px; }
.rc-medal.big { width: 64px; height: 64px; }
.rc-medal.big svg { width: 34px; height: 34px; }
.rc-lb { width: 100%; }
.rc-lb tr.sug td { background: var(--tint-sea); }
.rc-lb input[type=radio] { width: 18px; height: 18px; accent-color: var(--sea-ink); }
.rc-tie { margin: 8px 14px 0; }
.rc-confirm { display: flex; gap: 8px; padding: 12px 14px 14px; flex-wrap: wrap; }
.rc-confirm .input { flex: 1 1 220px; }
.rc-ell .card-head h2 svg { color: var(--sun-1); }
.rc-ell-win { display: flex; gap: 16px; align-items: center; padding: 6px 18px 18px; }
.rc-ell-win h3 { margin: 2px 0; font-family: var(--f-display); font-size: 28px; font-weight: 600; }
.rc-cands { list-style: none; margin: 0; padding: 0 14px; }
.rc-cands li label { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); cursor: pointer; }
.rc-cands li:first-child label { border-top: 0; }
.rc-cands li.sug label { background: var(--tint-sea); border-radius: 12px; }
.rc-cands .cell-sub { display: block; }
.rc-cands input { width: 18px; height: 18px; accent-color: var(--sea-ink); }
.rc-rules { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.rc-inline { display: flex; gap: 8px; }
.rc-inline .input { max-width: 110px; }
tr.off td { color: var(--ink-3); }
/* staff file */
.rcf-card .card-head .folder-ic svg { color: var(--gold-ink); }
.rcf-stats { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 4px 18px 14px; }
.rcf-rate .cell-sub { display: block; margin-top: 4px; }
.rcf-row { display: flex; gap: 12px; align-items: flex-start; padding: 0 18px 12px; }
.rcf-k { flex: none; width: 64px; padding-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rcf-pend { padding: 4px 18px 14px; }
.rcf-pad { padding: 0 18px 12px; }
.rcf-hist { padding: 0 18px 12px; }
.rcf-hist summary { cursor: pointer; padding: 8px 0; font-weight: 650; color: var(--ink-2); }
/* dashboard */
.rcd-pad { padding-bottom: 0; }
.rcd-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 6px 18px 16px; }
.rcd-h { margin: 0 0 8px; font-size: 15px; }
.rcd-top { margin: 0; padding: 0; list-style: none; counter-reset: rcd; }
.rcd-top li { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); counter-increment: rcd; }
.rcd-top li::before { content: counter(rcd); grid-row: span 2; font-family: var(--f-display); font-size: 20px; color: var(--sun-1); }
.rcd-top li .cell-sub { grid-column: 2; }
.rcd-top li .rc-pts { grid-column: 3; grid-row: 1; }
.rcd-grid .rc-feed.office { padding: 0; }
@media (max-width: 900px) {
  .rc-grid2, .rcd-grid { grid-template-columns: 1fr; }
  .rc-bus { grid-template-columns: 1fr; }
  .rc-cats.office { grid-template-columns: 1fr 1fr; }
  .rcf-stats { grid-template-columns: 1fr 1fr; }
  .rcf-rate { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .rc-steps { grid-template-columns: 1fr; }
  .rc-monthbar h2 { min-width: 0; font-size: 18px; }
}
/* ===================== end Recognition ===================== */
/* Recognition fixes: icons inside alerts / notes stay icon-sized; compact leaderboard */
.rc-app .alert svg, #rc-body .alert svg, .rcf-card .alert svg, .rc-nom .alert svg { width: 18px; height: 18px; flex: none; }
.rc-lb th, .rc-lb td { padding-left: 8px; padding-right: 8px; }
.rc-lb .rc-who b { white-space: nowrap; }
.rc-lb .rc-who .tag { display: inline-block; margin-top: 2px; }
.rc-picked .rc-ini { background: #fff; }
.rc-tb { white-space: nowrap; color: var(--ink-2); }