/* Cardbase's half of the stylesheet — the palettes, and everything that knows
what a person, an occasion or a design looks like. The other half is
js/shell/shell.css, which is app-agnostic and is going to a sibling repo;
docs/architecture.md → "The split" is the reasoning for both.
IT LOADS SECOND, AND THAT IS A CONTRACT. index.html links shell.css first, so
at EQUAL specificity a rule here wins. A unit test pins the order.
THE RESET AND THE BARE ELEMENT RULES ARE NOT HERE. `*`, `html, body`, the
touch/selection behaviour and bare `label` / `input` / `textarea` live in the
shell's reboot block, because they have to load before both halves to keep
their specificity ties resolving — that block's header has the detail.
THE HOVER GUARD APPLIES HERE TOO. Every `:hover` rule below carries
`:where(:root[data-input="pointer"])`, and js/app/tests/unit/hover-guard.test.mjs
fails if one opts out. `data-input` is a SHELL contract — written by
js/shell/pointer-input.js, defaulted in index.html's markup — so this half
depends on it exactly as it depends on the shell's `data-theme` blocks. The
full argument, including why `:where()` is load-bearing rather than
decoration, is stated once, in shell.css beside the guard's own components.
THE PALETTE BELOW IS A CONTRACT THE SHELL READS. shell.css consumes ~22 of
these custom properties and defines none of them, so a palette that drops one
breaks the shell silently. js/app/tests/unit/css-tokens.test.mjs is what makes
that loud. The panel metrics (--slot-*, --panel-gap*) run the other way: the
shell publishes them and rules here read them. */
/* ---- Theme tokens -------------------------------------------------------
Five palettes, named for the paper they're made of. Two PAIRS — Mulberry and
Kraft, each in a light and a dark — plus Plum, the house palette, which is
the app's original look and has no light half.
Mulberry Light cream ground, wine ink (was `light`)
Mulberry Dark near-black ground, rose ink (the default, so :root)
Kraft Light tan ground, umber ink
Kraft Dark dull brown ground, gold ink
Plum deep plum ground, gold ink (was `dark`)
A pair shares its INK, not its ground: Mulberry's two halves both run the
wine hue (329° and 332°), Kraft's both run gold. That's what makes the light
and dark halves read as the same theme rather than two themes that happen to
sit next to each other. Plum breaks it — plum ground, gold ink — which is
why it's unpaired rather than "Mulberry Bold".
Mulberry Dark holds bare `:root`, so a first visit and any stored value we
don't recognise land on it. That block and DEFAULT_THEME in js/app/config.js
are ONE fact written twice and must agree: theme-bootstrap.js only sets
data-theme when something is stored, so a first paint comes from bare `:root`
and theme.js only normalises it once the modules have loaded. Point the two
at different palettes and a first visit paints one and then repaints to the
other. js/shell/theme.js says the same thing from the other side.
Every block is also keyed to [data-theme-sample], so a swatch inside the
theme picker can wear a palette the page isn't wearing (js/shell/theme.js).
That's the whole trick behind the side-by-side samples: no duplicated hexes,
no canvas, just the same tokens scoped to an element instead of the root.
Cardbase palette: ink-and-paper with a dusty-rose accent — deliberately
distinct from its sibling fiber-kit (which is green/mustard). */
/* Tell the UA which theme it's painting, so native scrollbars, form-control
popups and inset shadows are drawn to match — not the light default that
otherwise shows a pale scrollbar against the plum. Keyed on data-theme (set
by theme.js + the pre-paint bootstrap), so it follows the in-app choice, not
the OS. Declared apart from the token blocks below because those blocks also
apply to sample swatches, and a nested color-scheme would repaint the UA
chrome of whatever is drawn inside them. */
:root,
:root[data-theme="plum"],
:root[data-theme="mulberry-dark"],
:root[data-theme="kraft-dark"] { color-scheme: dark; }
:root[data-theme="mulberry-light"],
:root[data-theme="kraft-light"] { color-scheme: light; }
:root[data-theme="plum"],
[data-theme-sample="plum"] {
--bg: #211829; /* deep plum (icon ground) */
--surface: #2c2137;
--surface-2: #392b45;
--surface-3: #493653;
--border: #573d54; /* wine-tinted divider */
--text: #f2ece0; /* cream (icon) */
--text-muted: #b5a6b0;
--text-faint: #7d7083;
--accent: #dbb257; /* gold (icon): headings / labels */
--primary: #dbb257; /* gold (icon): active / actions */
--primary-hover: #e7c56d;
--on-primary: #241a2e;
--value: #7fc9a9; /* mint (icon): result values / active nav */
--connected: #7fc9a9; /* mint (icon): cloud sync active */
/* Burnt orange: destructive. --on-danger OPPOSES the swatch rather than being
white everywhere — on a bright orange, white is 3.12:1 and this plum-black
is 5.34:1. See docs/ui-conventions.md → Themes. */
--danger: #e0743f;
--on-danger: #241a2e;
--input-bg: #1a1222;
/* The brand mark's plinth. On a dark ground the mark needs none — its four
quads sit straight on the rail — so this is transparent in every dark
palette and the shadow goes with it (a shadow with no card behind it draws
a floating rectangle). The light palettes keep the plum card, where it's
load-bearing: the mark's cream quad is 1.15:1 against cream and would
vanish without it. */
--mark-ground: transparent;
--mark-shadow: transparent;
--shadow: rgba(0,0,0,0.4);
--style-fem: #db8fac; /* rose: feminine card style (birthday icon tint) */
--style-masc: #57b1a7; /* teal: masculine card style */
--style-neutral: #d9cfcc; /* subtle: anniversary + remembrance icons, softer than the name */
--select-arrow: url("data:image/svg+xml;utf8,");
/* Circle-identity palette (docs/circle-identity.md): 11 names a user can pin to
a Circle for its marker/chip. Stored value is the NAME; --circle- maps
it to a per-theme swatch, so the audit retunes here without touching data.
Chosen clear of the reserved meanings (rose=fem, teal=masc, gold=primary,
mint=value, orange=danger). */
--circle-red: #d97a6c;
--circle-copper: #c98f5f;
--circle-olive: #a9b061;
--circle-green: #7fb56b;
--circle-blue: #7aa9d8;
--circle-violet: #a78fd6;
--circle-berry: #c77bc2;
--circle-slate: #8fa0ad;
--circle-cocoa: #a97e55;
--circle-lemon: #ddd35c;
--circle-tangerine: #f29c4f;
}
:root[data-theme="mulberry-light"],
[data-theme-sample="mulberry-light"] {
--bg: #f8f1e4;
--surface: #fffcf2;
--surface-2: #f1e7d4;
--surface-3: #e8dbc2;
--border: #e0d2b8;
--text: #322c3a;
--text-muted: #6f6678;
/* Darkened from #a49caf, hue and saturation held: the tertiary tier reads as
quiet on the darks and as washed-out lavender on cream. 2.35:1 → 3.59:1 on
--bg, joining the darks' 3.68–4.15 band. Themes → Contrast. */
--text-faint: #857a94;
--accent: #7c3f5f; /* wine-plum (icon): headings / labels on cream */
--primary: #7c3f5f; /* warm wine-plum: active / actions */
--primary-hover: #693451;
--on-primary: #ffffff;
--value: #3f8f6c;
--connected: #3f8f6c; /* deep mint: cloud sync active */
/* Pulled two steps darker than the #cc5803 it started as: that value sat
mid-tone, where NEITHER ink passed (white 4.23, its own --text 3.19). Same
hue 25°, same saturation, three points of value — white now 5.05, and as
text on --bg it clears 4.5 for the first time. */
--danger: #b84f02;
--on-danger: #ffffff;
--input-bg: #fffcf1;
--mark-ground: #211829; /* stays plum: the mark's cream quad needs a dark ground */
--mark-shadow: rgba(60,40,60,0.14);
--shadow: rgba(60,40,60,0.12);
--style-fem: #b85c85; /* deeper rose on cream: feminine card style */
--style-masc: #2f8c82; /* deeper teal: masculine card style */
--style-neutral: #4d4557; /* subtle: anniversary + remembrance icons, softer than the name */
--select-arrow: url("data:image/svg+xml;utf8,");
/* Circle-identity palette — light-theme swatches (deeper, for cream grounds). */
--circle-red: #b0453a;
--circle-copper: #96612f;
--circle-olive: #6f7530;
--circle-green: #3f7d34;
--circle-blue: #35679f;
--circle-violet: #6a4aa8;
--circle-berry: #94408f;
--circle-slate: #5a6b78;
--circle-cocoa: #6e4e2a;
--circle-lemon: #9d940f;
--circle-tangerine: #c06a15;
}
/* Mulberry Dark — the light half photographed as a negative. Its cream paper
becomes the ink; its wine becomes the rose, lifted until it clears 6:1 on a
near-black ground. One identity colour doing --accent and --primary at once,
exactly as wine does in Mulberry Light: no gold anywhere in the interface
(the brand mark keeps its own, but those four quads are fixed hexes).
The ground is the plum's hue at 11% saturation against Plum's 26% — a trace
of the brand in the neutral rather than a wash of it.
It also holds bare `:root` — see the fallback note at the top of this file. */
:root,
:root[data-theme="mulberry-dark"],
[data-theme-sample="mulberry-dark"] {
--bg: #181419;
--surface: #221d24;
--surface-2: #2d262f;
--surface-3: #39303b;
--border: #403542;
--text: #f2ece0; /* Mulberry Light's paper, now its ink */
--text-muted: #b3a8b2;
--text-faint: #7e747f;
--accent: #d087a9; /* the wine #7c3f5f, lifted to clear 6.7:1 */
--primary: #d087a9;
--primary-hover: #e09cba;
--on-primary: #241a26;
--value: #7fc9a9;
--connected: #7fc9a9;
--danger: #e0743f;
--on-danger: #241a26; /* opposes the swatch: 5.39:1, where white is 3.12 */
--input-bg: #120f13;
--mark-ground: transparent;
--mark-shadow: transparent;
--shadow: rgba(0,0,0,0.5);
/* Lifted a full 17 lightness points off --accent, because the rose that
tints feminine birthday icons and the rose that means "interactive" would
otherwise sit 5° apart in the same row. That 17-point gap is not a new
invention: it's the exact separation Mulberry Light already runs between
its wine #7c3f5f (L37) and its own fem tint #b85c85 (L54). Same problem,
same solution, solved upward instead of downward. */
--style-fem: #f0bcd0;
--style-masc: #57b1a7;
--style-neutral: #d9cfcc;
--select-arrow: url("data:image/svg+xml;utf8,");
/* Circle-identity palette — the dark set, with berry pushed violet-ward so
a Circle chip can't be mistaken for the rose that means "interactive". */
--circle-red: #d97a6c;
--circle-copper: #c98f5f;
--circle-olive: #a9b061;
--circle-green: #7fb56b;
--circle-blue: #8fb6e0;
--circle-violet: #a78fd6;
--circle-berry: #b98fd0;
--circle-slate: #8fa0ad;
--circle-cocoa: #a97e55;
--circle-lemon: #ddd35c;
--circle-tangerine: #f29c4f;
}
/* Kraft Dark — brown paper in shadow. The ground is hue 20 at 12% saturation,
and both numbers are the point: an earlier pass at hue 25 / 25% sat sat too
close to the gold in both hue and chroma, so the accent read as a lighter
shade of the page rather than a colour on it. Draining the ground fixed it
without touching a single accent, which is why this palette carries Plum's
gold, mint and burnt orange completely unchanged. */
:root[data-theme="kraft-dark"],
[data-theme-sample="kraft-dark"] {
--bg: #1d1917;
--surface: #272220;
--surface-2: #322d29;
--surface-3: #3e3833;
--border: #47403a;
--text: #f2ece0;
--text-muted: #b5a99e;
--text-faint: #847a70;
--accent: #dbb257;
--primary: #dbb257;
--primary-hover: #e7c56d;
--on-primary: #1d1917;
--value: #7fc9a9;
--connected: #7fc9a9;
/* Burnt orange shares this ground's hue and still reads as an alarm, because
it carries 72% saturation against the ground's 12%. Chroma separates them
where hue can't — which is the same trick the ground itself is built on. */
--danger: #e0743f;
--on-danger: #1d1917; /* opposes the swatch: 5.60:1, where white is 3.12 */
--input-bg: #161311;
--mark-ground: transparent;
--mark-shadow: transparent;
--shadow: rgba(0,0,0,0.55);
--style-fem: #db8fac;
--style-masc: #57b1a7;
--style-neutral: #e2d8cc;
--select-arrow: url("data:image/svg+xml;utf8,");
/* Circle-identity palette — the dark set. Only cocoa moves: it's the one
swatch in the same hue family AND the same low chroma as this ground, so
it dropped to 4.82:1 and read as page rather than marker. Copper and
tangerine share the hue but carry enough saturation to hold on their own. */
--circle-red: #d97a6c;
--circle-copper: #c98f5f;
--circle-olive: #a9b061;
--circle-green: #7fb56b;
--circle-blue: #7aa9d8;
--circle-violet: #a78fd6;
--circle-berry: #c77bc2;
--circle-slate: #8fa0ad;
--circle-cocoa: #c09a72;
--circle-lemon: #ddd35c;
--circle-tangerine: #f29c4f;
}
/* Kraft Light — the same brown paper in daylight, with the gold inverted into
a deep umber. A tan ground sits four lightness points below cream, and every
accent pays for that, so this palette's tints are drawn deeper rather than
borrowed from Mulberry Light — which is why each one actually beats its
equivalent there (value 4.05 vs 3.49, danger 4.72 vs 4.50, fem 4.55 vs 3.81).
The danger pair is the narrowest of the three: both lights were pulled deeper
to clear 4.5 as text, so this one had to move too in order to stay ahead. */
:root[data-theme="kraft-light"],
[data-theme-sample="kraft-light"] {
--bg: #f0e6d4;
--surface: #fbf5e9;
--surface-2: #e6dac4;
--surface-3: #dbcdb3;
--border: #d8c9ac;
--text: #2b2620;
--text-muted: #6b6152;
/* Darkened from #9b9081 for the same reason as Mulberry Light's, and by the
same method — lightness only. 2.53:1 → 3.56:1 on --bg. Themes → Contrast. */
--text-faint: #827767;
--accent: #6b4a10; /* Kraft Dark's gold, inverted into umber */
--primary: #6b4a10;
--primary-hover: #55390b;
--on-primary: #fbf5e9;
--value: #357c5d;
--connected: #357c5d;
--danger: #b13f18; /* pulled red, clear of the ground's warmth */
--on-danger: #fbf5e9; /* opposes the swatch: cream, 5.38:1 */
--input-bg: #fbf6ec;
--mark-ground: #211829;
--mark-shadow: rgba(70,55,35,0.16);
--shadow: rgba(70,55,35,0.14);
--style-fem: #a8456b;
--style-masc: #2a7a70;
--style-neutral: #4a4034;
--select-arrow: url("data:image/svg+xml;utf8,");
/* Circle-identity palette — the light set, which is already drawn for warm
grounds; only cocoa and copper are near this ground's hue, and both carry
enough depth against a L89 paper to stay legible. */
--circle-red: #b0453a;
--circle-copper: #96612f;
--circle-olive: #6f7530;
--circle-green: #3f7d34;
--circle-blue: #35679f;
--circle-violet: #6a4aa8;
--circle-berry: #94408f;
--circle-slate: #5a6b78;
--circle-cocoa: #6e4e2a;
--circle-lemon: #9d940f;
--circle-tangerine: #c06a15;
}
/* Theme-independent tokens — the same in both palettes, so they sit outside the
two blocks above rather than being duplicated into each.
--icon-weight is the outline icon language's ONE line weight, in CSS px.
It needs saying because SVG stroke-width is normally in viewBox units, so a
flat stroke renders LIGHTER the smaller the icon is drawn. The set used to
declare one stroke per family and vary only the size, which meant the same
circle glyph rendered a 0.94px line in a 15px person-detail chip and a 1.38px
line in a 22px title mark — one mark, 47% apart — while a 24px occasion icon
in a detail header came out at 1.65px, 76% heavier than a circle chip near
it. `vector-effect: non-scaling-stroke` takes the stroke out of user space
and into screen space, so this single value IS the rendered weight at every
size and a new size can't get it wrong — the same "correct by existing" move
the drawer forms made when they stopped enumerating classes.
1.375px is not a new choice: it's what the Upcoming row already rendered
(20px at stroke 1.65) and what the v41 walkthrough approved, so the reference
icon is unchanged and everything else moves to meet it.
Deriving it arithmetically instead — `calc(33 / var(--icon-px))` — was built
and rejected: Chromium resolves it, but GECKO REFUSES calc() with a var()
divisor and silently falls back to stroke-width 1. Don't reintroduce it. */
:root {
--icon-weight: 1.375;
}
/* Text for assistive technology only. Where a visual cue carries meaning that a
screen reader cannot see — an unlogged past row says "nothing was recorded"
by drawing NO control, which is silence to a screen reader — the sentence has
to be said somewhere. Clipped rather than `display: none` or `visibility:
hidden`, both of which remove it from the accessibility tree as well. */
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---- Import preview (js/app/import-ui.js, in the shell drawer) ---------- */
.import-panel { display: flex; flex-direction: column; gap: 0.7rem; }
.import-file { font-size: 0.82rem; color: var(--text-muted); word-break: break-all; }
.import-heading { font-size: 0.9rem; font-weight: 600; }
.import-problem { color: var(--danger); }
.import-note { font-size: 0.85rem; color: var(--text-muted); }
.import-detail summary { cursor: pointer; font-size: 0.92rem; padding: 0.15rem 0; }
.import-names { margin: 0.25rem 0 0.4rem; padding-left: 1.3rem; font-size: 0.85rem; color: var(--text-muted); }
.import-names li { padding: 0.08rem 0; }
/* Type-to-confirm, for the one irreversible thing the app can do to itself. The
input inherits the global input[type="text"] rule, which is 1.1rem — it must
stay ≥16px or mobile Safari zooms the page on focus (docs/ui-conventions.md
→ Mobile viewport). */
.import-confirm { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.import-confirm label { font-size: 0.85rem; color: var(--text-muted); }
.import-issues { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--text-muted); }
.import-issues li { padding: 0.15rem 0; }
.person-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* The demo offer, in Upcoming's nothing-yet state and nowhere else — the only
empty message in the app that carries a control. It sits inside .sh-empty, so
the parent's text-align is what centres the box on the line; the inline-flex is
for what is INSIDE the box, so the label sits in the middle of a target taller
than itself rather than at the top of it.
Its own class rather than .link-add, which is the app's other quiet text
button: that one is form furniture (`align-self: flex-start`, left-aligned
under a field), and reusing it here would centre it by accident of the parent
while its declarations went on describing a layout it is not in. Primary
colour, because unlike .sh-link-alt this is the offer rather than the
afterthought — it is why the line beneath the message exists.
44pt, stated as `min-height` for the reason a timeline row states it that way:
it is the intent, not arithmetic that holds while the label is three words. It
costs nothing to spend the height here — the screen it appears on is empty by
definition — so it needs none of the negative-margin trick the pane head uses
to buy the same target back out of padding, and it is not gated on
`(pointer: fine)`: this is the first control a new phone owner reaches for. */
.occ-empty-demo {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
margin-top: 0.35rem;
background: none;
border: none;
color: var(--primary);
font-size: 0.95rem;
font-family: inherit;
cursor: pointer;
padding: 0 0.75rem;
}
:where(:root[data-input="pointer"]) .occ-empty-demo:hover { text-decoration: underline; }
.occ-list { display: flex; flex-direction: column; }
.occ-month {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
padding: 0.9rem 0.25rem 0.35rem;
}
.occ-month:first-child { padding-top: 0.1rem; }
/* The year on non-current-year month headers, quieter than the month itself. */
.occ-month-year { color: var(--text-faint); }
/* The present month is the "you are here" band: while every other header sits
quiet in muted grey, the current one wears the accent over a soft accent wash —
a lighter cue than boxing the whole month, and it pairs with the Today pill. */
.occ-month.is-current {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: 0.5rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin: 0.35rem 0 0.15rem;
}
.occ-month.is-current .occ-month-year { color: color-mix(in srgb, var(--accent) 70%, var(--text-faint)); }
.occ-today-pill {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-2);
color: var(--text);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 24px var(--shadow);
}
.occ-today-pill[hidden] { display: none; }
.occ-today-pill svg {
width: 0.85rem;
height: 0.85rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.occ-today-pill.is-down svg { transform: rotate(180deg); }
/* Row = a flex container of two sibling buttons: the leading status control and
the selectable body (nesting buttons would be invalid HTML). */
.occ-row {
display: flex;
align-items: center;
border-radius: 0.5rem;
transition: background 0.15s;
}
:where(:root[data-input="pointer"]) .occ-row:hover { background: var(--surface-2); }
.occ-row:active { background: var(--surface-3); transition-duration: 0s; }
.occ-row.is-selected { background: color-mix(in srgb, var(--value) 12%, transparent); }
/* Leading status control — tap advances the card through the pipeline.
2.75rem tall, matching .occ-select below, so the control fills the row's full
height. At 2.2rem it left a ~4px dead strip top and bottom once the row grew:
.occ-row itself carries no click handler (the two buttons are siblings, not a
wrapper), so a tap landing there does nothing at all rather than falling
through to the row. The WIDTH stays 2rem deliberately — taking it to a square
44 would push the day column 12px right and re-lay-out the row horizontally,
which is a different decision from row height. */
.occ-status {
flex-shrink: 0;
width: 2rem;
height: 2.75rem;
display: grid;
place-items: center;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: var(--text-faint);
}
.occ-status svg { width: 1.2rem; height: 1.2rem; display: block; }
.occ-status.is-in-progress, .occ-status.is-made { color: var(--accent); }
.occ-status.is-sent { color: var(--value); }
:where(:root[data-input="pointer"]) .occ-status:hover { color: var(--text); }
:where(:root[data-input="pointer"]) .occ-status.is-sent:hover { color: var(--value); }
/* The shared read-only status token — the same mark as the button above, plus a
label — rendered by statusToken() (js/app/cardStatus.js) everywhere card
status is DISPLAYED: the Cards roster tile, the People card history, the
Circles season rows. Those three each had their own treatment before (a
filled pill, plus two copies of a plain-text one), and the pill had `made`
mint and `sent` gold — the two states swapped relative to every other status
display in the app, so one card read two different colours depending which
view you found it in. That's TODO #13.
The CONTAINER around the token still differs by context — a roster is a tile,
a log is a dense table row (v42's roster-vs-log rule); only the token is
shared. The status EDITOR is a separate thing and stays a segmented control. */
.status-token {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
white-space: nowrap;
color: var(--text-muted);
/* The `sent` mark knocks its check out of a filled disc, so the check has to
be painted in whatever sits BEHIND it. Default to the page ground, which is
right for the dense log rows; the tile contexts override below. */
--mark-knockout: var(--bg);
}
/* Tiles sit on --surface, so the knockout has to match the tile, not the page. */
.card-row .status-token,
.circle-member .status-token { --mark-knockout: var(--surface); }
.status-token svg { width: 0.875rem; height: 0.875rem; display: block; flex-shrink: 0; }
.status-token.is-in-progress, .status-token.is-made { color: var(--accent); }
.status-token.is-sent { color: var(--value); }
.status-token.is-skipped { color: var(--text-faint); }
/* Hover repaints the ground under the mark, so the knockout must follow it. */
:where(:root[data-input="pointer"]) .card-row:hover .status-token,
:where(:root[data-input="pointer"]) .hist-link:hover .status-token { --mark-knockout: var(--surface-2); }
/* Enclose-a-cheque in a read-only display: the same glyph and mint as the
Upcoming row's coin, but WITHOUT the disc — a coin badge means "system nudge"
in the marker grammar (docs/circle-identity.md), and a card history is
reporting a fact, not nudging you. Retires the ASCII "✓$" #13 complained of. */
.status-enclose-mark { font-weight: 700; font-size: 0.78rem; color: var(--value); }
/* The rest of the row — opens the detail. */
/* 2.75rem is 44pt — Apple's minimum tap target, and the classic single-line table
row. The row took its height from this padding alone and measured 36pt, which
is short as a target and read visibly shorter than People's and Cards' tiles.
min-height rather than more padding: it states 44pt as the intent instead of
encoding it as arithmetic that only holds while the occasion icon is 20px.
It is NOT gated on @media (pointer: fine) like .sh-glyph-btn is. That gate is
for chrome, where 44pt is wasted space a mouse never needs; a row's height is
content rhythm, and the complaint it answers — too dense beside the tile views
— is just as true on the desktop. */
.occ-select {
flex: 1;
min-width: 0;
min-height: 2.75rem;
display: flex;
align-items: center;
gap: 0.55rem;
text-align: left;
background: transparent;
border: none;
padding: 0.5rem 0.4rem 0.5rem 0.1rem;
cursor: pointer;
color: inherit;
}
/* Terminal states read as crossed off: struck name, dimmed row. */
.occ-row.is-done .occ-select, .occ-row.is-skipped .occ-select { opacity: 0.55; }
.occ-row.is-done .occ-name, .occ-row.is-skipped .occ-name { text-decoration: line-through; }
/* The RECORD region. Above the current month the timeline stops being a working
list and becomes a log, and every row in it steps down one colour — the same
move, and the same token pair, the archived People section uses.
Two things are deliberate here:
- It targets .occ-name, not the .occ-names wrapper. .occ-name declares its own
`color: var(--text)` below, and a direct declaration beats an inherited one,
so a rule aimed at the wrapper silently dims only the day number.
- It SUPPRESSES the terminal alpha above rather than sitting alongside it.
"Crossed off" is a working-list idea; inside a log where everything already
happened, dimming the completed rows says nothing and merely compounds —
alpha multiplies the token, so a sent row went faint enough on the light
palettes to read as broken, which is the fault the archived rows record.
The strikethrough stays, so sent and skipped are still told apart. */
.occ-row.is-past .occ-name { color: var(--text-muted); }
.occ-row.is-past .occ-day { color: var(--text-faint); }
.occ-row.is-past.is-done .occ-select,
.occ-row.is-past.is-skipped .occ-select { opacity: 1; }
/* The coin leaves the accent family in here, and it is the ONLY marker that does.
The region dims what describes this occurrence and leaves what describes the
occasion, which is why the card-style candle, the circle glyph and the milestone
ordinal are all still at full strength two lines above — those are facts about
the occasion, true whichever year you are looking at.
The coin's flag lives on the event too, so it is not the data's location that
separates it: mint does not encode identity, it encodes ACTIONABILITY. It is the
"nudge you can act on" class in the trailing-slot grammar, picked as mint
precisely so an actionable coin would not be read as one of the identity marks
beside it. A log has nothing to act on, so the mint is what is wrong here — but
the marker stays, because a past row carrying the flag and marked sent is the
only evidence that a cheque went in. Suppressing it outright (the stash spare's
treatment) was built and rejected for exactly that reason.
--text-faint, not --text-muted: muted is the ink the row's own NAME wears, so a
coin wearing it comes out as loud as the thing it annotates. Faint is the tier
the day number and the plain ages already sit in, which is where a marker
belongs. A pass at muted shipped briefly and came back — see Themes → Contrast
for why the reasoning behind it did not hold. */
.occ-row.is-past .occ-coin {
background: color-mix(in srgb, var(--text-faint) 16%, transparent);
color: var(--text-faint);
}
/* An unlogged past occurrence draws no leading control — the slot holds its
width so the day column stays aligned, and nothing more. It is a span, not a
disabled button: there is no action here to disable. */
.occ-status--empty { cursor: default; }
.occ-day {
flex-shrink: 0;
width: 1.6rem;
text-align: right;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.occ-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.55rem; }
.occ-names { min-width: 0; font-size: 0.98rem; }
/* Occasion icon carries the card-style colour (the paper list's ink colours):
birthdays tint rose / teal; anniversaries and remembrances stay cream. */
.occ-glyph { flex-shrink: 0; display: flex; color: var(--style-neutral); }
.occ-glyph.occ-ic--fem { color: var(--style-fem); }
.occ-glyph.occ-ic--masc { color: var(--style-masc); }
/* Occasion icons (candle / rings / feather). Size is declared once as --icon-px
and the stroke derived from it — see --icon-weight in the token block. */
.occ-ic {
--icon-px: 20;
width: calc(var(--icon-px) * 1px);
height: calc(var(--icon-px) * 1px);
display: block;
fill: none;
stroke: currentColor;
stroke-width: var(--icon-weight);
stroke-linecap: round;
stroke-linejoin: round;
}
/* vector-effect isn't inherited, so it goes on the drawn shapes, not the