/* Executr components — plain HTML with ex- classes. Every value comes from tokens.css.
Follow ../../design-system/README.md: borders before shadows, one teal accent,
44px targets, a solid 2px teal focus ring, status never shown by colour alone. */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--color-surface);
color: var(--color-ink);
font: var(--text-body);
-webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* Scoped away from .ex-btn on purpose. `a:hover` outweighs `.ex-btn--primary` on
specificity, so without :not() it repainted a primary button's white label dark teal on
hover and the button read as one solid block. A link styled as a button takes its colours
from the button classes alone, exactly like a does. */
a:not(.ex-btn) { color: var(--color-teal-strong); }
a:not(.ex-btn):hover { color: var(--color-teal-deep); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--color-teal);
outline-offset: 2px;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
/* ---------- Primitives ---------- */
.ex-ico {
width: 1.25em; height: 1.25em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
.ex-muted { color: var(--color-ink-muted); }
.ex-money { font-variant-numeric: tabular-nums; font-weight: 600; }
.ex-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ex-stack { display: flex; flex-direction: column; gap: var(--space-4); }
/* ---------- Logo ----------
The mark is a monoline E whose middle arm stops short of a teal node: the next step in
the journey. Never retype the wordmark in a font — it is lettering, so it ships as text
set in the serif only here, at the one size the lockup uses. */
.ex-logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.ex-logo__tile {
display: grid; place-items: center; flex: none;
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: var(--color-navy-raised);
color: var(--color-on-navy);
}
.ex-logo__tile svg { width: 28px; height: 28px; }
.ex-logo__word { font: 600 21px/28px var(--font-sans); letter-spacing: -0.01em; }
.ex-logo--sm .ex-logo__tile { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.ex-logo--sm .ex-logo__tile svg { width: 20px; height: 20px; }
.ex-logo--sm .ex-logo__word { font: 600 15px/20px var(--font-sans); }
/* ---------- Button ---------- */
.ex-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 44px; padding: 0 var(--space-6);
border: 1px solid transparent; border-radius: var(--radius-md);
font: 600 16px/20px var(--font-sans);
text-decoration: none; cursor: pointer; background: none; color: var(--color-ink);
}
.ex-btn--primary { background: var(--color-teal-strong); border-color: var(--color-teal-strong); color: var(--color-on-teal); }
.ex-btn--secondary { background: var(--color-surface-raised); border-color: var(--color-border-strong); color: var(--color-ink); }
.ex-btn--quiet { color: var(--color-teal-strong); padding: 0 var(--space-3); }
.ex-btn--onnavy { background: var(--color-on-navy); border-color: var(--color-on-navy); color: var(--color-navy); }
.ex-btn--lg { min-height: 52px; }
.ex-btn[disabled] { background: var(--color-surface-sunken); border-color: var(--color-border); color: var(--color-ink-muted); cursor: not-allowed; box-shadow: none; transform: none; }
/* Hovering or pressing a button never changes its colour: a primary button stays exactly the
teal it started as, the way "Continue application" does in the product, and the button on
the navy bar stays warm white instead of picking up a blue tint. The affordance is a lift
and a press instead of a new fill. Tap highlight and text selection are off for the same
reason — both flash the browser's blue over the button. */
.ex-btn {
-webkit-tap-highlight-color: transparent;
user-select: none; -webkit-user-select: none;
transition: box-shadow 120ms ease, transform 120ms ease;
}
@media (hover: hover) {
.ex-btn--primary:hover, .ex-btn--secondary:hover, .ex-btn--onnavy:hover { box-shadow: var(--shadow-card); }
.ex-btn--quiet:hover { background: var(--color-teal-tint); }
}
.ex-btn:active { transform: translateY(1px); box-shadow: none; }
.ex-btn[disabled]:active { transform: none; }
/* ---------- Chip / badge ----------
Every state carries a word, and most carry an icon too, because success and danger are
close in lightness. Warning text uses warning-text, never warning. */
.ex-chip {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
font: var(--text-caption); white-space: nowrap;
}
.ex-chip .ex-ico { width: 14px; height: 14px; }
.ex-chip--teal { background: var(--color-teal-tint); color: var(--color-teal-strong); }
.ex-chip--ok { background: var(--color-success-tint); color: var(--color-success); }
.ex-chip--warn { background: var(--color-warning-tint); color: var(--color-warning-text); }
.ex-chip--danger { background: var(--color-danger-tint); color: var(--color-danger); }
.ex-chip--quiet { background: var(--color-surface-sunken); color: var(--color-ink-muted); }
/* ---------- Notice ---------- */
.ex-notice {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border: 1px solid; border-radius: var(--radius-md);
}
.ex-notice .ex-ico { width: 20px; height: 20px; margin-top: 3px; }
.ex-notice__title { font: var(--text-heading-3); margin-bottom: var(--space-1); }
.ex-notice p { font: var(--text-body-sm); color: var(--color-ink); }
.ex-notice--info { background: var(--color-teal-tint); border-color: var(--color-teal); color: var(--color-teal-strong); }
.ex-notice--warn { background: var(--color-warning-tint); border-color: var(--color-warning); color: var(--color-warning-text); }
.ex-notice--danger { background: var(--color-danger-tint); border-color: var(--color-danger); color: var(--color-danger); }
/* ---------- Text field ---------- */
.ex-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ex-field__label { font: var(--text-label); }
.ex-field__input {
min-height: 48px; padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
background: var(--color-surface-raised); color: var(--color-ink);
font: var(--text-body); font-family: var(--font-sans);
}
.ex-field--error .ex-field__input { border: 2px solid var(--color-danger); }
.ex-field__error { display: flex; gap: var(--space-2); align-items: center; font: var(--text-label); color: var(--color-danger); }
.ex-field__error .ex-ico { width: 16px; height: 16px; }
.ex-field__hint { font: var(--text-body-sm); color: var(--color-ink-muted); }
/* ---------- Card ---------- */
.ex-card {
display: flex; flex-direction: column; gap: var(--space-6);
padding: var(--space-6);
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
/* ---------- Tick list ---------- */
.ex-ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ex-ticks li { display: flex; gap: var(--space-3); }
.ex-ticks .ex-ico { width: 20px; height: 20px; margin-top: 3px; color: var(--color-teal); }
/* ---------- Stage node ----------
Shared by the horizontal stepper and the vertical stage list: a filled teal node for a
finished stage, a haloed ring for the one you are on, a plain outline for the rest. */
.ex-node {
display: grid; place-items: center; flex: none;
width: 22px; height: 22px; border-radius: var(--radius-full);
border: 2px solid var(--color-border-strong);
}
.ex-node .ex-ico { width: 12px; height: 12px; stroke-width: 2.5; }
.ex-node--lg { width: 26px; height: 26px; }
.ex-node--lg .ex-ico { width: 14px; height: 14px; }
.ex-node--done { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-on-teal); }
.ex-node--now { border-color: var(--color-teal); background: var(--color-surface-raised); box-shadow: 0 0 0 3px var(--color-teal-tint); }
.ex-node--now::after { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-teal); }
.ex-node--lg.ex-node--now { box-shadow: 0 0 0 5px var(--color-teal-tint); }
.ex-node--lg.ex-node--now::after { width: 8px; height: 8px; }
/* ---------- Journey stepper ----------
Six stages across a pane, wrapping to three and then two as the pane narrows. The
connector after a wrapped row's last stage is hidden, so no line points at nothing. */
.ex-journey { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-2); }
.ex-journey__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; row-gap: var(--space-2); }
.ex-journey__line { height: 2px; margin: 0 6px; background: var(--color-border); }
.ex-journey__label { grid-column: 1 / -1; padding-right: var(--space-2); font: var(--text-caption); color: var(--color-ink-muted); }
.ex-journey__stage--done .ex-journey__line { background: var(--color-teal); }
.ex-journey__stage--done .ex-journey__label,
.ex-journey__stage--now .ex-journey__label { color: var(--color-ink); }
.ex-journey__stage:last-child .ex-journey__line { visibility: hidden; }
/* ---------- Vertical stage list ---------- */
.ex-steps { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ex-steps li {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) 0; border-top: 1px solid var(--color-border);
font: 400 13px/18px var(--font-sans);
}
.ex-steps li:first-child { border-top: 0; }
.ex-steps__what { flex: 1 1 0; min-width: 0; }
.ex-steps li[data-state="now"] .ex-steps__what { font-weight: 600; }
.ex-steps__state { font: var(--text-caption); color: var(--color-ink-muted); }
.ex-steps li[data-state="done"] .ex-steps__state { color: var(--color-success); }
.ex-steps li[data-state="now"] .ex-steps__state { color: var(--color-teal-strong); }
/* ---------- Next step panel ---------- */
.ex-next {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
padding: var(--space-4); border-radius: var(--radius-md);
background: var(--color-teal-tint);
}
.ex-next__body { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.ex-next__eyebrow { font: var(--text-caption); color: var(--color-teal-strong); }
.ex-next__what { font: 600 15px/22px var(--font-sans); color: var(--color-ink); }
.ex-next__how { font: 400 13px/20px var(--font-sans); color: var(--color-ink-muted); }
/* ---------- Task list ---------- */
.ex-tasks { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ex-task {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3) 0; border-top: 1px solid var(--color-border);
}
.ex-task:first-child { border-top: 0; }
.ex-task > .ex-ico { width: 18px; height: 18px; margin-top: 1px; }
.ex-task__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ex-task__what { font: 500 14px/20px var(--font-sans); }
.ex-task__meta { font: 400 12px/18px var(--font-sans); color: var(--color-ink-muted); }
.ex-ico--ok { color: var(--color-success); }
.ex-ico--warn { color: var(--color-warning); }
.ex-ico--danger { color: var(--color-danger); }
.ex-ico--quiet { color: var(--color-ink-muted); }
.ex-ico--teal { color: var(--color-teal); }
/* ---------- Money rows and meter ---------- */
.ex-lines { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ex-lines__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font: var(--text-body-sm); }
.ex-lines__row dt { color: var(--color-ink-muted); }
.ex-lines__row dd { font-weight: 600; }
.ex-meter { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.ex-meter__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-teal); }
/* ---------- Person chip ---------- */
.ex-person { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-label); }
.ex-person__initials {
display: grid; place-items: center; flex: none;
width: 26px; height: 26px; border-radius: var(--radius-full);
background: var(--color-on-navy); color: var(--color-navy);
font: 700 12px/16px var(--font-sans);
}