/* ============================================================
Company OS — presentation layer.
Type : Archivo (variable width) + Geist Mono
Chrome : deep navy ink · warm paper canvas · one blue accent
Interaction craft: floating dock, 44px targets, spring press,
native scroll behaviour, motion that informs.
Client-neutral. --brand comes from company-config.js at boot; the ink
ramp below is only overridden when a client sets `inkColor`.
============================================================ */
/* ============================================================
NAVY OPS THEME — login room = app chrome
------------------------------------------------------------
The gate is the brand: a deep navy room, one brand-lit horizon,
and warm paper objects floating in it. Every dark surface in the
app (rail, crown, dock, topbar, toast, scrim) is that same room
seen from a different angle, so the shell never breaks the spell
the login screen casts.
Two worlds, one vocabulary:
ink* → the navy room. Chrome, nav, headers, overlays.
paper* → the warm content surfaces that sit IN the room.
Anything that must stay legible against navy carries the
`-on-ink` suffix (--brand-on-ink, --ok-on-ink, --warn-on-ink).
Use the tokens, never raw hex — company-config.js repaints the
brand ramp at boot and only tokens follow it.
============================================================ */
:root {
/* type */
--ui: "Archivo", "Helvetica Neue", sans-serif;
--mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
/* ── PAPER — warm content surfaces, not cold grey ───────────── */
--paper: #f6f5f1;
--paper-2: #eceae3;
--surface: #ffffff;
--sunken: #faf9f6;
/* ── INK — the navy room. -2 raised/hover, -3 active/selected ── */
--ink: #0b1220;
--ink-2: #121c2e;
--ink-3: #1a2740;
--ink-deep: #070d18;
--ink-line: #22304c;
/* translucent fills for chips/wells laid ON ink (survive any ink shade) */
--ink-fill: rgba(255, 255, 255, .05);
--ink-fill-2: rgba(255, 255, 255, .09);
--ink-hairline: rgba(255, 255, 255, .1);
/* text on ink */
--ink-text: #e9eef7;
--ink-dim: #a2b2c9;
--ink-faint: #6e8199;
/* Legacy --nav* names, kept only so old markup still lands on navy.
company-config.js overwrites them with its own tints at boot, so they
drift off the ramp above — reach for --ink/--ink-2/--ink-3 instead. */
--nav: var(--ink);
--nav-elev: var(--ink-2);
--nav-hover: var(--ink-2);
--nav-active: var(--ink-3);
/* ── ROOM ATMOSPHERE — the gate's three layers, reusable ─────
--ink-glow brand-lit horizon (one light source, not a wash)
--ink-grid blueprint hairlines (texture you feel before you see)
--ink-veil floor + vignette (darkens edges evenly)
Layer them on any ink panel: background: var(--ink-grid), var(--ink-veil); */
--ink-glow: radial-gradient(circle at 50% 50%,
color-mix(in srgb, var(--brand) 32%, transparent) 0%,
color-mix(in srgb, var(--brand) 9%, transparent) 36%,
transparent 64%);
--ink-grid:
repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5.5rem),
repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5.5rem);
--ink-veil:
linear-gradient(180deg, transparent 52%, rgba(0,0,0,.42) 100%),
radial-gradient(135% 110% at 50% 30%, transparent 42%, rgba(0,0,0,.5) 100%);
/* text on paper — navy-tinted greys so paper belongs to the room */
--tx-1: #111823;
--tx-2: #4a5566;
--tx-3: #7f8b9c;
/* structure */
--line: #e1dfd7;
--line-2: #ebe9e2;
--line-3: #f1efe9;
/* Paper structure cooled toward the room, for bands that share a screen
with the crown. Same weight as the warm set above — only the temperature
changes, so a band reads as furniture in the navy room rather than a
cut-out from a warmer one. */
--paper-line: color-mix(in srgb, var(--brand-soft) 55%, var(--line));
--paper-line-2: color-mix(in srgb, var(--brand-soft) 55%, var(--line-2));
--paper-floor: color-mix(in srgb, var(--brand-soft) 34%, var(--sunken));
--paper-wash: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
--paper-label: color-mix(in srgb, var(--brand-ink) 52%, var(--tx-3));
/* ── BRAND — navy-blue family ────────────────────────────────
Boot-time fallback only: company-config.js sets --brand and derives
hover/press/soft/ink from `brandColor` before first paint. Keep any
client brandColor inside the navy-blue family or the room breaks. */
--brand: #175cd3;
--brand-hover: #1450b5;
--brand-press: #11449c;
--brand-ink: #0d3579;
--brand-soft: #eaf0fc;
--brand-line: #cddcf7;
/* --brand is too dark to read ON navy — use this for accents on ink */
--brand-on-ink: #6ea4ff;
/* status — quiet on paper, lifted on ink */
--warn: #8f4d0c;
--warn-bg: #fbf3e6;
--warn-line: #ebd7b2;
--warn-on-ink: #dfa96b;
--ok: #0d6b46;
--ok-bg: #ebf5f0;
--ok-line: #c2dfd1;
--ok-on-ink: #46c08a;
--danger: #a92b21;
--danger-bg: #fbeeec;
--danger-on-ink: #f09a92;
--r: 8px;
--r-sm: 6px;
--r-lg: 12px;
--r-xl: 1.15rem;
--r-pill: 100px;
/* 6-step spacing scale */
--s1: .35rem;
--s2: .65rem;
--s3: 1rem;
--s4: 1.4rem;
--s5: 2rem;
--s6: 3rem;
--rail-w: 15.5rem;
--top-h: 4.25rem;
--dock-h: 3.9rem;
--dock-float: .6rem;
/* spacing ramp — steps up with the viewport. Never cramped. */
--gut: 1.15rem;
--pad: 1.15rem;
--stack: 1rem;
/* ── FOCUS + OVERLAY ────────────────────────────────────────
--focus is re-derived from brandColor by company-config.js. */
--focus: 0 0 0 2px #fff, 0 0 0 4px rgba(23, 92, 211, .4);
--ring: 0 0 0 3px var(--brand-soft);
--ring-ink: 0 0 0 3px rgba(110, 164, 255, .26);
--scrim: rgba(7, 13, 24, .52);
/* shadows cast navy, never neutral black */
--shadow-sm: 0 1px 2px rgba(11, 18, 32, .06);
--shadow-md: 0 8px 24px -8px rgba(11, 18, 32, .18), 0 2px 6px rgba(11, 18, 32, .06);
--shadow-lg: 0 32px 64px -20px rgba(8, 14, 26, .36), 0 4px 16px rgba(8, 14, 26, .11);
--shadow-dock: 0 14px 40px -10px rgba(11, 18, 32, .28), 0 3px 12px rgba(11, 18, 32, .09);
/* floating chrome: brand-tinted lift + a contact shadow so it sits ON the page */
--shadow-float: 0 18px 44px -14px rgba(13, 53, 121, .26), 0 4px 14px rgba(11, 18, 32, .1);
/* a paper object resting IN the navy room — the gate card's exact cast */
--shadow-on-ink:
inset 0 0 0 1px rgba(255, 255, 255, .05),
var(--shadow-lg),
0 44px 80px -36px color-mix(in srgb, var(--brand) 45%, transparent);
/* motion */
--ease: cubic-bezier(.22, .9, .3, 1);
--spring: cubic-bezier(.34, 1.4, .5, 1);
}
/* hidden must always win — every overlay here sets a display value */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* kill browser pull-to-refresh + rubber band: the shell should feel installed */
overscroll-behavior-y: none;
}
body {
margin: 0;
min-height: 100dvh;
background: var(--paper);
color: var(--tx-1);
font-family: var(--ui);
font-size: 15px;
line-height: 1.45;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overscroll-behavior: none;
/* `clip` not `hidden` — `hidden` breaks position:fixed children on iOS Safari */
overflow-x: clip;
-webkit-tap-highlight-color: transparent;
}
/* chrome is not selectable; content is */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
p, h1, h2, h3, h4, dd, dt, li, td, th, code, input, textarea, .amt, .figure, .row-t, .row-m, .check-t {
-webkit-user-select: text; user-select: text;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* mobile: browser scrollbars off, native feel */
@media (max-width: 61.99rem) {
::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--r) 0; }
.skip:focus { left: 0; }
/* ── press feedback: the single biggest "expensive app" tell ──── */
.pressable { transition: transform .16s var(--spring), background-color .14s ease, border-color .14s ease, color .14s ease; }
.pressable:active { transform: scale(.972); }
@media (hover: none) { .pressable:active { transform: scale(.96); } }
/* ── shared type atoms ─────────────────────────────────────── */
.eyebrow {
margin: 0;
font-size: .6875rem;
font-weight: 600;
font-stretch: 106%;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--tx-3);
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.muted { color: var(--tx-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.mark {
display: grid; place-items: center;
width: 2rem; height: 2rem; flex: none;
border-radius: 6px;
background: var(--brand);
color: #fff;
font-size: .75rem; font-weight: 700; font-stretch: 108%; letter-spacing: .02em;
}
.mark-sm { width: 1.85rem; height: 1.85rem; font-size: .68rem; border-radius: 5px; }
.mark-lg { width: 3rem; height: 3rem; font-size: 1.05rem; border-radius: 9px; }
/* company-config swaps the initials for an ![]()
when a client sets logoUrl */
.mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
/* ============================================================
IDENTITY GATE
The rail's ink, expanded to full bleed, with one floating paper card
in it — so the gate already shows the world the shell opens into.
Single centred column: the desktop and the 390 phone run the same
composition, only the scale changes.
============================================================ */
/* Paint the room on the root too, so the first frame and any overscroll
are ink rather than a flash of paper. Reverts the moment login lands. */
html:has(> body > #gate:not([hidden])),
body:has(> #gate:not([hidden])) { background: var(--ink); }
.gate {
min-height: 100dvh;
display: flex;
padding: clamp(1.75rem, 6vh, 3.5rem) var(--gut);
padding-bottom: max(clamp(1.75rem, 6vh, 3.5rem), env(safe-area-inset-bottom));
background: var(--ink);
color: var(--ink-text);
position: relative; overflow: hidden; isolation: isolate;
}
/* One brand-lit horizon above the wordmark — light with a source, not a wash. */
.gate::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: -30vh; transform: translateX(-50%);
width: min(78rem, 165vw); aspect-ratio: 1;
background: var(--ink-glow);
opacity: .62;
}
/* Blueprint grid + vignette: texture you feel before you see it. The linear
floor rides over the ellipse so the bottom edge darkens evenly across the
width — an ellipse alone leaves a lighter patch at bottom centre. */
.gate::after {
content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
background: var(--ink-grid), var(--ink-veil);
}
/* `margin: auto` not `justify-content` — centres the column but still lets the
top stay reachable on a short viewport instead of clipping it. */
.gate-stack { position: relative; margin: auto; width: min(26.5rem, 100%); }
.gate-brand { margin: 0 0 clamp(1.5rem, 4vh, 2.1rem); animation: gate-in .5s var(--ease) both; }
.gate-brand .mark {
width: 3.15rem; height: 3.15rem; font-size: 1.05rem; border-radius: 12px;
box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.26);
}
.gate-word {
margin: 1.1rem 0 .45rem;
font-size: clamp(2.3rem, 8.5vw, 2.9rem);
font-stretch: 112%; font-weight: 640; letter-spacing: -.042em; line-height: .98;
}
.gate-word span { color: var(--ink-faint); font-weight: 560; margin-left: .2em; }
.gate-co { margin: 0; color: var(--ink-dim); font-size: .875rem; }
/* The one object in the room. Hairline + brand-tinted cast so it sits ON the
ink instead of being pasted over it. */
.gate-card {
background: var(--surface);
color: var(--tx-1);
border-radius: var(--r-xl);
padding: clamp(1.3rem, 5vw, 1.6rem);
box-shadow: var(--shadow-on-ink);
animation: gate-card-in .55s var(--ease) .06s both;
}
.gate-ask {
margin: .45rem 0 1.3rem;
font-size: 1.45rem;
font-stretch: 106%; font-weight: 620; letter-spacing: -.028em; line-height: 1.15;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gate-card-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.picks { display: flex; flex-direction: column; }
.pick {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr) auto;
align-items: center;
gap: .1rem .9rem;
width: 100%;
min-height: 4rem;
text-align: left;
padding: .85rem .3rem;
border-top: 1px solid var(--line);
transition: background .16s ease, padding .16s var(--ease), transform .16s var(--spring);
}
.pick:last-child { border-bottom: 1px solid var(--line); }
.pick:hover:not(:disabled), .pick:focus-visible { background: var(--surface); padding-left: .8rem; padding-right: .8rem; outline-offset: -2px; }
.pick:active:not(:disabled) { transform: scale(.985); }
.pick:disabled { opacity: .36; cursor: not-allowed; }
.pick-av {
grid-column: 1; grid-row: 1 / span 2;
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--paper-2); border: 1px solid var(--line);
font-size: .74rem; font-weight: 650; color: var(--tx-2);
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pick-name { grid-column: 2; grid-row: 1; font-weight: 580; font-size: 1rem; letter-spacing: -.008em; }
.pick-hint { grid-column: 2; grid-row: 2; color: var(--tx-3); font-size: .82rem; }
.pick-tag {
grid-column: 3; grid-row: 1 / span 2; justify-self: end;
font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
}
.pick:hover .pick-av { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick.is-active .pick-av { background: var(--brand); border-color: var(--brand); color: #fff; }
.pick.is-active .pick-tag { color: var(--brand); }
/* ── login form (gate) ── */
.login { display: grid; gap: .9rem; }
.login .field { gap: .38rem; }
.login .field > label { font-size: .79rem; font-weight: 580; color: var(--tx-2); }
/* Taller than an in-app field, and sunken until focused: this is the one form
on a bare screen, so the active row should be the brightest thing on it. */
.login .field input {
min-height: 3.05rem;
padding: .75rem .9rem;
font-size: .975rem;
border-radius: var(--r);
background: var(--sunken);
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.login .field input::placeholder { color: var(--tx-3); }
.login .field input:hover:not(:focus):not(:disabled) { border-color: #cdcabf; }
.login .field input:focus { background: var(--surface); }
/* Keep an autofilled row on the card's own surface instead of Chrome's yellow. */
.login .field input:-webkit-autofill,
.login .field input:-webkit-autofill:hover {
-webkit-text-fill-color: var(--tx-1);
-webkit-box-shadow: inset 0 0 0 100px var(--sunken);
caret-color: var(--tx-1);
}
.login .field input:-webkit-autofill:focus {
-webkit-box-shadow: inset 0 0 0 100px var(--surface), var(--ring);
}
.login .btn {
min-height: 3.15rem;
margin-top: .3rem;
border-radius: var(--r);
font-size: .975rem; font-weight: 600; font-stretch: 104%;
box-shadow:
0 1px 2px color-mix(in srgb, var(--brand-ink) 34%, transparent),
0 12px 26px -14px color-mix(in srgb, var(--brand) 70%, transparent);
transition: background .16s ease, border-color .16s ease,
box-shadow .22s var(--ease), transform .16s var(--spring);
}
.login .btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow:
0 1px 2px color-mix(in srgb, var(--brand-ink) 40%, transparent),
0 18px 34px -14px color-mix(in srgb, var(--brand) 78%, transparent);
}
.login .btn:active:not(:disabled) { transform: scale(.985); }
.login .btn:disabled { box-shadow: none; }
/* Quiet error region: a tinted line with a left rule, not a shouting alert box.
app.js toggles [hidden], so the reveal is animated to read as deliberate. */
.login-msg {
margin: 0; padding: .68rem .85rem;
border: 0; border-radius: var(--r-sm);
background: var(--paper-2);
color: var(--tx-2);
font-size: .825rem; line-height: 1.5;
box-shadow: inset 2px 0 0 var(--tx-3);
animation: gate-msg .26s var(--ease) both;
}
.login-msg.is-error { background: var(--danger-bg); color: var(--danger); box-shadow: inset 2px 0 0 var(--danger); }
.login-msg.is-ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 2px 0 0 var(--ok); }
@keyframes gate-msg { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* Allowlist hint sits outside the card, on the ink — context, not a form field. */
.login-note {
margin: clamp(1rem, 3vh, 1.3rem) 0 0;
color: var(--ink-dim);
font-size: .8rem; line-height: 1.55;
animation: gate-in .55s var(--ease) .12s both;
}
.login-note:empty { display: none; }
.gate-foot {
margin: clamp(1.9rem, 6vh, 2.9rem) 0 0;
color: var(--ink-faint);
font-size: .76rem;
animation: gate-in .6s var(--ease) .16s both;
}
.gate-foot:empty { display: none; }
@media (min-width: 62rem) {
.gate { padding: 3rem 2rem; }
.gate-stack { width: min(27.5rem, 100%); }
.gate-card { padding: 1.9rem 2rem 2rem; }
}
/* ============================================================
APP SHELL
The gate's room, worn as chrome. Rail, topbar, dock, palette and
drawer head are all the same navy surface seen from a different
angle; the canvas stays warm paper so content still reads as the
objects floating in that room.
============================================================ */
/* Chrome-only derivations of the ink ramp. Scoped to the shell and the
overlays rather than :root so the token block up top stays the single
source for the palette — everything here is mixed from --ink/--brand,
so a client's navColor/brandColor still lands. */
.shell, .scrim, .sheet, .jump, .toast {
/* translucent chrome: the canvas reads through, so capsules float */
--chrome-glass: color-mix(in srgb, var(--ink) 88%, transparent);
/* top highlight — the tell that separates glass from flat dark paint */
--chrome-sheen: inset 0 1px 0 rgba(255, 255, 255, .08);
--chrome-cast: 0 20px 48px -16px rgba(5, 9, 18, .55), 0 4px 14px rgba(5, 9, 18, .28);
/* brand-lit selection, shared by rail link · dock pill · palette row */
--chrome-lit: color-mix(in srgb, var(--brand) 28%, var(--ink));
--chrome-lit-line: color-mix(in srgb, var(--brand) 44%, transparent);
--chrome-lit-glow: 0 8px 22px -12px color-mix(in srgb, var(--brand) 75%, transparent);
}
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
/* ── rail (desktop) ── */
/* `isolation` keeps the atmosphere pseudo-elements behind the rail's own
content without escaping into the canvas. */
.rail { display: none; position: relative; isolation: isolate; }
/* One brand-lit horizon behind the lockup — the gate's light source, read
edge-on. Sized in rem, not vh: the rail is a column, not a room. */
.rail::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: -11rem; transform: translateX(-50%);
width: 27rem; aspect-ratio: 1;
background: var(--ink-glow);
opacity: .5;
}
/* Blueprint grid + floor, straight off the gate. */
.rail::after {
content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
background: var(--ink-grid), var(--ink-veil);
opacity: .8;
}
.rail-brand {
display: flex; align-items: center; gap: .7rem;
padding: 1.15rem 1rem 1.1rem 1.15rem;
text-decoration: none; color: var(--ink-text);
border-bottom: 1px solid var(--ink-line);
}
/* Same lit mark as the gate's, one size down. */
.rail-brand .mark {
box-shadow:
0 8px 20px -8px color-mix(in srgb, var(--brand) 62%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .24);
}
.rail-brand-copy { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rail-brand-copy strong { font-size: .95rem; font-weight: 620; font-stretch: 106%; letter-spacing: -.015em; }
.rail-brand-copy em { font-style: normal; font-size: .72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-nav { flex: 1; overflow-y: auto; padding: 1rem .6rem 1.5rem; }
.rail-group { margin: 0 0 .3rem; padding: 1rem .55rem .4rem; font-size: .625rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.rail-group:first-child { padding-top: 0; }
.rail-link {
position: relative;
display: flex; align-items: center; gap: .65rem;
width: 100%; min-height: 2.35rem;
padding: .5rem .55rem;
border-radius: 7px;
color: var(--ink-dim);
font-size: .875rem; font-weight: 500; text-align: left;
transition: background .15s ease, color .15s ease, transform .16s var(--spring);
}
.rail-link:active { transform: scale(.98); }
.rail-link svg { width: 1.05rem; height: 1.05rem; opacity: .78; }
.rail-link > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover is a translucent fill, not a lighter navy: it reads as the glass
catching light rather than a second surface colour. */
.rail-link:hover { background: var(--ink-fill); color: var(--ink-text); }
/* The selected row is the only brand-lit thing in the rail. */
.rail-link.is-on {
background: linear-gradient(180deg,
color-mix(in srgb, var(--brand) 26%, transparent),
color-mix(in srgb, var(--brand) 14%, transparent));
color: #fff; font-weight: 560;
box-shadow: inset 0 0 0 1px var(--chrome-lit-line), var(--chrome-lit-glow);
}
.rail-link.is-on::before {
content: ""; position: absolute; left: -.6rem; top: 50%; transform: translateY(-50%);
width: 3px; height: 1.15rem; border-radius: 0 3px 3px 0; background: var(--brand-on-ink);
animation: bar-in .3s var(--ease) both;
}
@keyframes bar-in { from { height: 0; opacity: 0; } to { height: 1.15rem; opacity: 1; } }
.rail-link.is-on svg { opacity: 1; color: #fff; }
.rail-count { font-family: var(--mono); font-size: .7rem; font-weight: 500; color: var(--ink-faint); letter-spacing: -.02em; }
.rail-link.is-flag .rail-count { color: var(--warn-on-ink); }
.rail-link.is-on .rail-count { color: var(--ink-dim); }
.rail-id {
display: grid;
grid-template-columns: 2.1rem minmax(0, 1fr) auto;
align-items: center; gap: 0 .65rem;
min-height: 3.5rem;
padding: .8rem 1rem;
border-top: 1px solid var(--ink-line);
text-align: left; color: var(--ink-text);
transition: background .15s ease;
}
.rail-id:hover { background: var(--ink-fill); }
.rail-id .av {
grid-column: 1; grid-row: 1 / span 2;
display: grid; place-items: center;
width: 2.1rem; height: 2.1rem; border-radius: 50%;
background: var(--chrome-lit); color: #fff;
box-shadow: inset 0 0 0 1px var(--chrome-lit-line);
font-size: .7rem; font-weight: 650;
}
.rail-id b { grid-column: 2; grid-row: 1; font-weight: 560; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-id i { grid-column: 2; grid-row: 2; font-style: normal; font-size: .7rem; color: var(--ink-faint); }
.rail-id svg { grid-column: 3; grid-row: 1 / span 2; width: .95rem; height: .95rem; color: var(--ink-faint); }
/* ── frame + topbar ── */
.frame { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: .85rem;
min-height: 3.65rem;
padding: .65rem var(--gut);
/* Navy glass, so the rail continues across the top instead of handing off
to a paper bar — and the canvas still reads through as it scrolls under. */
background: var(--chrome-glass);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border-bottom: 1px solid var(--ink-line);
color: var(--ink-text);
box-shadow: var(--chrome-sheen);
}
.topbar-head { min-width: 0; flex: 1; }
.topbar-head .eyebrow { font-size: .625rem; margin-bottom: .08rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-head h1 {
margin: 0;
color: #fff;
font-size: 1.12rem; font-stretch: 108%; font-weight: 620; letter-spacing: -.024em; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-tools { display: none; align-items: center; gap: .5rem; }
.page-action { display: flex; align-items: center; gap: .5rem; }
.sync-status {
flex: none;
min-height: 1.9rem;
padding: .3rem .65rem;
border: 1px solid var(--ink-hairline);
border-radius: var(--r-pill);
background: var(--ink-fill);
color: var(--ink-dim);
font: 560 .7rem/1 var(--sans);
white-space: nowrap;
}
.sync-status.is-synced { color: #a7f3d0; border-color: color-mix(in srgb, #34d399 40%, transparent); }
.sync-status.is-saving, .sync-status.is-starting, .sync-status.is-pending { color: #bfdbfe; border-color: var(--chrome-lit-line); }
.sync-status.is-error, .sync-status.is-conflict, .sync-status.is-offline-pending { color: #fecaca; border-color: color-mix(in srgb, #f87171 45%, transparent); }
.sync-status:focus-visible { outline-color: var(--brand-on-ink); }
/* Search reads as an empty glass capsule cut into the navy bar. */
.jump-btn {
display: flex; align-items: center; gap: .5rem;
min-height: 2.3rem;
padding: .4rem .55rem .4rem .8rem;
border: 1px solid var(--ink-hairline); border-radius: var(--r-pill);
background: var(--ink-fill); color: var(--ink-dim);
font-size: .82rem; min-width: 12.5rem;
transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.jump-btn:hover { border-color: var(--chrome-lit-line); background: var(--ink-fill-2); color: var(--ink-text); }
.jump-btn svg { width: .95rem; height: .95rem; color: var(--ink-faint); }
.jump-btn:hover svg { color: var(--brand-on-ink); }
.jump-btn > span { flex: 1; text-align: left; }
kbd {
font-family: var(--mono); font-size: .68rem;
padding: .1rem .32rem;
border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
background: var(--sunken); color: var(--tx-3);
}
/* keycaps on navy: no bottom bevel to catch, just a lit hairline */
.topbar kbd, .jump-field kbd {
border: 1px solid var(--ink-hairline);
background: var(--ink-fill);
color: var(--ink-faint);
}
/* Page actions live on navy, so the secondary button turns to glass while
the primary keeps brand and picks up the lit cast. */
.topbar .btn-2 {
background: var(--ink-fill-2); border-color: var(--ink-hairline);
color: var(--ink-text); box-shadow: none;
}
.topbar .btn-2:hover { background: rgba(255, 255, 255, .14); border-color: var(--chrome-lit-line); }
.topbar .btn { box-shadow: var(--chrome-lit-glow); }
.top-id {
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem; flex: none;
border-radius: 50%; background: var(--brand); color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--chrome-lit-glow);
font-size: .72rem; font-weight: 650;
transition: transform .16s var(--spring);
}
.top-id:active { transform: scale(.94); }
.topbar-mark { display: none; }
.topbar-mark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* Focus has to clear navy, and --brand is too dark against it. */
.rail-brand:focus-visible, .rail-link:focus-visible, .rail-id:focus-visible,
.jump-btn:focus-visible, .top-id:focus-visible,
.dock button:focus-visible, .jump-item:focus-visible,
.sheet-head .icon-btn:focus-visible { outline-color: var(--brand-on-ink); }
.jump-btn:focus-visible { box-shadow: var(--ring-ink); }
.canvas {
flex: 1;
padding: var(--pad) var(--gut) calc(var(--dock-h) + var(--dock-float) + 2rem + env(safe-area-inset-bottom));
outline: none;
}
.stack { display: flex; flex-direction: column; gap: var(--stack); min-width: 0; }
.stack > * { min-width: 0; }
/* view transition — only on real navigation, never on keystroke re-renders */
.canvas.enter > * { animation: view-in .3s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* ── floating dock (mobile) ── */
.dock {
position: fixed; left: 0; right: 0; z-index: 45;
bottom: max(var(--dock-float), env(safe-area-inset-bottom));
display: flex; justify-content: center;
padding: 0 .75rem;
pointer-events: none;
animation: dock-in .3s ease both;
}
@keyframes dock-in { from { opacity: 0; } to { opacity: 1; } }
.dock-in {
position: relative;
pointer-events: auto;
display: flex; align-items: center; gap: .15rem;
padding: .3rem;
border-radius: 1.05rem;
border: 1px solid var(--ink-hairline);
background: var(--chrome-glass);
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
box-shadow: var(--chrome-cast), var(--chrome-sheen);
max-width: 100%;
}
/* the pill slides between destinations — shared-element motion */
/* Brand, not ink: on a navy capsule the lit pill is what marks the spot. */
.dock-pill {
position: absolute; top: .3rem; left: 0; bottom: .3rem;
border-radius: .8rem;
background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 74%, var(--brand-ink)));
box-shadow: var(--chrome-lit-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
opacity: 0;
transition: transform .4s var(--ease), width .4s var(--ease), opacity .2s ease;
pointer-events: none;
}
.dock button {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
min-height: 3rem; min-width: 3.6rem;
padding: .35rem .5rem;
border-radius: .8rem;
color: var(--ink-dim);
font-size: .68rem; font-weight: 540; letter-spacing: .004em;
transition: color .22s ease, transform .16s var(--spring);
}
.dock button:active { transform: scale(.9); }
.dock button svg { width: 1.22rem; height: 1.22rem; stroke-width: 1.75; }
.dock button.is-on { color: #fff; }
.dock button.is-on svg { stroke-width: 2; }
/* The flag ring matches whatever it sits on — navy glass, or the lit pill. */
.dock .dot {
position: absolute; top: .45rem; right: .72rem;
width: 6px; height: 6px; border-radius: 50%;
background: var(--warn-on-ink); border: 1.5px solid var(--ink-2);
}
.dock button.is-on .dot { border-color: color-mix(in srgb, var(--brand) 72%, var(--ink)); }
/* ── breakpoints: spacing steps up, never cramped ── */
@media (min-width: 30rem) {
:root { --gut: 1.4rem; --pad: 1.4rem; --stack: 1.1rem; }
}
@media (min-width: 48rem) {
:root { --gut: 2rem; --pad: 1.6rem; --stack: 1.25rem; }
}
@media (min-width: 62rem) {
:root { --gut: 2.75rem; --pad: 1.9rem; --stack: 1.35rem; }
.shell { flex-direction: row; }
.rail {
display: flex; flex-direction: column;
position: sticky; top: 0;
width: var(--rail-w); flex: none; height: 100dvh;
background: var(--ink);
/* lit inner edge where the navy meets paper — the room has a wall */
box-shadow: inset -1px 0 0 var(--ink-line);
}
.topbar { min-height: var(--top-h); padding: .9rem var(--gut); gap: 1.25rem; }
.topbar-head h1 { font-size: 1.35rem; }
.topbar-tools { display: flex; }
.top-id { display: none; }
.canvas { padding: var(--pad) var(--gut) 4rem; }
.dock { display: none; }
}
@media (min-width: 90rem) {
:root { --gut: 3.25rem; }
}
@media (max-width: 61.99rem) {
/* floating chrome capsule — scroll-aware, opacity-safe on iOS */
.sync-status { max-width: 7.8rem; overflow: hidden; text-overflow: ellipsis; }
.topbar {
position: fixed;
top: max(.6rem, env(safe-area-inset-top));
left: .75rem; right: .75rem;
min-height: 3.4rem;
padding: .45rem .5rem .45rem .7rem;
gap: .65rem;
border: 1px solid var(--ink-hairline);
border-radius: var(--r-pill);
background: var(--chrome-glass);
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
box-shadow: var(--chrome-cast), var(--chrome-sheen);
transition: transform .32s var(--ease);
}
.topbar.is-tucked { transform: translateY(calc(-100% - 1.4rem)); }
.topbar-mark { display: grid; }
.canvas { padding-top: calc(3.4rem + 1.35rem + env(safe-area-inset-top)); }
}
/* ============================================================
CROWN — the one dark dominant object. Never two heroes.
The login room, scaled down to a card: same ink, same brand-lit
horizon above the figure, same blueprint grid. A client's brandColor
re-lights the gate and the crown together.
============================================================ */
.crown {
position: relative;
border-radius: var(--r-xl);
background: var(--ink);
color: var(--ink-text);
overflow: hidden; isolation: isolate;
/* Sit ON paper the way the gate card sits ON ink — brand-tinted lift, not grey. */
box-shadow: var(--shadow-float), inset 0 1px 0 var(--ink-hairline);
}
/* The horizon. Core sits just above the top edge so the light has a
source off-object, exactly as it does behind the gate wordmark. */
.crown::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 0; transform: translate(-50%, -58%);
width: min(52rem, 150%); aspect-ratio: 1;
background: var(--ink-glow);
opacity: .55;
}
/* Grid is the shared token; the floor is not. --ink-veil is cut for a
full viewport — at card scale its corners go to near-black, so the
same two layers run at a weight this object can carry. */
.crown::after {
content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
background:
var(--ink-grid),
linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--ink-deep) 70%, transparent) 100%),
radial-gradient(130% 120% at 50% 22%, transparent 52%, color-mix(in srgb, var(--ink-deep) 62%, transparent) 100%);
}
.crown-in { position: relative; z-index: 1; padding: var(--s4) var(--pad) var(--s4); }
@media (min-width: 48rem) { .crown-in { padding: 1.85rem 1.85rem 1.7rem; } }
.crown-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.crown-who { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.crown-av {
display: grid; place-items: center;
width: 2.1rem; height: 2.1rem; flex: none;
border-radius: 50%;
background: var(--ink-fill-2);
border: 1px solid var(--ink-hairline);
/* same lit top edge the gate gives its brand mark */
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
color: var(--ink-text); font-size: .7rem; font-weight: 650;
}
.crown-who b { font-size: .875rem; font-weight: 570; color: var(--ink-text); }
.crown-who em { font-style: normal; font-size: .75rem; color: var(--ink-dim); display: block; }
.crown-chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .7rem;
border-radius: var(--r-pill);
border: 1px solid var(--ink-hairline);
background: var(--ink-fill);
font-size: .735rem; font-weight: 550; color: var(--ink-text); white-space: nowrap;
}
.crown-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-on-ink); }
.crown-chip.is-warn {
border-color: color-mix(in srgb, var(--warn-on-ink) 32%, transparent);
background: color-mix(in srgb, var(--warn-on-ink) 12%, transparent);
color: color-mix(in srgb, var(--warn-on-ink) 70%, #fff);
}
.crown-chip.is-warn::before { background: var(--warn-on-ink); animation: pulse 2.4s ease-in-out infinite; }
.crown-chip.plain::before { display: none; }
.crown-top .spacer { flex: 1; }
.crown-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 48rem) { .crown-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; } }
.crown-eyebrow { margin: 0 0 .5rem; font-size: .665rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); }
.crown-figure {
display: block;
font-family: var(--ui);
font-variant-numeric: tabular-nums;
font-stretch: 105%;
font-size: clamp(2.3rem, 10.5vw, 3.5rem);
font-weight: 640; letter-spacing: -.042em; line-height: .96; color: var(--ink-text);
}
.crown-figure.is-word { font-stretch: 112%; letter-spacing: -.035em; }
.crown-sub { margin: .8rem 0 0; font-size: .875rem; color: var(--ink-dim); line-height: 1.55; max-width: 34rem; }
.crown-sub b { color: var(--ink-text); font-weight: 560; }
.crown-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.btn-crown {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
min-height: 2.85rem; padding: .75rem 1.25rem;
border-radius: var(--r-pill);
background: var(--surface); color: var(--ink);
font-size: .9rem; font-weight: 590; letter-spacing: -.01em; white-space: nowrap;
/* The gate card's story at pill scale: a paper object lit from inside the
room, casting brand rather than grey. --shadow-on-ink itself is cut for
a card, so the same recipe runs at the size this object can carry. */
box-shadow:
inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
0 2px 6px color-mix(in srgb, var(--ink-deep) 42%, transparent),
0 14px 30px -14px color-mix(in srgb, var(--brand) 55%, transparent);
transition: background .14s ease, box-shadow .22s var(--ease), transform .16s var(--spring);
}
.btn-crown:hover {
background: var(--ink-text);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
0 2px 6px color-mix(in srgb, var(--ink-deep) 48%, transparent),
0 20px 38px -14px color-mix(in srgb, var(--brand) 68%, transparent);
}
.btn-crown:active { transform: scale(.965); }
.btn-crown:focus-visible { outline: 2px solid var(--brand-on-ink); outline-offset: 2px; }
.btn-crown svg { width: .95rem; height: .95rem; }
.btn-crown-2 {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
min-height: 2.85rem; padding: .75rem 1.15rem;
border-radius: var(--r-pill);
border: 1px solid color-mix(in srgb, var(--ink-text) 18%, transparent);
background: var(--ink-fill); color: var(--ink-text);
font-size: .88rem; font-weight: 540; white-space: nowrap;
transition: background .14s ease, border-color .14s ease, transform .16s var(--spring);
}
.btn-crown-2:hover {
background: var(--ink-fill-2);
border-color: color-mix(in srgb, var(--ink-text) 32%, transparent);
}
.btn-crown-2:active { transform: scale(.965); }
.btn-crown-2:focus-visible { outline: 2px solid var(--brand-on-ink); outline-offset: 2px; }
/* Data ink: the room's accent blue, not a fixed one — --brand itself is too
dark to read against navy, so every line and fill here rides --brand-on-ink. */
.crown-spark { min-width: 0; }
.crown-meter { height: 8px; border-radius: var(--r-pill); background: var(--ink-fill-2); overflow: hidden; }
.crown-meter i {
display: block; height: 100%; border-radius: var(--r-pill);
background: linear-gradient(90deg,
color-mix(in srgb, var(--brand-on-ink) 82%, var(--brand)),
var(--brand-on-ink));
transition: width .6s var(--ease);
}
.crown-spark .spark path.area { fill: color-mix(in srgb, var(--brand-on-ink) 16%, transparent); }
.crown-spark .spark path.line { stroke: var(--brand-on-ink); }
.crown-spark .spark-scale { color: var(--ink-faint); }
/* The strip is the room's floor — the darkest band on the object, which is
where the gate's veil lands too. */
.crown-strip {
position: relative; z-index: 1; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
border-top: 1px solid var(--ink-hairline);
background: color-mix(in srgb, var(--ink-deep) 62%, transparent);
}
.crown-cell { padding: .85rem var(--pad); border-left: 1px solid var(--ink-hairline); }
.crown-cell:first-child { border-left: 0; }
.crown-cell dt { margin: 0 0 .2rem; font-size: .655rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
/* display numerals stay in the UI face with tabular figures — the mono comma
advance opens visible gaps inside grouped amounts */
.crown-cell dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 600; letter-spacing: -.022em; color: var(--ink-text); }
.crown-cell dd small { display: block; font-family: var(--ui); font-size: .72rem; letter-spacing: 0; color: var(--ink-faint); margin-top: .12rem; }
@media (min-width: 48rem) { .crown-cell { padding: .95rem 1.85rem; } }
/* two even columns on phones; an odd last cell spans rather than orphaning */
@media (max-width: 47.99rem) {
.crown-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crown-cell:nth-child(odd) { border-left: 0; }
.crown-cell:nth-child(n+3) { border-top: 1px solid var(--ink-hairline); }
.crown-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ============================================================
CONTENT
============================================================ */
/* KPI band — paper, but structured in the room's temperature so it reads as
a sibling of the crown rather than a card from a warmer system. */
.band {
border: 1px solid var(--paper-line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.band-top { padding: 1.4rem var(--pad) 1.35rem; }
.band-split { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
.band-top { padding: 1.75rem 1.75rem 1.6rem; }
.band-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
}
.band-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
/* Cool the shared eyebrow atom so a band never looks warmer than the crown. */
.band .eyebrow { color: var(--paper-label); }
.figure {
display: block;
font-family: var(--ui);
font-variant-numeric: tabular-nums;
font-stretch: 105%;
font-size: clamp(2rem, 8vw, 3rem);
font-weight: 620; letter-spacing: -.042em; line-height: 1;
color: var(--tx-1);
}
.figure-sub { margin: .65rem 0 0; font-size: .87rem; color: var(--tx-2); line-height: 1.5; }
.figure-sub b { font-weight: 580; color: var(--tx-1); }
.spark { width: 100%; height: 4.75rem; display: block; }
.spark path.area { fill: var(--brand-soft); stroke: none; }
.spark path.line { stroke: var(--brand); stroke-width: 1.75; }
.spark-wrap { min-width: 0; }
.spark-scale { display: flex; justify-content: space-between; margin: .4rem 0 0; font-size: .68rem; color: var(--tx-3); font-family: var(--mono); }
/* The paper answer to .crown-strip: same role (figures on a recessed floor),
same read — a cool floor instead of a dark one. */
.band-strip {
display: grid; margin: 0;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
border-top: 1px solid var(--paper-line-2);
background: var(--paper-floor);
}
.band-cell { padding: .9rem var(--pad); border-left: 1px solid var(--paper-line-2); }
.band-cell:first-child { border-left: 0; }
.band-cell dt { margin: 0 0 .22rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-label); }
.band-cell dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 1.02rem; font-weight: 560; letter-spacing: -.022em; }
.band-cell dd small { display: block; font-family: var(--ui); font-size: .74rem; letter-spacing: 0; color: var(--tx-3); margin-top: .15rem; }
.band-cell dd.pos { color: var(--ok); }
.band-cell dd.neg { color: var(--danger); }
.verdict {
display: inline-flex; align-items: center; gap: .45rem;
padding: .3rem .65rem .3rem .55rem;
border-radius: 100px;
font-size: .745rem; font-weight: 580;
border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok);
white-space: nowrap;
}
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.verdict.is-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.verdict.is-warn::before { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ============================================================
WORK SURFACES — queues, tables, ledgers, list rows, empties.
The chrome is the navy room; these are the paper sheets laid in it,
so the whole run works off the cooled --paper-* structure rather than
the warm --line ramp: --paper-line for shells and bands, --paper-line-2
for row hairlines, --paper-floor for recessed wells and trays,
--paper-wash for hover, --brand-soft + --brand-line for selection.
Density is the point — legibility comes from quiet rules and a money
column that reads straight down, never from boxing every row.
============================================================ */
/* ── queue: numbered exceptions (home “Perlu tindakan”) ── */
.queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .65rem; padding: 0 .15rem; }
.queue-head h2 { margin: 0; font-size: .78rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--paper-label); }
.queue-head .n { font-family: var(--mono); font-size: .78rem; color: var(--tx-3); }
.queue { list-style: none; margin: 0; padding: 0; border: 1px solid var(--paper-line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.queue li + li { border-top: 1px solid var(--paper-line-2); }
.queue button {
display: grid;
grid-template-columns: 1.85rem minmax(0, 1fr) auto;
align-items: center; gap: .18rem .9rem;
width: 100%; min-height: 4.25rem;
text-align: left; padding: 1rem var(--pad);
transition: background .14s ease, box-shadow .14s ease, transform .16s var(--spring);
}
/* The accent arrives from the left edge on hover: the row you are about to
open is the only one in the list wearing brand. */
.queue button:hover { background: var(--paper-wash); box-shadow: inset 2px 0 0 var(--brand); }
.queue button:active { transform: scale(.99); }
.queue button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.queue .idx { grid-column: 1; grid-row: 1 / span 2; font-family: var(--mono); font-size: .78rem; color: var(--tx-3); transition: color .14s ease; }
.queue button:hover .idx { color: var(--brand); }
.queue .t { grid-column: 2; grid-row: 1; font-size: .95rem; font-weight: 560; letter-spacing: -.012em; }
.queue .m { grid-column: 2; grid-row: 2; font-size: .81rem; color: var(--tx-2); }
.queue .go {
grid-column: 3; grid-row: 1 / span 2;
display: inline-flex; align-items: center; gap: .35rem;
font-size: .8rem; font-weight: 580; color: var(--brand); white-space: nowrap;
}
.queue .go svg { width: .85rem; height: .85rem; transition: transform .18s var(--ease); }
.queue button:hover .go svg { transform: translateX(3px); }
/* a flagged line keeps its own colour on hover — warn outranks brand here */
.queue li.warn .idx, .queue li.warn button:hover .idx { color: var(--warn); }
.queue li.warn button:hover { box-shadow: inset 2px 0 0 var(--warn); }
/* Clear queue — quiet ok, not a void. Sits under the same head as open rows. */
.queue-head + .panel .empty {
padding: 1.85rem var(--pad);
background: var(--paper-floor);
}
.queue-head + .panel .empty svg { color: var(--ok); }
.queue-head + .panel .empty strong { color: var(--ok); font-weight: 600; }
.queue-head + .panel .empty p { color: var(--tx-2); }
/* ── panel: the shell every ledger and table is served in ── */
.panel { border: 1px solid var(--paper-line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
/* Header band = a table head, whether or not a follows: flat well,
micro-type label on the left, the count in mono on the right. */
.panel-head {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
min-height: 3rem; padding: .7rem var(--pad);
border-bottom: 1px solid var(--paper-line); background: var(--paper-floor);
}
.panel-head h2, .panel-head h3 { margin: 0; font-size: .755rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-label); }
.panel-head .n { font-family: var(--mono); font-size: .755rem; color: var(--tx-3); text-align: right; }
.panel-body { padding: var(--pad); }
.panel-foot { margin: 0; padding: .8rem var(--pad); border-top: 1px solid var(--paper-line-2); background: var(--paper-floor); font-size: .79rem; color: var(--tx-2); line-height: 1.5; }
/* ── dense ledger rows ── */
.row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: .2rem .9rem;
width: 100%; min-height: 3.45rem;
text-align: left; padding: .7rem var(--pad);
border-top: 1px solid var(--paper-line-2);
transition: background .12s ease, box-shadow .12s ease, transform .16s var(--spring);
}
.rows > .row:first-child, .rows > .check:first-child { border-top: 0; }
button.row:hover { background: var(--paper-wash); }
button.row:active { transform: scale(.994); }
button.row.is-on { background: var(--brand-soft); }
/* Selection is the one row wearing brand — soft fill plus an inset rule, so
it still reads as picked after the pointer leaves. */
.row.is-sel { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.row.is-sel .row-t { color: var(--brand-ink); font-weight: 570; }
.row-t { grid-column: 1; grid-row: 1; font-size: .9rem; font-weight: 520; letter-spacing: -.008em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-m { grid-column: 1; grid-row: 2; font-size: .775rem; color: var(--tx-3); display: flex; flex-wrap: wrap; gap: .28rem .45rem; align-items: center; }
.row-m .sep { color: var(--paper-line); }
.row-r { grid-column: 2; grid-row: 1 / span 2; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .26rem; }
/* Money reads down a column, not wherever the description ends. */
@media (min-width: 62rem) { .row-r { min-width: 7.5rem; } }
.amt { font-family: var(--mono); font-size: .9rem; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; color: var(--tx-1); }
.amt.in { color: var(--ok); }
/* Tags stay quiet — a hairline and a cool wash. Semantics earn colour;
`brand` is the only one that gets the blue, and it gets it softly. */
.tag {
display: inline-flex; align-items: center;
padding: .12rem .4rem; border-radius: 4px;
border: 1px solid var(--paper-line); background: var(--paper-floor);
font-size: .68rem; font-weight: 560; letter-spacing: .005em; color: var(--paper-label); white-space: nowrap;
}
.tag.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.tag.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.tag.brand { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
/* ── tables: the same ledger in full column form ───────────────
No view in app.js renders a today — the print sheet and the
legacy screens both do, and both assume this contract: a `.table-wrap`
scroller, `.money` cells right-aligned in mono, and `data-label` on
every body cell so a phone can fold the table into ledger cards. */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--paper-line); border-radius: var(--r-lg);
background: var(--surface); box-shadow: var(--shadow-sm);
scrollbar-width: thin;
}
/* inside a panel the shell is already drawn — don't draw it twice */
.panel > .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.table-wrap table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; font-size: .845rem; }
.table-wrap th {
position: sticky; top: 0; z-index: 1;
padding: .6rem .8rem;
background: var(--paper-floor); color: var(--paper-label);
border-bottom: 1px solid var(--paper-line);
font-size: .655rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase;
text-align: left; white-space: nowrap;
}
.table-wrap td { padding: .55rem .8rem; border-top: 1px solid var(--paper-line-2); color: var(--tx-1); vertical-align: top; }
.table-wrap tbody tr:first-child td { border-top: 0; }
.table-wrap tbody tr:hover td { background: var(--paper-wash); }
.table-wrap tbody tr.is-sel td { background: var(--brand-soft); }
.table-wrap tbody tr.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
.table-wrap th.money { text-align: right; }
.table-wrap td.money {
text-align: right; white-space: nowrap;
font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.025em;
}
.table-wrap td.muted { color: var(--tx-3); }
/* ── phone: work surfaces fold into ledger cards ───────────────
A squeezed column is unreadable, so under 48rem the ledger stops
pretending to be a grid: each record becomes its own slip resting on
the recessed floor. Same markup on every viewport — only the frame
changes, so nothing in app.js has to know the breakpoint exists. */
@media (max-width: 47.99rem) {
.panel > .rows, .sheet-body > .rows {
display: flex; flex-direction: column; gap: .5rem;
padding: .55rem; background: var(--paper-floor);
}
.rows > .row, .rows > .row:first-child,
.rows > .check, .rows > .check:first-child {
border: 1px solid var(--paper-line); border-radius: var(--r);
background: var(--surface); box-shadow: var(--shadow-sm);
padding: .7rem .8rem;
}
.row.is-sel { border-color: var(--brand-line); }
.table-wrap.ledger-cards {
overflow: visible;
border: 0; border-radius: 0; box-shadow: none;
padding: .55rem; background: var(--paper-floor);
}
.ledger-cards table { display: block; min-width: 0; }
/* the head still names every field — it just does it per cell now */
.ledger-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ledger-cards tbody { display: flex; flex-direction: column; gap: .5rem; }
.ledger-cards tbody tr {
display: block;
border: 1px solid var(--paper-line); border-radius: var(--r);
background: var(--surface); box-shadow: var(--shadow-sm);
padding: .1rem .8rem .35rem;
}
.ledger-cards tbody td {
display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
padding: .34rem 0; border-top: 1px solid var(--paper-line-2);
text-align: right; background: none;
}
.ledger-cards tbody td::before {
content: attr(data-label);
flex: none; text-align: left;
font-size: .625rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
}
/* first cell is the slip's headline, not a labelled field */
.ledger-cards tbody td:first-child { border-top: 0; padding-top: .5rem; text-align: left; font-size: .9rem; font-weight: 580; }
.ledger-cards tbody td:first-child::before { display: none; }
.ledger-cards tbody td:empty { display: none; }
.ledger-cards tbody td.money { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.ledger-cards tbody tr.is-sel { border-color: var(--brand-line); background: var(--brand-soft); }
.ledger-cards tbody tr:hover td, .ledger-cards tbody tr.is-sel td { background: none; }
.ledger-cards tbody tr.is-sel td:first-child { box-shadow: none; }
}
/* ── buttons ──────────────────────────────────────────────────
One primary language for the whole product: brand fill on paper, paper fill
on ink. The in-app primary is the gate's `Masuk` scaled down — same navy cast
under the fill, no hover lift, because these sit in dense rows and toolbars.
──────────────────────────────────────────────────────────── */
.btn, .btn-2, .btn-ghost, .btn-danger {
display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
min-height: 2.3rem;
padding: .5rem .9rem;
border-radius: var(--r-sm); border: 1px solid transparent;
font-size: .85rem; font-weight: 570; letter-spacing: -.005em; white-space: nowrap;
transition: background .14s ease, border-color .14s ease, color .14s ease,
box-shadow .18s var(--ease), transform .16s var(--spring);
}
.btn:active, .btn-2:active, .btn-ghost:active, .btn-danger:active { transform: scale(.965); }
.btn svg, .btn-2 svg, .btn-ghost svg, .btn-danger svg { width: .95rem; height: .95rem; }
/* Primary = the gate's `Masuk`: brand fill with a navy cast under it. The cast
is shallower here and there is no hover lift — these sit in dense rows. */
.btn {
background: var(--brand); border-color: var(--brand); color: #fff;
box-shadow:
0 1px 2px color-mix(in srgb, var(--brand-ink) 30%, transparent),
0 8px 18px -12px color-mix(in srgb, var(--brand) 62%, transparent);
}
.btn:hover:not(:disabled) {
background: var(--brand-hover); border-color: var(--brand-hover);
box-shadow:
0 1px 2px color-mix(in srgb, var(--brand-ink) 38%, transparent),
0 12px 24px -12px color-mix(in srgb, var(--brand) 70%, transparent);
}
.btn:active:not(:disabled) {
background: var(--brand-press); border-color: var(--brand-press);
box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink) 34%, transparent);
}
/* a brand ring vanishes against a brand fill — the primary rings navy instead */
.btn:focus-visible { outline-color: var(--brand-ink); }
.btn-2 { background: var(--surface); border-color: var(--line); color: var(--tx-1); box-shadow: var(--shadow-sm); }
.btn-2:hover:not(:disabled) { border-color: var(--brand-line); background: var(--sunken); color: var(--brand-ink); }
.btn-2:active:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.btn-ghost { color: var(--tx-2); }
.btn-ghost:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); }
.btn-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--danger-bg)); border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); }
.btn-danger:focus-visible { outline-color: var(--danger); }
.btn-lg { min-height: 3rem; padding: .8rem 1.2rem; font-size: .95rem; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn:disabled, .btn-2:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* In the navy room a brand fill reads as a hole punched in the surface, so the
primary flips to paper — the same move .btn-crown already makes. */
.crown .btn, .rail .btn {
background: var(--surface); border-color: var(--surface); color: var(--ink);
box-shadow:
0 1px 2px color-mix(in srgb, var(--ink-deep) 34%, transparent),
0 10px 22px -12px color-mix(in srgb, var(--brand) 55%, transparent);
}
.crown .btn:hover:not(:disabled), .rail .btn:hover:not(:disabled) {
background: var(--ink-text); border-color: var(--ink-text); color: var(--ink);
}
.crown .btn:focus-visible, .rail .btn:focus-visible { outline-color: var(--brand-on-ink); box-shadow: var(--ring-ink); }
.icon-btn {
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); color: var(--tx-2);
transition: background .14s ease, color .14s ease, transform .16s var(--spring);
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 1rem; height: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; }
/* ── toolbar ── */
.toolbar {
display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
padding: .8rem var(--pad);
border-bottom: 1px solid var(--line-2); background: var(--surface);
}
@media (min-width: 48rem) { .toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; } }
.seg {
display: flex; align-items: center;
background: var(--paper-2); border-radius: 8px; padding: 3px; gap: 2px;
overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
flex: none;
padding: .38rem .7rem; border-radius: 6px;
font-size: .8rem; font-weight: 520; color: var(--tx-2); white-space: nowrap;
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.seg button:hover { color: var(--tx-1); }
.seg button.is-on { background: var(--surface); color: var(--tx-1); font-weight: 590; box-shadow: var(--shadow-sm); }
.search {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: .5rem;
padding: .4rem .7rem;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
transition: border-color .14s ease, box-shadow .14s ease;
}
.search svg { width: .9rem; height: .9rem; color: var(--tx-3); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: .875rem; caret-color: var(--brand); }
.search input::placeholder { color: var(--tx-3); }
.search:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.search:focus-within svg { color: var(--brand); }
.chips { display: flex; gap: .45rem; overflow-x: auto; padding: .8rem var(--pad); border-bottom: 1px solid var(--line-2); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
display: inline-flex; align-items: center; gap: .4rem; flex: none;
padding: .34rem .7rem; border-radius: 100px;
border: 1px solid var(--line); background: var(--surface);
font-size: .79rem; font-weight: 510; color: var(--tx-2); white-space: nowrap;
transition: border-color .14s ease, background .14s ease, color .14s ease, transform .16s var(--spring);
}
.chip b { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--tx-3); }
.chip:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); color: var(--tx-1); }
.chip:active { transform: scale(.95); }
/* the selected filter is the one brand moment in a toolbar — soft fill, brand
hairline, navy label, and a shadow shallow enough to stay in the row */
.chip.is-on {
border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 580;
box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink) 18%, transparent);
}
.chip.is-on:hover { background: color-mix(in srgb, var(--brand) 12%, var(--brand-soft)); border-color: var(--brand); }
.chip.is-on b { color: var(--brand); }
/* ── meter ── */
.meter { height: 6px; border-radius: 100px; background: var(--paper-2); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; background: var(--brand); border-radius: 100px; transition: width .5s var(--ease); }
.meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: .8rem; color: var(--tx-2); }
.meter-row b { font-family: var(--mono); font-weight: 500; color: var(--tx-1); }
/* ── flow bars ── */
.bars { display: flex; align-items: flex-end; gap: .55rem; height: 7.5rem; }
.bars-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
/* definite height, not flex:1 — percentage bar heights need a resolvable parent */
.bars-pair { height: calc(100% - 1.25rem); width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.bars-pair i { display: block; width: 44%; border-radius: 3px 3px 0 0; min-height: 2px; animation: grow .55s var(--ease) both; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bars-pair i.in { background: var(--brand); opacity: .9; }
.bars-pair i.out { background: #d6d3c8; }
.bars-col span { font-size: .66rem; color: var(--tx-3); font-family: var(--mono); white-space: nowrap; }
.legend { display: flex; gap: 1.1rem; margin-top: .85rem; font-size: .76rem; color: var(--tx-2); }
.legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .38rem; }
.legend i.in { background: var(--brand); }
.legend i.out { background: #d6d3c8; }
/* ── split work layout ── */
.split { display: grid; gap: var(--stack); align-items: start; grid-template-columns: minmax(0, 1fr); }
.split > * { min-width: 0; }
@media (min-width: 62rem) {
.split { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.35rem; }
.split-wide { grid-template-columns: minmax(0, 1fr) 24rem; }
.split > .sticky { position: sticky; top: calc(var(--top-h) + 1.35rem); }
}
@media (min-width: 82rem) { .split-wide { grid-template-columns: minmax(0, 1fr) 27rem; } }
.canvas > .stack, .canvas > .split { max-width: 82rem; }
/* ── triage detail ── */
.detail-hero { padding: 1.2rem var(--pad) 1rem; border-bottom: 1px solid var(--line-2); }
.detail-hero .amt { font-size: 1.75rem; letter-spacing: -.04em; display: block; margin-top: .35rem; }
.detail-hero p { margin: .5rem 0 0; font-size: .85rem; color: var(--tx-2); line-height: 1.5; }
.facts { margin: 0; padding: 1rem var(--pad); display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .58rem .9rem; font-size: .8rem; }
.facts dt { color: var(--tx-3); }
.facts dd { margin: 0; color: var(--tx-1); overflow-wrap: anywhere; }
.facts dd.mono { font-size: .76rem; }
.reason { margin: 0; padding: .85rem var(--pad); border-top: 1px solid var(--line-2); background: var(--warn-bg); font-size: .81rem; color: var(--warn); line-height: 1.5; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: var(--pad); border-top: 1px solid var(--line-2); }
.act-grid .span2 { grid-column: 1 / -1; }
/* ── forms ────────────────────────────────────────────────────
Every control rings brand-blue: --ring on paper, --ring-ink on navy. Hover
warms the hairline toward the brand before focus commits to it, so a row
answers the pointer one step before it answers the caret.
──────────────────────────────────────────────────────────── */
.form { display: grid; gap: .95rem; }
.field { display: grid; gap: .32rem; min-width: 0; }
.field > label { font-size: .78rem; font-weight: 570; color: var(--tx-2); }
.field input, .field select, .field textarea {
width: 100%; min-height: 2.4rem;
padding: .55rem .7rem;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
font-size: .9rem; color: var(--tx-1);
accent-color: var(--brand); caret-color: var(--brand);
transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--tx-3); }
.field textarea { min-height: 5.5rem; line-height: 1.5; resize: vertical; }
.field input:hover:not(:focus):not(:disabled),
.field select:hover:not(:focus):not(:disabled),
.field textarea:hover:not(:focus):not(:disabled) { border-color: var(--brand-line); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
background: var(--paper-2); color: var(--tx-3); cursor: not-allowed;
}
/* the date/time pickers keep their native glyph — dimmed until it's wanted */
.field input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.field input:hover::-webkit-calendar-picker-indicator,
.field input:focus::-webkit-calendar-picker-indicator { opacity: .85; }
/* Only after the field has been touched — :invalid alone shouts at empty
required rows the moment a form paints. Own rule: unsupported = ignored. */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
}
.field input:user-invalid:focus, .field select:user-invalid:focus, .field textarea:user-invalid:focus {
border-color: var(--danger);
box-shadow: 0 0 0 3px var(--danger-bg);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hint { margin: 0; font-size: .77rem; color: var(--tx-3); line-height: 1.5; }
/* ── check lines ── */
.check {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start; gap: .75rem;
min-height: 3.4rem;
padding: .85rem var(--pad);
border-top: 1px solid var(--line-3);
cursor: pointer;
transition: background .12s ease;
}
.check:hover { background: var(--sunken); }
.check input { margin: .15rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* keyboard focus lands on the box, so tint the whole line it belongs to */
.check:has(input:focus-visible) { background: var(--brand-soft); }
.check-t { display: block; font-size: .88rem; font-weight: 510; line-height: 1.45; }
.check-m { display: block; font-size: .765rem; color: var(--tx-3); margin-top: .18rem; }
.check.is-done .check-t { color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--line); }
/* ── uploader ── */
.drop {
display: grid; justify-items: center; gap: .55rem;
padding: 2.4rem 1.25rem;
border: 1.5px dashed var(--line); border-radius: var(--r-lg);
background: var(--surface); text-align: center;
transition: border-color .18s ease, background .18s ease;
}
.drop:focus-within { border-color: var(--brand-line); }
.drop.is-over { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.drop svg { width: 1.7rem; height: 1.7rem; color: var(--tx-3); margin-bottom: .3rem; }
.drop strong { font-size: 1rem; font-weight: 580; letter-spacing: -.015em; }
.drop p { margin: 0; font-size: .82rem; color: var(--tx-3); }
/* ── empty ── */
.empty { display: grid; justify-items: center; gap: .45rem; padding: 2.75rem 1.35rem; text-align: center; }
.empty svg { width: 1.6rem; height: 1.6rem; color: var(--tx-3); }
.empty strong { font-size: .95rem; font-weight: 570; }
.empty p { margin: 0; font-size: .84rem; color: var(--tx-3); max-width: 23rem; line-height: 1.55; }
/* ── attendance strip ── */
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; padding: var(--pad); }
.strip-cell { display: grid; gap: .18rem; justify-items: center; padding: .5rem .15rem; border-radius: 7px; background: var(--sunken); border: 1px solid var(--line-3); }
.strip-cell em { font-style: normal; font-size: .6rem; color: var(--tx-3); }
.strip-cell b { font-family: var(--mono); font-size: .76rem; font-weight: 500; }
.strip-cell.H { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.strip-cell.WFH { background: var(--brand-soft); border-color: #cddcf7; color: var(--brand-ink); }
.strip-cell.MC, .strip-cell.AL, .strip-cell.XHDR, .strip-cell.PH { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.strip-cell.none { color: var(--tx-3); }
/* ── payslip ── */
.slip-hero { padding: 1.6rem var(--pad); }
.slip-hero .figure { font-size: clamp(1.9rem, 7vw, 2.5rem); }
.slip-line { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem var(--pad); border-top: 1px solid var(--line-3); font-size: .86rem; }
.slip-lines > .slip-line:first-child { border-top: 1px solid var(--line-2); }
.slip-line span { color: var(--tx-2); }
.slip-line b { font-family: var(--mono); font-weight: 500; }
.slip-line.total { background: var(--sunken); }
.slip-line.total span { color: var(--tx-1); font-weight: 590; }
.slip-line.er span { color: var(--tx-3); }
.slip-sec {
margin: 0; padding: .85rem var(--pad) .25rem;
font-size: .655rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
color: var(--tx-3); border-top: 1px solid var(--line-2);
}
/* ── keyboard hints ── */
.keys { display: none; gap: 1.1rem; padding: .6rem var(--pad); border-top: 1px solid var(--line-2); background: var(--sunken); font-size: .74rem; color: var(--tx-3); }
.keys span { display: inline-flex; align-items: center; gap: .3rem; }
@media (min-width: 62rem) { .keys { display: flex; } }
/* ============================================================
OVERLAYS
============================================================ */
/* Dimming the canvas should feel like the room the gate opens in, not a
neutral black wash — so the scrim is navy and the sheet floats in it. */
.scrim {
position: fixed; inset: 0; z-index: 50;
background: var(--scrim);
backdrop-filter: blur(5px) saturate(120%);
-webkit-backdrop-filter: blur(5px) saturate(120%);
animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Drawer = navy chrome head over a paper body: the grip and the title belong
to the shell, everything below them is content. `overflow: hidden` keeps
the paper body inside the sheet's radius now that the two differ, and the
safe-area pad moves onto the body so no navy strip shows under it. */
.sheet {
position: fixed; z-index: 60;
left: 0; right: 0; bottom: 0;
max-height: 88dvh;
display: flex; flex-direction: column;
background: var(--ink);
color: var(--ink-text);
border-radius: 1.15rem 1.15rem 0 0;
overflow: hidden;
box-shadow: var(--shadow-on-ink);
animation: sheet-up .34s var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 2.4rem; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .26); margin: .6rem auto .1rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem var(--pad) .8rem; }
.sheet-head h2 { margin: 0; color: #fff; font-size: 1.05rem; font-stretch: 106%; font-weight: 620; letter-spacing: -.022em; }
.sheet-head .icon-btn { color: var(--ink-dim); }
.sheet-head .icon-btn:hover { background: var(--ink-fill-2); color: #fff; }
.sheet-body {
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: var(--pad);
padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
background: var(--surface);
color: var(--tx-1);
}
.sheet-body > .picks { margin: -.6rem 0; }
.sheet-body > .rows { margin: calc(var(--pad) * -1); }
@media (min-width: 48rem) {
.sheet {
left: 50%; right: auto; bottom: auto; top: 50%;
transform: translate(-50%, -50%);
width: min(34rem, calc(100vw - 3rem));
border-radius: var(--r-lg); max-height: 82dvh;
animation: sheet-pop .28s var(--ease);
}
@keyframes sheet-pop { from { transform: translate(-50%, -48%) scale(.97); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.sheet-grip { display: none; }
.sheet-head { padding: 1.05rem 1.25rem; }
}
.jump { position: fixed; z-index: 70; inset: 0; display: grid; place-items: start center; padding: 4rem 1rem 1rem; pointer-events: none; }
/* The palette is pure chrome — navy glass, never a paper card. */
.jump-box {
pointer-events: auto; width: min(38rem, 100%);
background: color-mix(in srgb, var(--ink) 92%, transparent);
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
color: var(--ink-text);
border: 1px solid var(--ink-hairline); border-radius: var(--r-lg);
box-shadow: var(--chrome-cast), var(--chrome-sheen); overflow: hidden;
animation: jump-in .22s var(--ease);
}
@keyframes jump-in { from { transform: translateY(-8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.jump-field { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.05rem; border-bottom: 1px solid var(--ink-line); }
.jump-field svg { width: 1.05rem; height: 1.05rem; color: var(--ink-faint); }
.jump-field input {
flex: 1; min-width: 0; border: 0; outline: none; background: none;
color: var(--ink-text); caret-color: var(--brand-on-ink);
font-size: 1rem; letter-spacing: -.01em;
}
.jump-field input::placeholder { color: var(--ink-faint); }
.jump-results { max-height: min(24rem, 58dvh); overflow-y: auto; padding: .35rem; }
.jump-sec { margin: 0; padding: .6rem .7rem .3rem; font-size: .63rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.jump-item {
display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto;
align-items: center; gap: .75rem;
width: 100%; min-height: 2.5rem;
text-align: left; padding: .55rem .7rem; border-radius: 7px;
color: var(--ink-dim);
font-size: .875rem;
transition: background .12s ease, color .12s ease;
}
.jump-item svg { width: 1rem; height: 1rem; color: var(--ink-faint); }
.jump-item small { color: var(--ink-faint); font-size: .75rem; font-family: var(--mono); }
/* Same brand-lit selection as the rail link and the dock pill. */
.jump-item.is-on, .jump-item:hover {
background: var(--chrome-lit); color: #fff;
box-shadow: inset 0 0 0 1px var(--chrome-lit-line);
}
.jump-item.is-on svg, .jump-item:hover svg { color: var(--brand-on-ink); }
.jump-item.is-on small, .jump-item:hover small { color: var(--ink-dim); }
.jump-item b { font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast {
position: fixed; z-index: 90;
left: 50%; bottom: calc(var(--dock-h) + 1.6rem + env(safe-area-inset-bottom));
transform: translate(-50%, 10px);
max-width: min(24rem, calc(100vw - 2rem));
padding: .65rem 1rem;
border-radius: 100px;
/* the dock's capsule, one row up */
background: color-mix(in srgb, var(--ink) 94%, transparent);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid var(--ink-hairline);
color: #fff;
font-size: .84rem; font-weight: 510;
box-shadow: var(--chrome-cast), var(--chrome-sheen);
opacity: 0; pointer-events: none;
transition: opacity .22s ease, transform .28s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* status toasts keep their own hue, mixed into the navy so they still read
as the same object */
.toast.is-ok { background: color-mix(in srgb, var(--ok) 62%, var(--ink)); }
.toast.is-error { background: color-mix(in srgb, var(--danger) 58%, var(--ink)); }
@media (min-width: 62rem) { .toast { bottom: 1.75rem; } }
/* privacy: owner-only figures never paint for other roles */
body.is-staff .private, body.is-finance .private, body.is-admin .private { display: none !important; }
/* ============================================================
TOUCH TARGETS — last in the cascade on purpose. Component rules
further up set tighter heights for pointer devices; on touch,
nothing tappable is allowed under 44px.
============================================================ */
@media (max-width: 61.99rem) {
/* Touch floor: nothing tappable under 44px. Absolute px — the root
font-size is under 16px, so rem-based targets fall short of the line. */
.btn, .btn-2, .btn-ghost, .btn-danger, .btn-block, .chip, .seg button,
.jump-item, .search, .skip, .field input, .field select { min-height: 44px; }
.icon-btn, .top-id { min-width: 44px; min-height: 44px; }
.check { min-height: 56px; }
.check input[type="checkbox"], .check input[type="radio"] { width: 22px; height: 22px; }
/* invisible 44px hit ring around the 22px control */
.check input[type="checkbox"]::after, .check input[type="radio"]::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.check input[type="checkbox"], .check input[type="radio"] { position: relative; }
}
/* === NAVY MOBILE === */
/* ============================================================
NAVY MOBILE — phone chrome, same room as the gate
------------------------------------------------------------
Scope: max-width 61.99rem only. Nothing here selects the gate —
every rule sits on app chrome (.dock), a `data-form` panel, the
canvas or an overlay, so the login composition is untouched.
Appended last on purpose: the floating chrome above is built in
paper, and this block repaints it in the gate's own vocabulary
(--ink*, --brand-on-ink, --shadow-on-ink) without unpicking those
rules. Every touch target it restyles is re-stated at >= 44px.
============================================================ */
@media (max-width: 61.99rem) {
/* ── dock capsule: the navy room, floated ──────────────────────
Same three layers as the gate — ink base, one brand-lit horizon
rising from the bottom edge, paper-white type floating in it. */
.dock-in {
border-color: var(--ink-hairline);
background:
radial-gradient(125% 185% at 50% 128%,
color-mix(in srgb, var(--brand) 26%, transparent) 0%,
transparent 70%),
color-mix(in srgb, var(--ink) 88%, transparent);
box-shadow: var(--shadow-on-ink);
}
/* blur is what keeps the capsule translucent — without it, go opaque
rather than letting content read through a flat 88% ink */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.dock-in { background: var(--ink); }
}
.dock button {
min-height: 48px; min-width: 3.6rem;
color: var(--ink-dim);
}
.dock button.is-on { color: #fff; }
/* --brand is tuned for paper and disappears on ink; the ring and any
idle-state accent switch to the on-ink pair */
.dock button:focus-visible { outline-color: var(--brand-on-ink); outline-offset: 1px; }
/* the sliding pill is the one brand-blue object in the capsule */
.dock-pill {
background: linear-gradient(180deg, var(--brand) 0%, var(--brand-press) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 6px 16px -8px color-mix(in srgb, var(--brand) 85%, transparent);
}
/* the unread dot rides ON ink now: lifted amber, ink-coloured ring */
.dock .dot { background: var(--warn-on-ink); border-color: var(--ink-2); }
.dock button.is-on .dot { border-color: var(--brand); }
/* ── sticky form CTA ───────────────────────────────────────────
A phone form is taller than the viewport, so Simpan/Batal scroll
out of reach. Pin the row the form already ends with — no markup
change — as a bar resting just above the dock capsule.
`.panel` clips its children, and an overflow clip is a sticky
container: the bar would pin to the panel instead of the screen.
Opening the form panel up costs the head's rounded corners, so
they're restored by hand below. */
form[data-form].panel { overflow: visible; }
form[data-form] > .panel-head { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
form[data-form] .panel-body.form > .actions:last-child {
position: sticky; z-index: 2;
bottom: calc(var(--dock-h) + max(var(--dock-float), env(safe-area-inset-bottom)) + .3rem);
flex-wrap: nowrap;
gap: .55rem;
margin: .4rem calc(var(--pad) * -1) calc(var(--pad) * -1);
padding: .7rem var(--pad);
border-top: 1px solid var(--paper-line-2);
border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
background: color-mix(in srgb, var(--surface) 90%, transparent);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 -14px 30px -24px color-mix(in srgb, var(--ink) 75%, transparent);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
form[data-form] .panel-body.form > .actions:last-child { background: var(--surface); }
}
/* primary takes the row; the cancel stays a thumb-width escape */
form[data-form] .panel-body.form > .actions:last-child .btn {
flex: 1; min-height: 48px;
box-shadow:
0 1px 2px color-mix(in srgb, var(--brand-ink) 34%, transparent),
0 12px 26px -16px color-mix(in srgb, var(--brand) 70%, transparent);
}
form[data-form] .panel-body.form > .actions:last-child .btn-ghost { flex: none; min-height: 48px; }
/* a focused row must land above the pinned bar, not behind it */
form[data-form] .field { scroll-margin-bottom: calc(var(--dock-h) + 7.5rem); }
/* ── mobile padding ────────────────────────────────────────────
Clearance for the two pieces of floating chrome, plus notch
gutters so nothing sits under a rounded corner in landscape. */
.canvas {
padding-bottom: calc(var(--dock-h) + var(--dock-float) + 2.6rem + env(safe-area-inset-bottom));
padding-left: max(var(--gut), env(safe-area-inset-left));
padding-right: max(var(--gut), env(safe-area-inset-right));
}
.dock {
padding-left: max(.75rem, env(safe-area-inset-left));
padding-right: max(.75rem, env(safe-area-inset-right));
}
.sheet-body { padding-bottom: calc(var(--pad) + .4rem); }
/* ── drawer scrim + sheet ──────────────────────────────────────
Opening a drawer dims the app back into the navy room: the ink
scrim from the token set, lit once from the bottom where the
sheet rises, with the sheet casting the gate card's own shadow.
Keep the navy sheet-head from the base rules — do not repaint it
paper here (that broke the room / paper split). */
.scrim {
background:
radial-gradient(115% 85% at 50% 100%,
color-mix(in srgb, var(--brand) 22%, transparent) 0%,
transparent 62%),
var(--scrim);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
}
.sheet { box-shadow: var(--shadow-on-ink); }
}
/* === NAVY CONTENT COOLING === */
/* ============================================================
NAVY CONTENT COOLING — paper furniture in the room
------------------------------------------------------------
Mid-file toolbar / chip / detail / check rules still leaned on the
warm --line ramp. Override here (not mid-file) so the cascade cools
them toward --paper-* without fighting concurrent edits. Login / gate
is untouched — nothing below selects .gate or .login.
============================================================ */
.toolbar { border-bottom-color: var(--paper-line-2); }
.chips { border-bottom-color: var(--paper-line-2); }
.chip { border-color: var(--paper-line); }
.chip:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--paper-line)); }
.search { border-color: var(--paper-line); }
.seg { background: var(--paper-floor); }
.btn-2 { border-color: var(--paper-line); }
.detail-hero { border-bottom-color: var(--paper-line-2); }
.reason { border-top-color: var(--paper-line-2); }
.act-grid { border-top-color: var(--paper-line-2); }
.check { border-top-color: var(--paper-line-2); }
.check:hover { background: var(--paper-wash); }
.check.is-done .check-t { text-decoration-color: var(--paper-line); }
.drop { border-color: var(--paper-line); }
.meter { background: var(--paper-floor); }
.bars-pair i.out,
.legend i.out { background: color-mix(in srgb, var(--ink-faint) 32%, var(--paper-2)); }
.keys { border-top-color: var(--paper-line-2); background: var(--paper-floor); }
/* Compose forms are the one dark act surface on a paper screen —
same navy head / paper body split the drawer already uses. */
form[data-form] > .panel-head {
background: var(--ink);
color: var(--ink-text);
border-bottom-color: var(--ink-line);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand) 22%, transparent);
}
form[data-form] > .panel-head h2,
form[data-form] > .panel-head h3 { color: #fff; }
form[data-form] > .panel-head .n { color: var(--ink-faint); }
form[data-form] > .panel-head .icon-btn { color: var(--ink-dim); }
form[data-form] > .panel-head .icon-btn:hover {
background: var(--ink-fill-2); color: #fff;
}
form[data-form] > .panel-head .icon-btn:focus-visible { outline-color: var(--brand-on-ink); }
/* === NAVY HR SURFACES === */
/* ============================================================
NAVY HR SURFACES — Hadir · Cuti · Kalendar · Slip
------------------------------------------------------------
Attendance strip, payslip lines, and calendar gate checks sit on
cooled paper. Status colours stay semantic (ok / warn / brand);
only structure and today's emphasis join the room.
============================================================ */
.strip {
background: var(--paper-floor);
}
.strip-cell {
background: var(--surface);
border-color: var(--paper-line-2);
}
.strip-cell.H {
background: var(--ok-bg);
border-color: var(--ok-line);
color: var(--ok);
}
.strip-cell.WFH {
background: var(--brand-soft);
border-color: var(--brand-line);
color: var(--brand-ink);
}
.strip-cell.MC,
.strip-cell.AL,
.strip-cell.XHDR,
.strip-cell.PH {
background: var(--warn-bg);
border-color: var(--warn-line);
color: var(--warn);
}
.strip-cell.none {
background: transparent;
border-color: transparent;
color: var(--tx-3);
}
/* Today — the one ink chip in the strip */
.strip-cell.is-today,
.strip-cell[data-today] {
background: var(--ink);
border-color: var(--ink-line);
color: var(--ink-text);
box-shadow: inset 0 1px 0 var(--ink-hairline);
}
.strip-cell.is-today em,
.strip-cell[data-today] em { color: var(--ink-faint); }
.strip-cell.is-today.H,
.strip-cell[data-today].H { color: var(--ok-on-ink); }
.strip-cell.is-today.WFH,
.strip-cell[data-today].WFH { color: var(--brand-on-ink); }
.slip-hero { border-bottom: 1px solid var(--paper-line-2); }
.slip-line { border-top-color: var(--paper-line-2); }
.slip-lines > .slip-line:first-child { border-top-color: var(--paper-line); }
.slip-line.total { background: var(--paper-floor); }
/* Calendar readiness: ink track, brand fill */
.canvas[data-view="calendar"] .meter {
background: var(--ink-fill-2);
box-shadow: inset 0 0 0 1px var(--paper-line);
}
.canvas[data-view="calendar"] .meter i {
background: linear-gradient(90deg,
color-mix(in srgb, var(--brand) 78%, var(--brand-ink)),
var(--brand));
}
.canvas[data-view="calendar"] .check:hover { background: var(--paper-wash); }
.canvas[data-view="calendar"] .check:has(input:focus-visible) {
background: var(--brand-soft);
}
/* Leave / hadir lists: warn spine on pending rows already via .tag.warn;
cool hairlines so the ledger matches the room. */
.canvas[data-view="people"] .rows > .row,
.canvas[data-view="attendance"] .rows > .row,
.canvas[data-view="payroll"] .rows > .row {
border-top-color: var(--paper-line-2);
}
/* === NAVY MODULE SURFACES === */
/* ============================================================
NAVY MODULE SURFACES — Tugas · Cukai · Pembiayaan · Jurnal ·
Dokumen · Bukti · Tetapan
------------------------------------------------------------
Ops modules wear an ink panel-head strip (blueprint room) over a
paper body. Finance ledgers (transactions / home) keep the quieter
paper-floor heads — one dark dominant object per screen is enough.
Requires canvas[data-view] from app.js.
============================================================ */
.canvas[data-view="admin"] .panel > .panel-head,
.canvas[data-view="tax"] .panel > .panel-head,
.canvas[data-view="funding"] .panel > .panel-head,
.canvas[data-view="journal"] .panel > .panel-head,
.canvas[data-view="documents"] .panel > .panel-head,
.canvas[data-view="receipt"] .panel > .panel-head,
.canvas[data-view="payroll"] .panel > .panel-head,
.canvas[data-view="settings"] .panel > .panel-head {
background:
var(--ink-grid),
linear-gradient(180deg, var(--ink-2), var(--ink));
color: var(--ink-text);
border-bottom-color: var(--ink-line);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand) 18%, transparent);
}
.canvas[data-view="admin"] .panel > .panel-head h2,
.canvas[data-view="admin"] .panel > .panel-head h3,
.canvas[data-view="tax"] .panel > .panel-head h2,
.canvas[data-view="tax"] .panel > .panel-head h3,
.canvas[data-view="funding"] .panel > .panel-head h2,
.canvas[data-view="funding"] .panel > .panel-head h3,
.canvas[data-view="journal"] .panel > .panel-head h2,
.canvas[data-view="journal"] .panel > .panel-head h3,
.canvas[data-view="documents"] .panel > .panel-head h2,
.canvas[data-view="documents"] .panel > .panel-head h3,
.canvas[data-view="receipt"] .panel > .panel-head h2,
.canvas[data-view="receipt"] .panel > .panel-head h3,
.canvas[data-view="payroll"] .panel > .panel-head h2,
.canvas[data-view="payroll"] .panel > .panel-head h3,
.canvas[data-view="settings"] .panel > .panel-head h2,
.canvas[data-view="settings"] .panel > .panel-head h3 {
color: #fff;
}
.canvas[data-view="admin"] .panel > .panel-head .n,
.canvas[data-view="tax"] .panel > .panel-head .n,
.canvas[data-view="funding"] .panel > .panel-head .n,
.canvas[data-view="journal"] .panel > .panel-head .n,
.canvas[data-view="documents"] .panel > .panel-head .n,
.canvas[data-view="receipt"] .panel > .panel-head .n,
.canvas[data-view="payroll"] .panel > .panel-head .n,
.canvas[data-view="settings"] .panel > .panel-head .n {
color: var(--ink-faint);
}
/* Funding band: cool structure so it sits with the ink heads */
.canvas[data-view="funding"] .band {
border-color: var(--paper-line);
}
.canvas[data-view="funding"] .band-strip {
background: var(--paper-floor);
border-top-color: var(--paper-line-2);
}
/* Receipt drop zone — brand-lit paper target, not a second navy hero */
.canvas[data-view="receipt"] .drop {
border-color: var(--brand-line);
background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
}
.canvas[data-view="receipt"] .drop.is-over {
border-color: var(--brand);
background: var(--brand-soft);
}
/* Settings facts as a quiet spec sheet */
.canvas[data-view="settings"] .facts dt {
color: var(--paper-label);
font-size: .68rem;
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
}
.canvas[data-view="settings"] .facts dd.mono {
display: inline-block;
padding: .15rem .45rem;
border-radius: 4px;
background: var(--paper-floor);
border: 1px solid var(--paper-line-2);
color: var(--tx-2);
}
/* Admin open high-priority already uses .tag.warn; tint open checks softly */
.canvas[data-view="admin"] .check:not(.is-done):hover {
background: color-mix(in srgb, var(--warn-bg) 45%, var(--paper-wash));
}
.canvas[data-view="tax"] .check.is-done {
background: color-mix(in srgb, var(--ok-bg) 40%, transparent);
}
/* ── Leave entitlement balances (MY HR / Cuti) ── */
.leave-balance-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .75rem;
}
.leave-bal-cell {
padding: .85rem 1rem;
background: var(--paper-floor, var(--sunken));
border: 1px solid var(--paper-line-2, var(--line-2));
border-radius: var(--r-sm);
}
.leave-bal-cell.is-low {
border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface));
}
.leave-bal-cell p {
margin: 0;
font-size: .72rem;
font-weight: 650;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tx-3);
}
.leave-bal-cell strong {
display: block;
font-size: 1.45rem;
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin: .2rem 0 .15rem;
color: var(--tx-1);
}
.leave-bal-cell small,
.leave-bal-foot {
font-size: .74rem;
color: var(--tx-3);
}
.leave-bal-unset {
display: flex;
flex-wrap: wrap;
gap: .55rem;
align-items: center;
}
.leave-form-bal { margin-bottom: .35rem; }
.leave-team-body { display: flex; flex-direction: column; gap: .55rem; }
.leave-team-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem .75rem;
padding: .55rem 0;
border-bottom: 1px solid var(--line-3);
}
.leave-team-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.leave-team-name { font-weight: 590; color: var(--tx-1); }
.leave-team-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.leave-team-chip {
display: inline-flex;
align-items: baseline;
gap: .25rem;
padding: .2rem .5rem;
border-radius: 4px;
border: 1px solid var(--paper-line-2, var(--line-2));
background: var(--surface);
font-size: .82rem;
font-variant-numeric: tabular-nums;
color: var(--tx-1);
}
.leave-team-chip b {
font-size: .68rem;
font-weight: 650;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tx-3);
}
.leave-team-chip small { color: var(--tx-3); font-size: .74rem; }
.leave-team-chip.is-low {
border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
background: color-mix(in srgb, var(--warn-bg) 50%, var(--surface));
}
.leave-team-chip.is-unset { color: var(--tx-3); }