/* ══════════════════════════════════════ Cal — styles.css Read-first, sectioned app. On the per-app icon-colour design model (see DESIGN.md / DESIGN-ROLLOUT.md). Shell tokens (surfaces, text, steel, status, type scale, fonts, spacing, radius) come from /shared/porter-tokens.css, linked in before this file. Cal keeps only its signature accent block + documented divergences below — see apps/cal/CLAUDE.md "Divergences". ══════════════════════════════════════ */ :root { /* ── Signature palette ────────────────────────────────────────────────── Cal = MAPLE-RED, carried by the recoloured icon + in-content key accents (hero deadline, section labels, active tab, primary button, links). The icon's maple leaf is the literal Canada cue; red carries it into the app. Chrome (back-link hover, dividers, inactive states, wordmark dot adopts the hue per the header standard) is otherwise neutral --steel. */ /* Pulled from the logo's maple leaf — the Canada-flag red. The leaf fill is #e23140, its deepest shadow #d11f2d; the accent settles on the deep shadow value so the app red reads as the flag red, not a lighter orange-red. */ --accent: #d11f2d; --accent-dim: #9a1620; --accent-bright:#f0394a; --accent-tint: rgba(209, 31, 45, 0.15); /* Hero gradient — for the big landing month / hero numbers only. A vertical deep→bright fill (applied as gradient text) plus a faint halo gives the number a lit "pop" while staying in the flag-red family. */ --accent-grad: linear-gradient(180deg, #f0394a, #b81725); --accent-glow: 0 0 18px rgba(209, 31, 45, 0.3); /* CRITICAL = magenta — overdue / expired / delete. A distinct alarm hue, kept apart from Cal's identity maple-red so "alarm" never blurs with "Cal". Replaces the old --red / --st-expired. */ --critical: #c64bd0; --critical-dim: #83267f; --critical-tint:rgba(198, 75, 208, 0.15); /* Owner-coding set (confirmed with Nick) — person identity dots/chips. Nick blue, Lauren lilac, Joint teal, Oliver gold. Not the app accent; these encode WHO, distinct from the maple identity + magenta alarm. */ --own-nick: #6a93d8; --own-nick-dim: #3f5e94; --own-lauren: #b08cf0; --own-lauren-dim: #6a4db0; --own-joint: #56c2c9; --own-joint-dim: #357c8a; --own-oliver: #e0b15c; --own-oliver-dim: #8a6d2f; /* ── Local aliases onto shared tokens ─────────────────────────────────── Cal's stylesheet was written against these short names; alias them onto the shared shell so the bulk of the CSS resolves unchanged. --accent-blue (the old "research / source" secondary) is NOT an identity axis under the new model — point it at neutral --steel so research labels and the nursing route read quietly, not as a second brand colour. */ --accent-blue: var(--steel); --accent-blue-dim: var(--steel-dim); /* Status dot semantics → shared status tokens. Expired uses critical. */ --st-not_started: var(--text-muted); --st-in_progress: var(--warn); --st-complete: var(--success); --st-expired: var(--critical); --st-not_applicable: var(--text-dim); --green: var(--success); --yellow: var(--warn); --red: var(--critical); /* Type + shape aliases onto the shared scale. */ --head: var(--font-display); --body: var(--font-body); --r: var(--radius); --rsm: var(--radius-sm); /* Fixed header height the body padding reserves (mobile value in breakpoint). */ --hdr-h: 64px; /* Left nav rail width (desktop). Mobile turns the rail into a bottom bar. */ --rail-w: 188px; --botbar-h: 60px; } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: hidden; } /* "Steel, not plastic": always reserve the scrollbar gutter so content width never jumps when a page grows past the viewport. */ html { scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; } body { font-family: var(--body); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: var(--fs-md); line-height: 1.5; font-weight: 300; padding-top: calc(var(--hdr-h) + env(safe-area-inset-top)); } /* ── SHELL: rail + content ── Desktop: fixed left rail beside a centred content column. Content begins directly under the header (the old horizontal tab strip is gone), so loading overlays, headlines and helper text are never clipped behind a nav band. */ .shell { flex: 1; display: grid; grid-template-columns: var(--rail-w) 1fr; } a { color: inherit; -webkit-tap-highlight-color: transparent; } button { -webkit-tap-highlight-color: transparent; font-family: inherit; } /* ── HEADER (shared standard, DESIGN.md) ── */ /* Fixed (pinned) — position:sticky would be killed by the ancestor overflow-x:hidden, so the header is fixed and body reserves --hdr-h. */ .app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); } /* Header inner centres on the shared --app-width spine so Cal's brand lands at the same screen-x as every other app (shared header standard, DESIGN.md). The bar background stays full-bleed; the shell (rail + main) below keeps its own full-width layout — the rail is Cal's content-density device, not a narrower spine. */ .header-inner { max-width: var(--app-width); margin: 0 auto; height: var(--hdr-h); padding: 0 var(--app-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .app-title { display: flex; align-items: center; gap: 11px; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: 3px; text-transform: uppercase; color: var(--text); } .back-link { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-2xs); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color var(--motion-base); flex-shrink: 0; } .back-link:hover, .back-link:active { color: var(--steel); } .header-divider { width: 1px; height: 1.2em; background: var(--border); flex-shrink: 0; align-self: center; } /* Share flag: external screenshots hide the back-to-Porter link + divider via a data-share attr on (shared header standard). */ body[data-share] .back-link, body[data-share] .header-divider { display: none; } /* App icon: recoloured icon.svg, sized in em relative to the wordmark so it tracks the type-scale knob (shared header standard). */ .app-title-icon { display: block; width: 1.7em; height: 1.7em; flex-shrink: 0; } .wordmark { display: inline-block; color: var(--text); } /* Wordmark dot takes Cal's signature hue — the small chrome cue of identity beside the neutral title (shared header standard). */ .app-title .dot { color: var(--accent); margin-left: -1px; } .header-identity { font-size: 0.7rem; color: var(--text-muted); font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } .header-identity .you { font-family: var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); font-size: 0.62rem; } /* ── SECTION RAIL (desktop nav) ── */ .section-rail { position: fixed; top: calc(var(--hdr-h) + env(safe-area-inset-top)); bottom: 0; left: 0; width: var(--rail-w); background: var(--surface); border-right: 1px solid var(--border); padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; z-index: 80; } .rail-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left; background: none; border: none; border-radius: var(--rsm); color: var(--text-muted); font-family: var(--body); font-size: 0.92rem; font-weight: 300; padding: 0.55rem 0.7rem; cursor: pointer; transition: color 0.15s, background 0.15s; } .rail-item:hover { background: var(--surface-2); color: var(--text); } .rail-item.active { background: var(--accent-tint); color: var(--text); } .ri-mark { width: 3px; height: 1.05em; border-radius: 2px; background: transparent; flex-shrink: 0; } .rail-item.active .ri-mark { background: var(--accent); } /* per-section badge (e.g. conflict count on Now) injected by JS */ .rail-badge { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; background: var(--critical-tint); color: var(--critical); padding: 0.05rem 0.45rem; border-radius: 999px; } /* ── MAIN / content column ── */ main { grid-column: 2; min-width: 0; padding: 1.5rem 0 calc(3rem + env(safe-area-inset-bottom)); } .container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .loading, .empty { color: var(--text-muted); font-size: 0.85rem; padding: 1.5rem 0; } .empty { font-style: italic; color: var(--text-dim); } /* ── STATUS LINE (Now): target month + at-a-glance health ── */ .status-line { display: flex; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .sl-target { font-family: var(--head); font-weight: 500; font-size: var(--fs-xl); letter-spacing: 0.01em; color: var(--text); line-height: 1.15; } /* Hero treatment: gradient-filled glyphs + faint halo for the landing month (and any future hero number). Reusable as .hero-red. */ .sl-target .month, .hero-red { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: var(--accent-glow); } .sl-runway { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.25rem; } .sl-health { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.03em; white-space: nowrap; } .sl-health.ok { color: var(--success); } .sl-health.bad { color: var(--critical); } .sl-health .sl-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ── SECTION HEADING ── */ .section-head { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0.5rem 0 -0.25rem; } .section-head.alarm { color: var(--critical); } .section-head .sh-count { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.04em; } /* ── PATHWAY CARD ── Glance-first: name + progress on a header row; the primary pathway is tagged and ordered first. Ready-to-start steps list below. */ .pw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.2rem 0.6rem; } .pw-card.primary { border-color: var(--accent-dim); } .pw-card.paused { opacity: 0.75; } .pw-card.abandoned { opacity: 0.5; } .pw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .pw-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 0.05rem 0.5rem; margin-bottom: 0.3rem; } .pw-name { font-family: var(--head); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text); line-height: 1.3; } .pw-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; } .pw-bar { width: 96px; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .pw-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .pw-count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-dim); white-space: nowrap; } .pw-next-label { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0.4rem 0 0.1rem; } .pw-blocked { font-size: 0.8rem; color: var(--text-muted); padding: 0.4rem 0 0.6rem; line-height: 1.5; } .pw-blocked .blk-step { color: var(--text); } .pw-done { color: var(--green); } /* ── STEP ROW (the glance unit, reused everywhere) ── dot · name + one context line · owner label. No chevron, no fee/source clutter — the detail sheet carries the rest. Rows sit in a bordered list container (.rows) so they read as one surface, not chopped cards. */ .rows, .step-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } /* lists nested inside an already-bordered container (attn / pathway card) shouldn't double-border */ .attn .rows, .pw-card .step-list, .doc-bucket .step-list, .card .step-list { border: none; border-radius: 0; background: none; } .step-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border); color: var(--text); font-family: var(--body); font-size: var(--fs-md); font-weight: 300; padding: 0.7rem 0.9rem; min-height: 44px; cursor: pointer; transition: background 0.15s; } .step-row:first-child { border-top: none; } .step-row:hover { background: var(--surface-2); } .attn .step-row:hover { background: rgba(255,255,255,0.03); } .sr-hint .hint-expired { color: var(--red); } /* ── Nursing licensure view (Epic 8) ── */ .route-row { padding: 0.5rem 0; border-top: 1px solid var(--border); } .route-row:first-child { border-top: none; padding-top: 0; } .route-path { font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .route-from { color: var(--text); } .route-arrow { color: var(--accent); } .route-to { color: var(--accent-blue); } .route-what { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.15rem; } .note-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .note-list li { font-size: 0.85rem; color: var(--text); line-height: 1.55; padding-left: 1rem; position: relative; } .note-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); } .note-source { font-size: 0.72rem; color: var(--text-dim); font-style: italic; margin-top: 0.8rem; } /* ── Documents validity dashboard (Epic 7) ── */ .doc-intro { font-size: 0.82rem; color: var(--text-muted); padding: 0.1rem 0.1rem 0.3rem; } .doc-intro strong { color: var(--accent); font-weight: 400; } .doc-bucket { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r); padding: 0.4rem 1rem 0.2rem; } .doc-bucket-head { font-family: var(--head); font-size: 0.62rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 0.5rem 0 0.3rem; } .doc-count { color: var(--text-dim); margin-left: 0.2rem; } .doc-bucket.b-expired { border-left-color: var(--red); } .doc-bucket.b-expired .doc-bucket-head { color: var(--red); } .doc-bucket.b-before { border-left-color: var(--yellow); } .doc-bucket.b-before .doc-bucket-head { color: var(--yellow); } .doc-bucket.b-valid { border-left-color: var(--green); } .doc-bucket.b-valid .doc-bucket-head { color: var(--green); } .doc-bucket.b-none { border-left-color: var(--border); opacity: 0.8; } .sr-hint .hint-warn { color: var(--yellow); } .sr-hint .hint-muted { color: var(--text-dim); } /* conflict callout inside the step detail Timing block */ .d-conflict { margin-top: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--red); border-radius: var(--rsm); background: var(--critical-tint); color: var(--red); font-size: 0.78rem; line-height: 1.5; } .sr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st-not_started); flex-shrink: 0; } .sr-main { min-width: 0; } .sr-name { display: block; line-height: 1.3; color: var(--text); } /* "Your step" marker — a small OUTLINED accent ring (not a filled dot), so it reads as a distinct annotation rather than another status colour. Carries a native title tooltip ("Your step"). */ .sr-mine { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; margin-left: 0.45rem; vertical-align: middle; cursor: help; } .sr-dot { cursor: help; } .sr-hint { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.01em; color: var(--text-dim); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-hint .shared { color: var(--steel); } .sr-hint .ok { color: var(--steel); } /* Owner label — always-visible, colour-coded pill (who's turn). */ .owner-chip { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-2xs); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; flex-shrink: 0; } .owner-nick { color: var(--own-nick); border-color: var(--own-nick-dim); background: color-mix(in srgb, var(--own-nick) 10%, transparent); } .owner-lauren { color: var(--own-lauren); border-color: var(--own-lauren-dim); background: color-mix(in srgb, var(--own-lauren) 10%, transparent); } .owner-joint { color: var(--own-joint); border-color: var(--own-joint-dim); background: color-mix(in srgb, var(--own-joint) 10%, transparent); } .owner-oliver { color: var(--own-oliver); border-color: var(--own-oliver-dim); background: color-mix(in srgb, var(--own-oliver) 10%, transparent); } /* ── ATTENTION CARD (Now): conflicts surfaced first, loud ── */ .attn { border: 1px solid var(--critical-dim); background: var(--critical-tint); border-radius: var(--r); overflow: hidden; } .attn-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--critical); border-bottom: 1px solid var(--critical-dim); } /* status dot colors */ .st-not_started { background: var(--st-not_started); } .st-in_progress { background: var(--st-in_progress); } .st-complete { background: var(--st-complete); } .st-expired { background: var(--st-expired); } .st-not_applicable { background: var(--st-not_applicable); } /* ── TASKS controls (filter chips + sort) ── */ .tasks-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; } .filter-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-family: var(--head); font-size: 0.62rem; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.7rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; } .filter-chip:hover { color: var(--text); } .filter-chip.active { color: var(--accent); border-color: var(--accent-dim); background: var(--surface-2); } .filter-chip .chip-count { color: var(--text-dim); margin-left: 0.15rem; } .filter-chip.active .chip-count { color: var(--accent-dim); } /* mark the signed-in person's own filter */ .filter-chip.is-mine-chip { border-style: dashed; } .sort-select { display: flex; align-items: center; gap: 0.4rem; } .sort-label { font-family: var(--head); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .sort-select select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: var(--body); font-size: 0.8rem; font-weight: 300; padding: 0.35rem 0.5rem; } .sort-select select:focus { outline: none; border-color: var(--accent-dim); } /* ── STATUS BADGE (detail) ── */ .status-badge { font-family: var(--head); font-size: 0.58rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: var(--rsm); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .badge-not_started { color: var(--st-not_started); } .badge-in_progress { color: var(--st-in_progress); border-color: var(--st-in_progress); } .badge-complete { color: var(--st-complete); border-color: var(--st-complete); } .badge-expired { color: var(--st-expired); border-color: var(--st-expired); } .badge-not_applicable { color: var(--st-not_applicable); } /* ── STUB SECTIONS ── */ .stub { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); padding: 1.5rem 1.2rem; text-align: center; } .stub h2 { font-family: var(--head); font-weight: 300; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text); margin-bottom: 0.4rem; } .stub p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; } .stub .scope-tag { display: inline-block; font-family: var(--head); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.6rem; } /* ── CARD (settings, generic) ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.2rem; } .card-label { font-family: var(--head); font-weight: 300; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem; } .link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); transition: border-color 0.2s; } .link:hover { border-bottom-color: var(--accent); } /* ── DETAIL SHEET ── */ .sheet-host { position: fixed; inset: 0; z-index: 200; } .sheet-host[hidden] { display: none; } .sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.2s ease; } .sheet-host.open .sheet-scrim { opacity: 1; } .sheet { position: absolute; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform 0.24s ease; overflow: hidden; } /* Desktop: right-side drawer */ @media (min-width: 641px) { .sheet { top: 0; right: 0; bottom: 0; width: min(480px, 92vw); border-radius: 0; border-right: none; transform: translateX(100%); } .sheet-host.open .sheet { transform: translateX(0); } } /* Mobile: bottom sheet */ @media (max-width: 640px) { .sheet { left: 0; right: 0; bottom: 0; max-height: 92vh; border-radius: var(--r) var(--r) 0 0; border-bottom: none; transform: translateY(100%); } .sheet-host.open .sheet { transform: translateY(0); } } .sheet-content { /* Horizontal gutter, shared with the sticky header so its negative x-margins stay in sync (no hard-coded copies drifting apart). The TOP gutter is 0: the sticky header supplies the top spacing via its own padding and OCCUPIES flow (no negative top margin), so content below it can never start under it. */ --sheet-pad-x: 1.3rem; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Keep scroll inside the sheet — a scroll/drag that reaches the sheet's top or bottom must NOT chain to the page behind it (bug 15). */ overscroll-behavior: contain; padding: 0 var(--sheet-pad-x) calc(2rem + env(safe-area-inset-bottom)); } .sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 0.9rem; } @media (min-width: 641px) { .sheet-grab { display: none; } } /* Sheet header pins to the top of the scrolling content so the title and the action buttons (Edit / Done · close) stay visible no matter how far the detail scrolls (bug 5). It OCCUPIES normal flow (no negative top margin) and supplies the top spacing via its own padding, so the content below always starts beneath it and can never render behind it. Negative x-margins let it span the content's horizontal gutter so its background + border reach the sheet edges. */ .sheet-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin: 0 calc(-1 * var(--sheet-pad-x)) 0.9rem; padding: 1.1rem var(--sheet-pad-x) 0.7rem; background: var(--surface); border-bottom: 1px solid var(--border); } .sheet-title { font-family: var(--head); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1.3; color: var(--text); } .sheet-top-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .sheet-close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; flex-shrink: 0; } .sheet-close:hover { color: var(--text); } /* compact button for the header action row */ .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.6rem; } .sheet-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; } /* read view blocks */ .d-block { margin: 0.9rem 0; } .d-label { font-family: var(--head); font-weight: 300; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; } .d-text { font-size: 0.86rem; color: var(--text); line-height: 1.6; } .d-text.muted { color: var(--text-muted); } /* Acronym glossary marker (bug 6): a dotted underline cues that hovering/ tapping reveals the expansion. Native supplies the tooltip. */ .gloss { text-decoration: underline dotted var(--steel-dim); text-underline-offset: 2px; cursor: help; } /* Bulleted list — for "serves pathways" and any multi-item field, instead of an inline ·-joined run (bug 6). */ .blist { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; } .blist li { position: relative; padding-left: 1rem; font-size: 0.86rem; color: var(--text); line-height: 1.45; } .blist li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--steel-dim); } .d-kv { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-top: 1px solid var(--border); font-size: 0.82rem; } .d-kv:first-child { border-top: none; } .d-kv .k { color: var(--text-muted); } .d-kv .v { color: var(--text); text-align: right; } .d-prereq { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.82rem; } .d-prereq .sr-dot { width: 8px; height: 8px; } .fee-read { border: 1px solid var(--border); border-radius: var(--rsm); background: var(--bg); padding: 0.6rem 0.7rem; margin-bottom: 0.4rem; font-size: 0.8rem; } .fee-read .fee-amt { color: var(--text); } .fee-read .fee-label { color: var(--text-muted); } /* Shared provenance line (source link + staleness) — used under fees and the validity-window row in the step detail sheet. */ .fee-src { margin-top: 0.3rem; font-size: 0.72rem; color: var(--text-muted); } /* The validity-window source line sits directly in the Timing block, so it aligns right to follow the kv rows above it. */ .d-block > .fee-src { text-align: right; } .stale { color: var(--yellow); } .stale-old { color: var(--red); } /* edit toggle / actions */ .d-actions { display: flex; gap: 0.5rem; margin-top: 1.2rem; flex-wrap: wrap; } .btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: var(--head); font-size: 0.66rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:active { background: var(--surface); } .btn-primary { border-color: var(--accent-dim); color: var(--accent); } .btn-primary:hover { background: var(--accent-dim); color: var(--text); } .audit-toggle summary { font-size: 0.74rem; color: var(--text-muted); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; list-style: none; font-family: var(--head); letter-spacing: 0.1em; text-transform: uppercase; } .audit-toggle summary::-webkit-details-marker { display: none; } .audit-toggle[open] summary { margin-bottom: 0.5rem; } .log-row { padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--rsm); background: var(--bg); font-size: 0.76rem; margin-bottom: 0.4rem; } .log-head { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; } .log-field { color: var(--text); font-family: var(--head); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; } .log-meta { color: var(--text-muted); font-size: 0.68rem; } .log-detail { color: var(--text-muted); font-size: 0.74rem; } .log-detail code { font-family: 'Menlo','Monaco',monospace; color: var(--text); word-break: break-all; } .log-citation { color: var(--text-muted); font-size: 0.7rem; margin-top: 0.25rem; } /* ── EDIT FORMS ── */ .edit-section-label { font-family: var(--head); font-weight: 300; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 1.2rem 0 0.5rem; } .edit-section-label.research { color: var(--accent-blue); } .field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; } .field-label { font-family: var(--head); font-size: 0.6rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .field input, .field select, .field textarea { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: var(--body); font-size: 0.85rem; padding: 0.5rem 0.6rem; width: 100%; font-weight: 300; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-dim); } /* Month picker is calendar-only: the whole field is the click target, and the text caret is suppressed since typing is blocked (bug 2). */ .month-picker { cursor: pointer; } .month-picker::-webkit-datetime-edit { pointer-events: none; } .field textarea { resize: vertical; min-height: 2.6rem; } /* auto-grow textareas size themselves to content via JS — no manual resize handle, no inner scrollbar (bug 7). */ .field textarea.autogrow { resize: none; overflow: hidden; } .field-pair { display: flex; gap: 0.5rem; } .field-pair > * { flex: 1; } .fee-edit-group { border: 1px solid var(--border); border-radius: var(--rsm); padding: 0.7rem; margin-bottom: 0.6rem; background: var(--bg); } .fee-edit-group .fee-edit-title { font-family: var(--head); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .source-panel { border: 1px solid var(--accent-blue-dim); border-radius: var(--rsm); padding: 0.7rem 0.8rem; margin: 0.6rem 0 0.4rem; background: var(--bg); } .source-panel .sp-title { font-family: var(--head); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 0.5rem; } .save-status { font-size: 0.74rem; color: var(--text-muted); align-self: center; } .save-status.error { color: var(--red); } .save-status.ok { color: var(--green); } .form-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } /* ── FOOTER (shared standard, DESIGN.md) ── */ /* Document-flow footer: body is a flex column, footer pins under the content (margin-top:auto) — bottom of viewport on a short page, below content on a long one. Same content/styling as every other app. */ .app-footer { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.4px; color: var(--text-dim); opacity: 0.7; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } .app-footer .sep { opacity: 0.5; margin: 0 7px; } /* ── FOOTER placement in the shell grid ── The footer lives after .shell in the document. On desktop the fixed rail doesn't reserve flow, so the footer would slide under it — indent it by the rail width so it sits under the content column. */ .app-footer { margin-left: var(--rail-w); } /* ── Mobile: rail → bottom bar, single content column ── */ @media (max-width: 768px) { html { font-size: 15px; } .shell { grid-template-columns: 1fr; } main { grid-column: 1; padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom) + 1rem); } .container { padding: 0 1rem; } .app-footer { margin-left: 0; margin-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom)); } /* rail becomes a fixed bottom bar */ .section-rail { top: auto; bottom: 0; left: 0; right: 0; width: auto; flex-direction: row; border-right: none; border-top: 1px solid var(--border); padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom)); gap: 0; justify-content: space-around; height: calc(var(--botbar-h) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); } .rail-item { flex-direction: column; gap: 0.1rem; font-size: var(--fs-2xs); padding: 0.3rem; flex: 1; justify-content: center; text-align: center; } .ri-mark { display: none; } .rail-item.active { background: none; color: var(--accent-bright); } .rail-badge { position: absolute; top: 0.1rem; margin-left: 0; transform: translateX(0.6rem); } .status-line { flex-direction: column; align-items: flex-start; } .sl-health { margin-left: 0; align-self: flex-start; } }