/* Backstage component classes — the single, centralized place UI atoms are
   styled, re-skinned to the Catalyst design language (zinc palette, rounded-lg,
   subtle /5–/10 borders, blue-500 focus). Plain CSS (no @apply) so it works with
   the Play CDN. The palette lives as rgb-channel CSS variables that flip on
   prefers-color-scheme, and the Tailwind config maps `bg-app`/`text-ink`/… onto
   the same variables — so utilities and these classes share one source of truth
   and get light/dark for free. */

:root {
    /* Structural neutrals (Catalyst = zinc). Channels, so Tailwind alpha works. */
    --color-app: 244 244 245;
    /* zinc-100 — desktop canvas */
    --color-surface: 255 255 255;
    /* white — cards / content panel */
    --color-ink: 9 9 11;
    /* zinc-950 — primary text */
    --color-muted: 113 113 122;
    /* zinc-500 — secondary text */
    --color-line: 228 228 231;
    /* zinc-200 — borders */
    /* Brand accent = Fuchsia. Used on primary buttons, the active nav item, and
     small accents (active tab underline, current pagination). Structural chrome
     stays zinc; only these accent surfaces carry the brand hue. */
    --color-brand: 192 38 211;
    /* fuchsia-600 */
    --color-brand-hover: 162 28 175;
    /* fuchsia-700 */
    --color-brand-light: 250 232 255;
    /* fuchsia-100 — pale active-nav pill */
    --color-brand-fg: 255 255 255;
    /* Status accents — light values preserved from the prior theme so existing
     `text-danger`/`bg-warning`/… usages are unchanged in light mode. */
    --color-success: 236 253 243;
    --color-success-fg: 6 118 71;
    --color-warning: 255 250 235;
    --color-warning-fg: 181 71 8;
    --color-danger: 254 243 242;
    --color-danger-fg: 180 35 24;
    --color-info: 239 248 255;
    --color-info-fg: 23 92 211;
    /* Focus ring (Catalyst uses blue-500). */
    --focus: 59 130 246;
    /* Native controls (scrollbars, date/time pickers) follow the active theme. */
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

:root[data-theme="dark"] {
    --color-app: 9 9 11;
    --color-surface: 24 24 27;
    --color-ink: 255 255 255;
    --color-muted: 161 161 170;
    --color-line: 39 39 42;
    --color-brand: 217 70 239;
    --color-brand-hover: 232 121 249;
    --color-brand-light: 74 4 78;
    --color-brand-fg: 255 255 255;
    --color-success: 20 83 45;
    --color-success-fg: 74 222 128;
    --color-warning: 66 32 6;
    --color-warning-fg: 251 191 36;
    --color-danger: 69 10 10;
    --color-danger-fg: 248 113 113;
    --color-info: 23 37 84;
    --color-info-fg: 96 165 250;
}


/* Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    /* rounded-lg */
    border: 1px solid transparent;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
    /* Default size, so a `.btn` without an explicit .btn-md/.btn-sm still has padding. */
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid rgb(var(--focus));
    outline-offset: 2px;
}

.btn-md {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}


/* Pale fuchsia — the brand primary (mockup: bg-brand-light text-brand). A soft
   tinted pill, not a loud solid; hover deepens the tint. */

.btn-primary {
    background: rgb(var(--color-brand-light));
    color: rgb(var(--color-brand));
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.05);
}

.btn-primary:hover {
    background: rgb(var(--color-brand) / 0.18);
}

/* Dark mode: the tinted fill is dark enough that brand-on-brand loses contrast —
   use the brand foreground instead. */

:root[data-theme="dark"] .btn-primary {
    color: rgb(var(--color-brand-fg));
}


/* Outline — bordered light button. */

.btn-secondary {
    background: rgb(var(--color-surface));
    color: rgb(var(--color-ink));
    border-color: rgb(9 9 11 / 0.10);
}

.btn-secondary:hover {
    background: rgb(9 9 11 / 0.025);
}

:root[data-theme="dark"] .btn-secondary {
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.20);
}

:root[data-theme="dark"] .btn-secondary:hover {
    background: rgb(255 255 255 / 0.10);
}


/* Plain — borderless. */

.btn-ghost {
    background: transparent;
    color: rgb(var(--color-ink));
}

.btn-ghost:hover {
    background: rgb(9 9 11 / 0.05);
}

:root[data-theme="dark"] .btn-ghost:hover {
    background: rgb(255 255 255 / 0.10);
}

.btn-danger {
    background: rgb(220 38 38);
    /* red-600 */
    color: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-danger:hover {
    background: rgb(239 68 68);
}


/* red-500 */


/* Pale green — a "done / live" state pill (mirrors .btn-primary's tinted look,
   using the success palette). Used as a non-interactive status in the wizard. */

.btn-success {
    background: rgb(34 197 94 / 0.15);
    /* green-500 / 15% */
    color: rgb(21 128 61);
    /* green-700 */
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.05);
}

:root[data-theme="dark"] .btn-success {
    background: rgb(34 197 94 / 0.15);
    color: rgb(74 222 128);
    /* green-400 */
}


/* Pale amber — a "submitted / in review" state pill (mirrors .btn-success). */

.btn-warning {
    background: rgb(251 191 36 / 0.20);
    /* amber-400 / 20% */
    color: rgb(180 83 9);
    /* amber-700 */
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.05);
}

:root[data-theme="dark"] .btn-warning {
    background: rgb(251 191 36 / 0.15);
    color: rgb(251 191 36);
    /* amber-400 */
}


/* Cards ---------------------------------------------------------------- */

.card {
    background: rgb(var(--color-surface));
    border: 1px solid rgb(9 9 11 / 0.06);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.04);
}

:root[data-theme="dark"] .card {
    border-color: rgb(255 255 255 / 0.10);
    box-shadow: none;
}


/* Badges — Catalyst soft-tinted pills ---------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    /* rounded-md */
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.badge-neutral {
    background: rgb(82 82 91 / 0.10);
    color: rgb(63 63 70);
}

.badge-success {
    background: rgb(34 197 94 / 0.15);
    color: rgb(21 128 61);
}

.badge-warning {
    background: rgb(251 191 36 / 0.20);
    color: rgb(180 83 9);
}

.badge-danger {
    background: rgb(239 68 68 / 0.15);
    color: rgb(185 28 28);
}

.badge-info {
    background: rgb(59 130 246 / 0.15);
    color: rgb(29 78 216);
}

.badge-purple {
    background: rgb(147 51 234 / 0.12);
    color: rgb(126 34 206);
}

:root[data-theme="dark"] .badge-purple {
    background: rgb(147 51 234 / 0.18);
    color: rgb(216 180 254);
}

:root[data-theme="dark"] .badge-neutral {
    background: rgb(255 255 255 / 0.05);
    color: rgb(161 161 170);
}

:root[data-theme="dark"] .badge-success {
    background: rgb(34 197 94 / 0.10);
    color: rgb(74 222 128);
}

:root[data-theme="dark"] .badge-warning {
    background: rgb(251 191 36 / 0.10);
    color: rgb(251 191 36);
}

:root[data-theme="dark"] .badge-danger {
    background: rgb(239 68 68 / 0.10);
    color: rgb(248 113 113);
}

:root[data-theme="dark"] .badge-info {
    background: rgb(59 130 246 / 0.15);
    color: rgb(96 165 250);
}


/* Tables (Catalyst Table) --------------------------------------------- */

.table {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    border-collapse: collapse;
}

.table thead th {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: rgb(var(--color-muted));
    border-bottom: 1px solid rgb(9 9 11 / 0.10);
}

.table tbody td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgb(9 9 11 / 0.05);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .table thead th {
    border-bottom-color: rgb(255 255 255 / 0.10);
}

:root[data-theme="dark"] .table tbody td {
    border-bottom-color: rgb(255 255 255 / 0.05);
}


/* Form sections -------------------------------------------------------- */

/* One titled group of fields inside a wizard step: what the group is (and why
   it's being asked) on the left, the inputs on the right. Stacks on a phone.
   Sections in the same step read as one column of rules, so each is separated
   by a line rather than boxed — the step itself is the box. */
.form-section {
    display: grid;
    gap: 1.5rem 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgb(var(--color-line));
}

.form-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Splits at 640px rather than 768: the content panel gives up 16rem to the rail
   from 1024px up, so a window between the two would otherwise read as one
   stacked column on a screen wide enough for the pair. */
@media (min-width: 640px) {
    .form-section {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .form-section-body {
        grid-column: span 2 / span 2;
        max-width: 42rem;
    }
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75rem;
    color: rgb(var(--color-ink));
}

.form-section-desc {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(var(--color-muted));
}


/* Form fields ---------------------------------------------------------- */

.field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="time"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
    width: 100%;
    border: 1px solid rgb(9 9 11 / 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    background: rgb(var(--color-surface));
    color: rgb(var(--color-ink));
    box-shadow: 0 1px 2px 0 rgb(9 9 11 / 0.05);
    transition: border-color 0.12s, box-shadow 0.12s;
}

/* Date and time inputs — reported as the slot's "Starts on" and "Ends on"
   boxes sitting visually off inside their rows on an iPhone.

   `min-width: 0` is safe everywhere: without it these refuse to shrink below
   their intrinsic width inside a flex or grid cell, whatever the browser. */

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
    min-width: 0;
}

/* The rest is iOS only. Mobile Safari sizes these from the native picker and
   ignores the `width: 100%` above, so the box stops short of its container and
   leaves a gap to the right; it also centres the value while every other field
   in the form is left-aligned. Dropping the platform appearance is what lets
   the width apply.

   Behind an iOS-only feature query on purpose: `appearance: none` on a date
   input costs the calendar-picker affordance on desktop Chrome, and desktop
   never had the bug. */

@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        text-align: left;
    }
}

.field:hover,
input:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover,
textarea:not(:disabled):not([readonly]):hover {
    border-color: rgb(9 9 11 / 0.25);
}


/* Disabled / read-only — a field you can look at but not change. Without this
   it renders identically to a live one, and the only way to find out is to
   click it (the Settings email did exactly that). Tailwind UI's treatment: a
   filled-in background, muted text, a lighter border, no shadow, no hover.
   `[readonly]` gets the same look — the distinction is a submit-time one, and
   to the eye both mean "not yours to edit". */

.field:disabled,
input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
    background: rgb(var(--color-app));
    color: rgb(var(--color-muted));
    border-color: rgb(9 9 11 / 0.08);
    box-shadow: none;
    cursor: not-allowed;
}

:root[data-theme="dark"] .field:disabled,
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] input[readonly],
:root[data-theme="dark"] select:disabled,
:root[data-theme="dark"] textarea:disabled,
:root[data-theme="dark"] textarea[readonly] {
    /* The light theme's canvas fill is near-black here, which reads as a hole
       rather than a disabled field — tint the surface instead. */
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.08);
}


/* No spinner on a number box, anywhere in Backstage.
   The stepper is a pair of arrows a few pixels tall sitting inside the field,
   right where the pointer already is on the way to the next box — one stray
   click and a capacity is a seat higher than the operator set it, with nothing
   on screen to say so. The keyboard and wheel routes to the same edit are shut
   in backstage.js; this is the third, and the only one with a visible target.
   These numbers are typed, not dialled: they are capacities, prices and seat
   limits, and stepping to them one at a time was never the point.

   This rule used to be scoped to .unit-field, where the spinner had to go
   because the ₹/% adornment sits on top of it — so the coupon value box was the
   one field in Backstage you could not misclick. */

input[type="number"] {
    appearance: textfield;
    -webkit-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Input carrying a unit adornment (₹ / %) — components/field.html positions the
   symbol with Tailwind utilities; this is the bit that needs the input itself:
   room for the symbol on the right. */

.unit-field input {
    padding-right: 2.25rem;
}


/* 12-hour time control (forms/widgets.py TwelveHourTimeInput): hour : minute
   AM/PM. The three share the row evenly and wrap when it is too narrow for
   them. The selects keep the base field styling above, including .is-invalid,
   which is why the widget hands its class to them rather than to the hidden
   input. */

.time-12h {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

/* Flex with a font-relative floor, not `grid-template-columns: 1fr 1fr auto`.
   A `1fr` track let each select be squeezed narrower than the two digits it has
   to show, and a `select` clips rather than scrolls: at a large text size on a
   phone the hour and minute rendered as a bare chevron with no number in them,
   so a slot displayed no time at all while the preview line under it read fine.
   The floor is in `rem` so it grows with the text it has to fit, and wrapping is
   what gives when even that doesn't fit — AM/PM drops to its own line instead of
   all three collapsing. */

.time-12h select {
    flex: 1 1 4.5rem;
    min-width: 4.5rem;
    width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


/* Input carrying a leading adornment (the fixed +91 on a phone) — room on the
   left for the code the operator doesn't type. */

.prefix-field input {
    padding-left: 2rem;
}

/* A dialling code ("+91") is three glyphs, not one — it needs the wider gap. */
.prefix-field-code input {
    padding-left: 3rem;
}


/* Empty required field flagged by the event wizard's per-step validation.
   !important + a fill tint so it reads clearly over the base input styles in
   both themes (the dark theme otherwise resets box-shadow to none). */

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: rgb(var(--color-danger-fg)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-danger-fg) / 0.28) !important;
    background-color: rgb(var(--color-danger)) !important;
}


/* Rich-text (Quill) editor whose hidden textarea was flagged required-but-empty.
   Quill turns the holder into .ql-container and inserts .ql-toolbar before it, so
   both carry .is-invalid (see event_form.js flag()). !important beats Quill's own
   border-color, which also uses !important. */

.ql-toolbar.ql-snow.is-invalid,
.ql-container.ql-snow.is-invalid {
    border-color: rgb(var(--color-danger-fg)) !important;
}

.ql-container.ql-snow.is-invalid {
    box-shadow: 0 0 0 3px rgb(var(--color-danger-fg) / 0.28) !important;
}


/* Required image dropzone flagged empty on a submit/next attempt. */

[data-image-dropzone].is-invalid {
    border-color: rgb(var(--color-danger-fg)) !important;
    color: rgb(var(--color-danger-fg)) !important;
}

:root[data-theme="dark"] .field,
 :root[data-theme="dark"] input[type="text"],
 :root[data-theme="dark"] input[type="email"],
 :root[data-theme="dark"] input[type="tel"],
 :root[data-theme="dark"] input[type="number"],
 :root[data-theme="dark"] input[type="time"],
 :root[data-theme="dark"] input[type="url"],
 :root[data-theme="dark"] input[type="password"],
 :root[data-theme="dark"] input[type="search"],
 :root[data-theme="dark"] input[type="date"],
 :root[data-theme="dark"] input[type="datetime-local"],
 :root[data-theme="dark"] input[type="month"],
 :root[data-theme="dark"] input[type="week"],
 :root[data-theme="dark"] select,
 :root[data-theme="dark"] textarea {
    border-color: rgb(255 255 255 / 0.12);
    box-shadow: none;
}

:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
 :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
 :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
 :root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
 :root[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

:root[data-theme="dark"] .field:hover,
 :root[data-theme="dark"] input:hover,
 :root[data-theme="dark"] select:hover,
 :root[data-theme="dark"] textarea:hover {
    border-color: rgb(255 255 255 / 0.22);
}


/* checkbox/radio manage their own hover; don't apply the field border-darken. */

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: rgb(9 9 11 / 0.25);
}

:root[data-theme="dark"] input[type="checkbox"]:hover,
 :root[data-theme="dark"] input[type="radio"]:hover {
    border-color: rgb(255 255 255 / 0.25);
}

.field:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgb(var(--focus));
    box-shadow: 0 0 0 3px rgb(var(--focus) / 0.25);
}

::placeholder {
    color: rgb(var(--color-muted));
}


/* Select — native control, Catalyst chevron + no OS arrow.
   `:not([multiple])` raises specificity to (0,0,1,1) so the padding/line-height
   here beat Tailwind Preflight's `select{padding:0;line-height:inherit}` reset
   (0,0,0,1), which the CDN injects after this file — otherwise the value text
   ignores padding and hugs the left edge. */

select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.875rem;
    line-height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206l4%204%204-4'%20fill='none'%20stroke='%2371717a'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
}

:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206l4%204%204-4'%20fill='none'%20stroke='%23a1a1aa'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Textarea — same Preflight-specificity issue as select: `:not([hidden])`
   raises this to (0,0,1,1) so the padding here beats `textarea{padding:0}`,
   otherwise the text hugs the left edge. */

textarea:not([hidden]) {
    padding: 0.5rem 0.875rem;
    line-height: 1.5rem;
}


/* Venue map fallback — same [hidden] cascade issue: an author-origin `flex`
   utility beats the UA stylesheet's `[hidden]{display:none}` at equal
   specificity, so `mapFallback.hidden = true` (venue_picker.js) left the
   gray placeholder rendered underneath the loaded map iframe. */

[data-venue-map-fallback][hidden] {
    display: none;
}


/* Checkbox & radio — custom Catalyst controls (native ones ignore the theme). */

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid rgb(9 9 11 / 0.25);
    background: rgb(var(--color-surface));
    vertical-align: -2px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

input[type="checkbox"] {
    border-radius: 0.3125rem;
}

input[type="radio"] {
    border-radius: 9999px;
}

:root[data-theme="dark"] input[type="checkbox"],
 :root[data-theme="dark"] input[type="radio"] {
    border-color: rgb(255 255 255 / 0.25);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: rgb(var(--color-brand));
    border-color: rgb(var(--color-brand));
    background-repeat: no-repeat;
    background-position: center;
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%208.5l2.5%202.5%205.5-6'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
    background-image: radial-gradient(circle at center, #fff 0 34%, transparent 40%);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--focus) / 0.30);
}


/* File input — style the browser's default picker button. */

input[type="file"] {
    font-size: 0.875rem;
    color: rgb(var(--color-muted));
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(9 9 11 / 0.10);
    background: rgb(var(--color-surface));
    color: rgb(var(--color-ink));
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

:root[data-theme="dark"] input[type="file"]::file-selector-button {
    border-color: rgb(255 255 255 / 0.15);
}


/* Quill rich-text editor — align the CDN "snow" theme with the Catalyst field
   look and make it dark-aware. reason: overrides Quill's CDN stylesheet, which
   loads after app.css, so !important is required to win the cascade. */

.ql-toolbar.ql-snow {
    border-color: rgb(9 9 11 / 0.10) !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.ql-container.ql-snow {
    border-color: rgb(9 9 11 / 0.10) !important;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Five lines tall before a word is typed, and it grows from there. A box sized
   to its content opened one line high and read as a single-line field — people
   wrote one sentence into a description that wants a paragraph. `em` so it
   tracks the editor's own text size rather than fixing a pixel height that
   stops being five lines the moment a reader scales the page. */

.ql-container.ql-snow .ql-editor {
    min-height: 7.5em;
}

/* The word counter under a rich-text box. `is-over` is set by richtext.js at
   the point the limit is passed — the same limit the form refuses on. */

.richtext-count {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--color-muted));
}

.richtext-count.is-over {
    color: rgb(var(--color-danger-fg));
    font-weight: 500;
}

:root[data-theme="dark"] .ql-toolbar.ql-snow,
 :root[data-theme="dark"] .ql-container.ql-snow {
    border-color: rgb(255 255 255 / 0.12) !important;
}

:root[data-theme="dark"] .ql-snow .ql-stroke {
    stroke: rgb(var(--color-muted)) !important;
}

:root[data-theme="dark"] .ql-snow .ql-fill {
    fill: rgb(var(--color-muted)) !important;
}

:root[data-theme="dark"] .ql-snow .ql-picker,
 :root[data-theme="dark"] .ql-editor {
    color: rgb(var(--color-ink));
}

:root[data-theme="dark"] .ql-editor.ql-blank::before {
    color: rgb(var(--color-muted));
}


/* Alpine: hide elements until initialized */

[x-cloak] {
    display: none !important;
}


/* Sidebar nav links (Catalyst SidebarItem) ---------------------------- */

.side-link {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-ink));
    text-decoration: none;
    text-align: left;
    transition: background-color 0.12s;
}


/* Heroicon glyph — base size so an icon is constrained even outside a nav link. */

.hi {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/* A leading glyph inside a small button tracks the smaller label. */
.btn-sm .hi {
    width: 1rem;
    height: 1rem;
}


/* Leading nav glyph — muted; darkens on hover, brand hue when current. */

.side-link .hi {
    color: rgb(var(--color-muted));
    transition: color 0.12s;
}

.side-link:hover .hi {
    color: rgb(var(--color-ink));
}

.side-link:hover {
    background: rgb(9 9 11 / 0.05);
}

:root[data-theme="dark"] .side-link:hover {
    background: rgb(255 255 255 / 0.05);
}


/* Current item — pale fuchsia pill with brand-hued label + icon (mockup style). */

.side-link.is-current {
    background: rgb(var(--color-brand-light));
    color: rgb(var(--color-brand));
    font-weight: 600;
}

.side-link.is-current .hi {
    color: rgb(var(--color-brand));
}

:root[data-theme="dark"] .side-link.is-current {
    color: rgb(240 171 252);
}

:root[data-theme="dark"] .side-link.is-current .hi {
    color: rgb(240 171 252);
}


/* Plain (non-collapsible) sidebar section heading — used by the partner nav.
   Matches the mockup's uppercase group label; the admin nav uses the
   collapsible `.nav-group > summary` variant instead. */

.nav-heading {
    padding: 1rem 0.5rem 0.25rem;
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--color-muted));
}


/* Day/night theme toggle — a small icon button; shows a moon in light mode
   (click → dark) and a sun in dark mode (click → light). */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 0.5rem;
    color: rgb(var(--color-muted));
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.theme-toggle:hover {
    background: rgb(9 9 11 / 0.05);
    color: rgb(var(--color-ink));
}

:root[data-theme="dark"] .theme-toggle:hover {
    background: rgb(255 255 255 / 0.06);
}

.theme-toggle .theme-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-sun {
    display: inline-flex;
}


/* Sidebar brand mark — small fuchsia rounded square with the product initial. */

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 0.5rem;
    background: rgb(var(--color-brand));
    color: rgb(var(--color-brand-fg));
    font-size: 0.875rem;
    font-weight: 700;
}


/* The mark carrying the real logo. The artwork is a tile in its own right —
   its own ground, its own corners — so the brand fill underneath it would only
   show as a fringe; the box (size, radius, no-shrink) is all that is kept. */

.brand-mark-logo {
    background: none;
    overflow: hidden;
}

.brand-mark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}


/* Avatar (Catalyst) ---------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9999px;
    /* mockup avatars are circular */
    background: rgb(228 228 231);
    /* zinc-200 — neutral, not the brand hue */
    color: rgb(63 63 70);
    /* zinc-700 */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(9 9 11 / 0.06);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:root[data-theme="dark"] .avatar {
    background: rgb(63 63 70);
    color: rgb(228 228 231);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
}


/* Description list (Catalyst) ------------------------------------------ */

dl.desc-list {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    column-gap: 1.5rem;
    font-size: 0.875rem;
}

dl.desc-list>dt {
    color: rgb(var(--color-muted));
    padding: 0.625rem 0;
    border-top: 1px solid rgb(9 9 11 / 0.06);
}

dl.desc-list>dd {
    padding: 0.625rem 0;
    border-top: 1px solid rgb(9 9 11 / 0.06);
    min-width: 0;
    word-break: break-word;
}

dl.desc-list>dt:first-of-type,
dl.desc-list>dd:first-of-type {
    border-top: 0;
}

:root[data-theme="dark"] dl.desc-list>dt,
 :root[data-theme="dark"] dl.desc-list>dd {
    border-top-color: rgb(255 255 255 / 0.08);
}


/* Image cropper modal (Catalyst dialog) --------------------------------- */

.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.6);
    padding: 1rem;
}

.crop-modal {
    width: 100%;
    max-width: 28rem;
    background: rgb(var(--color-surface));
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.45);
    outline: 1px solid rgb(9 9 11 / 0.08);
}

:root[data-theme="dark"] .crop-modal {
    outline-color: rgb(255 255 255 / 0.10);
}

.crop-stage {
    max-height: 60vh;
}

.crop-stage img {
    display: block;
    max-width: 100%;
}

.crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}


/* OTP input ------------------------------------------------------------ */

.otp-input {
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    padding-left: 0.5em;
    /* offset the trailing letter-spacing so text looks centered */
}


/* Skeleton (loading) --------------------------------------------------- */

.skeleton {
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

:root[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #27272a 25%, #3f3f46 37%, #27272a 63%);
    background-size: 400% 100%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}


/* Toasts --------------------------------------------------------------- */

.toast-host {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
    max-width: 90vw;
}

.toast {
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: #18181b;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.18);
    cursor: pointer;
}

.toast-success {
    background: #067647;
}

.toast-danger {
    background: #b42318;
}

.toast-warning {
    background: #b54708;
}

.toast-info {
    background: #175cd3;
}


/* Needs-attention / KPI tiles ----------------------------------------- */

.stat-tile {
    display: block;
    position: relative;
    background: rgb(var(--color-surface));
    border: 1px solid rgb(9 9 11 / 0.06);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem 0.85rem 1.1rem;
    text-decoration: none;
    color: rgb(var(--color-ink));
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}

:root[data-theme="dark"] .stat-tile {
    border-color: rgb(255 255 255 / 0.10);
}

a.stat-tile:hover {
    border-color: rgb(9 9 11 / 0.18);
    box-shadow: 0 6px 20px -14px rgba(15, 23, 42, 0.35);
}

a.stat-tile:active {
    transform: translateY(1px);
}

.stat-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--color-muted));
}

.stat-tile.stat-success::before,
.stat-tile.stat-ok::before {
    background: #16a34a;
}

.stat-tile.stat-warning::before {
    background: #d97706;
}

.stat-tile.stat-danger::before {
    background: #dc2626;
}

.stat-tile.stat-info::before {
    background: #2563eb;
}

.stat-n {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-lbl {
    display: block;
    font-size: 0.8rem;
    color: rgb(var(--color-muted));
    margin-top: 0.15rem;
}


/* Quick-action tile (v2 mockup) — a soft-card link with a pale-fuchsia icon
   square, used on the dashboards. */

.quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    background: rgb(var(--color-surface));
    padding: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.05);
    outline: 1px solid rgb(9 9 11 / 0.05);
    transition: box-shadow 0.15s;
}

.quick-action:hover {
    box-shadow: 0 4px 6px -1px rgb(9 9 11 / 0.10), 0 2px 4px -2px rgb(9 9 11 / 0.10);
}

:root[data-theme="dark"] .quick-action {
    outline-color: rgb(255 255 255 / 0.10);
}

.quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 0.375rem;
    background: rgb(var(--color-brand-light));
    color: rgb(var(--color-brand));
}

.quick-action-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--color-ink));
}

.quick-action-sub {
    display: block;
    font-size: 0.75rem;
    color: rgb(var(--color-muted));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* KPI card (v2 mockup statGrid) — a clean stat card (no severity stripe), large
   tracking-tight number, muted label with an optional drill-in chevron. */

.kpi-card {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    background: rgb(var(--color-surface));
    padding: 1.25rem 1rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(9 9 11 / 0.05);
    outline: 1px solid rgb(9 9 11 / 0.05);
    transition: box-shadow 0.15s;
}

:root[data-theme="dark"] .kpi-card {
    outline-color: rgb(255 255 255 / 0.10);
}

a.kpi-card:hover {
    box-shadow: 0 4px 6px -1px rgb(9 9 11 / 0.10), 0 2px 4px -2px rgb(9 9 11 / 0.10);
}

.kpi-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-muted));
}

.kpi-label .hi {
    color: rgb(var(--color-line));
    transition: color 0.12s;
}

a.kpi-card:hover .kpi-label .hi {
    color: rgb(var(--color-muted));
}

.kpi-n {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(var(--color-ink));
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgb(var(--color-muted));
}


/* Page header ---------------------------------------------------------- */

.page-header {
    margin-bottom: 1.25rem;
}


/* Bordered header with a right-aligned actions slot (v2 mockup). Use as:
   <div class="page-head"><div class="page-head-titles">…title/subtitle…</div>
   <div class="page-head-actions">…buttons…</div></div> */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(9 9 11 / 0.08);
}

:root[data-theme="dark"] .page-head {
    border-bottom-color: rgb(255 255 255 / 0.10);
}

.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* Filter tab bar (v2 mockup) — underline tabs with an optional count pill. */

.tabs {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgb(9 9 11 / 0.10);
    margin-bottom: 1rem;
}

:root[data-theme="dark"] .tabs {
    border-bottom-color: rgb(255 255 255 / 0.10);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -1px;
    padding: 0.75rem 0.25rem;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgb(var(--color-muted));
    text-decoration: none;
    transition: color 0.12s, border-color 0.12s;
}

.tab:hover {
    color: rgb(var(--color-ink));
    border-bottom-color: rgb(9 9 11 / 0.20);
}

.tab.is-active {
    color: rgb(var(--color-ink));
    border-bottom-color: rgb(var(--color-ink));
}

/* A "how many" pill trailing a tab label or a section heading. */
.count {
    border-radius: 9999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgb(9 9 11 / 0.06);
    color: rgb(var(--color-muted));
}

.tab.is-active .count {
    background: rgb(9 9 11 / 0.12);
    color: rgb(var(--color-ink));
}

:root[data-theme="dark"] .tab:hover {
    border-bottom-color: rgb(255 255 255 / 0.20);
}

:root[data-theme="dark"] .count {
    background: rgb(255 255 255 / 0.08);
}

:root[data-theme="dark"] .tab.is-active .count {
    background: rgb(255 255 255 / 0.16);
}


/* Table card (v2 mockup) — a bordered, rounded panel wrapping a `.table`, with a
   tinted uppercase header row and horizontal scroll on small screens. */

.table-card {
    border: 1px solid rgb(9 9 11 / 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgb(var(--color-surface));
}

:root[data-theme="dark"] .table-card {
    border-color: rgb(255 255 255 / 0.10);
}

.table-card>.table-scroll {
    overflow-x: auto;
}

.table-card .table thead th {
    background: rgb(9 9 11 / 0.025);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    padding: 0.625rem 1rem;
}

.table-card .table tbody td {
    padding: 0.75rem 1rem;
}

.table-card .table thead th:first-child,
.table-card .table tbody td:first-child {
    padding-left: 1.5rem;
}

.table-card .table thead th:last-child,
.table-card .table tbody td:last-child {
    padding-right: 1.5rem;
}

.table-card .table tbody tr:hover td {
    background: rgb(9 9 11 / 0.02);
}

:root[data-theme="dark"] .table-card .table thead th {
    background: rgb(255 255 255 / 0.03);
}

:root[data-theme="dark"] .table-card .table tbody tr:hover td {
    background: rgb(255 255 255 / 0.03);
}


/* Pill badge — fully-rounded uppercase micro-label for table status cells. */

.badge-pill {
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.page-back {
    font-size: 0.8125rem;
    color: rgb(var(--color-muted));
    text-decoration: none;
}

.page-back:hover {
    color: rgb(var(--color-ink));
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0.15rem 0 0;
}

/* Sidebar nav groups (collapsible <details>, used by the admin shell) --- */

.nav-group {
    margin-bottom: 0.15rem;
}

.nav-group>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--color-muted));
    border-radius: 0.5rem;
}

.nav-group>summary::-webkit-details-marker {
    display: none;
}

.nav-group>summary:hover {
    color: rgb(var(--color-ink));
}

.nav-group>summary::after {
    content: "›";
    margin-left: auto;
    transition: transform 0.15s;
    font-size: 0.9rem;
}

.nav-group[open]>summary::after {
    transform: rotate(90deg);
}

.nav-group .nav-items {
    padding: 0.1rem 0 0.35rem;
}


/* ---------------------------------------------------------------------------
   Superadmin rail — deliberately dark in BOTH themes.

   A superadmin usually also operates their own organization, so the two
   consoles are one login apart and the pages themselves look alike. Acting on
   the whole platform while believing you are in your own org is the expensive
   mistake, so "which console am I in?" has to be answerable from peripheral
   vision, before reading a single label. The rail is the one element always on
   screen, so it carries the signal.

   It works by redefining the palette variables on the container rather than
   restyling each child: every `.side-link` rule AND every Tailwind colour
   utility inside resolves through these same variables (see
   js/tailwind.config.js), so the whole rail flips from one block. That is also
   why the rail's own background comes from a `bg-app` / `bg-surface` utility in
   the template rather than a `background` here — no specificity fight with
   Tailwind, and the mobile slide-over keeps its rounded corners.
   --------------------------------------------------------------------------- */

.rail-admin {
    /* #FBDC1A. Deliberately the loudest surface in the product and *identical in
       both themes* — a superadmin usually also operates their own org, and the
       whole point of the rail is that you can never be a glance away from
       knowing which console you are in. There is no dark-theme variant on
       purpose: a yellow that dims is a yellow you stop noticing.

       The ink/muted/line values below are a dark warm set chosen for this
       background, not the default palette: on #FBDC1A the ink reads 13.3:1 and
       the muted 4.9:1 (both clear AA), where the near-white the rail used to
       carry would be about 1.2:1 — invisible. */
    --color-app: 251 220 26;
    --color-surface: 245 212 10;
    --color-ink: 26 21 3;
    --color-muted: 107 91 7;
    --color-line: 201 174 16;
    /* The current-item pill inverts: near-black chip, yellow label (11:1). A
       pale pill on a pale yellow rail marks nothing. */
    --color-brand-light: 46 38 4;
    /* Native form controls inside the rail — a light surface now. */
    color-scheme: light;
    /* The nav scrolls, and the default scrollbar is a grey stripe with a grey
       track — the one part of the rail that would not be yellow. Both of these
       inherit, so setting them here covers whichever descendant does the
       scrolling. Firefox and modern Chrome read these; the WebKit rules below
       are the same treatment for the browsers that don't. */
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 0.28) transparent;
}

/* A transparent track lets the rail's own yellow through, and the thumb is the
   same dark wash the hovers use, so nothing here introduces a fourth colour. */

.rail-admin::-webkit-scrollbar,
.rail-admin ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.rail-admin::-webkit-scrollbar-track,
.rail-admin ::-webkit-scrollbar-track {
    background: transparent;
}

.rail-admin::-webkit-scrollbar-thumb,
.rail-admin ::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 0.28);
    border-radius: 9999px;
    /* Inset the thumb without narrowing the hit area it is drawn in. */
    border: 3px solid transparent;
    background-clip: content-box;
}

.rail-admin::-webkit-scrollbar-thumb:hover,
.rail-admin ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 0.45);
}

.rail-admin::-webkit-scrollbar-corner,
.rail-admin ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Hovers are authored against the *page's* surface, so they have to be restated
   for the rail: a dark wash on the yellow, in both themes (the `dark:hover:*`
   variants would otherwise put a white wash on it). Matched on the attribute so
   the Tailwind class name needs no escaping. */
.rail-admin .side-link:hover,
:root[data-theme="dark"] .rail-admin .side-link:hover,
.rail-admin [class*="hover:bg-white/5"]:hover,
.rail-admin [class*="hover:bg-black/5"]:hover {
    background-color: rgb(0 0 0 / 0.08);
}

.rail-admin [class*="ring-black/5"],
.rail-admin [class*="ring-white/10"] {
    --tw-ring-color: rgb(0 0 0 / 0.12);
}

/* The current item: the rail's own yellow, on the near-black pill. */
.rail-admin .side-link.is-current,
.rail-admin .side-link.is-current .hi {
    color: rgb(251 220 26);
}

/* The count pill on Dashboard is `bg-ink text-app` — which resolves to a
   near-black chip with yellow digits in here, and needs no override. The brand
   dot and the theme toggle inherit the ink/muted tokens above. */

/* Persona badge — the label half of the signal, for anyone who reads before
   they glance (and for a monochrome display, where the colour says nothing). */
.rail-persona {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 0.25rem;
    /* Solid near-black chip with the rail's yellow in it — the same inversion as
       the current-item pill, so the word and the colour make one signal. A
       translucent brand tint disappeared into the yellow. */
    background: rgb(26 21 3);
    padding: 0.05rem 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(251 220 26);
}

/* Google Places renders its suggestion list into <body> (.pac-container), out of
   reach of the venue markup — so hiding it in Manual mode is a rule about the
   body, stamped by venue_picker.js. Manual means "I'll state the venue myself";
   a Maps dropdown over that box offers to fill the very field the mode says the
   operator is filling, and picking from it fills a URL Manual mode has just
   cleared. */
body[data-venue-mode="manual"] .pac-container {
    display: none !important;
}

/* Rendered Markdown (richtext_extra.render_markdown). Tailwind's reset strips
   list markers and heading sizes, so a description saved with bullets rendered
   as an unindented run of lines — the markup was right and nothing showed it.
   Scoped to this class so it can never restyle the console's own lists. */
.richtext-content > *:first-child {
    margin-top: 0;
}

.richtext-content > *:last-child {
    margin-bottom: 0;
}

.richtext-content p,
.richtext-content ul,
.richtext-content ol {
    margin: 0.5em 0;
}

.richtext-content h2 {
    margin: 0.75em 0 0.35em;
    font-size: 1.05em;
    font-weight: 600;
    color: rgb(var(--color-ink));
}

.richtext-content ul,
.richtext-content ol {
    padding-left: 1.35em;
}

.richtext-content ul {
    list-style: disc;
}

.richtext-content ol {
    list-style: decimal;
}

.richtext-content li {
    margin: 0.15em 0;
}

.richtext-content strong {
    font-weight: 600;
    color: rgb(var(--color-ink));
}

.richtext-content em {
    font-style: italic;
}

.richtext-content a {
    text-decoration: underline;
}