/* ==========================================================================
Domolytics — the application stylesheet (request 130, the "Geode" design).
Loaded after tokens_v2.css, which defines every colour for both themes, and
before components_v2.css, which styles the generic component names and so
wins on equal specificity.
THIS FILE DECLARES NO COLOUR
----------------------------
Every colour here is `var(--token)` naming a token from tokens_v2.css —
never a literal, and never a local alias re-pointed at one. A colour change
is therefore a one-line edit in the token sheet, and flipping `data-theme`
on repaints the app without touching a rule here.
THERE IS NO v1
--------------
The `_v2` suffix is a name, not a variant (request 152). The v1 sheet
(`main.css` + `fonts.css`) and the `UI_VERSION` fork were deleted in task
0152b; its layout rules had already been folded into this file by task 0130b
and recoloured through the tokens, and they are the current app shell — the
sidebar, `.layout`, `.container`, `body.app`. Nothing here is deprecated, and
nothing is waiting to be migrated. Do not add v1 rules, `--color-*` style
aliases, or compatibility fallbacks: there is nothing left to be compatible
with.
========================================================================== */
:root {
/* Geometry. Real values, not aliases: tokens_v2.css ships no equivalent, so
these are declared here and nowhere else. Every COLOUR, by contrast, comes
straight from a tokens_v2.css token — this file declares none. */
--radius: 12px;
--radius-sm: 8px;
--space: 16px;
--header-h: 60px;
--rail-w: 244px; /* the example's rail width (request 131 §2) */
}
*, *::before, *::after { box-sizing: border-box; }
/* Text size (task 0162b).
`100%`, never a px value: a px root would override whatever font size the
user has set in their browser, which is the preference this task exists to
honour. A percentage multiplies it instead, so the control and the browser
setting compose rather than fight.
Every `font-size` in this file and in components_v2.css is `rem`, so all of
them follow. Default is the absence of the attribute, mirroring how the theme
treats light — a page whose JS never runs stays at 100%. */
html { font-size: 100%; }
:root[data-text-size="lg"] { font-size: 112.5%; } /* 18px at a 16px default */
:root[data-text-size="xl"] { font-size: 125%; } /* 20px at a 16px default */
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--text);
background: var(--bg);
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
h1, h2, h3, .brand, .secondary-menu__title, .page-title {
font-family: var(--font);
letter-spacing: -0.015em;
}
a { color: inherit; text-decoration: none; }
/* Full-width content column (change request 01): no wide unused side margins. */
.container { width: 100%; margin-inline: auto; padding-inline: var(--space); }
/* ---- Bug 0017: the signed-in shell's width and gutter ---------------------
Two problems, one cause — the shell was borrowing the public pages' column.
1. `components_v2.css` caps `.container` at `--container` (1240px). That is
right for landing/register/login, which have no rail and would otherwise
run edge to edge; it is wrong here, where the rail already bounds the
content and the example's signed-in `.content` has no max-width at all. The
page simply stopped growing past 1240px on a wide monitor.
2. The bands disagreed on their gutter: content on `.container`'s 24px, the top
bar and in-section bar on `--space` (16px), so the breadcrumb trail sat 8px
inside the page beneath it.
Both are fixed by giving the shell one gutter of its own and using it
everywhere, so the bands cannot drift apart again — including at the 760px
breakpoint where the components sheet narrows `.container` to 18px. Scoped to
the app shell's body class, so the public shells keep the column they are
designed around; the added specificity also makes sheet load order
irrelevant. */
body.app { --shell-gutter: 24px; }
@media (max-width: 760px) { body.app { --shell-gutter: 18px; } }
body.app .container { max-width: none; padding-inline: var(--shell-gutter); }
body.app .site-header__inner,
body.app .secondary-menu__inner { padding-inline: var(--shell-gutter); }
/* Opt-in centered, comfortable-width column (e.g. the career dashboard). */
.centered { max-width: var(--container); margin-inline: auto; }
.spacer { flex: 1; }
.sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
/* Accessibility (task 0024): skip link + visible focus (IS 5568 / WCAG 2.1 AA) */
.skip-link {
position: absolute; inset-inline-start: 8px; top: -48px; z-index: 200;
padding: 10px 16px; border-radius: var(--radius-sm);
background: var(--brand-400); color: var(--on-brand);
font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }
#main-content:focus { outline: none; }
.prose { max-width: 720px; margin-inline: auto; padding-block: 24px; }
.prose h1 { margin: 0 0 12px; }
.prose h2 { margin: 24px 0 6px; font-size: 1.15rem; }
.prose p { margin: 8px 0; line-height: 1.6; }
.prose a { color: var(--brand-400); font-weight: 600; }
/* Task 0151a — the terms document is the first `.prose` page with three heading
levels and lists. h3 must sit visibly *under* h2, and the list markers have to
come back: `components_v2.css` strips them from every `ul` on the site, which is
right for navigation and wrong for a document where the list is the content. */
.prose h3 { margin: 18px 0 4px; font-size: 1rem; }
.prose ul { margin: 8px 0; padding-inline-start: 24px; list-style: disc; }
.prose li { margin: 4px 0; line-height: 1.6; }
/* --- App shell: dark rail + content column ----------------------------- */
.layout { flex: 1; display: flex; align-items: stretch; min-height: 100vh; }
/* Rail geometry and the grouped nav inside it follow the example
(`variant-8-geode/css/app.css` — request 131 §2). The example's foot block
(user card + sign-out) is deliberately not ported: the header carries both. */
.sidebar {
flex: 0 0 var(--rail-w);
width: var(--rail-w);
background: var(--rail);
color: var(--rail-text);
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 22px;
}
.sidebar .brand { color: var(--rail-text); padding: 6px 10px 14px; border-block-end: 1px solid var(--rail-stroke); }
.sidebar__groups { display: flex; flex-direction: column; gap: 22px; }
/* The group title is a real button so it is operable by keyboard for free; it
is styled back down to a label, and the chevron says which way it will go. */
.side-group__title {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
inline-size: 100%; margin: 0 0 8px; padding: 0 10px;
background: none; border: 0; cursor: pointer;
font: inherit; font-size: 0.6563rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
/* The example dims these with `--rail-dim`, which measures 4.41:1 on the
rail — under AA, and at 10.5px this is normal text, not large. One step up
to `--rail-muted` clears it while keeping the label subordinate to the
links (spec 04-accessibility). */
color: var(--rail-muted); text-align: start;
}
.side-group__title:hover { color: var(--rail-text); }
.side-group__chev { inline-size: 14px; block-size: 14px; flex: none; transition: transform .18s ease; }
/* Collapsed: the chevron points at the list it would reveal. Mirrored in RTL by
the logical rotation below. */
.side-group__title[aria-expanded="false"] .side-group__chev { transform: rotate(-90deg); }
[dir="rtl"] .side-group__title[aria-expanded="false"] .side-group__chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .side-group__chev { transition: none; } }
.sidebar__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* `display: grid` above outranks the UA's `[hidden] { display: none }` — an
author rule always beats the UA sheet — so without this the collapsed group
stays on screen while reporting itself hidden. */
.sidebar__nav[hidden] { display: none; }
.sidebar__link {
display: flex; align-items: center; gap: 11px;
padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-md);
color: var(--rail-text); font-weight: 500;
}
.sidebar__link:hover { background: var(--rail-hover); color: var(--rail-text); }
.sidebar__link.is-active {
background: var(--rail-active); border-color: var(--rail-active-border);
color: var(--rail-active-text); font-weight: 600;
}
.sidebar__icon { inline-size: 17px; block-size: 17px; flex: none; opacity: .85; }
.sidebar__link.is-active .sidebar__icon { opacity: 1; color: var(--rail-active-icon); }
/* Focus has to stay visible against the dark rail, which the page-level ring
colour is not built for. */
.sidebar :focus-visible { outline: 2px solid var(--rail-focus); outline-offset: 2px; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-overlay { display: none; }
/* --- Header (top bar of the content column) ---------------------------- */
.site-header {
background: var(--glass);
border-block-end: 1px solid var(--stroke);
position: sticky; inset-block-start: 0; z-index: 50;
}
.site-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); padding-inline: var(--space); }
.brand { font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
/* The mark carries the same tile everywhere, rail included (request 149
Verification #1, task 0149c) — it is `.logo-mark` from components_v2.css, which
v2 loads app-wide. The rail's own `.brand` sets a bigger font for the name, so
pin the tile's letter back to the size the header uses; without this the letter
grows and the 30px box crops it. */
.brand .logo-mark { font-size: 0.7813rem; }
/* The name: one line by default — page headers, footers, the auth pages. Only the
left panel stacks (--stacked below), because only it is narrow enough to need
it; the story is explicit that the travel home page keeps one line. */
.brand-name { display: inline-flex; align-items: baseline; gap: .35em; }
/* Two rows: "Travel" over "by Domolytics". A column flex rather than a , so
the suffix carries its own size and colour and the stack mirrors under RTL
without a rule of its own. */
.brand-name--stacked { flex-direction: column; align-items: start; gap: 0; line-height: 1.15; }
/* --text-muted, NOT --text-dim. The suffix sets at ~13px/500, which is normal
text, so it owes 4.5:1 (1-tech/4-ACCESSIBILITY.md). Sampled from the painted
pixels, --text-dim gives 2.97:1 in light and 3.52:1 in dark — both fail;
--text-muted gives 5.35:1 and 7.0:1. The old one-line `.logo .suffix` had the
same problem and it shipped, because the suffix was hidden on mobile and easy
to miss on desktop. */
.brand-name__suffix { font-size: .72em; font-weight: 500; color: var(--text-muted); }
/* The rail is dark in BOTH themes, so it has its own muted token — --text-muted
is #515c7a in light and would sit on that dark ground at about 2:1. */
.sidebar .brand-name__suffix { color: var(--rail-muted); }
.sidebar-toggle {
display: none; align-items: center; justify-content: center;
font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
padding: 6px 10px; border: 1px solid var(--stroke);
border-radius: var(--radius-sm); background: var(--glass); color: var(--text);
}
/* Wraps: with a text-size control alongside the theme switch and the two
dropdowns, this row cannot hold one line at 320px once the user picks the
largest text — and a control for making text bigger must not be what breaks
the layout when they use it (task 0162b). */
.header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.site-header__inner { flex-wrap: wrap; }
/* --- Breadcrumbs (request 131) ----------------------------------------
The Geode top bar carries the trail at its start; values (13px, 8px gap,
dimmed separators, current page at 600) come from the variant's app.css,
re-expressed against our own tokens. Logical properties only, so the trail
mirrors under dir="rtl" with no separate rule. */
.crumbs { min-width: 0; font-size: .8125rem; color: var(--text-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs .sep { opacity: .6; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--text); }
.crumbs strong { color: var(--text); font-weight: 600; }
/* Phones: the header already carries the drawer toggle and the tools, so the
trail keeps only the current page rather than wrapping onto a second line
(spec 03-ui: mobile adaptations scoped to ≤640px). */
@media (max-width: 640px) {
.crumbs li:not(:last-child) { display: none; }
.crumbs li:last-child .sep { display: none; }
}
/* Dropdowns (language / user) */
.dropdown-wrap { position: relative; }
.btn-tool {
font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4em;
padding: 7px 10px; border: 1px solid var(--stroke); border-radius: var(--radius-sm);
background: var(--glass); color: var(--text);
}
.btn-tool:hover { background: var(--glass-2); }
.dropdown {
position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
min-width: 160px; margin: 0; padding: 6px; list-style: none;
background: var(--glass); border: 1px solid var(--stroke);
border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; z-index: 80;
}
.dropdown.open { display: block; }
.dropdown a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); }
.dropdown a:hover { background: var(--glass-2); }
.dropdown a[aria-current="true"] { color: var(--brand-400); font-weight: 600; }
/* --- Secondary (in-section) sub-navigation ----------------------------- */
.secondary-menu { background: var(--glass); border-block-end: 1px solid var(--stroke); }
/* Scrolls within itself rather than widening the page. The trip menu has 9
entries; past roughly 1100px of them it used to push the document wider than
the viewport — visible at the default text size on a 1024px laptop, and at
1280px once a user picks the largest text (task 0162b). WCAG 1.4.10 wants the
page not to scroll sideways; a scroll container is the way to keep that true
without dropping menu entries. */
.secondary-menu__inner { display: flex; align-items: center; gap: var(--space); min-height: 52px; padding-inline: var(--space); overflow-x: auto; }
.secondary-nav { flex: 0 0 auto; }
.secondary-nav a { white-space: nowrap; }
.secondary-menu__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.secondary-menu__toggle { display: none; }
.secondary-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.secondary-nav a { padding: 6px 12px; border-radius: 999px; color: var(--text-muted); font-weight: 500; }
.secondary-nav a:hover { background: var(--glass-2); color: var(--text); }
/* The current page (wired up in task 0177 — this rule existed and nothing ever set the
class). The tint alone is not enough: in monochrome `--info-bg` flattens onto the
page ground and the pill becomes invisible, so which page you are on would be carried
by colour alone, which is exactly what 4-ACCESSIBILITY forbids. The ring and the
heavier weight survive every mode; `currentColor` keeps them token-free. */
.secondary-nav a.is-active {
background: var(--info-bg);
color: var(--brand-400);
font-weight: 700;
box-shadow: inset 0 0 0 1px currentColor;
}
.secondary-menu__title a { color: inherit; text-decoration: none; }
.secondary-menu__title a:hover { color: var(--brand-400); }
/* --- Content / footer -------------------------------------------------- */
.content { flex: 1; padding-block: 24px; }
.site-footer { color: var(--text-muted); border-block-start: 1px solid var(--stroke); padding-block: 16px; font-size: .9rem; }
.site-footer__sep { margin-inline: 6px; }
/* --- Generic components ------------------------------------------------- */
.card { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.page-head { margin-block-end: 20px; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
/* The section's icon beside the section title in the secondary menu bar (task 0183;
moved off the page-head
by operator correction, 2026-08-25).
Sized against the heading, not in px, so it follows the text-size control
(task 0162b). `vertical-align: middle` on both the span and the image is what
keeps a drawn icon and a 1em emoji on the same baseline as the text.
`margin-inline-end` — logical, so RTL mirrors the gap with no second rule. */
.page-head__icon {
margin-inline-end: 6px;
vertical-align: middle;
line-height: 1;
font-size: 1.1em;
}
.page-head__icon--img { display: inline-block; }
.page-head__icon--img img {
inline-size: 1.5em;
block-size: auto;
vertical-align: middle;
}
/* In the bar the title sits on a fixed-height row beside the sub-nav, so the icon is
held to the line rather than allowed to set its height. */
.secondary-menu__title .page-head__icon--img img { inline-size: 1.4em; }
.page-head__sub { margin: 4px 0 0; color: var(--text-muted); }
/* Third header line: trip dates + nights (request 127 §1). */
.page-head__dates { margin: 2px 0 0; }
/* Home landing (task-0009) */
.home-hero { padding: 56px 0 32px; text-align: center; }
.home-hero__brand { margin: 0 0 12px; font-weight: 700; color: var(--text-muted); }
.home-hero__title { margin: 0 auto 12px; font-size: 2.25rem; line-height: 1.15; max-width: 16ch; }
.home-hero__lead { margin: 0 auto; max-width: 52ch; color: var(--text-muted); font-size: 1.05rem; }
.home-hero__cta { margin-block-start: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.home-features { padding: 24px 0 56px; }
.home-features__title { margin: 0 0 20px; text-align: center; font-size: 1.25rem; }
/* Shared card grid for home features + dashboard section tiles */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.feature-card {
background: var(--glass); border: 1px solid var(--stroke);
border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
}
.feature-card__icon { font-size: 1.75rem; }
/* A drawn section icon in place of the emoji (task 0180). Every card in the sections
grid reserves the same icon height, whether it holds a 64px drawing or an emoji, so
the titles line up across the row and nothing moves as the remaining three icons
arrive. Scoped to that grid — career's onboarding cards use `.feature-card` too and
have no images to make room for. */
.feature-grid--sections .feature-card__icon {
display: flex; align-items: center; justify-content: center;
min-block-size: 72px;
line-height: 1;
}
/* ---- The section cards: one size, centred content (task 0182a, request 182) ----
`grid-auto-rows: 1fr` is what makes every card identical: each row takes the
tallest card in it, and because the grid is `1fr` columns of equal width the
cards end up the same size in both axes. The card must then stretch to fill the
track it was given, which is what `block-size: 100%` does — without it the card
keeps its content height and only the ROW is tall.
`.feature-card--link` sets `display: block` and is declared after this, so these
rules carry two classes to win on specificity rather than on order.
Scoped to this grid throughout: `.feature-card` is also the career and travel
dashboards' card and both onboarding pages', none of which are in this story. */
.feature-grid--sections { grid-auto-rows: 1fr; }
.feature-grid--sections .feature-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
block-size: 100%;
}
.feature-grid--sections .feature-card__desc { max-inline-size: 30ch; }
/* Pinned to the foot of the card, so a section WITH a count and one without still
agree on where everything above them sits. `auto` on a flex item's start margin
absorbs the free space the equal-height row created. */
.feature-grid--sections .feature-card__count {
margin: 12px 0 0;
padding-block-start: 10px;
margin-block-start: auto;
inline-size: 100%;
border-block-start: 1px solid var(--hairline);
color: var(--text-muted);
font-size: .9rem;
}
.feature-grid--sections .feature-card__count-n {
color: var(--text);
font-weight: 700;
font-size: 1.05rem;
}
.feature-card__icon--img img { inline-size: 64px; block-size: auto; }
.feature-card__name { margin: 10px 0 6px; font-size: 1.05rem; }
.feature-card__desc { margin: 0; color: var(--text-muted); font-size: .95rem; }
.feature-card--link { display: block; color: inherit; transition: border-color .15s, transform .15s; }
.feature-card--link:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.feature-card__open { display: inline-block; margin-block-start: 10px; color: var(--brand-400); font-weight: 600; }
@media (max-width: 720px) {
.home-hero { padding-block-start: 36px; }
.home-hero__title { font-size: 1.8rem; }
}
/* ---- Shopping section (tasks 0012 / 0013) ---- */
.btn--sm { padding: 5px 10px; font-size: .85rem; }
.btn--xs { padding: 3px 8px; font-size: .78rem; }
.btn.btn--danger { background: var(--danger); color: var(--on-danger); border-color: transparent; }
.btn--danger:hover { background: var(--danger-hover); }
.page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.back-link { display: inline-block; margin-block-end: 6px; color: var(--text-muted); font-size: .9rem; }
.back-link:hover { color: var(--brand-400); }
/* Lists collection */
.list-collection { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list-item {
display: flex; align-items: center; gap: 12px;
background: var(--glass); border: 1px solid var(--stroke);
border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px;
}
.list-item__name { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.list-item__name:hover { color: var(--brand-400); }
.list-item__date { margin-inline-start: auto; color: var(--text-muted); font-size: .85rem; }
.list-item__actions { display: flex; gap: 6px; }
/* Companion row: the note takes a full line of its own under the name (request 127 §10). */
.companion-item { flex-wrap: wrap; }
.companion-item__note { flex-basis: 100%; }
/* Items table */
.items-table td { vertical-align: top; }
.items-table__actions-col { width: 1%; white-space: nowrap; }
.item-cell { display: flex; align-items: flex-start; gap: 10px; }
.item-name { font-weight: 600; }
.item-notes { color: var(--text-muted); font-size: .85rem; margin-block-start: 2px; }
.item-qty { white-space: nowrap; }
.item-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.item-status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-block-start: 5px; background: var(--stroke); }
/* Status-distinct rows */
.item-row--new .item-status-dot { background: var(--brand-400); }
.item-row--taken { background: var(--success-bg, var(--tint-2)); }
.item-row--taken .item-status-dot { background: var(--success); }
.item-row--taken .item-name { text-decoration: line-through; color: var(--text-muted); }
.item-row--not-found { background: var(--danger-bg, var(--tint-2)); }
.item-row--not-found .item-status-dot { background: var(--danger); }
.item-row--not-found .item-name { color: var(--danger); }
.items-empty { margin-block-start: 12px; color: var(--text-muted); }
/* Modals / popups */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.modal__dialog {
position: relative; width: 100%; max-width: 440px;
max-height: calc(100vh - 48px); overflow-y: auto;
background: var(--glass); border-radius: var(--radius);
box-shadow: var(--shadow-lg); padding: 22px;
}
.modal__title { margin: 0 0 16px; font-size: 1.2rem; }
.modal__message { margin: 0 0 18px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 8px; }
/* Segment popup From/To groups (request 128 §3). */
.seg-group { border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 10px 12px; margin-block-end: 12px; }
.seg-group > legend { font-weight: 600; padding-inline: 6px; }
/* Airport autocomplete (request 129). The list overlays the field, so the popup
needs a stacking context above the rest of the form but below the modal chrome. */
.ac { position: relative; }
/* Autocomplete dropdown (airports and airlines). Request 139 verification §8:
it was unreadable in dark mode.
The cause was `--glass` (which this rule used to reach through a `--color-surface`
alias, removed since). That token is #ffffff under light but rgba(255,255,255,0.04) under
dark — 4% white. A panel *inside* the page can afford to be a translucent
wash; this list is absolutely positioned OVER the form behind it, so at 4%
the suggestions floated on top of whatever happened to be underneath.
It is pinned to the opaque `--panel` instead, and the text to `--text`, so the
list is legible whatever it covers. The row highlight stays translucent on
purpose — it now composites over an opaque ground, which is what makes it
read as a lift rather than a hole. */
.ac__list {
position: absolute; inset-inline: 0; top: 100%; z-index: 5;
margin: 2px 0 0; padding: 4px; list-style: none;
background: var(--panel); color: var(--text);
border: 1px solid var(--stroke);
border-radius: var(--r-md); box-shadow: var(--shadow-lg);
max-block-size: 240px; overflow-y: auto;
}
.ac__opt { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: .92rem; color: var(--text); }
.ac__opt:hover, .ac__opt.is-active { background: var(--glass-2); }
/* --brand-400 lightens under dark (#4054d8 → #8093ff), so the active outline
keeps its contrast against the panel in both themes. */
.ac__opt.is-active { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
/* Accommodation type + name share a line, the type kept narrow (request 126). */
.field-row--acc { flex-wrap: wrap; }
.field-row--acc .field--acc-type { flex: 0 0 170px; }
.field-row--acc .field--acc-name { flex: 1 1 220px; }
@media (max-width: 640px) { .field-row--acc .field--acc-type { flex: 1 1 100%; } }
textarea.input { resize: vertical; font: inherit; }
.form-error { margin: 0 0 10px; color: var(--danger); font-size: .9rem; }
/* Required-field asterisk (task 0100 / UI amendments v1 §1). */
.req { color: var(--danger); margin-inline-start: 2px; font-weight: 700; }
/* ---- Career section (tasks 0016+) ---- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list-item__meta { color: var(--text-muted); font-size: .9rem; }
.list-item .inline { display: inline; margin: 0; }
.subhead { margin: 28px 0 12px; font-size: 1.05rem; }
.stars { letter-spacing: 1px; white-space: nowrap; }
.stars .star { color: var(--stroke); }
/* Rating stars kept a brighter gold; they are supplementary to the text label,
so 3:1 (UI) applies — #d97706 on white = 3.19:1 (task 0026). */
.stars .star--on { color: var(--warning); }
.notice {
margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
background: var(--glass-2); color: var(--text-muted);
border: 1px solid var(--stroke);
}
.detail-card { max-width: 640px; }
.detail-list { margin: 0; display: grid; gap: 2px; }
.detail-row {
display: grid; grid-template-columns: 180px 1fr; gap: 12px;
padding: 12px 0; border-block-end: 1px solid var(--stroke);
}
.detail-row:last-child { border-block-end: 0; }
.detail-row dt { margin: 0; color: var(--text-muted); }
.detail-row dd { margin: 0; }
.detail-notes { white-space: pre-line; }
.form-card { max-width: 560px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 8px; }
@media (max-width: 560px) {
.detail-row { grid-template-columns: 1fr; gap: 2px; }
}
/* Contacts (task 0017) */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 999px; font-size: .85rem;
background: var(--glass-2); color: var(--text); border: 1px solid var(--stroke);
}
/* The "Self-employed" chip in career — unrelated to `role-badge--self`, which is
the orange "you are" identity pill.
Doubled class so it outranks components_v2's generic `.badge`, which loads later
and was flattening this to the plain chip. Once it applied, the teal text it
used to ask for measured 2.91:1 on this blue wash — the two were never seen
together while the rule was being overridden. Text now comes from the same blue
family as the background and border. */
.badge.badge--self { background: var(--info-bg); color: var(--brand-400); border-color: var(--info-border); }
.list-item__spacer { flex: 1; }
.hint { margin: 0 0 14px; color: var(--text-muted); font-size: .85rem; }
.readonly-value { padding: 6px 0; }
/* Listings & interactions (task 0018) */
.muted { color: var(--text-muted); }
.small { font-size: .82rem; }
.head-sub { margin-block-start: 8px; }
.status-badge {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
padding: 3px 10px; border-radius: 999px; font-size: .82rem;
background: var(--badge); color: var(--on-brand);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 18px; }
.chip {
display: inline-flex; gap: 4px; padding: 5px 12px; border-radius: 999px;
background: var(--glass); border: 1px solid var(--stroke);
color: var(--text); font-size: .85rem;
}
.chip:hover { border-color: var(--brand-400); }
.chip--on { background: var(--info-bg); border-color: var(--brand-400); color: var(--brand-400); font-weight: 600; }
.career-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .career-cols { grid-template-columns: 1fr; } }
.interaction-form { margin-block-end: 16px; padding-block-end: 16px; border-block-end: 1px solid var(--stroke); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-block-end: 1px solid var(--stroke); }
.timeline__item:last-child { border-block-end: 0; }
.timeline__icon { flex: 0 0 auto; font-size: 1.1rem; }
.timeline__body { flex: 1; min-width: 0; }
.timeline__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.timeline__desc { margin-block-start: 2px; word-break: break-word; }
/* Career dashboard (task 0019) */
.funnel { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-block-end: 24px; }
.funnel__stage {
display: flex; flex-direction: column; gap: 4px; padding: 12px;
border-radius: var(--radius-sm); background: var(--glass);
border: 1px solid var(--stroke); border-top: 3px solid var(--badge); color: var(--text);
}
.funnel__stage:hover { border-color: var(--brand-400); }
.funnel__count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.funnel__label { font-size: .8rem; color: var(--text-muted); }
.action-group { margin: 14px 0 6px; font-size: .9rem; color: var(--text-muted); }
.action-group--overdue { color: var(--danger); }
.action-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--stroke); }
.action-item:last-child { border-block-end: 0; }
.action-item__date { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.action-item__date.overdue { color: var(--danger); font-weight: 600; }
.subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.subhead-row .subhead { margin: 0; }
.profile-card { max-width: 560px; }
.profile-list { margin: 0; display: grid; gap: 2px; }
.profile-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 12px;
padding: 12px 0;
border-block-end: 1px solid var(--stroke);
}
.profile-row:last-child { border-block-end: 0; }
.profile-row dt { margin: 0; color: var(--text-muted); }
.profile-row dd { margin: 0; font-weight: 600; word-break: break-word; }
@media (max-width: 560px) {
.profile-row { grid-template-columns: 1fr; gap: 2px; }
}
.btn {
font: inherit; font-weight: 600; cursor: pointer; padding: 9px 16px;
border: 1px solid transparent; border-radius: var(--radius-sm);
background: var(--brand-400); color: var(--on-brand);
}
.btn:hover { background: var(--brand-500); }
.btn--ghost { background: var(--glass); color: var(--text); border-color: var(--stroke); }
.btn--block { width: 100%; }
.input {
font: inherit; padding: 9px 12px; border: 1px solid var(--stroke);
border-radius: var(--radius-sm); background: var(--glass); color: var(--text);
}
.input:focus { outline: 2px solid var(--info-bg); outline-offset: 0; border-color: var(--brand-400); }
.toolbar { display: flex; gap: 8px; margin-block-end: 16px; }
.toolbar .input { flex: 1; }
.table { width: 100%; border-collapse: collapse; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--stroke); }
.table th { background: var(--glass-2); color: var(--text-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-block-end: none; }
/* --- Auth / error pages ------------------------------------------------ */
.auth-wrap { display: grid; place-items: center; padding: 24px; min-height: calc(100vh - var(--header-h) - 60px); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card--center { text-align: center; }
.auth-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.auth-card .sub { margin: 0 0 20px; color: var(--text-muted); }
.auth-error {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 8px;
background: var(--danger-bg, var(--tint-2));
border: 1px solid var(--danger-border);
color: var(--danger);
font-size: .9rem;
}
.error-code { font-size: 3rem; line-height: 1; }
.field { display: grid; gap: 6px; margin-block-end: 14px; }
.field label, .field .field-label { font-size: .9rem; color: var(--text-muted); }
/* A caption for a value that is shown but not editable — the "you are" badge in
the companion popup (request 139 verification §3). Not a