/* Pilot UI 2.0 — components (Phase 1).

   One stylesheet for every shared component in templates/ui/. Rules:
     - Values come from core/css/ui/tokens.css only. The ui_lint ratchet
       starts this file at zero colour literals and zero weights above 600.
     - Classes are `ui-*`, so loading this beside the legacy CSS changes
       nothing until a page uses a component.
     - Pages use these for layout only (`extra_class`), never to restyle.

   Breakpoints: phone < 600px, sheet layout <= 860px (matches
   core/js/filter_sheet.js).
*/

/* ── Utilities ─────────────────────────────────────────────────────────── */

.ui-visually-hidden{
    position:absolute!important;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.ui-kicker{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--ui-font-body);
    font-size:var(--ui-text-label);
    font-weight:var(--ui-weight-medium);
    letter-spacing:var(--ui-tracking-label);
    text-transform:uppercase;
    color:var(--ui-muted);
}
.ui-kicker::before{content:"";width:18px;height:1px;background:var(--ui-gold-ink)}

/* ── Button ────────────────────────────────────────────────────────────── */

.ui-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);
    min-height:var(--ui-target);
    padding:0 18px;
    border:1px solid transparent;
    border-radius:var(--ui-radius-control);
    font-family:var(--ui-font-body);
    font-size:15px;
    font-weight:var(--ui-weight-strong);
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background var(--ui-duration-hover) var(--ui-ease),
               border-color var(--ui-duration-hover) var(--ui-ease),
               transform var(--ui-duration-press) var(--ui-ease);
}
.ui-btn:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-btn:active{transform:translateY(1px)}
.ui-btn--primary{background:var(--ui-action);color:var(--ui-on-action)}
.ui-btn--primary:hover{transform:translateY(-1px)}
.ui-btn--secondary{background:var(--ui-panel);color:var(--ui-ink);border-color:var(--ui-control)}
.ui-btn--secondary:hover{border-color:var(--ui-ink)}
.ui-btn--quiet{
    min-width:var(--ui-target);
    padding:0 6px;
    background:transparent;color:var(--ui-ink);
    text-decoration:underline;text-decoration-color:var(--ui-control);text-underline-offset:4px;
}
.ui-btn--quiet:hover{text-decoration-color:var(--ui-ink)}
.ui-btn--danger{background:var(--ui-panel);color:var(--ui-danger);border-color:var(--ui-danger)}
.ui-btn--sm{min-height:var(--ui-target-compact);padding:0 12px;font-size:var(--ui-text-small)}
.ui-btn--lg{min-height:52px;padding:0 24px;font-size:16px}
/* On a fixed dark band (the closing call to action, the map preview):
   white fill, or a white outline for the second action. */
.ui-btn--inverse{background:var(--ui-inverse);color:var(--ui-on-inverse)}
.ui-btn--inverse:hover{transform:translateY(-1px)}
.ui-btn--inverse-outline{background:transparent;color:var(--ui-inverse);border-color:var(--ui-inverse-line)}
.ui-btn--inverse-outline:hover{border-color:var(--ui-inverse)}
.ui-btn--inverse:focus-visible,.ui-btn--inverse-outline:focus-visible{outline-color:var(--ui-inverse)}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{
    cursor:not-allowed;transform:none;
    background:var(--ui-sunken);color:var(--ui-muted);border-color:var(--ui-line);
}
@media (max-width:599px){.ui-btn--sm{min-height:var(--ui-target)}}

/* ── Field ─────────────────────────────────────────────────────────────── */

.ui-field{display:flex;flex-direction:column;gap:6px;font-family:var(--ui-font-body);min-width:0}
.ui-field__label{
    font-size:var(--ui-text-small);
    font-weight:var(--ui-weight-strong);
    color:var(--ui-ink);
    padding:0;
}
.ui-field__optional{font-weight:var(--ui-weight-regular);color:var(--ui-muted)}
.ui-field__hint{font-size:13px;line-height:1.45;color:var(--ui-muted)}
.ui-input{
    width:100%;
    min-height:var(--ui-target);
    padding:0 12px;
    border:1px solid var(--ui-control);
    border-radius:var(--ui-radius-control);
    background:var(--ui-panel);
    color:var(--ui-ink);
    font:inherit;
    font-size:var(--ui-text-body);
}
textarea.ui-input{min-height:120px;padding:10px 12px;line-height:var(--ui-leading-body);resize:vertical}
select.ui-input{padding-right:32px}
.ui-input::placeholder{color:var(--ui-muted);opacity:1}
.ui-input:hover{border-color:var(--ui-ink-2)}
.ui-input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px;border-color:var(--ui-ink)}
.ui-field--error .ui-input{border-color:var(--ui-danger)}
.ui-field__error{display:flex;flex-direction:column;gap:2px}
.ui-field__error p{
    display:flex;gap:6px;align-items:flex-start;
    font-size:13px;font-weight:var(--ui-weight-medium);color:var(--ui-danger);
}
.ui-field__error-mark{
    flex:none;display:inline-grid;place-items:center;
    width:16px;height:16px;margin-top:1px;border-radius:50%;
    background:var(--ui-danger);color:var(--ui-panel);font-size:11px;font-weight:var(--ui-weight-strong);
}

/* ── Choice chips (radio group) ────────────────────────────────────────── */

.ui-choices{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--ui-space-2)}
.ui-choices__row{display:flex;flex-wrap:wrap;gap:6px}
.ui-chip{
    position:relative;
    display:inline-flex;align-items:center;
    min-height:var(--ui-target-compact);
    padding:0 14px;
    border:1px solid var(--ui-control);
    border-radius:var(--ui-radius-pill);
    background:var(--ui-panel);
    color:var(--ui-ink-2);
    font-family:var(--ui-font-body);
    font-size:var(--ui-text-small);
    cursor:pointer;
    transition:background var(--ui-duration-hover) var(--ui-ease),border-color var(--ui-duration-hover) var(--ui-ease);
}
.ui-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ui-chip:hover{border-color:var(--ui-ink)}
.ui-chip:has(input:checked){background:var(--ui-action);border-color:var(--ui-action);color:var(--ui-on-action)}
.ui-chip:has(input:focus-visible){outline:2px solid var(--ui-focus);outline-offset:2px}
@media (max-width:599px){.ui-chip{min-height:var(--ui-target)}}

/* ── Toggle (checkbox as switch) ───────────────────────────────────────── */

.ui-toggle-field{display:flex;flex-direction:column;gap:4px;font-family:var(--ui-font-body)}
.ui-toggle{
    position:relative;
    display:inline-flex;align-items:center;gap:var(--ui-space-3);
    min-height:var(--ui-target);
    cursor:pointer;
    font-size:15px;color:var(--ui-ink);
}
.ui-toggle__input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.ui-toggle__track{
    position:relative;flex:none;
    width:44px;height:26px;border-radius:var(--ui-radius-pill);
    background:var(--ui-sunken);border:1px solid var(--ui-control);
    transition:background var(--ui-duration-hover) var(--ui-ease);
}
.ui-toggle__track::after{
    content:"";position:absolute;top:2px;left:2px;
    width:20px;height:20px;border-radius:50%;
    background:var(--ui-panel);box-shadow:var(--ui-shadow-raised);
    transition:transform var(--ui-duration-hover) var(--ui-ease);
}
.ui-toggle__input:checked + .ui-toggle__track{background:var(--ui-action);border-color:var(--ui-action)}
.ui-toggle__input:checked + .ui-toggle__track::after{transform:translateX(18px)}
.ui-toggle__input:focus-visible + .ui-toggle__track{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-toggle-field .ui-field__hint{padding-left:56px}

/* ── Picker (pill_picker.js inside .ui-picker) ─────────────────────────── */

.ui-picker__root{position:relative;display:flex;flex-direction:column;gap:var(--ui-space-3)}
/* Before pill_picker.js runs (or without JS) the native checkbox list
   takes the enhanced picker's height, search box plus pill cloud, so the
   swap doesn't push the rest of the form down. */
.ui-picker__root > :first-child:not(.jp-pp__native-hidden){max-height:calc(var(--ui-target) + var(--ui-space-3) + 220px);overflow-y:auto}
.ui-picker__root > .jp-pp__native-hidden{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);pointer-events:none;
}
.ui-picker .jp-pp__search{
    width:100%;min-height:var(--ui-target);padding:0 12px;
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-control);
    background:var(--ui-panel);color:var(--ui-ink);font:inherit;font-size:var(--ui-text-body);
}
.ui-picker .jp-pp__search:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}
.ui-picker .jp-pp__selected,.ui-picker .jp-pp__cloud{display:flex;flex-wrap:wrap;gap:6px}
.ui-picker .jp-pp__selected[hidden]{display:none}
.ui-picker .jp-pp__selected-label{
    width:100%;font-size:var(--ui-text-label);letter-spacing:var(--ui-tracking-label);
    text-transform:uppercase;color:var(--ui-muted);font-weight:var(--ui-weight-medium);
}
.ui-picker .jp-pp__cloud{max-height:220px;overflow-y:auto;padding:2px}
.ui-picker .jp-pp__pill{
    min-height:var(--ui-target-compact);padding:0 12px;
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-pill);
    background:var(--ui-panel);color:var(--ui-ink-2);
    font:inherit;font-size:var(--ui-text-small);cursor:pointer;
}
.ui-picker .jp-pp__pill:hover{border-color:var(--ui-ink)}
.ui-picker .jp-pp__pill:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-picker .jp-pp__pill--on{background:var(--ui-action);border-color:var(--ui-action);color:var(--ui-on-action)}
.ui-picker .jp-pp__pill--on::after{content:"×";margin-left:6px}
.ui-picker .jp-pp__empty{font-size:var(--ui-text-small);color:var(--ui-muted)}
@media (max-width:599px){.ui-picker .jp-pp__pill{min-height:var(--ui-target)}}

/* ── Page header ───────────────────────────────────────────────────────── */

.ui-page-header{
    display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ui-space-5);
    flex-wrap:wrap;
    padding-block:var(--ui-space-6) var(--ui-space-5);
}
.ui-page-header__text{display:flex;flex-direction:column;gap:var(--ui-space-3);max-width:var(--ui-measure);min-width:0}
.ui-page-header__title{
    font-family:var(--ui-font-display);
    font-size:var(--ui-text-h1);
    font-weight:var(--ui-weight-strong);
    line-height:var(--ui-leading-tight);
    letter-spacing:var(--ui-tracking-display);
    color:var(--ui-ink);
}
.ui-page-header__lede{font-size:var(--ui-text-body-lg);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
.ui-page-header__action{display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}
@media (max-width:599px){.ui-page-header{padding-block:var(--ui-space-5) var(--ui-space-4)}}

/* ── Match badge ───────────────────────────────────────────────────────── */

.ui-match{
    display:inline-flex;align-items:center;gap:var(--ui-space-2);
    padding:3px 10px 3px 3px;
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-pill);
    background:var(--ui-panel);
    font-family:var(--ui-font-body);font-size:13px;font-weight:var(--ui-weight-strong);color:var(--ui-ink);
    white-space:nowrap;
}
.ui-match__score{
    display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 6px;
    border-radius:var(--ui-radius-pill);font-variant-numeric:tabular-nums;font-weight:var(--ui-weight-strong);
}
.ui-match--strong .ui-match__score{background:var(--ui-gold);color:var(--ui-on-gold)}
.ui-match--good .ui-match__score{background:var(--ui-gold-wash);color:var(--ui-gold-ink)}
.ui-match--stretch .ui-match__score{background:var(--ui-sunken);color:var(--ui-ink-2)}

/* ── List card ─────────────────────────────────────────────────────────── */

.ui-card{
    position:relative;
    display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    gap:var(--ui-space-2) var(--ui-space-4);
    padding:var(--ui-space-4) var(--ui-space-5);
    background:var(--ui-panel);
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
    font-family:var(--ui-font-body);
    transition:box-shadow var(--ui-duration-hover) var(--ui-ease),border-color var(--ui-duration-hover) var(--ui-ease);
}
/* No monogram (departments, sub-industries): text starts at the edge. */
.ui-card--plain{grid-template-columns:minmax(0,1fr) auto}
.ui-card--plain .ui-card__meta,.ui-card--plain .ui-card__foot{grid-column:1 / -1}
.ui-card:hover{box-shadow:var(--ui-shadow-raised);border-color:var(--ui-control)}
.ui-card:has(.ui-card__link:focus-visible){outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-card__mono{
    width:44px;height:44px;border-radius:8px;
    display:grid;place-items:center;
    background:var(--ui-sunken);color:var(--ui-ink);
    font-family:var(--ui-font-display);font-weight:var(--ui-weight-strong);font-size:15px;
}
.ui-card__head{min-width:0;display:flex;flex-direction:column;gap:2px}
.ui-card__overline{font-size:13px;color:var(--ui-muted)}
.ui-card__title{
    font-family:var(--ui-font-display);font-size:18px;font-weight:var(--ui-weight-strong);
    line-height:1.3;letter-spacing:-.015em;color:var(--ui-ink);
}
.ui-card__link{color:inherit;text-decoration:none}
.ui-card__link:focus-visible{outline:none}
/* The title link covers the whole card: one link, one tab stop. */
.ui-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ui-card__fit{align-self:start}
.ui-card__meta{
    grid-column:2 / -1;
    display:flex;flex-wrap:wrap;gap:4px 14px;
    list-style:none;margin:0;padding:0;
    font-size:var(--ui-text-small);color:var(--ui-ink-2);
}
/* The dot trails each fact, so a wrapped line never starts with "·". */
.ui-card__meta li:not(:last-child)::after{content:"·";margin-left:14px;color:var(--ui-muted)}
.ui-card__foot{
    grid-column:2 / -1;
    display:flex;justify-content:space-between;align-items:center;gap:var(--ui-space-3);flex-wrap:wrap;
}
.ui-card__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:12px}
.ui-card__tags li{padding:2px 8px;border-radius:4px;background:var(--ui-sunken);color:var(--ui-ink-2)}
.ui-card__tags-more{background:transparent!important;color:var(--ui-muted)!important}
.ui-card__tags li.ui-card__tag--hint{background:var(--ui-gold-wash);color:var(--ui-gold-ink)}
.ui-card__cta{font-size:var(--ui-text-small);font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-card__summary{font-size:var(--ui-text-small);color:var(--ui-ink-2);margin-top:2px}
.ui-card__end{display:flex;align-items:center;gap:var(--ui-space-3);margin-left:auto;flex-wrap:wrap}
.ui-card__time{font-size:13px;color:var(--ui-muted)}
/* Explicit actions sit above the stretched title link so they stay clickable. */
.ui-card__actions{position:relative;z-index:1;display:flex;gap:var(--ui-space-2);align-items:center}
.ui-card__actions form{margin:0}
.ui-card__status{font-size:var(--ui-text-small);font-weight:var(--ui-weight-medium);color:var(--ui-success)}
@media (max-width:599px){
    .ui-card{grid-template-columns:40px minmax(0,1fr);padding:var(--ui-space-4)}
    .ui-card__mono{width:40px;height:40px}
    .ui-card__fit{grid-column:2}
    .ui-card--plain{grid-template-columns:minmax(0,1fr) auto}
    .ui-card--plain .ui-card__fit{grid-column:auto}
}

/* ── Tags: a standalone list of short labels (skills, departments) ─────── */

.ui-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-family:var(--ui-font-body);font-size:var(--ui-text-small)}
.ui-tags li{padding:4px 10px;border-radius:6px;background:var(--ui-sunken);color:var(--ui-ink)}
.ui-tags--strong li{background:var(--ui-panel);box-shadow:inset 0 0 0 1px var(--ui-control)}
.ui-tags li.ui-tags__have{background:var(--ui-success-wash);color:var(--ui-ink)}
.ui-tags li.ui-tags__have::before{content:"✓ ";color:var(--ui-success)}

/* ── Stat ──────────────────────────────────────────────────────────────── */

.ui-stat{display:flex;flex-direction:column;gap:2px;padding-top:var(--ui-space-4);border-top:1px solid var(--ui-control);font-family:var(--ui-font-body)}
.ui-stat__value{
    font-family:var(--ui-font-display);font-size:36px;font-weight:var(--ui-weight-medium);
    line-height:1;letter-spacing:-.035em;color:var(--ui-ink);font-variant-numeric:tabular-nums;
    margin-bottom:var(--ui-space-2);
}
.ui-stat__label{font-size:15px;font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-stat__source{font-size:13px;color:var(--ui-muted)}

/* ── Data table ────────────────────────────────────────────────────────── */

.ui-table-wrap{
    overflow-x:auto;
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
    background:var(--ui-panel);
}
.ui-table-wrap:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-table{width:100%;border-collapse:collapse;font-family:var(--ui-font-body);font-size:var(--ui-text-small);color:var(--ui-ink)}
.ui-table__caption{padding:var(--ui-space-3) var(--ui-space-4);text-align:left;font-weight:var(--ui-weight-strong)}
.ui-table th,.ui-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ui-line)}
.ui-table thead th{
    background:var(--ui-sunken);color:var(--ui-ink-2);
    font-size:var(--ui-text-label);font-weight:var(--ui-weight-strong);
    letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.ui-table tbody th{font-weight:var(--ui-weight-strong)}
.ui-table tbody tr:last-child th,.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table td{font-variant-numeric:tabular-nums}

/* ── Empty state ───────────────────────────────────────────────────────── */

.ui-empty{
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--ui-space-3);
    padding:var(--ui-space-5);
    border:1px dashed var(--ui-control);border-radius:var(--ui-radius-card);
    font-family:var(--ui-font-body);
}
.ui-empty__title{font-family:var(--ui-font-display);font-size:var(--ui-text-h3);font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-empty__body{font-size:15px;color:var(--ui-ink-2);max-width:52ch}
.ui-empty__actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);align-items:center}

/* ── Notice ────────────────────────────────────────────────────────────── */

.ui-notice{
    display:flex;gap:var(--ui-space-3);align-items:flex-start;
    padding:var(--ui-space-3) var(--ui-space-4);
    border-radius:var(--ui-radius-card);
    font-family:var(--ui-font-body);font-size:var(--ui-text-small);line-height:1.5;
}
.ui-notice__mark{
    flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
    font-size:12px;font-weight:var(--ui-weight-strong);color:var(--ui-panel);
}
.ui-notice__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-notice__title{font-weight:var(--ui-weight-strong)}
.ui-notice--info{background:var(--ui-info-wash);color:var(--ui-info)}
.ui-notice--info .ui-notice__mark{background:var(--ui-info)}
.ui-notice--success{background:var(--ui-success-wash);color:var(--ui-success)}
.ui-notice--success .ui-notice__mark{background:var(--ui-success)}
.ui-notice--warning{background:var(--ui-warning-wash);color:var(--ui-warning)}
.ui-notice--warning .ui-notice__mark{background:var(--ui-warning)}
.ui-notice--danger{background:var(--ui-danger-wash);color:var(--ui-danger)}
.ui-notice--danger .ui-notice__mark{background:var(--ui-danger)}

/* ── Toasts ────────────────────────────────────────────────────────────── */

.ui-toasts{display:flex;flex-direction:column;gap:var(--ui-space-2);margin-block:var(--ui-space-3)}
.ui-toast{
    display:flex;gap:var(--ui-space-3);align-items:center;
    max-width:440px;
    padding:6px 6px 6px var(--ui-space-4);
    border-radius:var(--ui-radius-card);
    background:var(--ui-action);color:var(--ui-on-action);
    box-shadow:var(--ui-shadow-overlay);
    font-family:var(--ui-font-body);font-size:var(--ui-text-small);
}
.ui-toast__mark{flex:none;font-weight:var(--ui-weight-strong)}
.ui-toast__text{flex:1;min-width:0}
.ui-toast__close{
    flex:none;width:var(--ui-target);height:var(--ui-target);
    border:0;border-radius:var(--ui-radius-control);
    background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;
}
.ui-toast__close:focus-visible{outline:2px solid var(--ui-on-action);outline-offset:-4px}

/* ── Active filters ────────────────────────────────────────────────────── */

.ui-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2);font-family:var(--ui-font-body)}
.ui-active-filters__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.ui-active-filters__chip{
    display:inline-flex;align-items:center;gap:6px;
    min-height:var(--ui-target-compact);padding:0 10px 0 12px;
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-pill);
    background:var(--ui-panel);color:var(--ui-ink);
    font-size:var(--ui-text-small);text-decoration:none;
}
.ui-active-filters__chip span{font-size:16px;line-height:1;color:var(--ui-muted)}
.ui-active-filters__chip:hover{border-color:var(--ui-ink)}
.ui-active-filters__chip:hover span{color:var(--ui-ink)}
.ui-active-filters__chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-active-filters__clear{
    display:inline-flex;align-items:center;min-height:var(--ui-target-compact);padding:0 6px;
    font-size:var(--ui-text-small);color:var(--ui-ink);
    text-decoration:underline;text-decoration-color:var(--ui-control);text-underline-offset:3px;
}
.ui-active-filters__clear:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media (max-width:599px){.ui-active-filters__chip,.ui-active-filters__clear{min-height:var(--ui-target)}}

/* ── Sort ──────────────────────────────────────────────────────────────── */

.ui-sort{display:flex;align-items:center;gap:var(--ui-space-2);max-width:100%;min-width:0;font-family:var(--ui-font-body);font-size:var(--ui-text-small)}
.ui-sort__label{color:var(--ui-muted)}
/* Wraps rather than scrolls: four long options must fit a 320px screen. */
.ui-sort__list{display:flex;flex-wrap:wrap;gap:2px;min-width:0;list-style:none;margin:0;padding:2px;border-radius:var(--ui-radius-control);background:var(--ui-sunken)}
.ui-sort__link{
    display:inline-flex;align-items:center;min-height:32px;padding:0 12px;
    border-radius:4px;color:var(--ui-ink-2);text-decoration:none;white-space:nowrap;
}
.ui-sort__link:hover{color:var(--ui-ink)}
.ui-sort__link[aria-current="true"]{background:var(--ui-panel);color:var(--ui-ink);font-weight:var(--ui-weight-strong);box-shadow:var(--ui-shadow-raised)}
.ui-sort__link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}
@media (max-width:599px){.ui-sort__link{min-height:var(--ui-target)}}

/* ── Section nav ───────────────────────────────────────────────────────── */

.ui-section-nav{
    position:sticky;top:var(--ui-space-3);z-index:5;
    background:var(--ui-canvas);
    border-bottom:1px solid var(--ui-line);
    font-family:var(--ui-font-body);
}
.ui-section-nav ul{display:flex;gap:var(--ui-space-1);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.ui-section-nav a{
    display:inline-flex;align-items:center;min-height:var(--ui-target);padding:0 12px;
    color:var(--ui-ink-2);text-decoration:none;font-size:var(--ui-text-small);white-space:nowrap;
    border-bottom:2px solid transparent;
}
.ui-section-nav a:hover{color:var(--ui-ink)}
.ui-section-nav a[aria-current="true"]{color:var(--ui-ink);font-weight:var(--ui-weight-strong);border-bottom-color:var(--ui-ink)}
.ui-section-nav a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}

/* ── Breadcrumbs, tabs, pagination ─────────────────────────────────────── */

.ui-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--ui-font-body);font-size:var(--ui-text-small)}
.ui-breadcrumbs li{display:inline-flex;align-items:center;color:var(--ui-muted)}
.ui-breadcrumbs li + li::before{content:"/";margin:0 var(--ui-space-2);color:var(--ui-control)}
.ui-breadcrumbs a{display:inline-flex;align-items:center;min-height:var(--ui-target-compact);color:var(--ui-ink-2);text-decoration:underline;text-decoration-color:var(--ui-control);text-underline-offset:3px}
.ui-breadcrumbs a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-breadcrumbs [aria-current="page"]{color:var(--ui-ink);font-weight:var(--ui-weight-medium)}

.ui-tabs ul{display:flex;gap:var(--ui-space-1);list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ui-line);overflow-x:auto}
.ui-tabs a{
    display:inline-flex;align-items:center;min-height:var(--ui-target);padding:0 14px;
    font-family:var(--ui-font-body);font-size:15px;color:var(--ui-ink-2);text-decoration:none;white-space:nowrap;
    border-bottom:2px solid transparent;margin-bottom:-1px;
}
.ui-tabs a:hover{color:var(--ui-ink)}
.ui-tabs a[aria-current="page"]{color:var(--ui-ink);font-weight:var(--ui-weight-strong);border-bottom-color:var(--ui-ink)}
.ui-tabs a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}

.ui-pagination{
    display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);
    padding-block:var(--ui-space-4);font-family:var(--ui-font-body);font-size:var(--ui-text-small);
}
.ui-pagination__link{
    display:inline-flex;align-items:center;min-height:var(--ui-target);padding:0 14px;
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-control);
    color:var(--ui-ink);text-decoration:none;font-weight:var(--ui-weight-strong);
}
.ui-pagination__link:hover{border-color:var(--ui-ink)}
.ui-pagination__link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-pagination__link[aria-disabled="true"]{border-color:var(--ui-line);color:var(--ui-muted);font-weight:var(--ui-weight-regular)}
.ui-pagination__status{color:var(--ui-ink-2);font-variant-numeric:tabular-nums}

/* ── Action bar ────────────────────────────────────────────────────────── */

.ui-action-bar{
    display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap;
    font-family:var(--ui-font-body);
}
.ui-action-bar__note{font-size:var(--ui-text-small);color:var(--ui-muted)}
.ui-action-bar__buttons{display:flex;gap:var(--ui-space-2);flex-wrap:wrap}
@media (max-width:599px){
    .ui-action-bar{
        position:sticky;bottom:0;z-index:20;
        margin-inline:calc(-1 * var(--ui-gutter));
        padding:var(--ui-space-3) var(--ui-gutter) calc(var(--ui-space-3) + env(safe-area-inset-bottom,0px));
        background:var(--ui-panel);border-top:1px solid var(--ui-line);
        box-shadow:var(--ui-shadow-overlay);
    }
    .ui-action-bar__buttons{flex:1;flex-wrap:nowrap}
    .ui-action-bar__buttons .ui-btn{flex:1}
}

/* ── Filter sheet ──────────────────────────────────────────────────────── */

.ui-sheet{
    position:sticky;top:var(--ui-space-5);align-self:start;
    display:flex;flex-direction:column;
    max-height:calc(100vh - var(--ui-space-7));
    background:var(--ui-panel);
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
    font-family:var(--ui-font-body);
}
.ui-sheet__head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);
    padding:var(--ui-space-3) var(--ui-space-4);border-bottom:1px solid var(--ui-line);
}
.ui-sheet__title{font-family:var(--ui-font-display);font-size:17px;font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-sheet__close{display:none}
.ui-sheet__body{overflow-y:auto;padding:var(--ui-space-4);display:flex;flex-direction:column;gap:var(--ui-space-5)}
.ui-sheet-trigger,.ui-sheet-backdrop{display:none}

@media (max-width:860px){
    .ui-sheet{
        position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
        max-height:88vh;
        border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;border-bottom:0;
        box-shadow:var(--ui-shadow-overlay);
        transform:translateY(100%);
        transition:transform var(--ui-duration-sheet) var(--ui-ease);
    }
    body.jp-filter-sheet-open .ui-sheet{transform:translateY(0)}
    body.jp-filter-sheet-open{overflow:hidden}
    .ui-sheet__close{
        display:grid;place-items:center;
        width:var(--ui-target);height:var(--ui-target);
        border:0;border-radius:50%;background:var(--ui-sunken);color:var(--ui-ink);
        font-size:22px;line-height:1;cursor:pointer;
    }
    .ui-sheet__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
    .ui-sheet__body{padding-bottom:calc(var(--ui-space-5) + env(safe-area-inset-bottom,0px))}

    .ui-sheet-trigger{
        position:fixed;right:var(--ui-space-4);bottom:calc(var(--ui-space-4) + env(safe-area-inset-bottom,0px));z-index:89;
        display:inline-flex;align-items:center;gap:var(--ui-space-2);
        min-height:var(--ui-target);padding:0 18px;
        border:0;border-radius:var(--ui-radius-pill);
        background:var(--ui-action);color:var(--ui-on-action);
        box-shadow:var(--ui-shadow-overlay);
        font-family:var(--ui-font-body);font-size:15px;font-weight:var(--ui-weight-strong);cursor:pointer;
    }
    .ui-sheet-trigger:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
    .ui-sheet-trigger__count{
        display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
        border-radius:var(--ui-radius-pill);background:var(--ui-on-action);color:var(--ui-action);font-size:12px;
    }
    .ui-sheet-backdrop{display:block;position:fixed;inset:0;z-index:88;background:var(--ui-scrim)}
    .ui-sheet-backdrop[hidden]{display:none}
}

/* ── Motion preference ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
    .ui-btn,.ui-chip,.ui-toggle__track,.ui-toggle__track::after,.ui-card,.ui-sheet{transition:none!important}
    .ui-btn:hover,.ui-btn:active{transform:none}
}