/* ui_theme.css — CRAIG'S CHOSEN UI, over the production stylesheet. Orbit #1773.

   Craig picked his combination in the UI sandbox on 2026-09-28 (code
   p=c&t=n&l=0&b=i&y=t&d=c&c=p&n=r&v=s&th=f&w=m) and added: "I would actually like
   the Palette to be a user by user selection between warm, cool and sunset, also
   like the user to be able to select compact or comfortable". The declarations
   are the sandbox's (frontend/ui-sandbox.css) for the options chosen, applied to
   the real app rather than to samples.

   #1809 — SUPERSEDED BY CRAIG AND KAREN'S CONSIDERED CODE (2026-09-28)
   p=c&t=f&b=i&y=t&d=k&c=t&n=r&v=m&m=i&th=f&w=m&fs=276bb2&fe=5294dc&pc=276bb2,
   with Craig's rulings that palette, density AND title bars are each person's
   choice. What that code set:

     PALETTE     per person: data-pal on <html> = cool (default) | warm | sunset.
                 The palette owns the theme colour (--primary) and the chrome
                 (--domain-chrome-bg); the domain's own colour settings are no
                 longer applied (app.js _applyDomainConfig).
     DENSITY     per person: data-dens = compact (DEFAULT, about a third less
                 padding in rows, bars and buttons) | comfortable (today's).
     TITLE BARS  per person: data-tb = fade-soft (DEFAULT: the soft fade from
                 the deep ParaQualis blue #276BB2 to the mid blue #5294DC) |
                 fade-medium | fade-right | light | accent | filled.
     CORNERS     TODAY's radii and shadows (#1773's proposed set is removed).
     PROVISIONAL taxonomy chips are MARKED: dashed border and the word.
     MENUS       icons + hints: plain rows, a leading icon column, the shortcut
                 as quiet text (rc_halo.js actionMenu, the one menu widget).
     Type stays as today; the dialog logo column is gone; section navigation is
     the rail (styles.css #1756); buttons follow the position rule below; theme
     follows the computer; Mac window controls.

   The defaults are auth.UI_PREFS's. An ABSENT attribute draws the default, so
   the page is right before the first sign-in; ui_prefs.js sets the attributes
   before the page is drawn once a choice is known. */

/* ══ PALETTE ══════════════════════════════════════════════════════════════ */
:root, :root[data-pal="cool"] {
    --primary: var(--pq-blue-900);
    /* #1938 — THE CALM TOP BAR, on every palette (Craig 2026-10-06, comment
       21760: "calm top bar as drawn", through the theme tokens, "every appearance
       theme"). The bar is the surface with the ordinary ink and a line beneath;
       the header logo switches to its colour mark by the bar's lightness (#1764,
       app.js RCHeaderLogo). The deep-blue bar is retired. */
    --domain-chrome-bg: var(--pq-surface);
    --domain-chrome-ink: var(--pq-ink);
}
:root[data-pal="warm"] {
    --primary: var(--pq-blue-900);
    --domain-chrome-bg: var(--pq-surface);
    --domain-chrome-ink: var(--pq-ink);
    --pq-accent-2: var(--pq-gold-400);
}
:root[data-pal="sunset"] {
    --primary: var(--pq-blue-900);
    --domain-chrome-bg: var(--pq-surface);
    --domain-chrome-ink: var(--pq-ink);
    --rc-sunset-h: linear-gradient(90deg, #276BB2 0%, #3274C2 38%, #4C8ED8 62%, #5294DC 74%, #F08568 92%, #FF8053 100%);
    --rc-sunset-v: linear-gradient(180deg, #276BB2 0%, #3274C2 30%, #4C8ED8 52%, #5294DC 64%, #89C0F5 76%, #FECF81 88%, #FFBE69 94%, #FF8053 100%);
}
/* ══ #1938 · EACH PALETTE'S OWN COLOUR, INSIDE THE CALM STRUCTURE ════════════
   Craig 2026-10-06, on 4.3.1587: "The appearance menu now is not making any
   difference, this still needs to work, but with the new colors". Every palette
   keeps the calm structure — neutral grounds, the calm top bar, ONE selection
   colour used for every selected item on screen — and brings its own colour into
   it through the tokens. The light-blue selection is Cool's (the default); the
   ruling was ONE selection colour within the app, not one across the palettes.
     Cool    light-blue selection, blue accent (as ruled, comment 21760)
     Warm    pale-gold selection, gold accent line under the bar, a faint warm tint
     Sunset  pale-peach selection, its gradient as the bar's accent line and the
             rail's edge
   Every selected item reads --primary-pale (styles.css "ONE SELECTION COLOUR"),
   so setting it here changes them all together. */
:root[data-pal="warm"]   { --primary-pale: #fbecd2; --pq-ground: #f5f0e6; --pq-soft: #f8f4ec; }
:root[data-pal="sunset"] { --primary-pale: #fde6da; }
@media (prefers-color-scheme: dark) {
    :root[data-pal="warm"]   { --primary-pale: #3a2f1a; --pq-ground: #17150f; --pq-soft: #27231b; }
    :root[data-pal="sunset"] { --primary-pale: #3b2620; }
}
:root:is([data-pal="warm"], [data-pal="sunset"]) body > header {
    background-image: var(--rc-accent-img);
    background-repeat: no-repeat; background-position: left bottom; background-size: 100% 3px;
}
:root[data-pal="sunset"] .qms-access-sidebar {
    background-image: var(--rc-sunset-v);
    background-repeat: no-repeat; background-position: right top; background-size: 3px 100%;
}
/* Sunset in dark: the same stops taken down into the dark ramp (#1655). */
@media (prefers-color-scheme: dark) {
    :root[data-pal="sunset"] {
        --rc-sunset-h: linear-gradient(90deg,
            color-mix(in oklab, #276BB2 45%, #111721), color-mix(in oklab, #4C8ED8 42%, #111721) 60%,
            color-mix(in oklab, #F08568 40%, #111721) 92%, color-mix(in oklab, #FF8053 42%, #111721));
        --rc-sunset-v: linear-gradient(180deg,
            color-mix(in oklab, #276BB2 45%, #111721), color-mix(in oklab, #4C8ED8 42%, #111721) 55%,
            color-mix(in oklab, #FECF81 30%, #111721) 88%, color-mix(in oklab, #FF8053 40%, #111721));
    }
}
/* The accent line each palette draws under the "Light + accent line" title bar. */
:root { --rc-accent-img: linear-gradient(90deg, var(--pq-blue-900), var(--pq-blue-500)); }
:root[data-pal="warm"] { --rc-accent-img: linear-gradient(90deg, var(--pq-gold-400), var(--pq-orange-500)); }
:root[data-pal="sunset"] { --rc-accent-img: linear-gradient(90deg, #276BB2, #4C8ED8 45%, #89C0F5 60%, #FECF81 75%, #FFBE69 88%, #FF8053); }

/* ══ DENSITY: compact takes about a third off ═════════════════════════════
   #1809 — Compact is the DEFAULT, so it applies unless the person chose
   Comfortable (an absent attribute is the default). */
:root:not([data-dens="comfortable"]) .qma-table td { padding-top: 6px; padding-bottom: 6px; }
:root:not([data-dens="comfortable"]) .qma-table thead th { padding-top: 6px; padding-bottom: 6px; }
:root:not([data-dens="comfortable"]) .qms-access-toolbar { padding: 0 20px 10px; }
:root:not([data-dens="comfortable"]) :is(.qms-rail-item, .qms-rail-add):not(.qms-rail-fname) { padding-top: 5px; padding-bottom: 5px; }
:root:not([data-dens="comfortable"]) .qms-rail-folder .qms-rail-fname { padding-top: 5px; padding-bottom: 5px; }
:root:not([data-dens="comfortable"]) :is(.qma-btn-primary, .qma-btn-secondary) { padding-top: 3px; padding-bottom: 3px; }
:root:not([data-dens="comfortable"]) :is(.btn-sem, .dialog-btn) { padding-top: 4px; padding-bottom: 4px; }
:root:not([data-dens="comfortable"]) .modal-header { padding: 8px 14px; }
:root:not([data-dens="comfortable"]) .modal-overlay:not(#admin-modal) .modal-body { padding: 14px 18px !important; }
:root:not([data-dens="comfortable"]) #admin-modal .admin-tab { padding: 5px 10px; }
:root:not([data-dens="comfortable"]) .admin-tab { padding: 5px 12px 6px; }
:root:not([data-dens="comfortable"]) .rc-drawer > .rc-drawer-head { min-height: 46px; padding: 6px 12px; }
:root:not([data-dens="comfortable"]) .auth-form { gap: 5px; }
:root:not([data-dens="comfortable"]) .opt-section { padding: 10px 14px; margin-bottom: 10px; }
:root:not([data-dens="comfortable"]) .er-fullscreen-header { padding: 6px 12px; }
:root:not([data-dens="comfortable"]) body > header { height: 44px; }
:root:not([data-dens="comfortable"]) .rc-halo-linkbtn { padding: 5px 10px; }

/* ══ BUTTONS: icon-only by position ═══════════════════════════════════════
   Window controls, palettes, view toolbars and common row actions show the
   icon alone, with the word as the tooltip and the accessible name; commit,
   sign, analyse, override, delete-record and domain terms keep icon + word.
   Measured on v4.3.1303: the canvas palettes, the QMS row actions and the
   window closes were already icon-only. The buttons the sandbox marked were
   changed in their MARKUP (index.html, app.js, qms_access.js), not hidden here. */

/* ══ APPEARANCE WINDOW (ui_prefs.js) ══════════════════════════════════════ */
.ui-prefs-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ui-prefs-seg [aria-pressed="true"] {
    background: color-mix(in oklab, var(--pq-accent-2) 16%, var(--pq-surface));
    color: var(--primary-fg); border-color: var(--primary-fg); font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .ui-prefs-seg * { transition: none !important; }
}

/* ══ TITLE BARS: per person, default the soft fade (#1809) ════════════════
   The sandbox's six styles (ui-sandbox.css §2), applied to every window and
   panel title bar: .modal-header, the drawer heads, the Expert Review header.
   `filled` is styles.css's own navy fill, so it adds nothing here except the
   Sunset palette's gradient. The fades MIX the two blues into the window's own
   surface (--bg-white), so one rule is a pale tint in light and a dark tint in
   dark, and the title keeps the ordinary text colour (#1802 measured >= 8.8:1).
   Under more contrast the fades give way to the plain surface and a rule. */
:root {
    --rc-fade-start: #276bb2;   /* fs — --pq-blue-900, the brand's deep blue */
    --rc-fade-end: #5294dc;     /* fe — --pq-blue-500, the brand's mid blue */
    --rc-soft-a: 16%; --rc-soft-b: 16%;
    --rc-med-a: 30%; --rc-med-b: 28%;
    --rc-right-a: 32%; --rc-right-b: 14%;
}
:root[data-pal="sunset"][data-tb="filled"] :is(.modal-header, .rc-drawer > .rc-drawer-head) {
    background-image: var(--rc-sunset-h);
}
/* On the filled bar EVERYTHING in a drawer head is light, not only its h2:
   styles.css set white on the title and the Findings controls and left the head
   itself on the page's dark text, so the close, the run stamp and any title not
   an h2 drew near-black on the deep blue (about 3.3:1; regcheck, 4.3.1354). */
:root[data-tb="filled"] .rc-drawer > .rc-drawer-head { color: var(--domain-chrome-ink, #fff); }
:root[data-tb="filled"] .rc-drawer > .rc-drawer-head .findings-run-stamp { color: rgba(255, 255, 255, 0.92); }   /* 4.9:1 on #276BB2 */
:root[data-tb="filled"] .rc-drawer > .rc-drawer-head .findings-run-stamp.is-never { color: #fff0cc; }   /* 4.8:1 */
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) :is(.modal-header, .rc-drawer > .rc-drawer-head) {
    background: var(--bg-white); color: var(--text);
    border-bottom: 1px solid var(--border);
}
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) :is(.modal-header h2, .modal-header h3, .rc-drawer > .rc-drawer-head h2) {
    color: var(--text);
}
/* The Findings head's controls are drawn white for the navy bar (styles.css,
   #1800 added the sort select); on a light bar they take the page's text. The
   sandbox's rule predates #1800 and left the select white on white. */
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) .rc-drawer > .rc-drawer-head :is(.run-all-debates-btn:not(.is-active), .fsf-btn:not(.is-active), .finding-sort-select) {
    color: var(--text); border-color: var(--border); background: transparent;
}
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) .rc-drawer > .rc-drawer-head :is(.run-all-debates-btn, .fsf-btn, .finding-sort-select):hover:not(:disabled) {
    color: var(--primary-fg); border-color: var(--primary-fg); background: var(--hover-bg);
}
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) .rc-drawer > .rc-drawer-head .fsf-btn.is-active {
    border-color: var(--primary-fg);
}
:root:is(:not([data-tb]), [data-tb="light"], [data-tb="accent"], [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) .rc-drawer > .rc-drawer-head .run-all-debates-btn.is-active {
    color: var(--primary-fg); border-color: var(--primary-fg); background: var(--hover-bg);
}
:root[data-tb="accent"] :is(.modal-header, .rc-drawer > .rc-drawer-head, .er-fullscreen-header) {
    background: var(--rc-accent-img) top left / 100% 3px no-repeat, var(--bg-white);
}
:root:is(:not([data-tb]), [data-tb="fade-soft"]) :is(.modal-header, .rc-drawer > .rc-drawer-head, .er-fullscreen-header) {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--rc-fade-start) var(--rc-soft-a), var(--bg-white)),
        color-mix(in oklab, var(--rc-fade-end) var(--rc-soft-b), var(--bg-white)));
}
:root[data-tb="fade-medium"] :is(.modal-header, .rc-drawer > .rc-drawer-head, .er-fullscreen-header) {
    background:
        linear-gradient(90deg, var(--rc-fade-start), var(--rc-fade-end)) left bottom / 100% 2px no-repeat,
        linear-gradient(90deg,
            color-mix(in oklab, var(--rc-fade-start) var(--rc-med-a), var(--bg-white)),
            color-mix(in oklab, var(--rc-fade-end) var(--rc-med-b), var(--bg-white)));
}
:root[data-tb="fade-right"] :is(.modal-header, .rc-drawer > .rc-drawer-head, .er-fullscreen-header) {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--rc-fade-start) var(--rc-right-a), var(--bg-white)),
        color-mix(in oklab, var(--rc-fade-start) var(--rc-right-b), var(--bg-white)) 40%,
        var(--bg-white) 70%);
}
:root:is(:not([data-tb]), [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) .er-fullscreen-header {
    color: var(--text); border-bottom: 1px solid var(--border);
}
@media (prefers-contrast: more) {
    :root:is(:not([data-tb]), [data-tb="fade-soft"], [data-tb="fade-medium"], [data-tb="fade-right"]) :is(.modal-header, .rc-drawer > .rc-drawer-head, .er-fullscreen-header) {
        background: var(--bg-white); border-bottom: 2px solid var(--text);
    }
}

/* ══ PROVISIONAL TAXONOMY CHIPS: marked (#1809, #1687) ════════════════════
   A term the organisation has not yet agreed (taxonomy_term.status
   'unconfirmed', sent by the server as `unconfirmed`) is drawn with a dashed
   border and the word, so it can be told from a confirmed term at a glance
   (qms_access.js _renderTaxChips). */
.qma-tax-chip2[data-status="provisional"] { border-style: dashed; }
.qma-tax-prov-word { font-size: 0.72rem; font-style: italic; color: var(--text-muted); }
@media (prefers-contrast: more) {
    .qma-tax-chip2[data-status="provisional"] { border-width: 2px; }
    .qma-tax-prov-word { color: var(--text); }
}

/* ══ MENUS: icons + hints (#1809, the sandbox's #1803 'icons') ════════════
   Plain rows (styles.css .rc-ctxmenu, #1698), a leading icon column kept even
   when an item has no icon so the labels line up, and the shortcut as quiet
   text on the right rather than a key-cap. Tokens only, so light and dark
   follow the app; keyboard focus keeps the production highlight. */
.rc-ctxmenu .rc-halo-menuitem { grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; }
.rc-ctxmenu .rc-ctxmenu-ic { display: block; width: 16px; height: 16px; color: var(--text-muted); }
.rc-ctxmenu .rc-ctxmenu-danger .rc-ctxmenu-ic { color: inherit; }
.rc-ctxmenu :is(.rc-halo-why, .rc-ctxmenu-detail) { grid-column: 2 / -1; }
.rc-ctxmenu .rc-halo-kbd {
    justify-self: end; border: 0; background: transparent; padding: 0;
    font-family: inherit; font-weight: 400; font-size: 12px; line-height: 1; color: var(--text-muted);
}
.rc-ctxmenu .rc-ctxmenu-group { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
@media (prefers-contrast: more) {
    .rc-ctxmenu :is(.rc-ctxmenu-ic, .rc-halo-kbd, .rc-ctxmenu-group) { color: var(--text); }
}