/*
 * components.css — every component in the prototype. Tokens only.
 * Elevation is tonal: raised = surface-raised + hairline. No box-shadow exists
 * in this file or any other (COLOUR_SYSTEM §3).
 */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding-inline: var(--space-5); padding-block: var(--space-2);
  border-radius: var(--radius-1); border: var(--line-control) solid transparent;
  font-size: var(--text-3); font-weight: var(--weight-strong); line-height: var(--leading-body);
  text-decoration: none; white-space: nowrap; background: transparent; color: inherit;
  transition: background-color var(--duration-1) var(--ease-out), border-color var(--duration-1) var(--ease-out), color var(--duration-1) var(--ease-out);
}
.btn-primary { background: var(--colour-action-primary); color: var(--colour-text-on-primary); }
.btn-primary:hover { background: var(--colour-action-primary-hover); color: var(--colour-text-on-primary); }
.btn-primary:active { background: var(--colour-action-primary-active); }
/* The ONE accent per screen. Fill only; ink is text-on-accent, never white. */
.btn-accent { background: var(--colour-action-accent); color: var(--colour-text-on-accent); }
.btn-accent:hover { background: var(--colour-action-accent-hover); color: var(--colour-text-on-accent); }
.btn-secondary { background: var(--colour-surface-raised); color: var(--colour-text-primary); border-color: var(--colour-border-control); }
.btn-secondary:hover { background: var(--colour-surface-sunken); color: var(--colour-text-primary); }
.btn-ghost { color: var(--colour-text-link); }
.btn-ghost:hover { background: var(--colour-surface-sunken); }
.btn-sm { min-height: var(--control-height-sm); padding-inline: var(--space-4); font-size: var(--text-2); }
.btn-block { width: 100%; }
.btn-icon { padding-inline: 0; width: var(--control-height); }
.btn[aria-busy='true'] { color: var(--colour-text-muted); border-color: var(--colour-border-control); background: var(--colour-surface-sunken); }
.btn[aria-pressed='true'] .icon { fill: currentColor; }

/* ---- Fields (label above, message directly beneath — COLOUR_SYSTEM §3) --- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-max { max-width: var(--field-max-width); }
.field-label { font-size: var(--text-2); font-weight: var(--weight-strong); line-height: var(--leading-body); }
.field-optional { font-weight: var(--weight-regular); color: var(--colour-text-muted); }
.field-hint { font-size: var(--text-2); color: var(--colour-text-muted); }
.field-error { display: none; align-items: flex-start; gap: var(--space-1); font-size: var(--text-2); color: var(--colour-status-error-text); }
.field-error .icon { width: var(--icon-1); height: var(--icon-1); margin-block-start: var(--space-1); }
.field[data-invalid] .field-error { display: flex; }
.field[data-invalid] .input, .field[data-invalid] .select, .field[data-invalid] .textarea, .field[data-invalid] .choice { border-color: var(--colour-status-error-text); }
.input, .select, .textarea {
  width: 100%; min-height: var(--control-height); padding-inline: var(--space-3); padding-block: var(--space-2);
  border: var(--line-control) solid var(--colour-border-control); border-radius: var(--radius-1);
  background: var(--colour-surface-raised); color: var(--colour-text-primary); line-height: var(--leading-body);
}
.input::placeholder, .textarea::placeholder { color: var(--colour-text-muted); opacity: 1; }
.textarea { min-height: calc(var(--control-height) * 3); resize: vertical; }
.select-wrap { position: relative; }
.select { appearance: none; padding-inline-end: var(--space-7); }
.select-wrap .icon { position: absolute; inset-inline-end: var(--space-3); inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--colour-text-secondary); }
/* Progressive enhancement, Chrome/Edge 135+: the open list takes the input's border and radius. Everywhere else the
   native picker stays — no shim, no replacement; native is the floor for its target size and screen-reader behaviour. */
@supports (appearance: base-select) {
  .select, .select::picker(select) { appearance: base-select; }
  .select::picker-icon { display: none; }
  .select::picker(select) { margin-block-start: var(--space-1); padding: var(--space-1); background: var(--colour-surface-raised); border: var(--line-control) solid var(--colour-border-control); border-radius: var(--radius-1); }
  .select option { padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); }
  .select option::checkmark { display: none; }
  .select option:checked { background: var(--colour-surface-sunken); }
  .select option:hover, .select option:focus-visible { background: var(--colour-action-primary); color: var(--colour-text-on-primary); }
}
.input-ltr { direction: ltr; text-align: start; }
.affix { display: flex; align-items: stretch; }
.affix .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.affix-unit { display: flex; align-items: center; padding-inline: var(--space-3); border: var(--line-control) solid var(--colour-border-control); border-inline-start: 0; border-start-end-radius: var(--radius-1); border-end-end-radius: var(--radius-1); background: var(--colour-surface-sunken); color: var(--colour-text-secondary); white-space: nowrap; }
.row-2 { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
input[type='checkbox'], input[type='radio'] { width: var(--icon-2); height: var(--icon-2); accent-color: var(--colour-action-primary); margin: 0; flex: none; }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--line-control) solid var(--colour-border-control); border-radius: var(--radius-1); background: var(--colour-surface-raised); cursor: pointer; }
.choice:has(:checked) { background: var(--colour-surface-sunken); border-color: var(--colour-action-primary); }
.choice input { margin-block-start: var(--space-1); }
.choice > span { display: grid; gap: var(--space-1); min-width: 0; }
.choice-list { display: grid; gap: var(--space-2); }
.check-inline { display: flex; gap: var(--space-2); align-items: flex-start; }
.counter { font-size: var(--text-2); color: var(--colour-text-muted); text-align: end; }
.error-summary { padding: var(--space-4); border: var(--line-control) solid var(--colour-status-error-text); border-radius: var(--radius-2); background: var(--colour-status-error-tint); }
.error-summary h2, .error-summary h3 { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-3); color: var(--colour-status-error-text); }
.error-summary ul { padding-inline-start: var(--space-5); margin-block-start: var(--space-2); }
.error-summary a { color: var(--colour-status-error-text); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--colour-border-hairline); }
.form-actions .btn { flex: 1 1 auto; }
@media (min-width: 48rem) { .form-actions .btn { flex: 0 0 auto; } }
.form-actions .push { margin-inline-start: auto; }

/* ---- Segmented control (radiogroup, roving tabindex) --------------------- */
.segmented { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--colour-surface-sunken); border-radius: var(--radius-full); }
.segmented-block { display: flex; width: 100%; }
.segmented-item { flex: 1 1 0; min-height: var(--control-height-sm); padding-inline: var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--colour-text-secondary); font-weight: var(--weight-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; transition: background-color var(--duration-1) var(--ease-out), color var(--duration-1) var(--ease-out); }
.segmented-item[aria-checked='true'] { background: var(--colour-action-primary); color: var(--colour-text-on-primary); }
.segmented-lg .segmented-item { min-height: var(--control-height); font-size: var(--text-4); }

/* ---- Chips and tags ------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height-sm); padding-inline: var(--space-3); border-radius: var(--radius-full); border: var(--line-control) solid var(--colour-border-control); background: var(--colour-surface-raised); color: var(--colour-text-primary); font-size: var(--text-2); font-weight: var(--weight-strong); white-space: nowrap; text-decoration: none; }
.chip[aria-pressed='true'] { background: var(--colour-action-primary); border-color: var(--colour-action-primary); color: var(--colour-text-on-primary); }
.chip .icon { width: var(--icon-1); height: var(--icon-1); }
.chip-dismiss { display: inline-grid; place-items: center; width: var(--icon-3); height: var(--icon-3); margin-inline-end: calc(var(--space-2) * -1); border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; }
.chip-dismiss:hover { background: var(--colour-surface-sunken); }
.chip-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-1); scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); padding-block: var(--space-1); border-radius: var(--radius-1); background: var(--colour-surface-sunken); color: var(--colour-text-secondary); font-size: var(--text-2); white-space: nowrap; }

/* ---- Status badge: shape + label + colour, ALWAYS all three (Rule 2) ---- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); padding-block: var(--space-1); border-radius: var(--radius-full); font-size: var(--text-2); font-weight: var(--weight-strong); line-height: var(--leading-body); background: var(--colour-surface-sunken); color: var(--colour-text-secondary); white-space: nowrap; }
.badge .icon { width: var(--icon-1); height: var(--icon-1); }
.badge[data-status='info'] { background: var(--colour-status-info-tint); color: var(--colour-status-info-text); }
.badge[data-status='success'] { background: var(--colour-status-success-tint); color: var(--colour-status-success-text); }
.badge[data-status='warning'] { background: var(--colour-status-warning-tint); color: var(--colour-status-warning-text); }
.badge[data-status='error'] { background: var(--colour-status-error-tint); color: var(--colour-status-error-text); }

/* ---- Notice (inline status block) --------------------------------------- */
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-2); border: var(--hairline) solid var(--colour-border-hairline); background: var(--colour-surface-sunken); color: var(--colour-text-primary); }
.notice .icon { flex: none; margin-block-start: var(--space-1); }
.notice-title { font-weight: var(--weight-strong); }
.notice[data-status='info'] { background: var(--colour-status-info-tint); border-color: var(--colour-status-info-text); }
.notice[data-status='info'] .icon, .notice[data-status='info'] .notice-title { color: var(--colour-status-info-text); }
.notice[data-status='success'] { background: var(--colour-status-success-tint); border-color: var(--colour-status-success-text); }
.notice[data-status='success'] .icon, .notice[data-status='success'] .notice-title { color: var(--colour-status-success-text); }
.notice[data-status='warning'] { background: var(--colour-status-warning-tint); border-color: var(--colour-border-accent); }
.notice[data-status='warning'] .icon, .notice[data-status='warning'] .notice-title { color: var(--colour-status-warning-text); }
.notice[data-status='error'] { background: var(--colour-status-error-tint); border-color: var(--colour-status-error-text); }
.notice[data-status='error'] .icon, .notice[data-status='error'] .notice-title { color: var(--colour-status-error-text); }

/* ---- Surfaces ------------------------------------------------------------ */
.card { background: var(--colour-surface-raised); border: var(--hairline) solid var(--colour-border-hairline); border-radius: var(--radius-2); padding: var(--space-4); }
.card-lg { padding: var(--space-5); }
.panel { background: var(--colour-surface-raised); border: var(--hairline) solid var(--colour-border-hairline); border-radius: var(--radius-3); padding: var(--space-5); }
.well { background: var(--colour-surface-sunken); border-radius: var(--radius-2); padding: var(--space-4); }
.avatar { width: var(--avatar-1); height: var(--avatar-1); flex: none; border-radius: var(--radius-full); background: var(--colour-surface-sunken); border: var(--hairline) solid var(--colour-border-hairline); color: var(--colour-text-secondary); display: grid; place-items: center; font-size: var(--text-2); font-weight: var(--weight-strong); }
.avatar-2 { width: var(--avatar-2); height: var(--avatar-2); font-size: var(--text-4); }

/* ---- Job card: pay first and largest; employer mark subordinate ---------- */
.job-card { display: flex; flex-direction: column; gap: var(--space-3); }
.job-card:hover { border-color: var(--colour-border-control); }
.job-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.job-pay { font-size: var(--text-5); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
/* The pay line is the flexible item: the unit wraps inside it first, and the badge only drops to a new line when the nowrap money itself leaves no room. */
.job-top .job-pay { flex: 1 1 0; }
.job-pay .unit { font-size: var(--text-2); font-weight: var(--weight-regular); color: var(--colour-text-secondary); white-space: nowrap; }
.job-title { font-size: var(--text-4); font-weight: var(--weight-strong); line-height: var(--leading-body); }
.job-title a { color: var(--colour-text-primary); text-decoration: none; }
.job-title a:hover { text-decoration: underline; color: var(--colour-text-primary); }
.job-company { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2); color: var(--colour-text-secondary); flex-wrap: wrap; }
.job-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-2); color: var(--colour-text-muted); }
.job-meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.job-meta .icon { width: var(--icon-1); height: var(--icon-1); }
.job-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---- At-a-glance strip: divided on desktop, undivided list on mobile ----- */
.stats { display: grid; gap: var(--space-4); }
.stat-label { font-size: var(--text-2); color: var(--colour-text-muted); }
.stat-value { font-size: var(--text-4); font-weight: var(--weight-strong); line-height: var(--leading-body); }
@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .stats > * + * { border-inline-start: var(--hairline) solid var(--colour-border-hairline); padding-inline-start: var(--space-5); }
}

/* ---- Section nav (anchors styled as a tab row; content stays visible) ---- */
.section-nav { display: flex; gap: var(--space-2); overflow-x: auto; border-block-end: var(--hairline) solid var(--colour-border-hairline); scrollbar-width: none; }
.section-nav a { display: inline-block; padding: var(--space-3); text-decoration: none; color: var(--colour-text-secondary); font-weight: var(--weight-strong); border-block-end: var(--focus-width) solid transparent; white-space: nowrap; margin-block-end: calc(var(--hairline) * -1); }
.section-nav a[aria-current] { color: var(--colour-text-primary); border-color: var(--colour-action-primary); }

/* ---- Accordion (native details) ------------------------------------------ */
.faq { margin-inline: auto; }
.faq-section .section-head { justify-content: center; }
.faq details { border-block-end: var(--hairline) solid var(--colour-border-hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; font-weight: var(--weight-strong); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--colour-text-link); }
.faq details[open] .i-open { display: none; }
.faq details:not([open]) .i-close { display: none; }
.faq-body { padding-block-end: var(--space-4); color: var(--colour-text-secondary); max-width: var(--measure-prose); }

/* ---- Stepper (mirrors with direction; numbers carry the order) ----------- */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2); color: var(--colour-text-muted); white-space: nowrap; }
.step-num { width: var(--icon-3); height: var(--icon-3); flex: none; border-radius: var(--radius-full); border: var(--line-control) solid var(--colour-border-control); display: grid; place-items: center; font-size: var(--text-1); font-weight: var(--weight-strong); }
.step-num .icon { width: var(--icon-1); height: var(--icon-1); display: none; }
.step[aria-current='step'] { color: var(--colour-text-primary); font-weight: var(--weight-strong); }
.step[aria-current='step'] .step-num { background: var(--colour-action-primary); border-color: var(--colour-action-primary); color: var(--colour-text-on-primary); }
.step[data-done] .step-num { background: var(--colour-status-success-tint); border-color: var(--colour-status-success-text); color: var(--colour-status-success-text); }
.step[data-done] .step-num .icon { display: block; }
.step[data-done] .step-num .n { display: none; }
.step-line { flex: 1 1 auto; height: var(--hairline); background: var(--colour-border-hairline); }
.step-label { display: none; }
@media (min-width: 48rem) { .step-label { display: inline; } }

/* ---- Dialog and sheet ---------------------------------------------------- */
dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: var(--scrim); }
.dialog { width: min(100% - var(--space-8), var(--dialog-width)); background: var(--colour-surface-raised); border: var(--hairline) solid var(--colour-border-hairline); border-radius: var(--radius-3); }
.dialog-body { padding: var(--space-5); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; padding-block-start: var(--space-5); }
.dialog-actions .btn { flex: 1 1 auto; }
@media (min-width: 48rem) { .dialog-actions .btn { flex: 0 0 auto; } }
.sheet { position: fixed; inset-block: 0; inset-inline-end: 0; margin: 0; width: min(100%, var(--sheet-width)); max-width: 100%; height: 100%; max-height: 100%; background: var(--colour-surface-raised); border-inline-start: var(--hairline) solid var(--colour-border-hairline); display: none; flex-direction: column; }
.sheet[open] { display: flex; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-block-end: var(--hairline) solid var(--colour-border-hairline); }
.sheet-body { padding: var(--space-4); overflow: auto; flex: 1 1 auto; }
.sheet-foot { padding: var(--space-4); border-block-start: var(--hairline) solid var(--colour-border-hairline); display: flex; gap: var(--space-3); }
.sheet-foot .btn { flex: 1 1 auto; }
.overlay-nav { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; background: var(--colour-surface-page); display: none; flex-direction: column; }
.overlay-nav[open] { display: flex; }
.overlay-nav-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--gutter); }
.overlay-nav-list { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--gutter); }
.overlay-nav-list a { font-size: var(--overlay-nav-text); line-height: var(--leading-heading); font-weight: var(--weight-regular); color: var(--colour-text-primary); text-decoration: none; padding-block: var(--space-2); }
.overlay-nav-list a[aria-current] { color: var(--colour-text-link); font-weight: var(--weight-strong); }

/* ---- Toast (surface-inverse, COLOUR_SYSTEM §3) --------------------------- */
.toast-region { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: calc(100% - var(--space-6)); }
body.has-sticky .toast-region { inset-block-end: calc(var(--sticky-bar-height) + var(--space-4)); }
@media (min-width: 64rem) { body.has-sticky .toast-region { inset-block-end: var(--space-4); } }
.toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); background: var(--colour-surface-inverse); color: var(--colour-text-inverse); font-size: var(--text-2); }
.toast .btn { color: var(--colour-text-inverse); min-height: var(--control-height-sm); padding-inline: var(--space-2); }
.toast .btn:hover { background: var(--colour-text-secondary); }

/* ---- Skeleton, empty, error --------------------------------------------- */
.skeleton { display: block; height: var(--skeleton-line); background: var(--colour-surface-sunken); border-radius: var(--radius-1); }
.skeleton-lg { height: var(--space-6); }
.w-25 { width: 25%; } .w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); border: var(--hairline) dashed var(--colour-border-hairline); border-radius: var(--radius-2); max-width: var(--measure-prose); margin-inline: auto; }
.state .icon { width: var(--icon-3); height: var(--icon-3); color: var(--colour-text-muted); }
.state-title { font-size: var(--text-4); font-weight: var(--weight-strong); }
.state-body { color: var(--colour-text-secondary); }
.state[data-status='error'] .icon, .state[data-status='error'] .state-title { color: var(--colour-status-error-text); }

/* ---- Sticky action bar (mobile) — the page reserves its height ----------- */
.sticky-bar { position: fixed; inset-block-end: 0; inset-inline: 0; min-height: var(--sticky-bar-height); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter); background: var(--colour-surface-raised); border-block-start: var(--hairline) solid var(--colour-border-hairline); }
body.has-sticky main { padding-block-end: var(--sticky-bar-height); }
@media (min-width: 64rem) { .sticky-bar { display: none; } body.has-sticky main { padding-block-end: 0; } }

/* ---- Combobox (input + listbox, aria-activedescendant) ------------------- */
.combobox-control { position: relative; }
.combobox .input { padding-inline-end: var(--space-7); }
.combobox-toggle { position: absolute; inset-inline-end: 0; inset-block-start: 0; height: var(--control-height); width: var(--control-height); border: 0; background: transparent; color: var(--colour-text-secondary); display: grid; place-items: center; border-radius: var(--radius-1); }
.combobox-list { position: absolute; inset-block-start: 100%; inset-inline: 0; margin-block-start: var(--space-1); max-height: var(--popover-max-height); overflow: auto; padding: var(--space-1); background: var(--colour-surface-raised); border: var(--line-control) solid var(--colour-border-control); border-radius: var(--radius-1); z-index: var(--z-overlay); }
.combobox-group-label { padding: var(--space-2) var(--space-3); font-size: var(--text-1); font-weight: var(--weight-strong); color: var(--colour-text-muted); }
.combobox-list [role='option'] { padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-2); }
.combobox-list [role='option'][aria-selected='true'] { background: var(--colour-surface-sunken); }
.combobox-list [role='option'].is-active { background: var(--colour-action-primary); color: var(--colour-text-on-primary); }
.combobox-list [role='option'] .icon { width: var(--icon-1); height: var(--icon-1); display: none; }
.combobox-list [role='option'][aria-selected='true'] .icon { display: block; }

/* ---- Breadcrumb (separators mirror) -------------------------------------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-2); color: var(--colour-text-muted); }
.breadcrumb a { color: var(--colour-text-secondary); }
.breadcrumb .icon { width: var(--icon-1); height: var(--icon-1); }
.breadcrumb [aria-current] { color: var(--colour-text-primary); }

/* ---- Rating (companies and postings only — never a worker) --------------- */
.rating { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2); color: var(--colour-text-secondary); }
.rating .icon { width: var(--icon-1); height: var(--icon-1); fill: currentColor; color: var(--colour-status-warning-text); }

/* ---- Timeline of application stages ------------------------------------- */
.timeline { display: grid; gap: var(--space-3); }
.timeline li { display: flex; gap: var(--space-3); align-items: flex-start; }
.timeline .badge { flex: none; }

/* ---- Prototype control strip — not product UI; hidden in renders --------- */
.proto { background: var(--colour-surface-inverse); color: var(--colour-text-inverse); font-size: var(--text-1); padding: var(--space-1) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.proto label { display: inline-flex; align-items: center; gap: var(--space-1); }
.proto select { background: var(--colour-surface-inverse); color: var(--colour-text-inverse); border: var(--hairline) solid var(--colour-text-muted); border-radius: var(--radius-1); font-size: var(--text-1); }
.proto a { color: var(--colour-text-inverse); }
body[data-render] .proto { display: none; }

/* ---- File input: the native control is kept (focusable, keyboard-operable)
   but visually replaced so its chrome is not the browser's English strings. */
.file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.file input[type='file'] { position: absolute; width: var(--hairline); height: var(--hairline); opacity: 0; overflow: hidden; }
.file input[type='file']:focus-visible + .btn { outline: var(--focus-width) solid var(--colour-focus-ring); outline-offset: var(--focus-offset); }
.file-name { font-size: var(--text-2); color: var(--colour-text-muted); }