/*
 * YAW Core UI components
 *
 * Core pages, modules and tools build their content from these classes, so it matches the
 * active template. The default look follows template 1 ("Nordic Functional Canvas"):
 * borderless, typographic, hairline rules, square corners, monospaced labels.
 *
 * A template adapts the components by setting the --ui-* tokens on <body> (they may point at
 * the template's own color variables) and, if needed, overriding individual rules.
 *
 * Selectors on buttons and inputs are qualified with the element (`:is(a, button).ui-btn`)
 * so they win over Tailwind's preflight and forms plugin, which load after this file.
 */

/* ---------------------------------------------------------------------------
   Tokens (defaults; zero specificity so any template rule overrides them)
   --------------------------------------------------------------------------- */
:where(body) {
    --ui-bg: #F9F9FB;
    --ui-surface: #FFFFFF;
    --ui-tint: #F1F2F6;
    --ui-hover: rgba(241, 242, 246, 0.6);
    --ui-text: #2D3142;
    --ui-text-muted: #64748B;
    --ui-text-subtle: #8E99AA;
    --ui-line: rgba(45, 49, 66, 0.10);
    --ui-line-strong: rgba(45, 49, 66, 0.20);
    --ui-primary: #6C63FF;
    --ui-secondary: #00A381;
    --ui-danger: #E11D48;
    --ui-warning: #D97706;
    --ui-ink: #2D3142;            /* primary action buttons */
    --ui-ink-contrast: #FFFFFF;
    --ui-on-primary: #FFFFFF;     /* text on the accent gradient (buttons) */
    /* The accent gradient: the primary color easing to a slightly lighter shade of itself.
       Buttons, titles and navigation all use this one gradient, so they always match. */
    --ui-grad-b: color-mix(in srgb, var(--ui-primary) 82%, #ffffff);   /* same hue, a little lighter: a soft sheen, not a color change. Set it to var(--ui-primary) for a fully flat accent */
    --ui-side: var(--ui-bg);   /* the sidebars share the page/header canvas... */
    --ui-side-wash:            /* ...starting at the tab-strip tone at the top, easing into the canvas, with a faint accent glow low in the corner */
        radial-gradient(120% 45% at 0% 100%, color-mix(in srgb, var(--ui-primary) 7%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, var(--ui-tint) 0%, color-mix(in srgb, var(--ui-tint) 40%, var(--ui-bg)) 35%, var(--ui-bg) 80%);
    --ui-gradient: linear-gradient(100deg, var(--ui-primary), var(--ui-grad-b));   /* the one accent gradient: buttons, titles, navigation */
    /* Categorical palette for tags and anything that must be told apart: ui-tag-c1 … ui-tag-c10.
       Same defaults as core/Colors.php; Settings → Branding and a module's module.json override them. */
    --ui-c1: #6366f1; --ui-c2: #0ea5e9; --ui-c3: #14b8a6; --ui-c4: #22c55e; --ui-c5: #f59e0b;
    --ui-c6: #f97316; --ui-c7: #f43f5e; --ui-c8: #ec4899; --ui-c9: #8b5cf6; --ui-c10: #64748b;
    --ui-radius: 0;               /* cards, panels, dialogs */
    --ui-radius-control: 0;       /* buttons, inputs */
    --ui-radius-panel: var(--ui-radius);   /* section tiles in workspaces */
    --ui-radius-pill: var(--ui-radius);    /* segmented tab control */
    --ui-panel: color-mix(in srgb, var(--ui-surface) 55%, var(--ui-bg));   /* tile background: barely lighter than the canvas */
    --ui-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
:where(html.dark body) {
    --ui-bg: #0B0E17;
    --ui-surface: #121826;
    --ui-tint: #161D2B;
    --ui-hover: rgba(255, 255, 255, 0.03);
    --ui-text: #E6EDF8;
    --ui-text-muted: #8E9FB8;
    --ui-text-subtle: #5C6A80;
    --ui-line: rgba(255, 255, 255, 0.08);
    --ui-line-strong: rgba(255, 255, 255, 0.16);
    --ui-primary: #857DF8;
    --ui-secondary: #2BE4B7;
    --ui-ink: #E6EDF8;
    --ui-ink-contrast: #0B0E17;
    --ui-on-primary: #0B0E17;
}
@supports (color: oklch(from red l c h)) {
    :where(body) {
        --ui-grad-b: oklch(from var(--ui-primary) calc(l + 0.07) c h);
    }
}

/* Marked (selected) text takes the accent too: a tint of it behind the normal text color */
::selection { background: color-mix(in srgb, var(--ui-primary) 30%, transparent); color: var(--ui-text); }
::-moz-selection { background: color-mix(in srgb, var(--ui-primary) 30%, transparent); color: var(--ui-text); }

/* ---------------------------------------------------------------------------
   Page structure
   --------------------------------------------------------------------------- */
.ui-page { display: flex; flex-direction: column; gap: 2.5rem; }

/* Header band: eyebrow (breadcrumb), title, meta line, actions on the right */
.ui-page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ui-line);
}
.ui-eyebrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    font: 500 11px/1.5 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ui-text-subtle);
}
.ui-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin-top: 0.25rem; }
.ui-title {
    margin: 0; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
    color: var(--ui-text);
}
.ui-subtitle {
    font: 500 13px/1.2 var(--ui-font-mono); color: var(--ui-text-subtle);
    border-left: 1px solid var(--ui-line); padding-left: 0.75rem;
}
.ui-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem;
    font: 12px/1.5 var(--ui-font-mono); color: var(--ui-text-muted);
}
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* Two-zone layout: reading zone + tonal side panel */
.ui-split { display: grid; gap: 3rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ui-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   Sections: numbered header with a hairline rule
   --------------------------------------------------------------------------- */
.ui-section { display: flex; flex-direction: column; gap: 1rem; }
.ui-section-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--ui-line);
}
.ui-section-title {
    display: flex; align-items: baseline; gap: 0.75rem; margin: 0;
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ui-text);
}
.ui-section-index { font: 700 12px var(--ui-font-mono); color: var(--ui-primary); }
.ui-section-note { font: 11px/1.5 var(--ui-font-mono); color: var(--ui-text-subtle); }

/* ---------------------------------------------------------------------------
   KPI strip: borderless columns with hairline accents
   --------------------------------------------------------------------------- */
.ui-kpis { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ui-kpi {
    display: flex; flex-direction: column; justify-content: space-between; padding: 0.5rem 0;
    border-bottom: 1px solid var(--ui-line); color: inherit; text-decoration: none;
    transition: border-color 0.15s;
}
.ui-kpi:hover { border-bottom-color: var(--ui-text); }
.ui-kpi-label {
    display: flex; justify-content: space-between; gap: 0.5rem;
    font: 11px/1.5 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-kpi-value {
    margin-top: 0.5rem; font: 800 44px/1 var(--ui-font-mono); letter-spacing: -0.03em; color: var(--ui-text);
}
.ui-kpi-foot {
    display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; padding-top: 0.5rem;
    border-top: 1px solid var(--ui-line); font: 12px/1.5 var(--ui-font-mono); color: var(--ui-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Lists: hairline-divided rows
   --------------------------------------------------------------------------- */
.ui-list { display: flex; flex-direction: column; }
.ui-list > * + * { border-top: 1px solid var(--ui-line); }
.ui-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    padding: 0.875rem 0.5rem; transition: background-color 0.15s;
}
.ui-row:hover { background-color: var(--ui-hover); }
.ui-row-main { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; flex: 1 1 18rem; }
.ui-row-title { font-size: 14px; font-weight: 700; color: var(--ui-text); }
.ui-row-text { margin-top: 0.125rem; font-size: 12px; color: var(--ui-text-muted); }
.ui-row-side { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-code { font: 600 11px var(--ui-font-mono); color: var(--ui-text-subtle); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Panels and cards
   --------------------------------------------------------------------------- */
/* Tonal side canvas */
.ui-panel { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; background: var(--ui-tint); border-radius: var(--ui-radius); }
.ui-panel-title {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--ui-line-strong);
    font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text);
}

/* Elevated surface for forms and widgets */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 1.5rem; }
.ui-card-flush { padding: 0; overflow: hidden; }
.ui-widgets { display: grid; gap: 1.5rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ui-widget { grid-column: span 6; }
@media (min-width: 768px) {
    .ui-widget-full { grid-column: span 6; }
    .ui-widget-half { grid-column: span 3; }
    .ui-widget-third { grid-column: span 2; }
}
.ui-widget-title {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
    font: 11px/1.5 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-widget-title .material-symbols-outlined { font-size: 16px; color: var(--ui-primary); }

/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */
/* Workspace (pages with tabs): a segmented tab control floating on the canvas, and every section
   below it as a soft tile. No big white card: tiles are only slightly lighter than the canvas, with a
   hairline, a gentle shadow and (in templates that round corners) a generous radius. */
.ui-workspace { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ui-workspace-body { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ui-page:has(> .ui-workspace) { gap: 1.75rem; }
.ui-page:has(> .ui-workspace) > .ui-page-header { padding-bottom: 0; border-bottom: 0; }

.ui-workspace .ui-section {
    padding: 1.5rem 1.75rem; background: var(--ui-panel); border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 28px -18px rgba(15, 23, 42, 0.22);
}
html.dark .ui-workspace .ui-section {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px -18px rgba(0, 0, 0, 0.7);
}
.ui-workspace .ui-page { gap: 1.25rem; }
/* Use the whole width: fields flow into as many columns as fit */
.ui-workspace .ui-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem 2rem; align-items: start; }
.ui-workspace .ui-form > .ui-list, .ui-workspace .ui-form > .ui-table-wrap { grid-column: 1 / -1; }

/* Tab row: sticks below the header chrome while the page scrolls; the Save button joins it (see ui.js) */
.ui-workspace-bar {
    position: sticky; top: var(--ui-sticky-top, 0px); z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0;
    background: var(--ui-bg); border-bottom: 1px solid transparent; transition: border-color 0.15s;
}
.ui-workspace-bar.is-stuck { border-bottom-color: var(--ui-line-strong); }
.ui-workspace-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.ui-workspace-actions:empty { display: none; }
.ui-workspace-sentinel { height: 0; margin: 0 0 -1.25rem; padding: 0; }
.ui-workspace .ui-section-title { align-items: center; font-size: 15px; }
/* The section number becomes a small accent badge */
.ui-workspace .ui-section-index {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px;
    border-radius: calc(var(--ui-radius-panel) / 2); font: 700 11px var(--ui-font-mono);
    background: color-mix(in srgb, var(--ui-primary) 13%, transparent); color: var(--ui-primary);
}

/* Tab bar: a segmented control. The active segment is lifted like a key. */
.ui-tabs {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem; max-width: 100%; padding: 8px;
    background: color-mix(in srgb, var(--ui-text) 7%, transparent); border-radius: var(--ui-radius-pill); overflow-x: auto;
}
.ui-tab {
    display: flex; align-items: center; gap: 0.5rem; height: 34px; padding: 0 0.9375rem;
    border-radius: calc(var(--ui-radius-pill) - 3px); white-space: nowrap; text-decoration: none;
    font-size: 13px; font-weight: 600; color: var(--ui-text-muted);
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ui-tab .material-symbols-outlined { font-size: 17px; color: var(--ui-text-subtle); transition: color 0.15s; }
.ui-tab:hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-text) 7%, transparent); }
.ui-tab:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-tab[aria-current="page"] {
    background: var(--ui-surface); color: var(--ui-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--ui-line);
}
.ui-tab[aria-current="page"] .material-symbols-outlined { color: var(--ui-primary); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
:is(a, button, summary).ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control);
    background-color: var(--ui-surface); color: var(--ui-text);
    font: 500 12px/1.4 var(--ui-font-mono); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
:is(a, button, summary).ui-btn:hover { border-color: var(--ui-text); }
:is(a, button, summary).ui-btn .material-symbols-outlined { font-size: 16px; }
:is(a, button, summary).ui-btn-primary {
    /* Quiet until you point at it: a plain button that turns into the accent gradient on hover */
    background: var(--ui-surface); border-color: var(--ui-line-strong); color: var(--ui-text); font-weight: 600;
    background-size: 100% 100%; background-repeat: no-repeat; background-origin: border-box;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s, background-color 0.2s;
}
:is(a, button, summary).ui-btn-primary .material-symbols-outlined { color: var(--ui-primary); transition: color 0.2s; }
:is(a, button, summary).ui-btn-primary:hover,
:is(a, button, summary).ui-btn-primary:focus-visible {
    border-color: transparent; color: var(--ui-on-primary);
    background-image: var(--ui-gradient);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ui-primary) 85%, transparent);
    transform: translateY(-1px);
}
:is(a, button, summary).ui-btn-primary:hover .material-symbols-outlined,
:is(a, button, summary).ui-btn-primary:focus-visible .material-symbols-outlined { color: inherit; }
:is(a, button, summary).ui-btn-primary:active { transform: none; filter: brightness(0.96); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
:is(a, button, summary).ui-btn-primary:disabled { opacity: 0.5; transform: none; box-shadow: none; cursor: not-allowed; background-image: none; border-color: var(--ui-line-strong); color: var(--ui-text); }
:is(a, button, summary).ui-btn-link { border-color: transparent; background-color: transparent; padding-left: 0; padding-right: 0; }
:is(a, button, summary).ui-btn-link:hover { border-color: transparent; color: var(--ui-primary); }
:is(a, button, summary).ui-btn-danger { color: var(--ui-danger); }
:is(a, button, summary).ui-btn-danger:hover { border-color: var(--ui-danger); }
:is(a, button, summary).ui-btn-sm { padding: 0.25rem 0.625rem; font-size: 11px; }
:is(a, button, summary).ui-btn-icon { padding: 0.375rem; }
summary.ui-btn { list-style: none; }
summary.ui-btn::-webkit-details-marker { display: none; }
:is(a, button, summary).ui-btn:focus-visible, .ui-tab:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.ui-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ui-form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ui-field { display: flex; flex-direction: column; gap: 0.375rem; position: relative; }
.ui-label { font: 600 11px/1.4 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle); transition: color 0.2s ease; }
.ui-field:focus-within > .ui-label, .ui-field:focus-within .ui-label:first-child { color: var(--ui-primary); }
.ui-label-req { color: var(--ui-danger); margin-left: 0.125rem; }

/* ---------------------------------------------------------------------------
   Inputs, text areas and drop-downs (class ui-input on <input>, <textarea>, <select>; or ui_field() in PHP)
   Resting: a tinted surface with a hairline. Hover: the hairline firms up. Focus: the border turns to the
   accent, a soft ring fades in and an accent-gradient line sweeps along the bottom edge. Invalid (only once
   the user has interacted): the same, in the danger color. Everything that is not text-like keeps the
   browser's own control, so touch, keyboard and screen readers behave as they do everywhere.
   --------------------------------------------------------------------------- */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }   /* native pickers, scrollbars and autofill follow the mode */

/* Width stays low-specificity so layout utilities (w-40, flex-1, max-w-*) can size inputs. */
.ui-input { width: 100%; }
:is(input, select, textarea).ui-input {
    height: 38px; padding: 0 0.875rem;
    background-color: color-mix(in srgb, var(--ui-surface) 62%, var(--ui-bg)); color: var(--ui-text);
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-control);
    font: inherit; font-size: 14px; line-height: 1.4; caret-color: var(--ui-primary);
    background-image: var(--ui-gradient); background-repeat: no-repeat; background-position: left bottom;
    background-size: 0% 2px; background-origin: border-box;
    transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease,
                background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
textarea.ui-input { height: auto; min-height: 6rem; padding: 0.625rem 0.875rem; resize: vertical; }
textarea.ui-input.ui-autosize { field-sizing: content; min-height: 3.5rem; max-height: 18rem; }
:is(input, select, textarea).ui-input::placeholder { color: var(--ui-text-subtle); opacity: 0.85; }
:is(input, select, textarea).ui-input:hover:not(:disabled, :focus) { border-color: color-mix(in srgb, var(--ui-text) 38%, transparent); }
:is(input, select, textarea).ui-input:focus, :is(input, select, textarea).ui-input:focus-visible {
    outline: none; border-color: var(--ui-primary); background-color: var(--ui-surface); background-size: 100% 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-primary) 14%, transparent);
}
:is(input, select, textarea).ui-input:disabled { opacity: 0.55; cursor: not-allowed; background-image: none; }
:is(input, textarea).ui-input:read-only:not(:disabled) { background-color: var(--ui-tint); }
/* Invalid: shown after the user has touched the field (:user-invalid), or when the server says so (aria-invalid) */
:is(input, select, textarea).ui-input:user-invalid, :is(input, select, textarea).ui-input[aria-invalid="true"] {
    border-color: var(--ui-danger); background-image: linear-gradient(var(--ui-danger), var(--ui-danger)); background-size: 100% 2px;
    animation: ui-shake 0.32s ease-in-out 1;
}
:is(input, select, textarea).ui-input:user-invalid:focus, :is(input, select, textarea).ui-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-danger) 16%, transparent);
}
@keyframes ui-shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
/* Browser autofill keeps the theme instead of the yellow/blue default */
:is(input, textarea).ui-input:-webkit-autofill, :is(input, textarea).ui-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ui-text); caret-color: var(--ui-primary);
    box-shadow: 0 0 0 100px color-mix(in srgb, var(--ui-primary) 9%, var(--ui-surface)) inset;
}
/* Leading icon / trailing text: <div class="ui-input-group"><span class="ui-input-icon">…</span><input class="ui-input">…</div> */
.ui-input-group { position: relative; display: flex; align-items: center; }
.ui-input-group:has(> .ui-input-icon) > .ui-input { padding-left: 2.5rem; }
.ui-input-group > .ui-input-icon { position: absolute; left: 0.75rem; display: inline-flex; color: var(--ui-text-subtle); pointer-events: none; transition: color 0.2s; }
.ui-input-group > .ui-input-icon .material-symbols-outlined { font-size: 18px; }
.ui-input-group:focus-within > .ui-input-icon { color: var(--ui-primary); }
.ui-input-group > .ui-input-suffix { position: absolute; right: 0.75rem; font: 500 12px var(--ui-font-mono); color: var(--ui-text-subtle); pointer-events: none; }
.ui-input-group > .ui-input-suffix ~ .ui-input, .ui-input-group:has(.ui-input-suffix) > .ui-input { padding-right: 3rem; }

/* Drop-downs. Where the browser supports customizable selects (appearance: base-select, Chromium 135+)
   the list opens as a styled, animated panel; everywhere else the closed control matches and the browser's
   own list opens, which is the best behaviour on touch devices and for assistive technology anyway. */
select.ui-input:not([multiple], [size]) {
    padding-right: 2.5rem; cursor: pointer; text-overflow: ellipsis;
    appearance: none; -webkit-appearance: none;
    background-image: var(--ui-gradient), 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='%238797B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat; background-position: left bottom, right 0.875rem center;
    background-size: 0% 2px, 12px 8px;
}
select.ui-input:not([multiple], [size]):focus { background-size: 100% 2px, 12px 8px; }
select.ui-input:not([multiple], [size]):is(:user-invalid, [aria-invalid="true"]) {
    background-image: linear-gradient(var(--ui-danger), var(--ui-danger)), 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='%238797B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 2px, 12px 8px;
}
select.ui-input[multiple], select.ui-input[size] { height: auto; padding: 0.375rem; }
select.ui-input option { background: var(--ui-surface); color: var(--ui-text); }

@supports (appearance: base-select) {
    select.ui-input:not([multiple], [size]), select.ui-input:not([multiple], [size])::picker(select) { appearance: base-select; }
    select.ui-input:not([multiple], [size]) { background-image: var(--ui-gradient); background-size: 0% 2px; background-position: left bottom; background-repeat: no-repeat; align-items: center; padding-right: 0.875rem; }   /* the arrow is part of the box here, so the padding matches the left side instead of making room for a background image */
    select.ui-input:not([multiple], [size]):focus, select.ui-input:not([multiple], [size]):open { background-size: 100% 2px; }
    select.ui-input:not([multiple], [size]):is(:user-invalid, [aria-invalid="true"]) { background-image: linear-gradient(var(--ui-danger), var(--ui-danger)); background-size: 100% 2px; }
    /* A long label stays on one line, cut with an ellipsis, instead of wrapping out of the box (the full text is in the list) */
    select.ui-input:not([multiple], [size]):has(> button > selectedcontent) { min-width: 0; overflow: hidden; white-space: nowrap; }
    select.ui-input:not([multiple], [size]) selectedcontent { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* The arrow: drawn with borders, turns over while the list is open */
    select.ui-input:not([multiple], [size])::picker-icon {
        content: ''; width: 7px; height: 7px; margin-left: auto; flex-shrink: 0;
        border-right: 1.6px solid var(--ui-text-subtle); border-bottom: 1.6px solid var(--ui-text-subtle);
        transform: translateY(-2px) rotate(45deg); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s;
    }
    select.ui-input:not([multiple], [size]):is(:hover, :focus)::picker-icon { border-color: var(--ui-primary); }
    select.ui-input:not([multiple], [size]):open::picker-icon { transform: translateY(2px) rotate(-135deg); border-color: var(--ui-primary); }

    /* The list: a panel that drops in */
    select.ui-input::picker(select) {
        margin-top: 6px; padding: 6px; min-width: anchor-size(width); max-height: min(22rem, 60vh);
        background: var(--ui-surface); color: var(--ui-text);
        border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-control);
        box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--ui-primary) 45%, transparent);
        scrollbar-width: thin;
        opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top center;
        transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), overlay 0.28s allow-discrete, display 0.28s allow-discrete;
    }
    select.ui-input::picker(select):popover-open { opacity: 1; transform: none; }
    @starting-style { select.ui-input::picker(select):popover-open { opacity: 0; transform: translateY(-8px) scale(0.985); } }
    select.ui-input option {
        display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--ui-radius-control) / 1.5);
        font-size: 14px; cursor: pointer; transition: background-color 0.15s ease, padding-left 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    select.ui-input option:hover, select.ui-input option:focus-visible { background: color-mix(in srgb, var(--ui-primary) 9%, transparent); padding-left: 1rem; }
    select.ui-input option:checked { background: color-mix(in srgb, var(--ui-primary) 14%, transparent); font-weight: 600; }
    select.ui-input option:disabled { opacity: 0.45; cursor: not-allowed; }
    select.ui-input option::checkmark { order: 1; margin-left: auto; color: var(--ui-primary); }
    select.ui-input optgroup { padding: 0.5rem 0.75rem 0.25rem; font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
    select.ui-input optgroup option { font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--ui-text); }
}

@media (prefers-reduced-motion: reduce) {
    :is(input, select, textarea).ui-input { transition: none; animation: none !important; }
    @supports (appearance: base-select) { select.ui-input::picker(select) { transition: none; } }
}
.ui-help { font-size: 12px; color: var(--ui-text-muted); }
.ui-field-error { font-size: 12px; color: var(--ui-danger); }
.ui-check { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--ui-text); cursor: pointer; }
.ui-check input { color: var(--ui-primary); }
/* Groups: stacked parts of one section, each with an icon, a title, a help line and its control */
.ui-groups { display: flex; flex-direction: column; }
.ui-group { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--ui-line); min-width: 0; }
.ui-group:first-child { padding-top: 0.5rem; border-top: 0; }
.ui-group:last-child { padding-bottom: 0.25rem; }
.ui-group-head { display: flex; align-items: center; gap: 0.875rem; }
.ui-group-head .ui-help { margin: 0.125rem 0 0; }
.ui-group-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px;
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent); color: var(--ui-primary); border-radius: var(--ui-radius-control);
}
.ui-group-icon .material-symbols-outlined { font-size: 20px; }
.ui-group-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.005em; color: var(--ui-text); }

/* Segmented control: radio options as one pill, the chosen one lifted */
.ui-segmented {
    display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 2px; padding: 4px; max-width: 100%;
    background: color-mix(in srgb, var(--ui-text) 7%, transparent); border-radius: var(--ui-radius-pill);
}
.ui-segment { position: relative; display: block; cursor: pointer; }
.ui-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ui-segment > span {
    display: flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 1.125rem;
    border-radius: calc(var(--ui-radius-pill) - 3px); font-size: 13px; font-weight: 600; color: var(--ui-text-muted);
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ui-segment > span .material-symbols-outlined { font-size: 18px; color: var(--ui-text-subtle); transition: color 0.15s; }
.ui-segment:hover > span { color: var(--ui-text); }
.ui-segment input:checked + span { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--ui-line); }
.ui-segment input:checked + span .material-symbols-outlined { color: var(--ui-primary); }
.ui-segment input:focus-visible + span { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--ui-line); }

/* Choice cards: radio/checkbox options shown as selectable tiles */
.ui-choices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ui-choice {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem;
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.ui-choice:hover { border-color: var(--ui-text-subtle); }
.ui-choice:has(input:checked) { border-color: var(--ui-primary); box-shadow: inset 0 0 0 1px var(--ui-primary); }
.ui-choice input { color: var(--ui-primary); flex-shrink: 0; }
.ui-choice-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--ui-tint); color: var(--ui-primary); border-radius: var(--ui-radius-control); }
.ui-choice-title { display: block; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.ui-choice-text { display: block; margin-top: 0.125rem; font-size: 12px; color: var(--ui-text-muted); }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-table th {
    padding: 0.625rem 1rem; text-align: left; background: var(--ui-tint); border-bottom: 1px solid var(--ui-line);
    font: 600 11px/1.4 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle);
    white-space: nowrap;
}
.ui-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ui-line); color: var(--ui-text); vertical-align: middle; }
.ui-table tbody tr { transition: background-color 0.15s; }
.ui-table tbody tr:hover { background-color: var(--ui-hover); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .ui-num { text-align: right; }
.ui-table-group td { background: var(--ui-tint); font: 700 11px var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-primary); }

/* ---------------------------------------------------------------------------
   Tags, avatars, text helpers
   --------------------------------------------------------------------------- */
.ui-tag {
    display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
    font: 600 11px/1.4 var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-tag-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; }
.ui-tag-primary { color: var(--ui-primary); }
.ui-tag-success { color: var(--ui-secondary); }
.ui-tag-danger { color: var(--ui-danger); }
.ui-tag-warning { color: var(--ui-warning); }
/* Palette tags: a tint of the color, a hairline of it, and text mixed toward the page's text color so it
   stays readable on the light and the dark page whatever the color. `ui-tag-color` takes any
   --ui-tag-color (ui_tag() sets it for a validated hex). */
.ui-tag-c1 { --ui-tag-color: var(--ui-c1); } .ui-tag-c2 { --ui-tag-color: var(--ui-c2); }
.ui-tag-c3 { --ui-tag-color: var(--ui-c3); } .ui-tag-c4 { --ui-tag-color: var(--ui-c4); }
.ui-tag-c5 { --ui-tag-color: var(--ui-c5); } .ui-tag-c6 { --ui-tag-color: var(--ui-c6); }
.ui-tag-c7 { --ui-tag-color: var(--ui-c7); } .ui-tag-c8 { --ui-tag-color: var(--ui-c8); }
.ui-tag-c9 { --ui-tag-color: var(--ui-c9); } .ui-tag-c10 { --ui-tag-color: var(--ui-c10); }
:is(.ui-tag-c1, .ui-tag-c2, .ui-tag-c3, .ui-tag-c4, .ui-tag-c5, .ui-tag-c6, .ui-tag-c7, .ui-tag-c8, .ui-tag-c9, .ui-tag-c10, .ui-tag-color) {
    padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--ui-tag-color) 34%, transparent);
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-tag-color) 13%, transparent);
    color: color-mix(in srgb, var(--ui-tag-color) 62%, var(--ui-text));
}
:is(.ui-tag-c1, .ui-tag-c2, .ui-tag-c3, .ui-tag-c4, .ui-tag-c5, .ui-tag-c6, .ui-tag-c7, .ui-tag-c8, .ui-tag-c9, .ui-tag-c10, .ui-tag-color).ui-tag-dot::before { background: var(--ui-tag-color); }
/* The same colors for other elements: a class sets --ui-tag-color, the helpers use it */
.ui-c1 { --ui-tag-color: var(--ui-c1); } .ui-c2 { --ui-tag-color: var(--ui-c2); } .ui-c3 { --ui-tag-color: var(--ui-c3); }
.ui-c4 { --ui-tag-color: var(--ui-c4); } .ui-c5 { --ui-tag-color: var(--ui-c5); } .ui-c6 { --ui-tag-color: var(--ui-c6); }
.ui-c7 { --ui-tag-color: var(--ui-c7); } .ui-c8 { --ui-tag-color: var(--ui-c8); } .ui-c9 { --ui-tag-color: var(--ui-c9); }
.ui-c10 { --ui-tag-color: var(--ui-c10); }
.ui-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; background: var(--ui-tag-color, currentColor); }
.ui-swatch { display: inline-block; width: 28px; height: 28px; background: var(--ui-tag-color, var(--ui-line)); border: 1px solid color-mix(in srgb, var(--ui-text) 14%, transparent); border-radius: var(--ui-radius-control); }
.ui-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
    background: var(--ui-tint); color: var(--ui-text); border-radius: var(--ui-radius-control);
    font: 700 11px var(--ui-font-mono); text-transform: uppercase;
}
.ui-mono { font-family: var(--ui-font-mono); }
.ui-muted { color: var(--ui-text-muted); }
.ui-subtle { color: var(--ui-text-subtle); }
.ui-link { color: var(--ui-primary); font-weight: 600; text-decoration: none; }
.ui-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Alerts and empty states
   --------------------------------------------------------------------------- */
.ui-alert {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem;
    background: var(--ui-tint); border-left: 2px solid var(--ui-text-subtle);
    font-size: 13px; color: var(--ui-text);
}
.ui-alert .material-symbols-outlined { font-size: 18px; }
.ui-alert-success { border-left-color: var(--ui-secondary); }
.ui-alert-success .material-symbols-outlined { color: var(--ui-secondary); }
.ui-alert-error { border-left-color: var(--ui-danger); }
.ui-alert-error .material-symbols-outlined { color: var(--ui-danger); }
.ui-alert-warning { border-left-color: var(--ui-warning); }
.ui-alert-warning .material-symbols-outlined { color: var(--ui-warning); }

/* ---------------------------------------------------------------------------
   Tab strip of opened modules (templates/_shared/tab-strip.php)
   Hangs from the bottom edge of the header; the active tab shares the page background,
   so it reads as one surface with the content below.
   --------------------------------------------------------------------------- */
.ui-tabstrip {
    display: flex; align-items: flex-end; gap: 0.25rem; height: 36px; padding: 0 0.5rem 0 0;
    background: var(--ui-tint); border-bottom: 1px solid var(--ui-line);
}
.ui-tabstrip-list {
    display: flex; align-items: flex-end; gap: 1px; margin: 0; padding: 0; list-style: none;
    min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.ui-tabstrip-list::-webkit-scrollbar { display: none; }
.ui-tabstrip-item {
    position: relative; display: flex; align-items: center; flex-shrink: 0; height: 36px;
    border-top: 2px solid transparent; color: var(--ui-text-muted);
    transition: background-color 0.15s, color 0.15s;
}
.ui-tabstrip-item:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-tabstrip-item.is-active {
    height: 37px; margin-bottom: -1px; border-top-color: var(--ui-primary);
    background: var(--ui-bg); color: var(--ui-text); font-weight: 600;
}
.ui-tabstrip-link {
    display: flex; align-items: center; gap: 0.5rem; height: 100%; padding: 0 0.25rem 0 0.75rem;
    color: inherit; text-decoration: none; white-space: nowrap; font-size: 12.5px;
}
.ui-tabstrip-item:not(:has(.ui-tabstrip-close)) .ui-tabstrip-link { padding-right: 0.75rem; }
.ui-tabstrip-link:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }
.ui-tabstrip-link .material-symbols-outlined { font-size: 16px; color: var(--ui-text-subtle); }
.ui-tabstrip-item.is-active .ui-tabstrip-link .material-symbols-outlined { color: var(--ui-primary); }
.ui-tabstrip-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ui-tabstrip-close { display: flex; margin: 0; padding-right: 0.375rem; }
.ui-tabstrip-close button {
    display: inline-flex; padding: 2px; background: none; border: 0; cursor: pointer;
    color: var(--ui-text-subtle); border-radius: var(--ui-radius-control);
    opacity: 0; transition: opacity 0.12s, background-color 0.12s, color 0.12s;
}
.ui-tabstrip-close .material-symbols-outlined { font-size: 14px; }
.ui-tabstrip-item:hover .ui-tabstrip-close button, .ui-tabstrip-item.is-active .ui-tabstrip-close button,
.ui-tabstrip-close button:focus-visible { opacity: 1; }
.ui-tabstrip-close button:hover { background: var(--ui-line); color: var(--ui-text); }
.ui-tabstrip-close button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-tabstrip-add {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center;
    width: 28px; height: 28px; background: none; border: 0; cursor: pointer;
    color: var(--ui-text-muted); border-radius: var(--ui-radius-control); transition: background-color 0.15s, color 0.15s;
}
.ui-tabstrip-add:hover { background: var(--ui-hover); color: var(--ui-primary); }
.ui-tabstrip-add:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-tabstrip-add .material-symbols-outlined { font-size: 18px; }

/* ---------------------------------------------------------------------------
   Launcher: the "+" at the end of the tab strip (templates/_shared/tab-launcher.php, behaviour in ui.js)
   A searchable list of the pages of every module's menu and of the modules without a tab. Native popover
   (light dismiss, Esc, top layer); browsers without it get .is-open from ui.js.
   --------------------------------------------------------------------------- */
.ui-tabstrip-add[aria-expanded="true"] { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-tabstrip-add .material-symbols-outlined { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-tabstrip-add[aria-expanded="true"] .material-symbols-outlined { transform: rotate(135deg); }
.ui-launcher {
    position: fixed; inset: auto; top: var(--ui-launcher-top, 100px); left: var(--ui-launcher-left, 16px); margin: 0;
    display: none; flex-direction: column; width: min(440px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - var(--ui-launcher-top, 100px) - 12px));
    padding: 0; overflow: hidden; color: var(--ui-text); background: color-mix(in srgb, var(--ui-surface) 28%, var(--ui-bg));
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius);
    box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.08);
    transform-origin: top left; opacity: 0; transform: translateY(-6px) scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease, overlay 0.16s ease allow-discrete, display 0.16s ease allow-discrete;
}
.ui-launcher:popover-open { display: flex; opacity: 1; transform: none; transition-duration: 0.24s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@starting-style { .ui-launcher:popover-open { opacity: 0; transform: translateY(-6px) scale(0.985); } }
.ui-launcher.is-open { display: flex; opacity: 1; transform: none; }
html.dark .ui-launcher { box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4); }
.ui-launcher-search { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.875rem; height: 46px; flex: none; border-bottom: 1px solid var(--ui-line); position: relative; background: color-mix(in srgb, var(--ui-text) 3%, transparent); }
.ui-launcher-search::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ui-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-launcher-search:focus-within::after { transform: scaleX(1); }
.ui-launcher-search > .material-symbols-outlined { font-size: 19px; color: var(--ui-text-subtle); }
.ui-launcher-search:focus-within > .material-symbols-outlined { color: var(--ui-primary); }
.ui-launcher-input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; box-shadow: none; color: var(--ui-text); font-size: 14px; }
.ui-launcher-input::placeholder { color: var(--ui-text-subtle); }
.ui-launcher kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font: 600 10px var(--ui-font-mono); color: var(--ui-text-subtle); background: none; border: 1px solid var(--ui-line-strong); border-radius: calc(var(--ui-radius-control) / 2); }
.ui-launcher-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.375rem 0 0.5rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-primary) 40%, transparent) transparent; overscroll-behavior: contain; }
.ui-launcher-heading { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem 0.375rem; font: 700 10px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-launcher-heading .material-symbols-outlined { font-size: 14px; color: var(--ui-primary); }
.ui-launcher-here { padding: 1px 6px; font-size: 9px; letter-spacing: 0.08em; color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-launcher-rule { flex: 1; height: 1px; background: var(--ui-line); }
.ui-launcher-item {
    position: relative; display: flex; align-items: center; gap: 0.75rem; margin: 0 0.375rem; padding: 0.4375rem 0.5rem; color: var(--ui-text); text-decoration: none;
    border-radius: var(--ui-radius-control); transition: background-color 0.1s;
}
.ui-launcher-item[hidden], .ui-launcher-group[hidden] { display: none; }
.ui-launcher-item.is-active { background: color-mix(in srgb, var(--ui-primary) 9%, transparent); }
.ui-launcher-item.is-active::before { content: ''; position: absolute; left: -0.375rem; top: 4px; bottom: 4px; width: 2px; background: var(--ui-gradient); }
.ui-launcher-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; color: var(--ui-text-muted); background: color-mix(in srgb, var(--ui-text) 8%, transparent); border-radius: calc(var(--ui-radius-control) / 1.5); transition: color 0.12s, background-color 0.12s; }
.ui-launcher-icon .material-symbols-outlined { font-size: 18px; }
.ui-launcher-item.is-active .ui-launcher-icon { color: var(--ui-on-primary); background: var(--ui-gradient); }
.ui-launcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ui-launcher-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-launcher-sub { font: 500 10.5px var(--ui-font-mono); color: var(--ui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-launcher-tag { display: inline-flex; align-items: center; flex: none; font: 600 9.5px var(--ui-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-launcher-tag .material-symbols-outlined { font-size: 16px; opacity: 0; transform: translateX(-3px); transition: opacity 0.12s, transform 0.12s; }
.ui-launcher-item.is-active .ui-launcher-tag .material-symbols-outlined { opacity: 1; transform: none; color: var(--ui-primary); }
.ui-launcher-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0; padding: 2rem 1rem; font-size: 13px; color: var(--ui-text-muted); }
.ui-launcher-empty[hidden] { display: none; }
.ui-launcher-empty .material-symbols-outlined { font-size: 28px; color: var(--ui-text-subtle); }
.ui-launcher-foot { display: flex; align-items: center; gap: 1rem; flex: none; padding: 0.5rem 0.875rem; border-top: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-text) 4%, transparent); font: 500 10.5px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-launcher-foot span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ui-launcher-count { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .ui-launcher, .ui-launcher-search::after, .ui-tabstrip-add .material-symbols-outlined { transition: none; } }

/* ---------------------------------------------------------------------------
   Page transitions
   Same-origin navigations use cross-document View Transitions (Chromium, Safari; other browsers
   just load the page). Chrome that stays the same between pages (header, sidebar, module tabs,
   the workspace tab row with its Save button) is pinned, so only the content changes, with a
   quick fade. ui.js-free: the direction of tab moves is available as the transition types
   `tab-forward` / `tab-back` (templates/_shared/page-transition.php) for directional variants.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

body > header { view-transition-name: yaw-header; }
body > aside, #main-sidebar { view-transition-name: yaw-sidebar; }
.ui-tabstrip { view-transition-name: yaw-module-tabs; }
.ui-workspace-bar { view-transition-name: yaw-tab-row; }
.ui-workspace-body { view-transition-name: yaw-content; }
.ui-page-header { view-transition-name: yaw-page-header; }
.ui-rside { view-transition-name: yaw-rside; }

/* No flashing: the browser's default blend ("plus-lighter") adds the old and the new picture together,
   so any mismatch in timing makes the page flash bright or dip dark. Normal blending instead keeps the
   old picture fully opaque underneath while the new one fades in over it. Parts that are the same on
   both pages show only the new picture, so the pinned chrome never blinks. */
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
::view-transition-group(*) { animation-duration: 0.2s; }

::view-transition-old(root), ::view-transition-old(yaw-content) { animation: none; }
::view-transition-new(root) { animation: ui-vt-fade-in 0.12s ease-out both; }
::view-transition-new(yaw-content) { animation: ui-vt-rise-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-old(yaw-header), ::view-transition-old(yaw-sidebar), ::view-transition-old(yaw-module-tabs),
::view-transition-old(yaw-tab-row), ::view-transition-old(yaw-page-header), ::view-transition-old(yaw-rside) { display: none; }
::view-transition-new(yaw-header), ::view-transition-new(yaw-sidebar), ::view-transition-new(yaw-module-tabs),
::view-transition-new(yaw-tab-row), ::view-transition-new(yaw-page-header), ::view-transition-new(yaw-rside) { animation: none; }
@keyframes ui-vt-fade-in { from { opacity: 0; } }

/* Moving between the module tabs: the page slides away and the next one glides in from the side of the tab you chose
   (right for a tab further along, left for one before), with a touch of blur. Quick out, softer in. */
main { view-transition-name: yaw-main; }
/* A named transition part is a stacking context: a window inside it (Bootstrap modals of a module) would sit under the page-wide backdrop. Unnamed while one is open. */
body.modal-open main { view-transition-name: none; }
::view-transition-group(yaw-main) { animation: none; }
::view-transition-old(yaw-main) { animation: none; }
::view-transition-new(yaw-main) { animation: ui-vt-rise-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html:active-view-transition-type(module-forward, module-back) { --ui-vt-shift: 36px; }
html:active-view-transition-type(module-back) { --ui-vt-shift: -36px; }
html:active-view-transition-type(module-forward, module-back)::view-transition-old(yaw-main),
html:active-view-transition-type(module-forward, module-back)::view-transition-old(yaw-content) {
    animation: ui-vt-out 0.14s cubic-bezier(0.4, 0, 1, 1) both;
}
html:active-view-transition-type(module-forward, module-back)::view-transition-new(yaw-main),
html:active-view-transition-type(module-forward, module-back)::view-transition-new(yaw-content) {
    animation: ui-vt-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
@keyframes ui-vt-out { to { opacity: 0; transform: translateX(calc(var(--ui-vt-shift) * -0.5)); filter: blur(3px); } }
@keyframes ui-vt-in { from { opacity: 0; transform: translateX(var(--ui-vt-shift)); filter: blur(4px); } }
@keyframes ui-vt-rise-in { from { opacity: 0; transform: translateY(6px); } }

/* Browsers without View Transitions: sections still rise in one after another */
@supports not (view-transition-name: none) {
    @keyframes ui-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .ui-workspace-body .ui-section { animation: ui-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 60ms; }
    .ui-workspace-body .ui-section:nth-child(2) { animation-delay: 120ms; }
    .ui-workspace-body .ui-section:nth-child(3) { animation-delay: 180ms; }
    .ui-workspace-body .ui-section:nth-child(n+4) { animation-delay: 240ms; }
    .ui-workspace-body .ui-section .ui-section { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .ui-workspace-body .ui-section { animation: none; }
}

/* ---------------------------------------------------------------------------
   Collapsible sidebar: expanded, icons only (rail) or hidden
   The state is a class on <html> (sb-rail, sb-hidden; none = expanded), set before first paint by
   templates/_shared/sidebar-state.php and changed by ui.js. Everything that depends on the sidebar
   width reads --sb-w, so the sidebar, the page, the module tabs and the header's logo column move
   together. Transitions only run after load (html.sb-ready), so nothing animates on page open.
   --------------------------------------------------------------------------- */
:root { --sb-full: 280px; --sb-rail: 72px; --sb-w: var(--sb-full); }
html.sb-rail { --sb-w: var(--sb-rail); }
html.sb-hidden { --sb-w: 0px; }

.ui-sidebar { width: var(--sb-w); visibility: visible; background-color: var(--ui-side) !important; background-image: var(--ui-side-wash); }
.ui-shell-pad { padding-left: var(--sb-w); }
.ui-shell-margin { margin-left: var(--sb-w); }
.ui-shell-left { left: var(--sb-w); }
.ui-brandcol { width: max(calc(max(var(--sb-w), var(--sb-rail)) - 40px), 52px); }   /* the sidebar toggle (8px + 32px) sits in front of it, so the column still ends where the sidebar does */

html.sb-ready .ui-sidebar {
    transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}
html.sb-ready .ui-shell-pad { transition: padding-left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-ready .ui-shell-margin { transition: margin-left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-ready .ui-shell-left { transition: left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-ready .ui-brandcol { transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Hidden: slides out to the left; it stops being focusable once the slide is over */
html.sb-hidden .ui-sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; visibility: hidden; }
html.sb-ready.sb-hidden .ui-sidebar {
    transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease, visibility 0s linear 0.32s;
}

/* Icons only: labels fade and fold away, items centre on their icon, the sidebar's own scrolling gives
   way so the hover labels can sit outside it */
.ui-side-hide, .ui-nav-label { max-width: 220px; overflow: hidden; white-space: nowrap; }
html.sb-ready .ui-side-hide, html.sb-ready .ui-nav-label { transition: opacity 0.18s ease, max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-rail .ui-side-hide, html.sb-rail .ui-nav-label { max-width: 0; opacity: 0; }
/* The sidebar itself never scrolls: its menu does (a thin scrollbar in the accent color), so the footer with the
   expand / collapse button always stays in view. The scrollbar is never drawn (wheel, touch and keys still scroll). The hover labels of the icons-only mode are one fixed element (ui.js). */
.ui-sidebar { overflow: hidden !important; }
:is(.ui-sidebar > nav, .ui-sidebar > div:not(.ui-side-footer)) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
:is(.ui-sidebar > nav, .ui-sidebar > div:not(.ui-side-footer))::-webkit-scrollbar { display: none; }
.ui-side-footer { flex: none; }
html.sb-rail .ui-sidebar nav { padding-left: 0.75rem; padding-right: 0.75rem; }
html.sb-rail .ui-side-item { justify-content: center; gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* ...and the icons grow, so they are easy to hit and to recognise without their labels */
.ui-side-item .material-symbols-outlined { transition: font-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-rail .ui-side-item .material-symbols-outlined { font-size: 24px; }
html.sb-rail .ui-side-item { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
html.sb-rail .ui-side-footer { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
/* The hover label of an icon (icons-only mode): one fixed element positioned by ui.js, so it is never clipped by the scrolling menu */
.ui-sidetip {
    position: fixed; z-index: 90; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: var(--ui-text); color: var(--ui-bg);
    font: 600 11px/1.2 var(--ui-font-mono); white-space: nowrap; pointer-events: none; border-radius: var(--ui-radius-control);
    opacity: 0; transform: translate(-6px, -50%); transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-sidetip.is-on { opacity: 1; transform: translate(0, -50%); }
.ui-sidetip small { font: 500 9px/1 var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }

/* The header shows the compact mark when the full logo and name no longer fit */
.brand-mark { display: none; }
html.sb-rail .brand-full, html.sb-hidden .brand-full { display: none; }
html.sb-rail .brand-mark, html.sb-hidden .brand-mark { display: flex; }
/* While the brand column grows or shrinks with the sidebar, its content keeps its size and position: the icon is never squeezed, the name is just uncovered (the column clips it) */
.brand-full, .brand-mark { flex-shrink: 0; white-space: nowrap; }
.brand-full > *, .brand-mark > * { flex-shrink: 0; }

/* Controls: a header button (hide / show), a collapse button in the sidebar footer (icons only / full),
   and a handle on the left edge that brings a hidden sidebar back */
.ui-sidebar-toggle, .ui-sidebar-collapse {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
    background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle); border-radius: var(--ui-radius-control);
    transition: color 0.15s, background-color 0.15s;
}
.ui-sidebar-toggle:hover, .ui-sidebar-collapse:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-sidebar-toggle:focus-visible, .ui-sidebar-collapse:focus-visible, .ui-sidebar-handle:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-sidebar-toggle .material-symbols-outlined, .ui-sidebar-collapse .material-symbols-outlined { font-size: 20px; }
html.sb-hidden .ui-sidebar-toggle .ico-hide, html:not(.sb-hidden) .ui-sidebar-toggle .ico-show { display: none; }
.ui-sidebar-collapse .material-symbols-outlined { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-rail .ui-sidebar-collapse .material-symbols-outlined { transform: rotate(180deg); }
.ui-sidebar-handle {
    position: fixed; left: 0; top: 50%; z-index: 45; display: flex; align-items: center; justify-content: center;
    width: 16px; height: 64px; padding: 0; cursor: pointer; color: var(--ui-text-subtle);
    background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-left: 0;
    border-radius: 0 var(--ui-radius-control, 0) var(--ui-radius-control, 0) 0;
    opacity: 0; pointer-events: none; transform: translate(-100%, -50%);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.2s ease, color 0.15s, background-color 0.15s;
}
html.sb-hidden .ui-sidebar-handle { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.ui-sidebar-handle:hover { width: 26px; color: var(--ui-on-primary); background: var(--ui-gradient); border-color: transparent; }
.ui-sidebar-handle .material-symbols-outlined { font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
    html.sb-ready .ui-sidebar, html.sb-ready .ui-shell-pad, html.sb-ready .ui-shell-margin, html.sb-ready .ui-shell-left,
    html.sb-ready .ui-brandcol, html.sb-ready .ui-side-hide, html.sb-ready .ui-nav-label { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Right sidebar: a multi-purpose side panel, hidden by default
   Two states: hidden, or open (class rs-open on <html>), restored before the first paint by
   templates/_shared/sidebar-state.php and changed by ui.js. Like the left sidebar, everything that depends
   on its width reads one variable (--rs-w).
   --------------------------------------------------------------------------- */
:root { --rs-full: var(--sb-full); --rs-w: 0px; }   /* same width as the left sidebar: change --sb-full only */
html.rs-open { --rs-w: var(--rs-full); }

.ui-shell-pad-r { padding-right: var(--rs-w); }
.ui-shell-margin-r { margin-right: var(--rs-w); }
.ui-shell-right { right: var(--rs-w); }
html.sb-ready .ui-shell-pad-r { transition: padding-right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-ready .ui-shell-margin-r { transition: margin-right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.sb-ready .ui-shell-right { transition: right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

.ui-rside {
    position: fixed; right: 0; top: var(--rs-top, 64px); bottom: 0; z-index: 40; width: var(--rs-full);
    display: flex; flex-direction: column; background-color: var(--ui-side) !important; border-left: 1px solid var(--ui-line);
    color: var(--ui-text); background-image: var(--ui-side-wash);
    transform: translateX(100%); opacity: 0; pointer-events: none; visibility: hidden;
}
html.sb-ready .ui-rside {
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease, visibility 0s linear 0.32s;
}
html.rs-open .ui-rside { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
html.sb-ready.rs-open .ui-rside { transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease, visibility 0s; }
.ui-rside, .ui-rside * { box-sizing: border-box; }

/* The header's user button shows the full name, the description and the arrow while the side panel is open,
   and only the avatar otherwise; either way a click opens the user menu */
.ui-user-extra, .ui-user-chevron { min-width: 0; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; }
.ui-user-extra { display: flex; flex-direction: column; }
html.rs-open .ui-user-extra { max-width: 220px; margin-left: var(--ui-user-gap, 0.75rem); opacity: 1; }
html.rs-open .ui-user-chevron { max-width: 24px; margin-left: var(--ui-user-gap, 0.75rem); opacity: 1; }
html.sb-ready .ui-user-extra, html.sb-ready .ui-user-chevron {
    transition: max-width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), margin-left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

/* The dock at the bottom: one tab per panel (icon over label, the current one marked by an accent gradient
   line and a tint) and a close button. It stays put while the panel above it scrolls. */
.ui-rside-dock {
    display: flex; align-items: stretch; gap: 0.5rem; padding: 0.5rem 0.625rem 0.625rem; margin-top: auto;
    background: color-mix(in srgb, var(--ui-text) 3%, var(--ui-side)); border-top: 1px solid var(--ui-line);
}
.ui-rside-funcs { display: flex; flex: 1; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-rside-funcs::-webkit-scrollbar { display: none; }
.ui-rside-func {
    position: relative; display: flex; flex: 1 1 0; min-width: 64px; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem;
    height: 52px; padding: 0 0.5rem; background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle);
    border-radius: var(--ui-radius-control); font-size: 11px; font-weight: 600; line-height: 1.1;
    transition: color 0.15s, background-color 0.15s;
}
.ui-rside-func .material-symbols-outlined { font-size: 22px; transition: color 0.15s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-rside-func-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rside-func::before {
    content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; background: var(--ui-gradient);
    transform: scaleX(0); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
}
.ui-rside-func:hover { color: var(--ui-text); background: var(--ui-hover); }
.ui-rside-func:hover .material-symbols-outlined { transform: translateY(-1px); }
.ui-rside-func.is-active { color: var(--ui-text); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-rside-func.is-active .material-symbols-outlined { color: var(--ui-primary); }
.ui-rside-func.is-active::before { transform: scaleX(1); opacity: 1; }
.ui-rside-func:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-rside-close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; align-self: stretch;
    background: none; border: 0; border-left: 1px solid var(--ui-line); border-radius: 0; cursor: pointer; color: var(--ui-text-subtle);
    transition: color 0.15s, background-color 0.15s;
}
.ui-rside-close .material-symbols-outlined { font-size: 20px; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-rside-close:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.ui-rside-close:hover .material-symbols-outlined { transform: translateX(2px); }
.ui-rside-close:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }

/* Panels */
.ui-rside-panels { display: flex; flex: 1; min-height: 0; flex-direction: column; }
/* The panels slide in only when the user opens the sidebar (ui.js adds .is-entering), never on a page load */
.ui-rside-panels.is-entering { animation: ui-rside-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both; }
@keyframes ui-rside-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.ui-rside-panel { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.ui-rside-panel[hidden] { display: none; }
.ui-rside-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1rem 0.5rem; }
.ui-rside-panel-title { margin: 0; font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-rside-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 1rem 1rem; scrollbar-width: thin; }
.ui-rside-loading { display: flex; align-items: center; gap: 0.625rem; padding: 1.5rem 0; font-size: 13px; color: var(--ui-text-muted); }
.ui-rside-spinner { width: 14px; height: 14px; border: 2px solid var(--ui-line-strong); border-top-color: var(--ui-primary); border-radius: 50%; animation: ui-spin 0.7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-rside-empty { margin: 0; padding: 1.25rem 1rem; font-size: 13px; color: var(--ui-text-muted); }
.ui-rside-empty a { color: var(--ui-primary); font-weight: 600; }

.ui-rside-toggle, .ui-rside-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
    background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle); border-radius: var(--ui-radius-control);
    transition: color 0.15s, background-color 0.15s;
}
.ui-rside-toggle:hover, .ui-rside-iconbtn:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-rside-toggle:focus-visible, .ui-rside-iconbtn:focus-visible, .ui-rside-handle:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-rside-toggle .material-symbols-outlined, .ui-rside-iconbtn .material-symbols-outlined { font-size: 20px; }
html.rs-open .ui-rside-toggle .ico-open, html:not(.rs-open) .ui-rside-toggle .ico-close { display: none; }
/* The handle on the right edge: there while the panel is hidden, one tap to bring it back */
.ui-rside-handle {
    position: fixed; right: 0; top: 50%; z-index: 45; display: flex; align-items: center; justify-content: center;
    width: 16px; height: 64px; padding: 0; cursor: pointer; color: var(--ui-text-subtle);
    background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-right: 0;
    border-radius: var(--ui-radius-control, 0) 0 0 var(--ui-radius-control, 0);
    transform: translate(0, -50%);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.2s ease, color 0.15s, background-color 0.15s;
}
html.rs-open .ui-rside-handle { opacity: 0; pointer-events: none; transform: translate(100%, -50%); }
.ui-rside-handle:hover { width: 26px; color: var(--ui-on-primary); background: var(--ui-gradient); border-color: transparent; }
.ui-rside-handle .material-symbols-outlined { font-size: 18px; }

/* The notes panel (tools/notes/panel.php) */
.ui-notes-panel { display: flex; flex-direction: column; gap: 0.875rem; }
.ui-notes-new { display: flex; flex-direction: column; gap: 0.5rem; }
.ui-notes-new textarea { resize: vertical; min-height: 4.5rem; }
.ui-notes-new-row { display: flex; gap: 0.5rem; }
.ui-notes-new-row select { flex: 1; min-width: 0; }
.ui-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ui-notes-count { font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-notes-full { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 12px; font-weight: 600; color: var(--ui-primary); text-decoration: none; }
.ui-notes-full .material-symbols-outlined { font-size: 14px; transition: transform 0.2s; }
.ui-notes-full:hover .material-symbols-outlined { transform: translateX(2px); }
.ui-notes-search { position: relative; }
.ui-notes-search .material-symbols-outlined { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ui-text-subtle); pointer-events: none; }
.ui-notes-search .ui-input { padding-left: 2rem; }
.ui-notes-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ui-note { background: var(--ui-panel); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-tag-color, var(--ui-line-strong)); border-radius: var(--ui-radius-control); }
.ui-rside-body[data-fresh] .ui-note { animation: ui-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ui-note[hidden] { display: none; }
.ui-note-view { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.5rem 0.625rem 0.375rem; }
.ui-note-view[hidden] { display: none; }
.ui-note-check { margin: 0; }
.ui-note-toggle { display: inline-flex; padding: 2px; background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle); transition: color 0.15s; }
.ui-note-toggle:hover, .ui-note-toggle[aria-pressed="true"] { color: var(--ui-secondary); }
.ui-note-toggle .material-symbols-outlined { font-size: 20px; }
.ui-note-body { flex: 1; min-width: 0; }
/* Compact card: title and two lines of excerpt; the whole note opens in place (data-panel-expand in ui.js) */
.ui-note-head { display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.375rem; align-items: start; width: 100%; padding: 0; margin: 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ui-note-head:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; border-radius: 2px; }
.ui-note-title { grid-column: 1; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-note-excerpt { grid-column: 1; font-size: 12px; line-height: 1.4; color: var(--ui-text-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-note-chevron { grid-column: 2; grid-row: 1; font-size: 18px; color: var(--ui-text-subtle); transition: transform 0.2s; }
.ui-note.is-open .ui-note-chevron { transform: rotate(180deg); }
.ui-note.is-open .ui-note-excerpt { display: none; }
.ui-note.is-open .ui-note-title { white-space: normal; }
.ui-note.is-loading .ui-note-chevron { animation: ui-spin 0.8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-note-full { margin-top: 0.5rem; padding: 0.5rem 0.625rem; max-height: min(50vh, 26rem); overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); background: color-mix(in srgb, var(--ui-text) 3%, transparent); }
.ui-note-full[hidden] { display: none; }
.ui-note.is-done .ui-note-title { color: var(--ui-text-subtle); text-decoration: line-through; }
.ui-note-more { font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); align-self: center; }
/* New note: one line and a small button; the rest is set in the editor that opens afterwards */
.ui-notes-quick { display: flex; align-items: flex-start; gap: 0.5rem; }
.ui-notes-quick textarea { flex: 1; min-width: 0; resize: none; min-height: 2.25rem; max-height: 7rem; field-sizing: content; }
.ui-notes-important { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ui-notes-important .material-symbols-outlined { font-size: 15px; }
.ui-note-edit-slot[hidden] { display: none; }
/* Views of a panel: recent / folders / tags */
[data-panel-views] { display: flex; flex-direction: column; gap: 0.75rem; }
.ui-seg { display: flex; gap: 2px; padding: 2px; background: color-mix(in srgb, var(--ui-text) 6%, transparent); border-radius: var(--ui-radius-control); }
.ui-seg-btn { flex: 1; padding: 0.3125rem 0.5rem; background: none; border: 0; border-radius: calc(var(--ui-radius-control) - 1px); font-size: 12px; font-weight: 600; color: var(--ui-text-muted); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.ui-seg-btn:hover { color: var(--ui-text); }
.ui-seg-btn[aria-pressed="true"] { background: var(--ui-panel); color: var(--ui-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.ui-seg-btn:focus-visible, .ui-folder-head:focus-visible, .ui-tagchip:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
[data-panel-views].is-searching > [data-panel-pane], [data-panel-views].is-searching > .ui-seg { display: none; }
[data-panel-pane][hidden], [data-panel-results][hidden] { display: none; }
/* Folder tree: a group opens to show its subfolders and, fetched then, its notes */
.ui-folder-list, .ui-folder-children { display: flex; flex-direction: column; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.ui-folder-children { margin-left: 0.6875rem; padding-left: 0.5rem; border-left: 1px solid var(--ui-line); }
.ui-folder-head { display: flex; align-items: center; gap: 0.25rem; width: 100%; padding: 0.3125rem 0.25rem; background: none; border: 0; border-radius: var(--ui-radius-control); font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-text); text-align: left; cursor: pointer; transition: background-color 0.15s; }
.ui-folder-head:hover { background: color-mix(in srgb, var(--ui-text) 6%, transparent); }
.ui-folder-chevron { font-size: 18px; color: var(--ui-text-subtle); transition: transform 0.2s; }
.ui-folder-head[aria-expanded="true"] .ui-folder-chevron { transform: rotate(90deg); }
.ui-folder-head[aria-expanded="false"] ~ .ui-folder-children { display: none; }
.ui-folder-icon { font-size: 17px; color: var(--ui-primary); }
.ui-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-folder-count { margin-left: auto; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-folder.is-loading > .ui-folder-head .ui-folder-chevron { animation: ui-spin 0.8s linear infinite; }
.ui-folder-notes { margin: 0.25rem 0 0.375rem 0.5rem; }
.ui-folder-notes[hidden] { display: none; }
.ui-tagchips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ui-tagchip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; background: none; border: 0; cursor: pointer; border-radius: var(--ui-radius-control); opacity: 0.85; }
.ui-tagchip:hover, .ui-tagchip[aria-expanded="true"] { opacity: 1; }
.ui-tagchip[aria-expanded="true"] { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .ui-folder-chevron { transition: none; } .ui-folder.is-loading > .ui-folder-head .ui-folder-chevron { animation: none; } }
.ui-notes-more { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .ui-note-chevron { transition: none; } .ui-note.is-loading .ui-note-chevron { animation: none; } }
.ui-note-meta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-note-meta .ui-dot { width: 6px; height: 6px; }
.ui-note-actions { display: flex; flex-direction: column; opacity: 0.35; transition: opacity 0.15s; }
.ui-note:hover .ui-note-actions, .ui-note:focus-within .ui-note-actions { opacity: 1; }
.ui-note-actions form { margin: 0; }
.ui-note-btn { display: inline-flex; padding: 3px; background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle); border-radius: var(--ui-radius-control); transition: color 0.15s, background-color 0.15s; }
.ui-note-btn:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-note-btn-danger:hover { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 10%, transparent); }
.ui-note-btn .material-symbols-outlined { font-size: 16px; }
.ui-note-edit { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem; }
.ui-note-edit[hidden] { display: none; }
/* Rendered Markdown (Yaw\Core\Markdown): notes and any other user-written text */
.ui-md { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; color: var(--ui-text); }
.ui-md > :first-child { margin-top: 0; }
.ui-md > :last-child { margin-bottom: 0; }
.ui-md p, .ui-md ul, .ui-md ol, .ui-md blockquote, .ui-md pre { margin: 0 0 0.5rem; }
.ui-md h3, .ui-md h4, .ui-md h5, .ui-md h6 { margin: 0.75rem 0 0.375rem; font-weight: 700; line-height: 1.3; }
.ui-md h3 { font-size: 1.15em; } .ui-md h4 { font-size: 1.05em; } .ui-md h5, .ui-md h6 { font-size: 1em; }
.ui-md ul, .ui-md ol { padding-left: 1.25rem; }
.ui-md ul { list-style: disc; } .ui-md ol { list-style: decimal; }
.ui-md ul ul, .ui-md ol ol, .ui-md ul ol, .ui-md ol ul { margin: 0.125rem 0 0; }
.ui-md li.ui-md-task { list-style: none; margin-left: -1.25rem; }
.ui-md li.ui-md-task input { margin-right: 0.375rem; vertical-align: middle; }
.ui-md a { color: var(--ui-primary); text-decoration: underline; text-underline-offset: 2px; }
.ui-md code { font: 0.92em var(--ui-font-mono); padding: 0.1em 0.35em; background: color-mix(in srgb, var(--ui-text) 8%, transparent); border-radius: 3px; }
.ui-md pre { padding: 0.625rem 0.75rem; overflow-x: auto; background: color-mix(in srgb, var(--ui-text) 6%, transparent); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); }
.ui-md pre code { padding: 0; background: none; }
.ui-md blockquote { padding-left: 0.75rem; border-left: 3px solid var(--ui-line-strong); color: var(--ui-text-muted); }
.ui-md hr { margin: 0.75rem 0; border: 0; border-top: 1px solid var(--ui-line); }
.ui-md del { color: var(--ui-text-subtle); }
.ui-note.is-done .ui-md { color: var(--ui-text-subtle); }
.ui-note-details { padding: 0.25rem 0.75rem 0.75rem; border-bottom: 1px solid var(--ui-line); }
.ui-note-details > summary { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ui-text-muted); }
.ui-note-details > summary:hover { color: var(--ui-primary); }
.ui-note-details > summary .material-symbols-outlined { font-size: 15px; }
.ui-note-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.ui-note-btn[aria-pressed="true"] { color: var(--ui-primary); }
.ui-notes-empty { margin: 0; padding: 1rem 0; font-size: 13px; color: var(--ui-text-muted); }
@media (prefers-reduced-motion: reduce) {
    html.sb-ready .ui-rside, html.sb-ready .ui-shell-pad-r, html.sb-ready .ui-shell-margin-r, html.sb-ready .ui-shell-right,
    html.sb-ready .ui-user-extra, html.sb-ready .ui-user-chevron { transition: none !important; }
    .ui-rside-panels.is-entering, .ui-rside-body[data-fresh] .ui-note { animation: none; }
}

/* ---------------------------------------------------------------------------
   Toasts (templates render the region with ui_toasts(); see assets/core/ui.js)
   Compact chips that follow the page (light on light, dark on dark): tinted surface, hairline border,
   square, with a monospaced label and one accent per type that also drives the countdown line.
   --------------------------------------------------------------------------- */
.ui-toasts {
    position: fixed; top: 76px; right: 20px; z-index: 100;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
    width: calc(100vw - 40px); max-width: 380px; pointer-events: none;
}
.ui-toast {
    --toast-bg: var(--ui-tint);
    --toast-fg: var(--ui-text);
    --toast-accent: color-mix(in srgb, var(--ui-primary) 80%, var(--toast-fg));
    position: relative; overflow: hidden; pointer-events: auto;
    display: flex; align-items: center; gap: 0.625rem; min-width: 220px; max-width: 100%;
    padding: 0.5625rem 0.5rem 0.6875rem 0.75rem;
    background: var(--toast-bg); color: var(--toast-fg);
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius);
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.25);
    animation: ui-toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ui-toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity 0.16s ease-in, transform 0.16s ease-in; }
.ui-toast-success { --toast-accent: color-mix(in srgb, var(--ui-secondary) 85%, var(--toast-fg)); }
.ui-toast-error { --toast-accent: color-mix(in srgb, var(--ui-danger) 85%, var(--toast-fg)); }
.ui-toast-warning { --toast-accent: color-mix(in srgb, var(--ui-warning) 85%, var(--toast-fg)); }
.ui-toast-icon { display: flex; flex-shrink: 0; color: var(--toast-accent); }
.ui-toast-icon .material-symbols-outlined { font-size: 18px; }
.ui-toast-body { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.ui-toast-label {
    margin-right: 0.5rem; font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--toast-accent);
}
.ui-toast-text { font-weight: 500; overflow-wrap: anywhere; }
.ui-toast-close {
    display: inline-flex; flex-shrink: 0; padding: 2px; background: none; border: 0; cursor: pointer;
    color: var(--toast-fg); opacity: 0.55; border-radius: var(--ui-radius-control); transition: opacity 0.15s;
}
.ui-toast-close:hover { opacity: 1; }
.ui-toast-close:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 1px; opacity: 1; }
.ui-toast-close .material-symbols-outlined { font-size: 15px; }
/* Time left before the toast closes */
.ui-toast::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--toast-accent); transform-origin: left;
    animation: ui-toast-timer var(--ui-toast-duration, 5000ms) linear forwards;
}
.ui-toast:hover::after, .ui-toast:focus-within::after { animation-play-state: paused; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .ui-toasts { top: 68px; right: 12px; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) {
    .ui-toast { animation: none; }
    .ui-toast.is-leaving { transition: none; }
    .ui-toast::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Drag & drop file field (ui_dropzone())
   --------------------------------------------------------------------------- */
.ui-dropzone {
    position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem;
    background: var(--ui-tint); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius);
    transition: border-color 0.15s, background-color 0.15s;
}
.ui-dropzone:hover, .ui-dropzone:focus-within { border-color: var(--ui-primary); }
.ui-dropzone.is-dragover {
    border-style: solid; border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 9%, var(--ui-tint));
}
.ui-dropzone.has-error { border-color: var(--ui-danger); }
.ui-dropzone:focus-within { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
/* The real input covers the whole zone: click, keyboard and a native drop all work */
.ui-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.ui-dropzone-preview {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; height: 72px;
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
    /* a checkerboard shows transparency */
    background-image: linear-gradient(45deg, var(--ui-line) 25%, transparent 25%, transparent 75%, var(--ui-line) 75%),
                      linear-gradient(45deg, var(--ui-line) 25%, transparent 25%, transparent 75%, var(--ui-line) 75%);
    background-size: 12px 12px; background-position: 0 0, 6px 6px;
}
.ui-dropzone-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ui-dropzone-placeholder { font-size: 28px; color: var(--ui-text-subtle); }
.ui-dropzone-text { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.ui-dropzone-title { font-size: 13px; font-weight: 700; color: var(--ui-text); }
.ui-dropzone-action { font-size: 12.5px; color: var(--ui-text-muted); }
.ui-dropzone-hint { font: 11px/1.4 var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-dropzone-file { font: 600 11px/1.4 var(--ui-font-mono); color: var(--ui-primary); overflow-wrap: anywhere; }
.ui-dropzone.has-error .ui-dropzone-file { color: var(--ui-danger); }
.ui-dropzone-remove { position: relative; z-index: 2; margin-left: auto; flex-shrink: 0; font-size: 12px; }
.ui-dropzone.is-removing .ui-dropzone-preview { opacity: 0.35; }

/* Color field: native picker + hex text, kept in sync (see ui.js) */
.ui-colorfield { display: flex; align-items: center; gap: 0.5rem; }
.ui-colorfield input[type="color"] {
    width: 40px; height: 36px; padding: 2px; cursor: pointer;
    background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-control);
}

/* Setup guides: a collapsible block with numbered steps, used on Settings → SSO */
.ui-guide { background: var(--ui-tint); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); }
.ui-guide > summary {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; cursor: pointer;
    list-style: none; font-size: 13px; font-weight: 600; color: var(--ui-text);
}
.ui-guide > summary::-webkit-details-marker { display: none; }
.ui-guide > summary .material-symbols-outlined:first-child { font-size: 18px; color: var(--ui-primary); }
.ui-guide-chevron { margin-left: auto; transition: transform 0.2s; color: var(--ui-text-subtle); }
.ui-guide[open] > summary { border-bottom: 1px solid var(--ui-line); }
.ui-guide[open] .ui-guide-chevron { transform: rotate(180deg); }
.ui-guide > summary:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }
.ui-guide-body { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; font-size: 13px; line-height: 1.6; color: var(--ui-text-muted); }
.ui-guide-body b { color: var(--ui-text); }
.ui-guide-body code { font-size: 12px; padding: 1px 5px; background: color-mix(in srgb, var(--ui-text) 7%, transparent); color: var(--ui-text); }
.ui-steps { counter-reset: step; display: flex; flex-direction: column; gap: 1.125rem; margin: 0; padding: 0; list-style: none; }
.ui-steps > li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.875rem; }
.ui-steps > li::before {
    content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
    font: 700 11px var(--ui-font-mono); color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 13%, transparent); border-radius: calc(var(--ui-radius-panel) / 2);
}
.ui-steps-value { margin: 0.5rem 0 0.25rem; }
.ui-steps-notes { padding-top: 1rem; border-top: 1px solid var(--ui-line); }
.ui-bullets { margin: 0.375rem 0 0; padding-left: 1.125rem; list-style: disc; display: flex; flex-direction: column; gap: 0.25rem; }
.ui-copy { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; }
.ui-copy code { overflow-wrap: anywhere; font-size: 12px; }
.ui-copy-btn {
    display: inline-flex; flex-shrink: 0; padding: 3px; background: none; border: 0; cursor: pointer;
    color: var(--ui-text-subtle); border-radius: var(--ui-radius-control); transition: color 0.15s, background-color 0.15s;
}
.ui-copy-btn:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-copy-btn:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-copy-btn .material-symbols-outlined { font-size: 16px; }

/* ---------------------------------------------------------------------------
   Navigation: sidebar items and the module tab strip share the accent gradient of titles and buttons.
   Quiet at rest; the label of the hovered or current item carries the gradient.
   --------------------------------------------------------------------------- */
.ui-nav-link .ui-nav-icon { color: var(--ui-text-subtle); transition: color 0.2s; }
.ui-nav-link:hover .ui-nav-icon, .ui-nav-link.is-active .ui-nav-icon { color: var(--ui-primary); }
.ui-nav-bar {
    position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
    background: linear-gradient(180deg, var(--ui-primary), var(--ui-grad-b));
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .ui-nav-link:hover .ui-nav-label, .ui-nav-link.is-active .ui-nav-label,
    .ui-tabstrip-item:hover .ui-tabstrip-name, .ui-tabstrip-item.is-active .ui-tabstrip-name {
        background: var(--ui-gradient);
        -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    }
}
@media (forced-colors: active) {
    .ui-nav-link .ui-nav-label, .ui-tabstrip-name { background: none; -webkit-text-fill-color: currentColor; }
}
/* Module tabs: a gradient line grows along the top of the hovered or current tab */
.ui-tabstrip-item { border-top-color: transparent !important; }
.ui-tabstrip-item::before {
    content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
    background: var(--ui-gradient);
    opacity: 0; transform: scaleX(0.35); transform-origin: left; transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-tabstrip-item:hover::before { opacity: 0.7; transform: scaleX(1); }
.ui-tabstrip-item.is-active::before { opacity: 1; transform: scaleX(1); }

.ui-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem 1.5rem; }
.ui-palette .ui-colorfield .ui-input { max-width: 7.5rem; }

.ui-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2.5rem 1rem;
    text-align: center; font-size: 14px; color: var(--ui-text-muted);
}
.ui-empty .material-symbols-outlined { font-size: 32px; color: var(--ui-primary); }
.ui-empty-title { font-size: 16px; font-weight: 700; color: var(--ui-text); }

/* ---------------------------------------------------------------------------
   Dialogs (native <dialog>, opened by data-dialog-open, see ui.js; ui_dialog() in PHP builds one)
   Parts: .ui-dialog-head (eyebrow, title, help, close), .ui-dialog-body (scrolls), .ui-dialog-foot (actions).
   Sizes: .ui-dialog-sm (440px) · default (560px) · .ui-dialog-md (640px) · .ui-dialog-lg (880px).
   With sections: .ui-dialog-split holds a .ui-dialog-rail (links with data-dialog-section) and a body of
   [data-dialog-panel] sections.
   --------------------------------------------------------------------------- */
.ui-dialog {
    width: min(560px, calc(100% - 2rem)); max-height: calc(100vh - 3rem); padding: 0; overflow: hidden; color: var(--ui-text); background: var(--ui-surface);
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: 0 24px 60px -12px rgba(15, 17, 23, 0.38);
}
.ui-dialog[open] { display: flex; flex-direction: column; animation: ui-dialog-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ui-dialog::backdrop { background: color-mix(in srgb, #0a0e18 52%, transparent); backdrop-filter: blur(3px); }
.ui-dialog[open]::backdrop { animation: ui-dialog-fade 0.22s ease both; }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes ui-dialog-fade { from { opacity: 0; } }
.ui-dialog-sm { width: min(440px, calc(100% - 2rem)); }
.ui-dialog-md { width: min(640px, calc(100% - 2rem)); }
.ui-dialog-lg { width: min(880px, calc(100% - 2rem)); }
.ui-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.5rem 0.875rem; border-bottom: 1px solid var(--ui-line); flex: none; }
.ui-dialog-eyebrow { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; font: 600 10px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-dialog-eyebrow .material-symbols-outlined { font-size: 15px; color: var(--ui-primary); }
.ui-dialog-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.ui-dialog-sub { margin: 0.2rem 0 0; font-size: 12.5px; color: var(--ui-text-muted); }
.ui-dialog-close {
    display: inline-flex; flex-shrink: 0; padding: 6px; color: var(--ui-text-subtle); background: none; border: 0; border-radius: var(--ui-radius-control); cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.ui-dialog-close:hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-text) 7%, transparent); }
.ui-dialog-close:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.ui-dialog-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ui-dialog-foot {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.625rem; padding: 0.875rem 1.5rem; flex: none;
    border-top: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-text) 3%, var(--ui-surface));
}
/* Confirmation window (window.yawConfirm / data-confirm in ui.js) */
.ui-confirm .ui-confirm-message { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ui-text); white-space: pre-line; overflow-wrap: anywhere; }
.ui-confirm.is-danger .ui-dialog-eyebrow .material-symbols-outlined { color: var(--ui-danger); }
.ui-confirm.is-danger .ui-dialog-head { box-shadow: inset 3px 0 0 var(--ui-danger); }
.ui-btn.ui-btn-danger-solid { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.ui-btn.ui-btn-danger-solid:hover { filter: brightness(1.08); }
.ui-dialog-foot-note { margin-right: auto; font-size: 12px; color: var(--ui-text-muted); }
/* Sections: a rail of links on the left, one panel at a time on the right */
.ui-dialog-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.ui-dialog-rail { display: flex; flex-direction: column; padding: 0.875rem 0; overflow-y: auto; border-right: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-text) 3%, var(--ui-surface)); }
.ui-dialog-rail a {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 1.25rem; font-size: 13px; color: var(--ui-text-muted); text-decoration: none;
    border-left: 2px solid transparent; transition: color 0.15s, background-color 0.15s;
}
.ui-dialog-rail a .material-symbols-outlined { font-size: 17px; color: var(--ui-text-subtle); }
.ui-dialog-rail a:hover { color: var(--ui-text); background: var(--ui-hover); }
.ui-dialog-rail a[aria-current="true"] { color: var(--ui-text); font-weight: 700; border-left-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.ui-dialog-rail a[aria-current="true"] .material-symbols-outlined { color: var(--ui-primary); }
.ui-dialog-split .ui-dialog-body { padding: 1.25rem 1.625rem; }
[data-dialog-panel][hidden] { display: none; }
@media (max-width: 640px) {
    .ui-dialog-split { grid-template-columns: minmax(0, 1fr); }
    .ui-dialog-rail { flex-direction: row; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--ui-line); }
    .ui-dialog-rail a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
    .ui-dialog-rail a[aria-current="true"] { border-bottom-color: var(--ui-primary); }
}
@media (prefers-reduced-motion: reduce) { .ui-dialog[open], .ui-dialog[open]::backdrop { animation: none; } }

/* Disclosure popover (e.g. "Customize" in the module registry) */
.ui-disclosure { position: relative; display: inline-block; text-align: left; }
.ui-disclosure-panel {
    position: absolute; right: 0; z-index: 20; margin-top: 0.5rem; width: 18rem; padding: 1rem;
    background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
    box-shadow: 0 8px 24px rgba(15, 17, 23, 0.08);
}

/* ---------------------------------------------------------------------------
   Menu (popover): user menu and other header drop-downs
   Built on the native Popover API: the browser handles light-dismiss, Esc and top-layer
   stacking; open/close animate with CSS (@starting-style + allow-discrete). Browsers without
   popover support get the .is-open class from ui.js instead.
   --------------------------------------------------------------------------- */
.ui-menu {
    position: fixed; inset: auto; top: var(--ui-menu-top, 60px); right: var(--ui-menu-right, 24px); margin: 0;
    display: none; flex-direction: column; width: 320px; max-height: calc(100vh - var(--ui-menu-top, 60px) - 16px);
    overflow: auto; padding: 0.375rem 0; color: var(--ui-text); background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform-origin: top right;
    /* closed state (also the exit animation target) */
    opacity: 0; transform: translateY(-6px) scale(0.98); clip-path: inset(0 0 100% 0);
    transition: opacity 0.16s ease, transform 0.16s ease, clip-path 0.16s ease,
                overlay 0.16s ease allow-discrete, display 0.16s ease allow-discrete;
}
.ui-menu:popover-open {
    display: flex; opacity: 1; transform: none; clip-path: inset(0 0 0 0);
    transition-duration: 0.28s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@starting-style {
    .ui-menu:popover-open { opacity: 0; transform: translateY(-6px) scale(0.98); clip-path: inset(0 0 100% 0); }
}
.ui-menu.is-open { display: flex; opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
html.dark .ui-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); }

/* Identity block */
.ui-menu-identity { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem 0.625rem; }
.ui-menu-avatar {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; background: var(--ui-gradient); color: var(--ui-on-primary);
    font: 700 11px var(--ui-font-mono); text-transform: uppercase; border-radius: var(--ui-radius-control);
}
.ui-menu-avatar-lg { width: 40px; height: 40px; font-size: 13px; }
.ui-menu-presence {
    position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px;
    background: var(--ui-secondary); border: 2px solid var(--ui-surface); border-radius: 9999px;
}
.ui-menu-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ui-text); }
.ui-menu-email { font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-menu-roles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }

/* Launcher grid: destinations as icon tiles that fill with the accent gradient on hover */
.ui-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.875rem 1rem 0.25rem; }
.ui-menu-grid-list { grid-template-columns: 1fr; }   /* the modules menu: one card per row */
.ui-menu-tile {
    display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem 0.375rem 0.75rem; text-decoration: none; outline: none;
    background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control);
    font-size: 12px; font-weight: 600; color: var(--ui-text);
    transition: background-color 0.15s, border-color 0.15s;
}
.ui-menu-tile-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0;
    background: color-mix(in srgb, var(--ui-primary) 12%, transparent); color: var(--ui-primary);
    border-radius: var(--ui-radius-control); transition: background-color 0.2s, color 0.2s;
}
.ui-menu-tile-icon .material-symbols-outlined { font-size: 16px; }
.ui-menu-tile:hover, .ui-menu-tile:focus-visible { background: var(--ui-hover); border-color: var(--ui-line-strong); }
.ui-menu-tile:hover .ui-menu-tile-icon, .ui-menu-tile:focus-visible .ui-menu-tile-icon { background: var(--ui-primary); color: var(--ui-on-primary); }
.ui-menu-tile[aria-current="page"] { border-color: color-mix(in srgb, var(--ui-primary) 55%, transparent); }

/* Preferences: color mode as a small segmented control, language as a drop-down */
.ui-menu-prefs { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.5rem 1rem 0.75rem; }
.ui-menu-prefs-label { font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-segmented-sm { padding: 3px; align-self: stretch; flex-wrap: nowrap; }
.ui-segmented-sm > form { display: flex; flex: 1; margin: 0; }
.ui-segment-btn {
    display: flex; flex: 1; align-items: center; justify-content: center; gap: 0.375rem; height: 30px; padding: 0 0.5rem;
    background: none; border: 0; border-radius: calc(var(--ui-radius-pill) - 3px); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: var(--ui-text-muted);
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ui-segment-btn .material-symbols-outlined { font-size: 16px; color: var(--ui-text-subtle); transition: color 0.15s; }
.ui-segment-btn:hover { color: var(--ui-text); }
.ui-segment-btn[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--ui-line); }
.ui-segment-btn[aria-pressed="true"] .material-symbols-outlined { color: var(--ui-primary); }
.ui-segment-btn:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }

/* Sections: numbered mono labels with a hairline */
.ui-menu-section {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem 0.375rem;
    font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-menu-section-index { color: var(--ui-primary); }
.ui-menu-section-rule { flex: 1; height: 1px; background: var(--ui-line); }
.ui-menu-section-action { display: inline-flex; color: var(--ui-text-subtle); text-decoration: none; transition: color 0.15s, transform 0.3s; }
.ui-menu-section-action:hover { color: var(--ui-primary); transform: rotate(90deg); }
.ui-menu-section-action .material-symbols-outlined { font-size: 15px; }

/* Items: indicator bar grows in, label nudges, hint slides in */
.ui-menu-item {
    position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.25rem;
    font-size: 13px; color: var(--ui-text); text-decoration: none; outline: none;
    transition: background-color 0.15s ease, padding-left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s ease;
}
.ui-menu-item::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--ui-primary);
    transform: scaleY(0); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-menu-item .material-symbols-outlined { font-size: 18px; color: var(--ui-text-subtle); transition: color 0.15s ease; }
.ui-menu-hint {
    margin-left: auto; font: 11px var(--ui-font-mono); color: var(--ui-text-subtle);
    opacity: 0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-menu-item:hover, .ui-menu-item:focus-visible { background-color: var(--ui-hover); }
.ui-menu-item:hover::before, .ui-menu-item:focus-visible::before, .ui-menu-item[aria-current="page"]::before { transform: scaleY(1); }
.ui-menu-item:hover .material-symbols-outlined, .ui-menu-item:focus-visible .material-symbols-outlined { color: var(--ui-primary); }
.ui-menu-item:hover .ui-menu-hint, .ui-menu-item:focus-visible .ui-menu-hint { opacity: 1; transform: none; }
.ui-menu-item[aria-current="page"] { color: var(--ui-primary); font-weight: 600; }
.ui-menu-item[aria-current="page"] .material-symbols-outlined { color: var(--ui-primary); }
.ui-menu-empty { padding: 0.25rem 1.25rem 0.5rem; font-size: 12px; color: var(--ui-text-subtle); }
.ui-menu-empty a { color: var(--ui-primary); text-decoration: none; font-weight: 600; }

/* Footer: sign out + version */
.ui-menu-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--ui-line); }
.ui-menu-footer .ui-menu-item { flex: 1; color: var(--ui-danger); }
.ui-menu-footer .ui-menu-item .material-symbols-outlined { color: var(--ui-danger); }
.ui-menu-footer .ui-menu-item::before { background: var(--ui-danger); }
.ui-menu-meta { padding-right: 1.25rem; font: 600 10px var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle); white-space: nowrap; }

/* Staggered entrance of the menu contents */
.ui-menu:popover-open .ui-menu-stagger, .ui-menu.is-open .ui-menu-stagger {
    animation: ui-menu-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 22ms + 50ms);
}
@keyframes ui-menu-in { from { opacity: 0; transform: translateX(8px); } }

/* Trigger: chevron flips while the menu is open (aria-expanded is kept in sync by ui.js) */
.ui-menu-chevron { font-size: 16px; color: var(--ui-text-subtle); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
[aria-expanded="true"] .ui-menu-chevron { transform: rotate(180deg); color: var(--ui-primary); }

@media (prefers-reduced-motion: reduce) {
    .ui-menu, .ui-menu-item, .ui-menu-item::before, .ui-menu-hint, .ui-menu-chevron { transition: none; }
    .ui-menu-presence::after, .ui-menu:popover-open .ui-menu-stagger, .ui-menu.is-open .ui-menu-stagger { animation: none; }
}

/* Compact menus (language picker, etc.) and choice items */
.ui-menu-sm { width: 260px; }
.ui-menu-separator { height: 1px; margin: 0.375rem 0; background: var(--ui-line); }
button.ui-menu-item { width: 100%; border: 0; background-color: transparent; text-align: left; font-family: inherit; cursor: pointer; }
button.ui-menu-item:hover, button.ui-menu-item:focus-visible { background-color: var(--ui-hover); }
.ui-menu-item[aria-checked="true"] { color: var(--ui-primary); font-weight: 600; }
.ui-menu-item[aria-checked="true"]::before { transform: scaleY(1); }
.ui-menu-flag { width: 18px; font-size: 16px; line-height: 1; text-align: center; }
.ui-menu-code { font-weight: 600; letter-spacing: 0.06em; }
.ui-menu-item .ui-menu-check { margin-left: 0.25rem; font-size: 16px; color: var(--ui-primary); }
.ui-menu-item[aria-checked="true"] .ui-menu-code { opacity: 1; transform: none; color: var(--ui-primary); }

/* ==========================================================================
   Roles: lists, pickers and permission groups (Users → Roles & Permissions, role pickers in dialogs)
   ========================================================================== */
.ui-roles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ui-roles { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.ui-roles-list { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--ui-sticky-top, 100px) + 8px); }
.ui-roles-group-title {
    display: flex; align-items: center; gap: 0.4rem; padding: 0 0.5rem 0.4rem; font: 600 10px var(--ui-font-mono);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-roles-group-title .material-symbols-outlined { font-size: 15px; }
.ui-roles-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.5rem; font-size: 13px;
    color: var(--ui-text-muted); text-decoration: none; border-left: 2px solid transparent; transition: background-color 0.15s, color 0.15s;
}
.ui-roles-item:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-roles-item[aria-current="true"] { color: var(--ui-text); font-weight: 600; border-left-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 9%, transparent); }
.ui-roles-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-roles-item-count { flex-shrink: 0; min-width: 1.4rem; padding: 0 0.35rem; text-align: center; font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); background: var(--ui-tint); }
.ui-roles-new { border-top: 1px solid var(--ui-line); padding-top: 1rem; }
.ui-roles-new summary { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ui-text-muted); list-style: none; }
.ui-roles-new summary::-webkit-details-marker { display: none; }
.ui-roles-new[open] summary { margin-bottom: 0.75rem; color: var(--ui-text); }
.ui-roles-detail { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ui-roles-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--ui-line); }
.ui-roles-detail-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 12px; }
.ui-roles-detail-actions { display: flex; align-items: center; gap: 0.5rem; }
.ui-perm-group, .ui-role-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-perm-group legend, .ui-role-group legend {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; padding: 0; font: 600 10px var(--ui-font-mono);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle);
}
.ui-role-group legend .material-symbols-outlined { font-size: 15px; }
.ui-perm-group.is-own legend { color: var(--ui-primary); }
.ui-perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.25rem 1.5rem; }
.ui-perm, .ui-role-option { align-items: flex-start; padding: 0.4rem 0; }
.ui-perm input, .ui-role-option input { margin-top: 0.2rem; }
.ui-perm > span, .ui-role-option > span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ui-role-picker { display: flex; flex-direction: column; gap: 1rem; max-height: 46vh; overflow-y: auto; padding: 0.25rem 0.1rem; }
.ui-matrix .ui-matrix-group { font: 600 10px var(--ui-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-text-subtle); border-left: 1px solid var(--ui-line); }

@media (max-width: 900px) {
    .ui-roles { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .ui-roles-list { position: static; }
}
.ui-roles-toolbar .ui-segment-btn { white-space: nowrap; }

/* ==========================================================================
   Module sidebar menu: the current module's own entries below the main menu (module.json "sidebar").
   Template independent; links reuse .ui-nav-link / .ui-side-item so the rail (icons only) and the accent
   gradient behave like the main menu.
   ========================================================================== */
.ui-sidemenu { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ui-line); }
.ui-sidemenu-title { padding: 0 0.5rem; font: 700 10px var(--ui-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-sidemenu-list { display: flex; flex-direction: column; gap: 2px; }
.ui-sidemenu-link, .ui-sidemenu-head {
    position: relative; display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem 0.625rem 0.375rem 1rem;
    font-size: 13px; color: var(--ui-text-muted); text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none;
}
.ui-sidemenu-link.is-active, .ui-sidemenu-link:hover, .ui-sidemenu-head:hover { color: var(--ui-text); }
.ui-sidemenu-link.is-active { font-weight: 600; }
.ui-sidemenu-link:focus-visible, .ui-sidemenu-head:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }
.ui-sidemenu-link .ui-nav-icon, .ui-sidemenu-head .ui-nav-icon { font-size: 17px; flex-shrink: 0; color: var(--ui-text-subtle); }
.ui-sidemenu-head:hover .ui-nav-icon, .ui-sidemenu-group[data-open="1"] > .ui-sidemenu-head .ui-nav-icon { color: var(--ui-primary); }
.ui-sidemenu-head .ui-nav-label { flex: 1; min-width: 0; }
.ui-sidemenu-caret { margin-left: auto; font-size: 18px; color: var(--ui-text-subtle); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-sidemenu-group[data-open="1"] > .ui-sidemenu-head .ui-sidemenu-caret { transform: rotate(180deg); }
.ui-sidemenu-children { display: none; flex-direction: column; gap: 2px; margin-left: 1.15rem; padding-left: 0.1rem; border-left: 1px solid var(--ui-line); }
.ui-sidemenu-group[data-open="1"] > .ui-sidemenu-children { display: flex; }
.ui-sidemenu-link.is-nested { padding-left: 0.75rem; }
.ui-sidemenu-sep { margin: 0.5rem 0.5rem; border: 0; border-top: 1px solid var(--ui-line); }
/* Icons only: a group is a small head icon with a chevron; its entries hang below it on an accent line (the line shows they are
   its sub-menu), open or closed like in the full menu. A closed group that holds the current page shows a dot. */
html.sb-rail .ui-sidemenu { margin-top: 1rem; padding-top: 0.75rem; gap: 0.25rem; }
html.sb-rail .ui-sidemenu:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html.sb-rail .ui-sidemenu-title { display: none; }
html.sb-rail .ui-sidebar { padding-top: 0.75rem !important; }
html.sb-rail .ui-sidebar nav { gap: 0; }
html.sb-rail .ui-sidemenu-list { align-items: stretch; gap: 3px; }
html.sb-rail .ui-sidemenu-head {
    display: flex; justify-content: center; height: 34px; padding: 0 !important; position: relative; color: var(--ui-text-subtle);
    border-radius: var(--ui-radius-control);
}
html.sb-rail .ui-sidemenu-head .ui-nav-icon { font-size: 21px !important; }
html.sb-rail .ui-sidemenu-head::after {
    content: ''; position: absolute; left: calc(50% + 12px); bottom: 8px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); opacity: 0.8;
}
html.sb-rail .ui-sidemenu-group[data-open="1"] > .ui-sidemenu-head::after { transform: translateY(2px) rotate(-135deg); }
html.sb-rail .ui-sidemenu-head:hover { background: var(--ui-hover); }
html.sb-rail .ui-sidemenu-group.has-active:not([data-open="1"]) > .ui-sidemenu-head::before {
    content: ''; position: absolute; top: 4px; left: calc(50% + 8px); width: 6px; height: 6px; border-radius: 50%; background: var(--ui-primary);
}
html.sb-rail .ui-sidemenu-children { margin: 1px 0 6px 10px; padding-left: 5px; border-left: 2px solid color-mix(in srgb, var(--ui-primary) 28%, var(--ui-line)); }
html.sb-rail .ui-sidemenu-group.has-active > .ui-sidemenu-children { border-left-color: var(--ui-primary); }
html.sb-rail .ui-sidemenu-children .ui-side-item { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
html.sb-rail .ui-sidemenu-children .ui-side-item .material-symbols-outlined { font-size: 21px; }
html.sb-rail .ui-sidemenu-link.is-nested { padding-left: 0 !important; }
html.sb-rail .ui-sidemenu-sep { margin-left: 0.4rem; margin-right: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .ui-sidemenu-caret { transition: none; } }
/* When the module menu is the whole menu (no main menu above it) it needs no divider */
.ui-sidemenu:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* A link of the module menu can also be opened in a new browser tab: a small icon that shows on hover or focus */
.ui-sidemenu-row { position: relative; display: flex; align-items: stretch; }
.ui-sidemenu-row > .ui-sidemenu-link { flex: 1; min-width: 0; }
.ui-sidemenu-newtab {
    position: absolute; top: 50%; right: 0.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 3px;
    transform: translateY(-50%); color: var(--ui-text-subtle); opacity: 0; border-radius: var(--ui-radius-control);
    transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}
.ui-sidemenu-newtab .material-symbols-outlined { font-size: 15px; }
.ui-sidemenu-row:hover > .ui-sidemenu-newtab, .ui-sidemenu-newtab:focus-visible { opacity: 1; }
.ui-sidemenu-newtab:hover { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.ui-sidemenu-newtab:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
html.sb-rail .ui-sidemenu-newtab { display: none; }
@media (hover: none) { .ui-sidemenu-newtab { opacity: 0.55; } }

/* A header supplied by a module that acts as the site (module.json "site"): a fixed bar the template's header gives way to */
.ui-modheader {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0 1rem 0 0; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line);
}
.ui-modheader-center { flex: 1; min-width: 0; display: flex; align-items: center; }   /* visible overflow: drop-downs of the header content must not be clipped */
.ui-modheader-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.ui-sidemenu-row > .ui-sidemenu-link { padding-right: 1.9rem; }
html.sb-rail .ui-sidemenu-row > .ui-sidemenu-link { padding-right: 0 !important; }


/* ==========================================================================
   Embedded pages and the modal window
   --------------------------------------------------------------------------
   A page opened inside the app's own modal window (yawModal(), a user-menu entry with "menu_modal") is served
   inside an <iframe>; Theme::isEmbedded() puts html.yaw-embed on it and the template's chrome is hidden here, so every
   template (present and future) shows just the page. The page needs no change: same permissions, same markup.
   Templates that name their chrome differently add their selectors to this list.
   ========================================================================== */
html.yaw-embed body > header,
html.yaw-embed .ui-sidebar,
html.yaw-embed .ui-rside,
html.yaw-embed .ui-tabstrip,
html.yaw-embed .ui-sidebar-handle,
html.yaw-embed .ui-rside-handle,
html.yaw-embed .ui-modheader,
html.yaw-embed #yaw-user-menu,
html.yaw-embed #yaw-modules-menu,
html.yaw-embed .ui-launcher { display: none !important; }
html.yaw-embed { --sb-w: 0px !important; --rs-w: 0px !important; --ui-sticky-top: 0px !important; }
html.yaw-embed main { padding: 20px 24px 28px !important; margin-left: 0 !important; margin-right: 0 !important; min-height: 0 !important; }
html.yaw-embed main > div { max-width: none !important; }
html.yaw-embed main > div > footer { display: none; }
/* In a modal window the tab row scrolls with the page instead of sticking */
html.yaw-embed .ui-workspace-bar { position: static; }
html.yaw-embed .ui-workspace-bar.is-stuck { border-bottom-color: transparent; }
html.yaw-embed body { overflow-x: hidden; }

/* The modal window: a wide dialog around an iframe (see yawModal() in ui.js) */
.ui-modal { width: min(1040px, calc(100% - 2rem)); height: min(840px, calc(100% - 2rem)); max-width: none; padding: 0; }
.ui-modal[open] { display: flex; flex-direction: column; }
.ui-modal .ui-dialog-head { align-items: center; padding: 0.75rem 1rem 0.75rem 1.25rem; }
.ui-modal-actions { display: flex; align-items: center; gap: 0.25rem; }
.ui-modal-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: var(--ui-bg, transparent); display: block; }
.ui-modal-loading { position: absolute; left: 0; right: 0; top: 3.4rem; height: 2px; overflow: hidden; background: transparent; }
.ui-modal-loading::after { content: ''; position: absolute; inset: 0; width: 35%; background: var(--ui-primary); animation: ui-modal-slide 1s ease-in-out infinite; }
.ui-modal:not(.is-loading) .ui-modal-loading { display: none; }
@keyframes ui-modal-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (max-width: 640px) { .ui-modal { width: 100%; height: 100%; max-height: 100%; } }
@media (prefers-reduced-motion: reduce) { .ui-modal-loading::after { animation: none; width: 100%; opacity: .4; } }

/* User menu: heading of a group of entries (the system group: Users, Settings) */
.ui-menu-section { padding: 0.75rem 1rem 0; font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-menu-grid + .ui-menu-section { margin-top: 0.25rem; border-top: 1px solid var(--ui-line); padding-top: 0.75rem; }

/* ---- Mail settings (system/mail) ---- */
.mail-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mail-checks li { display: flex; align-items: center; gap: .6rem; }
.mail-ok { color: var(--ui-secondary, #16a34a); }
.mail-bad { color: var(--ui-danger); }
.mail-transcript { max-height: 20rem; overflow: auto; padding: .75rem; background: var(--ui-tint); border: 1px solid var(--ui-line); font-size: .78rem; white-space: pre-wrap; word-break: break-all; }
.mail-test { max-width: 32rem; }
.mail-small { font-size: 1rem; }
.mail-advanced { margin-top: 1rem; }
.mail-inline { display: inline; margin: 0; }
.mail-row-actions { white-space: nowrap; text-align: right; }
.ui-steps-plain { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
#mail-form [hidden] { display: none !important; }
.mail-admin > .ui-help { margin: 0 0 .75rem; }
.mail-subnav { margin-bottom: 1rem; }

/* ---------------------------------------------------------------------------
   User menu "pass": ink monogram, mono facts, numbered index rows that invert on hover
   --------------------------------------------------------------------------- */
.ui-pass { width: 320px; padding: 0; border-radius: var(--ui-radius); overflow: hidden; }
.ui-pass-head { position: relative; display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--ui-line); }
.ui-pass-mono {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px;
    font: 800 16px var(--ui-font-mono); letter-spacing: 0.04em;
}
.ui-pass-name { font-size: 16px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pass-mail { margin-top: 3px; font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pass-list { display: flex; flex-direction: column; }
.ui-pass-row {
    position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 1rem 0.6875rem 1.25rem;
    border-bottom: 1px solid var(--ui-line); text-decoration: none; color: var(--ui-text); outline: none;
    transition: background-color 0.14s, color 0.14s;
}
.ui-pass-idx { font: 600 10px var(--ui-font-mono); letter-spacing: 0.06em; color: var(--ui-text-subtle); transition: color 0.14s; }
.ui-pass-icon { font-size: 18px; color: var(--ui-text-subtle); transition: color 0.14s; }
.ui-pass-label { flex: 1; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.14s; }
.ui-pass-arrow { font-size: 16px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.14s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-pass-row:hover, .ui-pass-row:focus-visible { background: var(--ui-hover); }
.ui-pass-row:hover .ui-pass-idx, .ui-pass-row:hover .ui-pass-icon, .ui-pass-row:focus-visible .ui-pass-idx, .ui-pass-row:focus-visible .ui-pass-icon { color: var(--ui-primary); }
.ui-pass-row:hover .ui-pass-label, .ui-pass-row:focus-visible .ui-pass-label { transform: translateX(3px); }
.ui-pass-row:hover .ui-pass-arrow, .ui-pass-row:focus-visible .ui-pass-arrow { color: var(--ui-primary); }
.ui-pass-row:hover .ui-pass-arrow, .ui-pass-row:focus-visible .ui-pass-arrow { opacity: 1; transform: none; }
.ui-pass-row[aria-current="page"] .ui-pass-label { color: var(--ui-primary); }
.ui-pass-row[aria-current="page"] .ui-pass-icon, .ui-pass-row[aria-current="page"] .ui-pass-idx { color: var(--ui-primary); }
.ui-pass-prefs { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem 0.625rem 1.25rem; border-bottom: 1px solid var(--ui-line); }
.ui-pass-prefs .ui-input { height: 32px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
.ui-segmented-icons { flex: 0 0 auto; align-self: auto; }
.ui-segmented-icons .ui-segment-btn { flex: 0 0 auto; width: 32px; padding: 0; }
.ui-segmented-icons .ui-segment-btn > span:not(.material-symbols-outlined) { display: none; }
.ui-pass-out {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 0.75rem 1.25rem; text-decoration: none; outline: none;
    font-size: 13px; font-weight: 700; color: var(--ui-text); transition: background-color 0.14s, color 0.14s;
}
.ui-pass-out .material-symbols-outlined { font-size: 18px; }
.ui-pass-ver { margin-left: auto; font: 600 9.5px var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-subtle); transition: color 0.14s; }
.ui-pass-out .material-symbols-outlined { color: var(--ui-text-subtle); transition: color 0.14s; }
.ui-pass-out:hover, .ui-pass-out:focus-visible { background: var(--ui-hover); }
.ui-pass-out:hover .material-symbols-outlined, .ui-pass-out:focus-visible .material-symbols-outlined { color: var(--ui-primary); }

/* The default logo mark (shown when no logo is uploaded) and the user menu's monogram take the accent, like the avatar in the header */
.ui-brandcol [class~="bg-[#2D3142]"] { background-image: var(--ui-gradient) !important; background-color: var(--ui-primary) !important; color: var(--ui-on-primary) !important; }
.ui-pass-mono { background: var(--ui-gradient); color: var(--ui-on-primary); }

/* User menu: the color-mode buttons have no backgrounds; the active one is marked by the accent color and a small bar */
.ui-pass-prefs .ui-segmented { background: none; padding: 0; gap: 0.25rem; }
.ui-pass-prefs .ui-segment-btn { position: relative; background: none; box-shadow: none; border-radius: 0; }
.ui-pass-prefs .ui-segment-btn:hover { background: none; color: var(--ui-text); }
.ui-pass-prefs .ui-segment-btn:hover .material-symbols-outlined { color: var(--ui-primary); }
.ui-pass-prefs .ui-segment-btn[aria-pressed="true"] { background: none; box-shadow: none; }
.ui-pass-prefs .ui-segment-btn[aria-pressed="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; background: var(--ui-gradient); }

/* Modules menu: the same pass look as the user menu, with a small mono heading instead of the profile block */
.ui-pass-title { padding: 0.875rem 1rem 0.625rem 1.25rem; border-bottom: 1px solid var(--ui-line); font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
#yaw-modules-menu .ui-pass-row:last-child { border-bottom: 0; }
/* ---------------------------------------------------------------------------
   Data panels (right sidebar): drawn by core/Panels.php from the data a module returns
   --------------------------------------------------------------------------- */
.ui-pnl { display: flex; flex-direction: column; gap: 0.75rem; }
.ui-pnl .tone-accent { --pnl-tone: var(--ui-primary); }
.ui-pnl .tone-good { --pnl-tone: var(--ui-secondary); }
.ui-pnl .tone-warn { --pnl-tone: var(--ui-warning); }
.ui-pnl .tone-danger { --pnl-tone: var(--ui-danger); }
.ui-pnl .tone-muted { --pnl-tone: var(--ui-text-subtle); }
.ui-pnl-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--ui-line); background: var(--ui-surface); }
.ui-pnl-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0.625rem 0.75rem; }
.ui-pnl-stat + .ui-pnl-stat { border-left: 1px solid var(--ui-line); }
.ui-pnl-stat-v { font: 800 20px/1.1 var(--ui-font-mono); letter-spacing: -0.02em; color: var(--pnl-tone, var(--ui-text)); }
.ui-pnl-stat-l { font: 600 9px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pnl-heading { margin: 0.25rem 0 0; font: 600 10px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-pnl-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-line); background: var(--ui-surface); }
.ui-pnl-item { position: relative; display: flex; align-items: stretch; }
.ui-pnl-item + .ui-pnl-item { border-top: 1px solid var(--ui-line); }
.ui-pnl-item[style*="--pnl-c"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pnl-c); }
.ui-pnl-main { display: flex; flex: 1; align-items: flex-start; gap: 0.625rem; min-width: 0; padding: 0.6875rem 0.75rem; color: var(--ui-text); text-decoration: none; outline: none; transition: background-color 0.14s; }
a.ui-pnl-main:hover, a.ui-pnl-main:focus-visible { background: var(--ui-hover); }
.ui-pnl-icon { flex-shrink: 0; margin-top: 1px; font-size: 18px; color: var(--ui-text-subtle); transition: color 0.14s; }
a.ui-pnl-main:hover .ui-pnl-icon, a.ui-pnl-main:focus-visible .ui-pnl-icon { color: var(--ui-primary); }
.ui-pnl-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ui-pnl-title { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-pnl-sub { font-size: 12px; line-height: 1.35; color: var(--ui-text-muted); overflow-wrap: anywhere; }
.ui-pnl-meta { font: 11px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-pnl-badge { flex-shrink: 0; align-self: flex-start; padding: 1px 6px; font: 700 10px var(--ui-font-mono); color: var(--pnl-tone, var(--ui-text-subtle)); border: 1px solid color-mix(in srgb, var(--pnl-tone, var(--ui-text-subtle)) 45%, transparent); background: color-mix(in srgb, var(--pnl-tone, var(--ui-text-subtle)) 10%, transparent); }
.ui-pnl-actions { display: flex; align-items: center; gap: 2px; padding-right: 0.375rem; }
.ui-pnl-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ui-text-subtle); transition: color 0.14s, background-color 0.14s; }
.ui-pnl-act:hover, .ui-pnl-act:focus-visible { color: var(--ui-primary); background: var(--ui-hover); outline: none; }
.ui-pnl-act .material-symbols-outlined { font-size: 18px; }
.ui-pnl-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.125rem; font-size: 12.5px; font-weight: 600; color: var(--ui-primary); text-decoration: none; }
.ui-pnl-footer .material-symbols-outlined { font-size: 16px; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-pnl-footer:hover .material-symbols-outlined, .ui-pnl-footer:focus-visible .material-symbols-outlined { transform: translate(2px, -2px); }

.ui-pnl-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ui-pnl-btn { display: inline-flex; align-items: center; gap: 0.375rem; height: 30px; padding: 0 0.75rem; background: var(--ui-surface); border: 1px solid var(--ui-line-strong); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ui-text); transition: background-color 0.14s, color 0.14s; }
.ui-pnl-btn:hover, .ui-pnl-btn:focus-visible { background: var(--ui-hover); color: var(--ui-primary); outline: none; }
.ui-pnl-btn .material-symbols-outlined { font-size: 16px; }
/* ---------------------------------------------------------------------------
   Right sidebar, second pass: icon dock, panel header, flat Notes list (same language as the menus)
   --------------------------------------------------------------------------- */
/* Dock: icon buttons, the current one shows its name and an accent underline; scrolls sideways when there are many */
.ui-rside-dock { gap: 0; padding: 0; background: var(--ui-side); }
.ui-rside-funcs { gap: 0; padding: 0 0.25rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%); }
.ui-rside-func { flex: 0 0 auto; min-width: 0; flex-direction: row; gap: 0; height: 48px; padding: 0 0.75rem; border-radius: 0; font-size: 12.5px; font-weight: 700; }
.ui-rside-func .material-symbols-outlined { font-size: 21px; }
.ui-rside-func-label { max-width: 0; opacity: 0; margin-left: 0; transition: max-width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, margin-left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui-rside-func.is-active .ui-rside-func-label { max-width: 110px; opacity: 1; margin-left: 0.5rem; }
.ui-rside-func::before { left: 0.75rem; right: 0.75rem; top: auto; bottom: 0; }
.ui-rside-func.is-active { background: none; }
.ui-rside-func:hover { background: var(--ui-hover); }
.ui-rside-close { width: 48px; border-left: 1px solid var(--ui-line); }

/* Panel header: source in mono, name in heavy type, hairline below */
.ui-rside-panel-head { align-items: flex-end; padding: 1rem 1rem 0.75rem; margin-bottom: 0.875rem; border-bottom: 1px solid var(--ui-line); }
.ui-rside-eyebrow { font: 600 9px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); }
.ui-rside-panel-title { margin-top: 2px; font-family: inherit; font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; text-transform: none; color: var(--ui-text); }

/* Notes: one flat list with hairlines instead of separate boxes */
.ui-rside .ui-notes-list { gap: 0; border: 1px solid var(--ui-line); background: var(--ui-surface); }
.ui-rside .ui-note { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--ui-line); box-shadow: inset 3px 0 0 var(--ui-tag-color, transparent); transition: background-color 0.14s; }
.ui-rside .ui-note:last-child { border-bottom: 0; }
.ui-rside .ui-note:hover, .ui-rside .ui-note.is-open { background: var(--ui-hover); }
.ui-rside .ui-note-view { padding: 0.6875rem 0.5rem 0.6875rem 0.75rem; }
.ui-rside .ui-note-full { border-radius: 0; background: var(--ui-surface); }
.ui-rside .ui-note-title { font-weight: 700; }
/* Views as quiet tabs: no filled box, the current one is marked by an accent underline */
.ui-rside .ui-seg { gap: 0; padding: 0; background: none; border-bottom: 1px solid var(--ui-line); border-radius: 0; }
.ui-rside .ui-seg-btn { position: relative; padding: 0.5rem 0.5rem; border-radius: 0; background: none; box-shadow: none; }
.ui-rside .ui-seg-btn[aria-pressed="true"] { background: none; box-shadow: none; color: var(--ui-text); }
.ui-rside .ui-seg-btn[aria-pressed="true"]::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px; background: var(--ui-gradient); }
.ui-rside .ui-folder-head { border-radius: 0; }

/* ---------------------------------------------------------------------------
   Notes panel, third pass: search + new on one row, tabs carry the count, calmer cards with a relative time,
   actions that appear on hover, headings (Pinned / Today / Earlier)
   --------------------------------------------------------------------------- */
.ui-notes-panel { gap: 0.75rem; }
.ui-notes-bar { display: flex; align-items: center; gap: 0.5rem; }
.ui-notes-bar .ui-notes-search { flex: 1; min-width: 0; }
.ui-notes-quick[hidden] { display: none; }

/* Tabs, then the count and the link to the full page on the same line */
.ui-notes-tabs { display: flex; align-items: stretch; gap: 0.5rem; border-bottom: 1px solid var(--ui-line); }
.ui-rside .ui-notes-tabs .ui-seg { flex: 1; min-width: 0; border-bottom: 0; }
.ui-notes-tabs .ui-notes-count, .ui-notes-tabs .ui-notes-full { align-self: center; }
.ui-notes-tabs .ui-notes-full { padding: 2px; }
.ui-notes-tabs .ui-notes-full .material-symbols-outlined { font-size: 16px; }
[data-panel-views].is-searching > .ui-notes-tabs { display: none; }

/* Headings of the recent list */
.ui-notes-group { padding: 0.5rem 0.75rem 0.25rem; font: 600 9px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); border-bottom: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-text) 3%, transparent); }

/* Card: title and age on one line, one line of excerpt, folder and tags on one muted line */
.ui-note-view { position: relative; }
.ui-note-time { display: inline-flex; align-items: center; gap: 3px; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); white-space: nowrap; line-height: 1.6; transition: opacity 0.15s; }
.ui-note-pinned { font-size: 12px; color: var(--ui-primary); font-variation-settings: 'FILL' 1; }
.ui-note-excerpt { grid-column: 1 / -1; -webkit-line-clamp: 1; line-clamp: 1; }
.ui-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.3125rem; }
.ui-note-folder { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-note-folder .material-symbols-outlined { font-size: 13px; }

/* Actions: one row over the age, only while the card is hovered or focused */
.ui-note-actions { position: absolute; top: 0.375rem; right: 0.375rem; flex-direction: row; align-items: center; gap: 0; padding: 1px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.ui-note:hover .ui-note-actions, .ui-note:focus-within .ui-note-actions { opacity: 1; pointer-events: auto; }
.ui-note:hover .ui-note-time, .ui-note:focus-within .ui-note-time { opacity: 0; }
.ui-note-actions form:last-child { margin-left: 2px; padding-left: 2px; border-left: 1px solid var(--ui-line); }
@media (hover: none) {
    .ui-note-actions { position: static; opacity: 1; pointer-events: auto; align-self: flex-start; }
    .ui-note:hover .ui-note-time, .ui-note:focus-within .ui-note-time { opacity: 1; }
}

/* Empty state */
.ui-notes-empty:has(.material-symbols-outlined) { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 0; text-align: center; }
.ui-notes-empty .material-symbols-outlined { font-size: 28px; color: var(--ui-text-subtle); }

/* Panel header on one line, as tall as the tabs row in the content (--ui-rside-row) */
.ui-rside { --ui-rside-row: 2.25rem; }
.ui-rside-panel-head { align-items: center; height: var(--ui-rside-row); padding: 0 0.75rem 0 1rem; margin-bottom: 0.5rem; }
.ui-rside-panel-head > .min-w-0 { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ui-rside-panel-title { margin-top: 0; font-size: 14px; line-height: 1; white-space: nowrap; }
.ui-rside-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-rside-panel-head .ui-rside-iconbtn { width: 28px; height: 28px; }
.ui-rside .ui-notes-tabs { min-height: var(--ui-rside-row); }
.ui-rside .ui-notes-tabs .ui-seg-btn { display: flex; align-items: center; justify-content: center; }
.ui-rside-panel-head .ui-rside-eyebrow { order: 2; }

/* A tool page shown inside a window (iframe, ?embed=1): only the page itself, without header, menus, panels or footer */
html.is-embed header, html.is-embed .ui-sidebar, html.is-embed .ui-rside, html.is-embed .ui-sidebar-handle, html.is-embed .ui-rside-handle,
html.is-embed .ui-shell-left.fixed, html.is-embed footer { display: none !important; }
html.is-embed .ui-shell-pad { padding-left: 0 !important; padding-right: 0 !important; }
html.is-embed main { min-height: 0 !important; padding: 1.25rem 1.5rem !important; }

/* The full notes page in a window */
.ui-dialog-frame { width: min(1100px, calc(100% - 2rem)); height: min(860px, calc(100% - 2rem)); max-height: none; }
.ui-dialog-frame .ui-dialog-body { padding: 0; overflow: hidden; display: flex; }
.ui-dialog-frame iframe { flex: 1; width: 100%; border: 0; background: var(--ui-bg); }

/* Notes list: no color accent on the left, and a softer background (between the canvas and the cards) */
.ui-rside .ui-notes-list { --ui-notes-bg: color-mix(in srgb, var(--ui-surface) 45%, var(--ui-bg)); background: var(--ui-notes-bg); }
.ui-rside .ui-note { box-shadow: none; border-left: 0; }
.ui-rside .ui-note-full { background: var(--ui-bg); }
.ui-note-actions { background: var(--ui-notes-bg, var(--ui-bg)); }
.ui-rside .ui-notes-group { background: color-mix(in srgb, var(--ui-text) 4%, var(--ui-notes-bg)); }

/* A note opened in the window: the editor fills it, saved by itself */
.ui-dialog-body:has(.ui-note-window) { padding: 0.75rem 1rem 1rem; }
.ui-note-window { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.ui-note-window .yaw-editor.is-field { border-color: transparent; background: transparent; }
.ui-note-window .yaw-editor.is-field:focus-within { border-color: var(--ui-line-strong); }
.ui-note-window .yaw-editor .cm-scroller { min-height: 14rem; max-height: 60vh; }
.ui-note-window-status { margin: 0; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.ui-note-window-status[data-state="error"] { color: var(--ui-danger); }
.ui-note-window-status[data-state="saved"] { color: var(--ui-secondary); }

/* ---------------------------------------------------------------------------
   Notes workspace (tools/notes/page.php): toolbar, rail (where), list (what), pane (the note)
   --------------------------------------------------------------------------- */
.nw-wrap { display: flex; flex-direction: column; gap: 1rem; }
.nw { --nw-bg: color-mix(in srgb, var(--ui-surface) 45%, var(--ui-bg)); display: grid; grid-template-columns: 13rem 19rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 12rem); min-height: 30rem; border: 1px solid var(--ui-line); background: var(--nw-bg); }
html.is-embed .nw { height: calc(100vh - 2.5rem); min-height: 0; }
html.is-embed .nw-wrap { gap: 0; }
.nw > * { min-width: 0; min-height: 0; }

/* Toolbar */
.nw-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ui-line); }
.nw-bar form { margin: 0; }
.nw-search { position: relative; flex: 1; }
.nw-search .material-symbols-outlined { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ui-text-subtle); pointer-events: none; }
.nw-search .ui-input { padding-left: 2rem; }

/* Rail */
.nw-rail { display: flex; flex-direction: column; gap: 1px; padding: 0.5rem; overflow-y: auto; border-right: 1px solid var(--ui-line); scrollbar-width: thin; }
.nw-rail-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.5rem; padding-left: calc(0.5rem + var(--depth, 0) * 0.75rem); font-size: 13px; font-weight: 600; color: var(--ui-text-muted); text-decoration: none; border-radius: var(--ui-radius-control); transition: background-color 0.14s, color 0.14s; }
.nw-rail-item .material-symbols-outlined { font-size: 17px; color: var(--ui-text-subtle); }
.nw-rail-item:hover { background: var(--ui-hover); color: var(--ui-text); }
.nw-rail-item.is-active { background: color-mix(in srgb, var(--ui-primary) 12%, transparent); color: var(--ui-text); }
.nw-rail-item.is-active .material-symbols-outlined { color: var(--ui-primary); }
.nw-rail-indent { display: block; --depth: 0; }
.nw-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-rail-count { font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.nw-rail-label { margin: 0.875rem 0.5rem 0.25rem; font: 600 9px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); }
.nw-rail-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.25rem 0.5rem; }
.nw-rail-tag { display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; opacity: 0.85; }
.nw-rail-tag:hover, .nw-rail-tag.is-active { opacity: 1; }
.nw-rail-tag.is-active { outline: 2px solid var(--ui-primary); outline-offset: 1px; }
.nw-rail-manage { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding: 0.4375rem 0.5rem; background: none; border: 0; border-top: 1px solid var(--ui-line); font: inherit; font-size: 12px; font-weight: 600; color: var(--ui-text-muted); cursor: pointer; }
.nw-rail-manage:hover { color: var(--ui-primary); }
.nw-rail-manage .material-symbols-outlined { font-size: 16px; }

/* List */
.nw-list { display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--ui-line); scrollbar-width: thin; }
.nw-group { padding: 0.5rem 0.75rem 0.25rem; font: 600 9px var(--ui-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-subtle); border-bottom: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-text) 4%, var(--nw-bg)); }
.nw-item { display: flex; flex-direction: column; gap: 0.1875rem; padding: 0.6875rem 0.75rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--ui-line); transition: background-color 0.14s; }
.nw-item:hover { background: var(--ui-hover); }
.nw-item.is-active { background: color-mix(in srgb, var(--ui-primary) 10%, transparent); }
.nw-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.nw-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ui-text); }
.nw-item.is-done .nw-item-title { color: var(--ui-text-subtle); text-decoration: line-through; }
.nw-item-time { display: inline-flex; align-items: center; gap: 3px; flex: none; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.nw-item-time .material-symbols-outlined { font-size: 12px; color: var(--ui-primary); font-variation-settings: 'FILL' 1; }
.nw-item-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ui-text-muted); }
.nw-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.125rem; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.nw-item-folder { display: inline-flex; align-items: center; gap: 2px; }
.nw-item-folder .material-symbols-outlined { font-size: 13px; }

/* Pane */
.nw-pane { position: relative; display: flex; flex-direction: column; overflow-y: auto; background: var(--ui-bg); scrollbar-width: thin; }
.nw-back { display: none; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; font-size: 12px; font-weight: 600; color: var(--ui-primary); text-decoration: none; border-bottom: 1px solid var(--ui-line); }
.nw-back .material-symbols-outlined { font-size: 16px; }
.nw-actions { position: absolute; top: 0.5rem; right: 0.75rem; z-index: 2; display: flex; align-items: center; gap: 0.375rem; }
.nw-actions form { margin: 0; }
.nw-edit { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; min-height: 0; margin: 0; padding: 0.75rem 1rem; }
.nw-title { width: 100%; padding: 0.25rem 0.625rem; padding-right: 9rem; background: none; border: 0; outline: 0; font: inherit; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ui-text); }
.nw-title::placeholder { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ui-text-subtle); }
.nw-edit .yaw-editor.is-field { flex: 1; min-height: 12rem; border-color: transparent; background: transparent; }
.nw-edit .yaw-editor.is-field:focus-within { border-color: var(--ui-line); }
.nw-edit .yaw-editor .cm-scroller { min-height: 12rem; max-height: none; font-size: 14px; }
.nw-edit textarea.ui-input { flex: 1; min-height: 12rem; }
.nw-props { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ui-line); }
.nw-props .ui-input { width: auto; min-width: 0; height: 2rem; padding-top: 0; padding-bottom: 0; font-size: 12px; }
.nw-props select.ui-input { max-width: 11rem; }
.nw-props input[name="note_tags"] { flex: 1; min-width: 8rem; }
.nw-pin { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nw-pin .material-symbols-outlined { font-size: 15px; }
.nw-status { margin: 0; font: 10px var(--ui-font-mono); color: var(--ui-text-subtle); }
.nw-status[data-state="error"] { color: var(--ui-danger); }
.nw-status[data-state="saved"] { color: var(--ui-secondary); }
.nw-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: auto; padding: 2rem 1rem; font-size: 13px; color: var(--ui-text-muted); text-align: center; }
.nw-empty .material-symbols-outlined { font-size: 30px; color: var(--ui-text-subtle); }

/* Narrower: the rail goes first, then the list and the note take turns */
@media (max-width: 900px) {
    .nw { grid-template-columns: 11rem 16rem minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .nw { grid-template-columns: minmax(0, 1fr); }
    .nw-rail { display: none; }
    .nw-list { border-right: 0; }
    .nw-pane { display: none; }
    .nw.has-note .nw-list { display: none; }
    .nw.has-note .nw-pane { display: flex; }
    .nw-back { display: inline-flex; }
    .nw-hide-sm { display: none; }
}