/* Pilot UI 2.0 — page patterns (Phase 2+). Layout only: how the shared
   components sit on a page. Tokens only, like everything under ui/.

   Browse (Jobs, Candidates, Workspaces): page header, then a filter sheet
   beside the results on desktop; on phones the results come first and
   the filters open as a sheet (ui/filter_sheet.html). */

.ui-page{
    max-width:var(--ui-container);
    margin:0 auto;
    padding:0 max(var(--ui-gutter),env(safe-area-inset-right,0px)) var(--ui-space-9) max(var(--ui-gutter),env(safe-area-inset-left,0px));
    font-family:var(--ui-font-body);
    color:var(--ui-ink);
}
.ui-page__hint{margin-top:calc(-1 * var(--ui-space-3));margin-bottom:var(--ui-space-4);font-size:15px;color:var(--ui-ink-2)}
.ui-page__hint a{color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}

.ui-browse{display:grid;grid-template-columns:288px minmax(0,1fr);gap:var(--ui-space-6);align-items:start}
.ui-browse__results{display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0}
.ui-results-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap}
.ui-results-head__count{font-size:15px;color:var(--ui-ink-2)}
.ui-results-head__count strong{font-family:var(--ui-font-display);font-size:var(--ui-text-h3);font-weight:var(--ui-weight-strong);color:var(--ui-ink);font-variant-numeric:tabular-nums}
.ui-results{display:flex;flex-direction:column;gap:var(--ui-space-3);list-style:none;margin:0;padding:0}
.ui-results--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--ui-space-4)}
/* In a grid a card is narrow, so it stacks: monogram and badge on top,
   then the title, facts and tags across the full width. */
.ui-results--grid > li{display:flex}
.ui-results--grid .ui-card{flex:1;grid-template-columns:44px minmax(0,1fr)}
.ui-results--grid .ui-card:not(.ui-card--plain){grid-template-rows:auto auto auto 1fr}
.ui-results--grid .ui-card:not(.ui-card--plain) .ui-card__head{grid-column:1 / -1;grid-row:2}
.ui-results--grid .ui-card:not(.ui-card--plain) .ui-card__fit{grid-column:2;grid-row:1;align-self:center}
.ui-results--grid .ui-card:not(.ui-card--plain) .ui-card__meta{grid-column:1 / -1;grid-row:3}
.ui-results--grid .ui-card:not(.ui-card--plain) .ui-card__foot{grid-column:1 / -1;grid-row:4}
.ui-results--grid .ui-card--plain{grid-template-columns:minmax(0,1fr) auto}
.ui-results--grid .ui-card__foot{align-self:end;margin-top:var(--ui-space-2)}
.ui-spotlight{display:flex;flex-direction:column;gap:var(--ui-space-3);padding-bottom:var(--ui-space-5);border-bottom:1px solid var(--ui-line)}
.ui-spotlight__title{font-family:var(--ui-font-display);font-size:var(--ui-text-h3);font-weight:var(--ui-weight-strong);letter-spacing:var(--ui-tracking-heading)}
.ui-spotlight__lede{font-size:var(--ui-text-small);color:var(--ui-muted)}

.ui-filters{display:flex;flex-direction:column;gap:var(--ui-space-5)}
.ui-filters__actions{display:flex;align-items:center;gap:var(--ui-space-3);flex-wrap:wrap}
.ui-filters__clear{font-size:var(--ui-text-small);color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}
.ui-filters__clear:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

@media (max-width:860px){
    .ui-browse{grid-template-columns:minmax(0,1fr)}
}

/* Guide (Pilot, department pages, scoring method): page header, a sticky
   section nav on long pages, then sections at reading width. Secondary
   material folds into .ui-more so a phone reader scrolls past one line,
   not a screen. */

.ui-guide{display:flex;flex-direction:column;gap:var(--ui-space-8)}
.ui-guide__intro{display:flex;flex-direction:column;gap:var(--ui-space-4)}
.ui-guide__intro > .ui-breadcrumbs{margin-top:var(--ui-space-4)}
.ui-guide__intro > .ui-breadcrumbs + .ui-page-header{padding-top:var(--ui-space-2)}
.ui-guide > .ui-section-nav{margin-bottom:calc(-1 * var(--ui-space-5))}
.ui-guide__section{display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0;scroll-margin-top:calc(var(--ui-target) * 2 + var(--ui-space-2))}
.ui-section-head{display:flex;flex-direction:column;gap:var(--ui-space-2);max-width:var(--ui-measure)}
.ui-section-head__title{
    font-family:var(--ui-font-display);font-size:var(--ui-text-h2);font-weight:var(--ui-weight-strong);
    line-height:var(--ui-leading-tight);letter-spacing:var(--ui-tracking-heading);color:var(--ui-ink);
}
.ui-section-head__count{margin-left:var(--ui-space-2);font-family:var(--ui-font-body);font-size:var(--ui-text-small);font-weight:var(--ui-weight-medium);letter-spacing:0;color:var(--ui-ink-2);font-variant-numeric:tabular-nums}
.ui-section-head__lede{font-size:var(--ui-text-body);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
.ui-prose{max-width:var(--ui-measure);font-size:var(--ui-text-body);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
.ui-prose strong{color:var(--ui-ink);font-weight:var(--ui-weight-strong)}
.ui-prose a,.ui-link{color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}
.ui-prose a:focus-visible,.ui-link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

.ui-panel{
    display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0;
    padding:var(--ui-space-5);
    background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
}
.ui-panel--sunken{background:var(--ui-sunken);border-color:transparent}
.ui-panel__title{font-family:var(--ui-font-display);font-size:var(--ui-text-h3);font-weight:var(--ui-weight-strong);letter-spacing:var(--ui-tracking-heading);color:var(--ui-ink)}
.ui-panel__text{font-size:var(--ui-text-body);line-height:var(--ui-leading-body);color:var(--ui-ink-2);max-width:var(--ui-measure)}
.ui-panel__form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ui-space-3)}
.ui-panel__form .ui-field{align-self:stretch}
.ui-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3)}
@media (max-width:599px){.ui-panel{padding:var(--ui-space-4)}}

.ui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--ui-space-4);margin:0}

/* Fold-out: a <details> holding a section's secondary material. */
.ui-more{border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line)}
.ui-more > summary{
    display:flex;align-items:center;gap:var(--ui-space-2);min-height:var(--ui-target);
    cursor:pointer;list-style:none;
    font-size:15px;font-weight:var(--ui-weight-strong);color:var(--ui-ink);
}
.ui-more > summary::-webkit-details-marker{display:none}
.ui-more > summary::before{
    content:"+";display:inline-grid;place-items:center;width:20px;height:20px;flex:none;
    border:1px solid var(--ui-control);border-radius:50%;font-size:14px;line-height:1;color:var(--ui-ink-2);
}
.ui-more[open] > summary::before{content:"−"}
.ui-more > summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-more__hint{font-weight:var(--ui-weight-regular);color:var(--ui-muted)}
.ui-more__body{display:flex;flex-direction:column;gap:var(--ui-space-4);padding:var(--ui-space-2) 0 var(--ui-space-5)}

/* Ranked list: position, name (with an optional badge), a count. */
.ui-ranked{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;max-width:720px;font-family:var(--ui-font-body)}
.ui-ranked__row{
    display:grid;grid-template-columns:2.25em minmax(0,1fr) auto;align-items:baseline;gap:var(--ui-space-3);
    padding:10px 0;border-bottom:1px solid var(--ui-line);
}
.ui-ranked__rank{font-size:var(--ui-text-small);color:var(--ui-muted);font-variant-numeric:tabular-nums}
.ui-ranked__name{font-weight:var(--ui-weight-medium);color:var(--ui-ink);overflow-wrap:anywhere}
.ui-ranked__value{font-size:var(--ui-text-small);color:var(--ui-ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-ranked__value strong{color:var(--ui-ink);font-weight:var(--ui-weight-strong)}
.ui-badge{
    display:inline-block;margin-left:var(--ui-space-2);padding:1px 7px;border-radius:4px;vertical-align:1px;
    background:var(--ui-gold-wash);color:var(--ui-gold-ink);
    font-size:var(--ui-text-label);font-weight:var(--ui-weight-strong);letter-spacing:var(--ui-tracking-label);text-transform:uppercase;
}

/* Bars: a labelled horizontal bar per row. Set --value (0–100) inline.
   The number is always written beside the bar; the bar only echoes it. */
.ui-bars{display:grid;grid-template-columns:minmax(5.5em,max-content) minmax(0,1fr) minmax(4em,max-content);gap:var(--ui-space-2) var(--ui-space-3);list-style:none;margin:0;padding:0;font-family:var(--ui-font-body);font-size:var(--ui-text-small)}
/* Rows share the list's columns, so every track starts and ends together. */
.ui-bars__row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;--value:0}
.ui-bars__label{color:var(--ui-ink);font-variant-numeric:tabular-nums}
.ui-bars__track{height:12px;border-radius:var(--ui-radius-pill);background:var(--ui-sunken);overflow:hidden}
.ui-bars__fill{display:block;height:100%;width:calc(var(--value) * 1%);min-width:2px;border-radius:inherit;background:var(--ui-control)}
.ui-bars__row--highlight .ui-bars__fill{background:var(--ui-gold);box-shadow:inset 0 0 0 1px var(--ui-gold-ink)}
.ui-bars__value{color:var(--ui-ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-bars__row--highlight .ui-bars__label,.ui-bars__row--highlight .ui-bars__value{color:var(--ui-ink);font-weight:var(--ui-weight-strong)}

@media (max-width:599px){
    .ui-guide{gap:var(--ui-space-7)}
    .ui-bars__row{grid-template-columns:minmax(4.5em,auto) minmax(0,1fr) auto}
}

.ui-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--ui-space-4);list-style:none;margin:0;padding:0;counter-reset:none}
.ui-steps li{display:flex;gap:var(--ui-space-3);align-items:flex-start;font-size:var(--ui-text-body);line-height:var(--ui-leading-body);color:var(--ui-ink-2)}
.ui-steps__num{
    display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
    background:var(--ui-sunken);color:var(--ui-ink);font-weight:var(--ui-weight-strong);font-variant-numeric:tabular-nums;
}
.ui-steps--stacked{grid-template-columns:minmax(0,1fr)}

/* Detail (role, workspace, candidate): header, then the main column beside
   a side column on desktop. The action bar is the article's LAST child so
   that on phones it can stick to the bottom of the screen for the whole
   page (sticky needs the full article as its container); on desktop the
   grid lifts it to the top of the side column. */

.ui-detail{
    display:grid;grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:"head head" "main bar" "main aside";
    grid-template-rows:auto auto 1fr;
    gap:var(--ui-space-5) var(--ui-space-7);align-items:start;
}
.ui-detail__head{grid-area:head;display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0}
.ui-detail__head .ui-page-header{padding-bottom:0}
.ui-detail__main{grid-area:main;display:flex;flex-direction:column;gap:var(--ui-space-7);min-width:0}
.ui-detail__aside{grid-area:aside;display:flex;flex-direction:column;gap:var(--ui-space-4);min-width:0}
.ui-detail > .ui-action-bar{
    grid-area:bar;flex-direction:column;align-items:stretch;
    padding:var(--ui-space-4);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);background:var(--ui-panel);
}
.ui-detail > .ui-action-bar .ui-action-bar__buttons{flex-direction:column-reverse}
.ui-detail > .ui-action-bar .ui-btn,.ui-detail > .ui-action-bar form{width:100%}
.ui-detail__identity{display:flex;gap:var(--ui-space-5);align-items:flex-start}
.ui-detail__identity > .ui-page-header{flex:1;min-width:0;padding-top:0}
.ui-detail__mono{
    display:grid;place-items:center;flex:none;width:72px;height:72px;margin-top:var(--ui-space-5);
    border-radius:var(--ui-radius-card);background:var(--ui-sunken);color:var(--ui-ink);
    font-family:var(--ui-font-display);font-size:26px;font-weight:var(--ui-weight-strong);
}
.ui-detail__facts{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--ui-ink-2)}
.ui-detail__facts li:not(:last-child)::after{content:"·";margin-left:14px;color:var(--ui-muted)}

/* Label / value rows in a side panel. */
.ui-facts{display:flex;flex-direction:column;margin:0;font-family:var(--ui-font-body);font-size:var(--ui-text-small)}
.ui-facts > div{display:flex;justify-content:space-between;gap:var(--ui-space-3);padding:10px 0;border-bottom:1px solid var(--ui-line)}
.ui-facts > div:last-child{border-bottom:0}
.ui-facts dt{color:var(--ui-ink-2)}
.ui-facts dd{margin:0;min-width:0;color:var(--ui-ink);font-weight:var(--ui-weight-medium);text-align:right;overflow-wrap:anywhere}

/* A plain list with ticks (perks) and a dated list (experience). */
.ui-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--ui-space-2) var(--ui-space-5);list-style:none;margin:0;padding:0;color:var(--ui-ink-2)}
.ui-checklist li{display:flex;gap:var(--ui-space-2)}
.ui-checklist li::before{content:"✓";color:var(--ui-success);font-weight:var(--ui-weight-strong)}
.ui-timeline{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;max-width:var(--ui-measure)}
.ui-timeline li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--ui-space-4);padding:var(--ui-space-3) 0;border-bottom:1px solid var(--ui-line)}
.ui-timeline__title{font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-timeline__when{font-size:var(--ui-text-small);color:var(--ui-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-timeline__where{grid-column:1 / -1;font-size:var(--ui-text-small);color:var(--ui-ink-2)}

@media (max-width:860px){
    .ui-detail{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main" "aside" "bar";grid-template-rows:none}
    .ui-detail > .ui-action-bar{position:sticky;bottom:var(--ui-space-3);z-index:20;box-shadow:var(--ui-shadow-overlay)}
}
@media (max-width:599px){
    .ui-detail > .ui-action-bar{
        bottom:0;flex-direction:row;align-items:center;
        border:0;border-top:1px solid var(--ui-line);border-radius:0;
        padding:var(--ui-space-3) var(--ui-gutter) calc(var(--ui-space-3) + env(safe-area-inset-bottom,0px));
    }
    .ui-detail > .ui-action-bar .ui-action-bar__buttons{flex-direction:row}
    .ui-detail > .ui-action-bar .ui-action-bar__note{display:none}
    .ui-detail > .ui-action-bar form{width:auto;flex:1;display:flex}
    .ui-detail__identity{gap:var(--ui-space-4)}
    .ui-detail__mono{width:52px;height:52px;font-size:19px}
}

.ui-row__date{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:64px;padding:6px 0;border-radius:var(--ui-radius-control);background:var(--ui-sunken);font-size:13px;color:var(--ui-ink-2);font-variant-numeric:tabular-nums}
.ui-row__date b{color:var(--ui-ink);font-weight:var(--ui-weight-strong)}
.ui-tags__count{margin-left:4px;color:var(--ui-ink-2);font-variant-numeric:tabular-nums}
.ui-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap}

/* App shell (signed-in employer pages): grouped navigation beside the
   page on desktop; on phones and tablets a single scrolling row of links
   above it, so every section is one tap away without a menu. */

.ui-app{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--ui-space-7);align-items:start;padding-top:var(--ui-space-5)}
.ui-app__nav{position:sticky;top:var(--ui-space-4);display:flex;flex-direction:column;gap:var(--ui-space-5);font-family:var(--ui-font-body)}
.ui-app__owner{display:flex;flex-direction:column;gap:2px;font-family:var(--ui-font-display);font-size:var(--ui-text-body-lg);font-weight:var(--ui-weight-strong);color:var(--ui-ink);overflow-wrap:anywhere}
.ui-app__owner span{font-family:var(--ui-font-body);font-size:var(--ui-text-small);font-weight:var(--ui-weight-regular);color:var(--ui-ink-2)}
.ui-app__group{display:flex;flex-direction:column;gap:var(--ui-space-1)}
.ui-app__group-label{font-size:var(--ui-text-label);font-weight:var(--ui-weight-strong);letter-spacing:var(--ui-tracking-label);text-transform:uppercase;color:var(--ui-ink-2)}
.ui-app__nav ul{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.ui-app__nav a{
    display:flex;align-items:center;min-height:var(--ui-target-compact);padding:0 var(--ui-space-3);
    border-radius:var(--ui-radius-control);color:var(--ui-ink-2);text-decoration:none;font-size:15px;
}
.ui-app__nav a:hover{background:var(--ui-sunken);color:var(--ui-ink)}
.ui-app__nav a[aria-current="page"]{background:var(--ui-panel);box-shadow:inset 3px 0 0 var(--ui-ink),0 0 0 1px var(--ui-line);color:var(--ui-ink);font-weight:var(--ui-weight-strong)}
.ui-app__nav a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-app__main{display:flex;flex-direction:column;gap:var(--ui-space-6);min-width:0}
.ui-app__main > .ui-page-header{padding-top:0}

/* A two-column split of panels inside the app (recent applicants beside
   the stage counts) and a row of link-rows inside a panel. */
.ui-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--ui-space-5);align-items:start}
.ui-rows{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.ui-rows > li{border-bottom:1px solid var(--ui-line)}
.ui-rows > li:last-child{border-bottom:0}
.ui-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3);min-height:var(--ui-target);padding:var(--ui-space-2) 0;color:var(--ui-ink);text-decoration:none}
a.ui-row:hover .ui-row__title{text-decoration:underline;text-underline-offset:3px}
a.ui-row:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
/* The end wraps under the body once the body would drop below ~12rem. */
.ui-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 12rem;min-width:0}
.ui-row__title{font-weight:var(--ui-weight-strong);overflow-wrap:anywhere}
.ui-row__meta{font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.ui-row__end{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;justify-content:flex-end}

/* .ui-status (role status, pipeline stage, screening) is in components.css. */

@media (max-width:1024px){
    .ui-app{grid-template-columns:minmax(0,1fr);gap:var(--ui-space-5)}
    .ui-app__nav{position:static;flex-direction:row;align-items:center;gap:var(--ui-space-2);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ui-line);margin-inline:calc(-1 * var(--ui-gutter));padding:0 var(--ui-gutter)}
    .ui-app__owner,.ui-app__group-label{display:none}
    .ui-app__group,.ui-app__nav ul{flex-direction:row;gap:2px}
    .ui-app__nav a{white-space:nowrap;min-height:var(--ui-target);border-radius:0}
    .ui-app__nav a[aria-current="page"]{background:none;box-shadow:inset 0 -2px 0 var(--ui-ink)}
}
@media (max-width:860px){.ui-split{grid-template-columns:minmax(0,1fr)}}

/* Forms: one column of fields in a panel; the form page centres a narrow
   column for single-task pages (sign in, set up). */
.ui-form-panel{max-width:720px}
.ui-form-panel > .ui-field,.ui-form-panel > .ui-choices,.ui-form-panel > .ui-toggle-field{max-width:560px}
.ui-form-page{max-width:560px;padding-bottom:var(--ui-space-9)}
.ui-form-page .ui-form-panel{max-width:none}
.ui-form-page__after{margin-top:var(--ui-space-4);font-size:var(--ui-text-small);color:var(--ui-ink-2)}

/* Board: one column per stage. Columns keep a readable width and the
   board scrolls sideways inside its own focusable region. */
.ui-board{display:flex;gap:var(--ui-space-3);overflow-x:auto;padding-bottom:var(--ui-space-3)}
.ui-board > .ui-board__column{flex:1 0 208px}
.ui-board > .ui-board__column--empty{flex:0 0 128px}
.ui-board-jump{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-bottom:var(--ui-space-3)}
.ui-board-jump__stage{
    display:inline-flex;align-items:center;gap:var(--ui-space-1);min-height:var(--ui-target-compact);padding:0 var(--ui-space-3);
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-pill);background:var(--ui-panel);
    font-size:var(--ui-text-small);font-weight:var(--ui-weight-strong);color:var(--ui-ink);text-decoration:none;
}
.ui-board-jump__stage.is-empty{background:transparent;font-weight:var(--ui-weight-regular);color:var(--ui-ink-2)}
.ui-board-jump__stage:hover{border-color:var(--ui-control)}
.ui-board-jump__stage:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media (max-width:599px){.ui-board-jump__stage{min-height:var(--ui-target)}}
.ui-board:focus-visible{outline:2px solid var(--ui-focus);outline-offset:4px}
.ui-board__column{display:flex;flex-direction:column;gap:var(--ui-space-3);min-width:0;padding:var(--ui-space-3);border-radius:var(--ui-radius-card);background:var(--ui-sunken);scroll-margin-top:calc(var(--ui-target) * 2 + var(--ui-space-2))}
.ui-board__title{display:flex;align-items:baseline;font-size:15px;font-weight:var(--ui-weight-strong);color:var(--ui-ink)}
.ui-board__list{display:flex;flex-direction:column;gap:var(--ui-space-2);list-style:none;margin:0;padding:0}
.ui-board__card{
    display:flex;flex-direction:column;gap:var(--ui-space-1);padding:var(--ui-space-3);
    border:1px solid var(--ui-line);border-radius:var(--ui-radius-control);background:var(--ui-panel);
    color:var(--ui-ink);text-decoration:none;font-family:var(--ui-font-body);
}
.ui-board__card:hover{border-color:var(--ui-control);box-shadow:var(--ui-shadow-raised)}
.ui-board__card:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-board__name{font-weight:var(--ui-weight-strong)}
.ui-board__facts{display:flex;flex-wrap:wrap;gap:var(--ui-space-1);margin-top:var(--ui-space-1)}
.ui-board__empty{font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.ui-panel--sunken .ui-tags li{background:var(--ui-panel)}
.ui-rows > li > .ui-row__body{padding:var(--ui-space-3) 0}

/* Explore (Map, Candidate map): the map fills the screen under the site
   nav. One compact bar holds search and filters; the list and the
   selected item live in a sheet. On desktop the sheet docks on the
   right. On phones it is a bottom sheet with three snap points, peek,
   half and full, set by core/js/explore.js on [data-snap]. */
.ui-explore{
    --ui-explore-top:100px;          /* below the floating site nav */
    --ui-explore-gap:var(--ui-space-4);
    --ui-explore-sheet-w:360px;
    --ui-explore-peek:88px;          /* handle + summary row */
    --ui-explore-visible:0px;        /* phones: how much sheet shows (JS) */
    position:fixed;inset:0;
    font-family:var(--ui-font-body);color:var(--ui-ink);
}
.ui-explore__map{position:absolute;inset:0;z-index:1;background:var(--ui-sunken)}
.ui-explore__map[data-loading]::after{
    content:"Loading map‚6";position:absolute;inset:0;display:grid;place-items:center;
    font-size:var(--ui-text-small);color:var(--ui-ink-2);pointer-events:none;
}

.ui-explore__bar{
    position:absolute;z-index:10;
    top:var(--ui-explore-top);left:var(--ui-explore-gap);
    right:calc(var(--ui-explore-sheet-w) + var(--ui-explore-gap) * 2);
    display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-2);
    padding:var(--ui-space-2);
    background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
    box-shadow:var(--ui-shadow-overlay);
}
.ui-explore__title{font-family:var(--ui-font-display);font-size:15px;font-weight:var(--ui-weight-strong);padding:0 var(--ui-space-2);white-space:nowrap}
.ui-explore__title--keep{flex:1}
.ui-explore__search{flex:1 1 14rem;min-width:0}
.ui-explore__filters{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}
.ui-explore__filters .ui-input{width:auto;min-width:10rem}
.ui-explore__filters-toggle{display:none}

.ui-explore__sheet{
    position:absolute;z-index:10;
    top:var(--ui-explore-top);right:var(--ui-explore-gap);bottom:var(--ui-explore-gap);
    width:var(--ui-explore-sheet-w);
    display:flex;flex-direction:column;
    background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius-card);
    box-shadow:var(--ui-shadow-overlay);
    overflow:hidden;
}
.ui-explore__handle{display:none}
.ui-explore__summary{
    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-explore__count{font-family:var(--ui-font-display);font-size:17px;font-weight:var(--ui-weight-strong)}
.ui-explore__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ui-explore__body:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}
.ui-explore__view{display:flex;flex-direction:column}
.ui-explore__view[hidden]{display:none}
.ui-explore__detail{display:flex;flex-direction:column;gap:var(--ui-space-4);padding:var(--ui-space-4)}
.ui-explore__back{align-self:flex-start}
.ui-explore__detail-title{font-family:var(--ui-font-display);font-size:var(--ui-text-h3);font-weight:var(--ui-weight-strong);letter-spacing:var(--ui-tracking-heading)}
.ui-explore__note{padding:var(--ui-space-4);font-size:var(--ui-text-small);color:var(--ui-ink-2)}

/* Rows in the sheet: a heading row per group (a button that selects it)
   and plain link rows beneath. */
.ui-explore__list{list-style:none;margin:0;padding:0}
.ui-explore__group{border-bottom:1px solid var(--ui-line)}
.ui-explore__group.is-active{background:var(--ui-gold-wash)}
.ui-explore__row{
    display:flex;align-items:center;gap:var(--ui-space-3);width:100%;
    min-height:var(--ui-target);padding:var(--ui-space-3) var(--ui-space-4);
    border:0;background:transparent;color:var(--ui-ink);text-align:left;text-decoration:none;
    font:inherit;cursor:pointer;
}
.ui-explore__row:hover{background:var(--ui-sunken)}
.ui-explore__row:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}
.ui-explore__row-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ui-explore__row-title{font-weight:var(--ui-weight-strong);overflow-wrap:anywhere}
.ui-explore__row-meta{font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.ui-explore__row--sub{padding-left:var(--ui-space-6)}
.ui-explore__row--sub .ui-explore__row-title{font-weight:var(--ui-weight-medium)}

@media (max-width:859px){
    .ui-explore{--ui-explore-top:92px;--ui-explore-gap:var(--ui-space-3)}
    .ui-explore__bar{right:var(--ui-explore-gap)}
    .ui-explore__title:not(.ui-explore__title--keep){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .ui-explore__title--keep{white-space:normal}
    .ui-explore__filters-toggle{display:inline-flex}
    .ui-explore__filters{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;padding-top:var(--ui-space-1)}
    .ui-explore__filters[hidden]{display:none}
    .ui-explore__filters .ui-input{min-width:0;width:100%}
    .ui-explore__filters .ui-btn{grid-column:1 / -1}

    .ui-explore__sheet{
        top:auto;left:0;right:0;bottom:0;width:auto;
        height:calc(100% - var(--ui-explore-top) - 72px);
        border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;border-bottom:0;
        transform:translateY(calc(100% - var(--ui-explore-peek) - env(safe-area-inset-bottom,0px)));
        transition:transform var(--ui-duration-sheet) var(--ui-ease);
        touch-action:none;
    }
    .ui-explore__sheet[data-snap="half"]{transform:translateY(calc(100% - 46vh))}
    .ui-explore__sheet[data-snap="full"]{transform:translateY(0)}
    .ui-explore__sheet.is-dragging{transition:none}
    .ui-explore__body{touch-action:pan-y;padding-bottom:env(safe-area-inset-bottom,0px)}
    .ui-explore__handle{
        display:flex;justify-content:center;align-items:center;flex-shrink:0;
        width:100%;height:28px;padding:0;border:0;background:transparent;cursor:grab;
    }
    .ui-explore__handle::before{content:"";width:40px;height:5px;border-radius:var(--ui-radius-pill);background:var(--ui-control)}
    .ui-explore__handle:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-4px}
    .ui-explore__summary{min-height:calc(var(--ui-explore-peek) - 28px);padding-top:0;padding-bottom:var(--ui-space-2)}

    /* Map controls ride above the visible part of the sheet. */
    .ui-explore .maplibregl-ctrl-bottom-right,
    .ui-explore .maplibregl-ctrl-bottom-left{bottom:calc(var(--ui-explore-visible) + var(--ui-space-2))}
}
@media (min-width:860px){
    .ui-explore .maplibregl-ctrl-bottom-right{right:calc(var(--ui-explore-sheet-w) + var(--ui-explore-gap) * 2)}
}
.ui-explore__filters-count{
    display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:var(--ui-space-2);padding:0 6px;
    border-radius:var(--ui-radius-pill);background:var(--ui-action);color:var(--ui-on-action);font-size:12px;
}
.ui-explore__filters-count[hidden]{display:none}
/* MapLibre draws its attribution on a translucent white box in every
   theme; keep its text dark (and links underlined) so it reads in dark
   mode too. */
.ui-explore .maplibregl-ctrl-attrib{color:var(--ui-on-inverse)}
.ui-explore .maplibregl-ctrl-attrib a{text-decoration:underline}