/* ==========================================================================
   Program Gaji design system ("The Calm Ledger", DESIGN.md; docs/design/DESIGN_SPEC.md §1, 19 Oct 2026).
   One file, in layers: tokens → base → layout (shell, month bar) → components → utilities → print.
   Pages use only these classes and the tokens; a page group may add wwwroot/css/pages/<group>.css (unlayered, so it
   wins) and must not add colours. No inline style attributes anywhere (CSP: style-src 'self').
   <html> carries data-accent (green, blue, purple, orange, red) and data-theme (light or dark; absent = follow the OS).
   Every component and state is on /Dev/Gallery (Development only).
   ========================================================================== */
@layer tokens, base, layout, components, utilities, print;

/* ---------- Tokens ---------- */
@layer tokens {
:root {
  color-scheme: light;
  /* Spacing 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* Type: body 15 px and nothing under 12.5 px (Deni, 18 Oct 2026, older eyes). */
  --fs-title: 30px; --fs-section: 18px; --fs-h3: 16px; --fs-body: 15px; --fs-sec: 14px; --fs-small: 13.5px; --fs-label: 12.5px; --fs-figure: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Neutral base */
  --bg: #eef1f6; --surface: #fff; --surface-2: #f7f9fc; --text: #141b26; --muted: #5b6577;
  --line: #e2e7ef; --line-soft: #edf0f5; --line-strong: #c9d1dd; --field-line: #7d879a; /* 3.6:1 on white */
  --chip: #edf0f5; --th-bg: #f7f9fc; --hover: #f4f7fb; --weekend: #f2f4f8; --card-line: transparent;
  /* Status: only for meaning, always with a word or icon */
  --ok: #0b7a5c; --ok-bg: #dff2ea; --ok-bg2: #f1faf6; --ok-fg: #0b6a50; --ok-line: #b6e0cf;
  --warn: #c26a00; --warn-bg: #fcefd9; --warn-bg2: #fff9ef; --warn-fg: #8c4f00; --warn-line: #efd09d;
  --danger: #c62828; --danger-bg: #fbe7e6; --danger-bg2: #fff6f5; --danger-fg: #a61d1d; --danger-line: #efbcb8; --danger-ring: rgba(198, 40, 40, .14);
  --info: #2b5aa8; --info-bg: #e5eefb; --info-bg2: #f3f7fd; --info-fg: #2b5aa8; --info-line: #c0d3f0;
  --sick-fg: #7046c9; --sick-bg: #f0ebfd;
  --on-accent: #fff; --on-status: #fff;
  /* Shape and elevation (two heights) */
  --radius: 16px; --radius-s: 10px; --radius-xs: 8px; --btn-radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06); --shadow-lg: 0 24px 64px rgba(0, 0, 0, .22);
  --shadow-toast: 0 12px 32px rgba(0, 0, 0, .25);
  /* Side menu: dark in both themes */
  --side-bg: #0f1c2e; --side-fg: #c9d2e0; --side-muted: #7f8ca3; --side-hover: rgba(255, 255, 255, .06); --side-on: rgba(255, 255, 255, .11); --side-line: rgba(255, 255, 255, .12); --side-w: 248px;
  --side-alert: #f0a24a; --side-alert-fg: #2b1a05;
  /* Tables, bars */
  --row-h: 46px; --cell-x: 16px; --top-h: 60px; --content-w: 1320px; --page-x: 40px;
  --bulk-bg: #16241f; --bulk-fg: #fff; --toast-bg: #18211d; --toast-fg: #fff; --backdrop: rgba(15, 18, 25, .42);
  --toast-ok: #4ade80; --toast-err: #fca5a5; --toast-info: #93c5fd;
  /* Accent (per login) */
  --accent: #0b7a5c; --accent-hover: #09684e; --accent-weak: #e3f3ed;
}
:root[data-accent=blue]   { --accent: #1f5fbf; --accent-hover: #1a51a3; --accent-weak: #e6eefb; }
:root[data-accent=purple] { --accent: #6b4fd1; --accent-hover: #5b42b6; --accent-weak: #efebfc; }
:root[data-accent=orange] { --accent: #b4500a; --accent-hover: #9a4408; --accent-weak: #fcefe3; }
:root[data-accent=red]    { --accent: #b42335; --accent-hover: #9c1d2d; --accent-weak: #fbe9eb; }

/* Dark (chosen, or following the OS): the same tokens once per way of choosing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #0e1116; --surface: #171b22; --surface-2: #1b2028; --text: #e8ecf2; --muted: #9aa4b2; --card-line: #232934;
    --side-bg: #090c11; --side-fg: #c3cbd8; --side-muted: #7a8596;
    --line: #2b2f34; --line-soft: #23272b; --line-strong: #3b4046; --field-line: #6b7482;
    --chip: #24282c; --th-bg: #1c1f23; --hover: #1f2327; --weekend: #1b1e21;
    --ok: #3cbf92; --ok-bg: #173a2e; --ok-bg2: #142a22; --ok-fg: #6fd6ae; --ok-line: #24533f;
    --warn: #f0a24a; --warn-bg: #3d2c12; --warn-bg2: #2b2214; --warn-fg: #f5bc72; --warn-line: #5a4219;
    --danger: #f06b6b; --danger-bg: #431c1c; --danger-bg2: #2e1818; --danger-fg: #f59a9a; --danger-line: #6b2a2a; --danger-ring: rgba(240, 107, 107, .2);
    --info: #8db4f3; --info-bg: #1c2b44; --info-bg2: #172235; --info-fg: #8db4f3; --info-line: #2c4166;
    --sick-fg: #b9a1f5; --sick-bg: #2b2346;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
    --bulk-bg: #0b2a21; --toast-bg: #26302b; --backdrop: rgba(0, 0, 0, .6);
    --on-accent: #0c120f; --on-status: #0c120f;
    --accent: #3cbf92; --accent-hover: #55cfa4; --accent-weak: #173a2e;
  }
  :root:not([data-theme=light])[data-accent=blue]   { --accent: #6ea4ff; --accent-hover: #8bb7ff; --accent-weak: #1b2b47; }
  :root:not([data-theme=light])[data-accent=purple] { --accent: #a990ff; --accent-hover: #bba6ff; --accent-weak: #2b2448; }
  :root:not([data-theme=light])[data-accent=orange] { --accent: #f2a04f; --accent-hover: #f5b26c; --accent-weak: #3d2a15; }
  :root:not([data-theme=light])[data-accent=red]    { --accent: #f2788a; --accent-hover: #f591a0; --accent-weak: #431d24; }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0e1116; --surface: #171b22; --surface-2: #1b2028; --text: #e8ecf2; --muted: #9aa4b2; --card-line: #232934;
  --side-bg: #090c11; --side-fg: #c3cbd8; --side-muted: #7a8596;
  --line: #2b2f34; --line-soft: #23272b; --line-strong: #3b4046; --field-line: #6b7482;
  --chip: #24282c; --th-bg: #1c1f23; --hover: #1f2327; --weekend: #1b1e21;
  --ok: #3cbf92; --ok-bg: #173a2e; --ok-bg2: #142a22; --ok-fg: #6fd6ae; --ok-line: #24533f;
  --warn: #f0a24a; --warn-bg: #3d2c12; --warn-bg2: #2b2214; --warn-fg: #f5bc72; --warn-line: #5a4219;
  --danger: #f06b6b; --danger-bg: #431c1c; --danger-bg2: #2e1818; --danger-fg: #f59a9a; --danger-line: #6b2a2a; --danger-ring: rgba(240, 107, 107, .2);
  --info: #8db4f3; --info-bg: #1c2b44; --info-bg2: #172235; --info-fg: #8db4f3; --info-line: #2c4166;
  --sick-fg: #b9a1f5; --sick-bg: #2b2346;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
  --bulk-bg: #0b2a21; --toast-bg: #26302b; --backdrop: rgba(0, 0, 0, .6);
  --on-accent: #0c120f; --on-status: #0c120f;
  --accent: #3cbf92; --accent-hover: #55cfa4; --accent-weak: #173a2e;
}
:root[data-theme=dark][data-accent=blue]   { --accent: #6ea4ff; --accent-hover: #8bb7ff; --accent-weak: #1b2b47; }
:root[data-theme=dark][data-accent=purple] { --accent: #a990ff; --accent-hover: #bba6ff; --accent-weak: #2b2448; }
:root[data-theme=dark][data-accent=orange] { --accent: #f2a04f; --accent-hover: #f5b26c; --accent-weak: #3d2a15; }
:root[data-theme=dark][data-accent=red]    { --accent: #f2788a; --accent-hover: #f591a0; --accent-weak: #431d24; }
}

/* ---------- Base ---------- */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0 0 10px; }
small { font-size: var(--fs-small); }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
img, svg { vertical-align: middle; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 120px; }
pre.plain { white-space: pre-wrap; margin: 0; font-size: var(--fs-small); }
.kbd { font-family: inherit; font-size: var(--fs-label); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
}

/* ---------- Layout: the shell (side menu, top bar), the month bar, the page ---------- */
@layer layout {
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.shell-main { min-width: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-xs); box-shadow: var(--shadow-lg); }
.skip:focus { left: 8px; }

/* Side menu */
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side-bg); color: var(--side-fg); padding: 20px 14px 24px; display: flex; flex-direction: column; gap: 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.side .side-brand { color: #fff; padding: 0 8px; font-size: 17px; }
.side-brand .app-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { color: var(--side-fg); text-decoration: none; }
.sn-group { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--radius-s); font-weight: 600; }
.sn-group .ic { color: var(--side-muted); }
.sn-group:hover { background: var(--side-hover); color: #fff; }
.sn-group.on { background: var(--side-on); color: #fff; }
.sn-group.on .ic { color: var(--accent); }
.side-nav .grow { flex: 1; min-width: 0; }
.side-nav .count.alert { background: var(--side-alert); color: var(--side-alert-fg); }
.sn-pages { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 10px 21px; padding-left: 17px; border-left: 1px solid var(--side-line); }
.sn-pages a { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-xs); font-size: 14.5px; color: var(--side-muted); }
.sn-pages a:hover { color: #fff; background: var(--side-hover); }
.sn-pages a.on { color: #fff; font-weight: 600; background: var(--side-on); box-shadow: inset 3px 0 0 var(--accent); }
.sn-sec { display: block; padding: 10px 10px 4px; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); opacity: .8; }

/* Top bar */
.top { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-in { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--page-x); display: flex; align-items: center; gap: var(--sp-5); height: var(--top-h); }
.top-where { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 14.5px; min-width: 0; }
.tw-group { display: inline-flex; align-items: center; gap: 8px; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 750; font-size: 16px; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.top-brand { display: none; }
.app-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 750; flex: none; }

/* Account menu (a <details> that drops down) */
.me { margin-left: auto; position: relative; }
.me > summary { list-style: none; display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 4px 4px 4px 10px; border-radius: 999px; font-size: var(--fs-sec); }
.me > summary::-webkit-details-marker { display: none; }
.me > summary:hover, .me[open] > summary { background: var(--chip); }
.me .who { text-align: right; line-height: 1.2; } .me .who b { display: block; } .me .who small { color: var(--muted); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 290px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 40; }
.menu .m-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.menu .m-head small { display: block; color: var(--muted); }
.menu .m-sec { padding: 8px 10px; }
.menu .m-sec + .m-sec { border-top: 1px solid var(--line-soft); }
.menu .m-label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.menu form { margin: 0; }
.menu .m-link { display: flex; width: 100%; padding: 8px 10px; border-radius: var(--radius-xs); color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; }
.menu .m-link:hover { background: var(--chip); text-decoration: none; }
.lang-switch { display: inline-flex; gap: 4px; }

/* Phone menu: a Menu button in a dark top bar */
.navmenu { display: none; position: relative; }
.navmenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); cursor: pointer; font-weight: 600; background: var(--surface); }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu-panel { position: absolute; left: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: 40; }
.navmenu-panel a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-xs); color: var(--text); }
.navmenu-panel a:hover { background: var(--chip); text-decoration: none; }
.navmenu-panel a.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.nm-group { border-top: 1px solid var(--line-soft); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.nm-title { padding: 4px 12px; font-size: var(--fs-small); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nm-home { font-weight: 600; }

/* Month bar: month, state badge, the stepper; under it the step's line, its parts and Lanjut */
.monthbar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.monthbar-in { max-width: var(--content-w); margin: 0 auto; padding: 10px var(--page-x); display: flex; align-items: center; gap: 12px 20px; justify-content: space-between; flex-wrap: wrap; }
.monthnav { display: inline-flex; align-items: center; gap: 8px; }
.mn-label { font-weight: 700; font-size: 16px; min-width: 132px; text-align: center; }
.mn-pick { width: 9.5rem; font-weight: 600; text-align: center; }
.stepnote-in { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--page-x) 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); align-items: center; }
.stepnote { margin: 0; display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-sec); min-width: 0; }
.sn-num { color: var(--muted); font-size: var(--fs-small); }
.sn-state { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sn-state.st-done { color: var(--ok-fg); } .sn-state.st-problem { color: var(--warn-fg); }
.sn-help { color: var(--muted); } .sn-also { color: var(--muted); }
.sn-next { flex: none; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.stepnote-in > .parts { grid-column: 1; }

/* Page */
.main { max-width: var(--content-w); margin: 0 auto; padding: 36px var(--page-x) 96px; }
.main.narrow { max-width: 760px; }
.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.panel { position: sticky; top: 180px; }
.panel > .card + .card { margin-top: var(--sp-4); }
.view-only-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-sec); margin-bottom: 16px; }
/* View-only logins: forms that change something are hidden (the server refuses them anyway). */
body.view-only form[method=post]:not(.keep), body.view-only .change-only { display: none !important; }

/* Signed out: the log-in card on plain Night Ink (no gradients, no accent as decoration). */
.bare { min-height: 100vh; display: grid; grid-template-columns: min(400px, 100%); justify-content: center; place-items: center; padding: 24px; background: var(--side-bg); }
.bare > div { width: 100%; }
.bare .seg { background: rgba(255, 255, 255, .08); }
.bare .seg button { color: var(--side-fg); }
.bare .seg button.on { color: var(--text); }
.login-card { width: 400px; max-width: 100%; padding: 32px; }
.login-card .app-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 17px; margin: 0 auto 12px; }
.h-login { font-size: 22px; }

@media (max-width: 1100px) {
  .with-panel, .g-side { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
}
@media (max-width: 1000px) {
  :root { --page-x: 24px; }
  .shell { display: block; }
  .side, .top-where { display: none; }
  .navmenu, .top-brand { display: flex; }
  .top { background: var(--side-bg); border-bottom-color: transparent; backdrop-filter: none; }
  .top-brand { color: #fff; }
  .navmenu > summary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
  .me > summary { color: #fff; }
  .me > summary:hover, .me[open] > summary { background: rgba(255, 255, 255, .1); }
  .me .who small { color: var(--side-muted); }
}
@media (max-width: 760px) {
  :root { --page-x: 16px; }
  .top-in { gap: 12px; }
  .brand span:not(.app-icon) { display: none; }
  .me .who { display: none; }
  .main { padding-top: 20px; }
  .stepnote-in { grid-template-columns: minmax(0, 1fr); }
  .sn-next { grid-column: 1; grid-row: auto; width: 100%; height: 40px; }
}
}

/* ---------- Components ---------- */
@layer components {
/* Page header: crumbs, eyebrow, the one title, a sub line, actions (one primary at most) */
.page-head { margin-bottom: 28px; }
.ph-row { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.ph-text { min-width: 0; }
.page-head h1 { font-size: var(--fs-title); line-height: 1.2; font-weight: 750; letter-spacing: -.025em; }
.page-head .sub { margin: 6px 0 0; color: var(--muted); max-width: 72ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs { font-size: var(--fs-sec); color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); } .crumbs .sep { margin: 0 6px; opacity: .5; }
.eyebrow { margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.section-title { font-size: var(--fs-small); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.prose { max-width: 72ch; color: var(--muted); }
.person { display: flex; gap: 14px; align-items: center; }
.person h1 { font-size: var(--fs-title); } .person .sub { margin: 4px 0 0; color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--text); font-weight: 700; font-size: var(--fs-sec); flex: none; }
.avatar.lg { width: 52px; height: 52px; font-size: 19px; }
progress.progress { display: block; width: 100%; max-width: 420px; height: 6px; margin-top: var(--sp-3); border: 0; border-radius: 999px; background: var(--chip); overflow: hidden; appearance: none; }
progress.progress::-webkit-progress-bar { background: var(--chip); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.home-month { gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 0; flex-wrap: wrap; }
.card-head h2 { font-size: var(--fs-section); } .card-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sec); max-width: 72ch; }
.card-head > .badge { margin-top: 2px; }
.badge.badge-wrap { white-space: normal; height: auto; min-height: 22px; padding: 2px 8px; line-height: 1.3; }
.card-act { display: flex; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 16px 24px 24px; }
.card > .tbl-wrap, .card .flush { border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.card.muted-card { opacity: .72; }
.card.cur { outline: 2px solid var(--accent); outline-offset: -1px; }
details.rules-card > summary, details.hist-card > summary { list-style: none; cursor: pointer; }
/* A collapsible card: <details class="card"><summary class="card-head"><h2>…</h2></summary>… */
details.card > summary.card-head { cursor: pointer; list-style: none; color: var(--text); display: flex; justify-content: flex-start; align-items: center; gap: var(--sp-2); }
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card > summary.card-head h2 { margin: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
details.card:not(.disclosure) > summary.card-head h2::after { content: " ▾"; color: var(--muted); }
details.card:not(.disclosure)[open] > summary.card-head h2::after { content: " ▴"; }
details.card[open] > summary.card-head { margin-bottom: var(--sp-3); }
details.rules-card > summary::-webkit-details-marker, details.hist-card > summary::-webkit-details-marker { display: none; }
details.rules-card > summary::after, details.hist-card > summary h2::after { content: " ▾"; color: var(--muted); }
details.rules-card[open] > summary::after, details.hist-card[open] > summary h2::after { content: " ▴"; }
details.hist-card > summary { padding-bottom: 18px; }
details.rules-card[open] > summary + .card-body { padding-top: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: var(--btn-radius); border: 1px solid transparent; font-weight: 550; cursor: pointer; white-space: nowrap; text-decoration: none; background: none; line-height: 1; }
.btn:hover { text-decoration: none; }
.btn.sm { height: 34px; padding: 0 12px; font-size: var(--fs-sec); }
.btn.lg, .page-head .actions .btn, .form-actions .btn { height: 44px; padding: 0 20px; }
.btn.lg { font-size: 16px; }
.btn.block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-secondary:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-weak); }
.btn-danger { background: var(--danger); color: var(--on-status); }
.btn-danger-o { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger-o:hover { background: var(--danger-bg2); }
.btn-link { background: none; border: 0; padding: 0; height: auto; color: var(--accent); font-weight: 550; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--danger); }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy=true] { opacity: .7; pointer-events: none; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--hover); text-decoration: none; }
.why-disabled { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-sec); }
.badge-btn { border: 0; cursor: pointer; }

/* Badges, counts, status words, chips */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 550; white-space: nowrap; vertical-align: middle; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-bg); color: var(--ok-fg); } .b-warn { background: var(--warn-bg); color: var(--warn-fg); }
.b-danger { background: var(--danger-bg); color: var(--danger-fg); } .b-info { background: var(--info-bg); color: var(--info-fg); }
.b-neutral { background: var(--chip); color: var(--muted); } .b-accent { background: var(--accent-weak); color: var(--accent); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: var(--fs-label); font-weight: 600; text-align: center; line-height: 18px; margin-left: 4px; }
.count.alert { background: var(--warn-bg); color: var(--warn-fg); }
.count.bad { background: var(--danger-bg); color: var(--danger-fg); }
.ok-mark { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-size: var(--fs-sec); white-space: nowrap; }
.ok-mark .ic { color: var(--ok); }
.missing { display: inline-flex; gap: 4px; align-items: center; color: var(--warn-fg); font-size: var(--fs-sec); font-weight: 550; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.chip a { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; }
.chip a:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); text-decoration: none; }
.chips .clear { font-size: var(--fs-small); color: var(--muted); }
.chip-filter { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: var(--fs-sec); font-weight: 550; background: var(--surface); cursor: pointer; }
.chip-filter:hover { text-decoration: none; color: var(--text); }
.chip-filter.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
select.chip-filter { appearance: none; padding-right: 12px; }

/* Stats: summary first (label, figure, note); a tile with a link filters the list under it. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stats.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats.s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.s6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats.s5 .stat-v, .stats.s6 .stat-v { font-size: 21px; }
.stats:not(:last-child) { margin-bottom: var(--sp-5); }
.stat-v { white-space: nowrap; }
.stat-ic { margin-right: 4px; }
.stats.auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); color: var(--text); min-width: 0; }
a.stat:hover { text-decoration: none; outline: 1px solid var(--line-strong); }
.stat.on { outline: 2px solid var(--accent); background: var(--accent-weak); }
.stat-l { color: var(--muted); font-size: var(--fs-small); font-weight: 550; }
.stat-v { font-size: var(--fs-figure); font-weight: 750; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.stat-n { font-size: var(--fs-small); color: var(--muted); }
.stat-n.warn { color: var(--warn-fg); } .stat-n.danger { color: var(--danger); } .stat-n.ok { color: var(--ok-fg); } .stat-n.info { color: var(--info-fg); }
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; font-weight: 550; }
/* Status tiles (counts that filter): a word and an icon beside each colour */

/* Stepper (the month bar, and the tonnage import's own steps) */
.steps { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 2px; }
.steps li { display: flex; }
.steps li + li::before { content: ""; width: 12px; height: 1.5px; background: var(--line-strong); align-self: center; margin: 0 2px; }
.step { display: inline-flex; gap: 8px; align-items: center; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; color: var(--muted); font-weight: 550; font-size: var(--fs-small); }
.step:hover { text-decoration: none; background: var(--chip); }
.step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-size: var(--fs-label); font-weight: 700; flex: none; background: var(--surface); }
.step.done, .step.st-done { color: var(--text); }
.step.done .n { background: var(--ok); border-color: var(--ok); color: var(--on-status); }
.step.st-done .n { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.step.st-problem .n { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-fg); font-weight: 750; }
.step.st-inprogress .n { border-color: var(--accent); color: var(--accent); }
.step.cur { background: var(--accent-weak); color: var(--accent); }
.step .st-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn-fg); font-size: 12px; font-weight: 700; }
.st-who { display: inline-block; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: var(--fs-label); font-weight: 600; line-height: 18px; vertical-align: middle; }
.step.cur .n { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Parts of a step: a word, its state and a short fact */
.parts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-sec); }
.part { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.part-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 11px; font-weight: 700; color: var(--muted); flex: none; }
.part.st-done .part-ic { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.part.st-problem .part-ic { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-fg); }
.part.st-inprogress .part-ic { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-fg); }
.part-t { font-weight: 550; } .part-t a { color: var(--text); }
.part-n { color: var(--muted); font-size: var(--fs-small); }
.part.st-problem .part-n { color: var(--warn-fg); font-weight: 600; }
/* Home: the steps as a calm list */
.flow { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 var(--sp-2); }
.flow-row { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 20px; border-top: 1px solid var(--line-soft); }
.flow-row:first-child { border-top: 0; }
.flow-row .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-weight: 700; font-size: var(--fs-small); flex: none; color: var(--muted); background: var(--surface); }
.flow-row.st-done .n { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.flow-row.st-problem .n { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-fg); }
.flow-row.cur { background: var(--accent-weak); }
.flow-row.cur .n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.flow-row .grow { flex: 1; min-width: 0; }
.flow-row .t1 { font-weight: 600; }
.flow-row .t2 { color: var(--muted); font-size: var(--fs-sec); }
.flow-row .parts { margin-top: 6px; }
.state-word { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.st-done > .state-word { color: var(--ok-fg); } .st-problem > .state-word { color: var(--warn-fg); font-weight: 600; }

/* Tabs and segments */
.tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: thin; }
.tabs a { padding: 10px 12px; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a.on { color: var(--text); border-color: var(--accent); }
.tabs a.on .count { background: var(--accent-weak); color: var(--accent); }
.seg { display: inline-flex; background: var(--chip); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg button { padding: 5px 12px; border-radius: 7px; color: var(--muted); font-weight: 550; font-size: var(--fs-sec); border: 0; background: none; cursor: pointer; }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.on, .seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

/* Toolbar, search, filter panel, "⋯" menu, column picker */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tb-l, .tb-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filterbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: var(--btn-radius); background: var(--surface); color: var(--muted); width: 280px; max-width: 100%; }
.filterbar .search { width: 260px; }
.search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--text); min-width: 0; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.select, select.inp, .t select.cell-inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.select { height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--field-line); border-radius: var(--btn-radius); background-color: var(--surface); color: var(--text); }
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu .menu { right: 0; left: auto; width: max-content; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; }
.more-menu .menu a, .more-menu .menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-xs); color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; font-weight: 550; white-space: nowrap; }
.more-menu .menu a:hover, .more-menu .menu button:hover { background: var(--chip); text-decoration: none; }
.more-menu .menu form { margin: 0; }
.more-menu .menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.filter-panel > summary { list-style: none; }
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel[open] > summary { background: var(--chip); }
.filter-panel .menu { left: 0; right: auto; width: 300px; padding: var(--sp-3); }
.filter-panel .menu .field { margin-bottom: var(--sp-3); }
.colpick .menu label { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; }
.colpick .menu label:hover { background: var(--chip); }
.colpick .menu input { width: 16px; height: 16px; accent-color: var(--accent); }
.colpick .menu .m-label { padding: 4px 10px 6px; margin: 0; }
.col-off { display: none !important; }
.sec-index { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--sp-5); padding: var(--sp-2) 0; list-style: none; position: sticky; top: var(--top-h); z-index: 5; background: var(--bg); }
.sec-index a { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: var(--fs-sec); font-weight: 550; }
.sec-index a:hover { text-decoration: none; background: var(--hover); }

/* Bulk bar: shows while rows are selected */
.bulkbar { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; margin-bottom: 12px; border-radius: var(--radius); background: var(--bulk-bg); color: var(--bulk-fg); flex-wrap: wrap; }
.bulkbar .bb-count, .bulkbar .bb-scope { white-space: nowrap; }
.bulkbar .bb-act { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.bulkbar .bb-scope { font-size: var(--fs-sec); opacity: .85; }
.bulkbar .btn-secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: inherit; }
.bulkbar .btn-secondary:hover { background: rgba(255, 255, 255, .2); }
.bulkbar .btn-ghost { color: inherit; opacity: .85; }
.bulkbar a { color: inherit; text-decoration: underline; }

/* Tables */
.tbl-wrap { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.tbl-wrap.tall { max-height: calc(100vh - 220px); }
.tbl-wrap.tall.sticky-foot { max-height: calc(100vh - 260px); }
.t { width: 100%; border-collapse: separate; border-spacing: 0; }
.t th { position: sticky; top: 0; z-index: 1; background: var(--th-bg); text-align: left; font-size: var(--fs-label); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 var(--cell-x); height: 42px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t th a { color: inherit; }
.t td { padding: 4px var(--cell-x); height: var(--row-h); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: var(--hover); }
.t td.r, .t th.r { text-align: right; font-variant-numeric: tabular-nums; }
.t td.r, .t td.num { white-space: nowrap; }
.t td.c, .t th.c { text-align: center; }
.t tfoot td { font-weight: 650; border-top: 2px solid var(--line-strong); height: 44px; background: var(--th-bg); }
.t .sel { width: 44px; padding-right: 0; }
.t .exp { width: 36px; padding: 0 0 0 4px; }
.t input[type=checkbox], .check-inline input { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
.t tr.sel-on td { background: var(--accent-weak); }
.t .name a { color: var(--text); font-weight: 550; } .t .sub2 { display: block; font-size: var(--fs-small); color: var(--muted); }
.t tr.row-err td { background: var(--danger-bg2); } .t tr.row-warn td { background: var(--warn-bg2); } .t tr.row-changed td { background: var(--info-bg2); }
.t tr.row-dim td { color: var(--muted); }
.t tr.row-weekend td { background: var(--weekend); }
.t.compact td { height: 38px; }
.t .net { font-weight: 650; }
.t .row-link { font-size: var(--fs-sec); font-weight: 550; }
.t tr.detail-row > td { background: var(--surface-2); padding: 0; height: auto; }
.t tr.detail-row:hover > td { background: var(--surface-2); }
@media (min-width: 761px) { .t td.name { min-width: 12rem; } }
.t .cell-inp { width: 100%; min-width: 72px; height: 30px; border: 1px solid var(--field-line); border-radius: 6px; padding: 0 8px; background-color: var(--surface); color: var(--text); }
.t select.cell-inp { padding-right: 26px; background-position: right 8px center; }
.t .cell-inp.num { text-align: right; } .t .cell-inp.changed { border-color: var(--info-fg); background-color: var(--info-bg2); }
.t .cell-inp.bad, .t .cell-inp.input-validation-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }
.t .cell-err { color: var(--danger); font-weight: 600; font-size: var(--fs-small); margin-top: 4px; white-space: normal; }
.sticky-first .t td:first-child, .sticky-first .t th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.sticky-first .t th:first-child { z-index: 3; background: var(--th-bg); }
.sticky-first .t.has-sel td:nth-child(2), .sticky-first .t.has-sel th:nth-child(2) { position: sticky; left: 44px; z-index: 2; background: var(--surface); }
.sticky-first .t.has-sel th:nth-child(2) { z-index: 3; background: var(--th-bg); }
.sticky-foot tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--th-bg); box-shadow: 0 -1px 0 var(--line-strong); }
.expander { background: none; border: 0; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); display: inline-grid; place-items: center; }
.expander:hover { background: var(--chip); color: var(--text); }
.expander .ic { transition: transform .15s; }
.expander[aria-expanded=true] .ic { transform: rotate(90deg); }
.slip-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); padding: var(--sp-3) var(--sp-5) var(--sp-4) 60px; font-size: var(--fs-sec); }
.slip-lines h4 { font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--sp-2) 0 4px; }
.slip-lines dl { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-4); margin: 0; }
.slip-lines dt { color: var(--muted); } .slip-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.slip-lines dt.sum, .slip-lines dd.sum { color: var(--text); font-weight: 650; border-top: 1px solid var(--line); padding-top: 3px; }
.slip-lines dt.part, .slip-lines dd.part { font-size: var(--fs-small); color: var(--muted); }
.slip-lines dt.part { padding-left: 10px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--muted); font-size: var(--fs-sec); gap: 12px; flex-wrap: wrap; }
.pager .pg { display: flex; gap: 4px; flex-wrap: wrap; }
.pager .pg a, .pager .pg span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--text); padding: 0 6px; }
.pager .pg a:hover { background: var(--chip); text-decoration: none; }
.pager .pg .on { background: var(--accent); color: var(--on-accent); }
/* The payslip preview */
.slip { font-variant-numeric: tabular-nums; } .slip td { height: 34px; }
.slip td:first-child { overflow-wrap: anywhere; }
.slip tr.sub td { font-weight: 650; border-top: 1px solid var(--line); }
.slip tr.tot td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--text); }
/* The attendance grid: a normal day has no colour; exceptions are coloured, each with its letter */
.att { border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.att th { position: sticky; top: 0; background: var(--th-bg); z-index: 1; font-weight: 600; color: var(--muted); height: 44px; padding: 0; min-width: 30px; text-align: center; border-bottom: 1px solid var(--line); line-height: 1.15; }
.att th small { display: block; font-weight: 550; font-size: var(--fs-label); }
.att td { height: 34px; text-align: center; padding: 0; border-bottom: 1px solid var(--line-soft); }
.att tbody tr:last-child td { border-bottom: 0; }
.att td.nm, .att th.nm { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 0 12px; min-width: 230px; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
.att th.nm { z-index: 3; background: var(--th-bg); }
.att td.nm a { color: var(--text); font-weight: 550; } .att td.nm span { color: var(--muted); margin-left: 6px; }
.att .we { background: var(--weekend); }
.att .c { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; font-weight: 700; font-size: var(--fs-label); }
.att .c.fix { text-decoration: underline dotted; text-underline-offset: 2px; }
.c-H { color: var(--muted); font-weight: 400; }
.c-h { color: var(--text); background: var(--chip); }
.c-A { color: var(--on-status); background: var(--danger); }
.c-q { color: var(--warn-fg); background: var(--warn-bg); outline: 1.5px solid var(--warn); }
.c-C { color: var(--info-fg); background: var(--info-bg); } .c-S { color: var(--sick-fg); background: var(--sick-bg); }
.c-p { color: var(--ok-fg); background: var(--ok-bg); } .c-L { color: var(--muted); background: var(--chip); }
.att td.sum { font-variant-numeric: tabular-nums; padding: 0 8px; text-align: right; font-weight: 550; }
.att th.sum { padding: 0 8px; text-align: right; }
.att td.sum.first, .att th.sum.first { border-left: 1px solid var(--line); }
.days-grid td { padding: 2px; }
.days-grid .cell-inp { min-width: 64px; width: 64px; height: 28px; padding: 0 5px; font-size: var(--fs-small); }
.days-grid td.sum { white-space: nowrap; }
.days-grid tfoot td { position: sticky; bottom: 0; background: var(--th-bg); border-top: 1px solid var(--line); height: 34px; }
.days-grid tfoot td.nm { z-index: 3; }
.t .cell-inp.no-scan, .days-grid .cell-inp.no-scan { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-bg); }
.swatch-no-scan { display: inline-block; width: 16px; height: 12px; border-radius: 3px; border: 1.5px solid var(--warn); background: var(--warn-bg); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); align-items: center; margin-top: 10px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
/* The general settings table: value, date and Save line up on every row */
.set-val { width: 9rem; flex: none; } .set-date { width: 10rem; flex: none; }
.hist-cell details summary { cursor: pointer; color: var(--muted); font-size: var(--fs-small); list-style: none; }
.hist-cell details summary::-webkit-details-marker { display: none; }
.hist-cell details summary:hover { color: var(--accent); }
.hist-cell details[open] summary { margin-bottom: 4px; }
/* Kas bon and change history tables */
.ledger { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger span { font-size: var(--fs-small); padding: 3px 8px; border-radius: 6px; background: var(--chip); color: var(--muted); }
.ledger span.cur { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.ledger span.paid { text-decoration: line-through; }
.kb-hist td:nth-child(4) { min-width: 150px; }
.kb-hist td:nth-child(5) { min-width: 240px; }
.ch-hist td { vertical-align: top; }
.ch-hist td:nth-child(4) { min-width: 150px; }
.ch-hist td:nth-child(5) { min-width: 280px; }
.ch-list { margin: 0; padding: 0; list-style: none; }
.ch-list li + li { margin-top: 2px; }
.ch-list s { color: var(--muted); }
.ch-hist details summary { cursor: pointer; color: var(--accent); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-head, .field-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-head > label, .field-label { font-weight: 600; font-size: 14.5px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { color: var(--muted); font-size: var(--fs-small); margin-top: -2px; }
.inp { height: 40px; border: 1px solid var(--field-line); border-radius: var(--btn-radius); padding: 0 12px; background-color: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.inp:focus, .cell-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.inp.sm { height: 34px; padding: 0 10px; font-size: var(--fs-sec); }
select.inp { padding-right: 32px; }
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; }
.inp.num { text-align: right; font-variant-numeric: tabular-nums; }
.inp[disabled], .inp[readonly], fieldset[disabled] .inp { background-color: var(--chip); color: var(--muted); }
.affix { display: flex; align-items: stretch; border: 1px solid var(--field-line); border-radius: var(--btn-radius); overflow: hidden; background: var(--surface); }
.affix .inp { border: 0; border-radius: 0; } .affix .inp:focus { box-shadow: none; }
.affix span { display: grid; place-items: center; padding: 0 12px; background: var(--chip); color: var(--muted); font-size: var(--fs-sec); white-space: nowrap; }
.affix:focus-within { border-color: var(--accent); }
.has-err .inp, .has-err .affix, .inp.input-validation-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }
.has-err { border-left: 3px solid var(--danger); padding-left: 12px; margin-left: -15px; }
.err-msg { display: flex; gap: 6px; align-items: flex-start; color: var(--danger); font-weight: 600; font-size: var(--fs-sec); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.check b { font-weight: 600; }
.check-inline { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: var(--fs-sec); }
.check-pad { padding: 5px 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid.c4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Fields side by side start their boxes on one line whatever their label, hint or error (subgrid rows). */
.form-grid > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.form-grid > .field > .field-head { margin-bottom: 6px; }
.form-grid > .field > .err-msg { margin-top: 6px; }
.form-grid:has(> .field) > :not(.field, .full) { grid-row: span 3; align-self: start; }
.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { flex: 0 1 auto; }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.form-actions .fa-note { color: var(--muted); font-size: var(--fs-sec); margin-left: 8px; }
.form-actions.flush { border-top: 0; margin-top: var(--sp-3); padding-top: 0; }
.form-actions.flush-s { border-top: 0; margin-top: var(--sp-2); padding-top: 0; }
.form-actions.noline { border-top: 0; }
.fieldset-title { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 4px; }
.fieldset-title + .form-grid { margin-top: 16px; }
.fieldset-sub { color: var(--muted); font-size: var(--fs-sec); margin: 0 0 16px; }
.form-sec + .form-sec { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
form[aria-busy=true] { opacity: .6; pointer-events: none; }
details.more-fields { border-top: 1px solid var(--line); margin-top: var(--sp-5); padding-top: var(--sp-4); }
details.more-fields > summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
details.more-fields > summary::-webkit-details-marker { display: none; }
details.more-fields > summary::before, details.disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.more-fields[open] > summary::before, details.disclosure[open] > summary::before { transform: rotate(45deg); }
details.more-fields[open] > summary { margin-bottom: var(--sp-4); }
details.more-fields > summary small { color: var(--muted); font-weight: 400; }
details.disclosure > summary { cursor: pointer; color: var(--accent); font-weight: 550; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure[open] > summary { margin-bottom: 12px; }
.tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.tier { display: flex; align-items: center; gap: 6px; border: 1px solid var(--field-line); border-radius: var(--radius-xs); padding: 4px 6px 4px 10px; background: var(--surface); font-size: var(--fs-sec); color: var(--muted); }
.tier input { width: 104px; height: 28px; border: 1px solid var(--field-line); border-radius: 6px; text-align: right; padding: 0 6px; background: var(--surface); color: var(--text); }
.picker-list { max-height: 220px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); padding: 6px; margin-top: 8px; background: var(--surface); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; }
.picker-item { padding: 5px 6px; border-radius: 6px; }
.picker-item:hover { background: var(--hover); }
.has-err .picker-list { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }
.dropzone { display: block; border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 32px; text-align: center; color: var(--muted); background: var(--surface); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-weak); }
.dropzone .ic { color: var(--accent); } .dropzone b { color: var(--text); }
/* The native file input is hidden (its text is the browser's language); the label itself is the button, site.js shows the chosen name. */
.dropzone { position: relative; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone .dz-pick { display: inline-block; margin-top: 12px; }
.dropzone .dz-file { display: block; margin-top: 8px; color: var(--text); font-weight: 600; }
.swatches { display: flex; gap: 8px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--text); }
.sw-green { background: #0b7a5c; } .sw-blue { background: #1f5fbf; } .sw-purple { background: #6b4fd1; } .sw-orange { background: #b4500a; } .sw-red { background: #b42335; }

/* Error summary, callouts */
.err-summary { display: flex; gap: 12px; border: 2px solid var(--danger); border-radius: var(--radius); padding: 16px 20px; background: var(--surface); color: var(--danger); margin-bottom: 24px; }
.err-summary h2 { font-size: var(--fs-section); color: var(--text); margin-bottom: 6px; }
.err-summary ul { margin: 0; padding-left: 18px; } .err-summary li { margin: 3px 0; }
.err-summary a { color: var(--danger); font-weight: 600; text-decoration: underline; }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid; margin-bottom: 16px; }
.callout p { margin: 2px 0 0; color: var(--text); } .co-body { flex: 1; min-width: 0; }
.co-act { display: flex; gap: 8px; align-self: center; flex-wrap: wrap; }
.co-warn { background: var(--warn-bg2); border-color: var(--warn-line); color: var(--warn-fg); }
.co-danger { background: var(--danger-bg2); border-color: var(--danger-line); color: var(--danger); }
.co-info { background: var(--info-bg2); border-color: var(--info-line); color: var(--info-fg); }
.co-ok { background: var(--ok-bg2); border-color: var(--ok-line); color: var(--ok-fg); }
.callout strong { color: var(--text); }
.callout ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); }
.callout.compact { padding: 10px 14px; align-items: flex-start; }
.callout.compact > .ic { margin-top: 2px; }
.callout.compact p { margin: 0; }
.callout .co-list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; color: var(--text); }
.callout .co-list.text-warn { color: var(--warn-fg); align-items: center; }

/* Problems and issue rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.rows li:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; } .rows .t1 { font-weight: 600; } .rows .t2 { color: var(--muted); font-size: var(--fs-sec); }
.rows .fix { white-space: nowrap; font-weight: 550; font-size: var(--fs-sec); }
.rows.attn li { padding: var(--sp-3) var(--sp-4); align-items: flex-start; }
.rows.attn .t1 { font-weight: 550; font-size: 14.5px; }
.sev { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sev.danger { background: var(--danger); } .sev.warn { background: var(--warn); } .sev.info { background: var(--info-fg); } .sev.ok { background: var(--ok); }
.sev-ic { margin-top: 2px; flex: none; color: var(--muted); }
.sev-danger .sev-ic { color: var(--danger); } .sev-warn .sev-ic { color: var(--warn); } .sev-info .sev-ic { color: var(--info-fg); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.problems .card-head h2 { display: flex; gap: 6px; align-items: center; }
.problems .rows li { padding: 12px 16px; align-items: flex-start; }
.problems .sev { margin-top: 6px; }
details.more-rows > summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); color: var(--accent); font-weight: 550; font-size: var(--fs-sec); border-top: 1px solid var(--line-soft); list-style: none; }
details.more-rows > summary::-webkit-details-marker { display: none; }
details.more-rows[open] > summary { color: var(--muted); }
details.warn-list > summary { list-style: none; cursor: pointer; padding-bottom: 16px; }
details.warn-list > summary::-webkit-details-marker { display: none; }
details.warn-list > summary h2::after { content: " ▾"; color: var(--muted); font-weight: 400; }
details.warn-list[open] > summary { padding-bottom: 0; }
details.warn-list[open] > summary h2::after { content: " ▴"; }
.quick-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.quick-links a { font-weight: 550; }

/* Toasts */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; gap: 12px; align-items: flex-start; min-width: 300px; max-width: 440px; padding: 14px 16px; border-radius: 12px; background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-toast); animation: toast-in .2s ease-out; }
.toast strong { display: block; font-weight: 600; } .toast .tb { display: block; opacity: .82; font-size: var(--fs-sec); }
.toast .ic { color: var(--toast-ok); margin-top: 1px; } .toast.t-error .ic { color: var(--toast-err); } .toast.t-info .ic { color: var(--toast-info); }
.toast form { margin: 0 0 0 auto; }
.toast-act { background: none; border: 0; color: var(--toast-info); font-weight: 600; cursor: pointer; padding: 0; }
.toast-x { background: none; border: 0; color: var(--toast-fg); opacity: .6; cursor: pointer; padding: 2px; margin-left: 4px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Dialogs */
dialog.dialog { border: 0; padding: 24px; width: 540px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
dialog.dialog.wide { width: 720px; }
dialog.dialog::backdrop { background: var(--backdrop); }
dialog.dialog:not([open]) { display: none; }
.dialog h2 { font-size: 20px; margin-bottom: 8px; }
.dlg-body p { margin: 0 0 10px; }
.dlg-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.dlg-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.dlg-danger { background: var(--warn-bg); color: var(--warn-fg); } .dlg-error { background: var(--danger-bg); color: var(--danger); }
.dlg-list { border: 1px solid var(--line); border-radius: var(--radius-s); margin: 12px 0; padding: 4px 0; max-height: 300px; overflow: auto; }
.dlg-list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 14.5px; }
.dlg-list div + div { border-top: 1px solid var(--line-soft); }
dialog.dialog.server[open] { position: fixed; inset: 0; margin: auto; z-index: 51; }
.server-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 50; }

/* Empty and loading states */
.empty { text-align: center; padding: 56px 24px; color: var(--muted); }
.empty h3 { color: var(--text); font-size: var(--fs-section); margin: 12px 0 6px; }
.empty p { max-width: 50ch; margin: 0 auto 18px; }
.empty .ic { color: var(--line-strong); }
.empty-ic { width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--warn-bg); color: var(--warn-fg); }
.empty-lift { margin-top: -30px; padding-bottom: 30px; }
.skeleton { display: flex; flex-direction: column; gap: 10px; }
.sk-row { display: flex; gap: 12px; }
.sk-b { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 25%, var(--line-soft) 50%, var(--chip) 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
.sk-b.w-40 { width: 40%; } .sk-b.w-20 { width: 20%; } .sk-b.w-15 { width: 15%; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Employee overview (Laporan): every status has a colour, an icon and a word */
.ov-month { margin-bottom: 16px; flex-wrap: wrap; }
.ov-overall { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--muted); font-weight: 550; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-small); margin: 0 0 12px; }
.ov-val { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-val.b-neutral { background: transparent; }
.ov-word { font-weight: 550; font-size: var(--fs-small); }
.ov-word.ov-under { display: block; color: var(--muted); font-size: var(--fs-label); font-weight: 550; text-align: right; }
.ov-table th, .ov-table td { white-space: nowrap; }
.ov-table tr.ov-groups th { height: 28px; text-align: center; border-left: 1px solid var(--line); }
.ov-table tr.ov-groups th:first-child { border-left: 0; }
.ov-table .ov-name { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 180px; white-space: normal; }
.ov-table thead .ov-name { z-index: 3; background: var(--th-bg); }
.ov-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ov-areas .stat-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ov-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 0; font-size: var(--fs-sec); }
.ov-dl dt { color: var(--muted); } .ov-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ov-sec { margin-bottom: 16px; }
.ov-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.t tr.ov-late td { background: var(--warn-bg2); }
.t tr.ov-cur td { font-weight: 600; }
.ov-trend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ov-chart { margin: 0; }
.ov-chart figcaption { font-size: var(--fs-small); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ov-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ov-chart .ov-base { stroke: var(--line-strong); stroke-width: 1; }
.ov-chart .ov-limit { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.ov-chart .ov-bar path { fill: var(--muted); opacity: .55; }
.ov-chart .ov-bar.cur path { opacity: 1; }
.ov-chart .ov-bar .hit { fill: transparent; }
.ov-chart .ov-bar:hover path { opacity: .85; }
.ov-chart .ov-axis { fill: var(--muted); font-size: var(--fs-label); }
.ov-chart .ov-num { fill: var(--text); font-size: var(--fs-label); font-weight: 600; }
.ov-lim { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.ov-lim .cell-inp { width: 84px; min-width: 0; text-align: right; color: var(--text); }
.ov-prod { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 550; white-space: nowrap; border: 1px solid transparent; }
.ov-prod.p-top { background: var(--info-fg); color: var(--surface); }
.ov-prod.p-tier { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }
.ov-prod.p-none { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.ov-prod.p-open { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }
.ov-prod.p-na { background: transparent; color: var(--muted); padding: 0; }
.ov-prod-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov-prod-line + .ov-prod-line { margin-top: 4px; }
.ov-noletter { display: block; font-size: var(--fs-label); color: var(--warn-fg); font-weight: 600; white-space: nowrap; }
.ov-rank-line { display: flex; flex-direction: column; white-space: nowrap; }
.ov-rank-line + .ov-rank-line { margin-top: 4px; }
.ov-h3 { font-size: var(--fs-body); margin: 0; }
.ov-views { margin-bottom: 16px; }
.ov-dil-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-talk { margin: 10px 0 0; line-height: 1.6; }
.ov-rule { max-width: 980px; line-height: 1.5; }
.ov-simple td { vertical-align: top; }
.ov-simple .ov-line { white-space: normal; min-width: 280px; }
.ov-simple .ov-noletter { display: inline; margin-left: 6px; }
.ov-trend-better { color: var(--ok-fg); font-weight: 600; white-space: nowrap; }
.ov-trend-worse { color: var(--warn-fg); font-weight: 600; white-space: nowrap; }
.ov-trend-same { color: var(--muted); white-space: nowrap; }
.ov-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ov-lists .card { margin: 0; }
.ov-rank-list { list-style: none; margin: 0; padding: 0 16px 12px; }
.ov-rank-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ov-rank-list li:first-child { border-top: 0; }
.ov-rank-list .ov-why { order: 3; }
.ov-place { min-width: 26px; height: 26px; border-radius: 50%; background: var(--chip); color: var(--text); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-small); }
.ov-points { margin-left: auto; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.ov-why { color: var(--muted); font-size: var(--fs-small); flex-basis: 100%; }
.ov-how { margin-bottom: 12px; }
.ov-how summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.ov-how .card-body { padding-top: 0; }
.ov-how p { margin: 0 0 6px; color: var(--muted); line-height: 1.5; }

/* The gallery's token swatches and type samples */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.swatch-box { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); flex: none; }
.tok-bg { background: var(--bg); } .tok-surface { background: var(--surface); } .tok-surface-2 { background: var(--surface-2); } .tok-text { background: var(--text); } .tok-muted { background: var(--muted); }
.tok-line { background: var(--line); } .tok-line-strong { background: var(--line-strong); } .tok-field-line { background: var(--field-line); } .tok-accent { background: var(--accent); } .tok-accent-weak { background: var(--accent-weak); }
.tok-ok { background: var(--ok); } .tok-ok-bg { background: var(--ok-bg); } .tok-warn { background: var(--warn); } .tok-warn-bg { background: var(--warn-bg); } .tok-danger { background: var(--danger); } .tok-danger-bg { background: var(--danger-bg); }
.tok-info-fg { background: var(--info-fg); } .tok-info-bg { background: var(--info-bg); } .tok-side-bg { background: var(--side-bg); }
.t-title { font-size: var(--fs-title); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; } .t-section { font-size: var(--fs-section); font-weight: 700; } .t-h3 { font-size: var(--fs-h3); font-weight: 650; }

/* Responsive: components */
@media (max-width: 1200px) { .stats.s5, .stats.s6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps .st-text { display: none; }
  .steps .step.cur .st-text { display: inline; }
  .ov-areas, .ov-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .page-head h1 { font-size: 22px; }
  .g2, .g3, .g4, .form-grid, .form-grid.c3, .form-grid.c4, .stats { grid-template-columns: minmax(0, 1fr); }
  .search { width: 100%; }
  .toasts { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; max-width: none; }
  .has-err { margin-left: -12px; padding-left: 9px; }
  .steps { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .steps li + li::before { width: 6px; }
  .ov-cards, .ov-trend { grid-template-columns: minmax(0, 1fr); }
  .ov-table .ov-name { min-width: 130px; }
  .toolbar .select { flex: 1 1 10rem; }
  /* General settings: each setting is a block (name, now and history, then the new value). */
  .set-table, .set-table tbody, .set-table tr, .set-table td { display: block; width: auto !important; }
  .set-table thead { display: none; }
  .set-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .set-table td { padding: 2px 0; border: 0; height: auto; }
  .set-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
  .set-table td[data-label] .row-flex { display: inline-flex; }
  .set-table td:last-child { padding-top: 8px; }
  .set-table form.row-flex { flex-wrap: wrap !important; }
  .set-val, .set-date { flex: 1 1 8rem; width: auto; }
}
.save-bar-sm { display: none; }
@media (max-width: 640px) {
  .save-bar-sm { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); position: sticky; bottom: 0; z-index: 5; margin: var(--sp-3) -16px 0; padding: var(--sp-3) 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
  /* The month bar: the help line and the other pages are left out; the state, the parts and Lanjut stay. */
  .stepnote .sn-help, .stepnote .sn-also { display: none; }
  .stepnote-in > .parts { gap: 4px 10px; }
  /* A callout's action goes under its text. */
  .callout { flex-wrap: wrap; } .co-act { flex-basis: 100%; justify-content: flex-start; }
  /* Tables grow with the page instead of an inner scroll box. */
  .tbl-wrap.tall, .tbl-wrap.tall.sticky-foot { max-height: none; }
  .why-disabled { justify-content: flex-start; }
  .att td.nm, .att th.nm { min-width: 120px; max-width: 120px; padding: 0 8px; }
  .att td.nm span { display: none; }
  /* Tables become cards (site.js adds .as-cards and each cell's label) */
  .t.as-cards thead { display: none; }
  .t.as-cards, .t.as-cards tbody, .t.as-cards tfoot, .t.as-cards tr, .t.as-cards td { display: block; width: 100%; }
  .t.as-cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); position: relative; }
  .t.as-cards tbody tr:last-child { border-bottom: 0; }
  .t.as-cards td { height: auto; padding: 2px 0; border: 0; text-align: left !important; display: flex; justify-content: space-between; gap: 12px; }
  .t.as-cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; flex: none; }
  .t.as-cards td.card-title { font-size: 16px; display: block; padding-bottom: 4px; padding-right: 40px; }
  .t.as-cards td.card-title::before { display: none; }
  .t.as-cards td.sel { position: absolute; right: 8px; top: 8px; width: auto; }
  .t.as-cards td.sel::before { display: none; }
  .t.as-cards td.exp { position: absolute; right: 44px; top: 8px; width: auto; }
  .t.as-cards td.exp::before { display: none; }
  .t.as-cards td.exp:empty, .t.as-cards tfoot td.exp, .t.as-cards tfoot td.sel { display: none; }
  .t.as-cards td:empty { display: none; }
  .t.as-cards td.net { font-size: 16px; }
  .t.as-cards tfoot tr { background: var(--th-bg); }
  .t.as-cards tfoot td { border: 0; }
  .t.as-cards tr.detail-row { padding: 0; }
  .t.as-cards .hide-sm { display: none; }
  .slip-lines { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
  .btn, .btn.sm { min-height: 40px; }
  .page-head .actions { width: 100%; gap: var(--sp-2); }
  .page-head .actions .btn { flex: 1 1 auto; }
  .stats, .stats.s3, .stats.s5, .stats.s6, .stats.auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .stat { padding: 12px 14px; }
  .stat-v { font-size: 19px; }
  .toolbar .select, .toolbar .search, .toolbar label { max-width: 100%; min-width: 0; } .toolbar .select { width: 100%; }
  .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
  /* The month bar's steps: 40 × 44 px tap targets; the current one keeps its name */
  .steps .step { height: 44px; min-width: 40px; justify-content: center; padding: 0; gap: 0; }
  .steps .step.cur { padding: 0 10px 0 6px; gap: 6px; }
  .steps .step .n { width: 26px; height: 26px; }
  .steps li + li::before { width: 4px; margin: 0; }
  .parts { flex-direction: column; gap: 4px; }
  .with-panel.blocked > .panel { order: -1; }
  .flow-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n text btn" "n state btn"; column-gap: var(--sp-3); row-gap: 2px; padding: var(--sp-3) var(--sp-4); }
  .flow-row .n { grid-area: n; align-self: start; } .flow-row .grow { grid-area: text; }
  .flow-row .state-word { grid-area: state; } .flow-row > .btn { grid-area: btn; }
  .rows.attn > li { flex-wrap: wrap; } .rows.attn > li > form { flex-basis: 100%; padding-left: 26px; }
  .ov-rank-line { white-space: normal; min-width: 170px; }
  .ov-dil-cards, .ov-lists { grid-template-columns: minmax(0, 1fr); }
  .ov-simple thead { display: none; }
  .ov-simple, .ov-simple tbody, .ov-simple tr, .ov-simple td { display: block; width: 100%; }
  .ov-simple tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .ov-simple td { border: 0; padding: 3px 0; height: auto; }
  .ov-simple .ov-line { min-width: 0; }
  .ov-simple td.ov-trend-cell::before, .ov-simple td.ov-place-cell::before, .ov-simple td.ov-points-cell::before { content: attr(data-label) ": "; color: var(--muted); }
}
}

/* ---------- Utilities ---------- */
@layer utilities {
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: none; vertical-align: middle; }
.muted { color: var(--muted); } .small { font-size: var(--fs-small); } .nowrap { white-space: nowrap; } .strong { font-weight: 600; } .fw-550 { font-weight: 550; }
.r { text-align: right; } .c { text-align: center; }
.mono { font-family: var(--font-mono); font-size: var(--fs-small); }
.danger-text { color: var(--danger); } .warn-text, .text-warn { color: var(--warn-fg); } .ok-text { color: var(--ok-fg); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mb-s { margin-bottom: 12px; } .mb-m { margin-bottom: 24px; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nowrap-row { flex-wrap: nowrap !important; }
.gap-s { gap: var(--sp-3) !important; }
.spacer { flex: 1; }
.inline-form { display: inline; margin: 0; }
.stack > * + * { margin-top: 24px; } .stack-s > * + * { margin-top: 12px; }
.grid { display: grid; gap: 24px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Phones: the grids stack. In this layer, because utilities beat the components layer whatever the media query. */
@media (max-width: 760px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.g-side { grid-template-columns: minmax(0, 1fr) 320px; }
.span-3 { grid-column: span 3; }
.w-6r { width: 6rem; } .w-7r { width: 7rem; } .w-8r { width: 8rem; } .w-9r { width: 9rem; } .w-10r { width: 10rem; } .w-11r { width: 11rem; } .w-12r { width: 12rem; } .w-13r { width: 13rem; }
.w-72 { width: 72px; min-width: 72px !important; } .w-150 { width: 150px; } .w-170 { width: 170px; } .w-200 { width: 200px; } .w-full { width: 100%; }
.col-w32 { width: 32%; } .col-w9 { width: 9%; } .col-w36 { width: 36%; }
.minw-120 { min-width: 120px; } .minw-130 { min-width: 130px; } .minw-200 { min-width: 200px; } .minw-240 { min-width: 240px; } .minw-14r { min-width: 14rem; } .minw-16r { min-width: 16rem; }
.mw-140 { max-width: 140px; } .mw-260 { max-width: 260px; } .mw-420 { max-width: 420px; } .mw-520 { max-width: 520px; } .mw-560 { max-width: 560px; }
.mw-640 { max-width: 640px; margin: var(--sp-5) auto; } .mw-720 { max-width: 720px; } .mw-820 { max-width: 820px; } .mw-980 { max-width: 980px; } .maxh-320 { max-height: 320px; }
.grow-field { flex: 1; min-width: 200px; } .grow-field.wide { min-width: 240px; }
.h-inp { height: 40px; } .h-small { font-size: 16px; } .self-start { align-self: start; } .self-center-label { align-self: center; margin-top: var(--sp-5); }
}

/* ---------- Print ---------- */
@layer print {
@media print {
  .top, .side, .monthbar, .stepnote-in, .toasts, .bulkbar, .page-head .actions, .navmenu, .colpick, .filterbar, .more-menu, .expander, .no-print { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .card, .tbl-wrap, .stat { box-shadow: none; }
  .ov-cards a.badge, .ov-val, .badge, .ov-prod { border: 1px solid currentColor; }
  .ov-table .ov-name { position: static; }
  .tbl-wrap { overflow: visible; }
}
}