/* MRIT form theme — one look for every control, button and flash message.
   Plan: plans/form_design_system.md.

   Linked LAST in <head> with media="screen" (scripts/link_forms_css.py puts it
   there), after a page's own inline <style>, so an equal-specificity rule here
   wins — on screen only. Printing, and every WeasyPrint PDF, never sees it.

   Three layers, by how hard they push:
     1. controls   — a :not() chain out-ranks a page's `input[type=text]{}` or
                     `.form-group input{}` without !important. The chain is
                     also what spares checkboxes, radios, file pickers, ranges.
     2. buttons, labels, hints, flashes — plain class selectors; win on order.
     3. layout     — wrapped in :where(), zero specificity: a DEFAULT for pages
                     that declare nothing, never an override. `.actions` and
                     `.form-row` mean different things on different pages.

   Opt-outs:  <body class="no-form-theme">  the whole page
              class="f-raw" on one control   that control only

   To change the accent app-wide, edit the three --f-accent tokens. */

:root {
    --f-canvas: #f6f7f4;  --f-surface: #fff;
    --f-ink: #2c3e50;     --f-muted: #6b7780;
    --f-border: #cfd5ce;  --f-border-soft: #e7e9e4;
    --f-accent: #0f6e56;  --f-accent-hover: #0b5a46;  --f-accent-soft: #e1f5ee;
    --f-accent-ring: rgba(15, 110, 86, .18);
    --f-ok: #3b6d11;      --f-ok-hover: #2e560c;
    --f-danger: #a32d2d;  --f-danger-hover: #872323;  --f-danger-soft: #fcebeb;
    --f-warn: #854f0b;    --f-warn-soft: #fdf1de;
    --f-radius: 8px;      --f-control-h: 38px;
    --f-th-bg: #dfe5da;   --f-th-ink: #34404a;   --f-th-line: #c9d1c3;   /* table header band */
}

/* ---------- 0. page furniture: what surrounds a form ----------
   The legacy pages share more than controls: a `.container`, white `.panel`
   blocks with an <h2>, bare <label>s, a plain <table>, a `.back-link`. Same
   approach as the rest of the file — win on order, never !important — so a
   page that means something specific (a coloured th class, a styled link)
   keeps it through its own, more specific, rule. */
body:not(.no-form-theme) { background-color: var(--f-canvas); color: var(--f-ink); }
.container > h1, .container > h2:first-of-type, .header h1, .header h2, h1.page-title, body > h1 {
    font-weight: 600; font-size: 1.5rem; color: var(--f-ink); letter-spacing: 0;
}
.container > h2:first-of-type { border-bottom: 0; }
.header p { color: var(--f-muted); font-size: .88rem; }
.back-link {
    display: inline-block; color: var(--f-accent); background: var(--f-accent-soft);
    padding: .3rem .85rem; border-radius: var(--f-radius); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.back-link:hover { background: #cdeee2; color: var(--f-accent-hover); }

.panel, .filter-card, .table-section, .form-section, .filter-bar, .card-box {
    background: var(--f-surface); border: 1px solid var(--f-border-soft); border-radius: 10px; box-shadow: none;
}
.card { border-radius: 10px; box-shadow: 0 1px 2px rgba(44, 62, 80, .06); }
.panel h2, .panel h3, .filter-card h2, .filter-card h3, .table-section h2, .table-section h3,
.form-section h2, .form-section h3 {
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--f-accent);
    border-bottom: 1px solid var(--f-border-soft); padding-bottom: .5rem; margin-top: 0;
}
/* `.card` is left out on purpose: a card's <h3> is as often a big stat number
   or a coloured header band (the login card) as it is a section title */
:is(.panel, .filter-card, .table-section, .form-section) :is(h2, h3) :is(a, span, small, button) {
    text-transform: none; letter-spacing: 0;
}
:is(.panel, .filter-card, .table-section, .form-section) :is(h2, h3) a { font-weight: 600; font-size: .82rem; }

body:not(.no-form-theme) label:not([class]) { font-size: .8rem; font-weight: 600; color: #46525c; }
body:not(.no-form-theme) label:not([class]):has(> input[type=checkbox], > input[type=radio]) { font-size: .88rem; font-weight: 500; color: var(--f-ink); }

body:not(.no-form-theme) th {
    background: var(--f-th-bg); color: var(--f-th-ink); font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; border-bottom: 1px solid var(--f-th-line);
}
body:not(.no-form-theme) td { border-bottom-color: #eef0ec; }

:where(a:not([class])) { color: var(--f-accent); }
:where(a:not([class])):hover { color: var(--f-accent-hover); }
.btn-link { color: var(--f-accent); }
.btn-link:hover { color: var(--f-accent-hover); }

/* ---------- 1. controls ---------- */
body:not(.no-form-theme) input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
body:not(.no-form-theme) select:not(.f-raw),
body:not(.no-form-theme) textarea:not(.f-raw) {
    box-sizing: border-box; min-height: var(--f-control-h); max-width: 100%;
    padding: 7px 10px; font-family: inherit; font-size: 0.92rem; color: var(--f-ink);
    background-color: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius);
    transition: border-color .15s, box-shadow .15s;
}
body:not(.no-form-theme) select[multiple]:not(.f-raw), body:not(.no-form-theme) select[size]:not(.f-raw) { min-height: 0; }
body:not(.no-form-theme) textarea:not(.f-raw) { min-height: 84px; line-height: 1.45; }
body:not(.no-form-theme) input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]):focus,
body:not(.no-form-theme) select:not(.f-raw):focus,
body:not(.no-form-theme) textarea:not(.f-raw):focus {
    outline: none; border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-ring);
}
body:not(.no-form-theme) input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]):disabled,
body:not(.no-form-theme) input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden])[readonly],
body:not(.no-form-theme) select:not(.f-raw):disabled,
body:not(.no-form-theme) textarea:not(.f-raw):disabled,
body:not(.no-form-theme) textarea:not(.f-raw)[readonly] {
    background-color: #f1f3ef; color: var(--f-muted);
}
body:not(.no-form-theme) input[type=checkbox]:not(.f-raw),
body:not(.no-form-theme) input[type=radio]:not(.f-raw) { accent-color: var(--f-accent); }
body:not(.no-form-theme) .is-invalid:not(.f-raw),
body:not(.no-form-theme) input.error:not(.f-raw),
body:not(.no-form-theme) select.error:not(.f-raw) {
    border-color: var(--f-danger) !important; box-shadow: 0 0 0 3px rgba(163, 45, 45, .12);
}

/* dense: a control or button inside a table cell shrinks by itself, so a
   marks grid or a line-item table needs no opt-out */
body:not(.no-form-theme) td input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
body:not(.no-form-theme) td select:not(.f-raw) {
    min-height: 30px; padding: 3px 6px; font-size: 0.85rem; border-radius: 5px;
}
body:not(.no-form-theme) td textarea:not(.f-raw) { min-height: 48px; padding: 4px 6px; font-size: 0.85rem; border-radius: 5px; }

/* ---------- 2. labels, help, errors ---------- */
.form-group > label, .field > label, .filter-group > label {
    font-size: 0.8rem; font-weight: 600; color: #46525c;
}
.req, .required-star { color: var(--f-danger); font-weight: 700; }
.hint { color: var(--f-muted); }
.field-error { font-size: 0.76rem; color: var(--f-danger); margin-top: 3px; font-weight: 600; }

/* ---------- 2. buttons: one family. Solid = the action; outline = the rest ----------
   The base rule paints from three custom properties and the colour classes
   only set them. So a colour class never has to out-rank the base rule, and
   the same line serves `class="btn btn-approve"` and a bare `class="btn-approve"`.

   BTN matches `.btn` and any <a>/<button>/<input> whose class list has a
   `btn-…` token (about 300 legacy buttons carry no `.btn`). Not everything
   named btn-… is a button in this family, hence the :not() list: text links,
   badges, close crosses, tab/nav toggles, and the big round punch / journey
   buttons keep their page styling. */
.btn,
:is(a, button, input):is([class^="btn-"], [class*=" btn-"]):not(.btn-link, .btn-badge, .btn-close, .btn-toggle, .btn-nav, .btn-top, .btn-punch, .btn-start, .btn-end, .btn-group, .btn-maps, .f-raw) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; min-height: var(--f-control-h); padding: 0 16px;
    font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap;
    border-radius: var(--f-radius); border: 1px solid var(--b-bd, var(--f-border)); box-shadow: none;
    background: var(--b-bg, var(--f-surface)); color: var(--b-fg, var(--f-ink)); cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover,
:is(a, button, input):is([class^="btn-"], [class*=" btn-"]):not(.btn-link, .btn-badge, .btn-close, .btn-toggle, .btn-nav, .btn-top, .btn-punch, .btn-start, .btn-end, .btn-group, .btn-maps, .f-raw):hover {
    background: var(--b-bg-h, #f1f3ef); border-color: var(--b-bd-h, #b9c1b8); color: var(--b-fg, var(--f-ink)); transform: none;
}
.btn:focus-visible,
:is(a, button, input):is([class^="btn-"], [class*=" btn-"]):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--f-accent-ring); }
.btn:disabled, .btn[disabled],
:is(button, input):is([class^="btn-"], [class*=" btn-"]):disabled { opacity: .5; cursor: not-allowed; }

/* the four meanings, under every name the pages use for them */
.btn-primary, .btn-save, .btn-submit, .btn-go, .btn-filter, .btn-search, .btn-apply, .btn-blue, .btn-teal, .btn-send, .btn-confirm, .btn-update, .btn-login, .btn-build, .btn-load, .btn-generate, .btn-collect, .btn-save-item, .btn-bankfilter {
    --b-bg: var(--f-accent); --b-bd: var(--f-accent); --b-fg: #fff; --b-bg-h: var(--f-accent-hover); --b-bd-h: var(--f-accent-hover);
}
.btn-success, .btn-green, .btn-approve, .btn-ok, .btn-done, .btn-add, .btn-publish, .btn-new, .btn-add-row, .btn-add-entry, .btn-activate, .btn-unexclude {
    --b-bg: var(--f-ok); --b-bd: var(--f-ok); --b-fg: #fff; --b-bg-h: var(--f-ok-hover); --b-bd-h: var(--f-ok-hover);
}
.btn-danger, .btn-reject, .btn-delete, .btn-del, .btn-remove, .btn-red, .btn-del-row, .btn-exclude, .btn-deactivate, .btn-revoke, .btn-void, .btn-delete-confirm {
    --b-bg: var(--f-danger); --b-bd: var(--f-danger); --b-fg: #fff; --b-bg-h: var(--f-danger-hover); --b-bd-h: var(--f-danger-hover);
}
.btn-warning, .btn-warn, .btn-orange, .btn-reopen {
    --b-bg: var(--f-warn-soft); --b-bd: #f0d9a8; --b-fg: var(--f-warn); --b-bg-h: #fae4bd; --b-bd-h: #e8c987;
}
/* danger said quietly: a serious, deliberate action that is not a delete and
   should not shout from the page (the lab console's Exam Mode ON) — pale red,
   the way .btn-warning is pale amber */
.btn-danger-soft {
    --b-bg: var(--f-danger-soft); --b-bd: #f2cfcf; --b-fg: var(--f-danger); --b-bg-h: #f8dcdc; --b-bd-h: #e8b4b4;
}
/* a submit button that is only `class="btn"` was coloured by its page's own
   `.btn {}`; it is that form's one action, so it is the primary */
button[type=submit][class="btn"], input[type=submit][class="btn"], button[class="btn"]:not([type]) {
    --b-bg: var(--f-accent); --b-bd: var(--f-accent); --b-fg: #fff; --b-bg-h: var(--f-accent-hover); --b-bd-h: var(--f-accent-hover);
}
/* every other btn-… name (secondary, light, ghost, outline, cancel, edit, print,
   back, view, clear, reset, pdf, export …) is the outline default: no rule needed */

.btn.btn-link { background: none; border-color: transparent; color: var(--f-accent); padding: 0 6px; }
.btn.btn-link:hover { background: none; border-color: transparent; text-decoration: underline; color: var(--f-accent-hover); }

/* a button that paints its own background inline keeps white text; an inline
   `color:` still wins over this */
.btn[style*="background"], :is(a, button, input)[class*="btn-"][style*="background"] { --b-fg: #fff; --b-bd: transparent; --b-bd-h: transparent; }
.btn[style*="background"]:hover, :is(a, button, input)[class*="btn-"][style*="background"]:hover { filter: brightness(.92); }

/* small: by name, or by sitting in a table cell */
body .btn-sm, body .btn-small, body .btn-mini, body .btn-cancel-sm,
body td .btn, body td :is(a, button, input):is([class^="btn-"], [class*=" btn-"]):not(.btn-link, .btn-badge, .btn-close, .btn-toggle, .btn-nav, .btn-top, .btn-punch, .btn-start, .btn-end, .btn-group, .btn-maps, .f-raw) {
    min-height: 30px; padding: 0 10px; font-size: 0.78rem; border-radius: 6px;
}

/* ---------- 2. tab strips and segmented toggles ----------
   One look for every strip that switches a view: a soft track, the current
   item filled in the accent. The containers are the six names the pages use,
   plus .f-tabs for new pages (a link / button per item, `.active` on the
   current one; `.on`, aria-selected and a checked radio + label also count).
   Items are matched only INSIDE a container, so a stray `.tab` elsewhere is
   left alone. */
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 1rem;
    background: #e9ece6; border: 0; border-radius: 10px; overflow: visible; box-shadow: none;
}
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab) {
    flex: 0 1 auto; margin: 0; padding: 7px 14px; border: 0; border-radius: 7px; background: transparent;
    color: #46525c; font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1.25; text-align: center;
    text-decoration: none; cursor: pointer; box-shadow: none; transition: background .15s, color .15s;
}
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs).f-fill > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab), .type-toggle.type-toggle > label { flex: 1 1 0; }
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab):hover { background: #dde1d9; color: var(--f-ink); }
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab):is(.active, .on, .current, .selected, [aria-selected="true"]),
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab):is(.active, .on, .current, .selected, [aria-selected="true"]):hover,
.type-toggle > input[type=radio]:checked + label, .type-toggle > input[type=radio]:checked + label:hover {
    background: var(--f-accent); color: #fff; border: 0;
}
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab) small, :is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab) .f-tab-sub { display: block; font-weight: 400; font-size: .74rem; opacity: .85; }
:is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--f-accent-ring); }

/* `.chips` is as often a list of tags as a filter strip, so it is not a tab
   track — only its current item takes the accent */
.chips > :is(a, span, button):is(.on, .active), .chips > :is(a, span, button):is(.on, .active):hover { background: var(--f-accent); color: #fff; }
.chips > a:hover { background: var(--f-accent-soft); color: var(--f-accent-hover); }

/* ---------- 2. searchable dropdown (templates/_searchable_select.html) ----------
   The text box is an <input>, so layer 1 already styles it. The partial's own
   <style> sits in <body>, after this file, so these carry one extra `body`. */
body .ss-input {
    padding-right: 28px; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7780' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
body .ss-list {
    border: 1px solid var(--f-border); border-radius: var(--f-radius); top: calc(100% + 4px);
    box-shadow: 0 8px 24px rgba(44, 62, 80, .14); padding: 4px; max-height: 260px;
}
body .ss-opt { padding: 7px 9px; border-radius: 5px; font-size: .86rem; color: var(--f-ink); }
body .ss-opt:hover, body .ss-opt.active { background: var(--f-accent-soft); color: #04342c; }
body .ss-opt.placeholder, body .ss-empty { color: var(--f-muted); }
body .ss-opt.disabled, body .ss-opt.disabled:hover { color: #b0b7bd; background: none; }

/* ---------- 2. flash messages: every category the routes emit ---------- */
.alert, .flash {
    padding: .7rem 1rem; border-radius: var(--f-radius); font-size: .88rem;
    background: #eaf5ec; color: #27500a; border: 1px solid #d2e8d5;
}
.alert.error, .alert.danger, .alert-error, .alert-danger, .flash.error, .flash.danger {
    background: var(--f-danger-soft); color: #791f1f; border-color: #f2cfcf;
}
.alert.warning, .alert-warning, .flash.warning { background: var(--f-warn-soft); color: #412402; border-color: #f5dfb5; }
.alert.info, .alert-info, .flash.info { background: #e6f1fb; color: #042c53; border-color: #cfe2f5; }

/* ---------- 3. layout defaults — zero specificity, a page's own rule wins ---------- */
:where(.form-group, .field, .filter-group) { display: flex; flex-direction: column; min-width: 0; }
:where(.form-group, .field, .filter-group) > :where(label) { margin-bottom: 4px; }
:where(.hint) { font-size: 0.76rem; margin-top: 3px; line-height: 1.4; }
:where(.form-grid, .form-row) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
:where(.form-section) { border: 1px solid var(--f-border-soft); border-radius: 10px; padding: 16px; margin-bottom: 16px; background: var(--f-surface); }
:where(.form-section) > :where(h3), :where(.section-title) {
    margin: 0 0 12px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--f-accent);
}
:where(.actions, .btn-row) { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
:where(.filters, .filter-row, .toolbar) { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
:where(.filter-group) { min-width: 150px; }

/* ---------- 4. the form shell (templates/form_base.html + _form.html) ----------
   f- prefixed, so no legacy page is touched. */
body.f-shell { margin: 0; background: var(--f-canvas); color: var(--f-ink);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 15px; line-height: 1.45; }
.f-page { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.f-page.f-narrow { max-width: 720px; }
.f-page.f-wide { max-width: none; }
.f-page > .back-link { display: inline-block; margin-bottom: .9rem; color: var(--f-accent); background: var(--f-accent-soft);
    padding: .3rem .85rem; border-radius: var(--f-radius); font-size: .82rem; font-weight: 600; text-decoration: none; }
.f-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.1rem; }
.f-head h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.f-head p { margin: .25rem 0 0; font-size: .88rem; color: var(--f-muted); }
.f-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.f-shell .form-group input, .f-shell .form-group select, .f-shell .form-group textarea { width: 100%; }
.f-shell .filters .form-group { flex: 1 1 170px; }
.f-filter-go { display: flex; gap: 8px; }
.f-section-note { margin: -6px 0 12px; }
.f-check { display: flex; flex-direction: column; justify-content: flex-end; font-size: .9rem; }
.f-span-2 { grid-column: span 2; } .f-span-3 { grid-column: span 3; } .f-span-all { grid-column: 1 / -1; }
.f-table-wrap { overflow-x: auto; background: var(--f-surface); border: 1px solid var(--f-border-soft); border-radius: 10px; }
.f-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.f-table th { text-align: left; padding: 9px 12px; white-space: nowrap; }   /* band colours: layer 0's th rule */
.f-table td { padding: 8px 12px; border-bottom: 1px solid #f0f2ee; overflow-wrap: break-word; }
.f-table tr:last-child td { border-bottom: 0; }
.f-empty { padding: 1.2rem; text-align: center; color: var(--f-muted); font-size: .88rem; }
/* a long form's Save bar (the save_bar macro): on screen the whole way down */
.f-savebar { position: sticky; bottom: 0; z-index: 5; align-items: center; padding: 10px 16px;
    background: var(--f-surface); border: 1px solid var(--f-border-soft); border-radius: 10px;
    box-shadow: 0 -4px 14px rgba(44, 62, 80, .08); }
.f-unsaved { margin-right: auto; font-size: .84rem; font-weight: 600; color: var(--f-warn); }
.f-unsaved[hidden] { display: none; }

/* ---------- phones: 16px stops iOS zooming into a focused field ---------- */
@media (max-width: 640px) {
    body:not(.no-form-theme) input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
    body:not(.no-form-theme) select:not(.f-raw),
    body:not(.no-form-theme) textarea:not(.f-raw) { font-size: 16px; min-height: 42px; }
    body:not(.no-form-theme) td input:not(.f-raw):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
    body:not(.no-form-theme) td select:not(.f-raw) { font-size: 16px; min-height: 34px; }
    body:not(.no-form-theme) select[multiple]:not(.f-raw), body:not(.no-form-theme) select[size]:not(.f-raw) { min-height: 0; }
    /* a flex item never shrinks below its content, and a select is as wide as
       its longest option: let whatever wraps a control shrink to its row */
    body:not(.no-form-theme) :where(div, label, span, p, li, fieldset):has(> select, > input, > textarea) { min-width: 0; max-width: 100%; }
    /* …and a row of buttons may wrap rather than push the page sideways */
    body:not(.no-form-theme) :where(div, form, p, td):has(> .btn ~ .btn) { flex-wrap: wrap; }
    :is(.tabs, .sem-tabs, .tp-tabs, .slot-tabs, .kind-tabs, .type-toggle, .f-tabs) > :is(a, button, label, .tab, .tab-btn, .sem-tab, .tp-tab) { padding: 9px 12px; }
    body .ss-opt { padding: 11px 10px; font-size: 16px; white-space: normal; }
    .btn, :is(a, button, input):is([class^="btn-"], [class*=" btn-"]):not(.btn-link, .btn-badge, .btn-close, .btn-toggle, .btn-nav, .btn-top, .btn-punch, .btn-start, .btn-end, .btn-group, .btn-maps, .f-raw) { min-height: 42px; padding: 0 12px; white-space: normal; }
    body .btn-sm, body .btn-small, body .btn-mini, body .btn-cancel-sm,
    body td .btn, body td :is(a, button, input):is([class^="btn-"], [class*=" btn-"]):not(.btn-link, .btn-badge, .btn-close, .btn-toggle, .btn-nav, .btn-top, .btn-punch, .btn-start, .btn-end, .btn-group, .btn-maps, .f-raw) { min-height: 34px; padding: 0 10px; }
    :where(.form-grid, .form-row) { grid-template-columns: 1fr; }
    body:not(.no-form-theme) th { font-size: .68rem; letter-spacing: 0; }
    .f-span-2, .f-span-3 { grid-column: auto; }
    .f-page { padding: 1rem .9rem 2.5rem; }
    .f-head h1 { font-size: 1.25rem; }
    .f-filter-go { flex: 1 1 100%; } .f-filter-go .btn { flex: 1; }
}