/* ==========================================================================
RITE Email Triage — "Morning Edition"
Editorial, paper-and-ink aesthetic. Display: Fraunces. Body: IBM Plex Sans.
========================================================================== */
:root {
--paper: #f6f1e7;
--paper-2: #ece8de;
--paper-3: #e6dcc9;
/* The two raised stocks the sheet prints on, spelled as tokens so a theme can move them:
--paper-raised is the near-white a card/editor sits on (--paper a touch whitened and
warmed), --paper-bright the brighter still of a focused field or hovered tool button.
Morning Edition keeps the literals every one of these rules has always carried; Pressroom
Grey re-points all of them below, which is why no surface rule hard-codes white anymore. */
--paper-raised: #fffdf8;
--paper-bright: #ffffff;
/* Shared control/field stock, spelled as tokens so BOTH editions drive them from one set of
surface rules (the base .btn/.btn-ghost/.segmented/input/.settings-group/.check rules below
spend these, not a literal). Morning prints white on cream - the same crisp chip Pressroom
does on grey, so a control or field always reads as its own raised box off the paper behind
it. Pressroom re-points the same tokens below. */
--field-bg: #ffffff; /* inputs, selects, textareas, the date picker, admin fields */
--segmented-bg: #ffffff; /* the pill groups: Pending/Sent/Rejected, Today/Tomorrow, Day/Week/Month */
--btn-neutral-bg: #ffffff; /* the default .btn and the quiet .btn-ghost, as raised white chips */
--check-bg: #ffffff; /* the mark-done circle's rest stock (hover/checked stay moss) */
--btn-neutral-ink: var(--ink);
--btn-neutral-border: var(--rule);
--ink: #1f1d1a;
--ink-2: #4a453e;
--ink-3: #857d72;
--rule: rgba(31, 29, 26, 0.16);
--vermilion: #b4331e;
--vermilion-soft: rgba(180, 51, 30, 0.1);
--vermilion-strong: #9c2b18; /* btn-primary hover - a deepened pull of the same red */
--amber: #d98e2b;
--amber-soft: rgba(217, 142, 43, 0.14);
--amber-ink: #9a5f12; /* readable ink on an --amber-soft wash, spelled once (was a fallback) */
--slate: #3f5e7a;
--slate-soft: rgba(63, 94, 122, 0.12);
--moss: #4f6f4a;
--moss-soft: rgba(79, 111, 74, 0.14);
--on-accent: #ffffff; /* text sitting on a filled --vermilion / --moss chip */
/* Ink-family washes the rules used to hard-code as rgba(31, 29, 26, a): the scrim behind
modals and the dropdown sheet, the quiet hovers, the stronger of the drawer's
quiet/surf ledger chips, the idle thumb outline, and the dropdown's drop. Tokens so the
pressroom theme can darken them with the ink instead of chasing every rule. */
--scrim: rgba(31, 29, 26, 0.35);
--hover-ink-soft: rgba(31, 29, 26, 0.12);
--hover-ink-faint: rgba(31, 29, 26, 0.1);
--hover-ink-strong: rgba(31, 29, 26, 0.18);
--outline-ink-strong: rgba(31, 29, 26, 0.34);
--row-hover: rgba(255, 253, 248, 0.7);
--card-hover: rgba(255, 253, 248, 0.6);
--hover-moss-faint: rgba(79, 111, 74, 0.18);
--hover-moss-soft: rgba(79, 111, 74, 0.24);
--hover-moss-strong: rgba(79, 111, 74, 0.3);
--outline-moss-mid: rgba(79, 111, 74, 0.4);
--outline-moss-strong: rgba(79, 111, 74, 0.55);
--outline-amber-mid: rgba(217, 142, 43, 0.4);
--spin-track: rgba(255, 255, 255, 0.35);
--spin-head: #ffffff;
/* The two corner glows the body gradient washes over the paper, and the paper's own
underlay - variables so a theme re-tints the ambience without touching the body rule. */
--glow-amber: rgba(217, 142, 43, 0.12);
--glow-slate: rgba(63, 94, 122, 0.12);
/* The image-loading shimmer's three stops, and the grain sheet's ink (an SVG data-URI
filter matrix can read var() - the turbulence noise underneath is theme-neutral). */
--shimmer-a: #f0ece4;
--shimmer-b: #faf7f1;
--grain-ink: #000000;
/* --edge-glow is whichever corner glow sits nearer - warm amber over the cream sheet,
cool slate over the pressroom grey - so the masthead bar and the drawer cast the
ambience of the paper they stand on. */
--edge-glow: var(--glow-amber);
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", Consolas, monospace;
--radius: 4px;
--shadow: 0 1px 0 rgba(31, 29, 26, 0.06), 0 18px 40px -24px rgba(31, 29, 26, 0.45);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Schedule grid geometry - one place so the month's gutter, its cells and the week's cells
cannot drift apart, and so the phone breakpoint can resize all three at once. The gutter is
a real track and the gap beside it is one too, so the seven day columns are never narrowed
by the week number. */
--month-gutter: 34px; /* fits a two-digit week number at the 10px mono size */
--month-gutter-gap: 6px;
--month-cell-h: 96px;
--week-cell-h: 190px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(1200px 600px at 10% -10%, var(--glow-amber), transparent 60%),
radial-gradient(900px 500px at 110% 10%, var(--glow-slate), transparent 55%),
var(--paper-2);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* ==========================================================================
Pressroom Grey - the second edition (html[data-theme="afterdark"])
The same newspaper pressed on cooler stock: recycled pressroom grey where Morning
Edition is cream, graphite where it is warm ink, and Playfair Display for the masthead
instead of Fraunces. The four accent inks - vermilion, amber, slate, moss - are the
paper's colour language and do not move; their translucent washes are re-mixed at the
same opacities over the new paper, because a cream-tinted or graphite-tinted wash reads
wrong on grey stock.
Every rule in this sheet draws from the variables above (surface whites, scrim/hover
washes, the body glows and the grain sheet's ink are all tokens since this theme
landed), so re-pointing them here restocks the whole interface - cards, chips, pills,
the drawer, the modal, the schedule grid - without touching a single rule below. The
block sits after :root and after body, so it wins both their cascades on equal
specificity and the theme only ever changes what a variable resolves to - any literal
a rule still hard-codes keeps its value in both editions, by the same law that makes
the login page (auth.css, morning's literals) immune to this block.
--font-display carries Fraunces as its second family: the webfont link in app.html
loads both faces, so the swap is instant, and the fallback is what a Pressroom user
sees for the first frame if the network is slow - Fraunces then, Playfair a moment
later, never the cream edition's paper.
========================================================================== */
html[data-theme="afterdark"] {
/* Recycled newsprint: greys with the faintest warm lean, so it still reads as paper. */
--paper: #E5E5E2;
--paper-2: #ECECE8;
--paper-3: #d3d0c9;
/* Cards read ABOVE the body here, which is the reverse of the stock order the rest of the
sheet assumes: a --paper-raised surface is meant to sit a step above its page, and on this
pressroom grey the page (--paper-2, #ECECE8) is already the lightest thing on screen -
every "raised" surface (the settings cards, the editor, the day chips, the email panel)
was printing BELOW it, which is the "everything is the same grey" complaint. So the ramp
flips: the body keeps --paper-2 and the raised stock lifts to a clear bright step (the
L* gap is +6.4). --paper stays the darker top bar / sheet of menus, so top bar / body /
card remain three distinct steps, just in the other direction. */
--paper-raised: #f5f5f3;
/* Hover/focus stock - one step below the raised card, brighter than the page. */
--paper-bright: #ededea;
/* Graphite ink - deepened from the washed-out originals so secondary/muted text reads clearly
on the cool grey stock (the contrast complaint). */
--ink: #16181a;
--ink-2: #3a3d41;
--ink-3: #5f6368;
--rule: rgba(22, 24, 26, 0.28);
--shadow: 0 1px 0 rgba(22, 24, 26, 0.1), 0 20px 46px -24px rgba(22, 24, 26, 0.55);
/* The accents stay; their washes are re-mixed over grey paper at the same strengths. */
--vermilion-soft: rgba(178, 49, 29, 0.1);
--vermilion-strong: #992a19;
--amber: #cf862a;
--amber-soft: rgba(207, 134, 42, 0.16);
--amber-ink: #8a6114;
--slate: #3f5d78;
--slate-soft: rgba(63, 93, 120, 0.13);
--moss: #4e6d49;
--moss-soft: rgba(78, 109, 73, 0.14);
/* The ink washes follow the graphite ink; the raised hovers follow the new stocks. */
--scrim: rgba(24, 26, 28, 0.42);
--hover-ink-soft: rgba(30, 32, 34, 0.12);
--hover-ink-faint: rgba(30, 32, 34, 0.1);
--hover-ink-strong: rgba(30, 32, 34, 0.18);
--outline-ink-strong: rgba(30, 32, 34, 0.34);
--row-hover: rgba(255, 255, 255, 0.5);
--card-hover: rgba(255, 255, 255, 0.4);
--hover-moss-faint: rgba(78, 109, 73, 0.18);
--hover-moss-soft: rgba(78, 109, 73, 0.24);
--hover-moss-strong: rgba(78, 109, 73, 0.3);
--outline-moss-mid: rgba(78, 109, 73, 0.42);
--outline-moss-strong: rgba(78, 109, 73, 0.55);
--outline-amber-mid: rgba(207, 134, 42, 0.42);
/* The corner glows cool to match the stock; the grain sheet and the spinner keep their
job, only printing in the new ink. */
--glow-amber: rgba(207, 134, 42, 0.1);
--glow-slate: rgba(63, 93, 120, 0.13);
--shimmer-a: #dbdad6;
--shimmer-b: #efefec;
--grain-ink: #14161a;
--edge-glow: var(--glow-slate);
/* The chart panel. Pressroom used to print the charts as a dark graphite panel with light text,
the one dark surface on a near-white page. It now matches the cards: the panel takes the card
stock (--paper-raised, #f5f5f3) so a chart reads as another lifted card, and the ink/tick flip
to the dark sheet ink so titles and ticks stay legible on that light fill. The grid drops to a
faint dark ruling. charts.py reads these four literally so the PNG can't drift from the sheet. */
--panel-chart: #f5f5f3;
--panel-chart-ink: #000000;
--panel-chart-tick: #000000;
--panel-chart-grid: none;
/* Buttons print on WHITE stock here. Morning's neutral button is a transparent ghost (it sits
on cream) and its default .btn is graphite-filled; on the grey Pressroom sheet both nearly
vanish into the page - the "everything is the same colour" complaint. Here every neutral
control (the default .btn - e.g. Download Brief - plus the btn-ghost behind Dismiss, the row
tick, Move and Close) becomes a solid white chip with graphite text and a crisp --rule border,
so each control reads as its own raised chip off the grey. The chip is pure WHITE, the one
value that stands a clear margin (10+ luminance points) off EVERY surface it can land on -
the body (--paper-2), the topbar (--paper), and now the lifted cards/editor (--paper-raised),
all of which the "lighter than the background" request pushed up close to white. --paper-bright
and even a near-white like #fbfbfa fail that margin against the lifted card, re-creating the
"everything is the same colour" complaint this block exists to answer. Done / +Add
(btn-primary) stay vermilion and Reject / Decline (btn-critical) keep the danger-red wash, so
a row reads as white chips + two reds. */
--btn-neutral-bg: #ffffff;
/* The mark-done circle (.check) is its own house control, not a .btn, so the white-chip rule
below never reaches it: it rests transparent (base .check) and nearly vanishes into the grey
stock exactly like the ghost buttons did. It inherits the chip stock here; its hover and the
is-checked fill stay moss - only the rest state lifts. */
--check-bg: var(--btn-neutral-bg);
/* Segmented pills (Drafts Pending/Sent/Rejected, Calendar Today/Tomorrow + Day/Week/Month,
the Settings switches) rest on --paper-2 - a grey a step off the grey page, so they sink
into it exactly like the ghost buttons did. On Pressroom they print as white chips with
graphite labels; the chosen segment keeps the graphite fill and reversed ink (base
.segmented button.is-active is later and higher specificity, untouched by this). */
--segmented-bg: var(--btn-neutral-bg);
/* Bare form fields (search, priority/sort/kind selects, the date picker, admin inputs, the
timezone combobox) print on the same white as the controls - a field the user types into is
the single surface they most need to read as an active well, and Pressroom's whole complaint
was that these sat on the grey and vanished. A hair under pure white would tie the card it
sits on (the cards lifted too), so the field is white and the card stays --paper-raised just
beneath it - field, card, page read as three separate steps. */
--field-bg: #ffffff;
--btn-neutral-ink: var(--ink);
--btn-neutral-border: var(--rule);
--font-display: "Playfair Display", "Fraunces", Georgia, "Times New Roman", serif;
/* Both editions are light-paper; telling the browser so keeps native scrollbars, form
controls and autofill painted for a light sheet whatever the OS preference is. */
color-scheme: light;
}
/* Pressroom buttons print on white. The default .btn (Download Brief) is graphite-filled in the
base sheet; btn-ghost (Dismiss, the row tick, Move, Close) is transparent there. On the grey
Pressroom page both sink into the stock, so here they resolve to one crisp white chip - solid
--btn-neutral-bg (a near-white literal, brighter than every grey stock), graphite ink, a hairline
--rule - and hover only firms that border. The :not()
guards are load-bearing: a bare ".btn" clause would tie on specificity with ".btn-primary"/
".btn-critical" below it and, sitting later in the sheet, paint every button white - flattening
the very row this is meant to differentiate. So the semantic reds fall straight through to their
base rules: Done / +Add stay vermilion (--btn-add), Reject / Decline stay danger-red
(--btn-reject). btn-ms is deliberately excluded too: it is already a bright chip in both
editions (below the button family at 0,1,0, and it pays --paper-bright), so letting the
guard-less clause reach it would silently re-point the Microsoft button's stock. */
html[data-theme="afterdark"] .btn:not(.btn-primary):not(.btn-critical):not(.btn-ms),
html[data-theme="afterdark"] .btn-ghost:not(:hover) {
background: var(--btn-neutral-bg);
color: var(--btn-neutral-ink);
border-color: var(--btn-neutral-border);
}
/* Hover stays Morning's behaviour plus this sheet's: the neutral chip only firms its border,
and the ghost keeps resting transparent (0,3,0 here vs the base .btn-ghost's 0,1,0), so the
neutral chip and the quiet ghost stay two different controls rather than one flat look. */
html[data-theme="afterdark"] .btn:not(.btn-primary):not(.btn-critical):not(.btn-ms):hover,
html[data-theme="afterdark"] .btn-ghost:hover { border-color: var(--ink); }
/* The two control groups the base sheet leaves flat on this stock get the chip treatment too:
the segmented pills and the bare form fields. Both own a source-LATER rule (the base
.segmented shorthand, the base input/select/textarea rule) that restates the property, so a
re-pointed token alone would not reach them and this has to be rules of its own. Specificity
does the rest: each clause below out-weighs the base rule it answers, so the outcome does not
depend on where in the sheet either one sits. Both keep their borders, so each still reads as
its own box - chips at --segmented-bg, fields a step under at --field-bg. The chosen segment
keeps the graphite fill and reversed ink (base .segmented button.is-active, 0,2,1). */
html[data-theme="afterdark"] .segmented { background: var(--segmented-bg); }
html[data-theme="afterdark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="afterdark"] select,
html[data-theme="afterdark"] textarea {
background: var(--field-bg);
}
/* The history "Show / All events" select restates the stock from its own class rule (0,1,1),
which out-weighs the bare element rules above - so it needs its own clause. */
html[data-theme="afterdark"] .history-filter select { background: var(--field-bg); }
/* The mark-done circle joins the chip stock at rest (see --check-bg above), and only at rest.
The catch the browser taught us: "html[data-theme=afterdark] .check" scores 0,2,0 (the
attribute selector counts as a class), and the base sheet's moss ".check:hover,
.check.is-checked" also scores 0,2,0 (two classes) - a TIE. A tie is broken by source order,
and this block sits far earlier than the base .check rules, so on its own the rest lift would
lose the tie and never paint... except it does not, because it must not win the checked state.
So the checked/hover state gets stated again HERE, at 0,3,0 (.check.is-checked under the
theme attribute), strictly above the 0,2,0 rest lift and above the base rule's 0,2,0 - the
moss fill and reversed tick land no matter where the base rule sits or which way the tie
falls. Only a circle that is neither done nor hovered prints the chip stock. */
html[data-theme="afterdark"] .check { background: var(--check-bg); }
html[data-theme="afterdark"] .check:hover,
html[data-theme="afterdark"] .check.is-checked {
background: var(--moss);
border-color: var(--moss);
color: var(--on-accent);
}
/* The settings / AI Analysis cards. Their base rule (much later, and equally specific) paints
--paper - the DARKER base stock the morning sheet gets away with because its cards carry a
shadow. Pressroom's cards get the same treatment as every other raised surface (the --paper-
raised flip above), which is the "lighter than the background" ask; the hairline and shadow
stay, so the card reads as a card on both counts. */
html[data-theme="afterdark"] .settings-group { background: var(--paper-raised); }
/* .day-chip (the calendar rail) spends --paper-raised but owns a source-later rule restating
the property, so it needs an explicit clause to take the flip. */
html[data-theme="afterdark"] .day-chip { background: var(--paper-raised); }
/* The action-group tiles in Pressroom: match the chart panel (--panel-chart, #f5f5f3 == this
edition's --paper-raised), the surface the user prefers. The base rule spends --paper (#E5E5E2),
which reads darker than the charts; here the tiles lift to the same lighter card stock so desk
cards and charts share one colour. Morning is untouched (its tiles stay on --paper). */
html[data-theme="afterdark"] .action-group { background: var(--paper-raised); }
/* The draft / signature rich-text editor (.rte). Its editable surface (.rte-editable) is
transparent, so whatever the .rte box paints IS the page you type onto - and the user asked
for that page to be WHITE, the one surface they most read and write. The base .rte rule
(source-later, equally specific) spends --paper-raised, the card grey, which reads a touch
dim; here the editor takes the field white instead, matching every other input. The
.rte-toolbar band stays --paper-2 (a grey strip over the white body), which is the point. */
html[data-theme="afterdark"] .rte { background: var(--field-bg); }
/* The blanket field lift must not reach the recipient entry, which is chrome rather than a
field: it sits inside a chip row with a dashed border that only appears when it is focused,
and a white box there would break the row apart. The clause is deliberately 0,3,1 because the
lift above ranks 0,3,0 for an input and the cascade is ordered by (origin, importance,
specificity, order) - a plain ".rcpt-input" guard (0,2,0) loses to it, and so does a tied
0,3,0 written earlier; only a strictly higher weight wins. The entry's own focus rule is
0,2,0 and does NOT outrank the lift, so the entry prints --field-bg once focused - one step
under the --paper-bright Morning shows it, and the slate ring plus dashed border still say
"active" unmistakably.
(The legacy .draft-body textarea rule is NOT defended here: app.js now always renders a .rte
inside .draft-body, so that base rule matches nothing and needs no afterdark guard.) */
html[data-theme="afterdark"] input.rcpt-input[type="text"] { background: transparent; }
/* "Add to queue" (Admin → People) rides at the end of a flex row beside the email input it
submits. The control's base padding is generous for a -sm button, and with the input set to
flex: 1 1 auto it would squeeze the label into two lines; a no-wrap button in a shrinkable
flex row never wraps however narrow it gets (the box just overflows), so the label holds one
line and the input gives the room up instead. */
.person-add .btn { white-space: nowrap; flex: 0 0 auto; }
html:not([data-theme]), html[data-theme="morning"] { color-scheme: light; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.grain {
display: none; /* No full-page blend overlay: its multiply/normal compositing renders a
dark-green cast on some GPUs/colour pipelines (it never tinted production).
The paper reads as flat --paper, exactly like production. */
position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
/* The grain sheet's ink rides --grain-ink: the data-URI matrix above multiplies this
flood into the turbulence's alpha, so a theme printing in graphite (Pressroom's
#14161a) shifts the paper's noise a hair cooler without a second image. */
background-color: var(--grain-ink);
}
/* ---------- Typography helpers ---------- */
.eyebrow {
margin: 0 0 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.muted { color: var(--ink-3); }
.link {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--slate); text-decoration: underline; text-underline-offset: 3px; font-size: 13px;
}
.link:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; }
h2 { font-size: 20px; }
h3 { font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 500; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }
/* ---------- Reveal animation ---------- */
.reveal { animation: rise 0.7s var(--ease) both; }
.reveal-delay { animation-delay: 0.12s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--btn-neutral-border);
background: var(--btn-neutral-bg); color: var(--btn-neutral-ink); font-weight: 500; font-size: 14px;
cursor: pointer; text-decoration: none; position: relative;
transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--ink); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.btn-primary { background: var(--vermilion); border-color: var(--vermilion); color: var(--on-accent); }
.btn-primary:hover { background: var(--vermilion-strong); color: var(--on-accent); }
.btn-ghost { background: var(--btn-neutral-bg); color: var(--btn-neutral-ink); border-color: var(--btn-neutral-border); }
.btn-ghost:hover { border-color: var(--ink); }
/* btn-critical is NOT a solid red button: at rest it is a light danger wash (--vermilion-soft)
under red ink, which only reads because the fill is pale - white text there would vanish. It
turns solid vermilion only on hover, and that hover already flips its ink to --paper (white),
so the white-on-red legibility is already handled. Only btn-primary is a solid fill at rest and
needs its white ink spelled out here (it would otherwise inherit the graphite .btn colour). */
.btn-critical { background: var(--vermilion-soft); color: var(--vermilion); border-color: transparent; }
.btn-critical:hover { background: var(--vermilion); color: var(--on-accent); }
.btn-ms { background: var(--paper-bright); color: var(--ink); border-color: var(--rule); }
.btn-ms:hover { border-color: var(--ink); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
#setup-prompt .btn, #setup-detail .btn-primary { width: 100%; }
#cancel-setup { margin-top: 22px; }
.btn-spinner {
width: 14px; height: 14px; border-radius: 50%; display: none;
border: 2px solid var(--spin-track); border-top-color: var(--spin-head); animation: spin 0.8s linear infinite;
}
.btn.is-busy .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.02em; }
input, select, textarea {
font: inherit; color: var(--ink); background: var(--field-bg);
border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px var(--slate-soft); }
textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.inline-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 10px 0 16px; }
.inline-form select { width: auto; }
/* ---------- Alerts / banners / toast ---------- */
.alert { padding: 10px 12px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; }
.alert-error { background: var(--vermilion-soft); color: var(--vermilion); border: 1px solid rgba(180, 51, 30, 0.3); }
.banner {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px; font-size: 14px;
}
.banner-warn { background: var(--amber-soft); border: 1px solid var(--outline-amber-mid); }
/* Centering is layout-based (a full-width fixed strip + centered pill) rather than the classic
left:50%/translateX(-50%), so the pill shares app-main's centred column and can never sit at a
different centre than the content when the vertical scrollbar appears or disappears (paired with
scrollbar-gutter: stable on html). The strip is full width but click-through (pointer-events:
none); only the pill takes pointer events. The pill keeps the "rise" entrance - its transform
animation is on the pill, not the strip, so it never fights the horizontal centring. */
.toast {
position: fixed; left: 0; right: 0; bottom: 28px; z-index: 60;
display: flex; justify-content: center; pointer-events: none;
}
.toast-inner {
pointer-events: auto;
background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: var(--radius);
font-size: 14px; box-shadow: var(--shadow);
animation: rise 0.35s var(--ease);
}
.toast.is-error .toast-inner { background: var(--vermilion); }
/* ---------- Build stamp ---------- */
/* Fixed bottom-right chip: a small card (the same paper/shadow/rule language as every other
surface), not text painted over the page. Below the drawer/toast layer, and pointer-events
none so it is context that never steals clicks. The grain overlay sits at z-index 0 with
multiply blending, so this needs a solid background to read cleanly above it. */
.app-version {
position: fixed; right: 14px; bottom: 10px; z-index: 30; pointer-events: none;
display: inline-flex; align-items: baseline; gap: 5px;
padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px;
background: var(--paper-raised); box-shadow: var(--shadow);
font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.app-version-label {
font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--ink-3);
}
.app-version-value {
font-family: var(--font-mono); font-size: 11px; color: var(--ink);
font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
/* ---------- Login page ---------- */
.login-layout {
position: relative; z-index: 1;
min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 480px);
gap: 48px; padding: clamp(24px, 5vw, 72px); align-items: center; max-width: 1280px; margin: 0 auto;
}
.masthead-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.masthead-title {
font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 7vw, 96px);
line-height: 0.95; letter-spacing: -0.03em; margin: 18px 0 22px;
font-variation-settings: "opsz" 144;
}
.masthead-title em { font-style: italic; font-weight: 600; color: var(--vermilion); }
.masthead-standfirst { max-width: 52ch; font-size: 17px; color: var(--ink-2); margin: 0; }
.hero-features { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--rule); }
.hero-features li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.hero-features .feature-num { font-family: var(--font-mono); color: var(--vermilion); font-size: 12px; min-width: 28px; }
.hero-features strong { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.hero-features span:not(.feature-num) { color: var(--ink-3); font-size: 14px; }
.login-card {
background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); position: relative;
}
.login-card::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--vermilion); border-radius: 6px 0 0 6px;
}
.login-card-inner { padding: 36px 36px 28px; }
.card-title { font-size: 30px; margin-bottom: 20px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--ink-3); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.btn-ms { width: 100%; }
.form .btn { width: 100%; margin-top: 4px; }
.hint { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.fineprint { margin: 22px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
/* ---------- Login page: instance-lock panel ---------- */
/* The lock replaces the sign-in FORM, not the page. index.html carries both panels in
the right-hand card; the server (app/main.py's index route) adds page-login-locked to
while the license is locked, and these rules swap one for the other. The left
hero stays: the login screen keeps its shape, and the lock reads as a state of it
rather than the old full-screen error page.
[hidden] is spelled out because several rules here set display on their class (a UA
[hidden] rule has no specificity and loses to all of them). */
.login-lock { display: none; }
.login-lock .card-title { color: var(--vermilion); }
.login-lock-copy { color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; font-size: 15px; }
.page-login-locked #login-signin, .page-login-locked #login-signin [hidden] { display: none; }
.page-login-locked .login-lock { display: block; }
/* ---------- App shell ---------- */
.page-app .btn-ms { width: auto; }
.topbar {
position: sticky; top: 0; z-index: 20;
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
padding: 14px clamp(16px, 3vw, 40px); background: var(--paper); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rule);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
/* Envelope mark (app/static/img/logo-mark.svg) + the text lockup, restoring the full
"RITE Email Triage" wordmark beside the mark. The spans reuse the lockup's typographic
treatment (see app/static/img/logo.svg); the old pre-lockup block element stays retired. */
.brand-logo { display: block; height: 26px; width: auto; }
.brand-word {
font-family: var(--font-display); font-size: 22px; line-height: 1;
letter-spacing: -0.01em; white-space: nowrap;
}
.brand-word .w-rite { font-weight: 700; color: var(--ink); }
.brand-word .w-email { font-weight: 400; color: var(--ink-2); }
.brand-word .w-triage { font-weight: 500; font-style: italic; color: var(--vermilion); }
/* The brand cell shares the top bar grid with centred nav; below 600px the word is dropped
(consistent with the nav-wrap breakpoint) so the mark alone never collides with the nav. */
@media (max-width: 600px) { .brand-word { display: none; } }
.topbar-nav { display: flex; gap: 4px; justify-content: center; }
.nav-link {
background: none; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px;
color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s, color 0.2s;
}
.nav-link:hover { background: var(--paper-2); color: var(--ink); }
.nav-link.is-active { background: var(--ink); color: var(--paper); }
.pill { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--paper-3); color: var(--ink); }
.pill-critical { background: var(--vermilion); color: var(--on-accent); }
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-graph { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.user-graph.is-connected { background: var(--moss); box-shadow: 0 0 0 3px var(--moss-soft); }
/* ---------- User menu (name -> profile settings / sign out) ---------- */
.user-menu-wrap { position: relative; }
.user-menu-btn {
display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
font: inherit; color: var(--ink); padding: 4px 6px; border-radius: var(--radius);
}
.user-menu-btn:hover { background: var(--paper-3); }
/* The mailbox dot sits left of the name with a little extra air before it (6px gap + 6px). */
.user-graph { margin-right: 6px; }
.user-menu-caret { font-size: 10px; color: var(--ink-3); }
.user-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 210px;
background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.user-menu-email {
padding: 6px 8px 8px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--rule);
margin-bottom: 4px; word-break: break-all;
}
.user-menu-item {
display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
font: inherit; color: var(--ink); padding: 8px; border-radius: calc(var(--radius) / 2);
}
.user-menu-item:hover { background: var(--paper-3); }
/* ---------- Edition picker (topbar -> choose the theme) ----------
Lives just left of the name and borrows the user menu's whole vocabulary - ghost trigger,
bordered paper card, ink-hover rows - so two dropdowns in one corner read as one family. The
trigger carries the edition's own colour in the swatch, so the button shows what it does before
it is opened. */
.edition-menu-wrap { position: relative; }
.edition-btn {
display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
font: inherit; color: var(--ink); padding: 4px 8px; border-radius: var(--radius); font-size: 13px;
}
.edition-btn:hover { background: var(--paper-3); }
.edition-swatch {
width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
background: var(--ink); border: 1px solid var(--rule);
box-shadow: inset 0 0 0 2px var(--paper);
}
.edition-caret { font-size: 10px; color: var(--ink-3); }
.edition-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 210px;
background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.edition-menu-head {
padding: 6px 8px 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-3); border-bottom: 1px solid var(--rule); margin-bottom: 4px;
font-family: var(--font-mono);
}
.edition-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
text-align: left; background: none; border: none; cursor: pointer; font: inherit; color: var(--ink);
padding: 8px; border-radius: calc(var(--radius) / 2);
}
.edition-item:hover { background: var(--paper-3); }
.edition-item-check { visibility: hidden; color: var(--vermilion); }
.edition-item.is-active { font-weight: 600; }
.edition-item.is-active .edition-item-check { visibility: visible; }
/* ---------- Timezone combobox (searchable, server-backed zone list) ---------- */
.tz-combo { position: relative; }
.tz-combo-list {
position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 220px; overflow-y: auto;
background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
box-shadow: var(--shadow); margin-top: 4px;
}
.tz-combo-option {
display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); padding: 7px 10px;
}
.tz-combo-option:hover, .tz-combo-option.is-active { background: var(--paper-3); }
.tz-combo-option-tz { font-variant-numeric: tabular-nums; }
.tz-combo-option-label { color: var(--ink-3); font-size: 12px; }
.tz-combo-empty { padding: 8px 10px; font-size: 13px; color: var(--ink-3); }
.tz-combo-hint { font-size: 12px; margin-top: 5px; }
/* A settings hint emptied of its copy (removed explanations leave an empty
) should take up no
space - otherwise its margin-top reads as a stray gap. :empty also lets the timezone note vanish
when a timezone is already set (app.js clears it), matching the profile table's behaviour. */
.settings-group .tz-combo-hint:empty { display: none; }
.tz-combo-hint.is-error { color: var(--vermilion); }
.app-main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 36px clamp(16px, 3vw, 40px) 80px; }
.view { display: none; }
.view.is-active { display: block; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.toolbar { display: flex; gap: 10px; align-items: center; }
.toolbar input { width: 260px; }
.toolbar select { width: auto; }
.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--segmented-bg); }
.segmented button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.segmented button.is-active { background: var(--ink); color: var(--paper); }
/* ---------- Today / brief ---------- */
.brief-header { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 26px; }
.brief-title { font-size: clamp(34px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.025em; }
.brief-title span { font-style: italic; font-weight: 600; }
.brief-summary { max-width: 70ch; font-size: 17px; color: var(--ink-2); margin: 14px 0 0; font-family: var(--font-display); line-height: 1.5; }
.last-triaged { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-3); margin: 10px 0 0; }
/* ---------- Profile modal: signature section ---------- */
.sig-preview { border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; max-height: 220px; overflow: auto; background: var(--field-bg); font-size: 13px; }
.sig-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sig-toggle-row input[type="checkbox"] { width: auto; margin: 0; }
.sig-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sig-actions .tz-combo-hint { flex: 1; min-width: 0; }
.sig-btn-row { display: flex; gap: 8px; }
/* ---------- WYSIWYG rich-text editor (signature + draft reply body) ---------- */
.rte { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field-bg); overflow: hidden; }
.rte-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px;
border-bottom: 1px solid var(--rule); background: var(--paper-2, #f3ede2);
}
.rte-btn {
width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer;
border-radius: 6px; font-size: 13px; font-family: var(--font-body);
}
.rte-btn:hover { background: var(--paper-bright); border-color: var(--rule); }
.rte-btn:disabled { opacity: 0.45; cursor: default; }
.rte-select { width: auto; padding: 3px 6px; font-size: 12px; border-radius: 6px; }
.rte-color { width: 30px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.rte-sep { width: 1px; height: 20px; background: var(--rule); margin: 0 3px; }
.rte-btn-row { display: inline-flex; gap: 2px; }
.rte-editable {
padding: 10px 12px; font-size: 14px; line-height: 1.6; overflow-y: auto; position: relative;
}
.rte-editable:focus { outline: none; }
.rte-editable:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
.rte-editable img { max-width: 100%; height: auto; }
.rte-editable[contenteditable="false"] { background: var(--paper-2, #f3ede2); color: var(--ink-2); }
.rte-source {
width: 100%; min-height: 140px; border: none; border-radius: 0; resize: vertical;
font-family: var(--font-mono); font-size: 12px;
}
.rte-source:focus { outline: none; box-shadow: none; border: none; }
/* ---------- Profile modal: reply font section ---------- */
.reply-font-row { display: flex; gap: 8px; }
.reply-font-row select { flex: 1; min-width: 0; }
/* The font-size input is a plain text field (type=text + inputMode=numeric), so it has
no native spinner at all - nothing to fight over space with the "pt" suffix. */
.reply-font-row .size-field { position: relative; flex: none; width: 90px; }
.reply-font-row .size-field input { padding-right: 24px; }
/* Kept as a safety net in case a native number input is ever reintroduced here (e.g.
a browser that ignores type=text's lack of a spinner). */
.reply-font-row .size-field input::-webkit-outer-spin-button,
.reply-font-row .size-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.reply-font-row .size-suffix {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
font-size: 12px; pointer-events: none;
}
.reply-font-preview {
border: 1px solid var(--paper-3); border-radius: 8px; padding: 10px 12px; background: var(--paper-bright);
color: var(--ink-2); margin-top: 2px;
}
.brief-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
/* License seat usage (Admin → People). Deliberately not the triage bar's shape or
colour: that one sweeps to mean "work is happening", and a seat count is a static
fact. Uses the same tokens so it reads as the same app. */
.seat-bar {
width: 100%; height: 6px; border-radius: 999px; background: var(--paper-3);
overflow: hidden; margin: 0 0 8px;
}
.seat-bar-fill {
height: 100%; min-width: 2%; border-radius: 999px; background: var(--moss);
transition: width 0.4s var(--ease);
}
.seat-bar-fill.is-nearly-full { background: var(--amber); }
.seat-bar-fill.is-full { background: var(--vermilion); }
/* Queue an address before its owner signs in (Admin → People). Sits under the
directory it feeds, reads as one row of the list rather than a floating form. */
.person-add {
display: flex; gap: 8px; align-items: center; margin: 12px 0 0;
}
.person-add input[type="email"] { flex: 1 1 auto; min-width: 0; }
.triage-progress { margin: 0 0 26px; animation: rise 0.3s var(--ease) both; }
.triage-progress-bar {
width: 100%; height: 6px; border-radius: 999px; background: var(--paper-3); overflow: hidden;
}
.triage-progress-fill {
height: 100%; width: 6%; min-width: 6%; border-radius: 999px; background: var(--vermilion);
transition: width 0.4s var(--ease);
}
.triage-progress.is-indeterminate .triage-progress-fill {
width: 30% !important; animation: triage-indeterminate 1.3s ease-in-out infinite;
}
@keyframes triage-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(333%); }
}
.triage-progress-text {
margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-3);
}
.stat-strip {
display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
margin-bottom: 36px;
}
.stat { padding: 18px 16px 16px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat-num { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.stat:first-child .stat-num { color: var(--vermilion); }
.stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
/* ---------- Admin: setup cards inside the settings table ---------- */
/* The Microsoft 365 connect card and the AI assistant test card are full-width rows of
#settings-table itself (see renderSettingsTable in app.js): the Microsoft 365 card sits
directly under that band's caption as its sub-header, the LLM card closes the table as a
footer. They carry the group-caption tint but NOT its uppercase-mono caption styling -
each holds a paragraph-sized body, so it brings its own plain-caps title line. */
.setting-band-row td { padding: 12px 10px 14px; }
.setting-band-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.setting-band-text { font-size: 13px; margin: 6px 0 0; }
.setting-band-row .btn { white-space: nowrap; }
/* Title + detail on the left, the card's action pinned to the right and centred against
the text block: the action belongs to the card as a whole, not to the last line of it.
The flex lives on an inner wrapper, never on the td itself: a flex CONTAINER is
blockified (display:table-cell → block), which drops the table's own width distribution
- the cell collapsed to its content (216px) and the text flexed to zero. The td keeps
its table-cell width (full span); the wrapper splits inside it, the text block flex:1
so it keeps that whole width as when stacked, and only the button is displaced into
the trailing whitespace. */
.setting-band-inner { display: flex; align-items: center; gap: 16px; }
.setting-band-inner > .setting-band-main { flex: 1 1 auto; min-width: 0; }
.setting-band-aside { flex: none; margin-left: auto; }
/* Footer card: rows above it already carry their own bottom rules, so it opens with a
top rule and closes the table instead. */
.setting-band-foot td { border-bottom: 0; border-top: 1px solid var(--rule); }
/* ---------- Microsoft 365 setup page (/microsoft-setup) ---------- */
.setup-page { max-width: 860px; }
.setup-intro { font-size: 16px; color: var(--ink-2); font-family: var(--font-display); line-height: 1.55; max-width: 70ch; margin: 0 0 18px; }
.setup-steps { margin: 28px 0 0; padding-left: 26px; display: grid; gap: 30px; counter-reset: setup-step; }
.setup-steps > li { padding-left: 6px; }
.setup-steps > li::marker { content: counter(setup-step, decimal-leading-zero) " "; counter-increment: setup-step; font-family: var(--font-mono); font-size: 13px; color: var(--vermilion); }
.setup-steps h3 { font-size: 17px; font-family: var(--font-display); text-transform: none; letter-spacing: -0.01em; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.setup-steps p { margin: 8px 0; line-height: 1.6; }
.setup-checklist { margin: 8px 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.setup-permissions-table { margin: 10px 0 14px; font-size: 13px; }
.setup-permissions-table code { font-size: 12px; }
.copy-field { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.copy-field code {
flex: 1; overflow-x: auto; white-space: nowrap; padding: 8px 10px; background: var(--paper-raised);
border: 1px solid var(--rule); border-radius: var(--radius);
}
.copy-btn.is-copied { background: var(--moss-soft); border-color: transparent; color: var(--moss); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; }
.column-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; }
.column-tools { display: flex; gap: 14px; align-items: center; }
.column-side > section + section { margin-top: 32px; }
.empty { color: var(--ink-3); font-style: italic; font-family: var(--font-display); padding: 22px 0; }
.chart { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
/* History chart spans the full column - figsize (11:3.4) matches natural width - and pins its
bottom edge to the container so the rendered height never rounds a hair short and scrolls. */
.chart-wide { display: block; width: 100%; height: auto; min-height: 0; margin-bottom: 26px; }
/* Wraps the history chart's so the hover tooltip has a positioned ancestor that is exactly
the image's box - the tooltip's left/top are computed from the pointer's position within it. */
.chart-history-wrap { position: relative; }
.chart-tooltip {
position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 10px));
pointer-events: none; min-width: 130px; padding: 8px 10px;
background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
box-shadow: 0 4px 14px var(--hover-ink-strong); font-size: 12px; color: var(--ink-2);
}
.chart-tooltip-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.chart-tooltip-row { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.chart-tooltip-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tooltip-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
/* ---------- Action list ---------- */
.action-list { list-style: none; margin: 0; padding: 0; counter-reset: act; }
.action-item {
position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; align-items: start;
padding: 14px 0; border-bottom: 1px solid var(--rule); animation: rise 0.4s var(--ease) both;
}
/* The buttons float top-right over the first line (absolute, out of the flow); the counter and the
whole card body then sit in the normal flow, so the title and the first lines of the email run the
full width beneath the buttons instead of stopping short of them. Left-aligned in the one column
past the counter gutter; the counter aligns to the title on the same row. */
.action-item > .action-buttons { position: absolute; top: 14px; right: 0; }
.action-item > .action-body { grid-column: 2 / -1; }
.action-item::before {
counter-increment: act; content: counter(act, decimal-leading-zero);
grid-column: 1;
font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 3px;
}
.action-item.is-done { opacity: 0.5; }
.action-item.is-done .action-title { text-decoration: line-through; }
.action-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.3; margin: 0; padding-right: 210px; }
.action-meta { display: flex; gap: 10px; align-items: center; margin-top: 5px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.action-meta .link { font-size: 12px; }
.action-summary { font-size: 13px; }
.action-buttons { display: flex; gap: 6px; }
.check {
width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: var(--check-bg); cursor: pointer;
display: inline-grid; place-items: center; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.check:hover, .check.is-checked { background: var(--moss); border-color: var(--moss); color: var(--on-accent); }
/* The done circle is 30px, the row's other controls are 36px (btn-sm: 7px padding + 1px border
either side over a 13px/1.55 line). The row aligns its columns to the top, so leaving the
circle there kept its top flush but left all 6px of the difference as a gap underneath -
which reads as the circle sitting too high next to Block time and Dismiss. Centring it puts
half the difference above and half below, which is what .block-chip already does (the line
below is the reason that chip measured an even gap top and bottom). */
.action-buttons .check { align-self: center; }
/* ---------- Action group (Today, action consolidation) ---------- */
/* One email's cards held together in a raised tile, with the email named once above them. The tile
is the point of the grouping: it carries the same --paper-raised stock, --rule hairline, corner
radius and --shadow the panels use, so a group reads as one lifted object and the page between
groups gives the eye somewhere to rest. The list's
children are wrapped in a plain
here, which breaks the counter only at the wrapper: the items inside still increment `act`, so the
numbering runs on across groups rather than restarting at each. The head mirrors the snoozed-group's
mono/uppercase label so a group reads as structure, not as another card, and the subject is a real
link - opening the email is what a header is for. */
.action-group {
list-style: none; margin: 0 0 16px; padding: 4px 16px 8px;
background: var(--paper); border: 1px solid var(--rule);
border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow);
}
.action-group-head {
display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 0;
}
.action-group-title {
font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3); text-align: left;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-group-title:hover { color: var(--ink); }
.action-group-count {
font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); flex: none;
margin-left: auto;
border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; line-height: 16px;
}
/* Inside a tile the row divider belongs only *between* cards; the last card's bottom rule would sit
orphaned just above the tile's inner padding, so it is dropped there. */
.action-group .action-item:last-child { border-bottom: 0; padding-bottom: 10px; }
/* ---------- Snoozed group (Today) ---------- */
/* Collapsed by default: a snooze hides the noise, the group keeps the hiding honest. Mirrors
the recipient-list disclosure (caret rotates open), and the rows reuse .action-item -
is-snoozed only dims them, never strikes through: a snoozed to-do is not a finished one. */
.snoozed-group { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.snoozed-group summary {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ink-3);
}
.snoozed-group summary::-webkit-details-marker { display: none; }
.snoozed-group summary .caret { transition: transform 0.2s var(--ease); }
.snoozed-group[open] summary .caret { transform: rotate(90deg); }
.snoozed-group .snoozed-count { color: var(--ink-2); }
.action-item.is-snoozed { opacity: 0.7; }
/* ---------- The "Actions" menu (Today action cards) ---------- */
/* Full-width rows inside the shared rename-dialog shell - one backdrop, one Escape, one
styling; a dropdown of absolutely-positioned buttons would have needed all three again. */
.action-menu { display: flex; flex-direction: column; }
.action-menu-item {
display: block; width: 100%; text-align: left; background: transparent; border: 0;
border-bottom: 1px solid var(--rule); padding: 11px 2px; cursor: pointer;
font-family: var(--font-body); font-size: 14px; color: var(--ink);
}
.action-menu-item:last-child { border-bottom: 0; }
.action-menu-item:hover { color: var(--moss); }
/* ---------- Action details dialog: notes ---------- */
.note-list { max-height: 180px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.note-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.note-row .note-date { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.note-row .note-text { white-space: pre-wrap; }
.note-list:empty::after { content: "No notes yet."; color: var(--ink-3); font-size: 12px; }
.note-head { margin-top: 4px; }
.rename-dialog textarea { min-height: 56px; }
.rename-dialog .field-label { margin-bottom: 12px; }
/* ---------- Tags ---------- */
.tag {
display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
background: var(--paper-3); color: var(--ink-2);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-critical { background: var(--vermilion-soft); color: var(--vermilion); }
/* A RITEManage staff bar (docs/15 D addendum): amber, matching RITEManage's
'blocked' badge - distinct from a local Reject's red. */
.tag-blocked { background: var(--amber-soft); color: var(--amber-ink); }
.tag-high { background: var(--amber-soft); color: var(--amber-ink); }
.tag-normal { background: var(--slate-soft); color: var(--slate); }
.tag-low { background: var(--paper-3); color: var(--ink-3); }
.tag-sent, .tag-approved { background: var(--moss-soft); color: var(--moss); }
.tag-rejected, .tag-failed { background: var(--vermilion-soft); color: var(--vermilion); }
.tag-pending { background: var(--amber-soft); color: var(--amber-ink); }
.tag-plain::before { display: none; }
/* ---------- Email list ---------- */
.email-list { display: grid; gap: 0; }
.email-row {
display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; align-items: start;
padding: 16px 0; padding-left: 14px; border-bottom: 1px solid var(--rule); cursor: pointer; animation: rise 0.4s var(--ease) both;
transition: background 0.15s;
}
.email-row:hover { background: var(--row-hover); }
/* Critical rows carry a 3px border in place of the plain row's left inset, so 11px + the border
keeps their text on the same 14px line as every other row. */
.email-row.is-critical { border-left: 3px solid var(--vermilion); padding-left: 11px; }
.email-when { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 4px; }
.email-subject { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin: 0 0 3px; line-height: 1.25; }
.email-sender { font-size: 13px; color: var(--ink-2); }
.email-summary { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; max-width: 80ch; }
/* The tag cluster's right edge is the row's right edge, so the ⚑ outlook tag sits flush with the
content column's border, and the tooltip that appears over it on hover overlaps that border.
Insetting the cluster's box pulls the tag - and the tooltip anchored to it - in from the edge.
Mobile drops the cluster to the left of a single-column row, where the inset is pointless. */
.email-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-right: 22px; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; display: grid; gap: 3px; cursor: pointer; }
.mini-list li strong { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.mini-list li small { color: var(--ink-3); }
/* People directory (merged Mailbox approvals + Tenant users): one row per person. The
facts sit on top and the action buttons sit under them, still on one line (not stacked
per action) - then the row's bottom border closes it off. Keeps .mini-list's stacked
look; only the buttons get a tidy horizontal row of their own. */
.person-row .row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.person-row .row-actions .btn { white-space: nowrap; }
/* Coded meta facts (route, decision-maker, date) that carry a hover definition. The dotted
underline says "there's more here" without shouting - the full meaning is in the title. */
.meta-term { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.meta-term:hover { text-decoration-color: var(--ink-3); }
/* ---------- Drafts ---------- */
.draft-list { display: grid; gap: 22px; }
.draft-card {
background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow);
overflow: hidden; animation: rise 0.45s var(--ease) both;
}
.draft-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
/* The subject side takes every spare pixel (min-width:0 lets it shrink below its text); the status
tag on the right stays put, so the subject field spans the header and stops at that tag. */
.draft-subject-head { flex: 1; min-width: 0; }
/* The card "Open draft" just jumped to: a short glow so the eye lands on it among the others. */
.draft-card.is-focused { animation: draft-focus 1.8s var(--ease); }
@keyframes draft-focus {
0%, 55% { box-shadow: 0 0 0 3px var(--moss), var(--shadow); }
100% { box-shadow: var(--shadow); }
}
.draft-head h2 { font-size: 18px; }
.draft-to { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.draft-context { padding: 14px 20px; font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--rule); }
.draft-body { padding: 18px 20px 6px; }
.draft-body textarea { font-family: var(--font-body); background: transparent; border-color: transparent; padding: 0; min-height: 120px; }
.draft-body textarea:focus { border-color: var(--rule); padding: 10px; background: var(--paper-bright); }
.draft-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 16px; flex-wrap: wrap; }
.draft-foot .group { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-error { color: var(--vermilion); font-size: 13px; padding: 0 20px 12px; }
/* The reviewer's own note, kept from the compose/revise that produced this body. Set apart from
the draft itself because it is not part of the message - it is what the message was asked to
become, and the thing to check the new body against. */
.draft-note { padding: 12px 20px; font-size: 13px; border-bottom: 1px dashed var(--rule); background: var(--paper-2); }
/* A standalone draft's subject is the user's (a reply's is its thread's), so it is editable right
where it is displayed rather than in a dialog. Borderless until focused so the card header still
reads as a heading. */
/* The subject field takes the full width of its column (which the flex header has grown to the
free space beside the status tag), so it spans the header and stops at that tag. */
.draft-subject { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; background: transparent; border-color: transparent; font-family: var(--font-display); font-size: 18px; padding: 0; }
.draft-subject:focus { border-color: var(--rule); padding: 4px 8px; background: var(--paper-bright); }
/* ---------- Compose dialog (manual drafts) ---------- */
/* Same width as the meeting composer (.profile-dialog, min(600px, 100%)) - two composers opened
back to back should not visibly resize the dialog. */
.rename-dialog.compose-dialog { width: min(600px, 100%); }
.compose-dialog textarea { min-height: 130px; font-family: var(--font-body); }
/* Symmetric top/bottom padding: this box's background is what the user actually sees as "the To
field", so the 36px row must be centred inside it, not flush to its top with all the breathing
room dumped below (that reads as "the text sits high"). */
.compose-dialog .draft-recipients { padding: 10px 0; }
/* The note's label ("What should the message say") sits right after the To box in the DOM, and
field-label's own margin is bottom-only - so it read as glued to the To box while sitting a full
gap away from the textarea below it. Push it off the To box's border explicitly. */
.compose-dialog .draft-recipients + .field-label { margin-top: 14px; }
.compose-hint { font-size: 12.5px; }
/* ---------- Reply from an inbox row ---------- */
/* Resting at rest always; hover answers only the button actually under the pointer. The row-level
hover rules that used to live here lifted *both* verbs whenever the pointer was anywhere near -
you can't reach Regenerate without crossing the row, so Reply lit up as a liar. Per-button
:hover/:focus is the whole effect now; :focus-within stays off too, same reason. */
.email-actions { display: flex; gap: 6px; }
.email-act {
display: inline-flex; align-items: center; justify-content: center;
background: var(--moss-soft); border: 1px solid transparent; border-radius: var(--radius);
padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--moss); cursor: pointer; white-space: nowrap;
}
.email-act:hover, .email-act:focus-visible { background: var(--hover-moss-soft); border-color: var(--moss); }
/* ---------- Drawer: inline compose + the drafts section ---------- */
/* The compose panel sits between the action points and the message it answers - Outlook's shape.
A moss wash sets it apart from the read-only sections around it without a second card border
competing with the review card it carries. */
#drawer-compose-section { background: var(--moss-soft); border-radius: var(--radius); padding: 14px 16px; }
.drawer-compose-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.drawer-compose-head h3 { margin: 0; }
#drawer-compose-body > textarea { width: 100%; font-family: var(--font-body); }
.drawer-draft { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: var(--paper-raised); }
.drawer-draft-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.drawer-draft-head .group { display: flex; gap: 6px; margin-left: auto; }
/* The drafts list shows the shared review card in its read-only flavour, which means a full
.draft-card (with its own head and foot) inside the drawer's own framed head. Two subject lines
and the "In reply to" line, twice, would be noise - the drawer's head already says all of it,
so the card's is suppressed and only the formatted body with its real spacing shows through. */
.drawer-draft .draft-card { border: 0; padding: 0; background: transparent; box-shadow: none; }
.drawer-draft .draft-card > .draft-head { display: none; }
.drawer-draft .draft-card > .draft-context { display: none; }
.drawer-draft .draft-card > .draft-foot { padding: 10px 0 0; }
.drawer-draft .draft-card > .draft-foot .muted { display: none; }
/* ---------- Rename dialog (admin: local account email / display name) ---------- */
.rename-backdrop {
position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
background: var(--scrim); animation: fade 0.25s both; padding: 20px;
}
.rename-dialog {
background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 24px 26px; width: min(420px, 100%);
/* The scroll box. It lives on the dialog rather than on any one panel's content so a wide
payload (a meeting body full of tables) grows the popup sideways instead of opening a second
scrollbar inside it - two nested scroll wheels over each other is the thing that reads as a
bug. flex: 1 lets a tall dialog shrink to the viewport and hand the overflow to this one
scroll, which is the only one the user then has to find. */
max-height: calc(100vh - 40px); overflow: auto;
display: flex; flex-direction: column;
}
.rename-dialog h3 { margin-bottom: 16px; }
.rename-dialog .draft-foot { padding: 12px 0 0; }
/* Profile settings carries far more content (timezone + signature + reply font) than the
rename/confirm dialogs this class is shared with - give it room to breathe and keep the
.rename-dialog max-height/overflow above as the safety net if a viewport is ever short
enough for even this wider, tighter version to overflow. */
.rename-dialog.profile-dialog { width: min(600px, 100%); }
.sig-actions .tz-combo-hint { font-size: 12px; line-height: 1.45; }
/* ---------- Profile settings modal: security sections + password grid -------
Sections stay open - no boxes, no fold-outs. The 2FA section shows its state in a
small chip beside the label; the password block is one compact grid. */
/* Current password spans the top row; the new pair sits under it with the button
beside those - one compact block instead of a field per line. */
.pw-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 16px; }
.pw-grid input:first-child { grid-column: 1 / -1; }
@media (max-width: 480px) {
.pw-grid { grid-template-columns: 1fr; }
.pw-grid input:first-child { grid-column: auto; }
}
/* One label style for every heading in the Profile settings modal - the modal title,
"Email signature", and the two security headings. The app's established eyebrow
treatment (see .eyebrow): mono, uppercase, letter-spaced, quiet ink. */
.section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
}
.rename-dialog.profile-dialog .section-label { display: block; margin: 18px 0 8px; }
.rename-dialog.profile-dialog h3.section-label { margin-top: 0; margin-bottom: 16px; }
.rename-dialog.profile-dialog .field .section-label { margin-top: 0; }
/* State chip riding beside a section label (2FA's enabled / not enabled).
Non-mono on purpose - it is a value, not another label. */
.security-value { margin-left: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 2px solid var(--ink); }
.table td { padding: 10px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
/* Cells holding a control (settings table: the field and the Save/Reset pair). Table cells default
to vertical-align: baseline, and a button's baseline sits ~7px higher than a 44px field's - so the
whole control column rendered high and its bottom rule landed ~7px above the other cells' rule
(measured 57px vs 64px). Middle-aligning the control cells lines every rule up and centres each
control. Scoped to :has(control) so plain text cells elsewhere keep their baseline alignment. */
.table td:has(input, select, textarea, button) { vertical-align: middle; }
.table td > .row-actions { display: flex; gap: 6px; }
/* Keep the Save/Reset pair on one line even when the row is squeezed narrow. */
.table td > .row-actions { flex-wrap: nowrap; }
.table td > .row-actions .btn { white-space: nowrap; }
/* Keep Save/Reset on one line, side by side, with the pair centred and the row rule aligned. A
forced to display:flex supplies the gap and lays the buttons out horizontally, but stops
contributing its content width to the column (so width:1% is needed to make the column hug the
buttons) AND it breaks the cell's normal table layout - which is why the flex cell sat high and
dropped the row's bottom rule. So: do NOT make the cell a flex box. Keep it a plain table cell
(vertical-align: middle centres the pair, and the cell keeps its border-bottom), and lay the
buttons out as inline-blocks. gap does nothing between inline-blocks, so the pair is spaced with
the second button's margin-left instead. */
#settings-table .row-actions { display: table-cell; vertical-align: middle; width: 1%; white-space: nowrap; }
#settings-table .row-actions .btn { display: inline-block; white-space: nowrap; }
#settings-table .row-actions .btn + .btn { margin-left: 6px; }
/* One uniform height for the settings fields and rows. A