/* ============================================================================ Madhuri Console — R1 shell + coverage board (see docs/UI_OVERHAUL_PLAN.md) Theme tokens: every colour lives in a custom property; dark and light are each SELECTED palettes (never an auto-invert). data-theme on . Status colours are reserved (good/warn/serious/crit) and always ship with an icon or label — never colour alone. ========================================================================== */ :root[data-theme="dark"] { --bg: #141413; --panel: #1a1a19; --panel2: #1d1d1b; --line: #2c2c2a; --line2: #3a3a37; --ink: #e8e8e4; --ink2: #b9b9b2; --muted: #9a9a94; --faint: #77776f; --accent-ink: #111; --accent-bg: #e8e8e4; --cell-vac-bg: #2a1717; --cell-vac-ink: #f0a5a5; --dbl: #5aa7d6; --dbl-bg: #16303f; --dbl-line: #2e5a75; --dbl-ink: #7fc4ea; --t6-bg: #3a2f14; --t6-ink: #fab219; --t6-line: #6b5417; --lv-line: #4a3a66; --sd-line: #6b3f2b; --off-line: #6b5417; --utf-bg: #33261c; --utf-ink: #e0a878; --good: var(--mreC-good, #21c221); --warn: var(--mreC-offer, #fab219); --serious: #ec835a; --crit: var(--mreC-gap, #e35555); --yes: #6fae6f; /* softer than --good — YES answer text */ --leave: #a58ad4; } :root[data-theme="light"] { --bg: #f4f4f1; --panel: #ffffff; --panel2: #fafaf7; --line: #e4e4df; --line2: #d2d2cb; --ink: #22221f; --ink2: #55554f; --muted: #8a8a82; --faint: #a3a39b; --accent-ink: #fff; --accent-bg: #22221f; --cell-vac-bg: #fbeaea; --cell-vac-ink: #a32a2a; --dbl: #3d7fb3; --dbl-bg: #e3eef7; --dbl-line: #a9c8de; --dbl-ink: #2b5f8a; --t6-bg: #fdf3d8; --t6-ink: #8a6408; --t6-line: #e0c37a; --lv-line: #b9a4dd; --sd-line: #e0a884; --off-line: #e0c37a; --utf-bg: #f9e9dc; --utf-ink: #8a5a34; --good: var(--mreC-good, #0ca30c); --warn: var(--mreC-offer, #c28908); --serious: #c96a42; --crit: var(--mreC-gap, #d03b3b); --yes: #4e8a4e; /* softer than --good — YES answer text */ --leave: #8e6fc4; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); } .shell { display: grid; grid-template-columns: 218px 1fr; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────────────────────────── */ .side { background: var(--panel); border-right: 1px solid var(--line); padding: 18px 0; display: flex; flex-direction: column; } .brand { padding: 0 18px 16px; font-weight: 700; font-size: 15px; letter-spacing: .02em; } .brand span { color: var(--muted); font-weight: 400; font-size: 11px; display: block; } .brandbtns { display: flex; gap: 6px; padding: 0 18px 12px; } .brandbtns .ghostbtn { flex: 1; padding: 5px 6px; font-size: 11px; } /* Attention Required (v2.44.0, owner Console #1) — folded sidebar group between Operate and Admin; the count wears the loudest tone present */ .attngrp { margin-top: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2px 0; } .attngrp summary { padding: 8px 18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .attngrp summary::before { content: '\25B8'; font-size: 10px; } .attngrp[open] summary::before { content: '\25BE'; } .attngrp summary:hover { color: var(--ink); } .attncount { margin-left: auto; background: var(--panel2); border: 1px solid var(--line2); color: var(--ink); border-radius: 9px; font-size: 10.5px; padding: 0 8px; font-weight: 700; } .attncount.hot { background: var(--crit); border-color: var(--crit); color: #fff; } .attncount.warm { background: var(--warn); border-color: var(--warn); color: #201800; } #attnItems { padding: 2px 10px 8px; max-height: 46vh; overflow-y: auto; } #attnItems .ev { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; font-size: 11.5px; background: var(--panel2); cursor: pointer; } #attnItems .ev:hover { border-color: var(--muted); } #attnItems .ev b { display: block; font-size: 11.5px; } #attnItems .ev .meta { color: var(--muted); font-size: 10.5px; margin-top: 2px; } #attnItems .empty { color: var(--muted); font-size: 11.5px; padding: 8px; } .side nav { flex: 1; } .side nav a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: var(--ink2); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; cursor: pointer; } .side nav a small { color: var(--faint); font-size: 9.5px; margin-left: auto; letter-spacing: .05em; } .side nav a:hover { color: var(--ink); } .side nav a.on { color: var(--ink); background: var(--panel2); border-left-color: var(--ink); font-weight: 600; } .side nav .grp { padding: 14px 18px 4px; font-size: 10px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; } /* Operate controls live in the left column now (owner iron-out #3) */ .sidectl { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 7px; } .sidectl .wk { justify-content: space-between; } .sidectl .pivot a { flex: 1; text-align: center; } .sidectl .ghostbtn { padding: 6px 10px; font-size: 11.5px; } .sidectl .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 0; } .sidectl .tile { border-radius: 8px; padding: 5px 8px; display: flex; align-items: baseline; gap: 6px; justify-content: center; } /* Collapsed legacy group (v2.23.2) — one folded entry until R6 retires it */ .legacygrp { margin-top: 14px; } .legacygrp summary { padding: 7px 18px; font-size: 11px; color: var(--faint); cursor: pointer; list-style: none; letter-spacing: .05em; } .legacygrp summary::before { content: '▸ '; } .legacygrp[open] summary::before { content: '▾ '; } .legacygrp summary:hover { color: var(--muted); } .legacygrp summary small { color: var(--faint); font-size: 9px; margin-left: 4px; } .legacygrp a { opacity: .75; font-size: 12px; } .sidefoot { padding: 12px 18px 0; display: flex; flex-direction: column; gap: 8px; } .ghostbtn { display: block; text-align: center; font-size: 12px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line2); background: transparent; color: var(--ink2); cursor: pointer; text-decoration: none; font-family: inherit; } .ghostbtn:hover { color: var(--ink); border-color: var(--muted); } .ghostbtn.live { color: var(--accent-ink); background: var(--accent-bg); border-color: transparent; font-weight: 600; } /* ── Main / topbar ─────────────────────────────────────────────────────── */ .main { padding: 18px 22px; overflow-x: auto; min-width: 0; } .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .topbar h1 { font-size: 16px; font-weight: 650; } /* The bold bubble page-nav (v2.47.0, owner iron-out #1) — same look, same position (right after the title) on every surface */ .pagenav { display: flex; gap: 4px; } .pagenav a { padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; cursor: pointer; } .pagenav a:hover { color: var(--ink); } .pagenav a.on { background: var(--ink); color: var(--bg); font-weight: 600; } .wk { color: var(--muted); font-size: 12.5px; border: 1px solid var(--line2); padding: 4px 6px; border-radius: 7px; display: flex; align-items: center; gap: 8px; } .wknav { cursor: pointer; padding: 1px 8px; border-radius: 5px; color: var(--ink2); user-select: none; } .wknav:hover { background: var(--panel2); color: var(--ink); } .pivot { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; font-size: 11.5px; } .pivot a { padding: 5px 12px; cursor: pointer; color: var(--ink2); user-select: none; } .pivot a.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; } .topbar2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .stats { display: flex; gap: 8px; margin-left: auto; } .tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; display: flex; align-items: baseline; gap: 6px; } .tile .n { font-size: 13px; font-weight: 700; line-height: 1.2; } .tile .t { font-size: 9.5px; color: var(--muted); letter-spacing: .06em; } /* ── Board ─────────────────────────────────────────────────────────────── */ /* Density scale: --cs (cell scale) switches comfortable ↔ compact. Cell anatomy copies the room's weekly roster sheet: identity first (name / time range), detail second, ANNOTATION ONLY WHEN THERE IS ONE — a plain covered seat is a green dot, not a sentence. */ :root { --cs-pad: 5px 8px; --cs-font: 11.5px; --cs-sub: 10.5px; --cs-min: 104px; --cs-h3: 60px; } :root[data-density="compact"] { --cs-pad: 3px 6px; --cs-font: 10.5px; --cs-sub: 9.5px; --cs-min: 84px; --cs-h3: 50px; } .boardwrap { min-height: 320px; overflow: auto; max-height: calc(100vh - 130px); } .loading { color: var(--muted); font-size: 13px; padding: 40px 10px; } #board { border-collapse: separate; border-spacing: 3px; width: 100%; } #board th { font-size: 10.5px; color: var(--muted); font-weight: 600; padding: 4px 6px; text-align: center; position: sticky; top: 0; background: var(--bg); z-index: 3; } #board th.rowhead { text-align: left; left: 0; z-index: 4; } #board td.rl { font-size: 12px; color: var(--ink2); white-space: nowrap; padding-right: 8px; vertical-align: top; padding-top: 8px; position: sticky; left: 0; background: var(--bg); z-index: 2; } #board td.rl b { color: var(--ink); font-weight: 600; } /* v2.127.2 (mechanics batch 2 #1): border-spacing leaves 3px TRANSPARENT gutters between cells — sticky cells paint them with the page bg so scrolling pills can't show through the frozen column/header row. */ #board td.rl, #board th { box-shadow: 0 0 0 3px var(--bg); } #board td.rl small { color: var(--faint); display: block; font-size: 10px; } #board tr.band td { font-size: 10px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; padding: 10px 4px 3px; border-bottom: 1px solid var(--line); } .cell { border-radius: var(--mreC-radius, 7px); padding: var(--cs-pad); font-size: var(--cs-font); min-width: var(--cs-min); background: var(--panel2); border: var(--mreC-borderw, 1px) solid var(--mreC-border, var(--line)); margin-bottom: 3px; } .cell .who { font-weight: 600; color: var(--ink); font-size: var(--cs-font); display: flex; align-items: center; gap: 5px; } .cell .who .dot { margin-left: auto; } .cell .sub { color: var(--muted); font-size: var(--cs-sub); margin-top: 1px; } /* Line 3 of the forced 3-line cell format (People pivot): ancillary — OT answer, SD, leave chip, badges. Reserved even when empty so every cell in the grid is the same height. */ .cell .anc { font-size: 10px; margin-top: 2px; min-height: 14px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } #board.pv .cell { min-height: var(--cs-h3); } #board.pv .cell.blank { min-height: var(--cs-h3); } #board.pv .cell.dblstack { min-height: calc(var(--cs-h3) * 2); } .cell .st { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); margin-top: 2px; flex-wrap: wrap; } .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; } .dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.serious { background: var(--serious); } .dot.crit { background: var(--crit); } .dot.leave { background: var(--leave); } .cell.vac { border-color: var(--crit); background: var(--cell-vac-bg); } .cell.vac .who { color: var(--cell-vac-ink); } .cell.off { border-color: var(--off-line); } .cell.sd { border-color: var(--sd-line); } .cell.lv { border-color: var(--lv-line); } .cell.utf { border-color: var(--utf-ink); background: var(--utf-bg); } .cell.utf .who { color: var(--utf-ink); } .cell.dayoff { border-style: dashed; opacity: .65; } /* Unavailable / N-A (v2.60.0) — hatched, muted, non-interactive. Marks a day skipped by OT/CBI offers (window: 22:00 prev evening → 21:59). */ .cell.nacell { border-style: dashed; border-color: var(--muted); opacity: .8; background: repeating-linear-gradient(135deg, var(--panel2) 0 6px, var(--line) 6px 8px); } .cell.nacell .who { color: var(--muted); letter-spacing: .08em; } .cell.nacell .sub { font-style: italic; } .cell.dayoff .who { color: var(--muted); font-weight: 400; } .cell.dbl { border-left: 3px solid var(--dbl); } .badge { font-size: 9px; padding: 1px 5px; border-radius: 5px; letter-spacing: .04em; background: var(--dbl-bg); color: var(--dbl-ink); border: 1px solid var(--dbl-line); white-space: nowrap; } .badge.t6 { background: var(--t6-bg); color: var(--t6-ink); border-color: var(--t6-line); } .badge.rej { background: transparent; color: var(--crit); border-color: var(--crit); font-weight: 700; } .badge.sd { background: transparent; color: var(--serious); border-color: var(--sd-line); font-weight: 700; } #cellPop .hist .h.pick { cursor: pointer; border-radius: 6px; padding: 5px 7px; } #cellPop .hist .h.pick:hover { background: var(--panel2); outline: 1px solid var(--line2); } .otans { font-size: 10px; font-weight: 800; letter-spacing: .04em; } .otans.no { color: var(--crit); } .otans.q { color: var(--warn); } .otans.yes { color: var(--yes); } .cell.rejcell { opacity: .75; } .cell.rejcell .who, .cell.rejcell .sub { color: var(--muted); } /* Needs supervisor review (v2.26.2) — source leave/CBI cancelled while the fill was active. State styling only (amber edge), no in-cell badge. */ .cell.revcell { outline: 2px solid var(--warn); outline-offset: -2px; } /* Accepted double-up (v2.27.0) — deliberate two-person desk */ .dplus { color: #3d7dc4; font-weight: 800; font-size: 12px; } /* Shift remark marker (v2.29.0) — text lives in the popover */ .rmkg { color: var(--muted); font-size: 10px; } .card .c-rej { font-size: 11px; color: var(--crit); margin-top: 5px; } .card .c-rej small { color: var(--muted); font-size: 10.5px; } .cell.dblstack { padding: 0; overflow: visible; border-left: 3px solid var(--dbl); } /* Each half of a double is a FULL 3-line box (owner #6) */ .cell.dblstack .seg { padding: var(--cs-pad); min-height: var(--cs-h3); } .cell.dblstack .seg + .seg { border-top: 1px dashed var(--dbl-line); position: relative; } /* Unified chain language (v2.59.0, owner): a chain is marked on the TOUCHING EDGES of its two shifts — the seam inside a same-day stack, or matching edge tabs when the chain crosses midnight into the next date column. One colour, one glyph, every scenario. */ .cell.dblstack .seg + .seg::before { content: '⧉'; content: '»'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(90deg); color: var(--dbl); font-weight: 800; font-size: 12px; background: var(--panel2); padding: 0 3px; line-height: 1; } .cell.chn-next { border-right: 3px solid var(--dbl); position: relative; } .cell.chn-next::after { content: '»'; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); color: var(--dbl); font-weight: 800; font-size: 13px; line-height: 1; } .cell.chn-prev { border-left: 3px solid var(--dbl); position: relative; } .cell.chn-prev::before { content: '»'; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); color: var(--dbl); font-weight: 800; font-size: 13px; line-height: 1; } .cell.chn-prev .who, .cell.chn-prev .sub, .cell.chn-prev .anc { padding-left: 8px; } .cell.blank { background: transparent; border-color: transparent; min-height: 10px; } .cell .who s, .cell .sub s { color: var(--faint); text-decoration-color: var(--crit); } .chip { font-size: 9px; font-weight: 700; border-radius: 5px; padding: 1px 6px; letter-spacing: .05em; } .chip.lv { background: var(--mreC-leave-soft, #fbe3cc); color: var(--mreC-leave-deep, #8a4d12); } .chip.ot { background: var(--mreC-ot-soft, #f8e6e6); color: var(--mreC-ot-deep, #8f1d1d); border: 1px solid var(--mreC-ot, #c22222); } th.nextwk, td.nextwk { opacity: .45; } .boardnote { color: var(--faint); font-size: 11px; margin-top: 10px; } .cell.clickable { cursor: pointer; } .cell.clickable:hover { border-color: var(--muted); } .cell.selected { outline: 2px solid var(--ink); outline-offset: 1px; } /* ── Open-shifts tray (v2.16.0) ─────────────────────────────────────────── */ .tray { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; } .tray h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .traycount { background: var(--panel2); border: 1px solid var(--line2); color: var(--ink); border-radius: 9px; font-size: 11px; padding: 0 8px; } .traycards { display: flex; flex-wrap: wrap; gap: 10px; } .tray-empty { color: var(--faint); font-size: 12px; padding: 4px 0 10px; } .card { width: 235px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; cursor: pointer; position: relative; } .card:hover { border-color: var(--muted); } .card.vac { border-left: 3px solid var(--crit); } .card.pend { border-left: 3px solid var(--warn); } .card .c-top { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; } .card .c-top b { font-weight: 700; } .card .c-band { margin-left: auto; font-size: 10px; letter-spacing: .07em; color: var(--muted); } .card .c-time { color: var(--muted); font-size: 11px; margin-top: 1px; } .card .c-vac { font-size: 11px; color: var(--ink2); margin-top: 6px; display: flex; align-items: center; gap: 6px; } .card .c-vac s { color: var(--muted); } .card .c-state { font-size: 11px; font-weight: 700; margin-top: 6px; letter-spacing: .03em; } .card.vac .c-state { color: var(--crit); } .card.pend .c-state { color: var(--warn); } .card .c-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .card .c-acts button { font-family: inherit; font-size: 11px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); cursor: pointer; } .card .c-acts button:hover { border-color: var(--muted); } .card .c-acts button:disabled { opacity: .5; cursor: default; } .card .c-acts button.go { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 600; } .card .c-acts button.danger { border-color: var(--crit); color: var(--crit); background: transparent; } .card .c-msg { font-size: 11px; margin-top: 6px; color: var(--muted); min-height: 0; } .card .c-msg.ok { color: var(--good); } .card .c-msg.err { color: var(--crit); } .card.selected { outline: 2px solid var(--ink); outline-offset: 1px; } /* ── Cell popover ──────────────────────────────────────────────────────── */ #cellPop { position: absolute; z-index: 50; width: 300px; background: var(--panel); border: 1px solid var(--line2); border-radius: 11px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 12.5px; } #cellPop h3 { font-size: 13px; margin-bottom: 2px; display: flex; align-items: center; gap: 7px; } #cellPop .sub { color: var(--muted); font-size: 11.5px; margin-bottom: 10px; } #cellPop .row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0; } #cellPop .row span:first-child { color: var(--muted); } #cellPop .acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; } #cellPop button { font-size: 11.5px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); cursor: pointer; font-family: inherit; } #cellPop button.go { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 600; } #cellPop button.danger { border-color: var(--crit); color: var(--crit); } #cellPop button:disabled { opacity: .5; cursor: default; } #cellPop .close { position: absolute; top: 8px; right: 10px; color: var(--muted); cursor: pointer; font-size: 14px; } #cellPop .msg { margin-top: 9px; font-size: 11.5px; color: var(--muted); } #cellPop .msg.err { color: var(--crit); } #cellPop .msg.ok { color: var(--good); } #cellPop select, #cellPop input { width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 8px; font-size: 11.5px; margin-top: 5px; font-family: inherit; } #cellPop label { font-size: 10.5px; color: var(--muted); display: block; margin-top: 8px; } #cellPop .hist { max-height: 190px; overflow: auto; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 7px; } #cellPop .hist .h { font-size: 11px; padding: 3px 0; border-bottom: 1px dashed var(--line); } #cellPop .hist .h b { font-weight: 600; } #cellPop .hist .h small { color: var(--faint); display: block; } /* Employee column ~2x wider (owner Console #3) */ #board.pv td.rl { min-width: 195px; } #board.pv td.rl small { white-space: normal; } /* Attention-click flash on the matching tray card */ @keyframes attnflash { 0%,100% { outline-color: transparent; } 25%,75% { outline-color: var(--warn); } } .card.flash { outline: 3px solid var(--warn); animation: attnflash 1.6s ease 1; } /* Zebra shading per person row (owner #7) — People pivot only */ #board.pv tbody tr:nth-child(even) td { background: rgba(127, 127, 127, .055); } /* v2.128.1 (batch-2 #1, the REAL root cause): that row band is TRANSLUCENT and overrides the sticky label's opaque background, so even-row labels let scrolling pills ghost straight through. The label column takes an OPAQUE banded colour instead (same visual rhythm, nothing shows through), gutters painted to match. v2.130.1 (owner remark 22/08 #6): painting the RIGHT gutter panel2 put pill-coloured paint flush against the first column's pills, so their left border-radius read as clipped at hard-left scroll. The first shadow (offset, no spread) repaints just that right strip with the page bg — every gutter in the row reads bg again, the radius keeps its dark notch, and the left/top/bottom band paint that hides scrolling pills stays panel2. */ #board.pv tbody tr:nth-child(even) td.rl { background: var(--panel2); box-shadow: 3px 0 0 var(--bg), 0 0 0 3px var(--panel2); } .cell.blank.clickable { cursor: pointer; } .cell.blank.clickable:hover { border-style: dashed; border-color: var(--muted); } /* ── Admin suite (v2.33.0) — Fills & Audit ─────────────────────────── */ .adm-search { display: flex; gap: 6px; align-items: center; margin-left: 14px; flex: 1; max-width: 430px; } .adm-search input { flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; } .admwrap { padding: 14px 18px; overflow-y: auto; flex: 1; } .adm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .adm-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .adm-ref { font-size: 16px; letter-spacing: .02em; } .adm-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .adm-status.s-accepted { color: var(--yes); } .adm-status.s-offered, .adm-status.s-pending { color: var(--warn); } .adm-status.s-cancelled, .adm-status.s-rejected { color: var(--muted); } .adm-status.s-unfilled { color: var(--serious); } .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px 18px; margin-bottom: 12px; } .adm-grid > div { font-size: 12.5px; display: flex; gap: 8px; } .adm-grid > div > span { color: var(--muted); min-width: 74px; } .adm-grid .adm-wide { grid-column: 1 / -1; } /* Proper form fields for admin dialogs (v2.50.0, iron-out #16) */ .adm-form { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px 16px; margin-bottom: 12px; } .adm-form .fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .adm-form .fld > span { font-size: 11px; color: var(--muted); letter-spacing: .04em; } .adm-form select, .adm-form input { width: 100%; background: var(--panel2); border: 1px solid var(--line2); color: var(--ink); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; } .adm-form .fld-wide { grid-column: 1 / -1; } .adm-x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 8px; border-radius: 6px; text-decoration: none; } .adm-x:hover { color: var(--ink); background: var(--panel2); } .adm-card .acts button { font-size: 12px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); cursor: pointer; font-family: inherit; } .adm-card .acts button.go { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg); font-weight: 600; } /* Sortable + filterable feed headers (iron-out #14) */ .adm-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .adm-table th.sortable:hover { color: var(--ink); } .adm-table th.sortable .dir { font-size: 9px; margin-left: 3px; } .adm-table tr.filterrow td { padding: 2px 6px 6px; } .adm-table tr.filterrow input { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 3px 7px; font-size: 11px; font-family: inherit; } /* Fold-out settings sections (iron-out #17) */ .fold { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--panel); } .fold summary { padding: 10px 14px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } .fold summary::before { content: '\25B8'; font-size: 11px; color: var(--muted); } .fold[open] summary::before { content: '\25BE'; } .fold summary h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0; } .fold summary small { color: var(--faint); font-size: 11px; } .fold .foldbody { padding: 4px 14px 14px; } .adm-tl { border-top: 1px solid var(--line); padding-top: 8px; max-height: 300px; overflow-y: auto; } .adm-tlrow { display: grid; grid-template-columns: 125px 130px 150px 1fr; gap: 8px; font-size: 12px; padding: 3px 0; border-bottom: 1px dotted var(--line); } .adm-tlrow small { color: var(--muted); } .adm-tlrow em { color: var(--muted); font-style: normal; } .adm-feedhead { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; } .adm-feedhead h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0; } .adm-filters { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); } .adm-filters input, .adm-filters select { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 4px 7px; font-size: 12px; } .adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .adm-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; border-bottom: 1px solid var(--line); } .adm-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); } .adm-table a { color: var(--ink); } .adm-act { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .adm-act.a-offered { color: var(--warn); } .adm-act.a-created { color: var(--ink); } .adm-act.a-accepted { color: var(--yes); } .adm-act.a-rejected, .adm-act.a-force_rejected { color: var(--crit); } .adm-act.a-cbi_cancelled, .adm-act.a-ot_cancelled, .adm-act.a-cancelled, .adm-act.a-offer_withdrawn { color: var(--muted); } .filllink { color: var(--ink); text-decoration: underline dotted; } /* ── Timeline day view (v2.40.0) ───────────────────────────────────── */ .tl-grid { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 14px; } .tl-hd { position: relative; height: 18px; margin-left: 170px; } .tl-hd b { position: absolute; font-size: 10px; color: var(--faint); transform: translateX(-50%); } .tl-row { display: flex; align-items: center; border-top: 1px solid var(--line); min-height: 34px; } .tl-name { width: 170px; flex: none; font-size: 12px; } .tl-name small { color: var(--faint); margin-left: 6px; } .tl-lane { position: relative; flex: 1; height: 24px; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 12)); } .tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; font-style: normal; overflow: hidden; display: flex; align-items: center; padding: 0 6px; } .tl-bar em { font-size: 10px; font-style: normal; white-space: nowrap; color: var(--ink); } .tl-ros { background: var(--panel2); border: 1px solid var(--line); } .tl-fill { background: color-mix(in srgb, var(--yes) 22%, transparent); border: 1px solid var(--yes); } .tl-off { background: color-mix(in srgb, var(--warn) 18%, transparent); border: 1px dashed var(--warn); } .tl-vac { background: transparent; border: 1px dashed var(--crit); } .tl-vac em { color: var(--muted); text-decoration: line-through; } .tl-spill { opacity: .55; } /* ── Run sheet (v2.40.0) — wall screen ─────────────────────────────── */ .rs-band { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; } .rs-band h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: .18em; color: var(--muted); } .rs-band.rs-now { border-color: var(--yes); } .rs-band.rs-now h2 { color: var(--yes); } .rs-desks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .rs-desk { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } .rs-desk small { color: var(--muted); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .rs-desk b { font-size: 17px; } .rs-desk em { display: block; font-size: 11px; color: var(--muted); font-style: normal; margin-top: 2px; } .rs-warn { border-color: var(--warn); } .rs-crit { border-color: var(--crit); } .rs-crit b { color: var(--crit); } /* R2 (v2.128.0): keyboard focus ring on cells + ARMED board-dim groundwork (classes unused until the ARMED state ships) */ [data-i]:focus { outline: 2px solid var(--line2); outline-offset: -2px; } .cell.ctx-dim { opacity: .35; } .cell.ctx-legal { outline: 2px solid var(--good); outline-offset: -2px; } /* ── Acting pass (v2.130.0, WIRING_SPEC_2 R1) ─────────────────────── The register's three bands + the drawer's form grammar. Design sources: Acting up.html §1/§2/§5/§6, States.html §2-§6. Every colour is a token; the pre-flight band is a FIXED height by canon (READ ME §4) — a content-sized band moves the CTA mid-reach. */ .act-path { font: 600 10px ui-monospace, Menlo, monospace; letter-spacing: .09em; color: var(--faint); text-transform: uppercase; } .act-filter { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); } .act-filter label { font-size: 11px; letter-spacing: .04em; } .act-filter input { background: var(--panel2); border: 1px solid var(--line2); color: var(--ink); border-radius: 7px; padding: 5px 8px; font: 12px ui-monospace, Menlo, monospace; } .topbar .go { margin-left: auto; background: var(--accent-bg); color: var(--accent-ink); border: 1px solid var(--accent-bg); border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .topbar .go:disabled { opacity: .45; cursor: default; } .act-load { color: var(--muted); font: 11.5px ui-monospace, Menlo, monospace; padding: 10px 2px; } .act-empty { color: var(--muted); font-size: 12px; padding: 10px 2px; line-height: 1.5; } .act-empty button { margin-left: 8px; } /* a · the suggestions strip — neutral until it has rows (States §2) */ .act-strip { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 11px 14px; margin-bottom: 12px; } .act-strip.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); } .act-strip.err { border-color: var(--crit); } .act-striphead { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; } .act-striphead .n { margin-left: auto; color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; } .act-sug { display: flex; align-items: center; gap: 12px; padding: 7px 0 2px; border-top: 1px solid var(--line); margin-top: 8px; font-size: 12px; } .act-sug .who { font-weight: 600; } .act-sug .who small { color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; margin-left: 6px; } .act-sug .msg { color: var(--ink2); flex: 1; min-width: 0; } .act-sug .win { font: 11.5px ui-monospace, Menlo, monospace; color: var(--muted); white-space: nowrap; } /* b · the register table */ .act-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .act-table th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line2); } .act-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .act-table tr.dead td { color: var(--muted); } .act-table tr.flash td { background: color-mix(in srgb, var(--warn) 16%, transparent); } .act-table .t { display: block; color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; } .act-table a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line2); } .act-table a:hover { border-bottom-style: solid; } .act-table .win { font: 11.5px ui-monospace, Menlo, monospace; white-space: nowrap; } .act-table .verbs { white-space: nowrap; text-align: right; } .act-mark { font-weight: 600; } .act-mark small { display: block; color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; } .act-sub { display: block; color: var(--faint); font-size: 10.5px; } .act-was { text-decoration: line-through; } .act-gap { border: 1px dashed var(--line2); border-radius: 5px; padding: 0 4px; font: 9.5px ui-monospace, Menlo, monospace; color: var(--faint); margin-left: 5px; cursor: help; } .act-stale { margin-left: auto; border-bottom: 1px dashed var(--line2); color: var(--faint); font-size: 11px; cursor: help; } .act-inerr { border: 1px solid var(--crit); border-radius: 9px; padding: 9px 12px; margin-bottom: 10px; font-size: 12px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .act-inerr b { color: var(--crit); } .act-inerr code { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); } .act-inerr .retry { color: var(--ink); border-bottom: 1px dashed var(--line2); cursor: pointer; } /* c · higher duties — its own view, not a fold (Acting up.html §5) */ .act-duty { width: 100%; border-collapse: collapse; font-size: 12px; } .act-duty th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; padding: 5px 8px; border-bottom: 1px solid var(--line2); } .act-duty td { padding: 4px 8px; border-bottom: 1px solid var(--line); font: 11.5px ui-monospace, Menlo, monospace; } .act-duty tr.future td { opacity: .62; } .act-duty tfoot td { border-bottom: 0; border-top: 1px solid var(--line2); font-weight: 600; } .act-duty .note { color: var(--warn); font-family: inherit; } /* the drawer's form grammar */ .ctxsurf .act-fld { margin-top: 9px; } .ctxsurf .act-lb { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; display: block; } .ctxsurf .act-derived { font-size: 11.5px; margin-top: 3px; } .ctxsurf .act-derived em { color: var(--muted); font-style: normal; } .ctxsurf .act-win { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ctxsurf .act-radio { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--line); } .ctxsurf .act-radio:last-of-type { border-bottom: 0; } .ctxsurf .act-radio input { width: auto; margin: 2px 0 0; } .ctxsurf .act-radio .rl { flex: 1; min-width: 0; font-size: 12px; } .ctxsurf .act-radio .rc { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; } .act-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.45; } .act-note code { font: 10.5px ui-monospace, Menlo, monospace; color: var(--faint); } .act-tools { display: flex; gap: 7px; margin-bottom: 9px; } /* the ? balloon — verbose explanation never inline (READ ME §4) */ .bq { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px dashed var(--line2); border-radius: 50%; color: var(--muted); font-size: 9.5px; cursor: help; flex: none; } .bq .bb { display: none; position: absolute; left: 18px; top: -6px; z-index: 90; width: 256px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.45; color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.35); text-align: left; cursor: default; } .bq:hover .bb, .bq:focus .bb { display: block; } .bq .bb em { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--muted); font-style: normal; font-size: 10.5px; } .bq.right .bb { left: auto; right: 18px; } /* v2.137.0 · R2 — the two extra ways in (spec §8/§10). The leave-lodge nudge is ADVISORY: it appends to the message the action already wrote, never blocks the lodge, and never appears unless the ENGINE sent a suggestion. The Employees row action is the other direction. */ .act-nudge { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 7px 10px; border: 1px dashed var(--line2); border-radius: 8px; color: var(--ink2); font-size: 11.5px; } .act-nudge span { flex: 1; min-width: 200px; } .act-nudge a { text-decoration: none; white-space: nowrap; } /* .ghostbtn is display:block by default (it is a full-width sidebar control almost everywhere) — the row verbs sit side by side */ .emp-verbs { white-space: nowrap; text-align: right; } .emp-verbs .ghostbtn { display: inline-block; vertical-align: middle; padding: 5px 9px; font-size: 11.5px; } .emp-verbs a { text-decoration: none; margin-left: 6px; } /* v2.137.0 · R2 — the §2b backfill chain. DEPTH LABELS ON A SINGLE RAIL, never indentation: indenting each level eats the 388px drawer after two steps, and the chain is uncapped. */ .ctxsurf .act-chain { display: flex; flex-direction: column; gap: 0; margin-top: 5px; } .ctxsurf .clink { display: flex; gap: 0; align-items: stretch; } .ctxsurf .crail { width: 22px; flex: none; position: relative; } .ctxsurf .crail:before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--line2); } .ctxsurf .clink:first-child .crail:before { top: 14px; } .ctxsurf .clink:last-child .crail:before { bottom: auto; height: 14px; } .ctxsurf .crail i { position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line2); } .ctxsurf .cbox { flex: 1; min-width: 0; padding: 5px 0 8px; } .ctxsurf .cbox .ct { font-weight: 600; font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ctxsurf .cbox .cs { color: var(--muted); font-size: 11px; margin-top: 3px; } .ctxsurf .cbox .cs b { color: var(--ink); font-weight: 600; } .ctxsurf .cbox.cend .ct b { color: var(--warn); } .ctxsurf .cbox .mk { font-weight: 600; color: var(--ink2); } .ctxsurf .depth { font: 600 9px ui-monospace, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2); border-radius: 3px; padding: 1px 4px; } /* inline controls inside the rail — context.css sets every select to width:100%, which would put each one on its own line (the act-consent checkbox lesson, same override) */ .ctxsurf .act-chain select { width: auto; margin-top: 0; padding: 3px 6px; font-size: 11px; } .ctxsurf .act-chain select.cactor { flex: 1 1 140px; min-width: 110px; } .ctxsurf .act-chain .cdel { margin-left: auto; border: 1px solid var(--line2); background: transparent; color: var(--faint); border-radius: 5px; padding: 1px 5px; font-size: 10px; cursor: pointer; } .ctxsurf .act-chain .cdel:hover { color: var(--crit); border-color: var(--crit); } .ctxsurf .act-chain-tools { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; flex-wrap: wrap; } .ctxsurf .act-chain-tools .act-note { margin-top: 0; flex: 1; min-width: 140px; } /* the one ⚠ fold: what this press writes and what the engine guarantees */ .ctxsurf .act-chainwarn { border: 1px dashed var(--warn); border-radius: 8px; padding: 7px 10px; margin-top: 9px; font-size: 11.5px; } .ctxsurf .act-chainwarn .cwh { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--warn); } .ctxsurf .act-chainwarn ul { margin: 5px 0 0; padding-left: 16px; color: var(--ink2); } .ctxsurf .act-chainwarn li { margin: 0 0 3px; } .ctxsurf .act-chainwarn b { color: var(--ink); font-weight: 600; } /* per-level tag on a consent block and on a pre-flight line (§14 rider: consent never inherits, so the reader must see WHICH level) */ .ctxsurf .act-absorb .alv, .pfband .lvl { font: 600 9px ui-monospace, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2); border-radius: 3px; padding: 1px 4px; } .ctxsurf .act-absorb .alv { display: inline-block; margin-bottom: 6px; } .ctxsurf .act-absorb + .act-absorb { margin-top: 7px; } .pfband .lvl { margin-right: 5px; } /* the pre-flight band — FIXED 98px in all four states (READ ME §4; States.html §5 governs over Acting up.html §2's content-sized draw) */ .pfband { height: 98px; box-sizing: border-box; overflow: auto; margin-top: 12px; border-radius: 8px; padding: 7px 10px; font-size: 11.5px; border: 1px solid var(--line2); background: var(--panel2); } .pfband .pfh { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; } .pfband .pfl { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; color: var(--ink2); } .pfband .pfl .k { margin-left: auto; color: var(--faint); font: 9.5px ui-monospace, Menlo, monospace; } .pfband .pfl a { color: var(--ink); border-bottom: 1px dashed var(--line2); cursor: pointer; } .pfband.checking { border-style: dashed; color: var(--muted); } .pfband.checking .pfl { color: var(--faint); } .pfband.clear { border-color: var(--good); } .pfband.clear .pfh { color: var(--good); } .pfband.warn { border-style: dashed; border-color: var(--warn); } .pfband.warn .pfh { color: var(--warn); } .pfband.err { border-color: var(--crit); } .pfband.err .pfh { color: var(--crit); } .pfband .retry { color: var(--ink); border-bottom: 1px dashed var(--line2); cursor: pointer; } /* v2.131.0 — the OT-absorb consents (rendered only while the pre-flight reports §8b conflicts; absent beats empty) */ .ctxsurf .act-absorb { border: 1px dashed var(--warn); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 11.5px; } .ctxsurf .act-consent { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; color: var(--ink2); } .ctxsurf .act-consent + .act-consent { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); } .ctxsurf .act-consent input { width: auto; margin: 2px 0 0; flex: none; } .ctxsurf .act-consent span { flex: 1; min-width: 0; } .ctxsurf .act-consent b { color: var(--ink); } .ctxsurf .act-consent.acc b { color: var(--warn); } /* refusal, inside the drawer — values kept, engine text verbatim */ .ctxsurf .act-refuse { border: 1px solid var(--crit); border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 11.5px; } .ctxsurf .act-refuse b { color: var(--crit); display: block; } .ctxsurf .act-refuse .code { float: right; color: var(--muted); font: 10px ui-monospace, Menlo, monospace; } .ctxsurf .act-refuse .cf { margin-top: 5px; color: var(--ink2); } .ctxsurf .act-refuse .keep { color: var(--muted); margin-top: 6px; } .ctxsurf .act-refuse a { color: var(--ink); border-bottom: 1px dashed var(--line2); cursor: pointer; } /* ── §acting-board — the markers (v2.140.0 · acting R3a) ──────────────────── Owner rule: markers are MARKERS, not hues. Nothing below introduces an eighth colour — ▲/▽ are glyphs in a neutral badge, "away" is the board's existing greyed/dashed language, and a DOUBLE COVER borrows --dbl, the token that already means "two people on one seat". The name stays legible in every state: the coordinator needs to know WHO is missing. */ .badge.act { background: transparent; color: var(--ink2); border-color: var(--line2); font-weight: 700; letter-spacing: .04em; cursor: pointer; white-space: nowrap; } .badge.act:hover { border-color: var(--muted); color: var(--ink); } .badge.act i { font-style: normal; color: var(--faint); font-family: ui-monospace, Menlo, monospace; } .badge.dcov { background: var(--dbl-bg); color: var(--dbl-ink); border-color: var(--dbl-line); cursor: pointer; white-space: nowrap; } /* Acting INTO this room carries NO cell treatment at all — it is ordinary work, being done, and the badge is the whole story. `.acting` is still set on the cell so a later pass has the hook without a re-render. */ /* Acting AWAY from this room: greyed, name still legible (spec §8). */ .cell.away, .seg.away { opacity: .68; border-style: dashed; } .cell.away .who, .seg.away .who { color: var(--ink2); font-weight: 500; } /* Double cover — both hold the line until the covered person's leave lands (canon §8c). Same "two on one seat" language as a double-up. */ .cell.dcov, .seg.dcov { border-left: 3px solid var(--dbl); } /* ▽ GHOST — the displaced holder's own line, worked by their backfiller. Never work, never counted, never an ad-hoc/swap target: it exists so a chain-middle actor does not simply vanish from their home board. */ .cell.ghost { border-style: dashed; border-color: var(--line2); background: transparent; opacity: .72; cursor: pointer; } .cell.ghost:hover { opacity: 1; border-color: var(--muted); } .cell.ghost .who s, .cell.ghost .sub s { text-decoration-color: var(--muted); } /* A day off INSIDE an acting window says so, and is NOT an ad-hoc affordance (remarks batch 4 #1/#2 — the rider that started this). */ .cell.awaynote { cursor: pointer; border-style: dashed; } .cell.awaynote:hover { border-color: var(--muted); opacity: .9; } /* Band head count (spec §8) */ .bandact { margin-left: 10px; color: var(--ink2); font-size: 10px; letter-spacing: .06em; font-weight: 700; } /* ── the ONE arrangement drawer (js/acting-drawer.js · remarks 6.2) ──────── */ .ctxsurf .aa-body { font-size: 12px; } .ctxsurf .aa-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); } .ctxsurf .aa-row .k { color: var(--muted); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; width: 96px; flex: none; padding-top: 1px; } .ctxsurf .aa-row .v { flex: 1; min-width: 0; color: var(--ink); } .ctxsurf .aa-row small { color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; } .ctxsurf .aa-row em { color: var(--muted); font-style: italic; } .ctxsurf .aa-mark { font-weight: 700; } .ctxsurf .aa-state { font-weight: 700; letter-spacing: .04em; } .ctxsurf .aa-why { color: var(--ink2); margin-top: 8px; line-height: 1.5; } .ctxsurf .aa-chain { margin-top: 8px; padding: 7px 9px; border: 1px dashed var(--line2); border-radius: 8px; color: var(--ink2); line-height: 1.6; } .ctxsurf .aa-chain a { color: var(--ink); border-bottom: 1px dashed var(--line2); cursor: pointer; } .ctxsurf .aa-chain a:hover { border-bottom-style: solid; } .ctxsurf .aa-reason { margin-top: 8px; color: var(--ink2); font-style: italic; } .ctxsurf .aa-trail { margin-top: 8px; color: var(--faint); font: 10.5px ui-monospace, Menlo, monospace; line-height: 1.5; } .ctxsurf .aa-duty { margin-top: 8px; color: var(--muted); font-size: 11.5px; } /* ── §saved-ot — the tile (v2.141.0, Rankings) ────────────────────────────── Owner framing 24/08: every hour must be attributable, so the card IS the unit and the total sits above cards that account for it. No new hue — "was accepted" borrows --warn, the one token that already means "a human said yes and something changed underneath them". */ .sv-period { display: inline-flex; align-items: center; gap: 6px; } .sv-period select, .sv-period input { background: var(--panel2); border: 1px solid var(--line2); color: var(--ink); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; } .sv-total { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; font-size: 13px; } .sv-total .sv-when { color: var(--muted); font: 11px ui-monospace, Menlo, monospace; } .sv-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 10px; overflow: hidden; } .sv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); } .sv-head:hover { background: var(--panel2); } .sv-head .sv-mark { font-weight: 700; } .sv-head .sv-for { color: var(--ink2); } .sv-head .sv-win { color: var(--muted); font: 11px ui-monospace, Menlo, monospace; } .sv-head .sv-n { margin-left: auto; font-weight: 700; } .sv-rows { margin: 0; } .sv-rows .sv-note { color: var(--muted); font-size: 11px; } .sv-acc { color: var(--warn); font-weight: 700; border: 1px solid var(--warn); border-radius: 5px; padding: 0 6px; font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; } .sv-off { color: var(--muted); font-size: 10.5px; letter-spacing: .04em; } .sv-audit { padding: 7px 12px; border-top: 1px solid var(--line); color: var(--muted); font: 10.5px ui-monospace, Menlo, monospace; }