/* =============================================================================
   Pigeon Effect data tools — shared design tokens and components
   -----------------------------------------------------------------------------
   Used by the UNGA tool (selector + viewer, projects/_unga_base.html), the
   Forced Migration app and Anatomy of a Budget; every tool page extends
   projects/_tool_base.html, whose
   body carries .u-page. The design direction is docs/unga-design.md. Each tool
   adds its own stylesheet after this one (unga/unga.css, migration/migration.css,
   budgets/budgets.css)
   for what only it uses. Plain CSS, linked with {% static_v %}; Tailwind
   utilities do layout only.
   ============================================================================= */
/* 1. Tokens ------------------------------------------------------------------ */
.u-page {
    /* Every colour is a site token (core/css/tokens.css), so the tools share the
       site's paper, ink and accent and switch with html.dark on their own. The
       map neutrals are mixes of ink into paper, which stay the right side of the
       page in both themes. unga.js token() and migration.js FM.token() read some
       of these and resolve them through a canvas, so any CSS colour form works. */
    --bg: rgb(var(--pe-paper)); --surface: rgb(var(--pe-surface)); --surface-2: rgb(var(--pe-sunken)); --border: rgb(var(--pe-line) / .14);
    --text: rgb(var(--pe-ink)); --text-2: rgb(var(--pe-ink-2)); --text-3: rgb(var(--pe-ink-3));
    --accent: rgb(var(--pe-accent-text)); --accent-fill: rgb(var(--pe-accent)); --accent-soft: rgb(var(--pe-accent) / .12); --on-accent: rgb(var(--pe-on-accent));
    --no-data: color-mix(in srgb, rgb(var(--pe-ink)) 18%, rgb(var(--pe-paper)));
    --map-line: color-mix(in srgb, rgb(var(--pe-ink)) 36%, rgb(var(--pe-paper)));
    --bar: rgb(var(--pe-ink-2)); --seg-on: rgb(var(--pe-surface));
    --shadow: 0 8px 24px rgb(var(--pe-chrome) / .08), 0 1px 2px rgb(var(--pe-chrome) / .06);
    --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 24px; --fs-2xl: 32px;
    --font: 'Space Mono', 'Courier New', monospace;
    background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: var(--fs-md); line-height: 20px;
}
html.dark .u-page {
    --shadow: 0 8px 24px rgb(var(--pe-chrome) / .45), 0 1px 2px rgb(var(--pe-chrome) / .4);
}
.u-page button, .u-page input, .u-page select { font-family: var(--font); }
.u-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 2. Type -------------------------------------------------------------------- */
.u-xs { font-size: var(--fs-xs); line-height: 16px; }
.u-sm { font-size: var(--fs-sm); line-height: 18px; }
.u-md { font-size: var(--fs-md); line-height: 20px; }
.u-lg { font-size: var(--fs-lg); line-height: 22px; }
.u-xl { font-size: var(--fs-xl); line-height: 28px; }
.u-2xl { font-size: var(--fs-2xl); line-height: 36px; }
.u-label { font-size: var(--fs-xs); line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.u-t2 { color: var(--text-2); }
.u-t3 { color: var(--text-3); }
.u-bold { font-weight: 700; }

/* 3. Shell ------------------------------------------------------------------- */
.u-bar {
    height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.u-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.u-back:hover { color: var(--text); }
.u-divider { width: 1px; height: 24px; background: var(--border); flex: none; }

/* 4. Panels ------------------------------------------------------------------ */
.u-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.u-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; flex: none; }
.u-panel-body { padding: 0 16px 16px; min-height: 0; }
.u-step {
    width: 22px; height: 22px; flex: none; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--text); color: var(--surface); font-size: var(--fs-sm); font-weight: 700;
}
.u-overlay { background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.u-rule { height: 1px; background: var(--border); border: 0; }

/* 5. Controls ---------------------------------------------------------------- */
.u-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.u-btn:hover { border-color: var(--text-3); color: var(--text); }
.u-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.u-icon-btn { width: 32px; padding: 0; }
.u-btn-sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.u-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
    height: 40px; padding: 0 20px; border-radius: 999px; border: 0;
    background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-md); font-weight: 700; cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.u-primary:hover { background: rgb(var(--pe-accent-hover)); }
.u-primary:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.u-input, .u-select {
    height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); font-size: var(--fs-sm);
}
.u-input::placeholder { color: var(--text-3); }
.u-input:focus, .u-select:focus { outline: none; border-color: var(--text-3); }
.u-input:focus-visible, .u-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.u-input-num { width: 76px; }
.u-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.u-check input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

/* Chips (topics) */
.u-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--border);
          border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; user-select: none;
          transition: border-color .15s, background-color .15s, color .15s; }
.u-chip:hover { border-color: var(--text-3); color: var(--text); }
.u-chip .u-count { color: var(--text-3); font-size: var(--fs-xs); }
input:checked + .u-chip { background: var(--text); border-color: var(--text); color: var(--surface); }
input:checked + .u-chip .u-count { color: color-mix(in srgb, var(--surface) 65%, transparent); }
input:focus-visible + .u-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.u-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.u-picks:empty { display: none; }
.u-pick { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 3px 0 10px; border-radius: 999px;
          background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); }
.u-pick[data-kind="drop"] { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.u-pick button { width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; }
.u-pick button:hover { background: var(--border); color: var(--text); }

/* Segmented control (viewer views) */
.u-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.u-seg button { white-space: nowrap; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
                font-size: var(--fs-sm); cursor: pointer; transition: background-color .15s, color .15s; }
.u-seg button:hover { color: var(--text); }
.u-seg button[aria-selected="true"] { background: var(--seg-on); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgb(var(--pe-chrome) / .08); }
/* the same control as radio buttons (selector, step 3) */
fieldset.u-seg { border: 0; margin: 0; }
.u-seg label > span { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; color: var(--text-2);
                      font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.u-seg label > span:hover { color: var(--text); }
.u-seg input:checked + span { background: var(--seg-on); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgb(var(--pe-chrome) / .08); }
.u-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dual-handle range slider: two range inputs on one track */
.u-range { position: relative; height: 24px; }
.u-range .track, .u-range .fill { position: absolute; top: 10px; height: 4px; border-radius: 999px; }
.u-range .track { left: 0; right: 0; background: var(--border); }
.u-range .fill { background: var(--accent); left: calc(8px + (100% - 16px) * var(--a, 0)); right: calc(8px + (100% - 16px) * (1 - var(--b, 1))); }
.u-range input.on-top { z-index: 2; }
.u-range-scale { display: flex; justify-content: space-between; margin-top: 2px; }
.u-range input[type=range] { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; background: none;
                             -webkit-appearance: none; appearance: none; pointer-events: none; }
.u-range input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.u-range input[type=range]::-moz-range-track { background: none; border: 0; }
.u-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 999px;
                                                   background: var(--surface); border: 2px solid var(--accent); cursor: grab; box-shadow: 0 1px 2px rgb(var(--pe-chrome) / .2); }
.u-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 999px;
                                               background: var(--surface); border: 2px solid var(--accent); cursor: grab; }
.u-range input[type=range]:focus-visible { outline: none; }
.u-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* 6. Lists ------------------------------------------------------------------- */
.u-list > li + li { border-top: 1px solid var(--border); }
.u-row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-sm); }
.u-row-meta { display: block; color: var(--text-3); font-size: var(--fs-xs); line-height: 16px; }
.u-link { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; cursor: pointer; }
button.u-link { background: none; border: 0; padding: 0; font-size: inherit; }
.u-link:hover { color: var(--text); text-decoration-color: var(--text-3); }

/* 7. Tooltip and drawer ------------------------------------------------------ */
.u-tip { position: fixed; z-index: 60; max-width: 360px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
         background: var(--text); color: var(--surface); font-size: var(--fs-sm); line-height: 18px; box-shadow: var(--shadow); }
.u-tip[hidden] { display: none; }
.u-tip-t { margin-top: 4px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.u-tip-t th { padding: 0 0 2px 12px; font-weight: 400; font-size: var(--fs-xs); text-align: right; opacity: .6; }
.u-tip-t td { padding: 1px 0 1px 12px; text-align: right; white-space: nowrap; opacity: .8; }
.u-tip-t td:first-child { padding-left: 0; text-align: left; }
.u-tip-t tr.is-on td { font-weight: 700; opacity: 1; }
.u-drawer { margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0;
            border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); overflow-y: auto; }
.u-drawer::backdrop { background: rgb(var(--pe-chrome) / .35); }
.u-drawer[open] { animation: u-slide .22s ease-out; }
@keyframes u-slide { from { transform: translateX(24px); opacity: 0; } }
.u-prose p + p { margin-top: 12px; }
.u-prose { font-size: var(--fs-sm); line-height: 20px; color: var(--text-2); }
.u-prose b { color: var(--text); }

/* 8. Data marks -------------------------------------------------------------- */
.u-bar-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
.u-bar-fill { display: block; height: 6px; border-radius: 999px; background: var(--bar); }

/* Charts */
.u-chart .grid line { stroke: var(--border); }
.u-chart .grid path, .u-chart .axis path { display: none; }
.u-chart .axis text { fill: var(--text-3); font-size: var(--fs-xs); font-family: var(--font); }
.u-chart .axis line { stroke: var(--border); }
.u-chart .series { transition: opacity .15s; }

/* 9. Shell layout ------------------------------------------------------------ */
.u-shell { display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 1024px) { .u-shell { height: 100vh; height: 100dvh; min-height: 0; } }
.u-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* Magnifier inside a search box (the box sits in a position: relative wrapper) */
.u-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* 10. Viewer: a top bar of views and tools, the active view filling the rest */
.u-vtitle { min-width: 0; flex: 1; }
.u-status { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; text-align: center; pointer-events: none; }
.u-status[hidden] { display: none; }
.u-vtools { display: flex; align-items: center; gap: 8px; }
.u-vtools .u-select { max-width: 220px; }
@media (max-width: 1023px) {
    .u-vbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
    .u-vbar .u-seg { order: 3; }
    .u-vtools { order: 4; width: 100%; }
    .u-vtools .u-select { flex: 1; min-width: 0; max-width: none; }
}
.u-stage { position: relative; flex: 1; min-height: 78vh; }
@media (min-width: 1024px) { .u-stage { min-height: 0; } }
.u-view { position: absolute; inset: 0; }
.u-pad { padding: 24px; }
@media (max-width: 1023px) { .u-pad { padding: 16px; } }

/* Floating controls and the legend card over a full-bleed view (map, network) */
.u-float { background: var(--surface); box-shadow: var(--shadow); border-color: var(--border); }
.u-zoom { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
/* Legend card: bottom left by default (the emptiest corner of an Aitoff map). */
.u-legend { position: absolute; left: 16px; bottom: 16px; z-index: 5; max-width: min(380px, calc(100% - 32px));
            padding: 12px 14px; font-size: var(--fs-xs); line-height: 16px; color: var(--text-2); }
.u-legend:empty { display: none; }
.u-legend .ramp { position: relative; width: 220px; max-width: 100%; height: 26px; color: var(--text); font-variant-numeric: tabular-nums; }
.u-legend .ramp i { display: block; height: 8px; border-radius: 999px; }
.u-legend .ramp .tk { position: absolute; top: 11px; transform: translateX(-50%); white-space: nowrap; }
.u-legend .ramp .tk:first-of-type { transform: none; }
.u-legend .ramp .tk:last-of-type { transform: translateX(-100%); }
.u-legend .scale-note { color: var(--text-3); }
.u-legend .keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.u-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.u-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.u-legend .off { margin-top: 8px; color: var(--text-3); }

/* A segmented control used as a group of toggle buttons (aria-pressed) */
.u-seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgb(var(--pe-chrome) / .08); }
.u-seg button:disabled { opacity: .4; cursor: not-allowed; }

/* 11. Combobox: a search box with a list of flags under it ------------------ */
.u-combo { position: relative; margin-left: auto; width: min(300px, 100%); }
.u-combo .u-input { width: 100%; padding-left: 32px; }
.u-combo .u-input:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.u-combo-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 100%; max-height: min(360px, 60vh);
                margin: 0; padding: 4px; list-style: none; background: var(--surface); }
.u-combo-list li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px;
                   font-size: var(--fs-sm); color: var(--text); cursor: pointer; white-space: nowrap; }
.u-combo-list li .nm { overflow: hidden; text-overflow: ellipsis; }
.u-combo-list li[aria-selected="true"] { background: var(--surface-2); }
.u-combo-list li[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.u-combo-list li .on { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }
.u-combo-list li.empty { color: var(--text-3); cursor: default; }
.u-combo-list .flag, .u-keys .flag, .u-stat .flag, .u-drill .flag {
    width: 16px; height: 16px; border-radius: 999px; flex: none; }

/* 12. Time series ------------------------------------------------------------ */
/* Legend: one chip per series (hover highlights, click hides, x removes), then the fixed keys. */
.u-ts-main { min-height: 0; }
.u-ts-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px 6px; flex: none; }
.u-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.u-key { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--border); border-radius: 999px;
         background: var(--surface); font-size: var(--fs-sm); color: var(--text); }
.u-key[data-off] { color: var(--text-3); }
.u-key[data-off] .dot, .u-key[data-off] .flag { opacity: .3; }
.u-key button { height: 26px; border: 0; background: none; color: inherit; cursor: pointer; font-size: inherit; }
.u-key button[data-toggle] { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; }
.u-key button[data-unpartner] { width: 22px; margin-right: 3px; border-radius: 999px; color: var(--text-3); }
.u-key button[data-unpartner]:hover { background: var(--surface-2); color: var(--text); }
.u-key .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.u-ts-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; padding-left: 8px; font-size: var(--fs-xs); color: var(--text-2); }
.u-ts-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.u-ts-legend .k-base { width: 16px; border-top: 1.5px dashed var(--text-2); }
.u-ts-legend .k-bar { width: 8px; height: 10px; border-radius: 1px; background: var(--border); }
.u-ts-legend .k-nm { width: 12px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.u-ts-chart { position: relative; flex: 1; min-height: 300px; overflow: hidden; transition: opacity .2s; }
.u-ts-chart.is-loading, .u-ts-movers.is-loading { opacity: .45; }
.u-ts-foot { flex: none; padding: 6px 16px 12px; }
.u-ts-empty { padding: 24px 16px; }

/* Chart marks. Colours: the categorical palette for lines, neutrals for the rest. */
.u-ts-chart svg { display: block; }
.u-chart .ts-nm { fill: var(--text); opacity: .045; }
.u-chart .ts-bar { fill: var(--border); }
.u-chart .ts-bar-on { fill: var(--text-3); opacity: .6; }
.u-chart .ts-zero { stroke: var(--text-3); }
.u-chart .ts-event { stroke: var(--text-3); stroke-dasharray: 2 3; opacity: .5; }
.u-chart .ts-pin { stroke: var(--text); stroke-width: 1; opacity: .6; pointer-events: none; }
.u-chart .ts-pin-dot { fill: var(--surface); stroke-width: 2.5; pointer-events: none; }
.u-chart .ts-mark { fill: var(--text-3); cursor: help; }
.u-chart .ts-mark:hover, .u-chart .ts-mark.is-on { fill: var(--text); }
.u-chart .ts-base { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.u-chart .ts-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.u-chart .ts-series { transition: opacity .15s; }
.u-chart .ts-series.is-dim { opacity: .12; }
.u-chart .ts-series.is-on .ts-line { stroke-width: 3; }
.u-chart .ts-cross { stroke: var(--text-3); stroke-dasharray: 3 3; pointer-events: none; }
.u-chart .ts-hit { fill: transparent; cursor: pointer; }
.u-chart .ts-bands-label { fill: var(--text-3); font-size: 11px; font-family: var(--font); }

/* Side panel: one figure card per series, or the details of one year (.u-drill). */
.u-ts-side { min-height: 0; padding: 16px; gap: 12px; overflow: hidden; }
.u-ts-side-head { flex: none; }
.u-ts-side-head .u-xs { margin-top: 4px; }
.u-stats { flex: 1; min-height: 0; margin: 0 -8px 0 0; padding: 0 8px 0 0; list-style: none; }
.u-stat { padding: 10px 6px; border-top: 1px solid var(--border); border-radius: 6px; cursor: default; }
.u-stat:first-child { border-top: 0; }
.u-stat:hover, .u-stat.is-on { background: var(--surface-2); }
.u-stat[data-off] { opacity: .5; }
.u-stat-head { display: flex; align-items: center; gap: 8px; }
.u-stat-head .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.u-stat-head .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-sm); }
.u-stat-head .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-stat-head .v small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); margin-right: 6px; }
.u-stat dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 6px 0 0 16px;
             font-size: var(--fs-xs); line-height: 16px; }
.u-stat dt { color: var(--text-3); }
.u-stat dd { color: var(--text); font-variant-numeric: tabular-nums; }

.u-drill { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
.u-drill-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.u-drill-nav .years { display: inline-flex; gap: 4px; }
.u-drill-title { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.u-drill-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
.u-drill-figs .u-xs { margin-top: 2px; }
.u-drill-list { flex: 1; min-height: 0; margin: 0 -8px 0 0; padding: 0 8px 0 0; list-style: none; }
.u-drill-list li { padding: 9px 0; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
    .u-page *, .u-drawer[open] { transition: none !important; animation: none !important; }
}