/* ============================================================================
   Den of Cards UI primitives — the one place a control's look is defined.
   Loaded after site.css. Every button, field, stepper, segment and pill on the
   storefront is one of these; pages add layout classes, never their own look.
   The living reference is /design/assets.html (served from wwwroot/design).

   Rules
   - No pills anywhere (owner, 2026-10-20). Buttons are 8px rectangles; labels
     (foil, condition, language, status) are 4px tags.
   - One box per control. A field never sits inside another bordered box.
   - Nothing inside a control is underlined (owner, 2026-10-20).
   - One search bar (.ui-search) everywhere: nav, hero, search header, phone bar.
   - Gold fill = the one primary action in a group. Everything else is ghost.
   - Touch targets are 40px tall; small (--sm) is for dense admin rows only.
   ========================================================================== */

:root {
    --ui-radius: 8px;
    --ui-border: rgba(200, 135, 42, 0.28);
    --ui-border-strong: rgba(200, 135, 42, 0.7);
    --ui-line: rgba(200, 135, 42, 0.14);
    --ui-ghost-border: rgba(168, 152, 128, 0.8);
    --ui-field-bg: rgba(14, 12, 10, 0.7);
    --ui-gold-text: #E4B04C;
    --ui-in: #5CBB6A;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 40px; padding: 0.5rem 1rem;
    border: 1px solid transparent; border-radius: var(--ui-radius);
    background: transparent; color: var(--color-text);
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.ui-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #0E0C0A; }
.ui-btn--primary:hover { filter: brightness(1.1); color: #0E0C0A; }
.ui-btn--ghost { border-color: var(--ui-ghost-border); }
.ui-btn--ghost:hover { border-color: var(--color-accent); color: var(--ui-gold-text); }
.ui-btn--quiet { color: var(--ui-gold-text); padding-left: 0.25rem; padding-right: 0.25rem; }   /* text-only link action */
.ui-btn--quiet:hover { color: #F0C86A; }
.ui-btn, .ui-btn:hover, .ui-btn:focus, .ui-btn:active { text-decoration: none; }   /* nothing inside a control is underlined */
.ui-btn--sm { min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
/* A ghost button used as a toggle (finish tabs): pressed looks primary. */
.ui-btn--ghost[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #0E0C0A; }
.ui-btn--block { width: 100%; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; }
.ui-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ui-btn i { font-size: 0.9em; }

/* Round icon button (close, bookmark) */
.ui-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(240, 232, 213, 0.3); background: rgba(14, 12, 10, 0.8); color: var(--color-text);
    display: inline-grid; place-items: center; cursor: pointer; font-size: 0.9rem;
}
.ui-icon-btn:hover, .ui-icon-btn[aria-expanded="true"], .ui-icon-btn.is-on { border-color: var(--color-accent); color: var(--ui-gold-text); }
.ui-icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Stepper: "− 2 in cart +" ────────────────────────────────────────────── */
.ui-stepper {
    display: inline-flex; align-items: center; justify-content: space-between;
    min-height: 40px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius);
    background: rgba(200, 135, 42, 0.16); color: var(--color-text);
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
}
.ui-stepper--block { display: flex; width: 100%; }
.ui-stepper > button {
    appearance: none; border: 0; background: transparent; color: inherit;
    width: 40px; height: 40px; font-size: 1rem; cursor: pointer; flex: none;
}
.ui-stepper > button:disabled { opacity: 0.35; cursor: default; }
.ui-stepper > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--ui-radius); }
.ui-stepper > span, .ui-stepper > input { flex: 1; text-align: center; min-width: 1.5rem; padding: 0 0.3rem; white-space: nowrap; }
.ui-stepper > input { background: transparent; border: 0; color: inherit; font: inherit; width: 2.4rem; flex: none; -moz-appearance: textfield; }
.ui-stepper > input::-webkit-outer-spin-button, .ui-stepper > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Segment: one choice from a short row (the condition ladder) ─────────── */
.ui-segment {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden;
}
.ui-segment > button {
    appearance: none; border: 0; border-left: 1px solid var(--ui-border); background: transparent; color: var(--color-text);
    min-height: 40px; padding: 0.2rem 0; display: grid; place-content: center; justify-items: center; gap: 1px;
    cursor: pointer; font-family: var(--font-body);
}
.ui-segment > button:first-child { border-left: 0; }
.ui-segment > button > b { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.ui-segment > button > small { font-size: 0.72rem; font-weight: 500; color: var(--color-muted); }
.ui-segment > button > small.is-in { color: var(--ui-in); }
.ui-segment > button > small.is-last { color: var(--color-pop); }
.ui-segment > button[aria-pressed="true"] { background: rgba(200, 135, 42, 0.18); box-shadow: inset 0 -2px 0 var(--color-accent); }
.ui-segment > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.ui-field {
    display: block; width: 100%; min-height: 40px; padding: 0.5rem 0.75rem;
    background: var(--ui-field-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    color: var(--color-text); font-family: var(--font-body); font-size: 0.85rem;
}
.ui-field { line-height: 1.3; }
input.ui-field, select.ui-field { height: 40px; padding-top: 0; padding-bottom: 0; }   /* a fixed height, or the page line-height makes them 56px */
.ui-field:focus { outline: none; border-color: var(--color-accent); }
.ui-field::placeholder { color: var(--color-muted); }
select.ui-field { appearance: none; padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23A89880'/></svg>");
    background-repeat: no-repeat; background-position: right 0.75rem center; }

/* Search bar: [scope ▾] input [go]. One box with gold ends; the scope picker is optional.
   The box is not overflow:hidden (the scope menu drops out of it), so the end buttons round themselves. */
.ui-search {
    display: flex; align-items: stretch; min-height: 40px;
    background: var(--ui-field-bg); border: 1px solid var(--ui-border-strong); border-radius: 0;   /* square: the one control that is (owner, 2026-10-20) */
    transition: border-color 0.15s, width 0.25s;
}
.ui-search:focus-within { border-color: var(--color-accent); }
.ui-search > input {
    flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; padding: 0 0.75rem;
    color: var(--color-text); font-family: var(--font-body); font-size: 0.85rem;
}
.ui-search > input::placeholder { color: var(--color-muted); }
.ui-search__scope, .ui-search__go {
    appearance: none; border: 0; background: var(--color-accent); color: #0E0C0A;
    display: flex; align-items: center; gap: 0.35rem; padding: 0 0.8rem; flex: none;
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: filter 0.15s;
}
.ui-search__scope:hover, .ui-search__go:hover { filter: brightness(1.12); }
.ui-search__scope:focus-visible, .ui-search__go:focus-visible { outline: 2px solid var(--color-text); outline-offset: -3px; }
.ui-search__scope { height: 100%; }
.ui-search--sm { min-height: 34px; margin: 0.35rem 0; }
.ui-search--sm > input { font-size: 0.8rem; padding: 0 0.6rem; }
.ui-search--sm .ui-search__go, .ui-search--sm .ui-search__scope { padding: 0 0.6rem; font-size: 0.8rem; }
.ui-search__scope .nav-chevron { font-size: 0.6rem; transition: transform 0.2s; }
.ui-search__scope[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ── Tags: labels, never actions, never pills ─────────────────────────────── */
.ui-tag {
    display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px;
    font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.3;
    background: rgba(60, 60, 60, 0.9); color: #cfcfcf; border: 1px solid rgba(255, 255, 255, 0.18);
}
.ui-tag--rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787, #6ec6ff, #c58cff); color: #0E0C0A; border-color: transparent; }
.ui-tag--cold { background: linear-gradient(135deg, #e8f1ff, #9fb8d8 60%, #d7e6ff); color: #0E1A2A; border-color: transparent; }
.ui-tag--gold { background: linear-gradient(135deg, #FFD770, #C8872A); color: #0E0C0A; border-color: transparent; }
.ui-tag--accent { background: rgba(200, 135, 42, 0.18); color: var(--ui-gold-text); border-color: var(--ui-border-strong); }
.ui-tag--ok { background: rgba(92, 187, 106, 0.15); color: var(--ui-in); border-color: rgba(92, 187, 106, 0.5); }
.ui-tag--warn { background: rgba(255, 107, 61, 0.15); color: var(--color-pop); border-color: rgba(255, 107, 61, 0.5); }

/* ── Stock / status text ─────────────────────────────────────────────────── */
.ui-stock { font-family: var(--font-body); font-size: 0.76rem; color: var(--color-muted); white-space: nowrap; }
.ui-stock--in { color: var(--ui-in); }
.ui-stock--last { color: var(--color-pop); }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.ui-card { background: rgba(26, 22, 18, 0.8); border: 1px solid rgba(200, 135, 42, 0.15); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ui-card:hover { border-color: rgba(200, 135, 42, 0.45); }
.ui-divider { border: 0; border-top: 1px solid var(--ui-line); margin: 0; }
.ui-menu { background: var(--color-surface); border: 1px solid var(--ui-border-strong); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); min-width: 196px; }
.ui-menu > button { width: 100%; display: flex; gap: 0.55rem; align-items: center; appearance: none; border: 0; background: transparent; color: var(--color-text); font: 500 0.84rem var(--font-body); padding: 0.6rem; border-radius: 7px; cursor: pointer; text-align: left; }
.ui-menu > button:hover, .ui-menu > button:focus-visible { background: rgba(200, 135, 42, 0.14); outline: none; }
.ui-menu > button > i { color: var(--ui-gold-text); width: 1rem; }
.ui-menu__hint { font-size: 0.74rem; color: var(--color-muted); padding: 0.2rem 0.6rem 0.35rem; }

/* ── Admin page primitives (rail A chosen by owner, 2026-10-20) ─────────── */
.ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--ui-line); }
.ui-page-head h1 { font: 400 2rem/1 var(--font-display); letter-spacing: .04em; color: #E4B04C; margin: 0; }
.ui-page-head p { margin: .35rem 0 0; color: var(--color-muted); font-size: .85rem; }
.ui-page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ui-crumbs { font-size: .78rem; color: var(--color-muted); margin: 0 0 .5rem; }
.ui-crumbs a { color: var(--color-muted); text-decoration: none; }
.ui-crumbs a:hover { color: #E4B04C; }

.ui-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1.5rem; border-bottom: 1px solid var(--ui-line); background: rgba(14,12,10,.35); }
.ui-toolbar .ui-search { flex: 1 1 260px; max-width: 460px; }
.ui-toolbar .ui-field { width: auto; min-width: 150px; }
.ui-toolbar__spacer { flex: 1; }

.ui-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 420px; }
.ui-rail { border-right: 1px solid var(--ui-line); padding: 1rem 1.25rem; background: rgba(14,12,10,.35); }
.ui-rail__group { margin: 0 0 1.1rem; }
.ui-rail__label { font: 400 .64rem Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; color: #C9BCA3; margin: 0 0 .4rem; display: flex; justify-content: space-between; }
.ui-rail__label i { font-size: .5rem; color: rgba(200,135,42,.45); }
.ui-option { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: 6px; border: 1px solid transparent; font-size: .8rem; color: #C9BCA3; cursor: pointer; background: transparent; width: 100%; text-align: left; text-decoration: none; box-sizing: border-box; }
/* The option's pip: a one-of group (Game, Stock) carries the health icon, a check (--check) the resource icon. */
.ui-option { position: relative; --pip: url("/images/symbols/fab/fabkit/icon_hp.svg"); --pip-glow: rgba(149, 188, 76, .25); }
.ui-option--check { --pip: url("/images/symbols/fab/fabkit/icon_cost.svg"); --pip-glow: rgba(195, 8, 33, .2); }
.ui-option::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(168, 152, 128, .75); background: rgba(0, 0, 0, .35); flex: none; transition: border-color .15s, box-shadow .15s; }
.ui-option::after { content: ""; position: absolute; left: calc(.5rem - 2px); top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--pip) center / contain no-repeat; opacity: 0; transform: scale(.55) rotate(-30deg); transition: opacity .15s, transform .18s; pointer-events: none; }
.ui-option.is-active::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-option::after { transition: opacity .01s; } }
.ui-option:hover { background: rgba(200,135,42,.06); color: var(--color-text); }
.ui-option.is-active { background: rgba(200,135,42,.12); border-color: rgba(200,135,42,.28); color: #E4B04C; font-weight: 500; }
.ui-option.is-active::before { border-color: transparent; box-shadow: 0 0 0 3px var(--pip-glow); }
.ui-option__count { margin-left: auto; font: 500 .68rem var(--font-mono); color: var(--color-muted); }
.ui-option.is-active .ui-option__count { color: inherit; opacity: .75; }
.ui-main { padding: 1rem 1.5rem; min-width: 0; }

.ui-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ui-table th { text-align: left; font: 400 .62rem Cinzel, serif; letter-spacing: 1.5px; text-transform: uppercase; color: #C9BCA3; padding: .55rem .6rem; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.ui-table td { padding: .6rem; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.ui-table tr:hover td { background: rgba(200,135,42,.04); }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .mono { font: 500 .76rem var(--font-mono); color: #E4B04C; }
.ui-table .sub { font-size: .74rem; color: var(--color-muted); }
.ui-table span.sub { display: block; }
.ui-table .actions { text-align: right; white-space: nowrap; }   /* not flex: a flex td loses its row border */
.ui-table .actions .ui-btn + .ui-btn { margin-left: .4rem; }
.ui-thumb { width: 34px; height: 48px; border-radius: 3px; object-fit: cover; background: #000; vertical-align: middle; margin-right: .6rem; }
.ui-table--dense th, .ui-table--dense td { padding: .35rem .5rem; }

.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.ui-stat { padding: .9rem 1rem; }
.ui-stat__label { font: 400 .62rem Cinzel, serif; letter-spacing: 1.5px; text-transform: uppercase; color: #C9BCA3; }
.ui-stat__value { font: 400 2rem/1 var(--font-display); letter-spacing: .04em; color: #E4B04C; margin-top: .25rem; }
.ui-stat__hint { font-size: .74rem; color: var(--color-muted); margin-top: .25rem; }

.ui-alert { display: flex; gap: .6rem; align-items: center; padding: .7rem 1rem; border-radius: 8px; border: 1px solid var(--ui-border-strong); border-left-width: 4px; background: rgba(26,22,18,.8); font-size: .86rem; }
.ui-alert--ok { border-color: rgba(92,187,106,.6); } .ui-alert--ok i { color: var(--ui-in); }
.ui-alert--err { border-color: rgba(255,107,61,.7); } .ui-alert--err i { color: var(--color-pop); }
.ui-alert a, .ui-alert .ui-btn { margin-left: auto; }

.ui-form { display: grid; gap: .9rem; max-width: 560px; }
.ui-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ui-label { display: block; font-size: .78rem; color: var(--color-muted); margin: 0 0 .3rem; }
/* Checkbox = resource pip (Marsh, 2026-10-20): the native input stays in the DOM (hidden by size, never
   display:none), the pip is the visual: hollow ring off, the FAB resource icon on. DOM order matters:
   input, then .ui-check__pip, then the label text (and an optional .ui-check__count). */
.ui-check { display: flex; align-items: center; gap: .6rem; padding: .38rem .3rem; border-radius: 7px; font-size: .85rem; cursor: pointer; position: relative; }
.ui-check:hover { background: rgba(200, 135, 42, .08); }
.ui-check input { position: absolute; opacity: 0; width: 22px; height: 22px; left: .3rem; top: 50%; margin: -11px 0 0; cursor: pointer; z-index: 1; }   /* invisible, but it sits on the pip so a click or a test lands on the real input */
.ui-check--bare input { left: 0; }
.ui-check__count { margin-left: auto; font-size: .78rem; color: var(--color-muted); }
.ui-check__pip { flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative; border: 1.5px solid rgba(168, 152, 128, .75); background: rgba(0, 0, 0, .35); transition: border-color .15s, box-shadow .15s; }
.ui-check__pip img { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); opacity: 0; transform: scale(.55) rotate(-30deg); transition: opacity .15s, transform .18s; }
.ui-check input:checked + .ui-check__pip { border-color: transparent; box-shadow: 0 0 0 3px rgba(195, 8, 33, .2); }
.ui-check input:checked + .ui-check__pip img { opacity: 1; transform: scale(1) rotate(0deg); }
.ui-check input:checked ~ span:not(.ui-check__pip):not(.ui-check__count) { font-weight: 600; }
.ui-check input:focus-visible + .ui-check__pip { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ui-check input:checked + .ui-check__pip--radio { box-shadow: 0 0 0 3px rgba(149, 188, 76, .25); }   /* radios carry the health icon */
.ui-check--bare { padding: 0; display: inline-flex; }
.ui-check input:disabled + .ui-check__pip { opacity: .35; }
.ui-check:has(input:disabled) { cursor: default; color: var(--color-muted); }
.ui-check:has(input:disabled):hover { background: transparent; }
@media (prefers-reduced-motion: reduce) {
    .ui-check__pip img { transition: opacity .01s; transform: none; }
    .ui-check input:checked + .ui-check__pip img { transform: none; }
}
.ui-hint { font-size: .74rem; color: var(--color-muted); }

.ui-pager { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 1rem 0 0; }
.ui-pager .ui-btn--sm { min-width: 34px; padding-left: .5rem; padding-right: .5rem; }
.ui-pager .is-current { background: rgba(200,135,42,.18); border-color: var(--ui-border-strong); color: #E4B04C; }
.ui-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ui-line); margin: 0 0 1rem; }
.ui-tabs button { appearance: none; border: 0; background: transparent; color: var(--color-muted); font: 600 .82rem var(--font-body); padding: .6rem .9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ui-tabs button[aria-selected="true"] { color: #E4B04C; border-bottom-color: var(--color-accent); }

/* ── Split: a list with a side panel that edits the picked line (admin inventory) ── */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
.ui-shell > *, .ui-split > * { min-width: 0; }   /* grid items default to min-width:auto, so a wide table would push the page sideways */
.ui-split:has(> .ui-panel[hidden]) { grid-template-columns: 1fr; }
.ui-panel[hidden] { display: none; }
.ui-main[aria-busy="true"] { opacity: .55; transition: opacity .15s; }   /* list being swapped in place */
.ui-table tr.is-pick { cursor: pointer; }
.ui-table tr.is-pick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ui-table tr.is-selected td { background: rgba(200, 135, 42, .12); box-shadow: inset 3px 0 0 var(--color-accent); }
.ui-panel { border-left: 1px solid var(--ui-border-strong); background: var(--color-surface); display: flex; flex-direction: column; min-width: 0; }
.ui-panel__head { display: flex; gap: .9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ui-line); }
.ui-panel__head img { width: 64px; height: 90px; border-radius: 4px; object-fit: cover; background: #000; flex: none; }
.ui-panel__head h3 { margin: 0; font: 400 1.4rem/1 var(--font-display); letter-spacing: .04em; color: var(--color-text); outline: none; }
.ui-panel__head p { margin: .3rem 0 0; font-size: .78rem; color: var(--color-muted); }
.ui-panel__head a { color: var(--ui-gold-text); }
.ui-panel__body { padding: 1rem 1.25rem; display: grid; gap: 1.1rem; align-content: start; }
.ui-panel h4 { margin: 0 0 .5rem; font: 400 .64rem Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; color: #C9BCA3; }
.ui-panel .ui-table th, .ui-panel .ui-table td { padding: .4rem .3rem; }
.ui-panel .ui-table td:first-child, .ui-panel .ui-table th:first-child { padding-left: 0; }
.ui-stepper--sm { min-height: 32px; }
.ui-stepper--sm > button { width: 30px; height: 30px; font-size: .95rem; }
.ui-field--sm, input.ui-field--sm { min-height: 32px; height: 32px; font-size: .8rem; padding: 0 .5rem; }
.ui-panel__scroll { overflow-x: auto; }   /* the condition table is wider than a phone */
@media (max-width: 900px) {
    .ui-shell { grid-template-columns: 1fr; }
    .ui-rail { border-right: 0; border-bottom: 1px solid var(--ui-line); }
    .ui-main { overflow-x: auto; }
    .ui-split { grid-template-columns: 1fr; }
    .ui-panel { position: fixed; inset: 0; z-index: 11950; overflow: auto; border-left: 0; }
}

.ui-btn.is-disabled { opacity: .45; pointer-events: none; }

.ui-segment > button:disabled { cursor: default; opacity: .55; }   /* a condition the store has no row for */