/* ══════════════════════════════════════════════════════════════════════════
Operator Console — app.css
Task Tracker, 2026 — dark "Operator Console" design system.
Tokens on :root so toasts / overlays / popovers inherit them.
RULE: never re-type a hex/size literal outside the :root block below.
══════════════════════════════════════════════════════════════════════════ */
/* ── Design Tokens ───────────────────────────────────────────────────── */
:root {
--type-scale: 1.1333; /* 17px "Large" config: body = calc(15px * --type-scale) */
/* ── Fonts ────────────────────────────────────────────────────────── */
/* Loaded via in base.html (Task 2). Fallbacks work without it. */
--font-ui: "Red Hat Text", system-ui, sans-serif;
--font-mono: "Red Hat Mono", ui-monospace, monospace;
/* ── Surfaces ─────────────────────────────────────────────────────── */
--bg: #0E1216; /* page background */
--surface: #161D24; /* raised "stage" cards — primary data surfaces */
--panel: #131A20; /* quiet "panel" surfaces — secondary context */
--border: #232C35; /* hairline borders */
--border-soft: #1C242C; /* softer divider */
--border-hi: #2E3A45; /* highlighted / active border */
/* ── Ink / text ───────────────────────────────────────────────────── */
--text: #E6EAEE; /* primary text */
--muted: #9AA5B1; /* secondary / meta — AA-pass (~6.8–7.5:1 on dark surfaces) */
--faint: #5C6670; /* decorative / disabled — FAILS AA (~2.9–3.2:1); NEVER functional text */
--text-inverse: #fff; /* on-dark-badge / on-filled surfaces */
/* ── Accents ──────────────────────────────────────────────────────── */
/* --gold = LIVE / RUNNING state ONLY: running-timer elapsed figure,
daily-hours hero. Do NOT use for CTAs, hover states, brand mark,
or any non-live emphasis. */
--gold: #F2B544;
/* gold (live) derivative alpha steps — timer strip + glow keyframes */
--gold-strip-bg: rgba(242,181,68,.06);
--gold-strip-border:rgba(242,181,68,.28);
--gold-glow: rgba(242,181,68,.45);
--gold-glow-0: rgba(242,181,68,0);
/* --ochre = Waiting status — DISTINCT from --gold (warmer/more-orange) */
--ochre: #D98A3D;
--ochre-wash: rgba(217,138,61,.14);
/* --blue = primary CTA, distinct from the live-gold accent */
--blue: #6AA3FF;
--blue-wash: rgba(106,163,255,.13);
--green: #54C98A; /* done / success */
--green-wash: rgba(84,201,138,.14);
--red: #F2615F; /* destructive / error / stop */
--red-wash: rgba(242,97,95,.14);
/* Classification tints — reason/kind badges. DISTINCT from gold(live), blue(CTA),
green(success), ochre(waiting) so they never read as those semantic lanes. AA on surface. */
--teal: #45C7C0; --teal-wash: rgba(69,199,192,.13); --teal-bd: rgba(69,199,192,.34);
--violet: #A98BF0; --violet-wash: rgba(169,139,240,.14); --violet-bd: rgba(169,139,240,.34);
--grey: #AEB7C2; --grey-wash: rgba(174,183,194,.10); --grey-bd: rgba(174,183,194,.26);
/* ── Priority ─────────────────────────────────────────────────────── */
--pri-1: #F2615F; /* high */
--pri-2: #C8942F; /* normal — muted gold, distinct from live --gold */
--pri-3: #5C6670; /* low */
/* ── Type ramp — base is 17px ("Large" config, chosen 2026-06-25) ─── */
--text-xs: 0.85rem; /* ~13.6px — small labels (use sparingly) */
--text-sm: 0.92rem; /* ~14.7px */
--text-base: 1.0625rem; /* 17px — body / UI default */
--text-md: 1.2rem; /* ~19.3px */
--text-lg: 1.56rem; /* ~24.9px */
--text-xl: 1.98rem; /* ~31.7px */
--text-2xl: 2.98rem; /* ~47.6px — daily-hours hero (gold mono) */
/* ── Spacing scale ────────────────────────────────────────────────── */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
/* ── Component washes / overlays / ink (Task 3) ───────────────────── */
--cta-ink: #0A0D10; /* near-black text on a filled blue CTA */
--muted-wash: rgba(90,102,112,.22); /* backlog badge + backlog pill share this */
--locked-wash: rgba(90,102,112,.18); /* locked badge */
--pri-2-wash: rgba(200,148,47,.15); /* priority-2 wash */
--hover-overlay-faint: rgba(255,255,255,.03); /* ghost button hover */
--hover-overlay: rgba(255,255,255,.05); /* menu item hover/focus */
--pill-menu-min-w: 140px; /* status-pill dropdown min width */
/* ── Task-row state tints (Task 4) ────────────────────────────────── */
--row-hover: rgba(255,255,255,.02); /* task-row hover */
--row-done-tint: rgba(255,255,255,.012); /* completed-row faint wash */
--gold-row: rgba(242,181,68,.05); /* running-row tint (live state) */
--gold-row-hover: rgba(242,181,68,.07); /* running-row hover (live state) */
/* The 7-column task-row template — single source so row + header stay aligned.
done | title+meta | status | logged | quick-log | timer | overflow */
--task-grid-cols: 44px minmax(240px,1fr) 148px 108px 176px 108px 38px;
--task-grid-gap: var(--sp-5); /* 24px column gap */
/* ── Radius / elevation ───────────────────────────────────────────── */
--r-xs: 3px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 6px 20px rgba(0,0,0,0.45);
--shadow-lg: 0 12px 36px rgba(0,0,0,0.50);
/* ── Motion ───────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms;
/* ── Select caret SVG (data-URI) ──────────────────────────────────── */
/* CSS custom properties cannot interpolate inside url() data URIs, so the
entire url() string is a token. The fill colour is --muted (#9AA5B1);
if --muted changes, update this token to match. */
--caret-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239AA5B1'/%3E%3C/svg%3E");
}
/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; font-family: inherit; }
a { color: inherit; }
/* ── Base / Typography ───────────────────────────────────────────────── */
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: var(--text-base); /* 17px */
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Focus ring — :focus-visible only, not :focus (mouse users unaffected) */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 3px;
}
/* Page headings */
.page-h1 {
font-family: var(--font-ui);
font-size: var(--text-xl);
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin-bottom: var(--sp-2);
}
.page-sub {
font-size: var(--text-sm);
color: var(--muted);
margin-bottom: var(--sp-5);
}
/* ── Main content container ──────────────────────────────────────────── */
.op-main {
max-width: 1180px;
margin: 0 auto;
padding: var(--sp-6) var(--sp-5);
}
/* ── Utilities ───────────────────────────────────────────────────────── */
/* Red Hat Mono — use for ALL figures / money / time */
.mono { font-family: var(--font-mono); }
/* Tabular figures — apply alongside .mono for aligned columns */
.tnum { font-variant-numeric: tabular-nums; }
/* Visually hidden but accessible to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Empty state — generic opt-in helper (applies anywhere, not per-screen) */
.empty-state {
padding: var(--sp-8) var(--sp-5);
text-align: center;
color: var(--muted);
font-style: italic;
border: 1px dashed var(--border);
border-radius: var(--r-md);
background: var(--surface);
}
/* ── Reduced motion — scale durations down, do not kill animations ───── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.op-timer-pulse { animation-duration: 4s; }
}
/* ══════════════════════════════════════════════════════════════════════════
App Shell — NAV, TIMER STRIP, FOOTER, TOASTS
(Task 2; consumed by base.html; all values via var(--…))
══════════════════════════════════════════════════════════════════════════ */
/* ── NAV ─────────────────────────────────────────────────────────────── */
.op-nav {
display: flex; align-items: center; gap: var(--sp-2);
height: 52px; padding: 0 var(--sp-5);
background: var(--panel); border-bottom: 1px solid var(--border);
position: relative;
}
/* Brand — mono wordmark, NOT gold */
.op-brand {
font-family: var(--font-mono); font-weight: 500;
font-size: calc(13px * var(--type-scale)); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text);
text-decoration: none; margin-right: var(--sp-5); flex-shrink: 0;
}
.op-brand .brand-mono { display: none; } /* "TT" monogram — mobile only */
/* Hamburger — real button, hidden on desktop */
.op-menu-btn {
display: none; order: 3; margin-left: var(--sp-3);
width: 44px; height: 44px; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--border);
border-radius: var(--r-sm); color: var(--text);
font-size: calc(15px * var(--type-scale)); line-height: 1;
}
/* Section links */
.op-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; flex: 1; min-width: 0; }
.op-nav-links a {
display: inline-flex; align-items: center;
font-family: var(--font-ui); font-weight: 400;
font-size: calc(13px * var(--type-scale));
color: var(--muted); text-decoration: none;
padding: 6px 11px; border-radius: var(--r-sm);
position: relative; white-space: nowrap; line-height: 40px;
transition: color 0.15s;
}
.op-nav-links a:hover { color: var(--text); }
.op-nav-links a[aria-current="page"] { color: var(--text); font-weight: 500; }
.op-nav-links a[aria-current="page"]::after {
content: ''; position: absolute; left: 11px; right: 11px; bottom: 0;
height: 2px; background: var(--blue); /* blue underbar — NEVER gold */
}
/* Sign out — matches sibling nav links visually; an action, never aria-current.
Part of the right-aligned account cluster (workspace switcher + Sign out):
the auto left margin pushes it (and the switcher, when present) to the
right edge of the link row, left of Filtered. */
.op-nav-signout { margin: 0 0 0 auto; }
.ws-switcher-li ~ .op-nav-signout { margin-left: 0; }
.op-nav-signout form { margin: 0; }
.op-nav-signout button {
display: inline-flex; align-items: center;
background: none; border: 0; cursor: pointer; font: inherit;
font-family: var(--font-ui); font-weight: 400;
font-size: calc(13px * var(--type-scale));
color: var(--muted); text-decoration: none;
padding: 6px 11px; border-radius: var(--r-sm);
position: relative; white-space: nowrap; line-height: 40px;
transition: color 0.15s;
}
.op-nav-signout button:hover { color: var(--text); }
/* Filtered — pinned right, hairline-separated, out of the link list */
.op-filtered {
margin-left: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-ui); font-size: calc(13px * var(--type-scale));
color: var(--muted); text-decoration: none;
padding: 6px 0 6px var(--sp-4);
border-left: 1px solid var(--border);
transition: color 0.15s;
}
.op-filtered:hover { color: var(--text); }
.op-badge {
display: inline-flex; align-items: center; justify-content: center;
background: var(--red); color: var(--text-inverse);
font-family: var(--font-mono); font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: calc(10px * var(--type-scale));
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 10px; line-height: 1;
}
.op-badge:empty { display: none; } /* hides when count is 0 */
/* ── WORKSPACE SWITCHER — "TaskTracker ⁄ ▾", part of the
right-aligned account cluster. Lives as the second-to-last in
#navsheet, just above Sign out (see base.html): on desktop the auto left
margin pushes the switcher + Sign out together to the right edge of the
link row, left of Filtered; on mobile it becomes the account group at the
bottom of the ☰ sheet (rules below, in the mobile block). Reuses
.pill-wrap/.pill-menu (same JS as status/priority pills). Rendered only
for 2+ memberships — a solo user never sees this. ────── */
.ws-switcher-li { list-style: none; margin-left: auto; }
.ws-switcher__trigger {
display: inline-flex; align-items: center; gap: 5px;
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-ui); font-size: calc(13px * var(--type-scale));
padding: 6px 4px; border-radius: var(--r-sm);
color: var(--muted); transition: color 0.15s;
}
.ws-switcher__trigger:hover,
.ws-switcher__trigger[aria-expanded="true"] { color: var(--text); }
.ws-switcher__sep { color: var(--faint); }
/* Long workspace names ellipsize in the bar rather than wrapping/pushing
Sign out into Filtered; the full name is still available via the
trigger's aria-label and in the dropdown menu. */
.ws-switcher__name {
font-weight: 500;
display: inline-block; max-width: 18ch; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.ws-switcher__label { display: none; } /* mobile-only group label */
.ws-switcher__menu { min-width: 200px; }
.ws-switcher__menu form { margin: 0; }
.ws-switcher__option {
all: unset;
cursor: pointer;
box-sizing: border-box;
display: flex; align-items: center; gap: var(--sp-2);
width: 100%;
font-family: var(--font-ui); font-size: calc(12px * var(--type-scale)); color: inherit;
}
/* Blue-wash active row is specific to the workspace switcher (status/priority
pills mark "active" with a colored dot instead) — scoped under .ws-switcher
so it doesn't affect the shared .pill-menu__item--active elsewhere. */
.ws-switcher .pill-menu__item--active { background: var(--blue-wash); }
.ws-switcher__check { color: var(--blue); }
/* ── RUNNING-TIMER STRIP — gold ONLY when op-timer-strip--running ────── */
.op-timer-strip {
border-bottom: 1px solid var(--border-soft);
padding: 12px var(--sp-5);
display: flex; align-items: center; gap: var(--sp-4);
}
.op-timer-strip--running {
background: var(--gold-strip-bg);
border-bottom-color: var(--gold-strip-border);
}
/* quiet idle label */
.op-timer-idle { font-size: calc(12px * var(--type-scale)); color: var(--muted); }
.op-timer-lead { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.op-timer-pulse {
width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
flex-shrink: 0; box-shadow: 0 0 0 0 rgba(242,181,68,.5);
animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
0%,100% { box-shadow: 0 0 0 0 var(--gold-glow); }
50% { box-shadow: 0 0 0 6px var(--gold-glow-0); }
}
.op-timer-meta { min-width: 0; }
.op-timer-label {
font-family: var(--font-mono); font-size: calc(10px * var(--type-scale));
letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.op-timer-task {
display: block; max-width: 100%;
font-size: calc(13px * var(--type-scale)); font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.op-timer-right { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.op-timer-elapsed {
font-family: var(--font-mono); font-weight: 500;
font-size: calc(24px * var(--type-scale)); color: var(--gold);
letter-spacing: 0.06em; font-variant-numeric: tabular-nums; line-height: 1;
}
.btn-stop {
background: transparent; border: 1px solid var(--red); color: var(--red);
font-family: var(--font-mono); font-size: calc(12px * var(--type-scale));
letter-spacing: 0.06em; padding: 0 16px; border-radius: var(--r-md);
height: 40px; flex-shrink: 0; transition: background 0.12s;
}
.btn-stop:hover { background: var(--red-wash); }
/* ── FOOTER — quiet instance-identity line (end-of-scroll, not sticky) ── */
.op-footer {
flex-shrink: 0;
margin-top: var(--sp-7);
border-top: 1px solid var(--border-soft);
background: var(--bg);
min-height: 32px;
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-2) var(--sp-5);
}
.foot-identity { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--type-scale)); color: var(--muted); white-space: nowrap; }
.foot-identity .wordmark { font-family: var(--font-ui); }
.foot-identity .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.foot-identity .sep { color: var(--faint); } /* decorative only */
.foot-env {
margin-left: auto; flex-shrink: 0;
font-family: var(--font-mono); font-size: calc(11px * var(--type-scale));
letter-spacing: 0.06em; color: var(--muted);
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 2px 9px; background: transparent; /* quiet outline chip, no fill */
}
/* ── op-main: fills remaining vertical space in the flex column ─────── */
.op-main { flex: 1 0 auto; width: 100%; }
/* ── TOASTS — bottom-right stack, slide in from right ───────────────── */
.toast-region {
/* bottom offset clears the ~48px footer so toasts never sit over it on short
pages (the footer is in normal flow, not fixed). */
position: fixed; bottom: var(--sp-8); right: var(--sp-5);
z-index: 900;
display: flex; flex-direction: column; gap: var(--sp-2);
max-width: 360px; width: calc(100vw - 2 * var(--sp-5));
pointer-events: none;
}
.toast {
pointer-events: auto;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-md);
font-size: var(--text-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-md);
animation: toast-in var(--dur-base) var(--ease-out) both;
}
@keyframes toast-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.toast--success { background: var(--green-wash); border-color: var(--green); color: var(--green); }
.toast--error { background: var(--red-wash); border-color: var(--red); color: var(--red); }
.toast--info { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }
/* ── NAV COLLAPSE (≤920px) ───────────────────────────────────────────────
Wider than the rest of the mobile layout: the desktop bar (brand + links
+ the right-aligned account cluster + Filtered) needs ~910px minimum to
fit without wrapping/overlapping once the workspace switcher is present
(brand ~176 + links ~408 + switcher ~156 + Sign out ~77 + Filtered ~93),
so the ☰ sheet has to kick in earlier than the rest of the mobile rules
(timer strip, filter bar, etc.), which stay at their own breakpoints. */
@media (max-width: 920px) {
.op-brand { margin-right: 0; }
.op-brand .brand-full { display: none; }
.op-brand .brand-mono { display: inline; } /* "TT" monogram */
.op-menu-btn { display: inline-flex; }
.op-filtered { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
/* Section links become a slide-down sheet; hidden keeps them out of tab order */
.op-nav-links {
order: 4; position: absolute; top: 52px; left: 0; right: 0; z-index: 40;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--panel); border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lg);
}
.op-nav-links[hidden] { display: none; }
.op-nav-links a {
line-height: 1.3; min-height: 44px; padding: 0 var(--sp-5);
border-radius: 0; font-size: calc(14px * var(--type-scale));
border-bottom: 1px solid var(--border-soft);
display: flex; align-items: center;
}
.op-nav-links a[aria-current="page"] {
background: var(--blue-wash);
box-shadow: inset 3px 0 0 var(--blue); /* inset blue bar instead of underline */
}
.op-nav-links a[aria-current="page"]::after { display: none; }
.op-nav-signout button {
width: 100%; text-align: left;
line-height: 1.3; min-height: 44px; padding: 0 var(--sp-5);
border-radius: 0; font-size: calc(14px * var(--type-scale));
border-bottom: 1px solid var(--border-soft);
display: flex; align-items: center;
}
/* Account cluster on mobile: DOM order (switcher, then Sign out) is the
visual order here, so the desktop auto-margins that push the cluster
right would shrink/right-shift these rows in the stacked sheet — reset
them. */
.ws-switcher-li, .op-nav-signout { margin-left: 0; }
/* Workspace switcher — the account group at the BOTTOM of the sheet,
just above Sign out: the dropdown pill becomes an always-expanded flat
list (no need to click; the sheet itself already required opening the
☰ button). Selector is `.pill-wrap.ws-switcher`, not bare `.ws-switcher`,
for the same load-bearing-specificity reason as the .ws-switcher__menu
rules below: the base `.pill-wrap { display: inline-block; ... }`
(~line 685) sits later in this file, so at equal specificity it would
win and shrink-wrap the group instead of letting it span the sheet. */
.pill-wrap.ws-switcher {
display: block; padding: var(--sp-2) 0 var(--sp-3);
border-bottom: 1px solid var(--border-soft);
}
.ws-switcher__trigger { display: none; }
.ws-switcher__label {
display: block; padding: 0 var(--sp-5) var(--sp-2);
font-size: 0.82em; color: var(--muted);
}
/* Descendant-selector prefix (.ws-switcher ...) is load-bearing, not
stylistic: the base .pill-menu / .pill-menu[hidden] rules sit later in
this file (~line 730), and media queries add no specificity of their
own, so a bare .ws-switcher__menu here would lose to the later base
rule at equal specificity. The extra class bumps specificity to win
regardless of source order. */
.ws-switcher .ws-switcher__menu {
position: static; border: 0; box-shadow: none; background: transparent;
padding: 0; min-width: 0;
}
.ws-switcher .ws-switcher__menu[hidden] { display: block; } /* always visible on mobile */
.ws-switcher .pill-menu__item { border-radius: 0; min-height: 44px; padding: 0 var(--sp-5); }
}
/* ── MOBILE (≤760px) ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
/* Timer strip stacks vertically on mobile */
.op-timer-strip { flex-direction: column; align-items: stretch; gap: 12px; }
.op-timer-lead { width: 100%; }
.op-timer-right { width: 100%; justify-content: space-between; }
}
/* ── NARROW (≤380px) ─────────────────────────────────────────────────── */
@media (max-width: 380px) {
.foot-identity .schema { display: none; } /* drop schema hash first if tight */
}
/* ══════════════════════════════════════════════════════════════════════════
COMPONENTS — buttons / badges / status pill / confirm-inline
(Task 3; all values via var(--…))
══════════════════════════════════════════════════════════════════════════ */
/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Base .btn — shared geometry; variant modifiers override color/border. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-ui);
font-size: calc(13px * var(--type-scale));
font-weight: 500;
padding: 9px 18px;
min-height: 40px;
border-radius: var(--r-sm);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: opacity var(--dur-fast), background var(--dur-fast),
color var(--dur-fast), border-color var(--dur-fast),
transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Primary — blue fill, dark ink (--cta-ink equiv = near-black on blue) */
.btn--primary {
background: var(--blue);
color: var(--cta-ink);
border-color: transparent;
}
.btn--primary:hover { opacity: 0.9; }
.btn--primary:active { transform: translateY(1px); }
/* Ghost — transparent outline */
.btn--ghost {
background: transparent;
color: var(--muted);
border-color: var(--border-hi);
}
.btn--ghost:hover {
color: var(--text);
border-color: var(--muted);
background: var(--hover-overlay-faint);
}
/* Danger — red outline; red-wash fill on hover */
.btn--danger {
background: transparent;
color: var(--red);
border-color: var(--red);
}
.btn--danger:hover { background: var(--red-wash); }
/* ── Badges ──────────────────────────────────────────────────────────── */
/* Single badge family — replaces legacy competing badge systems. */
.badge {
font-family: var(--font-mono);
font-size: calc(10px * var(--type-scale));
font-weight: 500;
letter-spacing: 0.05em;
padding: 3px 8px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
/* Only apply caps where genuinely needed — do NOT use on source/status/priority/reason badges */
.badge--caps { text-transform: uppercase; }
/* Neutral (default) */
.badge--neutral {
color: var(--muted);
background: var(--panel);
border: 1px solid var(--border-hi);
}
/* Status family */
.badge--status-backlog {
background: var(--muted-wash);
color: var(--muted);
}
.badge--status-inprogress {
background: var(--blue-wash);
color: var(--blue);
}
.badge--status-waiting {
background: var(--ochre-wash);
color: var(--ochre);
}
.badge--status-done {
background: var(--green-wash);
color: var(--green);
}
/* Priority family */
.badge--priority-1 {
background: var(--red-wash);
color: var(--red);
}
.badge--priority-2 {
background: var(--pri-2-wash);
color: var(--pri-2);
}
.badge--priority-3 {
background: transparent;
color: var(--faint);
border: 1px solid var(--border);
}
/* Source / provenance */
.badge--source {
color: var(--muted);
background: var(--panel);
border: 1px solid var(--border-hi);
}
/* Reason family (suppression / audit queue) — classification tints, distinct
from the CTA-blue / success-green / waiting-ochre semantic lanes. */
.badge--reason-you {
background: var(--teal-wash);
color: var(--teal);
border: 1px solid var(--teal-bd);
}
.badge--reason-automated {
background: var(--violet-wash);
color: var(--violet);
border: 1px solid var(--violet-bd);
}
.badge--reason-rule {
background: var(--grey-wash);
color: var(--grey);
border: 1px solid var(--grey-bd);
}
/* Locked indicator */
.badge--locked {
background: var(--locked-wash);
color: var(--muted);
border: 1px solid var(--border);
}
/* ── Status Pill ─────────────────────────────────────────────────────── */
/* Wrapper keeps dropdown in flow */
.pill-wrap { position: relative; display: inline-block; }
/* Base pill button — mono, small, rounded chip */
.pill {
font-family: var(--font-mono);
font-size: calc(10px * var(--type-scale));
font-weight: 500;
letter-spacing: 0.06em;
padding: 4px 8px 4px 7px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
gap: 4px;
border: none;
background: transparent;
cursor: pointer;
white-space: nowrap;
transition: opacity var(--dur-fast);
}
.pill:hover { opacity: 0.8; }
.pill-caret { font-size: calc(8px * var(--type-scale)); opacity: 0.65; }
/* Pill color modifiers (BEM double-dash) */
.pill--backlog {
background: var(--muted-wash);
color: var(--muted);
}
.pill--inprogress {
background: var(--blue-wash);
color: var(--blue);
}
.pill--waiting {
background: var(--ochre-wash);
color: var(--ochre);
}
.pill--done {
background: var(--green-wash);
color: var(--green);
}
/* Priority pill modifiers — mirror the badge priority family (colors.md) */
.pill--p1 { background: var(--red-wash); color: var(--red); }
.pill--p2 { background: var(--pri-2-wash); color: var(--pri-2); }
.pill--p3 { background: transparent; color: var(--faint); border: 1px solid var(--border); }
/* Status menu dropdown */
.pill-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
background: var(--surface);
border: 1px solid var(--border-hi);
border-radius: var(--r-sm);
padding: var(--sp-1);
box-shadow: var(--shadow-md);
z-index: 200;
min-width: var(--pill-menu-min-w);
list-style: none;
}
.pill-menu[hidden] { display: none; }
.pill-menu__item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 7px 10px;
border-radius: var(--r-xs);
cursor: pointer;
font-family: var(--font-ui);
font-size: calc(12px * var(--type-scale));
color: var(--muted);
transition: background var(--dur-fast), color var(--dur-fast);
white-space: nowrap;
}
.pill-menu__item:hover,
.pill-menu__item:focus-visible {
background: var(--hover-overlay);
color: var(--text);
}
.pill-menu__item--active { color: var(--text); }
/* Status dot inside menu items */
.pill-menu__dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.pill-menu__dot--backlog { background: var(--muted); }
.pill-menu__dot--inprogress { background: var(--blue); }
.pill-menu__dot--waiting { background: var(--ochre); }
.pill-menu__dot--done { background: var(--green); }
.pill-menu__dot--p1 { background: var(--pri-1); }
.pill-menu__dot--p2 { background: var(--pri-2); }
.pill-menu__dot--p3 { background: var(--pri-3); }
/* ── Confirm-inline ──────────────────────────────────────────────────── */
/* Two-step inline delete affordance. JS toggles hidden on the prompt. */
.confirm-inline {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
}
.confirm-inline__prompt {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
}
.confirm-inline__prompt[hidden] { display: none; }
.confirm-inline__question {
font-size: var(--text-sm);
color: var(--muted);
white-space: nowrap;
}
.confirm-inline__yes,
.confirm-inline__no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--r-sm);
font-size: var(--text-sm);
border: 1px solid var(--border);
background: transparent;
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast),
border-color var(--dur-fast);
}
.confirm-inline__yes {
color: var(--green);
border-color: var(--green);
}
.confirm-inline__yes:hover { background: var(--green-wash); }
.confirm-inline__no {
color: var(--muted);
border-color: var(--border);
}
.confirm-inline__no:hover {
color: var(--text);
border-color: var(--muted);
}
/* ══════════════════════════════════════════════════════════════════════════
TASK ROW — the signature component (Task 4)
Full-width 7-column grid on desktop; reflows to a collapsed expandable row +
drawer below ~1000px CONTAINER width (not viewport) so it also collapses in
the narrow detail-page main column. All values via var(--…).
══════════════════════════════════════════════════════════════════════════ */
/* ── Column header — same grid; its own query container so it hides when the
list is narrow. Task 6 renders:
─────────────────────────────────────────────────────────────────────────── */
.task-row-head { container-type: inline-size; padding: 0 0 var(--sp-2); }
.task-row-head__grid {
display: grid;
grid-template-columns: var(--task-grid-cols);
column-gap: var(--task-grid-gap);
align-items: center;
}
.task-row-head__grid .ch {
font-family: var(--font-mono);
font-size: calc(9px * var(--type-scale));
font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); white-space: nowrap;
}
.task-row-head__grid .ch-logged { text-align: right; }
.task-row-head__grid .ch-stepper { text-align: center; }
/* ── Row container — establishes the inline-size query container ──────────── */
.task-row {
container-type: inline-size;
border-bottom: 1px solid var(--border);
border-radius: var(--r-sm);
transition: background var(--dur-base);
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--row-hover); }
.task-row.running { background: var(--gold-row); }
.task-row.running:hover { background: var(--gold-row-hover); }
.task-row.done { background: var(--row-done-tint); }
/* ── Main row — desktop grid; collapses below the container breakpoint ────── */
.task-row-main {
display: grid;
grid-template-columns: var(--task-grid-cols);
column-gap: var(--task-grid-gap);
align-items: center;
padding: var(--sp-2) 0;
min-height: 50px;
}
/* ── Col 1 — done circle (44px tap target) + priority tick ───────────────── */
.cell-done { display: flex; align-items: center; gap: var(--sp-1); }
.done-tap {
width: 44px; height: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
margin: -10px 0; /* keep the 44px hit area without inflating row height */
}
.done-circle {
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--border-hi); background: transparent;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
padding: 0; color: var(--text-inverse);
transition: border-color var(--dur-base), background var(--dur-base);
}
.done-circle:hover { border-color: var(--green); }
.done-circle svg { display: none; width: 12px; height: 10px; }
.done-circle.done { background: var(--green); border-color: var(--green); }
.done-circle.done svg { display: block; }
.priority-bar { width: 3px; height: 32px; border-radius: 2px; flex-shrink: 0; }
.pbar-p1 { background: var(--pri-1); }
.pbar-p2 { background: var(--pri-2); } /* P2 tick IS rendered (the audit bug) */
.pbar-p3 { background: var(--pri-3); }
/* ── Col 2 — title + meta ────────────────────────────────────────────────── */
.cell-title { min-width: 0; }
/* Priority pill sits inline before the title; title still clamps to 2 lines.
Pill + title are vertically centered to each other on the title line. */
.title-line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.title-line .task-name { flex: 1 1 auto; min-width: 0; }
.title-line .pill-wrap { flex: 0 0 auto; }
.task-name {
font-size: var(--text-sm); font-weight: 400; color: var(--text);
line-height: 1.35; text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
a.task-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.task-row.running .task-name { color: var(--gold); }
.task-row.done .task-name {
color: var(--muted); /* de-emphasised but AA-pass — a done title is still functional text */
text-decoration: line-through; text-decoration-color: var(--border-hi);
}
.task-meta {
font-family: var(--font-ui);
font-size: calc(11px * var(--type-scale));
color: var(--muted); margin-top: 2px; letter-spacing: 0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-meta .mono { color: var(--muted); }
/* ── Col 4 — logged hours + meter ────────────────────────────────────────── */
.cell-logged { text-align: right; }
.hours-val {
font-size: calc(12px * var(--type-scale)); color: var(--muted);
display: block; letter-spacing: 0.03em;
}
.task-row.running .hours-val { color: var(--gold); }
.hours-meter {
height: 3px; background: var(--border); border-radius: 2px;
margin-top: 5px; overflow: hidden;
}
.hours-meter-fill { height: 100%; background: var(--blue); border-radius: 2px; }
/* ── Col 5 — quick-log stepper ───────────────────────────────────────────── */
.cell-stepper { display: flex; align-items: center; justify-content: center; }
.quick-log { display: flex; align-items: center; gap: var(--sp-1); }
.ql-btn {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--r-sm);
border: 1px solid var(--border-hi); background: transparent; color: var(--muted);
font-size: calc(16px * var(--type-scale)); line-height: 1;
user-select: none; touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.ql-btn:hover { border-color: var(--blue); color: var(--blue); }
.ql-btn:active { background: var(--blue-wash); }
.ql-commit { font-size: calc(13px * var(--type-scale)); opacity: 0.28; }
.ql-commit:disabled { cursor: not-allowed; }
.ql-commit[data-touched="true"]:not(:disabled) {
opacity: 1; border-color: var(--blue); color: var(--blue);
}
.ql-display {
font-family: var(--font-mono);
font-size: calc(11px * var(--type-scale)); font-weight: 500;
color: var(--muted); font-variant-numeric: tabular-nums;
min-width: 40px; text-align: center; letter-spacing: 0.04em;
border-radius: var(--r-xs); padding: 2px 3px; cursor: text;
transition: color var(--dur-fast), background var(--dur-fast);
}
.ql-display:hover { background: var(--blue-wash); color: var(--text); }
.ql-display.touched { color: var(--text); }
/* ── Col 6 — timer Start / Stop ──────────────────────────────────────────── */
.cell-timer { display: flex; align-items: center; gap: var(--sp-2); }
.row-run-dot {
display: none; width: 6px; height: 6px; border-radius: 50%;
background: var(--gold); flex-shrink: 0;
animation: glow-pulse 2s ease-in-out infinite;
}
.task-row.running .row-run-dot { display: inline-block; }
.btn-timer-start, .btn-timer-stop {
background: transparent;
font-family: var(--font-mono);
font-size: calc(11px * var(--type-scale)); letter-spacing: 0.06em;
padding: 0 12px; border-radius: var(--r-sm);
height: 34px; min-width: 76px; white-space: nowrap; flex-shrink: 0;
transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.btn-timer-start { border: 1px solid var(--border-hi); color: var(--muted); }
.btn-timer-start:hover { border-color: var(--blue); color: var(--blue); }
.btn-timer-stop { border: 1px solid var(--red); color: var(--red); }
.btn-timer-stop:hover { background: var(--red-wash); }
/* ── Col 7 — overflow ────────────────────────────────────────────────────── */
.cell-overflow { position: relative; display: flex; align-items: center; justify-content: center; }
.btn-overflow {
width: 30px; height: 34px; border-radius: var(--r-sm);
border: 1px solid transparent; background: transparent; color: var(--muted);
font-size: calc(14px * var(--type-scale)); letter-spacing: 0.06em;
display: flex; align-items: center; justify-content: center;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-overflow:hover { border-color: var(--border-hi); color: var(--muted); }
/* ── Chevron + drawer — desktop: hidden (grid shows everything inline) ────── */
.row-chevron {
display: none; /* shown only in the collapsed form */
width: 44px; height: 44px; flex-shrink: 0;
align-items: center; justify-content: center;
background: transparent; border: none; color: var(--faint);
font-size: calc(13px * var(--type-scale));
transition: transform var(--dur-base), color var(--dur-fast);
}
.task-row[data-open="true"] .row-chevron { transform: rotate(180deg); color: var(--muted); }
/* Drawer never shows on desktop (controls are inline in the grid). It is
revealed only in the collapsed form, gated by the container query below.
`hidden` is the authoritative open/closed toggle (JS removes it to open). */
.task-row-drawer {
display: none;
flex-direction: column; gap: var(--sp-3);
padding: var(--sp-1) var(--sp-3) var(--sp-4) var(--sp-4);
}
.row-drawer-controls {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.row-drawer-controls .quick-log { margin-right: auto; }
/* Drawer controls are touch targets — bump to 44px in the drawer */
.row-drawer-controls .ql-btn,
.row-drawer-controls .btn-timer-start,
.row-drawer-controls .btn-timer-stop,
.row-drawer-controls .btn-overflow { width: auto; min-width: 44px; height: 44px; }
.row-drawer-controls .btn-overflow { width: 44px; }
/* ══════════════════════════════════════════════════════════════════════════
CONTAINER REFLOW — below ~1000px AVAILABLE WIDTH, the grid collapses to the
expandable row: [44px Done][title clamp-2][pill][logged][chevron]; the
quick-log / timer / ⋯ / inline-meta hide and live in the drawer instead.
(A ResizeObserver width-class fallback for non-container-query engines is
the behaviors-plan's job — this @container covers all evergreen browsers.)
══════════════════════════════════════════════════════════════════════════ */
@container (max-width: 1000px) {
.task-row-main {
grid-template-columns: 44px minmax(0, 1fr) auto auto 44px;
column-gap: var(--sp-3);
align-items: center;
}
/* Collapsed essentials only — hide the column controls + inline meta */
.task-row-main .cell-stepper,
.task-row-main .cell-timer,
.task-row-main .cell-overflow,
.task-row-main .task-meta--inline { display: none; }
/* The chevron joins the collapsed header */
.row-chevron { display: flex; }
/* Logged hours sit tight against the pill, not far-right */
.cell-logged { text-align: left; }
/* Drawer is revealed when opened (hidden removed by the behaviors-plan JS) */
.task-row-drawer:not([hidden]) { display: flex; }
/* The header column row hides entirely once the list is in the collapsed form */
.task-row-head__grid { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
SHARED INCLUDES — Task 5
Data table · Activity thread · Stats pane · Filter/sort bar · Entity form
══════════════════════════════════════════════════════════════════════════ */
/* ── DATA TABLE (_data_table.html) ──────────────────────────────────────── */
.dt-wrap { width: 100%; }
.dt-table {
width: 100%;
border-collapse: collapse;
}
.dt-th {
font-family: var(--font-mono);
font-size: calc(9px * var(--type-scale));
font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); text-align: left;
padding: 0 12px var(--sp-2) 0;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.dt-th--num { text-align: right; }
.dt-th--act { text-align: right; width: 1%; white-space: nowrap; }
.dt-td {
padding: var(--sp-3) 12px var(--sp-3) 0;
border-bottom: 1px solid var(--border);
font-size: calc(13px * var(--type-scale));
vertical-align: middle;
color: var(--text);
}
.dt-table .dt-row:last-child .dt-td { border-bottom: none; }
.dt-td--num { text-align: right; }
.dt-td--mono {
font-family: var(--font-mono);
font-size: calc(12px * var(--type-scale));
color: var(--muted); font-variant-numeric: tabular-nums;
letter-spacing: 0.02em; white-space: nowrap;
}
.dt-td--act { text-align: right; width: 1%; white-space: nowrap; }
/* Locked row — faint tint */
.dt-row--locked .dt-td { opacity: 0.82; }
/* Lock chip in actions cell */
.dt-lock-chip {
font-family: var(--font-mono);
font-size: calc(10px * var(--type-scale));
color: var(--muted); display: inline-flex; align-items: center; gap: 4px;
}
.dt-lock-ico { width: 11px; height: 11px; flex-shrink: 0; }
/* Row action buttons */
.dt-row-acts { display: inline-flex; gap: 6px; align-items: center; }
.dt-act-btn {
font-family: var(--font-mono);
font-size: calc(11px * var(--type-scale));
background: transparent; border: 1px solid var(--border-hi);
color: var(--muted); border-radius: var(--r-sm); padding: 5px 10px;
display: inline-block; text-decoration: none;
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.dt-act-btn:hover { color: var(--text); border-color: var(--muted); }
.dt-act-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Empty state */
.dt-empty {
padding: var(--sp-5) var(--sp-3);
color: var(--muted); font-size: calc(13px * var(--type-scale));
font-style: italic;
}
/* Inline-edit row form (admin Workspaces pane rename) — the field IS the
display; Save is dirty-gated via the shared data-dirty-gate machinery. */
.ws-rename-form { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.ws-rename-input { flex: 1 1 auto; min-width: 140px; max-width: 280px; }
/* ── Mobile: stacked-card reflow at ≤560px ──────────────────────────────
Prevents page-level horizontal scroll at 390px by rendering each row
as a compact stacked card. data-label attrs set the pseudo-element text. */
@media (max-width: 560px) {
.dt-table,
.dt-table tbody,
.dt-table tr,
.dt-table td { display: block; width: 100%; }
.dt-table thead { display: none; } /* headers hidden; shown via ::before */
.dt-table tr {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
}
.dt-table .dt-row:last-child .dt-td { border-bottom: 1px solid var(--border); } /* normalize */
/* scope to .dt-table so this flex wins over `.dt-table td {display:block}` above
([0,2,0] > [0,1,1]) — otherwise the stacked cell label+value crowd together */
.dt-table .dt-td {
border-bottom: none !important;
padding: 3px 0;
display: flex; align-items: baseline;
justify-content: space-between; gap: var(--sp-3);
}
.dt-td::before {
content: attr(data-label);
font-family: var(--font-mono);
font-size: calc(9px * var(--type-scale));
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); flex-shrink: 0;
}
.dt-td--num,
.dt-td--act { text-align: left; width: 100%; }
.dt-td--act { padding-top: var(--sp-2); margin-top: var(--sp-2);
border-top: 1px solid var(--border) !important; }
.dt-td--act::before { align-self: center; }
.dt-row-acts { justify-content: flex-end; }
}
/* ── ACTIVITY THREAD (_activity_thread.html) ────────────────────────────── */
.activity-thread { /* no decoration needed; items handle their own borders */ }
.activity-item {
border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
/* ── Email item — collapsible ───────────────────────────────────────────── */
.activity-item--email .activity-head {
width: 100%;
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) 4px;
background: transparent; border: none; color: inherit; text-align: left;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: background var(--dur-fast);
}
.activity-item--email .activity-head:hover { background: var(--hover-overlay-faint); }
.activity-item--email .activity-head:focus-visible {
outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm);
}
.activity-ico {
width: 28px; height: 28px; border-radius: var(--r-md); flex-shrink: 0;
background: var(--panel); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.activity-ico svg { width: 14px; height: 14px; }
.activity-summary { flex: 1; min-width: 0; }
.activity-author {
font-size: calc(11px * var(--type-scale));
color: var(--text); letter-spacing: 0.02em;
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-date { color: var(--muted); }
.activity-preview {
font-size: calc(13px * var(--type-scale));
color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block;
}
/* When open, preview wraps rather than ellipsis */
.activity-item--open .activity-preview {
white-space: normal; overflow: visible;
}
.activity-chevron {
flex-shrink: 0; color: var(--faint);
font-size: calc(12px * var(--type-scale));
transition: transform var(--dur-base) var(--ease-out);
}
.activity-item--open .activity-chevron { transform: rotate(180deg); }
/* Body — collapsed uses `hidden` (tab-order safe), not max-height animation */
.activity-body {
padding: 2px 4px var(--sp-4) 44px; /* left-indent aligns with summary text */
font-size: calc(14px * var(--type-scale));
color: var(--text); line-height: 1.6;
}
.activity-body-pad { white-space: pre-wrap; }
/* Quoted-history / forwarded-digest disclosure (email_body.CleanedBody.quoted) */
.mail-quoted {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--border);
color: var(--muted);
font-size: calc(13px * var(--type-scale));
}
.mail-quoted summary {
cursor: pointer;
color: var(--muted);
min-height: 44px;
display: flex; align-items: center;
}
.mail-quoted summary:focus-visible {
outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm);
}
.mail-quoted-body {
white-space: pre-wrap;
padding: var(--sp-2) 4px var(--sp-2) 0;
}
/* Inline placeholder chip for stripped [image: …] attachment markers */
.mail-img-chip {
display: inline-block;
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
color: var(--muted);
font-family: var(--font-mono);
font-size: calc(12px * var(--type-scale));
padding: 1px 6px;
}
/* ── System / event item — flat ─────────────────────────────────────────── */
.activity-item--system {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) 4px;
}
.activity-sys-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--faint); flex-shrink: 0; margin-left: 10px;
}
.activity-sys-text {
flex: 1; min-width: 0;
font-size: calc(13px * var(--type-scale)); color: var(--muted);
}
.activity-sys-date {
font-size: calc(11px * var(--type-scale));
color: var(--faint); white-space: nowrap;
}
/* Empty state */
.activity-empty {
padding: var(--sp-5) 4px;
color: var(--muted); font-size: calc(13px * var(--type-scale));
}
/* ── STATS PANE (_stats_pane.html) ──────────────────────────────────────── */
.stats-pane { /* no outer decoration; host card provides it */ }
.stat-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
}
.stat-row--last { border-bottom: none; }
/* Pill rows (status / priority) use center vertical alignment */
.stat-row--pill { align-items: center; }
.stat-name {
font-size: calc(12px * var(--type-scale)); color: var(--muted);
}
/* Figure values — mono + tabular + right-aligned */
.stat-figure { display: flex; flex-direction: column; align-items: flex-end; }
.stat-val {
font-size: calc(15px * var(--type-scale));
color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.stat-val-sub {
font-size: calc(11px * var(--type-scale));
color: var(--muted); margin-top: 2px; text-align: right;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
/* Priority tick + label */
.stat-pri {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono);
font-size: calc(11px * var(--type-scale));
color: var(--text); letter-spacing: 0.03em;
}
.stat-pri-chip {
width: 4px; height: 14px; border-radius: 2px; display: inline-block; flex-shrink: 0;
}
.stat-pri-chip--p1 { background: var(--pri-1); }
.stat-pri-chip--p2 { background: var(--pri-2); }
.stat-pri-chip--p3 { background: var(--pri-3); }
/* Empty state */
.stat-empty {
padding: var(--sp-3) 0;
color: var(--muted); font-size: calc(13px * var(--type-scale));
}
/* ── FILTER / SORT BAR (_filter_sort_bar.html) ──────────────────────────── */
.filter-bar {
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--sp-5);
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fb-group {
display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
}
/* Segment group wraps so the status control never causes horizontal scroll */
.fb-group--segments { flex-wrap: wrap; }
.fb-label {
font-family: var(--font-mono); font-size: calc(9px * var(--type-scale));
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); flex-shrink: 0;
}
/* Segmented status control — wraps on narrow screens (never h-scrolls) */
.segmented {
display: inline-flex; align-items: center;
background: var(--bg); border: 1px solid var(--border-hi);
border-radius: var(--r-md); padding: 2px; gap: 2px;
flex-wrap: wrap; max-width: 100%;
}
.seg-btn {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: transparent; border: none; border-radius: var(--r-sm);
color: var(--muted); font-family: var(--font-ui);
font-size: calc(12px * var(--type-scale)); font-weight: 500;
padding: 6px 11px; min-height: 32px;
transition: background var(--dur-fast), color var(--dur-fast);
}
.seg-btn:hover { color: var(--text); }
.seg-btn--active,
.seg-btn.active { background: var(--surface); color: var(--text); }
.seg-btn:focus-visible {
outline: 2px solid var(--blue); outline-offset: -2px;
}
.seg-count {
font-family: var(--font-mono); font-size: calc(10px * var(--type-scale));
font-variant-numeric: tabular-nums; color: var(--muted);
}
.seg-btn--active .seg-count,
.seg-btn.active .seg-count { color: var(--muted); }
/* Entity select + sort select — shared style */
.fb-select {
background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--r-md);
color: var(--text); font-family: var(--font-ui);
font-size: calc(12px * var(--type-scale));
padding: 8px 28px 8px 10px; min-height: 38px; outline: none;
appearance: none;
background-image: var(--caret-svg);
background-repeat: no-repeat; background-position: right 10px center;
}
.fb-select:focus { border-color: var(--blue); outline: 2px solid var(--blue-wash); }
.fb-select option[disabled] { color: var(--faint); }
/* Search input */
.fb-search {
position: relative; display: flex; align-items: center;
flex: 1; min-width: 150px;
}
.fb-search svg {
position: absolute; left: 10px; width: 14px; height: 14px;
color: var(--faint); pointer-events: none; flex-shrink: 0;
}
.fb-search input {
width: 100%; background: var(--bg); border: 1px solid var(--border-hi);
border-radius: var(--r-md); color: var(--text); font-family: var(--font-ui);
font-size: calc(12px * var(--type-scale)); padding: 8px 12px 8px 32px;
min-height: 38px; outline: none;
/* Remove native "clear" control — the behaviors plan provides its own clear */
-webkit-appearance: none; appearance: none;
}
.fb-search input::placeholder { color: var(--faint); }
.fb-search input:focus { border-color: var(--blue); outline: 2px solid var(--blue-wash); }
/* Remove browser-native search decorations */
.fb-search input[type="search"]::-webkit-search-cancel-button,
.fb-search input[type="search"]::-webkit-search-decoration { display: none; }
/* Clear button — shown only when a filter/sort is non-default (JS toggles hidden) */
.fb-clear {
background: transparent; border: none; color: var(--muted);
font-family: var(--font-mono); font-size: calc(11px * var(--type-scale));
letter-spacing: 0.04em; padding: 6px var(--sp-2); border-radius: var(--r-sm);
display: inline-flex; align-items: center; gap: 5px;
transition: color var(--dur-fast);
}
.fb-clear:hover { color: var(--text); }
.fb-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Spacer — collapses on mobile (hidden via display:none in media query) */
.fb-spacer { flex: 1; }
/* Filtered-empty state — hidden until behaviors plan shows it */
.filter-empty {
padding: var(--sp-7) var(--sp-5); text-align: center;
border: 1px dashed var(--border); border-radius: var(--r-md);
background: var(--surface); margin-bottom: var(--sp-5);
}
.filter-empty-msg {
font-size: calc(15px * var(--type-scale)); font-weight: 600;
color: var(--text); margin-bottom: var(--sp-3);
}
.filter-empty-clear {
/* inherits from .btn--ghost */
}
/* Mobile — filter bar adapts at narrow widths */
@media (max-width: 760px) {
.filter-bar { gap: 10px; }
.fb-group, .fb-search { flex-basis: 100%; }
.fb-spacer { display: none; }
}
/* At 390px: segmented control wraps (already uses flex-wrap) — no h-scroll */
@media (max-width: 480px) {
.filter-bar { padding: 10px; }
.seg-btn { padding: 5px 9px; min-height: 36px; font-size: calc(11px * var(--type-scale)); }
.fb-search input { min-height: 44px; }
.fb-select { min-height: 44px; }
}
/* ── ENTITY FORM (_entity_form.html) ─────────────────────────────────────── */
.entity-form-panel {
background: var(--surface); border: 1px solid var(--border-hi);
border-radius: var(--r-md); padding: 22px 24px; margin-bottom: var(--sp-5);
box-shadow: var(--shadow-md);
animation: panel-in var(--dur-base) var(--ease-out) both;
}
@keyframes panel-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .entity-form-panel { animation: none; } }
.entity-form-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-5);
}
.entity-form-title {
font-size: calc(15px * var(--type-scale)); font-weight: 600; color: var(--text);
}
.entity-form-close {
width: 32px; height: 32px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: calc(15px * var(--type-scale)); line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.entity-form-close:hover { color: var(--text); border-color: var(--muted); }
.entity-form-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Form fields */
.form-fields { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label {
font-size: calc(12px * var(--type-scale)); color: var(--muted); font-weight: 500;
}
.form-req { color: var(--red); margin-left: 2px; }
.form-input,
.form-select {
background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--r-sm);
color: var(--text); font-family: var(--font-ui);
font-size: calc(13px * var(--type-scale));
padding: 9px 12px; min-height: 40px; width: 100%;
outline: none; appearance: none;
transition: border-color var(--dur-fast);
}
.form-input:focus,
.form-select:focus { border-color: var(--blue); outline: 2px solid var(--blue-wash); outline-offset: 0; }
.form-input::placeholder { color: var(--faint); }
.form-input--mono {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
}
/*