/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  OrbitingFox UI System  |  static/css/orbitingfox-ui.css
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  FOR FUTURE AI AGENTS AND DEVELOPERS — READ THIS BEFORE ADDING ANY CSS
 *
 *  This file is the single source of truth for the OrbitingFox design system.
 *  The full spec lives in  docs/design/DESIGN.md  (also browsable at
 *  /adminapp/docs/). The rules are also stated in CLAUDE.md.
 *
 *  Before you add a class or a colour, run:
 *      python manage.py design_audit
 *  It lists every `of-*` class that already exists and where it is defined,
 *  so you never have to guess. Adding a duplicate is how this file reached
 *  5,800 lines.
 *
 *  THE FIVE RULES
 *  1. Colours, radii, shadows, spacing, type sizes come from `:root` tokens.
 *     Never write a raw hex in a rule body or a template.
 *  2. Buttons are `of-button` + `of-button-*`. There is no `of-btn`.
 *  3. Bootstrap is for LAYOUT ONLY (d-flex, gap-2, col-md-6). Never use it
 *     for colour (btn-primary, bg-success, text-muted on themed elements).
 *  4. No inline `style="..."` in templates. No `!important`.
 *  5. Admins retune colours at /adminapp/appearance/ — so every colour must
 *     resolve through a token, or their theme will not reach it.
 *
 *  CASCADE ORDER MATTERS — sections are ordered deliberately:
 *      tokens → component primitives → page/feature CSS → utilities
 *  Component primitives sit early so feature CSS can override them.
 *  Utilities sit LAST so a utility class always wins.
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *   1. Design tokens (:root)
 *   2. Design system — component primitives
 *   3. Reset & base (html, body, a)
 *   4. Header, navigation, brand, avatar, dropdowns
 *   5. Messages, main shell, page shell, footer, toast
 *   6. Homepage — hero, cosmos, metrics, orbit preview
 *   7. Public content — cards, concepts, story, workflow
 *   8. About page
 *   9. Forms, auth, fields
 *  10. Hub and app menu
 *  11. Blink panels and summary
 *  12. Calendar
 *  13. Kanban / Focus Board
 *  14. Blink form
 *  15. Orbit Ahead
 *  16. RAG, ops, and file tables
 *  17. Global top-right controls
 *  18. Nine-dot app launcher panel
 *  19. Simplified homepage
 *  20. Public content pages
 *  21. Responsive overrides
 *  22. File management (of-fm-*)
 *  23. Admin manual (of-am-*)
 *  24. Design system — utilities  ← always last, so utilities win
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ==========================================================================
   1. DESIGN TOKENS
   The single source of truth for every visual decision. Admin-editable
   colours are re-declared as a second :root block in templates/base.html
   from SiteAppearanceSettings — see docs/design/DESIGN.md.
   ========================================================================== */

:root {
    --of-bg: #f5efe3;
    --of-bg-deep: #e8decc;
    /* Added 2026-08-17 (theme layer). The body background is a 3-stop gradient
       plus two radial glows; its middle/end stops and both glow colours used to be
       hardcoded light values, so a dark theme could not reach the single largest
       surface on the page. These carry the EXACT previous values, so nothing moved
       visually — they exist so an admin theme can override them. */
    --of-bg-mid: #f4ede0;
    --of-bg-end: #ede5d7;
    --of-glow-warm: rgba(255, 225, 190, 0.65);
    --of-glow-cool: rgba(29, 86, 96, 0.16);
    --of-surface: rgba(255, 252, 245, 0.88);
    --of-surface-strong: #fffdf8;
    --of-ink: #1f1a17;
    --of-muted: #695f53;
    --of-line: rgba(79, 61, 38, 0.14);
    --of-brand: #1d5660;
    --of-brand-strong: #123942;
    --of-accent: #df7a2f;
    --of-accent-soft: #f6d8bd;
    --of-star: #f4cf78;
    --of-success: #2f6d59;
    --of-danger: #a13f35;
    /* Added 2026-08-17: the palette had success and danger but no warning or
       info, so templates reached for Tailwind's amber (#F59E0B, #B45309) and
       blue directly. These give those states a token to resolve through. */
    --of-warning: #b45309;
    --of-warning-soft: #fdf6e7;
    --of-info: #128279;
    /* ─── PAIRED FOREGROUNDS ("on-" colours) ────────────────────────────────
       Added 2026-08-17. A filled button cannot hardcode `color: #fff`: white on
       the shipped accent (#df7a2f) is only 3.02:1, below the 4.5:1 a text label
       needs, so the label was hard to read on the DEFAULT palette — and a theme
       could make it far worse. Every fill colour therefore names the foreground
       that is legible on it, the way mature design systems pair primary with
       on-primary. Themes set these per palette; adminapp/services/theming.py
       measures them and a test fails the build if any pair drops below WCAG AA. */
    --of-on-accent: #111111;
    --of-on-brand: #ffffff;
    --of-on-danger: #ffffff;
    --of-on-success: #ffffff;
    /* Accent used as TEXT needs more contrast than accent used as a fill. Keeping
       them separate means the brand orange stays exactly as it is for fills,
       borders and glows while accented text remains readable. */
    --of-accent-ink: #a75c23;
    --of-brand-ink: #1d5660;
    --of-success-ink: #2f6d59;
    --of-danger-ink: #a13f35;
    --of-warning-ink: #b45309;
    --of-info-ink: #128279;
    --of-shadow-sm: 0 16px 34px rgba(23, 18, 10, 0.08);
    --of-shadow-lg: 0 28px 70px rgba(23, 18, 10, 0.14);
    --of-radius-sm: 14px;
    --of-radius-md: 22px;
    --of-radius-lg: 34px;
    --of-space-1: 0.35rem;
    --of-space-2: 0.65rem;
    --of-space-3: 1rem;
    --of-space-4: 1.5rem;
    --of-space-5: 2rem;
    --of-space-6: 3rem;
    --of-blink: #2f6d95;
    --of-goals: #a96a1c;
    --of-projects: #367b58;
    --of-business: #8a4d37;
    --of-finance: #2c7b7b;
    --of-files: #4265a8;
    --of-microsites: #6a5a9a;
    --of-rag: #b26a2c;
    /* KNOWN CONFLICT (2026-08-17) — four of the module tokens above disagree with
       the hex values the templates actually ship, so the same module renders two
       different colours in different places:
           blink     token #2f6d95   templates ship #0D6EFD (54x)
           goals     token #a96a1c   templates ship #B76E00 (47x)
           projects  token #367b58   templates ship #0F7B46 (51x)
           business  token #8a4d37   templates ship #6A00B9 (45x — a different hue)
       The token values are NOT changed here because they are also consumed inside
       this file (var(--of-blink) 13x, var(--of-projects) 11x — Calendar events,
       Blink summary cards, app-launcher accents), so retuning them shifts pixels.
       Reconciliation is a separate, visually-verified change. Until then: use the
       token, and do not add new raw hexes for these modules.
       See docs/design/DESIGN.md § Module colours. */
    --of-orbitcards: #5B6AF5;
    --of-sticky-offset: 7.75rem;

    /* ─── TYPOGRAPHY SCALE ──────────────────────────────────────────────────
       Derived from the 57 distinct font-size values already in this file,
       clustered by frequency — not invented. The most-used value in each
       cluster becomes the token, so adopting a token is a near no-op.
       Existing declarations are intentionally NOT rewritten in bulk; they are
       converted per-module as each module is migrated and visually checked. */
    --of-text-2xs: 0.72rem;   /* 0.70–0.74rem cluster — 21 uses */
    --of-text-xs: 0.78rem;    /* 0.75–0.78rem cluster — 33 uses (most common) */
    --of-text-sm: 0.85rem;    /* 0.80–0.88rem cluster — 44 uses */
    --of-text-md: 0.92rem;    /* 0.90–0.98rem cluster — 32 uses */
    --of-text-base: 1rem;     /* body copy */
    --of-text-lg: 1.1rem;     /* 1.05–1.2rem cluster — card/panel titles */
    --of-text-xl: 1.4rem;     /* 1.28–1.5rem cluster — section headings */
    --of-text-2xl: 1.9rem;    /* 1.7–2.1rem cluster — page headings */
    --of-text-hero: clamp(2rem, 4vw, 3rem);
    --of-text-display: clamp(2.4rem, 5vw, 4.6rem);

    /* ─── FONT WEIGHT ───────────────────────────────────────────────────── */
    --of-weight-normal: 400;
    --of-weight-medium: 500;
    --of-weight-semibold: 600;
    --of-weight-bold: 700;

    /* ─── LINE HEIGHT ───────────────────────────────────────────────────── */
    --of-leading-tight: 1.2;
    --of-leading-snug: 1.4;
    --of-leading-normal: 1.6;
    --of-leading-loose: 1.8;

    /* ─── LETTER SPACING ────────────────────────────────────────────────── */
    --of-tracking-tight: -0.01em;
    --of-tracking-normal: 0em;
    --of-tracking-wide: 0.05em;
    --of-tracking-wider: 0.1em;

    /* ─── BORDERS ───────────────────────────────────────────────────────── */
    --of-border-thin: 1px solid var(--of-line);
    --of-border-medium: 2px solid var(--of-line);
    --of-border-accent: 1px solid color-mix(in srgb, var(--of-accent) 30%, transparent);

    /* ─── RADIUS (small end — --of-radius-sm/md/lg above are 14/22/34px) ─── */
    --of-radius-xs: 8px;
    --of-radius-pill: 999px;

    /* ─── TRANSITIONS ───────────────────────────────────────────────────── */
    --of-transition-fast: 150ms ease;
    --of-transition-normal: 250ms ease;
    --of-transition-slow: 400ms ease;

    /* ─── Z-INDEX SCALE ─────────────────────────────────────────────────────
       Documents the layers this file already uses: .of-header sits at 1040 and
       .of-verify-banner at 1045, so sticky is pinned there rather than renamed. */
    --of-z-base: 0;
    --of-z-raised: 10;
    --of-z-sticky: 1040;
    --of-z-overlay: 1050;
    --of-z-modal: 1060;
    --of-z-toast: 1080;

    /* ─── BREAKPOINTS ───────────────────────────────────────────────────────
       Reference values matching the breakpoints already used in this file and
       documented in docs/ops/AI-OPERATIONS-HANDBOOK.md. Note: CSS custom
       properties cannot be used inside @media queries — these exist so the
       numbers are stated once and can be read by tooling and templates. */
    --of-bp-xs: 480px;
    --of-bp-sm: 576px;
    --of-bp-md: 768px;
    --of-bp-lg: 992px;
    --of-bp-xl: 1200px;
}

/* ==========================================================================
   2. DESIGN SYSTEM — COMPONENT PRIMITIVES
   Generic building blocks. Deliberately placed EARLY so the page- and
   feature-specific CSS further down this file can still override them.
   Browse these rendered live at /adminapp/design-system/.
   ========================================================================== */

/* ─── Page accent scopes ────────────────────────────────────────────────────
   Put one of these on <body> (via {% block body_class %}) and the whole page
   picks up the module's colour through --of-accent. One class, whole page. */
.of-page-blink      { --of-accent: var(--of-blink); }
.of-page-goals      { --of-accent: var(--of-goals); }
.of-page-projects   { --of-accent: var(--of-projects); }
.of-page-business   { --of-accent: var(--of-business); }
.of-page-finance    { --of-accent: var(--of-finance); }
.of-page-files      { --of-accent: var(--of-files); }
.of-page-microsites { --of-accent: var(--of-microsites); }
.of-page-rag        { --of-accent: var(--of-rag); }
.of-page-orbitcards { --of-accent: var(--of-orbitcards); }
/* Dev Hub is an ops surface, not a product module: it reuses the platform brand
   rather than introducing a fifteenth module colour (2026-08-23, backlog §0b). */
.of-page-devhub     { --of-accent: var(--of-brand); }

/* ─── Card ──────────────────────────────────────────────────────────────────
   The generic surface. Domain cards (.of-fm-file-card, .of-metric-card, …)
   predate this and are unchanged; new work should start from .of-card. */
.of-card {
    background: var(--of-surface-strong);
    border: var(--of-border-thin);
    border-radius: var(--of-radius-sm);
    box-shadow: var(--of-shadow-sm);
    padding: var(--of-space-4);
}

.of-card-flush { padding: 0; overflow: hidden; }

.of-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--of-space-2);
    margin-bottom: var(--of-space-3);
}

.of-card-accent { border-top: 3px solid var(--of-accent); }

/* ─── Detail page blocks ────────────────────────────────────────────────── */
.of-detail-card {
    background: var(--of-surface-strong);
    border: var(--of-border-thin);
    border-left: 3px solid var(--of-accent);
    border-radius: var(--of-radius-sm);
    box-shadow: var(--of-shadow-sm);
    padding: var(--of-space-4);
}

.of-detail-section { margin-bottom: var(--of-space-4); }

.of-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    color: var(--of-muted);
    font-size: var(--of-text-sm);
}

.of-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    align-items: center;
}

.of-detail-empty {
    color: var(--of-muted);
    font-size: var(--of-text-sm);
    font-style: italic;
}

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.of-form-card {
    background: var(--of-surface-strong);
    border: var(--of-border-thin);
    border-radius: var(--of-radius-sm);
    box-shadow: var(--of-shadow-sm);
    padding: var(--of-space-4);
}

.of-form-group { margin-bottom: var(--of-space-3); }

.of-form-label {
    display: block;
    margin-bottom: var(--of-space-1);
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    color: var(--of-ink);
}

.of-form-hint {
    display: block;
    margin-top: var(--of-space-1);
    font-size: var(--of-text-xs);
    color: var(--of-muted);
}

.of-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    margin-top: var(--of-space-4);
}

/* ─── Data table ────────────────────────────────────────────────────────── */
.of-data-table-wrap {
    overflow-x: auto;
    border-radius: var(--of-radius-sm);
    border: var(--of-border-thin);
}

.of-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--of-text-sm);
    background: var(--of-surface-strong);
}

.of-data-table th {
    text-align: left;
    padding: var(--of-space-2) var(--of-space-3);
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    letter-spacing: var(--of-tracking-wide);
    text-transform: uppercase;
    color: var(--of-muted);
    border-bottom: var(--of-border-thin);
    white-space: nowrap;
}

.of-data-table td {
    padding: var(--of-space-2) var(--of-space-3);
    border-bottom: var(--of-border-thin);
    vertical-align: middle;
}

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

/* ─── Button variants (extends .of-button above — there is no .of-btn) ──── */
.of-button-danger {
    background: var(--of-danger);
    border-color: var(--of-danger);
    color: var(--of-on-danger);
}

.of-button-danger:hover {
    background: color-mix(in srgb, var(--of-danger) 85%, black);
    color: var(--of-on-danger);
}

/* Flat accent fill. of-button-primary is a GRADIENT, so a template converting a
   flat `style="background:<module hex>"` button needs this instead to stay
   visually identical. Inside an of-page-<module> scope it takes that module's
   colour automatically. */
.of-button-accent {
    background: var(--of-accent);
    border-color: var(--of-accent);
    color: var(--of-on-accent);
}

.of-button-accent:hover {
    background: color-mix(in srgb, var(--of-accent) 88%, black);
    border-color: color-mix(in srgb, var(--of-accent) 88%, black);
    color: var(--of-on-accent);
}

.of-button-ghost {
    background: transparent;
    border-color: var(--of-line);
    color: var(--of-ink);
}

.of-button-ghost:hover { background: var(--of-bg); color: var(--of-ink); }

/* Back button — picks up the page accent, so one class works in every module
   when the page carries an .of-page-<module> body class. */
.of-button-back {
    background: color-mix(in srgb, var(--of-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--of-accent) 25%, transparent);
    color: var(--of-accent);
}

.of-button-back:hover {
    background: color-mix(in srgb, var(--of-accent) 18%, transparent);
    color: var(--of-accent);
}

/* Compact button for dense toolbars. */
.of-button-sm {
    min-height: 2.1rem;
    padding: 0.3rem 0.7rem;
    font-size: var(--of-text-xs);
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--of-sticky-offset);
}

body.of-site-body {
    min-height: 100vh;
    margin: 0;
    color: var(--of-ink);
    font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
    background:
        radial-gradient(circle at top left, var(--of-glow-warm), transparent 30%),
        radial-gradient(circle at right 12% top 10%, var(--of-glow-cool), transparent 28%),
    linear-gradient(180deg, var(--of-site-bg-override, #f8f3ea) 0%, var(--of-bg-mid) 55%, var(--of-bg-end) 100%);
}

body.of-site-body::before,
body.of-site-body::after {
    content: "";
    position: fixed;
    inset: auto;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(10px);
    z-index: -1;
}

body.of-site-body::before {
    top: 6rem;
    right: 3rem;
    width: 16rem;
    height: 16rem;
    background: rgba(223, 122, 47, 0.14);
}

body.of-site-body::after {
    bottom: 3rem;
    left: 1.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(29, 86, 96, 0.12);
}

a {
    color: inherit;
}

.of-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    padding: 1rem 0 0;
}

.of-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background: color-mix(in srgb, var(--of-top-navbar-bg-override, #fffbf4) 82%, transparent);
    box-shadow: var(--of-shadow-sm);
    backdrop-filter: blur(18px);
}

.of-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.of-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: transparent;
    color: #fffaf2;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.of-brand-mark-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.of-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.of-brand-name,
.of-home-title,
.of-section-heading,
.of-auth-title,
.of-auth-aside-title,
.of-footer-brand {
    font-family: "Fraunces", Georgia, serif;
}

.of-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.of-brand-tag {
    color: var(--of-muted);
    font-size: 0.85rem;
}

.of-nav-desktop {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.of-nav-links,
.of-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.of-nav-chip {
    min-height: 2.85rem;
}

.of-nav-link,
.of-mobile-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    color: var(--of-muted);
    text-decoration: none;
    font-weight: 500;
    border: 1px solid rgba(29, 86, 96, 0.08);
    background: rgba(255, 255, 255, 0.52);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.of-nav-link:hover,
.of-nav-link.active,
.of-mobile-nav-link:hover,
.of-mobile-nav-link.active {
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand-strong);
    transform: translateY(-1px);
}

.of-quiet-link {
    color: var(--of-brand-strong);
    text-decoration: none;
    font-weight: 600;
}

.of-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.85rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.of-button:hover {
    transform: translateY(-1px);
}

.of-button-primary {
    background: linear-gradient(135deg, var(--of-accent), #f1a55c);
    color: #22160d;
    box-shadow: 0 16px 28px rgba(223, 122, 47, 0.2);
}

.of-button-primary:hover {
    color: #22160d;
}

.of-button-secondary {
    border-color: rgba(29, 86, 96, 0.2);
    background: rgba(255, 255, 255, 0.6);
    color: var(--of-brand-strong);
}

.of-button-secondary:hover {
    color: var(--of-brand-strong);
}

.of-nav-chip-emphasis {
    box-shadow: 0 18px 32px rgba(223, 122, 47, 0.24);
}

.of-nav-toggle {
    border: 1px solid rgba(29, 86, 96, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--of-brand-strong);
    font-weight: 700;
    padding: 0.65rem 1rem;
}

.of-user-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.85rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    color: var(--of-ink);
    box-shadow: 0 10px 20px rgba(18, 57, 66, 0.08);
}

.of-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--of-brand), var(--of-brand-strong));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.of-avatar-image {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(29, 86, 96, 0.2);
}

.of-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.of-user-name {
    font-weight: 700;
}

.of-user-role {
    color: var(--of-muted);
    font-size: 0.75rem;
}

.of-back-link {
    font-weight: 700;
    border-color: rgba(29, 86, 96, 0.26);
    background: rgba(255, 255, 255, 0.88);
}

.of-copy-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(29, 86, 96, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--of-brand-strong);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.of-copy-icon-button:hover,
.of-copy-icon-button:focus-visible {
    transform: translateY(-1px);
    background: rgba(29, 86, 96, 0.08);
    border-color: rgba(29, 86, 96, 0.3);
    outline: none;
}

.dropdown-menu.of-dropdown-menu,
.offcanvas.of-nav-drawer {
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 1.25rem;
    background: rgba(255, 251, 244, 0.96);
    box-shadow: var(--of-shadow-lg);
}

.dropdown-menu.of-dropdown-menu {
    padding: 0.6rem;
    min-width: 15rem;
}

.of-dropdown-menu .dropdown-item {
    border-radius: 0.85rem;
    padding: 0.65rem 0.8rem;
}

/* BL-5.4 — the notification dropdown's items. These three rules replace inline
   styles that used to be repeated on every row of every page; the items are now
   fetched on first open, so they had to move out of base.html anyway. */
.of-notif-item { white-space: normal; font-size: 0.85rem; }
.of-notif-icon { flex-shrink: 0; }
.of-notif-when { font-size: 0.75rem; }

.of-dropdown-label {
    color: var(--of-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.45rem 0.8rem;
}

.of-nav-drawer {
    color: var(--of-ink);
}

.of-nav-drawer .offcanvas-header {
    border-bottom: 1px solid var(--of-line);
}

.of-mobile-nav {
    display: grid;
    gap: 0.6rem;
}

.of-mobile-section {
    padding-top: 1rem;
    border-top: 1px solid var(--of-line);
}

.of-mobile-label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--of-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.of-mobile-nav-link {
    justify-content: flex-start;
    width: 100%;
    border: 1px solid rgba(29, 86, 96, 0.1);
    background: rgba(255, 255, 255, 0.56);
}

.of-message-stack {
    margin-top: 1rem;
}

.of-alert {
    border: 0;
    border-radius: var(--of-radius-sm);
    box-shadow: var(--of-shadow-sm);
}

.of-main {
    padding: 1.4rem 0 3rem;
}

.of-page-shell {
    min-height: 60vh;
}

.of-footer {
    padding: 0 0 2.5rem;
}

.of-footer-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.6rem;
    background: rgba(255, 251, 244, 0.78);
    box-shadow: var(--of-shadow-sm);
}

.of-footer-brand {
    font-size: 1.1rem;
    font-weight: 700;
}

.of-footer-copy {
    color: var(--of-muted);
    font-size: 0.92rem;
}

.of-footer-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.of-footer-links a {
    color: var(--of-brand-strong);
    text-decoration: none;
    font-weight: 600;
}

.of-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    padding: 0.8rem 1rem;
    border-radius: 0.95rem;
    background: rgba(18, 57, 66, 0.94);
    color: #fff;
    box-shadow: var(--of-shadow-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.of-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.of-home-shell {
    display: grid;
    gap: 1.8rem;
}

@keyframes of-twinkle {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes of-orbit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes of-orbit-spin-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes of-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.45rem);
    }
}

@keyframes of-rise-in {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.of-home-hero,
.of-home-section,
.of-home-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: var(--of-radius-lg);
    background: linear-gradient(160deg, rgba(255, 252, 246, 0.95), rgba(245, 236, 222, 0.88));
    box-shadow: var(--of-shadow-lg);
}

.of-home-hero::after,
.of-home-cta::after {
    content: "";
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    right: -4rem;
    top: -5rem;
    background: rgba(223, 122, 47, 0.14);
}

.of-home-cosmos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.of-home-star,
.of-about-node {
    position: absolute;
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 250, 235, 0.98) 0%, var(--of-star) 58%, rgba(244, 207, 120, 0.12) 100%);
    box-shadow: 0 0 18px rgba(244, 207, 120, 0.56);
    animation: of-twinkle 2.9s ease-in-out infinite;
}

.of-home-star-1 {
    top: 1.5rem;
    left: 42%;
}

.of-home-star-2 {
    top: 5.1rem;
    right: 10%;
    animation-delay: 0.7s;
}

.of-home-star-3 {
    bottom: 2.4rem;
    left: 11%;
    animation-delay: 1.4s;
}

.of-home-copy {
    position: relative;
    z-index: 1;
}

.of-home-section-lead {
    max-width: 48rem;
    color: var(--of-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.of-home-eyebrow,
.of-auth-eyebrow,
.of-auth-chip,
.of-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand-strong);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-home-title {
    max-width: 13ch;
    margin: 1rem 0 1rem;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 0.95;
}

.of-home-lead,
.of-home-subcopy,
.of-auth-copy,
.of-auth-aside-copy {
    color: var(--of-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.of-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.of-home-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.8rem;
}

.of-metric-card,
.of-feature-card,
.of-step-card {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: var(--of-radius-md);
    background: rgba(255, 255, 255, 0.66);
}

.of-metric-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
}

.of-metric-label,
.of-feature-copy,
.of-step-copy {
    color: var(--of-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.of-preview-panel {
    position: relative;
    padding: 1.2rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(20, 49, 56, 0.95), rgba(15, 32, 36, 0.96));
    color: #f6eee1;
    box-shadow: 0 26px 54px rgba(15, 32, 36, 0.26);
}

.of-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: rgba(246, 238, 225, 0.72);
    font-size: 0.92rem;
}

.of-preview-header span:last-child {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(223, 122, 47, 0.22);
    color: #ffd9bd;
}

.of-orbit-board {
    position: relative;
    min-height: 22rem;
    margin-bottom: 1rem;
    border-radius: 1.7rem;
    background:
        radial-gradient(circle, rgba(223, 122, 47, 0.1) 0%, rgba(223, 122, 47, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.of-orbit-board::before,
.of-orbit-board::after {
    content: "";
    position: absolute;
    inset: 15% 18%;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    transform-origin: center;
    animation: of-orbit-spin 26s linear infinite;
}

.of-orbit-board::after {
    inset: 6% 8%;
    animation: of-orbit-spin-reverse 32s linear infinite;
}

.of-orbit-center,
.of-orbit-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1rem;
    border-radius: 1.15rem;
    font-weight: 700;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.18);
}

.of-orbit-center {
    top: 50%;
    left: 50%;
    min-width: 8rem;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ffd29e, #df7a2f);
    color: #2b170a;
}

.of-orbit-node {
    background: rgba(255, 255, 255, 0.08);
    color: #fff7ea;
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: of-float 6.5s ease-in-out infinite;
}

.of-orbit-node.node-1 { top: 8%; left: 18%; }
.of-orbit-node.node-2 {
    top: 18%;
    right: 10%;
    animation-delay: 0.8s;
}

.of-orbit-node.node-3 {
    right: 12%;
    bottom: 18%;
    animation-delay: 1.4s;
}

.of-orbit-node.node-4 {
    bottom: 10%;
    left: 12%;
    animation-delay: 2.1s;
}

.of-preview-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.of-preview-step {
    padding: 0.8rem 0.7rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
}

.of-preview-step strong {
    display: block;
    color: #ffd9bd;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.of-preview-step span {
    display: block;
    margin-top: 0.25rem;
    font-weight: 600;
}

.of-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.of-concept-grid,
.of-story-grid,
.of-about-definition-grid,
.of-about-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.of-concept-card,
.of-story-card,
.of-about-definition-card {
    position: relative;
    padding: 1.15rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: var(--of-radius-md);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 30px rgba(23, 18, 10, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    animation: of-rise-in 0.55s ease both;
}

.of-concept-card:hover,
.of-story-card:hover,
.of-about-definition-card:hover {
    transform: translateY(-0.22rem);
    border-color: rgba(29, 86, 96, 0.18);
    box-shadow: 0 18px 34px rgba(23, 18, 10, 0.1);
}

.of-concept-card:nth-child(2),
.of-story-card:nth-child(2),
.of-about-definition-card:nth-child(2) {
    animation-delay: 0.06s;
}

.of-concept-card:nth-child(3),
.of-story-card:nth-child(3),
.of-about-definition-card:nth-child(3) {
    animation-delay: 0.12s;
}

.of-concept-card:nth-child(4),
.of-story-card:nth-child(4) {
    animation-delay: 0.18s;
}

.of-concept-card:nth-child(5) {
    animation-delay: 0.24s;
}

.of-concept-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.8rem;
    border-radius: 999px;
    background: rgba(223, 122, 47, 0.14);
    color: var(--of-accent);
    font-size: 0.95rem;
    font-weight: 700;
}

.of-concept-label,
.of-story-kicker {
    display: inline-flex;
    margin-bottom: 0.65rem;
    color: var(--of-brand-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.of-phrase-card {
    height: 100%;
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: var(--of-radius-md);
    background: linear-gradient(150deg, rgba(255, 253, 249, 0.92), rgba(246, 236, 222, 0.88));
    box-shadow: 0 20px 40px rgba(23, 18, 10, 0.08);
}

.of-blink-phrase-section .of-story-grid {
    height: 100%;
    align-content: start;
}

.of-feature-title,
.of-step-title,
.of-section-heading {
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.of-workflow-strip {
    display: grid;
    gap: 1rem;
}

.of-workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.of-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.12);
    color: var(--of-brand-strong);
    font-weight: 700;
}

.of-home-cta-copy {
    max-width: 42rem;
}

.of-module-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.of-module-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    color: var(--of-brand-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.of-about-shell {
    display: grid;
    gap: 1.8rem;
}

.of-about-hero,
.of-about-section {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: var(--of-radius-lg);
    background: linear-gradient(160deg, rgba(255, 252, 246, 0.95), rgba(244, 236, 224, 0.9));
    box-shadow: var(--of-shadow-lg);
}

.of-about-orbits-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.of-about-orbit-ring {
    position: absolute;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 999px;
}

.of-about-orbit-ring--inner {
    top: 8%;
    right: 12%;
    width: 14rem;
    height: 14rem;
    animation: of-orbit-spin 24s linear infinite;
}

.of-about-orbit-ring--outer {
    top: -6%;
    right: 3%;
    width: 22rem;
    height: 22rem;
    animation: of-orbit-spin-reverse 36s linear infinite;
}

.of-about-node--goal {
    top: 20%;
    right: 17%;
}

.of-about-node--blink {
    top: 44%;
    right: 7%;
    animation-delay: 0.8s;
}

.of-about-node--task {
    bottom: 18%;
    right: 20%;
    animation-delay: 1.3s;
}

.of-about-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--of-muted);
    line-height: 1.8;
}

.of-about-list li + li {
    margin-top: 0.3rem;
}

.of-auth-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 16rem);
}

.of-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: 1.3rem;
    width: min(100%, 72rem);
}

.of-auth-card,
.of-auth-aside {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--of-radius-lg);
    box-shadow: var(--of-shadow-lg);
}

.of-auth-card {
    background: rgba(255, 253, 249, 0.92);
}

.of-auth-aside {
    background: linear-gradient(160deg, rgba(20, 49, 56, 0.96), rgba(35, 74, 82, 0.92));
    color: #fff5e8;
}

.of-auth-title {
    margin: 1rem 0 0.7rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.of-auth-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.6rem;
}

.of-field-group {
    display: grid;
    gap: 0.45rem;
}

.of-field-label {
    font-weight: 700;
}

.of-field-required {
    color: var(--of-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.of-auth-form input,
.of-auth-form select,
.of-auth-form textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(29, 86, 96, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--of-ink);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.of-auth-form input:focus,
.of-auth-form select:focus,
.of-auth-form textarea:focus {
    outline: none;
    border-color: rgba(29, 86, 96, 0.42);
    box-shadow: 0 0 0 4px rgba(29, 86, 96, 0.12);
}

/* Checkboxes (e.g. the Terms acceptance at signup) must NOT inherit the
   full-width pill styling above — they sit inline beside their label. */
.of-auth-form input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    padding: 0;
    margin: 0.18rem 0 0;
    border-radius: 0.35rem;
    accent-color: #1d5660;
    flex: 0 0 auto;
}

.of-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 500;
    cursor: pointer;
}

.of-checkbox-row a {
    font-weight: 700;
}

.of-field-group.has-errors input,
.of-field-group.has-errors select,
.of-field-group.has-errors textarea {
    border-color: rgba(161, 63, 53, 0.5);
    box-shadow: 0 0 0 4px rgba(161, 63, 53, 0.08);
}

.of-field-help,
.of-field-help ul,
.of-auth-meta,
.of-auth-form .helptext {
    color: var(--of-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.of-field-help ul,
.of-form-errors ul {
    margin: 0;
    padding-left: 1.15rem;
}

.of-field-error,
.of-form-errors {
    color: var(--of-danger);
    font-size: 0.92rem;
    line-height: 1.5;
}

.of-form-errors {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(161, 63, 53, 0.2);
    border-radius: 1rem;
    background: rgba(255, 240, 237, 0.9);
}

.of-auth-submit {
    margin-top: 0.4rem;
}

.of-auth-meta a {
    color: var(--of-brand-strong);
    font-weight: 700;
    text-decoration: none;
}

.of-auth-chip {
    background: rgba(255, 255, 255, 0.12);
    color: #ffe0c2;
}

.of-auth-aside-title {
    margin: 1rem 0 0.7rem;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.05;
}

.of-auth-checklist {
    display: grid;
    gap: 0.8rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.of-auth-checklist li {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
}

.of-auth-checklist strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #ffe0c2;
}

.of-dashboard-shell {
    display: grid;
    grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

body[data-show-side-navbar="false"] .of-dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
}

body[data-show-side-navbar="false"] .of-dashboard-shell > :first-child {
    display: none;
}

.of-dashboard-main,
.of-dashboard-stack {
    display: grid;
    gap: 1.2rem;
}

.of-panel,
.of-shell-panel,
.of-hub-hero,
.of-blink-hero,
.of-blink-entry,
.of-blink-panel {
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: var(--of-radius-lg);
    background: linear-gradient(160deg, rgba(255, 252, 246, 0.94), rgba(245, 236, 222, 0.88));
    box-shadow: var(--of-shadow-sm);
}

.of-panel,
.of-shell-panel,
.of-hub-hero,
.of-blink-hero,
.of-blink-entry,
.of-blink-panel {
    padding: 1.25rem;
}

.of-panel-title,
.of-hub-title,
.of-blink-title,
.of-blink-panel-title,
.of-app-menu-title,
.of-recent-title {
    font-family: "Fraunces", Georgia, serif;
}

.of-panel-kicker,
.of-app-menu-kicker,
.of-hub-kicker,
.of-blink-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-app-menu-card {
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: var(--of-radius-lg);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(244, 236, 225, 0.92));
    box-shadow: var(--of-shadow-sm);
    overflow: hidden;
}

.of-app-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.15rem 0.95rem;
}

.of-app-menu-title {
    margin: 0.4rem 0 0;
    font-size: 1.5rem;
}

.of-app-menu-copy {
    margin: 0.55rem 0 0;
    color: var(--of-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.of-app-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    min-height: 2.8rem;
    padding: 0;
    border: 1px solid rgba(29, 86, 96, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--of-brand-strong);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
}

.of-app-menu-body {
    padding: 0 1rem 1rem;
}

.of-app-menu-links {
    display: grid;
    gap: 0.8rem;
}

.of-app-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.9rem 0.95rem;
    border: 1px solid rgba(29, 86, 96, 0.1);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.of-app-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(23, 18, 10, 0.08);
    border-color: rgba(29, 86, 96, 0.2);
}

.of-app-link.is-active {
    border-color: color-mix(in srgb, var(--of-module-color, var(--of-brand)) 30%, white);
    background: color-mix(in srgb, var(--of-module-color, var(--of-brand)) 10%, white);
    box-shadow: 0 18px 32px rgba(23, 18, 10, 0.09);
}

.of-app-link.mod-hub { --of-module-color: var(--of-brand); }
.of-app-link.mod-blink { --of-module-color: var(--of-blink); }
.of-app-link.mod-goals { --of-module-color: var(--of-goals); }
.of-app-link.mod-projects { --of-module-color: var(--of-projects); }
.of-app-link.mod-business { --of-module-color: var(--of-business); }
.of-app-link.mod-finance { --of-module-color: var(--of-finance); }
.of-app-link.mod-files { --of-module-color: var(--of-files); }
.of-app-link.mod-microsites { --of-module-color: var(--of-microsites); }
.of-app-link.mod-rag { --of-module-color: var(--of-rag); }
.of-app-link.mod-admin { --of-module-color: #617086; }

.of-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--of-module-color, var(--of-brand)) 14%, white);
    color: var(--of-module-color, var(--of-brand));
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.of-app-copy {
    min-width: 0;
}

.of-app-name {
    display: block;
    color: var(--of-ink);
    font-weight: 700;
}

.of-app-detail {
    display: block;
    color: var(--of-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.of-app-state {
    color: var(--of-module-color, var(--of-brand));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-app-menu-divider {
    margin: 1rem 0 0.85rem;
    color: var(--of-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.of-hub-hero {
    position: relative;
    overflow: hidden;
}

.of-hub-hero::after,
.of-blink-hero::after,
.of-blink-entry::after {
    content: "";
    position: absolute;
    width: 14rem;
    height: 14rem;
    right: -4rem;
    top: -4rem;
    border-radius: 999px;
    background: rgba(223, 122, 47, 0.12);
    pointer-events: none;
}

.of-hub-copy,
.of-blink-copy {
    position: relative;
    z-index: 1;
}

.of-hub-title,
.of-blink-title {
    margin: 0.8rem 0 0.6rem;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 0.98;
}

.of-hub-lead,
.of-blink-lead,
.of-panel-copy,
.of-panel-note,
.of-recent-item-copy,
.of-recent-empty {
    color: var(--of-muted);
    line-height: 1.65;
}

.of-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.of-summary-grid,
.of-blink-summary-grid,
.of-recent-grid {
    display: grid;
    gap: 1rem;
}

.of-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.of-kanban-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.of-blink-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.of-summary-card,
.of-blink-summary-card,
.of-recent-panel,
.of-mini-panel {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: var(--of-radius-md);
    background: rgba(255, 255, 255, 0.7);
}

.of-recent-panel,
.of-mini-panel {
    min-width: 0;
}

.of-summary-card-value,
.of-blink-summary-value {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.of-summary-card-label,
.of-blink-summary-label {
    display: block;
    margin-top: 0.35rem;
    font-weight: 700;
}

.of-summary-card-note,
.of-blink-summary-note {
    display: block;
    margin-top: 0.35rem;
    color: var(--of-muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

.of-summary-card.mod-blink,
.of-blink-summary-card.mod-blink { color: var(--of-blink); }
.of-summary-card.mod-goals,
.of-blink-summary-card.mod-goals { color: var(--of-goals); }
.of-summary-card.mod-projects,
.of-blink-summary-card.mod-projects { color: var(--of-projects); }
.of-summary-card.mod-business,
.of-blink-summary-card.mod-business { color: var(--of-business); }
.of-summary-card.mod-files,
.of-blink-summary-card.mod-files { color: var(--of-files); }

.of-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.of-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.of-hub-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.of-hub-overview-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: var(--of-radius-md);
    background: rgba(255, 255, 255, 0.72);
    min-width: 0;
}

.of-hub-list,
.of-hub-side-stack {
    display: grid;
    gap: 0.9rem;
}

.of-recent-panel-head,
.of-blink-panel-head,
.of-blink-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.of-recent-title,
.of-blink-panel-title {
    margin: 0;
    font-size: 1.45rem;
}

.of-recent-subtitle,
.of-blink-panel-subtitle {
    color: var(--of-muted);
    font-size: 0.9rem;
}

.of-recent-list {
    display: grid;
    gap: 0.8rem;
}

.of-recent-item,
.of-blink-recent-item,
.of-hub-file-item {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.of-recent-item-top,
.of-hub-file-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.of-code-pill,
.of-mini-pill,
.of-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-recent-item-title,
.of-hub-file-title,
.of-blink-item-title {
    display: block;
    max-width: 100%;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.of-kanban-limit-note {
    color: var(--of-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.of-ui-summary-shell {
    display: grid;
    gap: 0.9rem;
}

.of-ui-summary-toggle {
    white-space: nowrap;
}

.of-calendar-prefill-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(47, 109, 149, 0.12);
    color: var(--of-blink);
    font-size: 0.84rem;
    font-weight: 700;
}

.of-calendar-month-panel,
.of-calendar-day-panel {
    display: grid;
    gap: 1rem;
}

.of-calendar-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.of-calendar-toolbar-actions {
    display: grid;
    gap: 0.8rem;
    justify-items: end;
}

.of-calendar-view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.of-calendar-view-switch .of-button {
    justify-content: center;
    min-width: 6.4rem;
}

.of-calendar-timezone-form {
    display: grid;
    gap: 0.35rem;
    width: min(100%, 24rem);
}

.of-calendar-timezone-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.of-calendar-timezone-controls .form-select {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.of-calendar-timezone-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    color: var(--of-muted);
    font-size: 0.9rem;
}

.of-calendar-list-view {
    display: grid;
    gap: 0.7rem;
}

.of-calendar-list-day {
    display: grid;
    grid-template-columns: minmax(7rem, 8.5rem) minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.of-calendar-list-day.is-today {
    border-color: rgba(47, 109, 149, 0.2);
    box-shadow: inset 0 0 0 1px rgba(47, 109, 149, 0.12);
}

.of-calendar-list-date-link {
    display: grid;
    gap: 0.15rem;
    color: var(--of-brand-strong);
    text-decoration: none;
}

.of-calendar-list-date-link span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--of-muted);
}

.of-calendar-list-date-link strong {
    font-size: 1.05rem;
}

.of-calendar-list-items {
    display: grid;
    gap: 0.45rem;
}

.of-calendar-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 0.85rem;
    background: rgba(250, 246, 239, 0.7);
    color: inherit;
    text-decoration: none;
}

.of-calendar-list-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.of-calendar-list-item-meta {
    color: var(--of-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.of-calendar-list-indicator {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.24);
}

.of-calendar-list-indicator.mod-task {
    background: var(--of-blink);
}

.of-calendar-list-indicator.mod-reminder {
    background: var(--of-accent);
}

.of-calendar-list-indicator.mod-event {
    background: var(--of-success);
}

.of-calendar-list-indicator.mod-both {
    background: var(--of-brand);
}

.of-calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.of-calendar-year-card {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.74);
}

.of-calendar-year-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.of-calendar-year-card-title {
    margin: 0;
    font-size: 1.05rem;
}

.of-calendar-year-card-title a {
    color: var(--of-brand-strong);
    text-decoration: none;
}

.of-calendar-year-weekdays,
.of-calendar-year-mini-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
}

.of-calendar-year-weekdays {
    color: var(--of-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-calendar-year-mini-grid {
    display: grid;
    gap: 0.3rem;
}

.of-calendar-year-day-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border: 1px solid rgba(29, 86, 96, 0.06);
    border-radius: 0.75rem;
    background: rgba(250, 246, 239, 0.7);
    font-size: 0.82rem;
    color: var(--of-brand-strong);
}

.of-calendar-year-day-cell.is-outside-month {
    color: rgba(31, 26, 23, 0.38);
    background: rgba(250, 246, 239, 0.4);
}

.of-calendar-year-day-cell.has-events {
    background: rgba(47, 109, 149, 0.12);
    border-color: rgba(47, 109, 149, 0.18);
}

.of-calendar-year-day-cell.is-today {
    border-color: rgba(223, 122, 47, 0.3);
    box-shadow: inset 0 0 0 1px rgba(223, 122, 47, 0.16);
}

.of-calendar-nav,
.of-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.of-calendar-legend-item,
.of-calendar-event-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.of-calendar-legend-item.mod-task,
.of-calendar-event-badge.mod-task {
    background: rgba(47, 109, 149, 0.12);
    color: var(--of-blink);
}

.of-calendar-legend-item.mod-reminder,
.of-calendar-event-badge.mod-reminder {
    background: rgba(223, 122, 47, 0.14);
    color: var(--of-accent);
}

.of-calendar-legend-item.mod-event,
.of-calendar-event-badge.mod-event {
    background: rgba(52, 143, 89, 0.14);
    color: var(--of-success);
}

.of-calendar-event-badge.mod-appointment {
    background: color-mix(in srgb, var(--of-projects) 14%, white);
    color: color-mix(in srgb, var(--of-projects) 75%, black);
}

.of-calendar-legend-item.mod-today {
    background: rgba(47, 109, 149, 0.08);
    color: var(--of-brand-strong);
    border: 1px solid rgba(47, 109, 149, 0.18);
}

/* 2026-07 redesign: the month grid REFLOWS instead of forcing horizontal scroll —
   minmax(0,1fr) tracks shrink to any viewport; chips collapse to dots on phones. */
.of-calendar-grid-shell {
    padding-bottom: 0.35rem;
}

.of-calendar-weekdays,
.of-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.55rem;
}

.of-calendar-weekdays {
    margin-bottom: 0.55rem;
}

.of-calendar-grid {
    display: grid;
    gap: 0.55rem;
}

.of-calendar-weekday {
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

.of-calendar-day {
    position: relative;
    display: grid;
    gap: 0.5rem;
    min-height: 7.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(29, 86, 96, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 28px rgba(18, 57, 66, 0.06);
    overflow: hidden;
}

.of-calendar-day > * {
    position: relative;
    z-index: 1;
}

.of-calendar-day:hover {
    border-color: rgba(29, 86, 96, 0.2);
    box-shadow: 0 18px 32px rgba(18, 57, 66, 0.1);
}

.of-calendar-day.is-outside-month {
    background: rgba(250, 246, 239, 0.72);
    color: rgba(31, 26, 23, 0.62);
}

.of-calendar-day.is-today {
    /* Report #72: make today clearly visible — a solid accent ring instead of the
       faint one. box-shadow (not border-width) so there is no layout shift. */
    border-color: var(--of-accent);
    box-shadow: inset 0 0 0 2px var(--of-accent), 0 18px 32px rgba(18, 57, 66, 0.08);
}

.of-calendar-day.is-today::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--of-blink), color-mix(in srgb, var(--of-accent) 60%, white));
}

.of-calendar-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}

.of-calendar-day-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.of-calendar-day-number-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-weight: 700;
    text-decoration: none;
}

.of-calendar-day-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(18, 57, 66, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.of-calendar-day-action.mod-add {
    background: rgba(47, 109, 149, 0.12);
    border-color: rgba(47, 109, 149, 0.18);
    color: var(--of-blink);
}

.of-calendar-day-action:hover,
.of-calendar-event-icon:hover,
.of-calendar-more-link:hover {
    transform: translateY(-1px);
}

.of-calendar-day-link,
.of-calendar-more-link {
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
}

.of-calendar-events {
    display: grid;
    gap: 0.28rem;
    align-content: flex-start;
    min-width: 0; /* chips may ellipsize instead of widening the track */
}

.of-calendar-day-list {
    display: grid;
    gap: 0.55rem;
}

.of-calendar-event-icon,
.of-calendar-day-item {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(18, 57, 66, 0.05);
}

.of-calendar-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.of-calendar-event-icon::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    background: currentColor;
    border-radius: 0.18rem;
}

.of-calendar-event-icon.mod-task {
    border-color: rgba(47, 109, 149, 0.22);
    background: rgba(47, 109, 149, 0.12);
    color: var(--of-blink);
}

.of-calendar-event-icon.mod-reminder {
    border-color: rgba(223, 122, 47, 0.24);
    background: rgba(223, 122, 47, 0.14);
    color: var(--of-accent);
}

.of-calendar-event-icon.mod-reminder::before {
    border-radius: 999px;
}

.of-calendar-event-icon.mod-event {
    border-color: rgba(52, 143, 89, 0.22);
    background: rgba(52, 143, 89, 0.12);
    color: var(--of-success);
}

.of-calendar-event-icon.mod-event::before {
    width: 0.72rem;
    height: 0.38rem;
    border-radius: 999px;
}

.of-calendar-event-icon.mod-both {
    border-color: rgba(29, 86, 96, 0.18);
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand);
}

.of-calendar-event-icon.mod-both::before {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 0.12rem;
    transform: rotate(45deg);
}

.of-calendar-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 0.76rem;
    line-height: 1;
}

.of-calendar-event-badges,
.of-calendar-day-meta,
.of-calendar-day-timestamps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.of-calendar-empty,
.of-calendar-day-empty {
    color: var(--of-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.of-calendar-day-empty {
    padding: 1rem;
    border: 1px dashed rgba(29, 86, 96, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.56);
}

.of-calendar-day-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.of-calendar-day-item {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
}

.of-calendar-day-timestamps {
    color: var(--of-muted);
    font-size: 0.88rem;
}

/* ══════════════ Calendar redesign 2026-07 (PR calendar-core) ══════════════
   Event CHIPS with readable titles (≥576px), collapsing to dots on phones;
   unified toolbar; week strip; star-gold goal chips; context menu; the
   mod-appointment color joins task/reminder/event as the 4th first-class type. */

.of-calendar-event {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.55rem;
    padding: 0.12rem 0.5rem 0.12rem 0.34rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.76rem;
    line-height: 1.25;
    text-decoration: none;
    color: var(--of-ink);
    overflow: hidden;
    white-space: nowrap;
}

.of-calendar-event:hover { filter: brightness(0.97); text-decoration: none; }

.of-calendar-event-dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
}

.of-calendar-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.of-calendar-event-bell {
    flex: 0 0 auto;
    font-size: 0.62rem;
    color: var(--of-accent);
}

.of-calendar-event.mod-task { background: rgba(47, 109, 149, 0.12); border-color: rgba(47, 109, 149, 0.22); color: #275a7c; }
.of-calendar-event.mod-reminder { background: color-mix(in srgb, var(--of-accent) 14%, white); border-color: color-mix(in srgb, var(--of-accent) 30%, white); color: color-mix(in srgb, var(--of-accent) 80%, black); }
.of-calendar-event.mod-event { background: rgba(47, 109, 89, 0.12); border-color: rgba(47, 109, 89, 0.24); color: #275c4b; }
.of-calendar-event.mod-appointment { background: color-mix(in srgb, var(--of-projects) 14%, white); border-color: color-mix(in srgb, var(--of-projects) 30%, white); color: color-mix(in srgb, var(--of-projects) 75%, black); }
.of-calendar-event.mod-both { background: rgba(29, 86, 96, 0.1); border-color: rgba(29, 86, 96, 0.2); color: var(--of-brand); }

.of-calendar-legend-item.mod-appointment::before { background: var(--of-projects); }

/* Star-gold goal chip — "which Star does this serve?" */
.of-star-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--of-star) 38%, white);
    border: 1px solid color-mix(in srgb, var(--of-star) 70%, white);
    color: #6b5316;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
}

/* Unified toolbar */
.of-calendar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.of-calendar-bar-left,
.of-calendar-bar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.of-calendar-nav-icons { display: inline-flex; gap: 0.3rem; }

.of-cal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 86, 96, 0.18);
    background: rgba(255, 255, 255, 0.85);
    color: var(--of-brand-strong);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.of-cal-icon-btn:hover { background: rgba(29, 86, 96, 0.08); color: var(--of-brand-strong); }
.of-cal-today-btn { color: var(--of-accent); border-color: color-mix(in srgb, var(--of-accent) 40%, white); }

.of-view-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 86, 96, 0.16);
    background: rgba(255, 255, 255, 0.8);
    color: var(--of-brand-strong);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    min-height: 2.75rem;
}

.of-view-pill:hover { background: rgba(29, 86, 96, 0.08); color: var(--of-brand-strong); }
.of-view-pill.is-active { background: var(--of-brand); border-color: var(--of-brand); color: #fffdf8; }

/* Per-day quick-add "+" (the previously-dead affordance, now real) */
.of-calendar-day-action.mod-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px dashed rgba(29, 86, 96, 0.3);
    background: transparent;
    color: var(--of-brand);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.of-calendar-day:hover .of-calendar-day-action.mod-add,
.of-calendar-week-day:hover .of-calendar-day-action.mod-add,
.of-calendar-day-action.mod-add:focus-visible { opacity: 1; }
.of-calendar-day-action.mod-add:hover { background: rgba(29, 86, 96, 0.08); }

/* Week strip */
.of-calendar-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: start;
}

.of-calendar-week-day {
    display: grid;
    gap: 0.5rem;
    min-height: 11rem;
    padding: 0.75rem;
    border: 1px solid rgba(29, 86, 96, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.8);
    align-content: start;
}

.of-calendar-week-day.is-today {
    border-color: color-mix(in srgb, var(--of-accent) 45%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--of-accent) 30%, white);
}

.of-calendar-week-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.of-calendar-week-day-link { text-decoration: none; color: var(--of-ink); display: grid; line-height: 1.15; }
.of-calendar-week-dow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--of-muted); }
.of-calendar-week-num { font-size: 1.15rem; font-family: Fraunces, serif; }
.of-calendar-week-day.is-today .of-calendar-week-num { color: var(--of-accent); }
.of-calendar-week-day-body { display: grid; gap: 0.3rem; align-content: start; }

.of-calendar-week-empty,
.of-calendar-list-empty-add {
    border: 1px dashed rgba(29, 86, 96, 0.22);
    border-radius: 999px;
    background: transparent;
    color: var(--of-muted);
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    text-align: center;
}

.of-calendar-week-empty:hover,
.of-calendar-list-empty-add:hover { background: rgba(29, 86, 96, 0.06); color: var(--of-brand-strong); }

/* Agenda rows */
.of-agenda-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    color: var(--of-muted);
    font-size: 0.84rem;
}

.of-agenda-bell { color: var(--of-accent); font-size: 0.78rem; }

.of-agenda-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: var(--of-muted);
    text-decoration: none;
    margin-left: auto;
}

.of-agenda-edit:hover { background: rgba(29, 86, 96, 0.08); color: var(--of-brand-strong); }

.of-blink-badge.mod-event { background: rgba(47, 109, 89, 0.14); color: #275c4b; }
.of-blink-badge.mod-appointment { background: color-mix(in srgb, var(--of-projects) 16%, white); color: color-mix(in srgb, var(--of-projects) 75%, black); }
.of-blink-badge.mod-past { background: rgba(161, 63, 53, 0.12); color: var(--of-danger); }

/* Doctrine empty state */
.of-cal-empty-state {
    padding: 1.4rem 1.2rem;
    border: 1px dashed rgba(29, 86, 96, 0.2);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* Day context menu */
.of-cal-context-menu {
    position: fixed;
    z-index: 1080;
    display: grid;
    min-width: 12rem;
    padding: 0.4rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(29, 86, 96, 0.16);
    background: var(--of-surface-strong);
    box-shadow: var(--of-shadow-lg);
}

.of-cal-context-menu button,
.of-cal-context-menu a {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--of-ink);
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.of-cal-context-menu button:hover,
.of-cal-context-menu a:hover { background: rgba(29, 86, 96, 0.08); }

/* Mobile: chips → dots, compact cells, week strip stacks */
@media (max-width: 767.98px) {
    .of-calendar-event {
        min-height: 0.85rem;
        padding: 0;
        border: 0;
        background: transparent !important;
        gap: 0;
    }

    .of-calendar-event .of-calendar-event-title,
    .of-calendar-event .of-calendar-event-bell { display: none; }

    .of-calendar-event .of-calendar-event-dot { width: 0.62rem; height: 0.62rem; }
    .of-calendar-event.mod-task .of-calendar-event-dot { background: var(--of-blink); }
    .of-calendar-event.mod-reminder .of-calendar-event-dot { background: var(--of-accent); }
    .of-calendar-event.mod-event .of-calendar-event-dot { background: var(--of-success); }
    .of-calendar-event.mod-appointment .of-calendar-event-dot { background: var(--of-projects); }
    .of-calendar-event.mod-both .of-calendar-event-dot { background: var(--of-brand); }

    .of-calendar-events { display: flex; flex-wrap: wrap; gap: 0.22rem; }
    .of-calendar-day { min-height: 3.6rem; padding: 0.4rem; gap: 0.3rem; border-radius: 0.8rem; }
    .of-calendar-weekday { padding: 0.4rem 0.2rem; font-size: 0.68rem; border-radius: 0.6rem; }
    .of-calendar-weekdays, .of-calendar-week { gap: 0.28rem; }
    .of-calendar-grid { gap: 0.28rem; }

    .of-calendar-week-strip { grid-template-columns: minmax(0, 1fr); }
    .of-calendar-week-day { min-height: 0; }
    .of-cal-quickadd-btn { width: 100%; justify-content: center; }
}

/* 2026-07 redesign: FOUR real tracks (a ghost 5th track wasted ~20% of the board),
   2×2 on tablet, snap-scroll lanes on phones — no more forced horizontal scrolling. */
.of-kanban-board-shell {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
    padding-bottom: 0.35rem;
}

.of-kanban-column {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-top-width: 4px;
    border-radius: var(--of-radius-md);
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(246, 239, 227, 0.92));
    box-shadow: var(--of-shadow-sm);
}

.of-kanban-column.mod-backlog {
    border-top-color: #87745a;
}

.of-kanban-column.mod-next {
    border-top-color: var(--of-accent);
}

.of-kanban-column.mod-in-progress {
    border-top-color: var(--of-brand);
}

.of-kanban-column.mod-done {
    border-top-color: var(--of-success);
}

.of-kanban-column-head {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: flex-start;
}

.of-kanban-column-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.of-kanban-column-title {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.28rem;
}

.of-kanban-column-copy {
    margin: 0.4rem 0 0;
    color: var(--of-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.of-kanban-lane {
    display: grid;
    gap: 0.6rem;
    min-height: 18rem;
    max-height: min(68vh, 44rem);
    overflow-y: auto;
    padding: 0.1rem;
    border-radius: 1rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.of-kanban-lane.is-drag-over {
    background: rgba(29, 86, 96, 0.06);
    box-shadow: inset 0 0 0 1px rgba(29, 86, 96, 0.12);
}

.of-kanban-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid rgba(29, 86, 96, 0.1);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 20px rgba(18, 57, 66, 0.08);
    cursor: grab;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.of-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(18, 57, 66, 0.12);
}

.of-kanban-card.is-dragging {
    opacity: 0.55;
    transform: rotate(1.2deg);
}

.of-kanban-card.is-saving {
    opacity: 0.72;
}

.of-kanban-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    align-items: center;
}

.of-kanban-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.6rem;
    min-width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.28);
    color: transparent;
    font-size: 0;
}

.of-kanban-card-icon.mod-backlog {
    color: #6f5a42;
}

.of-kanban-card-icon.mod-next {
    color: var(--of-accent);
}

.of-kanban-card-icon.mod-in-progress {
    color: var(--of-brand);
}

.of-kanban-card-icon.mod-done {
    color: var(--of-success);
}

.of-kanban-card-main {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.of-kanban-card-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.of-kanban-card-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* full titles, two lines max (was a 34-char nowrap chop) */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Focus Board 2026-07: rich cards, big touch targets, jump bar, WIP stepper ── */
.of-kanban-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.of-kanban-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.07);
    border: 1px solid rgba(29, 86, 96, 0.12);
    color: var(--of-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}

.of-kanban-chip.is-overdue {
    background: rgba(161, 63, 53, 0.1);
    border-color: rgba(161, 63, 53, 0.25);
    color: var(--of-danger);
    font-weight: 600;
}

.of-kanban-progress {
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.1);
    overflow: hidden;
}

.of-kanban-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--of-accent);
}

.of-kanban-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 2.75rem; /* real touch target (was 2px-padding text arrows) */
    border: 1px solid rgba(29, 86, 96, 0.14);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    color: var(--of-brand-strong);
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.of-kanban-arrow:hover { background: rgba(29, 86, 96, 0.08); color: var(--of-brand-strong); }

.of-kanban-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.55rem;
    border: 1px dashed rgba(29, 86, 96, 0.25);
    border-radius: 0.8rem;
    background: transparent;
    color: var(--of-brand);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.of-kanban-add-btn:hover { background: rgba(29, 86, 96, 0.06); }

.of-kanban-info-btn {
    border: 0;
    background: transparent;
    padding: 0 0.15rem;
    color: inherit;
    font-size: 0.85em;
    vertical-align: middle;
    cursor: pointer;
}

.of-kanban-limit-note { font-size: 0.78em; opacity: 0.75; margin-left: 0.15rem; }

.of-wip-stepper { display: inline-flex; gap: 0.25rem; }

.of-wip-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 86, 96, 0.18);
    background: rgba(255, 255, 255, 0.85);
    color: var(--of-brand-strong);
    cursor: pointer;
    font-size: 0.8rem;
}

.of-wip-step:hover { background: rgba(29, 86, 96, 0.08); }

.of-kanban-jumpbar {
    position: sticky;
    top: var(--of-sticky-offset);
    z-index: 20;
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0;
    background: linear-gradient(var(--of-bg), rgba(245, 239, 227, 0.92));
}

.of-kanban-jump {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.6rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 86, 96, 0.16);
    background: rgba(255, 255, 255, 0.85);
    color: var(--of-brand-strong);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.of-kanban-jump [data-jump-count] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.1);
    font-size: 0.72rem;
}

.of-kanban-jump.is-active { background: var(--of-brand); border-color: var(--of-brand); color: #fffdf8; }
.of-kanban-jump.is-active [data-jump-count] { background: rgba(255, 255, 255, 0.22); }

.of-kanban-ghost {
    position: fixed;
    z-index: 1090;
    pointer-events: none;
    opacity: 0.92;
    transform: scale(1.03) rotate(1.5deg);
    box-shadow: var(--of-shadow-lg);
}

/* ── Blink form To-do tab 2026-07: lifecycle ribbon + visual type cards ── */
.of-lifecycle-ribbon {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--of-muted);
}

.of-lifecycle-ribbon strong {
    color: var(--of-accent);
    font-size: 0.85rem;
}

.of-lifecycle-ribbon i { font-size: 0.6rem; opacity: 0.6; }

.of-type-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.of-type-card {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.15rem;
    padding: 0.65rem 0.5rem;
    border: 1.5px solid rgba(29, 86, 96, 0.14);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.75);
    color: var(--of-ink);
    cursor: pointer;
    min-height: 2.75rem;
}

.of-type-card small { color: var(--of-muted); font-size: 0.7rem; line-height: 1.3; }
.of-type-card .of-type-card-icon { font-size: 1.15rem; line-height: 1; }
.of-type-card:hover { border-color: rgba(29, 86, 96, 0.3); background: rgba(255, 255, 255, 0.95); }

.of-type-card.is-active { border-width: 2px; box-shadow: var(--of-shadow-sm); }
.of-type-card.mod-task.is-active { border-color: var(--of-blink); background: rgba(47, 109, 149, 0.08); }
.of-type-card.mod-reminder.is-active { border-color: var(--of-accent); background: color-mix(in srgb, var(--of-accent) 10%, white); }
.of-type-card.mod-event.is-active { border-color: var(--of-success); background: rgba(47, 109, 89, 0.08); }
.of-type-card.mod-appointment.is-active { border-color: var(--of-projects); background: color-mix(in srgb, var(--of-projects) 10%, white); }
.of-type-card.is-active:not(.mod-task):not(.mod-reminder):not(.mod-event):not(.mod-appointment) { border-color: var(--of-brand); background: rgba(29, 86, 96, 0.06); }

/* Keep the real select in the accessibility tree but visually demoted (no-JS fallback). */
.of-type-select-fallback { margin-top: 0.15rem; }
@media (scripting: enabled) {
    .of-type-select-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ══════════════ "Orbit Ahead" (PR7 2026-08) — the path of signals ══════════════
   Overdue tail fades BEHIND the fox; Today carries the fox + accent ring; the road
   ahead runs left→right on desktop and top→bottom on phones. The connecting line is
   the orbit itself. */
.of-orbit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.of-orbit-overdue-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.9rem;
    background: rgba(161, 63, 53, 0.08);
    border: 1px solid rgba(161, 63, 53, 0.2);
    color: var(--of-danger);
    font-size: 0.85rem;
}

.of-orbit-path {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 1rem 0.25rem 1.25rem;
    position: relative;
}

.of-orbit-path::before {
    /* the orbit line the signals sit on */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2.35rem;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(161, 63, 53, 0.25),
        color-mix(in srgb, var(--of-accent) 55%, white) 30%,
        rgba(29, 86, 96, 0.25));
}

.of-orbit-day {
    position: relative;
    flex: 0 0 auto;
    width: 11.5rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.of-orbit-day.is-overdue {
    opacity: 0.75;
    border-style: dashed;
    border-color: rgba(161, 63, 53, 0.3);
    background: rgba(250, 244, 240, 0.85);
}

.of-orbit-day.is-today {
    border-color: color-mix(in srgb, var(--of-accent) 55%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--of-accent) 30%, white), var(--of-shadow-sm);
}

.of-orbit-day-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.of-orbit-fox { font-size: 1.15rem; line-height: 1; }

.of-orbit-date {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--of-muted);
    text-decoration: none;
}

.of-orbit-date:hover { color: var(--of-brand-strong); }
.of-orbit-date.is-today-label { color: var(--of-accent); font-size: 0.85rem; }

.of-orbit-signals { display: grid; gap: 0.3rem; }

.of-orbit-star-lane {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--of-star) 55%, white);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--of-star) 12%, white);
}

.of-orbit-star-items {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

@media (max-width: 767.98px) {
    /* Vertical path: thumb-scroll down the road ahead. */
    .of-orbit-path {
        flex-direction: column;
        overflow-x: visible;
        padding-left: 1.4rem;
    }

    .of-orbit-path::before {
        left: 0.55rem;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg,
            rgba(161, 63, 53, 0.25),
            color-mix(in srgb, var(--of-accent) 55%, white) 22%,
            rgba(29, 86, 96, 0.25));
    }

    .of-orbit-day { width: auto; }

    /* Keep signal chips readable in Orbit mode on phones (they collapse to dots in
       the month grid, but the vertical path has room for titles). */
    .of-orbit-signals .of-calendar-event {
        min-height: 1.55rem;
        padding: 0.12rem 0.5rem 0.12rem 0.34rem;
        border: 1px solid rgba(29, 86, 96, 0.15);
        background: rgba(255, 255, 255, 0.7) !important;
        gap: 0.3rem;
    }

    .of-orbit-signals .of-calendar-event .of-calendar-event-title { display: inline; }
}

.of-kanban-card-copy,
.of-kanban-card-due {
    margin: 0;
    color: var(--of-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.of-kanban-card-meta,
.of-kanban-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.of-kanban-card-actions .btn {
    padding: 0.3rem 0.6rem;
}

.of-kanban-empty {
    padding: 1rem;
    border: 1px dashed rgba(29, 86, 96, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.46);
    color: var(--of-muted);
    text-align: center;
    line-height: 1.6;
}

.of-min-w-0 {
    min-width: 0;
}

.of-blink-item-title-text,
.of-blink-grid-title,
.of-blink-detail-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
}

.of-blink-item-title-text,
.of-blink-grid-title {
    -webkit-line-clamp: 2;
}

.of-blink-detail-title {
    -webkit-line-clamp: 3;
}

.of-recent-item-meta,
.of-hub-file-meta,
.of-blink-item-meta {
    color: var(--of-muted);
    font-size: 0.84rem;
}

.of-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.of-mini-panel-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.of-profile-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.of-profile-avatar-image,
.of-profile-avatar-fallback {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.of-profile-avatar-image {
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 32px rgba(29, 86, 96, 0.18);
}

.of-profile-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(242, 184, 76, 0.22), rgba(29, 86, 96, 0.18));
    color: var(--of-brand-strong);
    font-size: 2.1rem;
    font-weight: 700;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 32px rgba(29, 86, 96, 0.18);
}

.of-blink-hero,
.of-blink-entry,
.of-blink-panel {
    position: relative;
    overflow: hidden;
}

.of-blink-header-row,
.of-blink-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.of-blink-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.of-inline-link {
    color: var(--of-brand-strong);
    font-weight: 700;
    text-decoration: none;
}

.of-view-switch {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
}

.of-view-switch .btn {
    border-radius: 999px;
    border: 0;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.of-view-switch .btn.active {
    background: var(--of-brand-strong);
    color: #fff9f0;
}

.of-blink-panel .card-header,
.of-blink-entry .card-header {
    padding: 0;
    background: transparent;
    border: 0;
}

.of-blink-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(29, 86, 96, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--of-brand-strong);
    font-weight: 700;
    min-width: 2.8rem;
    min-height: 2.8rem;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1;
}

.of-blink-entry .card-body,
.of-blink-panel .card-body {
    padding: 0;
    background: transparent;
}

.of-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, auto);
    gap: 0.8rem;
    align-items: end;
}

.of-toolbar-field {
    display: grid;
    gap: 0.35rem;
}

.of-toolbar-label {
    color: var(--of-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.of-blink-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.of-blink-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.08);
    color: var(--of-brand-strong);
    font-size: 0.76rem;
    font-weight: 700;
    vertical-align: middle;
}

.of-blink-badge.mod-task { background: rgba(47, 109, 149, 0.12); color: var(--of-blink); }
/* Report #43 (2026-08): task priority scale, calm blue (1-20) → urgent red (81+).
   Same 12%-tint-over-white convention as the other badges; text colors are the
   full-strength anchors interpolated --of-blink → --of-danger, all ≥4.5:1 on
   their tinted backgrounds. Declared AFTER mod-task so they override it. */
.of-blink-badge.mod-prio-1 { background: rgba(47, 109, 149, 0.12); color: #2f6d95; }
.of-blink-badge.mod-prio-2 { background: rgba(75, 97, 125, 0.12); color: #46607e; }
.of-blink-badge.mod-prio-3 { background: rgba(104, 86, 101, 0.12); color: #635260; }
.of-blink-badge.mod-prio-4 { background: rgba(132, 74, 77, 0.13); color: #7c4245; }
.of-blink-badge.mod-prio-5 { background: rgba(161, 63, 53, 0.14); color: var(--of-danger); }
.of-blink-badge.mod-reminder { background: rgba(223, 122, 47, 0.14); color: #9a541d; }

/* Report #39 (2026-08): voice-transcript boxes get their own tint so they read
   as distinct from the white audio card + near-white page background. */
.of-transcript-tint { background: #eef4fb; border-color: #c9dcef !important; }
.of-blink-badge.mod-finance { background: rgba(44, 123, 123, 0.12); color: var(--of-finance); }
.of-blink-badge.mod-form { background: #f3eeff; color: #6f42c1; border: 1px solid #d9c2ff; }

.of-blink-list {
    display: grid;
    gap: 0.85rem;
}

.of-blink-list .list-group-item,
.of-blink-compact-list .list-group-item {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.74);
    padding: 1rem;
}

.of-blink-grid .card {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.76);
}

.of-blink-actions {
    display: inline-flex;
    gap: 0.45rem;
}

.of-blink-actions .btn {
    border-radius: 999px;
}

.of-blink-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.of-pagination .page-link {
    border-radius: 999px;
    border-color: rgba(29, 86, 96, 0.12);
    color: var(--of-brand-strong);
    background: rgba(255, 255, 255, 0.72);
}

.of-pagination .page-item.disabled .page-link {
    color: var(--of-muted);
    background: rgba(255, 255, 255, 0.52);
}

.of-blink-section-anchor,
.of-blink-entry {
    scroll-margin-top: 7rem;
}

.of-link-reset {
    color: inherit;
    text-decoration: none;
}

.of-ops-page {
    display: grid;
    gap: 1.25rem;
}

.of-ops-shell {
    display: grid;
    grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.of-ops-main {
    display: grid;
    gap: 1rem;
}

.of-ops-hero,
.of-ops-toolbar,
.of-rag-hero,
.of-rag-step-panel,
.of-rag-stage-panel,
.of-rag-page-hero {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: var(--of-radius-lg);
    background: linear-gradient(160deg, rgba(255, 252, 246, 0.95), rgba(244, 236, 225, 0.9));
    box-shadow: var(--of-shadow-sm);
}

.of-ops-hero::after,
.of-rag-hero::after,
.of-rag-page-hero::after {
    content: "";
    position: absolute;
    width: 14rem;
    height: 14rem;
    right: -4rem;
    top: -4rem;
    border-radius: 999px;
    background: rgba(223, 122, 47, 0.12);
    pointer-events: none;
}

.of-ops-title,
.of-rag-title,
.of-rag-page-title {
    margin: 0.8rem 0 0.6rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.95rem, 4vw, 3rem);
    line-height: 0.98;
}

.of-ops-lead,
.of-rag-lead,
.of-rag-page-lead {
    max-width: 44rem;
    color: var(--of-muted);
    line-height: 1.7;
}

.of-ops-toolbar {
    display: grid;
    gap: 1rem;
}

.of-ops-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.of-ops-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(29, 86, 96, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--of-brand-strong);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.of-ops-tab:hover {
    transform: translateY(-1px);
    color: var(--of-brand-strong);
    box-shadow: 0 14px 24px rgba(23, 18, 10, 0.08);
}

.of-ops-tab.is-active {
    color: #fff9f0;
}

.of-ops-tab.mod-blink.is-active {
    border-color: var(--of-blink);
    background: linear-gradient(135deg, color-mix(in srgb, var(--of-blink) 86%, white), var(--of-blink));
}

.of-ops-tab.mod-folders.is-active {
    border-color: var(--of-projects);
    background: linear-gradient(135deg, color-mix(in srgb, var(--of-projects) 82%, white), var(--of-projects));
}

.of-ops-tab.mod-all.is-active {
    border-color: #617086;
    background: linear-gradient(135deg, color-mix(in srgb, #617086 82%, white), #617086);
}

.of-ops-toolbar-grid {
    display: grid;
    gap: 0.85rem;
}

.of-ops-toolbar-grid form,
.of-ops-toolbar form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.of-ops-toolbar .form-label,
.of-rag-page .form-label {
    color: var(--of-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.of-ops-toolbar .form-control,
.of-ops-toolbar .form-select,
.of-rag-page .form-control,
.of-rag-page .form-select {
    border-radius: 1rem;
    border-color: rgba(29, 86, 96, 0.14);
    background: rgba(255, 255, 255, 0.84);
}

.of-ops-toolbar .btn,
.of-file-pagination .btn,
.of-rag-page .btn-group .btn {
    border-radius: 999px;
}

.of-file-table-wrap,
.of-folder-sidebar,
.of-folder-address,
.of-folder-actions,
.of-folder-workspace,
.of-file-gallery-shell,
.of-rag-stage-grid {
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: var(--of-radius-md);
    background: rgba(255, 252, 246, 0.82);
    box-shadow: var(--of-shadow-sm);
}

.of-file-table-wrap,
.of-file-gallery-shell,
.of-folder-address,
.of-folder-actions,
.of-folder-workspace {
    padding: 1rem;
}

.of-file-table {
    margin-bottom: 0;
}

.of-file-table thead th {
    border-bottom-color: rgba(29, 86, 96, 0.14);
    color: var(--of-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.of-file-table tbody tr {
    transition: background-color 0.18s ease;
}

.of-file-table tbody tr:hover {
    background: rgba(29, 86, 96, 0.05);
}

.of-file-table a,
.of-file-list a,
.of-folder-sidebar a,
.of-folder-address a,
.of-rag-step-link {
    text-decoration: none;
}

.of-file-list {
    display: grid;
    gap: 0.8rem;
}

.of-file-list .list-group-item {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.74);
    padding: 0.9rem 1rem;
}

.of-file-gallery-grid .card,
.of-file-gallery-grid .img-fluid,
.fm-tile {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
}

.of-file-gallery-grid .card {
    overflow: hidden;
}

.of-file-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: var(--of-radius-md);
    background: rgba(255, 252, 246, 0.82);
    box-shadow: var(--of-shadow-sm);
    flex-wrap: wrap;
}

.fm-tile {
    box-shadow: 0 12px 24px rgba(23, 18, 10, 0.06);
}

.fm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    border-radius: 0.9rem;
    background: rgba(29, 86, 96, 0.1);
}

.layout-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    min-height: 1.6rem;
    border-radius: 999px;
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand-strong);
    font-size: 0.74rem;
    font-weight: 700;
}

.of-rag-page {
    display: grid;
    gap: 1.25rem;
}

.of-rag-hero-grid,
.of-rag-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    gap: 1rem;
}

.of-rag-stage-grid {
    padding: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.of-rag-step-panel {
    display: grid;
    gap: 0.8rem;
}

.of-rag-step-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(29, 86, 96, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--of-ink);
}

.of-rag-step-link.is-active {
    border-color: var(--of-rag);
    background: color-mix(in srgb, var(--of-rag) 10%, white);
    box-shadow: 0 16px 26px rgba(23, 18, 10, 0.08);
}

.of-rag-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(178, 106, 44, 0.12);
    color: var(--of-rag);
    font-size: 0.78rem;
    font-weight: 700;
}

.of-rag-step-name {
    display: block;
    font-weight: 700;
}

.of-rag-step-copy {
    display: block;
    margin-top: 0.2rem;
    color: var(--of-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.of-rag-stat {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
}

.of-rag-stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 700;
}

.of-rag-stat-label {
    display: block;
    color: var(--of-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.of-rag-stage-card {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
}

.of-rag-stage-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.of-rag-stage-card p {
    margin: 0;
    color: var(--of-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.of-rag-page .card,
.of-rag-page .accordion-item {
    border: 1px solid rgba(29, 86, 96, 0.08);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--of-shadow-sm);
}

.of-rag-page .card-body,
.of-rag-page .accordion-body {
    padding: 1rem;
}

.of-rag-page .list-group-item {
    border-color: rgba(29, 86, 96, 0.08);
}

@media (max-width: 991.98px) {
    :root {
        --of-sticky-offset: 7.25rem;
    }

    .of-header {
        padding-top: 0.8rem;
    }

    .of-navbar {
        border-radius: 1.4rem;
    }

    .of-home-metrics,
    .of-home-grid,
    .of-concept-grid,
    .of-story-grid,
    .of-about-definition-grid,
    .of-about-module-grid,
    .of-workflow-steps,
    .of-preview-timeline,
    .of-auth-shell {
        grid-template-columns: 1fr;
    }

    .of-calendar-toolbar,
    .of-calendar-toolbar-actions {
        justify-items: start;
    }

    .of-calendar-view-switch {
        justify-content: flex-start;
    }

    .of-home-title {
        max-width: none;
    }

    .of-kanban-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .of-kanban-board-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet: 2×2, all lanes visible */
    }

    .of-calendar-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .of-footer-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .of-dashboard-shell,
    .of-ops-shell,
    .of-summary-grid,
    .of-hub-layout,
    .of-hub-overview-grid,
    .of-recent-grid,
    .of-mini-grid,
    .of-blink-summary-grid,
    .of-toolbar-grid,
    .of-rag-hero-grid,
    .of-rag-stage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    :root {
        --of-sticky-offset: 6.75rem;
    }

    .of-main {
        padding-top: 1rem;
    }

    .of-home-hero,
    .of-home-section,
    .of-home-cta,
    .of-about-hero,
    .of-about-section,
    .of-auth-card,
    .of-auth-aside {
        padding: 1.3rem;
        border-radius: 1.6rem;
    }

    .of-home-actions,
    .of-module-pills,
    .of-calendar-nav,
    .of-calendar-legend,
    .of-calendar-view-switch {
        flex-direction: column;
        align-items: stretch;
    }

    .of-home-actions .of-button,
    .of-home-actions .of-quiet-link,
    .of-auth-submit {
        justify-content: center;
        text-align: center;
    }

    /* Footer links stay on one row on mobile */
    .of-footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .of-footer { padding-bottom: 1rem; }
    .of-footer-panel { padding: 0.65rem 1rem; gap: 0.4rem; }

    .of-home-metrics {
        grid-template-columns: 1fr;
    }

    .of-preview-panel {
        padding: 1rem;
    }


    .of-calendar-day {
        min-height: 6.9rem;
    }

    .of-orbit-board {
        min-height: 19rem;
    }

    .of-home-star-1 {
        left: auto;
        right: 20%;
    }

    .of-home-star-2 {
        top: 4rem;
    }

    .of-about-orbit-ring--inner,
    .of-about-orbit-ring--outer {
        right: -18%;
    }

    .of-orbit-center,
    .of-orbit-node {
        padding: 0.75rem 0.85rem;
        font-size: 0.88rem;
    }

    .of-kanban-summary-grid {
        grid-template-columns: 1fr;
    }

    .of-kanban-board-shell {
        /* Phone (owner QA 2026-08): VERTICAL stacked lanes — horizontal swiping was
           hard on small screens. The jump bar scrolls to a lane; long lanes scroll
           inside themselves so Done never disappears below a huge Backlog. */
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .of-kanban-board-shell .of-kanban-lane {
        max-height: 45vh;
        overflow-y: auto;
    }

    .of-calendar-list-day {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .of-calendar-year-grid {
        grid-template-columns: 1fr;
    }

    .of-calendar-year-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .of-action-row,
    .of-file-pagination,
    .of-blink-list-toolbar,
    .of-blink-header-row,
    .of-blink-entry-head,
    .of-recent-panel-head,
    .of-hub-file-top,
    .of-recent-item-top,
    .of-blink-footer-row,
    .of-ops-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .of-view-switch,
    .of-blink-actions,
    .of-summary-grid,
    .of-hub-layout,
    .of-hub-overview-grid,
    .of-recent-grid,
    .of-blink-summary-grid,
    .of-mini-grid,
    .of-rag-stage-grid {
        width: 100%;
    }

    .of-view-switch {
        justify-content: space-between;
    }

    .of-app-menu-card,
    .of-blink-entry,
    .of-blink-panel,
    .of-blink-hero {
        border-radius: 1.6rem;
    }

    .of-app-menu-header {
        padding: 1rem 1rem 0.85rem;
        align-items: center;
    }

    .of-app-menu-title {
        font-size: 1.15rem;
    }

    .of-app-menu-copy,
    .of-app-detail,
    .of-app-state {
        display: none;
    }

    .of-app-menu-body {
        padding: 0 0.85rem 0.85rem;
    }

    .of-app-menu-links {
        gap: 0.55rem;
    }

    .of-app-link {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.7rem;
        padding: 0.72rem 0.8rem;
        border-radius: 1rem;
    }

    .of-app-icon {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 0.85rem;
    }

    .of-app-name {
        font-size: 0.96rem;
    }

    .of-app-menu-toggle,
    .of-blink-collapse-toggle {
        min-width: 3.2rem;
        min-height: 3.2rem;
        font-size: 1.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .of-home-star,
    .of-about-node,
    .of-about-orbit-ring,
    .of-orbit-board::before,
    .of-orbit-board::after,
    .of-orbit-node,
    .of-concept-card,
    .of-story-card,
    /* BL-21: the voice recorder's waveform and pulsing button were the platform's
       remaining unguarded animations — they now stop here with everything else
       rather than a second guard being invented for them. */
    .voice-wave .vw-bar,
    .voice-recording-active,
    .of-about-definition-card {
        animation: none !important;
    }
}

/* ==========================================================================
   GLOBAL TOP-RIGHT CONTROLS
   Help icon, 9-dot app launcher, compact avatar
   ========================================================================== */

/* Container that holds the three icons in a row */
.of-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Base style for all three icon buttons */
.of-global-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--of-ink);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    padding: 0;
}
.of-global-btn::after {
    display: none !important;
}
.of-global-btn:hover,
.of-global-btn:focus-visible {
    background: rgba(29, 86, 96, 0.1);
    color: var(--of-brand-strong);
    outline: none;
}

/* Avatar inside the button */
.of-avatar-btn .of-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--of-brand), var(--of-brand-strong));
    color: #fffaf2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
}

/* Help dropdown label */
.of-help-menu .of-dropdown-label {
    font-size: 0.78rem;
}

/* Help button — slightly larger, blue "i" */
.of-help-btn {
    width: 2.8rem;
    height: 2.8rem;
    border: 2px solid #0d6efd;
    color: #0d6efd;
    font-size: 1.15rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
}

/* ==========================================================================
   9-DOT APP LAUNCHER PANEL
   ========================================================================== */

.of-launcher-wrap {
    position: relative;
}

.of-launcher-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1080;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    max-height: min(72vh, 480px);
    overflow-y: auto;
    background: var(--of-launcher-panel-bg-override, var(--of-surface-strong));
    border: 1px solid var(--of-line);
    border-radius: var(--of-radius-md);
    box-shadow: var(--of-shadow-lg);
    padding: 1rem;
    animation: ofLauncherIn 0.14s ease;
}

@keyframes ofLauncherIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.of-launcher-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.5rem;
}

/* Row-based layout (active when admin has set grid positions) */
.of-launcher-grid-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.of-launcher-row { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
.of-launcher-row--left   { justify-content: flex-start; }
.of-launcher-row--center { justify-content: center; }
.of-launcher-row--right  { justify-content: flex-end; }

.of-launcher-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--of-radius-sm);
    border: 1px solid transparent;
    background: var(--of-launcher-card-bg-override, transparent);
    color: var(--of-ink);
    text-decoration: none;
    text-align: center;
    transition: background 0.16s, border-color 0.16s;
    cursor: pointer;
    position: relative;
    min-width: 0;
    width: 5rem;
}
.of-launcher-app:hover,
.of-launcher-app:focus-visible {
    background: rgba(29, 86, 96, 0.07);
    border-color: rgba(29, 86, 96, 0.12);
    color: var(--of-brand-strong);
    outline: none;
    text-decoration: none;
}

.of-launcher-acronym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--of-brand), var(--of-brand-strong));
    color: #fffaf2;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: transform 0.16s;
}

.of-launcher-acronym-image-wrap {
    overflow: hidden;
}

.of-launcher-acronym-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}
.of-launcher-app:hover .of-launcher-acronym {
    transform: scale(1.07);
}

.of-launcher-name {
    font-size: 0.74rem;
    font-weight: 500;
    color: inherit;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* App status banner — shown at top of page when app has a badge set */
.of-status-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.of-status-banner__icon { font-size: 1rem; flex-shrink: 0; }
.of-status-banner--beta  { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.of-status-banner--dev   { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.of-status-banner--soon  { background: #f8fafc; border-color: #cbd5e1; color: #475569; }

/* App status badges (Beta / In Dev / Coming Soon) */
.of-app-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 20px;
    text-transform: uppercase;
    line-height: 1.6;
    pointer-events: none;
}
.of-app-badge--beta { background: #3b82f6; color: #fff; }
.of-app-badge--dev  { background: #f59e0b; color: #fff; }
.of-app-badge--soon { background: #64748b; color: #fff; }

/* ==========================================================================
   SIMPLIFIED HOMEPAGE
   ========================================================================== */

.of-home-simple {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: 4rem 1rem 6rem;
}

.of-home-simple-inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    width: 100%;
}

.of-home-simple-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    color: var(--of-ink);
    line-height: 1.05;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.of-home-simple-sub {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--of-muted);
    margin: 0 0 2.5rem;
    line-height: 1.5;
}
.of-home-ship-hint {
    font-size: .78rem;
    color: var(--of-muted);
    opacity: .65;
    margin: 0;
    padding-top: .25rem;
    letter-spacing: .01em;
}

.of-home-simple-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.of-home-simple-cta {
    font-size: 1.05rem;
    padding: 0.85rem 2.4rem;
    border-radius: 999px;
    min-width: 14rem;
}

.of-home-simple-hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--of-muted);
}
.of-home-simple-hint a {
    color: var(--of-brand);
    font-weight: 500;
}
.of-home-simple-helper {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    color: var(--of-muted);
    text-align: center;
}

.of-home-simple-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.of-home-simple-links a {
    font-size: 0.9rem;
    color: var(--of-muted);
    text-decoration: none;
    transition: color 0.16s;
}
.of-home-simple-links a:hover {
    color: var(--of-brand);
}

/* ==========================================================================
   PUBLIC CONTENT PAGES (Our Philosophy, How It Works, FAQ, Help, Careers)
   ========================================================================== */

.of-public-shell {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2rem 0 4rem;
    display: grid;
    gap: 0;
}

.of-public-hero {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--of-line);
    margin-bottom: 2rem;
}

.of-public-section {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--of-line);
}
.of-public-section:last-of-type {
    border-bottom: none;
}

.of-public-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--of-ink);
    margin: 0 0 0.75rem;
}

.of-public-section p,
.of-public-section ol,
.of-public-section ul {
    color: var(--of-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 0.75rem;
}
.of-public-section p:last-child,
.of-public-section ol:last-child,
.of-public-section ul:last-child {
    margin-bottom: 0;
}

.of-public-section a {
    color: var(--of-brand);
    font-weight: 500;
}

.of-public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 2rem;
}

/* FAQ accordion items */
.of-faq-list {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.of-faq-item {
    border: 1px solid var(--of-line);
    border-radius: var(--of-radius-sm);
    background: var(--of-surface-strong);
    padding: 0 1rem;
    overflow: hidden;
}

.of-faq-q {
    display: block;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--of-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 1.5rem;
}
.of-faq-q::-webkit-details-marker { display: none; }
.of-faq-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--of-muted);
    transition: transform 0.18s;
}
details[open] .of-faq-q::after {
    content: '\2212';
}

.of-faq-a {
    padding: 0 0 1rem;
    color: var(--of-muted);
    font-size: 0.93rem;
    line-height: 1.65;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES — new global nav + homepage
   ========================================================================== */

/* Homepage: break out of container horizontal padding so it feels full-width */
.of-page-home .of-main {
    padding-top: 0;
    padding-bottom: 0;
}
.of-page-home .of-main > .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.of-page-home .of-page-shell {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* Launcher panel: keep inside viewport on all screens */
.of-launcher-panel {
    right: 0;
    left: auto;
}

/* --- Tablet (≤991px): nav controls still visible above mobile breakpoint --- */
@media (max-width: 991.98px) {
    .of-nav-actions {
        gap: 0.2rem;
    }
    .of-global-btn {
        width: 2.1rem;
        height: 2.1rem;
    }
    .of-launcher-panel {
        width: 18rem;
    }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767.98px) {
    .of-brand-tag {
        display: none;
    }

    .of-brand-name {
        font-size: 1rem;
    }

    .of-nav-desktop {
        margin-left: 0.45rem;
    }

    .of-nav-actions {
        gap: 0.2rem;
    }

    .of-quiet-link,
    .of-nav-actions .of-button {
        min-height: 2.15rem;
        padding: 0.45rem 0.7rem;
        font-size: 0.82rem;
    }

    /* Launcher panel: fit-content handles width automatically */
    .of-launcher-panel {
        max-height: min(70vh, 31rem);
        overflow-y: auto;
        right: 0;
        left: auto;
        padding: 0.7rem;
    }
    .of-launcher-grid {
        grid-template-columns: repeat(3, auto);
        gap: 0.28rem;
    }
    .of-launcher-row { gap: 0.28rem; }
    .of-launcher-app { width: 4.75rem; }
    .of-launcher-app {
        gap: 0.35rem;
        padding: 0.55rem 0.25rem;
        border-radius: 0.7rem;
    }
    .of-launcher-acronym {
        width: 2rem;
        height: 2rem;
        font-size: 0.64rem;
        border-radius: 0.6rem;
    }
    .of-launcher-name {
        font-size: 0.64rem;
        line-height: 1.2;
    }

    /* Homepage: more vertical breathing room */
    .of-home-simple {
        min-height: 80vh;
        padding: 3rem 1.25rem 5rem;
    }
    .of-home-simple-cta {
        min-width: 0;
        width: 100%;
        max-width: 20rem;
    }
    .of-home-simple-links {
        gap: 1rem;
    }

    /* Public pages: add horizontal padding */
    .of-public-shell {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* --- Small mobile (≤479px) --- */
@media (max-width: 479.98px) {
    .of-home-simple-title {
        font-size: clamp(2.4rem, 13vw, 3.6rem);
    }
    .of-home-simple-sub {
        font-size: 1rem;
    }
    .of-launcher-grid {
        grid-template-columns: repeat(2, auto);
    }
    .of-launcher-panel {
        padding: 0.6rem;
        max-width: calc(100vw - 0.75rem);
    }
    .of-launcher-app {
        width: 4.25rem;
        padding: 0.5rem 0.2rem;
    }
    .of-launcher-row { gap: 0.2rem; }
    .of-launcher-acronym {
        width: 1.8rem;
        height: 1.8rem;
    }
    .of-launcher-name {
        font-size: 0.6rem;
    }
}

/* ================================================================
   FILE MANAGEMENT — Phase 2 (of-fm-* design system, polished)
   Google Drive–style two-pane layout, fully responsive
   ================================================================ */

/* ── Tokens (scoped to FM) ────────────────────────────────────── */
.of-fm-page {
    --fm-bg:        #f6f8fb;
    --fm-surface:   #ffffff;
    --fm-line:      #e5e8ed;
    --fm-line-soft: #eef1f5;
    --fm-ink:       #1f2937;
    --fm-ink-soft:  #4b5563;
    --fm-muted:     #6b7280;
    --fm-muted-2:   #9ca3af;
    --fm-brand:     var(--of-files, #4265a8);
    --fm-brand-2:   #3557a0;
    --fm-brand-50:  #eaf0fb;
    --fm-brand-100: #d8e3f7;
    --fm-danger:    #dc2626;
    --fm-danger-50: #fef2f2;
    --fm-success:   #15803d;
    --fm-radius:    10px;
    --fm-radius-sm: 6px;
    --fm-radius-lg: 14px;
    --fm-shadow-1:  0 1px 2px rgba(15, 23, 42, .05);
    --fm-shadow-2:  0 6px 18px rgba(15, 23, 42, .08);
    --fm-shadow-3:  0 12px 28px rgba(15, 23, 42, .12);
    --fm-sidebar-w: 248px;
    --fm-topbar-h:  56px;

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: var(--fm-bg);
    color: var(--fm-ink);
    font-feature-settings: "ss01", "cv11";
}

/* ── Top bar ──────────────────────────────────────────────────── */
.of-fm-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--fm-topbar-h);
    padding: 0 1.25rem;
    background: var(--fm-surface);
    border-bottom: 1px solid var(--fm-line);
    box-shadow: var(--fm-shadow-1);
    flex-shrink: 0;
}
.of-fm-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.of-fm-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.of-fm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--fm-muted);
    text-decoration: none;
    padding: 0.32rem 0.6rem;
    border-radius: var(--fm-radius-sm);
    transition: background 0.15s, color 0.15s;
}
.of-fm-back-link:hover { background: var(--fm-brand-50); color: var(--fm-brand); }
.of-fm-topbar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fm-ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-fm-topbar-icon { font-size: 1.15rem; }
.of-fm-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius-sm);
    color: var(--fm-ink-soft);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.of-fm-sidebar-toggle:hover { background: var(--fm-brand-50); border-color: var(--fm-brand-100); color: var(--fm-brand); }

/* ── 2-pane shell ─────────────────────────────────────────────── */
.of-fm-shell {
    display: grid;
    grid-template-columns: var(--fm-sidebar-w) 1fr;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.of-fm-sidebar {
    background: var(--fm-surface);
    border-right: 1px solid var(--fm-line);
    padding: 0.75rem 0.5rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: sticky;
    top: var(--fm-topbar-h);
    height: calc(100vh - 60px - var(--fm-topbar-h));
    scrollbar-width: thin;
    scrollbar-color: #cdd2da transparent;
}
.of-fm-sidebar::-webkit-scrollbar { width: 6px; }
.of-fm-sidebar::-webkit-scrollbar-thumb { background: #cdd2da; border-radius: 3px; }

.of-fm-sidebar-section {
    padding: 0.4rem 0.25rem 0.6rem;
    border-bottom: 1px solid var(--fm-line-soft);
}
.of-fm-sidebar-section:last-child { border-bottom: none; }
.of-fm-sidebar-heading {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fm-muted-2);
    padding: 0.2rem 0.6rem 0.5rem;
}

/* Drive row = drive link + settings gear, side by side */
.of-fm-drive-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-radius: var(--fm-radius-sm);
    transition: background 0.15s;
}
.of-fm-drive-row:hover { background: var(--fm-brand-50); }
.of-fm-drive-row.is-active { background: var(--fm-brand-50); }

.of-fm-drive-item,
.of-fm-folder-item,
.of-fm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.86rem;
    color: var(--fm-ink-soft);
    text-decoration: none;
    border-radius: var(--fm-radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.of-fm-drive-item { flex: 1; min-width: 0; }
.of-fm-drive-item:hover,
.of-fm-folder-item:hover,
.of-fm-nav-item:hover { background: var(--fm-brand-50); color: var(--fm-ink); }
.of-fm-drive-item.is-active,
.of-fm-folder-item.is-active,
.of-fm-nav-item.is-active {
    background: var(--fm-brand-100);
    color: var(--fm-brand-2);
    font-weight: 600;
}
.of-fm-drive-row.is-active .of-fm-drive-item { background: transparent; }
.of-fm-drive-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1; }
.of-fm-drive-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.of-fm-drive-badge { font-size: 0.78rem; margin-left: auto; opacity: 0.85; }

.of-fm-drive-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    color: var(--fm-muted-2);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: var(--fm-radius-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.of-fm-drive-row:hover .of-fm-drive-settings-link,
.of-fm-drive-row:focus-within .of-fm-drive-settings-link { opacity: 1; }
.of-fm-drive-settings-link:hover { color: var(--fm-brand); background: rgba(255,255,255,.7); }

.of-fm-sidebar-newlink {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fm-brand);
    text-decoration: none;
    border-radius: var(--fm-radius-sm);
    transition: background 0.15s;
}
.of-fm-sidebar-newlink:hover { background: var(--fm-brand-50); }
.of-fm-sidebar-empty { padding: 0.4rem 0.65rem; font-size: 0.78rem; color: var(--fm-muted-2); }
.of-fm-help-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--fm-muted-2, #b0b6bf);
    color: var(--fm-muted-2, #6c757d);
    background: transparent;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    cursor: help;
    flex-shrink: 0;
}
.of-fm-help-pill:hover { background: var(--fm-brand-50, #eef2ff); color: var(--fm-brand, #4338ca); border-color: var(--fm-brand, #4338ca); }

/* Windows-Explorer-style expandable drive tree (Reports #82+#83) */
.of-fm-drive-tree { margin: 0; }
.of-fm-drive-tree > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
}
.of-fm-drive-tree > summary::-webkit-details-marker { display: none; }
.of-fm-drive-caret {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--fm-muted-2, #6c757d);
    font-size: 11px;
    transition: transform 0.12s ease;
    flex-shrink: 0;
    user-select: none;
}
.of-fm-drive-tree[open] > summary > .of-fm-drive-caret { transform: rotate(90deg); }
.of-fm-drive-tree-body { padding: 0.1rem 0 0.2rem 0; }
.of-fm-folder-item-driveroot {
    font-weight: 600;
    padding-left: 1.5rem;
}
.of-fm-folder-item-protected { color: var(--fm-muted, #495057); }
.of-fm-recycle-toplevel {
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.of-fm-recycle-toplevel.is-active {
    background: rgba(13,110,253,0.08);
    border-radius: 4px;
}
.of-fm-protected-mark {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
}
/* Protected (system) folder cards on the main panel (Report #88) */
.of-fm-folder-card-protected {
    position: relative;
    background: linear-gradient(180deg, rgba(13,110,253,0.04), rgba(13,110,253,0.0));
    border: 1px dashed rgba(13,110,253,0.35) !important;
}
.of-fm-folder-card-protected .of-fm-folder-card-icon { filter: hue-rotate(0deg) saturate(1.1); }
.of-fm-folder-card-info {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(13,110,253,0.45);
    color: #0d6efd;
    font-size: 12px;
    cursor: help;
    z-index: 2;
}
.of-fm-folder-card-info:hover { background: #0d6efd; color: #fff; }

/* ── Main content ─────────────────────────────────────────────── */
.of-fm-main {
    padding: 1.25rem 1.5rem 2rem;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.of-fm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.86rem;
    padding: 0.5rem 0.85rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow-1);
}
.of-fm-breadcrumb-item {
    color: var(--fm-brand);
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.of-fm-breadcrumb-item:hover { background: var(--fm-brand-50); text-decoration: none; }
.of-fm-breadcrumb-sep { color: var(--fm-muted-2); user-select: none; }

/* ── Section header ───────────────────────────────────────────── */
.of-fm-section-header { padding: 0.25rem 0 0.1rem; }
.of-fm-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--fm-ink);
    margin: 0;
    letter-spacing: -0.015em;
}
.of-fm-section-sub {
    font-size: 0.88rem;
    color: var(--fm-muted);
    margin: 0.25rem 0 0;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.of-fm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}
.of-fm-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    padding: 0 0.25rem 0 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex: 1 1 240px;
    min-width: 0;
    max-width: 360px;
}
.of-fm-search-form:focus-within { border-color: var(--fm-brand); box-shadow: 0 0 0 3px var(--fm-brand-50); }
.of-fm-search-input {
    border: none;
    background: transparent;
    padding: 0.45rem 0.4rem;
    font-size: 0.86rem;
    outline: none;
    flex: 1;
    min-width: 0;
    color: var(--fm-ink);
}
.of-fm-search-input::placeholder { color: var(--fm-muted-2); }
.of-fm-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--fm-muted);
    transition: background 0.15s;
}
.of-fm-search-btn:hover { background: var(--fm-brand-50); color: var(--fm-brand); }

/* ── Buttons ──────────────────────────────────────────────────── */
.of-fm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.85rem;
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--fm-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
    white-space: nowrap;
}
.of-fm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fm-brand-50); }
.of-fm-btn:active { transform: translateY(1px); }
.of-fm-btn-primary {
    background: var(--fm-brand);
    color: #fff;
    border-color: var(--fm-brand);
    box-shadow: var(--fm-shadow-1);
}
.of-fm-btn-primary:hover { background: var(--fm-brand-2); border-color: var(--fm-brand-2); color: #fff; }
.of-fm-btn-secondary {
    background: var(--fm-surface);
    color: var(--fm-ink-soft);
    border-color: var(--fm-line);
}
.of-fm-btn-secondary:hover { background: var(--fm-brand-50); border-color: var(--fm-brand-100); color: var(--fm-brand); }
.of-fm-btn-ghost {
    background: transparent;
    color: var(--fm-ink-soft);
    border-color: transparent;
}
.of-fm-btn-ghost:hover { background: var(--fm-brand-50); color: var(--fm-brand); }
.of-fm-btn-ghost-danger {
    background: transparent;
    color: var(--fm-danger);
    border-color: transparent;
}
.of-fm-btn-ghost-danger:hover { background: var(--fm-danger-50); }
.of-fm-btn-danger {
    background: var(--fm-danger);
    color: #fff;
    border-color: var(--fm-danger);
}
.of-fm-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.of-fm-btn-xs {
    padding: 0.22rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid var(--fm-line);
    background: var(--fm-surface);
    color: var(--fm-ink-soft);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.of-fm-btn-xs:hover { background: var(--fm-brand-50); border-color: var(--fm-brand-100); color: var(--fm-brand); }
.of-fm-btn-xs.is-active { background: var(--fm-brand); color: #fff; border-color: var(--fm-brand); }
.of-fm-btn-xs.of-fm-btn-danger { color: #fff; background: var(--fm-danger); border-color: var(--fm-danger); }
.of-fm-btn-xs.of-fm-btn-danger:hover { background: #b91c1c; }

/* ── Drive cards (home view) ──────────────────────────────────── */
.of-fm-drive-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
}
.of-fm-drive-card-wrap {
    position: relative;
    display: flex;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius-lg);
    box-shadow: var(--fm-shadow-1);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.of-fm-drive-card-wrap:hover {
    transform: translateY(-2px);
    box-shadow: var(--fm-shadow-2);
    border-color: var(--fm-brand-100);
}
.of-fm-drive-card-wrap::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fm-brand);
    opacity: 0.85;
}
.of-fm-drive-card-wrap:has(.of-fm-drive-card[href*="drive="]) { /* default styled */ }
.of-fm-drive-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1rem 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--fm-ink);
    min-width: 0;
}
.of-fm-drive-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--fm-brand-50);
    border-radius: 10px;
}
.of-fm-drive-card-body { min-width: 0; flex: 1; }
.of-fm-drive-card-name {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--fm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-fm-drive-card-meta {
    font-size: 0.78rem;
    color: var(--fm-muted);
    margin-top: 0.2rem;
}
.of-fm-drive-card-desc {
    font-size: 0.78rem;
    color: var(--fm-muted-2);
    margin-top: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.of-fm-drive-card-settings {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--fm-muted);
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.of-fm-drive-card-wrap:hover .of-fm-drive-card-settings,
.of-fm-drive-card-wrap:focus-within .of-fm-drive-card-settings { opacity: 1; }
.of-fm-drive-card-settings:hover { background: var(--fm-brand-50); color: var(--fm-brand); border-color: var(--fm-brand-100); }

/* ── Recycle Bin chip on each drive card ──────────────────────── */
.of-fm-drive-card-recycle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--fm-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
a.of-fm-drive-card-recycle:hover {
    background: #fff5f5;
    color: #b02a37;
    border-color: #f1c0c0;
}

/* ── File Management top search bar ───────────────────────────── */
.of-fm-search-bar { max-width: 800px; }
.of-fm-search-bar .input-group-text { background: #fff; }

/* ── Sidebar nav badge (Recycle Bin count) ────────────────────── */
.of-fm-nav-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    background: #b02a37;
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
}

/* ── Folder grid ──────────────────────────────────────────────── */
.of-fm-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
}
.of-fm-folder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.1rem 0.6rem 0.85rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    text-decoration: none;
    color: var(--fm-ink);
    text-align: center;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.of-fm-folder-card:hover {
    box-shadow: var(--fm-shadow-2);
    border-color: var(--fm-brand-100);
    transform: translateY(-1px);
}
.of-fm-folder-card-icon { font-size: 2.1rem; line-height: 1; }
.of-fm-folder-card-name {
    font-size: 0.83rem;
    font-weight: 600;
    word-break: break-word;
    color: var(--fm-ink);
}
.of-fm-folder-card-meta { font-size: 0.72rem; color: var(--fm-muted-2); }

/* ── Subfolder chips ──────────────────────────────────────────── */
.of-fm-subfolder-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.25rem 0 0.5rem;
}
.of-fm-subfolder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    transition: border-color 0.15s, background 0.15s;
}
.of-fm-subfolder-chip:hover { border-color: var(--fm-brand-100); background: var(--fm-brand-50); }
.of-fm-subfolder-link { text-decoration: none; color: var(--fm-ink-soft); }
.of-fm-subfolder-link:hover { color: var(--fm-brand); }

/* ── File grid (icon view) ────────────────────────────────────── */
.of-fm-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 0.85rem;
}
.of-fm-file-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.6rem 0.7rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.of-fm-file-card:hover { box-shadow: var(--fm-shadow-2); border-color: var(--fm-brand-100); }
.of-fm-file-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--fm-bg);
    border: 1px solid var(--fm-line-soft);
    text-decoration: none;
}
.of-fm-thumb-img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.of-fm-file-icon { font-size: 2rem; }
.of-fm-file-info { text-align: center; width: 100%; min-width: 0; }
.of-fm-file-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fm-ink);
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}
.of-fm-file-size { font-size: 0.7rem; color: var(--fm-muted-2); margin-top: 0.15rem; }
.of-fm-file-actions {
    display: none;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.of-fm-file-card:hover .of-fm-file-actions,
.of-fm-file-card:focus-within .of-fm-file-actions { display: flex; }
.of-fm-check-file {
    position: absolute;
    top: 8px;
    left: 8px;
    display: none;
    width: 18px;
    height: 18px;
    accent-color: var(--fm-brand);
    cursor: pointer;
}
.fm-selection-mode .of-fm-check-file,
.fm-selection-mode .of-fm-check { display: inline-block !important; }

/* ── Gallery ──────────────────────────────────────────────────── */
.of-fm-gallery-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
}
.of-fm-gallery-modes { display: flex; gap: 0.3rem; }
.of-fm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
}
.of-fm-gallery-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--fm-radius);
    display: block;
    border: 1px solid var(--fm-line-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}
.of-fm-gallery-img:hover { transform: scale(1.02); box-shadow: var(--fm-shadow-2); }

/* ── Details table ────────────────────────────────────────────── */
.of-fm-details-table {
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    overflow: hidden;
}
.of-fm-details-table th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fm-muted);
    background: var(--fm-bg);
    border-bottom: 1px solid var(--fm-line);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.75rem;
}
.of-fm-details-table td {
    font-size: 0.86rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--fm-line-soft);
}
.of-fm-details-table tr:last-child td { border-bottom: none; }
.of-fm-details-table tr:hover td { background: var(--fm-brand-50); }

/* ── Actions bar ──────────────────────────────────────────────── */
.of-fm-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow-1);
}
.of-fm-actions-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* ── View toggle ──────────────────────────────────────────────── */
.of-fm-view-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--fm-bg);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius-sm);
    padding: 2px;
    gap: 2px;
}
.of-fm-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    font-size: 0.95rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--fm-ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.of-fm-view-btn:hover { background: var(--fm-surface); color: var(--fm-brand); }
.of-fm-view-btn.is-active { background: var(--fm-brand); color: #fff; }

/* ── Pagination ───────────────────────────────────────────────── */
.of-fm-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.of-fm-page-info { font-size: 0.82rem; color: var(--fm-muted); }
.of-fm-empty-msg {
    font-size: 0.9rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--fm-muted);
    background: var(--fm-surface);
    border: 1px dashed var(--fm-line);
    border-radius: var(--fm-radius);
    grid-column: 1 / -1;
}

/* ── Responsive: tablet ───────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .of-fm-page { --fm-sidebar-w: 220px; }
    .of-fm-main { padding: 1rem 1.1rem 1.5rem; }
}

/* ── Responsive: small tablet ─────────────────────────────────── */
@media (max-width: 991.98px) {
    .of-fm-page { --fm-sidebar-w: 200px; }
    .of-fm-section-title { font-size: 1.2rem; }
}

/* ── Responsive: mobile (drawer sidebar) ──────────────────────── */
@media (max-width: 767.98px) {
    .of-fm-page { --fm-topbar-h: 52px; }
    .of-fm-topbar { padding: 0 0.75rem; gap: 0.4rem; }
    .of-fm-topbar-text { display: none; }
    .of-fm-sidebar-toggle { display: inline-flex; }
    .of-fm-back-link { padding: 0.32rem 0.45rem; }

    .of-fm-shell { grid-template-columns: 1fr; }

    .of-fm-sidebar {
        position: fixed;
        top: var(--fm-topbar-h);
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: auto;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--fm-shadow-3);
        border-right: 1px solid var(--fm-line);
    }
    .of-fm-sidebar.is-open { transform: translateX(0); }

    body.of-fm-sidebar-open::after {
        content: "";
        position: fixed;
        top: var(--fm-topbar-h);
        left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 35;
    }

    .of-fm-main { padding: 0.85rem 0.85rem 1.5rem; gap: 0.75rem; }
    .of-fm-section-title { font-size: 1.1rem; }
    .of-fm-section-sub { font-size: 0.8rem; }
    .of-fm-search-form { max-width: none; flex: 1 1 100%; }

    .of-fm-drive-cards { grid-template-columns: 1fr; gap: 0.75rem; }
    .of-fm-folder-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
    .of-fm-file-grid   { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
    .of-fm-gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .of-fm-gallery-img { height: 140px; }

    .of-fm-folder-card { padding: 0.85rem 0.4rem 0.7rem; }
    .of-fm-file-card   { padding: 0.7rem 0.45rem 0.6rem; }
    .of-fm-file-thumb, .of-fm-thumb-img { width: 60px; height: 60px; }

    /* On mobile, settings gear always visible (no hover state) */
    .of-fm-drive-card-settings,
    .of-fm-drive-settings-link { opacity: 1; }
    .of-fm-file-actions { display: flex; }

    .of-fm-breadcrumb { padding: 0.45rem 0.6rem; font-size: 0.8rem; }
    .of-fm-actions-bar { padding: 0.5rem 0.55rem; }
}

/* ── Home hub (File Library overview, PR-3) ───────────────────── */
.of-fm-hub-heading {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--fm-muted, #6b7280);
    margin: 1rem 0 0.5rem;
}
.of-fm-hub-grid {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.of-fm-hub-card {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: var(--fm-surface, #fff);
    border: 1px solid var(--fm-border, #e7e9ec);
    border-radius: 12px; padding: 0.8rem 0.9rem;
    text-decoration: none; color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}
.of-fm-hub-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); transform: translateY(-1px); color: inherit; }
.of-fm-hub-card-icon { font-size: 1.5rem; line-height: 1.2; }
.of-fm-hub-card-name { font-weight: 600; font-size: 0.92rem; }
.of-fm-hub-card-sub { font-size: 0.78rem; color: var(--fm-muted, #6b7280); margin-top: 0.1rem; }
.of-fm-hub-card-ai {
    border: 2px solid var(--fm-brand, #4f6df5);
    background: linear-gradient(180deg, rgba(79, 109, 245, 0.05), transparent);
}
.of-fm-hub-chip {
    display: inline-block; margin-top: 0.35rem;
    background: var(--fm-brand, #4f6df5); color: #fff;
    border-radius: 999px; padding: 0.1rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
}
.of-fm-hub-ghost {
    border-style: dashed; align-items: center; justify-content: center;
    color: var(--fm-muted, #6b7280); font-weight: 600; min-height: 74px;
}
.of-fm-ai-badge {
    display: inline-block; font-size: 0.72rem; line-height: 1;
    border-radius: 999px; padding: 0.12rem 0.4rem;
    background: rgba(79, 109, 245, 0.12); border: 1px solid rgba(79, 109, 245, 0.4);
    cursor: default;
}

/* ── Responsive: very small phones ────────────────────────────── */
/* Folded from a one-off 419.98px into the canonical small-phone breakpoint.
   Two breakpoints 60px apart doing the same job is the drift the design system
   exists to remove; these grids now change at the same width as every other
   small-phone rule. */
@media (max-width: 479.98px) {
    .of-fm-back-link { display: none; }
    .of-fm-topbar-icon { font-size: 1.05rem; }
    .of-fm-folder-grid { grid-template-columns: repeat(2, 1fr); }
    .of-fm-file-grid   { grid-template-columns: repeat(2, 1fr); }
    .of-fm-hub-grid    { grid-template-columns: repeat(2, 1fr); }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
    .of-fm-topbar, .of-fm-sidebar, .of-fm-actions-bar, .of-fm-toolbar,
    .of-fm-file-actions, .of-fm-drive-card-settings, .of-fm-drive-settings-link { display: none !important; }
    .of-fm-shell { grid-template-columns: 1fr; }
    .of-fm-main { padding: 0; }
}

/* ── Storage usage strip (drives section) ────────────────────── */
.of-fm-storage-strip {
    background: var(--fm-surface, #fff);
    border: 1px solid var(--fm-border, #e7e9ec);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin: 0.25rem 0 1rem;
}
.of-fm-storage-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.of-fm-storage-meta strong { font-size: 0.92rem; color: var(--fm-fg, #1f2330); }

/* ── Toolbar chips (Linked Files filters) ────────────────────── */
.of-fm-toolbar-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}
.of-fm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 999px;
    border: 1px solid var(--fm-border, #e1e4e9);
    background: #fff;
    color: var(--fm-fg, #2b2f3a);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.of-fm-chip:hover { background: #f6f7f9; }
.of-fm-chip.is-active {
    background: var(--fm-accent, #2563eb);
    border-color: var(--fm-accent, #2563eb);
    color: #fff;
}
.of-fm-chip.is-active .text-muted { color: rgba(255, 255, 255, 0.85) !important; }

/* ================================================================
   ADMIN MANUAL — staff-only manual blocks (of-am-*)
   ================================================================ */
.of-am-block {
    margin: 2rem 0 1rem;
    padding: 1rem 1.1rem 0.85rem;
    background: linear-gradient(180deg, #fffaf2 0%, #fff7eb 100%);
    border: 1px dashed #d8a866;
    border-left: 4px solid #b56a16;
    border-radius: 12px;
    color: #3d2c14;
    box-shadow: 0 1px 3px rgba(120, 80, 20, 0.08);
}
.of-am-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.of-am-block-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}
.of-am-block-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: #b56a16;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
}
.of-am-block-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #3d2c14;
    letter-spacing: -0.01em;
}
.of-am-block-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.of-am-block-key {
    font-size: 0.72rem;
    background: rgba(181, 106, 22, 0.1);
    color: #6b3e0a;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.of-am-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: #b56a16;
    color: #fff;
    border: 1px solid #b56a16;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.of-am-block-btn:hover { background: #8f5310; color: #fff; }
.of-am-block-btn-ghost {
    background: transparent;
    color: #6b3e0a;
    border-color: rgba(181, 106, 22, 0.4);
}
.of-am-block-btn-ghost:hover { background: rgba(181, 106, 22, 0.12); color: #3d2c14; }
.of-am-block-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #3d2c14;
}
.of-am-block-body :first-child { margin-top: 0; }
.of-am-block-body :last-child { margin-bottom: 0; }
.of-am-block-body h1, .of-am-block-body h2, .of-am-block-body h3, .of-am-block-body h4 {
    color: #3d2c14;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}
.of-am-block-body h2 { font-size: 1rem; font-weight: 700; }
.of-am-block-body h3 { font-size: 0.92rem; font-weight: 700; }
.of-am-block-body code {
    background: rgba(181, 106, 22, 0.1);
    color: #6b3e0a;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.82em;
}
.of-am-block-body pre {
    background: #2b2014;
    color: #f3e8d4;
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.78rem;
}
.of-am-block-body pre code { background: transparent; color: inherit; padding: 0; }
.of-am-block-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.82rem;
}
.of-am-block-body th, .of-am-block-body td {
    border: 1px solid rgba(181, 106, 22, 0.25);
    padding: 0.4rem 0.55rem;
    text-align: left;
}
.of-am-block-body th { background: rgba(181, 106, 22, 0.08); font-weight: 600; }
.of-am-block-body ul, .of-am-block-body ol { padding-left: 1.4rem; }
.of-am-empty { color: #8a6a3a; margin: 0; }
.of-am-block-foot {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(181, 106, 22, 0.3);
    font-size: 0.72rem;
    color: #8a6a3a;
}
@media (max-width: 575.98px) {
    .of-am-block { padding: 0.8rem 0.85rem; margin: 1.5rem 0 0.75rem; }
    .of-am-block-title { font-size: 0.95rem; }
}
@media print {
    .of-am-block { display: none !important; }
}

/* Admin-only quick-access cluster in the top navbar (manual toggle, issue reports, �). */
.of-admin-quick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding-right: 8px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.of-admin-quick form { margin: 0; }
.of-admin-quick-btn { position: relative; }
/* Left-side variant: sits next to the brand, divider on the RIGHT instead of the right edge. */
.of-admin-quick.of-admin-quick-left {
    margin-right: 0;
    margin-left: 8px;
    padding-right: 8px;
    padding-left: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.of-admin-quick-btn.is-on {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.10);
    border-radius: 8px;
}




/* Restored 2026-08-17: this bare rule is NOT superseded by the hoisted
   `.of-admin-bar .of-admin-quick-dot` above — that one is a DESCENDANT selector,
   so it only wins inside the admin bar. This styles the dot everywhere else.
   Removing it was a mistake caught by re-reading the selector rather than the
   class name. */
.of-admin-quick-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #198754;
    box-shadow: 0 0 0 2px var(--of-top-navbar-bg-override, #fffbf4);
}

/* ==========================================================================
   23b. GLOBAL SHELL CHROME (hoisted from templates/base.html, 2026-08-17)
   The verify banner, the staff admin bar and the Explore dialog. These lived in
   an inline <style> in base.html, so they loaded on EVERY page, were invisible to
   the style guide, and could not be themed. Moved verbatim.
   NOTE: .of-admin-quick-dot below is the version that was actually rendering. The
   stylesheet had a DIFFERENT rule of the same name (green 9px vs blue 6px) that
   this block silently overrode, so the dead one was removed rather than kept.
   ========================================================================== */
.of-verify-banner {
        position: relative; z-index: 1045;
        display: flex; align-items: center; justify-content: center;
        background: #fffbe6; border-bottom: 1px solid #f0c040;
        padding: 7px 52px; font-size: .85rem; color: #6b4f00; text-align: center;
    }
    .of-verify-link, .of-verify-link-btn {
        color: #df7a2f; font-weight: 600; text-decoration: none;
        background: none; border: none; padding: 0; cursor: pointer; font-size: inherit;
    }
    .of-verify-link:hover, .of-verify-link-btn:hover { text-decoration: underline; }
    .of-verify-close {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        background: none; border: none; font-size: 1.3rem; color: #6b4f00;
        cursor: pointer; line-height: 1;
    }
    /* ── Admin toolbar (secondary bar, centered, snaps below header via JS) ── */
    .of-admin-bar {
        position: fixed;
        top: 0;               /* JS overrides this immediately on load */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1041;        /* above the sticky header (1040) */
        display: flex;
        align-items: center;
        gap: 2px;
        background: rgba(255, 252, 240, 0.97);
        border: 1.5px solid rgba(223, 122, 47, 0.4);
        border-radius: 0 0 1.5rem 1.5rem;
        border-top: none;
        padding: .22rem .6rem;
        box-shadow: 0 4px 14px rgba(29,86,96,.18);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: top 0.1s;
        white-space: nowrap;
    }
    .of-admin-bar .of-admin-quick-dot {
        position: absolute; top: 3px; right: 3px;
        width: 6px; height: 6px; border-radius: 50%;
        background: #0d6efd;
    }
    .of-admin-bar-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 1rem;
        color: #df7a2f;
        cursor: pointer;
        padding: .15rem .4rem;
        line-height: 1;
        border-radius: 50%;
    }
    .of-admin-bar-toggle:hover { background: rgba(223,122,47,.12); }
    .of-admin-bar-btns { display: flex; align-items: center; gap: 2px; }
    @media (max-width: 575.98px) {
        .of-admin-bar { padding: .18rem .35rem; }
        .of-admin-bar-toggle { display: inline-flex; align-items: center; justify-content: center; }
        .of-admin-bar-btns { display: none; }
        .of-admin-bar-btns.is-open { display: flex; }
    }
    /* Explore OrbitingFox — dropdown-style popup, two-column */
    #ofPublicPagesModal { pointer-events: none; }
    #ofPublicPagesModal.show { pointer-events: auto; }
    /* Two classes beat Bootstrap's single .modal-dialog on specificity, so this no
       longer needs !important — the rule the design system asks for is "fix the
       selector", and here that is a one-word change. */
    .modal .of-explore-dialog,
    .of-explore-dialog.of-explore-dialog {
        position: fixed;
        bottom: 5rem; right: 1.5rem;
        top: auto; left: auto; margin: 0;
        width: 480px; max-width: calc(100vw - 2rem);
    }
    .of-explore-menu {
        border-radius: 0.6rem;
        border: 1px solid rgba(0,0,0,.12);
        box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.18);
        background: #fff;
        overflow: hidden;
    }
    .of-explore-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.4rem 1rem;
        border-bottom: 1px solid #e9ecef;
        background: #f8fafa;
    }
    .of-explore-label {
        font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; color: #6c757d;
    }
    .of-explore-body {
        display: flex;
    }
    .of-explore-pages {
        flex: 1;
        border-right: 1px solid #e9ecef;
        padding: 0.3rem 0;
    }
    .of-explore-list {
        list-style: none; margin: 0; padding: 0.4rem;
        display: flex; flex-direction: column; gap: 0.25rem;
    }
    .of-explore-list li a {
        display: block; padding: 0.42rem 0.85rem;
        font-size: 0.85rem; font-weight: 600; color: #1d5660;
        text-decoration: none;
        border: 1.5px solid #b2d4d8;
        border-radius: 0.45rem;
        background: #f4fafb;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .of-explore-list li a:hover {
        background: #1d5660; color: #fff; border-color: #1d5660;
    }
    .of-explore-tips {
        width: 190px; flex-shrink: 0;
        padding: 0.75rem 1rem;
        background: #f8fdf8;
    }
    .of-explore-tips-title {
        font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; color: #1d5660; margin: 0 0 0.5rem;
    }
    .of-explore-tips-list {
        list-style: none; margin: 0; padding: 0;
    }
    .of-explore-tips-list li {
        font-size: 0.82rem; color: #2e5a60;
        padding: 0.28rem 0;
        border-bottom: 1px solid #e0eeef;
        line-height: 1.3;
    }
    .of-explore-tips-list li:last-child { border-bottom: none; }
    .of-explore-tips-footer {
        margin-top: 0.6rem;
        font-size: 0.72rem; color: #6c757d; font-style: italic;
    }


/* ==========================================================================
   23c. ADMIN DASHBOARD (hoisted from templates/core/admin_dashboard.html,
        2026-08-17)
   588 lines of CSS defining 59 classes lived inside the page: a second
   stylesheet nobody could find, invisible to /adminapp/design-system/ and
   unreachable by any admin theme. Moved verbatim here first — colours are
   tokenised in a following pass so the move itself changes nothing visually.
   Placed before the utilities section so utility classes still win.
   ========================================================================== */
/* ── Two-column shell ── */
  .of-admin-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  /* ── Shared card look ── */
  .of-admin-sidebar,
  .of-admin-panel,
  .of-admin-stat-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: var(--of-surface-strong);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  }

  /* ── Sidebar ── */
  .of-admin-sidebar {
    position: sticky;
    top: 6.25rem;
    padding: 1.25rem;
    background:
      linear-gradient(180deg, rgba(250, 204, 21, 0.18) 0%, rgba(255, 255, 255, 0.98) 48%),
      var(--of-surface-strong);
  }

  .of-admin-kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--of-brand);
    font-weight: 700;
  }

  .of-admin-title {
    font-family: "Fraunces", serif;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    color: var(--of-ink);
    margin: 0.5rem 0 0.65rem;
  }

  .of-admin-copy { color: var(--of-muted); }

  .of-admin-quiet-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: var(--of-ink);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
  }
  .of-admin-quiet-link:hover { text-decoration: underline; }

  /* AdminApp Settings sidebar link — amber accent */
  .of-admin-settings-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    text-decoration: none;
    background: var(--of-warning-soft);
    border: 1.5px solid var(--of-warning);
    color: var(--of-warning-ink);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.85rem;
  }
  .of-admin-settings-nav-link:hover { background: var(--of-warning-soft); }

  .of-admin-nav {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
  }

  .of-admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--of-ink);
    font-size: 0.88rem;
  }
  .of-admin-nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  }

  .of-admin-nav-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--of-ink);
    color: var(--of-bg);
    font-size: 0.68rem;
    font-weight: 700;
    flex: 0 0 auto;
  }

  .of-admin-nav-copy { display: grid; gap: 0.1rem; }
  .of-admin-nav-name { font-weight: 700; font-size: 0.88rem; }
  .of-admin-nav-detail { font-size: 0.78rem; color: var(--of-muted); }

  /* ── Main column ── */
  .of-admin-main { display: grid; gap: 1.25rem; }

  /* ── Overview hero panel ── */
  .of-admin-panel {
    padding: 1.5rem;
    background:
      radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 32%),
      linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
  }

  .of-admin-section-kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--of-brand);
    font-weight: 700;
  }

  .of-admin-section-title {
    font-family: "Fraunces", serif;
    color: var(--of-ink);
    font-size: 1.55rem;
    margin: 0.4rem 0 0.5rem;
  }

  .of-admin-section-copy { color: var(--of-muted); margin: 0; }

  .of-admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.1rem;
    align-items: center;
  }

  /* Amber "AdminApp Settings" button in hero */
  .of-button-adminapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 1.5px solid var(--of-warning);
    background: var(--of-warning-soft);
    color: var(--of-warning-ink);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
  }
  .of-button-adminapp:hover { background: var(--of-warning-soft); color: var(--of-warning-ink); }

  /* ── 4-stat row ── */
  .of-admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .of-admin-stat-card {
    padding: 1rem 1.05rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  }

  .of-admin-stat-card.is-alert {
    background: linear-gradient(180deg, var(--of-warning-soft), var(--of-warning-soft));
    border-color: var(--of-warning);
  }

  /* A stat card that is also a link. Element+class, so it beats the plain rule
     above without !important and the tile does not pick up link underline/colour. */
  a.of-admin-stat-card {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .of-admin-stat-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--of-ink);
  }

  .of-admin-stat-card.is-alert .of-admin-stat-value { color: var(--of-warning); }

  .of-admin-stat-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.88rem;
    color: var(--of-muted);
  }

  /* ── Search bar ── */
  .of-admin-search-wrap { margin: 0.5rem 0 0; }

  .of-admin-search-input {
    width: 100%;
    padding: 0.6rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--of-surface-strong);
    font-size: 0.95rem;
  }
  .of-admin-search-input:focus {
    outline: none;
    border-color: var(--of-brand);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
  }

  /* ── Category tab bar ── */
  .of-admin-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 18px;
    background: var(--of-bg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 4.5rem;
    z-index: 5;
  }

  .of-admin-cat-nav-link {
    flex: 0 1 auto;
    padding: 0.45rem 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--of-ink);
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .of-admin-cat-nav-link:hover {
    background: var(--of-surface-strong);
    color: var(--of-ink);
    border-color: rgba(15, 23, 42, 0.10);
  }

  /* .of-admin-count is the same pill named by ROLE rather than by the one place it
     first appeared, so a count elsewhere on the page can reuse it instead of
     reaching for Bootstrap's `badge text-bg-danger`. Both names share one rule —
     an alias, not a copy. */
  .of-admin-cat-nav-count,
  .of-admin-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.74rem;
    background: rgba(15, 23, 42, 0.08);
    color: var(--of-muted);
    font-weight: 600;
  }

  /* ── Expand/Collapse toolbar ── */
  .of-admin-collapse-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .of-admin-collapse-toolbar .of-button {
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 10px;
  }
  .of-admin-collapse-toolbar .of-collapse-hint {
    font-size: 0.8rem;
    color: var(--of-muted);
  }

  /* ── Collapsible <details> ── */
  .of-admin-collapse {
    border-radius: 18px;
    background: var(--of-surface-strong);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
  }
  .of-admin-collapse[open] {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.14);
  }
  .of-admin-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    user-select: none;
  }
  .of-admin-collapse > summary::-webkit-details-marker { display: none; }
  .of-admin-collapse > summary:hover { background: var(--of-bg); }

  .of-admin-collapse-chevron {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--of-bg-deep);
    color: var(--of-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s;
    font-size: 0.85rem;
    line-height: 1;
  }
  .of-admin-collapse[open] > summary .of-admin-collapse-chevron {
    transform: rotate(90deg);
    background: var(--of-brand);
    color: var(--of-surface-strong);
  }

  .of-admin-collapse-title {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  .of-admin-collapse-title h3,
  .of-admin-collapse-title h2 {
    margin: 0;
    font-family: "Fraunces", serif;
    color: var(--of-ink);
    font-size: 1.1rem;
    line-height: 1.25;
  }

  .of-admin-collapse-kicker {
    font-size: 0.7rem;
    color: var(--of-brand);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
  }

  .of-admin-collapse-meta {
    font-size: 0.78rem;
    color: var(--of-muted);
    background: var(--of-bg-deep);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .of-admin-collapse-body { padding: 0 1.1rem 1.1rem; }

  /* ── Admin Help card ── */
  .of-admin-help-card {
    border-radius: 0 0 18px 18px;
    border: none;
    background: linear-gradient(135deg, var(--of-accent-soft) 0%, var(--of-accent-soft) 100%);
    padding: 1rem 1.1rem;
  }
  .of-admin-help-summary {
    color: var(--of-brand-strong);
    font-size: 0.93rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
  }
  .of-admin-help-pillars {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
  }
  .of-admin-help-pillars li {
    background: var(--of-surface-strong);
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
  }
  .of-admin-help-pillars b { display: block; color: var(--of-ink); font-size: 0.88rem; margin-bottom: 0.15rem; }
  .of-admin-help-pillars span { color: var(--of-muted); font-size: 0.8rem; line-height: 1.35; }
  .of-admin-help-flow {
    padding: 0.6rem 0.9rem;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 9px;
    color: var(--of-ink);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
  }

  /* ── Info "i" button ── */
  .of-info-details { display: inline-block; vertical-align: middle; }
  .of-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid rgba(13, 148, 136, 0.45);
    background: var(--of-surface-strong);
    color: var(--of-brand);
    font-family: "Fraunces", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    list-style: none;
    user-select: none;
  }
  .of-info-btn::-webkit-details-marker { display: none; }
  .of-info-btn:hover, details[open] > .of-info-btn { background: var(--of-brand); color: var(--of-surface-strong); }
  .of-info-panel {
    display: block;
    margin-top: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--of-accent-soft);
    border: 1px solid rgba(13, 148, 136, 0.25);
    color: var(--of-brand-strong);
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .of-info-panel p { margin: 0 0 0.4rem; }
  .of-info-panel p:last-child { margin-bottom: 0; }

  /* ── App cards (replacing tiles) ── */
  .of-admin-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .of-admin-app-card {
    background: var(--of-surface-strong);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: box-shadow 0.15s, border-color 0.15s;
  }
  .of-admin-app-card:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
    border-color: rgba(15, 23, 42, 0.15);
  }
  .of-admin-app-card.is-disabled { opacity: 0.55; }

  /* Alert card (e.g., new contact messages) */
  .of-admin-app-card.is-alert {
    border-color: var(--of-warning);
    background: linear-gradient(135deg, var(--of-warning-soft), var(--of-surface-strong));
  }

  /* Cost card — light red, used for Cost & Usage Monitor */
  .of-admin-app-card.is-cost {
    border-color: var(--of-danger);
    border-width: 2px;
    background: linear-gradient(135deg, var(--of-danger-ink), var(--of-surface-strong));
  }
  .of-admin-app-card.is-cost:hover {
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.15);
    border-color: var(--of-danger);
  }
  .of-admin-app-card.is-cost .of-admin-app-card-kicker { color: var(--of-danger); }
  .of-admin-app-card.is-cost .of-admin-app-card-stat-value { color: var(--of-danger); }

  .of-admin-app-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .of-admin-app-card-kicker {
    font-size: 0.7rem;
    color: var(--of-brand);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
  }
  .of-admin-app-card.is-alert .of-admin-app-card-kicker { color: var(--of-warning); }

  .of-admin-app-card-title {
    font-family: "Fraunces", serif;
    font-size: 1.1rem;
    color: var(--of-ink);
    margin: 0.12rem 0 0;
    line-height: 1.2;
  }

  .of-admin-app-card-stat {
    text-align: right;
    flex: 0 0 auto;
  }
  .of-admin-app-card-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--of-ink);
    line-height: 1;
  }
  .of-admin-app-card.is-alert .of-admin-app-card-stat-value { color: var(--of-warning); }
  .of-admin-app-card-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--of-muted);
    margin-top: 0.2rem;
  }

  .of-admin-app-card-desc {
    font-size: 0.86rem;
    color: var(--of-muted);
    line-height: 1.45;
    margin: 0;
    flex: 1 1 auto;
  }

  .of-admin-app-card-meta {
    font-size: 0.77rem;
    color: var(--of-muted);
    background: var(--of-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .of-admin-app-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
  }

  .of-admin-disabled-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    color: var(--of-muted);
    font-weight: 600;
    background: var(--of-bg);
    font-size: 0.88rem;
  }

  /* Scroll anchors */
  .of-admin-cat-section { scroll-margin-top: 8rem; }

  /* Category description */
  .of-admin-cat-head-desc { color: var(--of-muted); font-size: 0.9rem; margin: 0 0 0.5rem; }

  /* --- Pinned status banners -------------------------------------------------
     of-setup-banner / of-setup-todo / of-setup-done were used by the template
     and defined NOWHERE, so the banner carried a four-line inline style with six
     hardcoded hexes instead — the exact failure DESIGN.md §1 describes, where an
     undefined class manufactures an inline style. Defining them properly makes
     the banner follow the admin's theme. States use color-mix against the
     semantic token, the same idiom as .of-admin-quicklink below. */
  .of-setup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--of-space-2);
    padding: 0.7rem 1.1rem;
    margin-bottom: var(--of-space-3);
    border-radius: var(--of-radius-md);
    border: var(--of-border-medium);
    font-weight: var(--of-weight-semibold);
    text-decoration: none;
  }

  .of-setup-banner-cta { white-space: nowrap; }

  .of-setup-todo {
    background: color-mix(in srgb, var(--of-warning) 12%, var(--of-surface-strong));
    border-color: color-mix(in srgb, var(--of-warning) 55%, transparent);
    color: var(--of-warning-ink);
  }

  .of-setup-done {
    background: color-mix(in srgb, var(--of-success) 12%, var(--of-surface-strong));
    border-color: color-mix(in srgb, var(--of-success) 55%, transparent);
    color: var(--of-success-ink);
  }

  .of-setup-info {
    background: color-mix(in srgb, var(--of-info) 12%, var(--of-surface-strong));
    border-color: color-mix(in srgb, var(--of-info) 55%, transparent);
    color: var(--of-info-ink);
  }

  /* --- Sidebar quick-link groups ---------------------------------------------
     The sidebar was 15 links each carrying its own hardcoded background, border
     and text colour — fifteen different colours reading as noise rather than
     grouping, and none of them reachable by an admin theme. They are now uniform
     .of-admin-quicklink tiles separated by these labelled groups: the grouping
     carries the meaning, so colour is free to stay consistent and themeable.
     Only genuine STATE (setup incomplete, workers paused) is coloured. */
  .of-admin-quicklink-group {
    display: block;
    margin: var(--of-space-3) 0 var(--of-space-1);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-bold);
    letter-spacing: var(--of-tracking-wide);
    text-transform: uppercase;
    color: var(--of-muted);
  }

  .of-admin-quicklink-group:first-of-type { margin-top: var(--of-space-2); }

  /* The -warn / -ok state modifiers are NOT here: .of-admin-quicklink itself is
     defined in §24, which is later in the file, so a modifier placed in this
     section would lose to the base rule at equal specificity and silently do
     nothing. They live beside it. */

  @media (max-width: 991.98px) {
    .of-admin-shell { grid-template-columns: 1fr; }
    .of-admin-sidebar { position: static; }
    .of-admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 767.98px) {
    .of-admin-panel,
    .of-admin-sidebar,
    .of-admin-collapse,
    .of-admin-app-card,
    .of-admin-stat-card { border-radius: 18px; }
    .of-admin-summary-grid { grid-template-columns: 1fr; }
    .of-admin-app-grid { grid-template-columns: 1fr; }
    .of-admin-cat-nav { top: 3.5rem; }
  }


/* ==========================================================================
   23d. ADMIN PAGES (hoisted from adminapp templates, 2026-08-17)
   These rules lived in inline <style> blocks inside individual admin pages,
   which made them invisible to /adminapp/design-system/, unreachable by any
   admin theme, and impossible to find when the same look was wanted elsewhere.
   Moved verbatim; colours are tokenised in the following pass. Each block keeps
   a comment naming the page it came from.
   ========================================================================== */

/* --- Narrow form control on an admin settings page (#109 part 2, 2026-08-24) ---
   A number or a short select stretched to full card width reads as if it wants a
   sentence. Capped so the control's size hints at the size of the answer. Used on
   /adminapp/orbitpilot-controls/public-access/; reuse it rather than adding a
   second narrow-input class. */
.of-input-narrow {
    max-width: 22rem;
}

/* --- Error-tracking source tags (3c.3, 2026-08-23) ---
   Authorship pill on /adminapp/errortracking-controls/ (admin / staff / user /
   AI agent). Tokenised via color-mix over the module tokens — same convention
   as .of-blink-badge.mod-appointment — so an admin theme change carries here
   too. Keep in this admin section; do NOT append to the utilities tail. */
.of-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--of-brand-strong) 8%, white);
    color: color-mix(in srgb, var(--of-brand-strong) 78%, black);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.of-source-badge.mod-ai {
    background: color-mix(in srgb, var(--of-blink) 14%, white);
    color: color-mix(in srgb, var(--of-blink) 78%, black);
}
.of-source-badge.mod-admin {
    background: color-mix(in srgb, var(--of-accent) 16%, white);
    color: color-mix(in srgb, var(--of-accent) 82%, black);
}
.of-source-badge.mod-topic {
    background: color-mix(in srgb, var(--of-ink) 6%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
}

/* --- Dev Hub (backlog §0b, 2026-08-23) ---
   /adminapp/devhub/ and its item pages. Same tokenised colour-mix convention as
   .of-source-badge above, so an admin theme change carries here too. Status
   modifiers mirror DevItem.STATUS_CHOICES; priority modifiers mirror p1/p2/p3;
   author modifiers mirror DevItemNote.AUTHOR_KIND_CHOICES. Keep in this admin
   section; do NOT append to the utilities tail. */
/* BL-55 — the Dev Hub's running number. It is context, not something to act on, so
   on a phone it gives way rather than pushing an already-dense table into a sideways
   scroll: an over-wide table drags the whole page with it, not just itself. */
.of-devhub-seq { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .of-devhub-seq-col { display: none; }
}

.of-devhub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-brand-strong) 8%, white);
    color: color-mix(in srgb, var(--of-brand-strong) 78%, black);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
}
/* Waiting states read cool and quiet; work-in-flight reads accented; closed
   states read final. Nothing here hardcodes a hex — a retheme carries through. */
.of-devhub-badge.mod-proposed,
.of-devhub-badge.mod-queued {
    background: color-mix(in srgb, var(--of-ink) 7%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
}
.of-devhub-badge.mod-picked_up,
.of-devhub-badge.mod-in_progress {
    background: color-mix(in srgb, var(--of-info) 14%, white);
    color: color-mix(in srgb, var(--of-info-ink) 88%, black);
}
.of-devhub-badge.mod-blocked,
.of-devhub-badge.mod-warning {
    background: color-mix(in srgb, var(--of-warning) 14%, white);
    color: color-mix(in srgb, var(--of-warning-ink) 90%, black);
}
.of-devhub-badge.mod-done {
    background: color-mix(in srgb, var(--of-success) 14%, white);
    color: color-mix(in srgb, var(--of-success-ink) 88%, black);
}
.of-devhub-badge.mod-failed {
    background: color-mix(in srgb, var(--of-danger) 12%, white);
    color: color-mix(in srgb, var(--of-danger-ink) 90%, black);
}
.of-devhub-badge.mod-wont_do,
.of-devhub-badge.mod-muted {
    background: color-mix(in srgb, var(--of-ink) 6%, white);
    color: color-mix(in srgb, var(--of-ink) 62%, white);
}
.of-devhub-badge.mod-p1 {
    background: color-mix(in srgb, var(--of-danger) 12%, white);
    color: color-mix(in srgb, var(--of-danger-ink) 90%, black);
}
.of-devhub-badge.mod-p2 {
    background: color-mix(in srgb, var(--of-accent) 14%, white);
    color: color-mix(in srgb, var(--of-accent-ink) 92%, black);
}
.of-devhub-badge.mod-p3 {
    background: color-mix(in srgb, var(--of-ink) 6%, white);
    color: color-mix(in srgb, var(--of-ink) 66%, white);
}
.of-devhub-badge.mod-ai {
    background: color-mix(in srgb, var(--of-blink) 14%, white);
    color: color-mix(in srgb, var(--of-blink) 78%, black);
}
.of-devhub-badge.mod-admin {
    background: color-mix(in srgb, var(--of-accent) 16%, white);
    color: color-mix(in srgb, var(--of-accent-ink) 92%, black);
}
.of-devhub-badge.mod-developer {
    background: color-mix(in srgb, var(--of-brand) 12%, white);
    color: color-mix(in srgb, var(--of-brand-ink) 88%, black);
}

/* Report #126: bare nav-pills only look like controls once you hover — which on
   a phone is never — so the owner and his staff could not tell the tabs were
   tabs. Each one now carries a border and a surface of its own, and the active
   one is unmistakable. */
.of-devhub-tab {
    border: 1px solid color-mix(in srgb, var(--of-brand) 35%, white);
    background: color-mix(in srgb, var(--of-brand) 6%, white);
    color: color-mix(in srgb, var(--of-brand-ink) 90%, black);
    border-radius: var(--of-radius-pill);
    padding: 0.35rem 0.7rem;
    font-weight: var(--of-weight-semibold);
    transition: background var(--of-transition-fast), border-color var(--of-transition-fast);
}
.of-devhub-tab:hover,
.of-devhub-tab:focus-visible {
    background: color-mix(in srgb, var(--of-brand) 14%, white);
    border-color: color-mix(in srgb, var(--of-brand) 55%, white);
}
.nav-pills .nav-link.of-devhub-tab.active {
    background: var(--of-brand);
    border-color: var(--of-brand);
    color: var(--of-on-brand);
}

/* THE ONE TAB THAT IS ABOUT HIM, NOT ABOUT THE WORK (owner request, 2026-09-01:
   "make the Needs You tab in a red or pink color").

   Every other tab is somewhere to look. This one is a queue of things that
   CANNOT MOVE WITHOUT HIM -- and while an item sits on it, the work behind it is
   stopped. Colouring it apart from its neighbours is the point: it should read
   as "you" rather than as one more section.

   Built from --of-danger rather than a hex so the admin's Appearance settings
   still reach it, and kept lighter than a real danger surface -- this is
   attention, not an error. The ACTIVE state deliberately keeps the full danger
   fill, because that is the moment he is actually on the page. */
.of-devhub-tab-attention {
    border-color: color-mix(in srgb, var(--of-danger) 45%, white);
    background: color-mix(in srgb, var(--of-danger) 9%, white);
    color: var(--of-danger-ink);
}
.of-devhub-tab-attention:hover,
.of-devhub-tab-attention:focus-visible {
    background: color-mix(in srgb, var(--of-danger) 18%, white);
    border-color: color-mix(in srgb, var(--of-danger) 65%, white);
    color: var(--of-danger-ink);
}
.nav-pills .nav-link.of-devhub-tab.of-devhub-tab-attention.active {
    background: var(--of-danger);
    border-color: var(--of-danger);
    color: var(--of-on-danger);
}

/* A "soon" tab is a non-link on purpose: the owner can see the planned shape of
   the hub without clicking into a page that does not exist yet. */
.of-devhub-tab-soon {
    color: color-mix(in srgb, var(--of-ink) 45%, white);
    background: color-mix(in srgb, var(--of-ink) 4%, white);
    border-style: dashed;
    border-color: color-mix(in srgb, var(--of-ink) 20%, white);
    cursor: default;
}
.of-devhub-soon {
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    opacity: 0.75;
}

/* One message in an item's thread. The left rule tells admin, developer and AI
   apart at a glance without relying on reading the badge. */
.of-devhub-note {
    border-left: 3px solid color-mix(in srgb, var(--of-ink) 18%, white);
    padding: 0.5rem 0 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.of-devhub-note.mod-ai { border-left-color: color-mix(in srgb, var(--of-blink) 60%, white); }
.of-devhub-note.mod-admin { border-left-color: color-mix(in srgb, var(--of-accent) 70%, white); }
.of-devhub-note.mod-developer { border-left-color: color-mix(in srgb, var(--of-brand) 55%, white); }
.of-devhub-prewrap {
    white-space: pre-wrap;
    word-break: break-word;
}
/* Phase pills on the Backlog (owner request 2026-08-23: "use colours for better
   organisation"). Each phase borrows an EXISTING module token rather than
   introducing new colours — so the roadmap stays legible after an admin
   retheme, and the palette does not grow a thirteenth hue nobody chose. */
.of-devhub-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--of-radius-pill);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
    background: color-mix(in srgb, var(--of-ink) 7%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
}
.of-devhub-phase.mod-owner {
    background: color-mix(in srgb, var(--of-accent) 16%, white);
    color: color-mix(in srgb, var(--of-accent-ink) 92%, black);
}
.of-devhub-phase.mod-devhub {
    background: color-mix(in srgb, var(--of-brand) 14%, white);
    color: color-mix(in srgb, var(--of-brand-ink) 88%, black);
}
.of-devhub-phase.mod-free_tier {
    background: color-mix(in srgb, var(--of-success) 14%, white);
    color: color-mix(in srgb, var(--of-success-ink) 88%, black);
}
.of-devhub-phase.mod-brand {
    background: color-mix(in srgb, var(--of-microsites) 16%, white);
    color: color-mix(in srgb, var(--of-microsites) 82%, black);
}
.of-devhub-phase.mod-reports {
    background: color-mix(in srgb, var(--of-danger) 12%, white);
    color: color-mix(in srgb, var(--of-danger-ink) 90%, black);
}
.of-devhub-phase.mod-performance {
    background: color-mix(in srgb, var(--of-finance) 16%, white);
    color: color-mix(in srgb, var(--of-finance) 82%, black);
}
.of-devhub-phase.mod-ops {
    background: color-mix(in srgb, var(--of-info) 14%, white);
    color: color-mix(in srgb, var(--of-info-ink) 88%, black);
}
.of-devhub-phase.mod-errortracking {
    background: color-mix(in srgb, var(--of-rag) 16%, white);
    color: color-mix(in srgb, var(--of-rag) 82%, black);
}
.of-devhub-phase.mod-process {
    background: color-mix(in srgb, var(--of-files) 14%, white);
    color: color-mix(in srgb, var(--of-files) 82%, black);
}
.of-devhub-phase.mod-docs {
    background: color-mix(in srgb, var(--of-goals) 16%, white);
    color: color-mix(in srgb, var(--of-goals) 82%, black);
}
.of-devhub-phase.mod-product {
    background: color-mix(in srgb, var(--of-projects) 16%, white);
    color: color-mix(in srgb, var(--of-projects) 82%, black);
}
.of-devhub-phase.mod-parked {
    background: color-mix(in srgb, var(--of-ink) 6%, white);
    color: color-mix(in srgb, var(--of-ink) 55%, white);
}

/* A left rule in the phase's own colour, so scanning the list groups by phase
   without reading a single word. */
.of-devhub-row-owner { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-accent) 60%, white); }
.of-devhub-row-devhub { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-brand) 60%, white); }
.of-devhub-row-free_tier { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-success) 60%, white); }
.of-devhub-row-brand { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-microsites) 60%, white); }
.of-devhub-row-reports { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-danger) 55%, white); }
.of-devhub-row-performance { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-finance) 60%, white); }
.of-devhub-row-ops { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-info) 60%, white); }
.of-devhub-row-errortracking { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-rag) 60%, white); }
.of-devhub-row-process { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-files) 60%, white); }
.of-devhub-row-docs { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-goals) 60%, white); }
.of-devhub-row-product { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-projects) 60%, white); }
.of-devhub-row-parked { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--of-ink) 30%, white); }

/* Sortable column headings on the reports table (R-114). They must LOOK
   clickable — the previous sort control was a dropdown nobody found, and a
   heading that sorts without saying so is just as invisible. */
.of-sort-th {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--of-ink) 35%, white);
    white-space: nowrap;
}
.of-sort-th:hover,
.of-sort-th:focus-visible {
    color: var(--of-brand-ink);
    border-bottom-style: solid;
}
.of-sort-th.is-active {
    color: var(--of-brand-ink);
    font-weight: var(--of-weight-bold);
    border-bottom: 2px solid var(--of-brand);
}

/* Status cell on the backlog (owner request 2026-08-24): the badge answers
   "what is happening to this?" at a glance and the editor sits under it, so the
   column reads before it edits. */
.of-devhub-status-cell {
    min-width: 9rem;
}

/* "Added" column on the backlog (owner request 2026-08-24). The date carries the
   weight; the time and the "last changed" line sit quieter beneath it, so the
   column answers "when did this arrive?" at a glance without competing with the
   item title. */
.of-devhub-added {
    min-width: 6.5rem;
}
.of-devhub-added-time {
    font-size: var(--of-text-2xs);
    line-height: 1.2;
}

/* "On hold" mark on a backlog row (owner request 2026-08-23): it is a LINK to
   the task that is blocking, so the answer is one click from the symptom. */
.of-devhub-hold {
    text-decoration: none;
}
.of-devhub-hold:hover,
.of-devhub-hold:focus-visible {
    text-decoration: underline;
}

/* Sources tab (SL-1, 2026-08-24): the published booklet body. Rendered by the
   escape-first booklet_markdown filter; these two classes are its container
   and its verbatim blocks (fences + the review's indented diff lines). */
.of-booklet-body {
    overflow-wrap: break-word;
}
.of-booklet-pre {
    padding: 0.6rem 0.75rem;
    border: var(--of-border-thin);
    border-radius: var(--of-radius-xs);
    background: color-mix(in srgb, var(--of-ink) 4%, white);
    font-size: var(--of-text-xs);
    color: var(--of-ink);
    overflow-x: auto;
    white-space: pre;
}

/* Sessions tab (SL-9, 2026-08-24): the handoff prompt block and the per-session
   token gauge. The gauge fills by WIDTH-STEP CLASSES (p0…p10, set from the
   model's gauge_step) so no template needs an inline width style; its state
   colour comes from the status tokens, so amber/red here is the same amber/red
   as everywhere else on the platform. */
.of-session-prompt {
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.75rem;
    border: var(--of-border-thin);
    border-radius: var(--of-radius-xs);
    background: color-mix(in srgb, var(--of-ink) 4%, white);
    font-size: var(--of-text-xs);
    color: var(--of-ink);
}
.of-session-gauge-col {
    min-width: 130px;
}
.of-session-gauge {
    height: 8px;
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-muted) 18%, white);
    overflow: hidden;
}
.of-session-gauge-fill {
    display: block;
    height: 100%;
    border-radius: var(--of-radius-pill);
    background: var(--of-success);
}
.of-session-gauge-fill.is-warning { background: var(--of-warning); }
.of-session-gauge-fill.is-danger { background: var(--of-danger); }
.of-session-gauge-fill.p0 { width: 0; }
.of-session-gauge-fill.p1 { width: 10%; }
.of-session-gauge-fill.p2 { width: 20%; }
.of-session-gauge-fill.p3 { width: 30%; }
.of-session-gauge-fill.p4 { width: 40%; }
.of-session-gauge-fill.p5 { width: 50%; }
.of-session-gauge-fill.p6 { width: 60%; }
.of-session-gauge-fill.p7 { width: 70%; }
.of-session-gauge-fill.p8 { width: 80%; }
.of-session-gauge-fill.p9 { width: 90%; }
.of-session-gauge-fill.p10 { width: 100%; }

/* Speak-instead-of-typing control (reports #125/#127, 2026-08-23). Sits under
   whatever field opted in; the recording state has to be unmistakable, because
   a microphone the user thinks is off is a privacy problem, not a UI nit. */
.of-voice-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.of-voice-status {
    font-size: var(--of-text-xs);
    color: var(--of-muted);
}
.of-voice-btn.is-recording {
    background: var(--of-danger);
    border-color: var(--of-danger);
    color: var(--of-on-danger);
}
/* One-tap voice-language switch (report #132 + local #3, 2026-08-24): rendered
   by of-voice-lang.js next to a microphone ONLY when the content language and
   English differ — the language you read in is not always the one you speak. */
.of-voice-lang-chip {
    font-size: var(--of-text-xs);
    padding: 0.1rem 0.5rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* The "How it works" tab (report #126, 2026-08-23): the loops drawn, so the
   owner can review the process rather than take it on trust. Boxes are coloured
   by ROLE — where information comes from, where it is stored, who does the work,
   what gates it, and what only the owner may do — because that grouping is the
   thing being explained. Every colour comes from an existing token. */
.of-flow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}
.of-flow-box {
    flex: 1 1 200px;
    min-width: 180px;
    border: var(--of-border-thin);
    border-top: 3px solid color-mix(in srgb, var(--of-ink) 25%, white);
    border-radius: var(--of-radius-xs);
    padding: 0.6rem 0.7rem;
}
.of-flow-box.mod-source { border-top-color: color-mix(in srgb, var(--of-info) 65%, white); }
.of-flow-box.mod-store { border-top-color: color-mix(in srgb, var(--of-brand) 60%, white); }
.of-flow-box.mod-work { border-top-color: color-mix(in srgb, var(--of-blink) 60%, white); }
.of-flow-box.mod-gate { border-top-color: color-mix(in srgb, var(--of-success) 65%, white); }
.of-flow-box.mod-owner { border-top-color: color-mix(in srgb, var(--of-accent) 70%, white); }
.of-flow-title {
    font-weight: var(--of-weight-semibold);
    font-size: var(--of-text-sm);
    margin-bottom: 0.2rem;
}
.of-flow-note {
    font-size: var(--of-text-xs);
    color: var(--of-muted);
    margin-bottom: 0;
}
/* The arrow is decoration for sighted readers; the SVG below carries the
   accessible description of the same flow. */
.of-flow-arrow {
    align-self: center;
    color: color-mix(in srgb, var(--of-ink) 40%, white);
    font-size: var(--of-text-lg);
}
@media (max-width: 767.98px) {
    /* Stacked on a phone, the arrows should point DOWN, not across. */
    .of-flow-arrow { transform: rotate(90deg); align-self: flex-start; }
}
.of-flow-svg {
    width: 100%;
    min-width: 640px;      /* scrolls inside its wrapper rather than squashing */
    max-width: 900px;
    height: auto;
    color: color-mix(in srgb, var(--of-ink) 55%, white);
}
.of-flow-svg-boxes rect {
    fill: color-mix(in srgb, var(--of-brand) 7%, white);
    stroke: color-mix(in srgb, var(--of-brand) 40%, white);
    stroke-width: 1.2;
}
.of-flow-svg-label {
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
    fill: color-mix(in srgb, var(--of-ink) 80%, white);
}

/* One Training lesson (PR B3b). <details>/<summary> on purpose — it is the
   platform's one expand/collapse pattern, works without JavaScript and is
   keyboard accessible. */
.of-devhub-lesson {
    border: var(--of-border-thin);
    border-left: 3px solid color-mix(in srgb, var(--of-brand) 55%, white);
    border-radius: var(--of-radius-xs);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
}
.of-devhub-lesson > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.of-devhub-lesson[open] > summary {
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--of-border-thin);
}
/* Reading width: a full-width paragraph on a desktop monitor is genuinely
   harder to read, and these are meant to be read. */
.of-devhub-lesson-body {
    max-width: 68ch;
    line-height: var(--of-leading-normal);
}

/* WO-14 - a FRONT OF WORK on the Backlog page. Two levels of <details> (group,
   then sub-group), each holding its own of-data-table-wrap so a wide table still
   scrolls inside itself rather than dragging the page sideways.

   No new hue: of-page-devhub maps --of-accent to --of-brand, and the edge below
   is mixed from it, exactly as .of-devhub-row-* and .of-task-card.mod-action-*
   already do. A fifteenth module colour for an ops surface would be wrong. */
.of-devhub-group {
    border: var(--of-border-thin);
    border-left: 3px solid color-mix(in srgb, var(--of-accent) 60%, transparent);
    border-radius: var(--of-radius-xs);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
}
/* Items in no group are not a front of work, so they do not get a front's edge -
   otherwise "ungrouped" reads as just another group and nobody tidies it. */
.of-devhub-group.mod-loose {
    border-left-color: transparent;
}
.of-devhub-group-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: var(--of-text-sm);
}
.of-devhub-group[open] > .of-devhub-group-summary,
.of-devhub-subgroup[open] > .of-devhub-group-summary {
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--of-border-thin);
}
.of-devhub-group-title {
    font-weight: 600;
}
.of-devhub-group-count {
    color: var(--of-muted);
    font-size: var(--of-text-xs);
}
.of-devhub-subgroup {
    border-left: 2px solid color-mix(in srgb, var(--of-accent) 35%, transparent);
    padding: 0.4rem 0 0.4rem 0.6rem;
    margin: 0.5rem 0 0.25rem 0.5rem;
}
/* The finished drawer reads as settled, not as live work. */
.of-devhub-subgroup.mod-holding {
    border-left-color: color-mix(in srgb, var(--of-muted) 45%, transparent);
}
.of-devhub-subgroup.mod-holding .of-devhub-group-title {
    color: var(--of-muted);
    font-weight: 500;
}
/* The selection column stays narrow: it is a control, not content, and the table
   is already dense at 375px. */
.of-devhub-pick-col {
    width: 2rem;
}
/* Prerequisites column (owner request 2026-08-31). Narrow enough that adding two
   columns does not push the table into a sideways scroll on a laptop, wide enough
   to type two codes into. The resolved codes sit UNDER the input rather than
   beside it so the column does not grow with the number of prerequisites. */
.of-devhub-prereq-col {
    width: 11rem;
    min-width: 9rem;
}
.of-devhub-prereq-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
/* Dependency-map effort bars (owner request 2026-08-31). Widths are CLASSES, not
   inline styles: the design system forbids inline style="" and the ratchet counts
   it, so the view buckets each bar to the nearest 5% and picks one of the twenty
   classes below. At this size the steps are visually indistinguishable from exact. */
.of-devhub-bar-col {
    width: 9rem;
    min-width: 7rem;
}
.of-devhub-bar-track {
    background: var(--of-bg-mid);
    border-radius: var(--of-radius-sm);
    height: 0.5rem;
    overflow: hidden;
    width: 100%;
}
.of-devhub-bar {
    background: var(--of-accent);
    border-radius: var(--of-radius-sm);
    height: 100%;
}
/* On the critical path: same shape, the alert colour. Colour is never the ONLY
   signal -- the row also says "critical" in text beside the bar. */
.of-devhub-bar.mod-critical {
    background: var(--of-danger);
}
.of-devhub-bar.mod-w5 { width: 5%; }
.of-devhub-bar.mod-w10 { width: 10%; }
.of-devhub-bar.mod-w15 { width: 15%; }
.of-devhub-bar.mod-w20 { width: 20%; }
.of-devhub-bar.mod-w25 { width: 25%; }
.of-devhub-bar.mod-w30 { width: 30%; }
.of-devhub-bar.mod-w35 { width: 35%; }
.of-devhub-bar.mod-w40 { width: 40%; }
.of-devhub-bar.mod-w45 { width: 45%; }
.of-devhub-bar.mod-w50 { width: 50%; }
.of-devhub-bar.mod-w55 { width: 55%; }
.of-devhub-bar.mod-w60 { width: 60%; }
.of-devhub-bar.mod-w65 { width: 65%; }
.of-devhub-bar.mod-w70 { width: 70%; }
.of-devhub-bar.mod-w75 { width: 75%; }
.of-devhub-bar.mod-w80 { width: 80%; }
.of-devhub-bar.mod-w85 { width: 85%; }
.of-devhub-bar.mod-w90 { width: 90%; }
.of-devhub-bar.mod-w95 { width: 95%; }
.of-devhub-bar.mod-w100 { width: 100%; }

/* The "needs you" link is icon-only, so it carries an aria-label in the template.
   Colour comes from the accent token, never a raw hex, so it follows the admin's
   theme like everything else. */
.of-devhub-needsyou {
    color: var(--of-accent-ink);
    text-decoration: none;
}
.of-devhub-needsyou:hover,
.of-devhub-needsyou:focus {
    text-decoration: underline;
}
.of-devhub-bulk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.of-devhub-bulk .form-select {
    width: auto;
    min-width: 14rem;
}

/* WO-14 - the Backlog page's own operating manual. Held in the database so it can
   be rewritten by an admin or an agent with no deploy, which means it is prose an
   admin actually wrote: it gets a reading width and real paragraph spacing rather
   than the dense treatment the rest of this ops page uses. */
/* WO-14 slice 3 - a COMPLETED front on the Archive page. Settled, not live: the
   edge drops to the muted token so a finished front never competes for attention
   with the working list it came from. */
.of-devhub-group.mod-archived {
    border-left-color: color-mix(in srgb, var(--of-muted) 40%, transparent);
}
.of-devhub-archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--of-text-sm);
}
.of-devhub-archive-list > li {
    padding: 0.2rem 0;
    border-bottom: var(--of-border-thin);
}
.of-devhub-archive-list > li:last-child {
    border-bottom: 0;
}

/* Owner, 2026-08-28: the manual "is making too much space of that page". Folded
   by default - the page is for working the backlog; the manual is reference you
   consult, not something to re-read on every visit. */
.of-devhub-manual-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: var(--of-text-base);
}
.of-devhub-manual-block[open] > .of-devhub-manual-summary {
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--of-border-thin);
}
.of-devhub-manual {
    max-width: 78ch;
    line-height: var(--of-leading-normal);
    font-size: var(--of-text-sm);
}
.of-devhub-manual > :last-child {
    margin-bottom: 0;
}
.of-devhub-manual h2,
.of-devhub-manual h3,
.of-devhub-manual h4 {
    font-size: var(--of-text-base);
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
}
.of-devhub-manual code {
    font-size: var(--of-text-xs);
}
/* The editor is folded away by default: this block is read a hundred times for
   every time it is written, and an always-open textarea would push the actual
   work below the fold on a phone. */
.of-devhub-manual-edit > summary {
    cursor: pointer;
    font-size: var(--of-text-sm);
    color: var(--of-muted);
}
.of-devhub-manual-edit[open] > summary {
    margin-bottom: 0.4rem;
}

/* One owner-action card on the Tasks tab (PR B3a). Cards rather than table rows
   because each carries an answer box, and a table of forms does not fit a phone. */
.of-devhub-task {
    border: var(--of-border-thin);
    border-left: 3px solid color-mix(in srgb, var(--of-accent) 55%, white);
    border-radius: var(--of-radius-xs);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Owner, 2026-08-25: "all questions or tasks — they have the same background
   colour, and it's confusing me how I'm going up and down." Alternating rows give
   the eye an edge to track while scrolling a long list. Mixed from --of-accent
   rather than a fixed grey so the stripes follow the admin's chosen theme; kept
   very light so text contrast is untouched (the theming tests measure it). */
.of-devhub-task.mod-stripe-b {
    background: color-mix(in srgb, var(--of-accent) 4%, transparent);
}

/* And the one thing he scans for: is this still waiting on ME? A stronger left
   edge, so it is visible at a glance without reading the badges. */
.of-devhub-task.mod-awaiting {
    border-left-color: var(--of-warning, var(--of-accent));
}

/* Roadmap-order box: wide enough for three digits, narrow enough that the row
   still fits a phone (PR B2). */
.of-devhub-order-input {
    width: 4.5rem;
    min-width: 4.5rem;
}
.of-devhub-note-image {
    max-width: min(320px, 100%);
    border: var(--of-border-thin);
    border-radius: var(--of-radius-xs);
    margin-top: 0.5rem;
}

/* --- Tasks tab: reading a task, rather than answering it (owner, 2026-08-27) ---
   Four complaints in one message, all about legibility, none about function:
   the kind of attention a row needs was invisible; the explanation was folded
   shut; admin and AI notes were told apart only by a hairline; and a long thread
   had to be re-read from the top. Everything below mixes from --of-* tokens, so
   a re-theme carries it -- a pinned hex here would strand the one page whose
   whole job is to be readable. */

/* The three-way index at the top of the page, and the same chip on a card. */
.of-task-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.of-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--of-radius-pill);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    background: color-mix(in srgb, var(--of-ink) 7%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
}
.of-task-chip.mod-decision {
    background: color-mix(in srgb, var(--of-brand) 14%, white);
    color: color-mix(in srgb, var(--of-brand-ink) 88%, black);
}
.of-task-chip.mod-setup {
    background: color-mix(in srgb, var(--of-accent) 16%, white);
    color: color-mix(in srgb, var(--of-accent-ink) 90%, black);
}
.of-task-chip.mod-both {
    background: color-mix(in srgb, var(--of-blink) 16%, white);
    color: color-mix(in srgb, var(--of-ink) 88%, black);
}

/* The colour key under the counts. Two swatches beat a sentence: he asked for
   background colours precisely so he would not have to read a label. */
.of-task-legend-key {
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 60%, white);
}
.of-task-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: var(--of-radius-xs);
    vertical-align: text-bottom;
    border: var(--of-border-thin);
}
.of-task-swatch.mod-ai { background: color-mix(in srgb, var(--of-blink) 12%, white); }
.of-task-swatch.mod-admin { background: color-mix(in srgb, var(--of-accent) 14%, white); }

/* One group = one kind of sitting. A decision can be answered from a phone in a
   queue; a setup needs a computer and somebody else's dashboard. Separating them
   is what turns 43 rows into four short lists. */
.of-task-group { margin-bottom: 1.5rem; }
.of-task-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
    padding-bottom: 0.35rem;
    border-bottom: var(--of-border-thin);
}
.of-task-group-count {
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    padding: 0.05rem 0.45rem;
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-ink) 8%, white);
    color: color-mix(in srgb, var(--of-ink) 70%, white);
}
.of-task-group-hint {
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 58%, white);
    margin-bottom: 0.6rem;
}

/* The card's left edge repeats its group, so a card stays self-describing once
   it is the only thing on screen -- which on a phone it usually is. */
.of-task-card.mod-action-decision { border-left-color: color-mix(in srgb, var(--of-brand) 60%, white); }
.of-task-card.mod-action-setup { border-left-color: color-mix(in srgb, var(--of-accent) 65%, white); }
.of-task-card.mod-action-both { border-left-color: color-mix(in srgb, var(--of-blink) 60%, white); }

.of-task-title {
    font-weight: var(--of-weight-semibold);
    font-size: var(--of-text-md);
    line-height: var(--of-leading-snug);
}

/* "Do this" -- the AI's one line about what he should actually do. It is the
   first thing on the card that is not a label, so it gets the only filled
   surface: everything else on the card is his own text or the thread. */
.of-task-do {
    margin: 0.4rem 0 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--of-radius-xs);
    background: color-mix(in srgb, var(--of-brand) 8%, white);
    border-left: 3px solid color-mix(in srgb, var(--of-brand) 55%, white);
    color: color-mix(in srgb, var(--of-ink) 88%, white);
}
/* The Farsi half of the brief, on its own line. Its own block because RTL text
   beside LTR text on one line reorders unpredictably around punctuation. */
.of-task-do-fa {
    display: block;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: var(--of-border-thin);
    font-size: var(--of-text-sm);
    line-height: var(--of-leading-relaxed, 1.7);
}

.of-task-do-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.35rem;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    color: color-mix(in srgb, var(--of-brand-ink) 85%, black);
}

/* The body is OPEN by default now. The summary stays as the fold control, so
   the affordance is unchanged -- only its starting state moved. */
.of-task-body > summary,
.of-task-history > summary {
    cursor: pointer;
    font-size: var(--of-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    color: color-mix(in srgb, var(--of-ink) 55%, white);
}
.of-task-body[open] > summary { margin-bottom: 0.15rem; }
.of-task-history {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: var(--of-border-thin);
}

/* THE AUTHOR TINT. The border alone was the old signal and it was not enough:
   3px is a hairline at arm's length, and it is the first thing a theme with a
   low-contrast ink colour loses. A filled surface survives both. */
.of-thread-note {
    border-radius: var(--of-radius-xs);
    padding: 0.5rem 0.65rem;
}
.of-thread-note.mod-ai {
    background: color-mix(in srgb, var(--of-blink) 8%, white);
}
.of-thread-note.mod-admin {
    background: color-mix(in srgb, var(--of-accent) 10%, white);
}
.of-thread-note.mod-developer {
    background: color-mix(in srgb, var(--of-brand) 8%, white);
}
.of-thread-note-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 60%, white);
    margin-bottom: 0.25rem;
}
.of-thread-note-time { margin-left: auto; }

/* At 480px the timestamp stops earning a line of its own. */
@media (max-width: 480px) {
    .of-thread-note-time { margin-left: 0; }
}

/* --- Pickable answers (owner, 2026-08-27) -------------------------------
   "The AI agent can write down three, four, five suggestions, then I can just
   pick one of them, or I can make my own note." Each option is a whole tappable
   row rather than a bare radio: a 13px radio dot is not a phone target, and the
   label is the thing he is actually choosing. */
.of-task-options {
    border: none;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
}
.of-task-options-legend {
    float: none;
    width: auto;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    color: color-mix(in srgb, var(--of-ink) 55%, white);
    margin-bottom: 0.35rem;
}
.of-task-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    border: var(--of-border-thin);
    border-radius: var(--of-radius-xs);
    cursor: pointer;
    transition: background var(--of-transition-fast), border-color var(--of-transition-fast);
}
.of-task-option:hover {
    background: color-mix(in srgb, var(--of-brand) 5%, white);
    border-color: color-mix(in srgb, var(--of-brand) 35%, white);
}
/* The chosen row is obvious without hunting for which dot is filled. */
.of-task-option:has(input:checked) {
    background: color-mix(in srgb, var(--of-brand) 10%, white);
    border-color: color-mix(in srgb, var(--of-brand) 55%, white);
}
/* :has() is widely supported but not universal; a focus ring must not depend on
   it, so keyboard users get their own rule. */
.of-task-option:focus-within {
    outline: 2px solid color-mix(in srgb, var(--of-brand) 60%, white);
    outline-offset: 1px;
}
.of-task-option input[type="radio"] { margin-top: 0.2rem; flex: none; }
.of-task-option-body { display: flex; flex-direction: column; gap: 0.1rem; }
.of-task-option-label { font-weight: var(--of-weight-semibold); }
.of-task-option-detail {
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 60%, white);
}
/* The recommendation. One per item, enforced in the database -- two
   recommendations would be no recommendation at all. */
.of-task-option.mod-recommended {
    border-color: color-mix(in srgb, var(--of-accent) 50%, white);
}
/* Who did this, and when. With staff accounts coming, every action on a task
   has to carry a name -- the owner's words: "whoever is answering the task or
   doing anything, that also should be recorded, who at what time." */
.of-task-attribution {
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 62%, white);
    margin: 0.15rem 0 0.35rem;
}

/* --- Browsing the task list: tabs, collapsing, and a phone-first layout ---
   Owner, 2026-08-27: "otherwise it's a long, long list, I should just keep
   scrolling down, which is bothering a lot" and "mostly I'm managing those
   tasks through my cell phone, and I have a smaller screen."

   So the collapsed row is the DEFAULT state and the styling is written for the
   narrow case first, with the wider layout added at a breakpoint rather than
   the other way round. Everything here uses the canonical breakpoints. */

.of-task-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.of-task-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.75rem;
    border: var(--of-border-thin);
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-ink) 4%, white);
    color: color-mix(in srgb, var(--of-ink) 78%, white);
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    text-decoration: none;
    /* A comfortable tap target on a phone: the whole pill, not the text. */
    min-height: 2.4rem;
}
.of-task-tab:hover,
.of-task-tab:focus-visible {
    background: color-mix(in srgb, var(--of-brand) 10%, white);
    border-color: color-mix(in srgb, var(--of-brand) 40%, white);
    color: color-mix(in srgb, var(--of-brand-ink) 88%, black);
}
.of-task-tab.mod-active {
    background: var(--of-brand);
    border-color: var(--of-brand);
    color: var(--of-on-brand);
}
.of-task-tab-count {
    font-size: var(--of-text-2xs);
    padding: 0.05rem 0.4rem;
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-ink) 10%, white);
    color: color-mix(in srgb, var(--of-ink) 75%, white);
}
.of-task-tab.mod-active .of-task-tab-count {
    background: color-mix(in srgb, var(--of-on-brand) 25%, transparent);
    color: var(--of-on-brand);
}

.of-task-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.of-task-toolbar-hint {
    font-size: var(--of-text-2xs);
    color: color-mix(in srgb, var(--of-ink) 55%, white);
}

/* THE COLLAPSED ROW. This is what he sees most of the time, so it carries the
   three things that decide whether to open it: what kind of work, whether it is
   still on him, and the one-line brief. */
.of-task-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
    /* The default marker sits awkwardly beside a multi-line block; the card's
       own left border and the badges carry the affordance instead. */
    list-style: none;
    padding-right: 1.35rem;
    position: relative;
}
.of-task-summary::-webkit-details-marker { display: none; }
.of-task-summary::after {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid color-mix(in srgb, var(--of-ink) 45%, white);
    border-bottom: 2px solid color-mix(in srgb, var(--of-ink) 45%, white);
    transform: rotate(45deg);
    transition: transform var(--of-transition-fast);
}
details[open] > .of-task-summary::after { transform: rotate(-135deg); }

.of-task-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.of-devhub-badge.mod-code {
    background: color-mix(in srgb, var(--of-ink) 10%, white);
    color: color-mix(in srgb, var(--of-ink) 80%, white);
    font-family: var(--of-font-mono, monospace);
}
/* "Opened" / "answered" markers. Owner, 2026-08-27: "then I'm going to be
   confused which one was opened and I did the reading... I need an icon which
   shows recently opened or recently answered."

   Two different colours on purpose, because they mean different things: ANSWERED
   is a fact the server knows and everyone sees; OPENED is this browser's own
   record of what he has read, and nobody else's. */
.of-task-seen {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--of-radius-pill);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    background: color-mix(in srgb, var(--of-blink) 14%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
}
.of-task-seen[hidden] { display: none; }
.of-devhub-badge.mod-answered {
    background: color-mix(in srgb, var(--of-success, var(--of-brand)) 15%, white);
    color: color-mix(in srgb, var(--of-ink) 82%, white);
}
/* A card he has already answered steps back visually, so what is still waiting
   on him is what stands out -- which is the whole question he is asking the
   page. */
.of-task-card:not(.mod-awaiting) .of-task-title {
    color: color-mix(in srgb, var(--of-ink) 68%, white);
    font-weight: var(--of-weight-medium, 500);
}

.of-task-openlink {
    font-size: var(--of-text-2xs);
    margin: 0.35rem 0 0.25rem;
}

/* One foldable part of an open task: the story, the conversation, the answer. */
.of-task-section {
    margin-top: 0.6rem;
    border-top: var(--of-border-thin);
    padding-top: 0.45rem;
}
.of-task-section > summary {
    cursor: pointer;
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    color: color-mix(in srgb, var(--of-ink) 58%, white);
    /* Same tap-target reasoning as the tabs. */
    padding: 0.25rem 0;
}

/* --- Phone first (owner works from a small screen) --------------------- */
@media (max-width: 576px) {
    /* Nothing may push the page sideways -- the navigation drifts off screen
       when it does, which is the failure the design system calls out. */
    .of-task-card { padding: 0.6rem; }
    .of-task-summary { padding-right: 1.1rem; }
    .of-task-title { font-size: var(--of-text-sm); }
    .of-task-do { padding: 0.4rem 0.5rem; }
    .of-task-tab { flex: 1 1 auto; justify-content: center; }
    .of-task-toolbar .of-button { flex: 1 1 auto; }
    .of-task-toolbar-hint { flex: 1 1 100%; }
    /* An option row is a primary tap target on a phone. */
    .of-task-option { padding: 0.6rem; }
    .of-thread-note { padding: 0.5rem; }
    .of-devhub-note-image { max-width: 100%; }
}

.of-task-option-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--of-radius-pill);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--of-tracking-wide);
    background: color-mix(in srgb, var(--of-accent) 18%, white);
    color: color-mix(in srgb, var(--of-accent-ink) 90%, black);
}

/* --- from adminapp/templates/adminapp/adminapp_settings.html --- */
/* ── Amber page shell ── */
  .of-settings-page {
    min-height: calc(100vh - 4rem);
    background:
      radial-gradient(ellipse at top right, rgba(251, 191, 36, 0.22) 0%, transparent 50%),
      radial-gradient(ellipse at bottom left, rgba(245, 158, 11, 0.12) 0%, transparent 55%),
      var(--of-warning-soft);
    padding: 2rem 1rem 3rem;
  }

  .of-settings-shell {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
  }

  /* ── Header card ── */
  .of-settings-header {
    background: linear-gradient(135deg, var(--of-warning-soft) 0%, var(--of-warning-soft) 100%);
    border: 1.5px solid var(--of-warning);
    border-radius: 24px;
    padding: 1.75rem 2rem;
  }

  .of-settings-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--of-warning-ink);
    background: rgba(217, 119, 6, 0.12);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
  }

  .of-settings-title {
    font-family: "Fraunces", serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--of-warning-ink);
    margin: 0.6rem 0 0.5rem;
  }

  .of-settings-lead {
    color: var(--of-warning-ink);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
  }

  .of-settings-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--of-warning-ink);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
  }
  .of-settings-back:hover { text-decoration: underline; }

  /* ── Section cards ── */
  .of-settings-card {
    background: var(--of-surface-strong);
    border: 1px solid rgba(217, 119, 6, 0.22);
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.07);
  }

  .of-settings-card-kicker {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--of-warning);
  }

  .of-settings-card-title {
    font-family: "Fraunces", serif;
    font-size: 1.3rem;
    color: var(--of-ink);
    margin: 0.3rem 0 0.65rem;
  }

  .of-settings-card-copy {
    color: var(--of-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
  }

  /* ── Stats row ── */
  .of-settings-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.85rem 0;
  }

  .of-settings-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--of-warning-soft);
    border: 1px solid rgba(217, 119, 6, 0.2);
    font-size: 0.86rem;
    color: var(--of-warning-ink);
  }

  .of-settings-stat-pill strong {
    font-weight: 700;
    color: var(--of-warning-ink);
  }

  /* ── Migration warning ── */
  .of-settings-migration-note {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--of-warning-soft);
    border: 1px solid var(--of-warning);
    color: var(--of-warning-ink);
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  /* ── Form row ── */
  .of-settings-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-top: 1rem;
  }

  .of-settings-form-field {
    flex: 0 0 auto;
    min-width: 180px;
  }

  .of-settings-form-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--of-ink);
  }

  .of-settings-form-field input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    font-size: 0.95rem;
    background: var(--of-surface-strong);
  }

  .of-settings-form-field input:focus {
    outline: none;
    border-color: var(--of-warning);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  }

  .of-settings-note {
    font-size: 0.83rem;
    color: var(--of-muted);
    margin-top: 0.65rem;
  }

  /* ── Save button (amber) ── */
  .of-button-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--of-warning);
    background: var(--of-warning-soft);
    color: var(--of-warning-ink);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .of-button-amber:hover {
    background: var(--of-warning-soft);
    color: var(--of-warning-ink);
  }

  /* ── Future placeholder ── */
  .of-settings-placeholder {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: var(--of-bg);
    border: 1px dashed rgba(15, 23, 42, 0.14);
    color: var(--of-muted);
    font-size: 0.88rem;
  }

  @media (max-width: 575.98px) {
    .of-settings-header { padding: 1.25rem; }
    .of-settings-card { padding: 1.1rem; }
  }

/* --- from adminapp/templates/adminapp/app_sitemap.html --- */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#refreshIcon { display:inline-block; font-size:1rem; }

/* --- from adminapp/templates/adminapp/communication_settings_related.html --- */
.rel-card {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      padding: .55rem .8rem;
      border: 1px solid var(--of-accent-soft);
      border-radius: 8px;
      background: var(--of-surface-strong);
      text-decoration: none;
      transition: box-shadow .15s, border-color .15s;
    }
    .rel-card:hover {
      box-shadow: 0 2px 10px rgba(124,58,237,.14);
      border-color: var(--of-accent);
    }
    .rel-section-title {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--of-muted);
      margin-bottom: .6rem;
      padding-bottom: .3rem;
      border-bottom: 1px solid var(--of-accent-soft);
    }

/* --- from adminapp/templates/adminapp/flow_detail.html --- */
.step-num { width:2.2rem; height:2.2rem; border-radius:50%; background:var(--of-brand); color:var(--of-surface-strong);
              display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
  .step-num.done { background:var(--of-success); }
  .step-card { border-left:4px solid var(--of-brand); }
  .step-card.done { border-left-color:var(--of-success); background:var(--of-bg); }
  .flow-prog { height:8px; border-radius:4px; background:#eee; overflow:hidden; }
  .flow-prog > div { height:100%; background:var(--of-brand); }

/* --- from adminapp/templates/adminapp/flows_directory.html --- */
.flow-card { border:1px solid rgba(15,23,42,.08); border-radius:16px; height:100%; transition:box-shadow .15s; }
  .flow-card:hover { box-shadow:0 10px 30px rgba(15,23,42,.10); }
  .flow-icon { font-size:1.6rem; }
  .flow-prog { height:6px; border-radius:4px; background:#eee; overflow:hidden; }
  .flow-prog > div { height:100%; background:var(--of-brand); }

/* --- from adminapp/templates/adminapp/insights_dashboard.html --- */
.ins-checklist > summary::-webkit-details-marker { display:none; }
  .ins-checklist > summary::before { content:"▸ "; color:var(--of-accent); }
  .ins-checklist[open] > summary::before { content:"▾ "; }
  .ins-checklist code { background:var(--of-accent-soft); padding:.05rem .3rem; border-radius:.25rem; }

/* R-139 / BL-50 — the owner, from the live page: "the colour coding of this section is
   not matching with the rest of the website… when you're comparing them you see they
   are not matching to each other."

   He was describing a real inconsistency, not a preference. The page has TWO tables
   about people, and the same fact was painted two different ways: a signed-in person
   was `bg-dark-subtle`/`bg-secondary-subtle` in the members table and
   `bg-primary-subtle` in the page-views table. Comparing them was impossible because
   nothing meant the same thing twice.

   So: ONE badge, one modifier per meaning, used in BOTH places — and every colour from
   a token, so the admin's Appearance settings reach this page like any other. Shape
   follows .of-devhub-badge; nothing here is a new idea, only a consistent one. */
.of-ins-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--of-radius-pill);
    background: color-mix(in srgb, var(--of-ink) 7%, white);
    color: color-mix(in srgb, var(--of-ink) 72%, white);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
    white-space: nowrap;
}
/* A person we know reads accented; a visitor we do not know reads quiet. That
   distinction is the one the page is actually about, so it is the one that carries
   the colour — in both tables, identically. */
.of-ins-badge.mod-known { background: color-mix(in srgb, var(--of-accent) 14%, white);
                          color: color-mix(in srgb, var(--of-accent-ink) 90%, black); }
.of-ins-badge.mod-staff { background: color-mix(in srgb, var(--of-info) 14%, white);
                          color: color-mix(in srgb, var(--of-info-ink) 88%, black); }
.of-ins-badge.mod-ready { background: color-mix(in srgb, var(--of-success) 14%, white);
                          color: color-mix(in srgb, var(--of-success-ink) 88%, black); }
.of-ins-badge.mod-waiting { background: color-mix(in srgb, var(--of-warning) 14%, white);
                            color: color-mix(in srgb, var(--of-warning-ink) 90%, black); }
/* A quiet note panel — replaces two hardcoded #eef2ff blocks that could not be
   rethemed and did not match anything else on the page. */
.of-ins-note { background: color-mix(in srgb, var(--of-info) 8%, white);
               border-radius: var(--of-radius-sm); padding: .4rem .6rem; }
.of-ins-note-top { border-top: 1px solid var(--of-line); padding-top: .6rem; }
.of-ins-chart { position: relative; height: 260px; }
.of-ins-chart.mod-tall { height: 420px; }
.of-ins-eyebrow { letter-spacing: .06em; }
.of-ins-summary { cursor: pointer; list-style: none; }
.of-ins-truncate { max-width: 70%; }
.of-ins-path { max-width: 220px; }

/* --- from adminapp/templates/adminapp/master_switch.html --- */
.ms-off { opacity: .55; }
  .ms-row { border-bottom: 1px solid #eee; }
  .ms-badge-enforced { background:var(--of-bg); color:var(--of-success-ink); }
  .ms-badge-display   { background:var(--of-line); color:var(--of-muted); }
  .ms-badge-planned   { background:var(--of-warning-soft); color:var(--of-warning-ink); }
  .ms-badge-admin     { background:var(--of-accent-soft); color:var(--of-accent-ink); }
  .ms-admin           { background:var(--of-accent-soft); }   /* admin/background tint */
  .form-switch .form-check-input { cursor:pointer; }

/* --- from adminapp/templates/adminapp/orbitpilot_source_selection.html --- */
.op-src-toggle .op-src-chevron { transition: transform .2s ease; }
  .op-src-toggle[aria-expanded="true"] .op-src-chevron { transform: rotate(180deg); }
  /* Make reorder arrows large and easy to click. */
  #opSrcGroups .btn-group .btn { min-width: 2.75rem; padding: .35rem .6rem; }
  #opSrcGroups .btn-group .btn i { font-size: 1.25rem; line-height: 1; }

/* --- from adminapp/templates/adminapp/plan_control_hub.html --- */
.step-num { width:2.2rem; height:2.2rem; border-radius:50%; background:var(--of-brand); color:var(--of-surface-strong);
              display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
  .step-card { border-left:4px solid var(--of-brand); }

/* --- from adminapp/templates/adminapp/system_health.html --- */
.sh-badge { display:inline-block; padding:.15rem .55rem; border-radius:.5rem; font-weight:700; font-size:.75rem; }
  .sh-ok   { background:var(--of-bg); color:var(--of-success-ink); }
  .sh-warn { background:var(--of-warning-soft); color:var(--of-warning-ink); }
  .sh-fail { background:var(--of-danger-ink); color:var(--of-danger-ink); }
  .sh-card { border:1.5px solid var(--of-line); border-radius:.75rem; padding:1rem 1.1rem; margin-bottom:.75rem; }
  .sh-overall { border-radius:.75rem; padding:1rem 1.25rem; margin:1rem 0; font-weight:700; font-size:1.05rem; }
  .sh-overall.ok   { background:var(--of-bg); border:1.5px solid var(--of-success); color:var(--of-success-ink); }
  .sh-overall.warn { background:var(--of-warning-soft); border:1.5px solid var(--of-star); color:var(--of-warning-ink); }
  .sh-overall.fail { background:var(--of-danger-ink); border:1.5px solid var(--of-danger); color:var(--of-danger-ink); }
  .sh-kv { font-size:.82rem; color:var(--of-muted); }
  .sh-kv code { background:var(--of-bg-deep); padding:.05rem .3rem; border-radius:.25rem; }
  .sh-err { font-size:.8rem; color:var(--of-danger-ink); margin-top:.35rem; }
  .sh-doc { border:1.5px solid var(--of-line); border-radius:.75rem; background:var(--of-bg); padding:1.1rem 1.25rem; margin-top:1.5rem; }
  .sh-note { border:2px solid var(--of-accent); background:var(--of-accent-soft); border-radius:.85rem; padding:1.15rem 1.35rem; margin:1rem 0 1.25rem; }
  .sh-note-title { font-size:1.12rem; font-weight:800; color:var(--of-accent-ink); margin-bottom:.5rem; }
  .sh-note-p { font-size:.9rem; color:var(--of-accent-ink); margin-bottom:.6rem; }
  .sh-note-tip { font-size:.84rem; color:var(--of-accent); margin-bottom:0; }
  .sh-note-tip code { background:var(--of-accent-soft); padding:.05rem .3rem; border-radius:.25rem; }
  .sh-prompt-wrap { position:relative; margin:.5rem 0 .75rem; }
  .sh-copy-btn { position:absolute; top:.5rem; right:.5rem; border:1px solid var(--of-accent-soft); background:var(--of-surface-strong); color:var(--of-accent-ink);
    border-radius:.4rem; padding:.25rem .6rem; font-size:.78rem; font-weight:700; cursor:pointer; }
  .sh-copy-btn:hover { background:var(--of-accent-soft); }
  .sh-prompt { background:var(--of-accent-ink); color:var(--of-accent-soft); border-radius:.55rem; padding:.9rem 1rem; font-size:.8rem;
    white-space:pre-wrap; overflow-x:auto; margin:0; line-height:1.45; }
  .sh-checklist { border:1.5px solid var(--of-line); border-radius:.75rem; background:var(--of-bg); padding:0; margin:1.25rem 0; }
  .sh-checklist > summary { cursor:pointer; padding:.9rem 1.1rem; font-weight:800; color:var(--of-ink); list-style:none; }
  .sh-checklist > summary::-webkit-details-marker { display:none; }
  .sh-checklist > summary::before { content:"▸ "; color:var(--of-accent); }
  .sh-checklist[open] > summary::before { content:"▾ "; }
  .sh-checklist .sh-cl-body { padding:0 1.15rem 1.1rem; }
  .sh-checklist h6 { font-weight:800; color:var(--of-accent-ink); margin:.9rem 0 .35rem; }
  .sh-checklist ol { font-size:.86rem; color:var(--of-ink); padding-left:1.2rem; margin-bottom:.5rem; }
  .sh-checklist li { margin-bottom:.35rem; }
  .sh-checklist code { background:var(--of-line); padding:.05rem .3rem; border-radius:.25rem; font-size:.82rem; }
  .sh-checklist pre { background:var(--of-accent-ink); color:var(--of-accent-soft); border-radius:.5rem; padding:.7rem .9rem; font-size:.8rem;
    white-space:pre-wrap; overflow-x:auto; margin:.4rem 0; }
  .sh-cl-note { font-size:.82rem; color:var(--of-muted); margin:.3rem 0 0; }

/* --- from adminapp/templates/adminapp/worker_mode_settings.html --- */
.wm-status-banner {
    border-radius: .75rem; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem;
    font-weight: 600;
  }
  .wm-status-banner.on  { background: var(--of-bg); border: 1.5px solid var(--of-success); color: var(--of-success-ink); }
  .wm-status-banner.off { background: var(--of-warning-soft); border: 1.5px solid var(--of-star); color: var(--of-warning-ink); }
  .wm-status-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
  .wm-status-label { font-size: 1.05rem; }
  .wm-status-sub   { font-size: .82rem; font-weight: 400; margin-top: .1rem; color: inherit; opacity: .8; }

  .wm-ref-section {
    border: 1.5px solid var(--of-line); border-radius: .75rem; overflow: hidden; margin-top: 1.5rem;
  }
  .wm-ref-header {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1.1rem; background: var(--of-bg); cursor: pointer;
    border: none; width: 100%; text-align: left;
    font-size: .92rem; font-weight: 700; color: var(--of-ink);
    border-bottom: 1.5px solid var(--of-line);
  }
  .wm-ref-header:hover { background: var(--of-bg-deep); }
  .wm-ref-chevron { margin-left: auto; font-size: .8rem; transition: transform .2s; }
  .wm-ref-body { padding: 1.1rem 1.25rem; display: none; }
  .wm-ref-body.open { display: block; }

  .wm-task-table th { background: var(--of-bg); font-size: .78rem; font-weight: 700; color: var(--of-muted); }
  .wm-task-table td { font-size: .82rem; vertical-align: top; }
  .wm-task-table code { background: var(--of-bg-deep); padding: .1rem .35rem; border-radius: .3rem; font-size: .78rem; }

  .wm-callout {
    border-radius: .55rem; padding: .75rem 1rem; margin: .85rem 0;
    font-size: .86rem; border: 1.5px solid;
  }
  .wm-callout.info   { background: var(--of-bg); border-color: var(--of-info); color: var(--of-info); }
  .wm-callout.warn   { background: var(--of-warning-soft); border-color: var(--of-star); color: var(--of-warning-ink); }
  .wm-callout.danger { background: var(--of-danger-ink); border-color: var(--of-danger); color: var(--of-danger-ink); }

  .wm-reminder {
    border: 2px solid var(--of-warning); background: var(--of-warning-soft); border-radius: .85rem;
    padding: 1.15rem 1.35rem; margin: 1.5rem 0;
  }
  .wm-reminder-title { font-size: 1.2rem; font-weight: 800; color: var(--of-warning-ink); margin-bottom: .35rem; }
  .wm-reminder-sub { font-size: .82rem; color: var(--of-warning); margin-bottom: .5rem; }
  .wm-reminder-item { font-size: .9rem; color: var(--of-warning-ink); margin-top: .9rem; }
  .wm-reminder-item strong.hd { font-size: .98rem; display: block; margin-bottom: .25rem; }
  .wm-reminder-item ul, .wm-reminder-item ol { margin-bottom: 0; padding-left: 1.2rem; }
  .wm-reminder-item code { background: var(--of-warning-soft); padding: .05rem .3rem; border-radius: .25rem; }


/* --- Error Tracking: Reports page + Settings page (BL-LOCAL-REPORT-1, 2026-08-28) ---
   The one page was split in two, and the split is the moment to take its styling
   off the inline attributes it had been carrying since it was built: 23 inline
   `style="…"` attributes and five hardcoded colours, none of which an admin theme
   could reach. The colours below are the SAME intent expressed in tokens — a warm
   note row, a cool detail row, a red orphan row — so a retheme now moves them. */

/* The small uppercase label above a page title. */
.of-et-eyebrow { letter-spacing: var(--of-tracking-wide); }

/* A list or a preview that must not grow the page. Three heights because the
   user picker, the live preview and the built-in reference are different sizes;
   one height for all three would either crop the picker or strand the preview. */
.of-et-scrolllist { max-height: 200px; overflow: auto; }
.of-et-preview {
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    background: color-mix(in srgb, var(--of-brand) 5%, white);
}
.of-et-preview.mod-off { background: color-mix(in srgb, var(--of-danger) 8%, white); }
.of-et-preview.mod-default { background: color-mix(in srgb, var(--of-success) 8%, white); }
.of-et-preview.mod-builtin { max-height: 260px; background: var(--of-bg); }

/* The three states of the AI preamble, as one pill rather than four Bootstrap
   colour classes each. */
.of-et-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--of-radius-pill);
    border: 1px solid;
    font-size: var(--of-text-xs);
    white-space: nowrap;
}
.of-et-state-pill.mod-off {
    background: color-mix(in srgb, var(--of-danger) 8%, white);
    border-color: color-mix(in srgb, var(--of-danger) 35%, white);
    color: var(--of-danger-ink);
}
.of-et-state-pill.mod-default {
    background: color-mix(in srgb, var(--of-success) 8%, white);
    border-color: color-mix(in srgb, var(--of-success) 35%, white);
    color: var(--of-success-ink);
}
.of-et-state-pill.mod-custom {
    background: color-mix(in srgb, var(--of-brand) 10%, white);
    border-color: color-mix(in srgb, var(--of-brand) 35%, white);
    color: var(--of-brand-ink);
}

.of-et-input-sm { font-size: var(--of-text-xs); }
.of-et-toggle { cursor: pointer; }

/* Report table columns. Fixed narrow widths so the checkbox and the report number
   do not take a share of the space the message needs; the URL cell is capped and
   wraps instead, because a long query string would otherwise push the whole table
   past the viewport. */
.of-et-col-check { width: 44px; }
.of-et-col-id { width: 64px; }
.of-et-col-tick { width: 32px; }
.of-et-col-listen { min-width: 240px; }
.of-et-url-cell { max-width: 320px; word-break: break-word; }
.of-et-audio { max-width: 100%; height: 32px; }

/* Rows that are not ordinary rows. The left rule carries the meaning at a glance,
   which matters more than the tint on a phone where the tint is barely visible. */
.of-et-row-detail { background: color-mix(in srgb, var(--of-brand) 4%, white); }
.of-et-row-detail > td { border-top: none; }
.of-et-row-note {
    background: var(--of-warning-soft);
    border-left: 4px solid var(--of-warning);
}
.of-et-row-orphan {
    background: color-mix(in srgb, var(--of-danger) 8%, white);
    border-left: 4px solid var(--of-danger);
}


/* ==========================================================================
   23e. MICROSITES (hoisted microsites/templates/microsites/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from microsites/templates/microsites/contact_messages.html --- */
:root { --inbox-purple:#6a5a9a; --inbox-purple-lt:#f0ecfb; }

  /* ── Page shell ── */
  .inbox-shell { max-width:960px; margin:0 auto; padding:1.5rem 1rem 3rem; }

  /* ── Tabs ── */
  .inbox-tabs { display:flex; gap:.25rem; border-bottom:2px solid var(--of-line); margin-bottom:1.25rem; }
  .inbox-tab  { padding:.45rem 1rem; border:none; background:none; cursor:pointer; font-size:.88rem;
                font-weight:500; color:var(--of-muted); border-bottom:2px solid transparent; margin-bottom:-2px;
                border-radius:.35rem .35rem 0 0; transition:color .12s; white-space:nowrap; }
  .inbox-tab:hover { color:#374151; background:var(--of-bg); }
  .inbox-tab.active { color:var(--inbox-purple); border-bottom-color:var(--inbox-purple); font-weight:700; }
  .inbox-tab .tab-count { display:inline-flex; align-items:center; justify-content:center;
                           min-width:18px; height:18px; padding:0 5px; border-radius:99px;
                           background:var(--of-bg-deep); color:var(--of-muted); font-size:.72rem; font-weight:700;
                           margin-left:.35rem; }
  .inbox-tab.active .tab-count { background:var(--inbox-purple); color:#fff; }
  .inbox-tab .tab-count.hot { background:var(--of-danger); color:#fff; }

  /* ── Table ── */
  .inbox-table { width:100%; border-collapse:separate; border-spacing:0; }
  .inbox-table th { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
                     color:var(--of-muted); padding:.55rem .85rem; border-bottom:1px solid var(--of-line);
                     background:var(--of-bg); }
  .inbox-table th:first-child { border-radius:.65rem 0 0 0; }
  .inbox-table th:last-child  { border-radius:0 .65rem 0 0; }
  .inbox-row { cursor:pointer; transition:background .1s; }
  .inbox-row:hover { background:#f9f5ff; }
  .inbox-row.status-new td { font-weight:600; }
  .inbox-row td { padding:.7rem .85rem; border-bottom:1px solid var(--of-bg-deep); vertical-align:middle;
                   font-size:.88rem; }
  .inbox-row td:first-child { width:28px; }

  /* status dot */
  .status-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .dot-new      { background:var(--of-danger); }
  .dot-read     { background:var(--of-muted); }
  .dot-replied  { background:var(--of-success); }
  .dot-archived { background:var(--of-line); }

  /* status badge chip */
  .status-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem;
                  border-radius:99px; font-size:.75rem; font-weight:600; white-space:nowrap; }
  .chip-new      { background:var(--of-danger-ink); color:var(--of-danger); }
  .chip-read     { background:var(--of-bg-deep); color:var(--of-muted); }
  .chip-replied  { background:var(--of-bg); color:var(--of-success); }
  .chip-archived { background:var(--of-bg); color:var(--of-muted); }

  /* ── Detail panel (slide-in row) ── */
  .inbox-detail-row { display:none; }
  .inbox-detail-row.open { display:table-row; }
  .inbox-detail-panel { padding:1rem 1.25rem 1.25rem; background:#faf9ff;
                         border-bottom:1px solid var(--of-line); }
  .msg-body-text { white-space:pre-wrap; background:#fff; border:1px solid var(--of-line);
                    border-radius:.5rem; padding:.85rem 1rem; font-size:.9rem;
                    line-height:1.65; color:var(--of-ink); }

  /* ── Status action buttons ── */
  .status-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
  .sa-btn { padding:.3rem .75rem; border-radius:.4rem; border:1.5px solid; font-size:.8rem;
             font-weight:500; cursor:pointer; background:transparent; transition:background .1s; }
  .sa-btn:disabled { opacity:.45; cursor:default; }
  .sa-btn-new      { border-color:var(--of-danger); color:var(--of-danger); }
  .sa-btn-new:hover:not(:disabled) { background:var(--of-danger-ink); }
  .sa-btn-read     { border-color:var(--of-muted); color:var(--of-muted); }
  .sa-btn-read:hover:not(:disabled) { background:var(--of-bg-deep); }
  .sa-btn-replied  { border-color:var(--of-success); color:var(--of-success); }
  .sa-btn-replied:hover:not(:disabled) { background:var(--of-bg); }
  .sa-btn-archived { border-color:var(--of-muted); color:var(--of-muted); }
  .sa-btn-archived:hover:not(:disabled) { background:var(--of-bg); }

  /* ── Empty state ── */
  .inbox-empty { text-align:center; padding:4rem 2rem; color:var(--of-muted);
                  border:2px dashed var(--of-line); border-radius:.75rem; }

/* --- from microsites/templates/microsites/owner_list.html --- */
:root { --ms-purple: #6a5a9a; --ms-purple-lt: #f0ecfb; --ms-purple-mid: #d4c9ec; }

  .ms-site-card { border: 1.5px solid var(--of-line); border-radius: .85rem; background: #fff; overflow: visible; transition: box-shadow .15s; }
  .ms-site-card:hover { box-shadow: 0 4px 18px rgba(106,90,154,.12); }
  .ms-site-card.is-published { border-color: var(--of-success); }

  .ms-site-head { padding: 1rem 1.25rem .75rem; display: flex; align-items: flex-start; gap: .85rem; border-radius: .85rem .85rem 0 0; }
  .ms-site-thumb { width: 44px; height: 44px; border-radius: .55rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; background: var(--ms-purple-lt); }
  .ms-site-thumb.pub { background: var(--of-bg); }

  .ms-status-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 99px; padding: .18rem .65rem; font-size: .78rem; font-weight: 600; }
  .ms-status-pill.live { background: var(--of-bg); color: var(--of-success-ink); }
  .ms-status-pill.draft { background: var(--of-bg-deep); color: var(--of-muted); }

  .ms-badge { display: inline-flex; align-items: center; gap: .25rem; background: #f3f0f8; color: var(--ms-purple); border-radius: 99px; padding: .15rem .55rem; font-size: .78rem; font-weight: 500; }
  .ms-badge.unread { background: var(--of-danger-ink); color: var(--of-danger); }

  .ms-actions { padding: .65rem 1.25rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--of-bg-deep); background: #fafbff; border-radius: 0 0 .85rem .85rem; }
  .ms-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: .45rem; border: 1.5px solid; font-size: .83rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s; background: transparent; }
  .ms-btn-purple { border-color: var(--ms-purple); color: var(--ms-purple); }
  .ms-btn-purple:hover { background: var(--ms-purple-lt); color: var(--ms-purple); }
  .ms-btn-green  { border-color: var(--of-success); color: var(--of-success); }
  .ms-btn-green:hover  { background: var(--of-bg); color: var(--of-success); }
  .ms-btn-amber  { border-color: var(--of-warning); color: var(--of-warning); }
  .ms-btn-amber:hover  { background: var(--of-warning-soft); color: var(--of-warning); }
  .ms-btn-red    { border-color: var(--of-danger); color: var(--of-danger); }
  .ms-btn-red:hover    { background: var(--of-danger-ink); color: var(--of-danger); }
  .ms-btn-muted  { border-color: var(--of-line); color: var(--of-muted); }
  .ms-btn-muted:hover  { background: var(--of-bg-deep); color: #374151; }

  .ms-storage-bar { background: var(--of-bg); border: 1.5px solid var(--of-line); border-radius: .65rem; padding: .6rem 1rem; display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--of-muted); }
  .ms-storage-bar .ms-storage-total { font-weight: 700; color: #2d2540; font-size: .9rem; }
  .ms-size-badge { font-size: .72rem; color: var(--of-muted); background: var(--of-bg-deep); border: 1px solid var(--of-line); border-radius: 99px; padding: .1rem .5rem; white-space: nowrap; }

  .ms-empty { border: 2px dashed var(--ms-purple-mid); border-radius: .85rem; padding: 3rem 2rem; text-align: center; color: var(--of-muted); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

  /* Delete modal */
  .ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1055; align-items: center; justify-content: center; }
  .ms-modal-overlay.show { display: flex; }
  .ms-modal-box { background: #fff; border-radius: .85rem; max-width: 420px; width: 95%; padding: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,.18); }

/* --- from microsites/templates/microsites/page_form.html --- */
.of-page-microsites .form-step { border: 1px solid #e9eef5; border-radius: 10px; margin-bottom: 1.25rem; }
.of-page-microsites .form-step .card-header { background: var(--of-bg); border-bottom: 1px solid #e9eef5; border-radius: 10px 10px 0 0; }
.of-page-microsites .form-step .card-body { background: #fff; border-radius: 0 0 10px 10px; }
  .step-pill { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f1ff; color: var(--of-info); font-weight: 600; font-size: 0.9rem; flex-shrink: 0; }
.of-page-microsites .form-step input, .of-page-microsites .form-step select, .of-page-microsites .form-step textarea { min-height: 42px; }
  .source-toggle-group .source-btn { cursor: pointer; border: 2px solid var(--of-line); border-radius: 8px; padding: 0.65rem 1.25rem; text-align: center; transition: border-color .15s, background .15s, color .15s; background: #fff; }
  .source-toggle-group .source-btn.active { border-color: var(--of-info); background: #e8f1ff; color: var(--of-info); font-weight: 600; }
  .source-toggle-group .source-btn:hover:not(.active) { border-color: #86b7fe; background: #f0f5ff; }
  .current-file-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #f0f7ff; border: 1px solid #bcd3f5; border-radius: 6px; padding: 0.4rem 0.75rem; font-size: 0.85rem; color: #1a4f9c; max-width: 100%; overflow: hidden; }
  .current-file-badge .file-icon { font-size: 1rem; flex-shrink: 0; }
  .current-file-badge .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 575.98px) {
.of-page-microsites .form-step .card-header { padding: 0.75rem 1rem; }
.of-page-microsites .form-step .card-body { padding: 0.85rem 1rem 1rem; }
    .source-toggle-group .source-btn { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
  }

/* --- from microsites/templates/microsites/revisions_list.html --- */
/* ── Page wrapper ── */
.rv-page { max-width:920px; margin:0 auto; padding:1.5rem 1rem 3rem; }

/* ── Storage summary bar ── */
.rv-storage-bar {
  background:#fff; border:1px solid var(--of-line); border-radius:.6rem;
  padding:.75rem 1.2rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.rv-storage-label { font-size:.83rem; color:var(--of-muted); white-space:nowrap; }
.rv-storage-label strong { color:var(--of-ink); }
.rv-storage-track { flex:1; min-width:120px; height:7px; border-radius:4px; background:var(--of-bg-deep); overflow:hidden; }
.rv-storage-fill { height:100%; border-radius:4px; background:var(--of-accent); transition:width .3s; }
.rv-storage-fill.warn { background:var(--of-warning); }
.rv-storage-warn { font-size:.75rem; font-weight:600; color:var(--of-warning); }

/* ── Revision card ── */
.rev-card { background:#fff; border:1px solid var(--of-line); border-radius:.6rem; box-shadow:0 1px 4px rgba(0,0,0,.06); overflow:hidden; }
.rev-card-body { padding:.85rem 1rem; display:flex; gap:.85rem; align-items:flex-start; flex-wrap:wrap; }

/* ── Mini browser thumbnail ── */
.rev-thumb {
  width:130px; min-width:130px; height:90px; border-radius:.35rem;
  border:1px solid var(--of-line); overflow:hidden; background:var(--of-bg); flex-shrink:0;
}
.rev-thumb-bar { background:var(--of-accent); height:16px; display:flex; align-items:center; padding:0 5px; gap:3px; }
.rev-thumb-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); }
.rev-thumb-title { font-size:.5rem; font-weight:600; color:#fff; margin-left:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; opacity:.9; }
.rev-thumb-body { padding:5px 6px; display:flex; flex-direction:column; gap:2px; }
.rev-thumb-page { background:var(--of-accent-soft); border-radius:2px; height:8px; display:flex; align-items:center; padding:0 4px; font-size:.42rem; color:var(--of-accent-ink); overflow:hidden; white-space:nowrap; }
.rev-thumb-block { background:var(--of-bg-deep); border-radius:2px; height:5px; margin-left:7px; opacity:.7; }
.rev-thumb-badge { font-size:.42rem; font-weight:700; color:var(--of-accent); text-align:right; padding:1px 4px 2px; }

/* ── Card meta area ── */
.rev-meta { flex:1; min-width:180px; }
.rev-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.rev-date { font-weight:600; font-size:.9rem; color:var(--of-ink); }
.rev-time { color:var(--of-muted); font-weight:400; }
.rev-note { color:var(--of-muted); font-size:.8rem; margin-top:.1rem; }
.rev-size-pill {
  font-size:.68rem; font-weight:600; padding:.18rem .55rem; border-radius:2rem;
  background:var(--of-bg-deep); border:1px solid var(--of-line); color:var(--of-muted); white-space:nowrap; flex-shrink:0;
}

/* ── Summary badges ── */
.rev-badges { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; }
.rev-badge { font-size:.7rem; padding:.15rem .45rem; border-radius:.25rem; background:var(--of-bg-deep); border:1px solid var(--of-line); color:var(--of-muted); }

/* ── Action row ── */
.rev-actions { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }
.rev-preview-btn { border:1px solid var(--of-accent-soft); background:var(--of-accent-soft); color:var(--of-accent); font-size:.78rem; font-weight:600; padding:.3rem .75rem; border-radius:.3rem; cursor:pointer; transition:background .12s; }
.rev-preview-btn:hover { background:var(--of-accent-soft); }
.rev-preview-btn.open { background:var(--of-accent); color:#fff; border-color:var(--of-accent); }
.rev-del-form button {
  border:1px solid var(--of-danger); background:var(--of-danger-ink); color:var(--of-danger);
  font-size:.75rem; font-weight:600; padding:.3rem .65rem; border-radius:.3rem; cursor:pointer;
  transition:background .12s; line-height:1.4;
}
.rev-del-form button:hover { background:#ffe4e6; }

/* ── Expandable preview panel ── */
.rev-preview-panel { display:none; border-top:1px solid var(--of-line); background:var(--of-bg); padding:.85rem 1rem; }
.rev-preview-panel.open { display:block; }
.rv-pages-grid { display:flex; flex-wrap:wrap; gap:.65rem; }
.rv-page-card { background:#fff; border:1px solid var(--of-line); border-radius:.45rem; padding:.6rem .75rem; min-width:200px; flex:1; }
.rv-page-name { font-size:.78rem; font-weight:700; color:var(--of-ink); padding-bottom:.35rem; border-bottom:1px solid var(--of-bg-deep); margin-bottom:.4rem; display:flex; align-items:center; gap:.35rem; }
.rv-block-row { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.22rem; }
.rv-chip { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.1rem .32rem; border-radius:.2rem; flex-shrink:0; line-height:1.5; }
.rv-snippet { font-size:.73rem; color:var(--of-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.rv-no-blocks { font-size:.73rem; color:var(--of-muted); font-style:italic; }

/* chip colours */
.rv-chip-text    { background:var(--of-bg); color:var(--of-info); }
.rv-chip-columns { background:var(--of-accent-soft); color:var(--of-accent); }
.rv-chip-collapse{ background:var(--of-warning-soft); color:var(--of-warning); }
.rv-chip-toc     { background:var(--of-bg); color:var(--of-info); }
.rv-chip-form    { background:var(--of-bg); color:var(--of-success); }
.rv-chip-image   { background:#fdf4ff; color:#9333ea; }
.rv-chip-youtube { background:var(--of-danger-ink); color:var(--of-danger); }
.rv-chip-video   { background:#fdf4ff; color:#9333ea; }
.rv-chip-map     { background:var(--of-warning-soft); color:var(--of-warning); }
.rv-chip-file    { background:var(--of-bg); color:var(--of-success); }
.rv-chip-embed   { background:var(--of-warning-soft); color:var(--of-warning); }
.rv-chip-button  { background:var(--of-bg); color:#059669; }
.rv-chip-navbar  { background:var(--of-bg); color:var(--of-info); }
.rv-chip-divider { background:var(--of-bg); color:var(--of-muted); }
.rv-chip-spacer  { background:var(--of-bg); color:var(--of-muted); }
.rv-chip-rawhtml { background:var(--of-warning-soft); color:var(--of-warning-ink); }

/* --- from microsites/templates/microsites/website_form.html --- */
/* ─── Microsites purple brand ─── */
  :root { --ms-purple: #6a5a9a; --ms-purple-lt: #f0ecfb; --ms-purple-mid: #d4c9ec; }

  /* ─── Tab bar ─── */
  .ms-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
  .ms-tab-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .95rem; border-radius: .55rem;
    background: var(--ms-purple-lt); border: 1.5px solid var(--ms-purple-mid);
    color: var(--ms-purple); font-weight: 500; font-size: .9rem; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
  }
  .ms-tab-btn .tab-ico { font-size: 1rem; line-height: 1; }
  .ms-tab-btn:hover   { background: #e3dcf5; border-color: #b09fd4; }
  .ms-tab-btn.active  { background: var(--ms-purple); border-color: var(--ms-purple); color: #fff; font-weight: 600; }
  @media (max-width: 575.98px) { .ms-tab-btn { font-size: .82rem; padding: .38rem .7rem; } }
  .ms-tab-link { text-decoration: none; border-style: dashed; }
  .ms-tab-link:hover { background: var(--ms-purple); border-color: var(--ms-purple); color: #fff !important; }

  /* ─── Section cards ─── */
  .ms-card { border: 1.5px solid var(--of-line); border-radius: .85rem; margin-bottom: 1.25rem; overflow: hidden; }
  .ms-card-head { background: var(--ms-purple-lt); border-bottom: 1.5px solid var(--ms-purple-mid); padding: 1rem 1.4rem; display: flex; align-items: flex-start; gap: .85rem; }
  .ms-card-ico  { width: 36px; height: 36px; border-radius: 50%; background: var(--ms-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
  .ms-card-body { background: #fff; padding: 1.35rem 1.4rem; }

  /* ─── Tip callout ─── */
  .ms-tip { background: #fffbf0; border: 1.5px solid #f9d87a; border-radius: .65rem; padding: .75rem 1rem; font-size: .86rem; color: #7a5c00; }
  .ms-tip strong { color: #5a4200; }

  /* ─── Fields ─── */
  .ms-card-body .form-label { font-weight: 600; margin-bottom: .3rem; color: #2d2540; }
  .ms-card-body input:not([type=checkbox]):not([type=radio]),
  .ms-card-body select,
  .ms-card-body textarea { border-radius: .5rem; border: 1.5px solid #d8d1ec; min-height: 42px; }
  .ms-card-body input:focus, .ms-card-body select:focus, .ms-card-body textarea:focus {
    border-color: var(--ms-purple); box-shadow: 0 0 0 3px rgba(106,90,154,.12);
  }
  .ms-card-body .form-text { color: var(--of-muted); font-size: .82rem; margin-top: .25rem; }
.of-page-microsites ul.errorlist { margin: 4px 0 0; padding-left: 0; list-style: none; color: #dc3545; font-size: .83rem; }

  /* ─── Color swatches ─── */
  .swatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .45rem; }
  .swatch-row .swatch { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid #d0d7e2; cursor: pointer; flex-shrink: 0; }
  .swatch-row .swatch:hover { border-color: var(--ms-purple); box-shadow: 0 0 0 2px rgba(106,90,154,.2); }
  .color-preview-wrap { display: flex; align-items: center; gap: .5rem; }
  .color-preview-wrap input { flex: 1; }
  .color-preview-swatch { width: 34px; height: 34px; border-radius: .4rem; border: 1.5px solid #d0d7e2; flex-shrink: 0; }

  /* ─── Char counter ─── */
  .char-counter { font-size: .78rem; color: var(--of-muted); float: right; }
  .char-counter.warn { color: var(--of-warning); }
  .char-counter.danger { color: var(--of-danger); }

  /* ─── Section slug readonly ─── */
  .slug-preview { background: #f3f0f8; border: 1.5px solid var(--ms-purple-mid); border-radius: .5rem; padding: .45rem .85rem; font-family: monospace; font-size: .88rem; color: var(--ms-purple); }

/* --- from microsites/templates/microsites/website_preview.html --- */
/* ── Builder shell ──────────────────────────────────────────── */
  .ms-builder { display:flex; flex-direction:column; min-height:calc(100vh - 3.5rem); }

  /* ── Top command bar ────────────────────────────────────────── */
  .ms-topbar { background:var(--of-ink); padding:.55rem 1rem; display:flex; align-items:center; gap:.5rem; flex-shrink:0; flex-wrap:wrap; min-height:48px; }
  .ms-topbar-btn { color:var(--of-muted); font-size:.78rem; padding:.28rem .6rem; border-radius:6px; text-decoration:none; border:1px solid var(--of-ink); background:transparent; cursor:pointer; white-space:nowrap; transition:all .15s; display:inline-flex; align-items:center; gap:.3rem; }
  .ms-topbar-btn:hover, .ms-topbar-btn:focus { background:var(--of-ink); color:var(--of-line); text-decoration:none; }
  .ms-topbar-title { color:var(--of-line); font-weight:600; font-size:.88rem; }

  /* ── Three-column body ──────────────────────────────────────── */
  .ms-body { display:flex; flex:1; }

  /* ── Left: pages panel ──────────────────────────────────────── */
  .ms-pages { width:220px; flex-shrink:0; background:#fff; border-right:1px solid #dfe6f3; display:flex; flex-direction:column; }
  .ms-pages-head { padding:.55rem .85rem; font-size:.68rem; font-weight:700; color:var(--of-muted); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--of-accent-soft); flex-shrink:0; }
  .ms-pages-tree { flex:1; overflow-y:auto; padding:.4rem; }
  .ms-pages-foot { padding:.5rem .6rem; border-top:1px solid var(--of-accent-soft); flex-shrink:0; }
  .ms-page-row { border:1px solid #e8edff; border-radius:8px; background:#fff; margin-bottom:.28rem; transition:border-color .1s; }
  .ms-page-row:hover { border-color:var(--of-accent-soft); }
  .ms-page-row.dragging { opacity:.5; }
  .ms-page-row.ms-selected { border-color:var(--of-accent); background:var(--of-accent-soft); }
  .ms-page-row.ms-page-hidden { border-color:var(--of-danger); background:#fff5f5; }
  .ms-page-row.ms-page-hidden:hover { border-color:var(--of-danger); }
  .ms-page-row.ms-page-hidden.ms-selected { border-color:var(--of-danger); background:var(--of-danger-ink); }
  .ms-page-hidden-link { color:var(--of-danger) !important; }
  .ms-toggle-btn { border:none; background:transparent; color:var(--of-muted); padding:0 2px; line-height:1; cursor:pointer; font-size:.72rem; transition:transform .15s; }
  .ms-toggle-btn[aria-expanded="false"] { transform:rotate(-90deg); }

  /* ── Center canvas ──────────────────────────────────────────── */
  .ms-canvas { flex:1; background:var(--of-bg-deep); padding:1rem 1.15rem; }
  .ms-canvas .card { border-radius:10px; }

  /* ── Hero / logo / header (FoxCom-style) ────────────────────── */
  .ps-hero-wrap { border-radius:10px; overflow:hidden; margin-bottom:.75rem; }
  .ps-hero { position:relative; min-height:160px; background:#1b2236 center/cover no-repeat; display:flex; align-items:flex-end; padding:.75rem 1rem; }
  .ps-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,18,34,.75) 0%,rgba(20,38,58,.45) 100%); pointer-events:none; }
  .ps-hero-identity { position:relative; z-index:2; display:flex; align-items:center; gap:.65rem; flex:1; }
  .ps-hero-logo { width:56px; height:56px; object-fit:contain; border-radius:.45rem; border:2px solid rgba(255,255,255,.8); background:rgba(255,255,255,.08); flex-shrink:0; }
  .ps-hero-title { font-size:.95rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
  .block-reorder-btn { border:none; background:transparent; color:var(--of-muted); font-size:.8rem; line-height:1; padding:2px 5px; border-radius:4px; cursor:pointer; }
  .block-reorder-btn:hover { background:var(--of-bg-deep); color:#374151; }

  /* ── Right sidebar shell ────────────────────────────────────── */
  .ms-sidebar { width:288px; flex-shrink:0; background:#fff; border-left:1px solid var(--of-line); display:flex; }

  /* ── Panel body + panes (copy from CMS .oe-panel-*) ─────────── */
  .oe-panel-body { flex:1; min-width:0; }
  .oe-panel-pane { display:none; }
  .oe-panel-pane.active { display:block; }

  /* ── Vertical tab strip (copy from CMS .oe-tab-strip) ────────── */
  .oe-tab-strip { width:44px; flex-shrink:0; background:var(--of-bg); border-left:1px solid var(--of-line); display:flex; flex-direction:column; align-items:center; padding:.65rem 0; gap:.3rem; }
  .oe-tab-btn { width:34px; height:34px; border-radius:.4rem; border:none; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--of-muted); transition:background .12s,color .12s; gap:2px; padding:0; }
  .oe-tab-btn .tb-icon { font-size:1rem; line-height:1; }
  .oe-tab-btn .tb-label { font-size:.52rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  .oe-tab-btn:hover { background:var(--of-line); color:var(--of-muted); }
  .oe-tab-btn.active { background:var(--of-accent); color:#fff; }

  /* ── Blocks panel (copy from CMS .oe-blocks-panel) ──────────── */
  .oe-blocks-panel { padding:.65rem; }
  .oe-block-group { margin-bottom:.85rem; }
  .oe-block-group-label { font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--of-muted); padding:.2rem .5rem; margin-bottom:.3rem; }
  .oe-block-tile { display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:.4rem; cursor:pointer; color:#374151; font-size:.8rem; transition:background .1s; border:1px solid transparent; width:100%; background:none; text-align:left; }
  .oe-block-tile:hover { background:var(--of-accent-soft); border-color:var(--of-accent-soft); color:var(--of-accent); }
  .oe-block-tile .tile-icon { width:28px; height:28px; border-radius:.3rem; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; background:var(--of-bg-deep); }
  .oe-block-tile:hover .tile-icon { background:var(--of-accent-soft); }
  .oe-block-tile .tile-name { font-weight:500; }

  /* ── Style panel (copy from CMS .oe-style-panel) ─────────────── */
  .oe-style-panel { padding:.75rem; }
  .oe-style-section { margin-bottom:.9rem; }
  .oe-style-label { display:block; font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--of-muted); margin-bottom:.35rem; }

  /* ── Public / preview sidebar ───────────────────────────────── */
  .builder-shell { border:1px solid #dfe6f3; border-radius:10px; overflow:visible; }
  .builder-side { background:#fbfcff; border-right:1px solid #dfe6f3; border-radius:10px; overflow-y:auto; max-height:82vh; position:sticky; top:80px; }
  .builder-side.nav-dark { background:#1a1a2e !important; color:var(--of-line); border-color:#374151; }
  .builder-side.nav-dark a { color:var(--of-info); }
  .builder-side.nav-transparent { background:transparent !important; border:none !important; }
.of-page-microsites .nav-top-bar { border-bottom:1px solid #dfe6f3; border-radius:10px; padding:.5rem 1rem; margin-bottom:.75rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

  /* ── Responsive ─────────────────────────────────────────────── */
  @media (max-width:991.98px) {
    .ms-body { flex-direction:column; }
    .ms-pages { width:100%; border-right:none; border-bottom:1px solid #dfe6f3; }
    .ms-sidebar { width:100%; border-left:none; border-top:1px solid #dfe6f3; }
    .oe-tab-strip { flex-direction:row; width:auto; height:auto; border-left:none; padding:.35rem .5rem; gap:.25rem; border-top:1px solid var(--of-line); }
  }

  /* ── Inline block rows (mirrors CMS page editor exactly) ─────────── */
  /* canvas area — distinct from block cards */
  #msBlockArea { background:#e8ecf0; padding:.75rem; border-radius:.55rem; }

  .oe-block {
    background:#fff; border-radius:.55rem;
    border:1px solid #d1d9e0; margin-bottom:.65rem;
    box-shadow:0 1px 4px rgba(0,0,0,.07);
    transition:box-shadow .15s, border-color .15s;
    overflow:hidden;
  }
  .oe-block:hover { border-color:var(--of-accent-soft); box-shadow:0 2px 10px rgba(99,102,241,.08); }
  .oe-block.drag-over { border-color:var(--of-accent); box-shadow:0 0 0 2px #6366f130; }

  .oe-block-bar {
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .7rem; background:var(--of-bg);
    border-bottom:1px solid var(--of-bg-deep); cursor:grab;
    user-select:none;
  }
  .oe-block-bar:active { cursor:grabbing; }

  .oe-drag-dots {
    display:grid; grid-template-columns:repeat(2, 4px); gap:2px;
    padding:2px 1px; color:var(--of-line); flex-shrink:0;
  }
  .oe-drag-dots span { width:4px; height:4px; border-radius:50%; background:currentColor; display:block; }

  .oe-block-chip {
    font-size:.65rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:.15rem .5rem;
    border-radius:.25rem; background:var(--of-bg-deep); color:var(--of-muted);
    flex-shrink:0;
  }

  .oe-block-hint {
    flex:1 1 0; min-width:0;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-size:.72rem; color:var(--of-muted); font-style:italic;
    padding:0 .15rem;
  }

  .oe-block-actions { display:flex; gap:.35rem; align-items:center; }
  .oe-block-actions button {
    border:1px solid; cursor:pointer;
    font-size:.78rem; font-weight:600;
    padding:.32rem .75rem; border-radius:.3rem;
    transition:background .12s, color .12s, border-color .12s;
    line-height:1.3;
  }
  .oe-block-actions .oe-save-btn { color:var(--of-accent); border-color:var(--of-accent-soft); background:var(--of-accent-soft); }
  .oe-block-actions .oe-save-btn:hover { background:var(--of-accent-soft); border-color:#a5b4fc; }
  .oe-block-actions .oe-del-btn { color:var(--of-muted); border-color:var(--of-line); background:var(--of-bg); }
  .oe-block-actions .oe-del-btn:hover { background:var(--of-danger-ink); color:var(--of-danger); border-color:var(--of-danger); }

  .oe-block-body { padding:.85rem .9rem; background:var(--of-bg); border-top:1px solid var(--of-bg-deep); }
  .oe-block-body.collapsed { display:none; }
  /* code textarea — clearly distinct from surrounding white */
  .oe-block-body .font-monospace { background:var(--of-accent-soft); border:1.5px solid var(--of-accent-soft); color:var(--of-ink); }

  .oe-canvas-empty {
    text-align:center; padding:4rem 2rem; color:var(--of-muted);
    border:2px dashed var(--of-line); border-radius:.65rem;
  }
  .oe-canvas-empty .oe-empty-icon { font-size:2.5rem; margin-bottom:.75rem; opacity:.45; }

  /* ── Block-type chip colours ─────────────────────────────────────── */
  .oe-chip-text    { background:var(--of-bg); color:var(--of-info); }
  .oe-chip-image   { background:#fdf4ff; color:#9333ea; }
  .oe-chip-video   { background:#fdf4ff; color:#9333ea; }
  .oe-chip-youtube { background:var(--of-danger-ink); color:var(--of-danger); }
  .oe-chip-file    { background:var(--of-bg); color:var(--of-success); }
  .oe-chip-embed   { background:var(--of-warning-soft); color:var(--of-warning); }
  .oe-chip-button  { background:var(--of-bg); color:#059669; }
  .oe-chip-map     { background:var(--of-warning-soft); color:var(--of-warning); }
  .oe-chip-columns { background:var(--of-accent-soft); color:var(--of-accent); }
  .oe-chip-collapse{ background:var(--of-warning-soft); color:var(--of-warning); }
  .oe-chip-toc     { background:var(--of-bg); color:var(--of-info); }
  .oe-chip-divider { background:var(--of-bg); color:var(--of-muted); }
  .oe-chip-spacer  { background:var(--of-bg); color:var(--of-muted); }
  .oe-chip-navbar  { background:var(--of-bg); color:var(--of-info); }
  .oe-chip-form    { background:var(--of-bg); color:var(--of-success); }
  .oe-chip-rawhtml { background:var(--of-warning-soft); color:var(--of-warning-ink); }

  /* ── Quick Start template tiles ─────────────────────────────────── */
  .ms-tpl-tile {
    display:block; width:100%; padding:.5rem .65rem; border-radius:.4rem;
    cursor:pointer; font-size:.8rem; font-weight:500; color:#374151;
    border:1px solid var(--of-line); background:var(--of-bg); text-align:left;
    transition:background .1s, border-color .1s;
  }
  .ms-tpl-tile:hover { background:var(--of-accent-soft); border-color:var(--of-accent-soft); color:var(--of-accent); }

  /* ── Quick Start group labels ────────────────────────────────────── */
  .oe-tile-group-label {
    font-size:.7rem; font-weight:600; color:var(--of-muted);
    text-transform:uppercase; letter-spacing:.05em;
    margin:.6rem 0 .3rem;
  }

  /* ── Draft notice banner ─────────────────────────────────────────── */
  .ms-draft-notice {
    background:var(--of-warning-soft); border:1px solid var(--of-warning-soft); border-radius:.4rem;
    padding:.5rem .85rem; font-size:.82rem; color:var(--of-warning-ink); margin-bottom:.75rem;
  }
  .ms-draft-notice a { color:var(--of-warning); font-weight:500; }

  /* ── AI Prompt Helper panel ──────────────────────────────────────── */
  .ms-section-desc {
    background:#f0f9ff; border-left:3px solid #38bdf8;
    padding:.55rem .75rem; border-radius:0 .4rem .4rem 0;
    font-size:.85rem; color:#0c4a6e;
  }
  .ms-ai-panel {
    background:var(--of-accent-soft); border:1px solid #ddd6fe;
    border-radius:.5rem; padding:.75rem 1rem;
  }
  .ms-ai-panel-header {
    font-weight:600; font-size:.88rem; color:#4c1d95;
    cursor:pointer; user-select:none;
    display:flex; align-items:center; justify-content:space-between;
  }
  .ms-ai-chevron { font-size:.72rem; font-weight:400; opacity:.75; white-space:nowrap; margin-left:.5rem; }
  .ms-ai-panel-header:hover { opacity:.85; }
  .ms-ai-steps { font-size:.82rem; color:#374151; margin-bottom:0; padding-left:1.3rem; }
  .ms-ai-steps li { margin-bottom:.3rem; }
  .ms-ai-steps a { color:var(--of-accent); }
  .ms-prompt-ta { font-family:inherit; white-space:pre-wrap; resize:vertical; }

  /* ── Tips panel ───────────────────────────────────────────────────── */
  .ms-tips-panel { border:1px solid var(--of-bg); border-radius:.4rem; background:var(--of-bg); }
  .ms-tips-toggle { display:block; padding:.45rem .75rem; font-size:.8rem; font-weight:600; color:var(--of-success-ink); cursor:pointer; list-style:none; }
  .ms-tips-toggle::-webkit-details-marker { display:none; }
  .ms-tips-body { padding:.6rem .85rem .65rem; font-size:.82rem; color:#374151; border-top:1px solid var(--of-bg); }
  .ms-tips-body code { background:var(--of-bg); padding:.1em .3em; border-radius:.2rem; }

  /* ── Undo button ──────────────────────────────────────────────────── */
  .oe-block-actions .oe-undo-btn { color:var(--of-warning); border-color:var(--of-warning-soft); background:var(--of-warning-soft); display:none; }
  .oe-block-actions .oe-undo-btn:hover { background:var(--of-warning-soft); border-color:var(--of-star); }
  .oe-block-actions .oe-undo-btn.visible { display:inline-block; }


/* ==========================================================================
   23f. MESSAGING (hoisted messaging/templates/messaging/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from messaging/templates/messaging/_compose.html --- */
.voice-toggle-btn { transition: box-shadow 0.2s ease; }
.voice-recording-active { animation: of-pulse-red 1s infinite; }
@keyframes of-pulse-red {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.6); }
  50%      { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
}
.of-compose-toolbar { row-gap: .5rem; }
.of-compose-attach-name { flex: 1 1 100%; order: 5; }
@media (min-width: 576px) { .of-compose-attach-name { flex: 1 1 auto; order: 0; } }
@media (max-width: 575.98px) {
  .of-compose-toolbar .btn-sm { padding: .35rem .55rem; }
  .of-compose-send-btn { min-width: 80px; }
}
.of-compose-box { border:1px solid var(--of-accent-soft); border-radius:0.5rem; overflow:hidden; background:#fff; }
.of-compose-box textarea.form-control { border:none!important; box-shadow:none!important; border-radius:0!important; resize:none; min-height:52px; font-size:16px; }
.of-compose-previews { padding:6px 8px 4px; border-bottom:1px solid var(--of-bg-deep); background:var(--of-bg); display:flex; flex-wrap:wrap; gap:5px; }
.of-file-chip { display:inline-flex; align-items:center; gap:4px; background:var(--of-accent-soft); border:1px solid var(--of-info); border-radius:0.75rem; padding:2px 7px 2px 4px; font-size:.72rem; max-width:160px; }
.of-file-chip img.chip-thumb { width:28px; height:28px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.of-file-chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.of-file-chip .chip-rm, .of-voice-chip .chip-rm { cursor:pointer; color:var(--of-muted); font-size:.9rem; line-height:1; margin-left:2px; flex-shrink:0; }
.of-file-chip .chip-rm:hover, .of-voice-chip .chip-rm:hover { color:var(--of-danger); }
.of-voice-chip { display:inline-flex; align-items:center; gap:4px; background:var(--of-bg); border:1px solid var(--of-success); border-radius:0.75rem; padding:2px 7px 2px 5px; font-size:.72rem; max-width:180px; }
.of-voice-chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- originally from messaging/templates/messaging/_post_card.html, which was
       DELETED 2026-08-17 as dead code (referenced by no template and no Python).
       These rules are deliberately KEPT: .of-post-card is still built at runtime by
       messaging/_board_js.html, and of-react-btn / of-react-count / of-comment-item /
       of-comment-form / of-reacted are used by _message_card.html — the board pages
       override them from §23q, but these remain the base. Only .of-post-av below is
       genuinely orphaned; it is left in place rather than removed piecemeal, and is
       tracked in docs/design/TASKS.md. --- */
.of-post-card { border-radius: .75rem; }
.of-post-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#4361ee,#059669);
  color: #fff; font-size: .85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.of-react-btn {
  background: var(--of-bg-deep); border: 1px solid var(--of-line);
  border-radius: 1rem; padding: .2rem .55rem;
  font-size: .82rem; cursor: pointer; transition: background .12s;
  line-height: 1.4;
}
.of-react-btn:hover { background: var(--of-line); }
.of-react-btn.of-reacted { background: var(--of-accent-soft); border-color: var(--of-info); }
.of-react-count { font-size: .75rem; color: var(--of-muted); margin-left: .1rem; }
.of-comment-item {
  padding: .35rem .5rem; background: var(--of-bg);
  border-radius: .4rem; margin-bottom: .35rem;
}
.of-comment-form input { font-size: .82rem; }

/* --- from messaging/templates/messaging/dashboard.html --- */
.of-message-feed {
    background: linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
  }

  .of-message-row {
    display: flex;
    margin-bottom: 1rem;
  }

  .of-message-row-own {
    justify-content: flex-end;
  }

  .of-message-row-other {
    justify-content: flex-start;
  }

  .of-message-cluster {
    display: flex;
    gap: 0.7rem;
    align-items: flex-end;
    max-width: min(80%, 680px);
  }

  .of-message-row-own .of-message-cluster {
    flex-direction: row-reverse;
  }

  .of-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--of-muted);
    color: #fff;
  }

  .of-message-bubble {
    padding: 0.85rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  .of-message-bubble-own {
    background: linear-gradient(135deg, var(--of-info) 0%, #3b82f6 100%);
    color: #fff;
    border-color: var(--of-info);
    border-bottom-right-radius: 0.35rem;
  }

  .of-message-bubble-other {
    background: #edf1f5;
    color: var(--of-ink);
    border-color: #d7dde5;
    border-bottom-left-radius: 0.35rem;
  }

  .of-message-meta {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
  }

  .of-message-row-own .of-message-meta {
    justify-content: flex-end;
  }

  .of-message-bubble-own .of-message-meta,
  .of-message-bubble-own .of-message-meta .text-muted,
  .of-message-bubble-own .of-message-body,
  .of-message-bubble-own .of-message-shared-note {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .of-message-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.82rem;
  }

  .of-message-bubble-own .of-message-attachment-chip {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
  }

  .of-message-bubble-other .of-message-attachment-chip {
    color: var(--of-ink);
    background: #fff;
    border-color: var(--of-line);
  }

  .of-message-shared-card {
    margin-top: 0.65rem;
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid transparent;
  }

  .of-message-bubble-own .of-message-shared-card {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .of-message-bubble-other .of-message-shared-card {
    background: #fff;
    border-color: #d7dde5;
  }

  .of-message-compose-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-muted);
    margin-bottom: 0.45rem;
  }

  .of-message-compose-input {
    width: 100%;
    min-height: 108px;
    border: 2px solid var(--of-accent-soft);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    resize: vertical;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .of-message-compose-input:focus {
    border-color: var(--of-info);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    outline: none;
  }

  .of-sidebar-jump .btn {
    font-size: 0.74rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
  }

  .of-sidebar-section {
    padding: 0.75rem;
    border-bottom: 1px solid var(--of-line);
  }

  .of-sidebar-section-title {
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--of-muted);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
  }

  .of-sidebar-section-copy {
    font-size: 0.74rem;
    color: var(--of-muted);
    margin-bottom: 0.5rem;
  }

  .of-side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    border: 1px solid var(--of-line);
    border-radius: 0.65rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.35rem;
    background: #fff;
  }

  .of-side-item-main {
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
  }

  .of-side-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--of-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .of-side-item-meta {
    font-size: 0.7rem;
    color: var(--of-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .of-fav-toggle {
    border: 0;
    background: transparent;
    color: var(--of-muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.1rem;
  }

  .of-fav-toggle.is-active {
    color: #eab308;
  }

  .of-group-card {
    border: 1px solid #dbe3ef;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.45rem;
    margin-bottom: 0.5rem;
  }

  .of-channel-list {
    border-top: 1px dashed var(--of-line);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
  }

  .of-channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.25rem 0.2rem;
    border-radius: 0.4rem;
  }

  .of-channel-links {
    display: inline-flex;
    gap: 0.35rem;
    font-size: 0.69rem;
  }

  .of-channel-links a {
    color: var(--of-info);
    text-decoration: none;
  }

  .of-channel-links a:hover {
    text-decoration: underline;
  }

  .of-favorite-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    border: 1px solid var(--of-line);
    background: #fff;
    border-radius: 0.65rem;
    padding: 0.35rem 0.45rem;
    margin-bottom: 0.35rem;
  }

  .of-favorite-kind {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--of-ink);
    text-transform: uppercase;
    background: var(--of-line);
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
  }

  @media (max-width: 991.98px) {
    .of-message-cluster {
      max-width: 92%;
    }
  }

  @media (max-width: 575.98px) {
    .of-message-cluster {
      max-width: 96%;
      gap: 0.5rem;
    }

    .of-message-bubble {
      padding: 0.75rem 0.85rem;
    }
  }

/* --- from messaging/templates/messaging/direct_dashboard.html --- */
/* Voice recorder UI shared with the Blink form */
  .voice-toggle-btn { transition: box-shadow 0.2s ease; }
  .voice-recording-active { animation: of-pulse-red 1s infinite; }
  @keyframes of-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
  }
  .voice-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
  .voice-wave .vw-bar { width: 3px; height: 6px; background: #dc3545; border-radius: 2px; animation: of-vw 0.8s ease-in-out infinite; }
  .voice-wave .vw-bar:nth-child(2) { animation-delay: 0.1s; }
  .voice-wave .vw-bar:nth-child(3) { animation-delay: 0.2s; }
  .voice-wave .vw-bar:nth-child(4) { animation-delay: 0.3s; }
  @keyframes of-vw { 0% { height: 5px; } 50% { height: 12px; } 100% { height: 5px; } }
  .voice-phase-badge { min-width: 64px; text-align: center; }

  /* Responsive compose toolbar — keep Send button always visible on phones.
     The toolbar wraps to multiple rows on narrow screens and Send is pushed
     to the right via ms-auto so it never falls off the screen.            */
  .of-compose-toolbar { row-gap: .5rem; }
  .of-compose-attach-name {
    flex: 1 1 100%;
    order: 5;
    min-width: 0;
  }
  @media (min-width: 576px) {
    .of-compose-attach-name { flex: 1 1 auto; order: 0; }
  }
  /* Make sure the chat area never pushes the compose form off-screen on
     small devices (the form lives in a sticky-ish pane at the bottom).   */
  @media (max-width: 575.98px) {
    .of-compose-toolbar .btn-sm { padding: .35rem .55rem; }
    .of-compose-send-btn { min-width: 80px; }
  }

  /* Message action menu */
  .of-msg-bubble { padding-right: 28px !important; }
  .of-msg-actions { position:absolute; top:4px; right:4px; opacity:0; transition:opacity .15s; }
  .of-msg-row:hover .of-msg-actions,
  .of-msg-row:focus-within .of-msg-actions { opacity:1; }
  /* Always show action button on touch devices (no hover available) */
  @media (hover: none) { .of-msg-actions { opacity: 1; } }
  .of-msg-menu-btn { background:none; border:none; padding:0 4px; font-size:1rem; line-height:1; cursor:pointer; color:rgba(255,255,255,.7); border-radius:4px; }
  .of-msg-actions:not(.of-msg-actions-own) .of-msg-menu-btn { color:var(--of-muted); }
  .of-msg-menu-btn:hover { background:rgba(0,0,0,.08); }
  /* Dropdown uses fixed positioning (set via JS) to avoid bubble clipping */
  .of-msg-dropdown { position:fixed; z-index:9800; background:#fff; border:1px solid var(--of-line); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.18); min-width:160px; padding:4px 0; }
  .of-msg-dropdown button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 14px; font-size:.84rem; cursor:pointer; color:var(--of-ink); white-space:nowrap; }
  .of-msg-dropdown button:hover { background:var(--of-bg-deep); }
  .of-msg-dropdown button.of-dd-danger { color:var(--of-danger); }
  .of-edited-badge { font-size:.65rem; opacity:.7; font-style:italic; }
  /* Archive indicator on message attachments and files tab */
  .of-archived-badge { display:inline-flex; align-items:center; gap:3px; font-size:.7rem; color:var(--of-warning-ink); margin-top:.3rem; flex-wrap:wrap; }
  .of-archived-file-badge { display:inline-flex; align-items:center; gap:2px; font-size:.68rem; background:var(--of-warning-soft); color:var(--of-warning-ink); border:1px solid var(--of-warning-soft); border-radius:999px; padding:.1rem .4rem; white-space:nowrap; flex-shrink:0; }
  /* Peer avatars in conversation list and chat header */
  .of-peer-av-img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid rgba(0,0,0,.08); display:block; }
  .of-peer-av-init { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--of-brand); color:#fff; font-size:.72rem; font-weight:700; flex-shrink:0; }
  .of-peer-av-img-lg { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid rgba(0,0,0,.08); display:block; }
  .of-peer-av-init-lg { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--of-brand); color:#fff; font-size:.82rem; font-weight:700; flex-shrink:0; }

  /* Reload button on attachments — visible pill */
  .of-att-reload { background:#e0f2fe; border:1px solid var(--of-info); border-radius:999px; padding:1px 7px; font-size:.78rem; color:var(--of-brand); cursor:pointer; line-height:1.6; flex-shrink:0; font-weight:600; white-space:nowrap; }
  .of-att-reload:hover { background:var(--of-info); border-color:#60a5fa; }

  /* Compose box — inline attachment/voice previews */
  .of-compose-box { border:1px solid var(--of-accent-soft); border-radius:0.5rem; overflow:hidden; background:#fff; }
  .of-compose-box textarea.form-control { border:none!important; box-shadow:none!important; border-radius:0!important; resize:none; min-height:52px; font-size:16px; }
  .of-compose-previews { padding:6px 8px 4px; border-bottom:1px solid var(--of-bg-deep); background:var(--of-bg); display:flex; flex-wrap:wrap; gap:5px; }
  .of-file-chip { display:inline-flex; align-items:center; gap:4px; background:var(--of-accent-soft); border:1px solid var(--of-info); border-radius:0.75rem; padding:2px 7px 2px 4px; font-size:.72rem; max-width:160px; }
  .of-file-chip img.chip-thumb { width:28px; height:28px; object-fit:cover; border-radius:5px; flex-shrink:0; }
  .of-file-chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .of-file-chip .chip-rm, .of-voice-chip .chip-rm { cursor:pointer; color:var(--of-muted); font-size:.9rem; line-height:1; margin-left:2px; flex-shrink:0; }
  .of-file-chip .chip-rm:hover, .of-voice-chip .chip-rm:hover { color:var(--of-danger); }
  .of-voice-chip { display:inline-flex; align-items:center; gap:4px; background:var(--of-bg); border:1px solid var(--of-success); border-radius:0.75rem; padding:2px 7px 2px 5px; font-size:.72rem; max-width:180px; }
  .of-voice-chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Voice status — prominent when recording */
  #of-voice-status:not(:empty) { font-size:.8rem; font-weight:500; color:var(--of-danger); }

  /* ── Full-screen conversation mode on mobile (iPhone iMessage style) ── */
  @media (max-width: 991.98px) {
    .of-conv-open {
      position: fixed !important;
      inset: 0 !important;
      z-index: 1040 !important;
      height: 100% !important;
      background: #f8fbff !important;
      overflow: hidden;
    }
    .of-conv-open #msgFeed {
      flex: 1 !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    .of-conv-open .of-compose-area-wrap {
      flex-shrink: 0 !important;
    }
    .of-conv-open #convFilesSection {
      flex-shrink: 0 !important;
      max-height: 45vh;
      overflow-y: auto;
    }
    .of-conv-open .of-conv-header {
      flex-shrink: 0 !important;
    }
    /* Freeze page scroll behind the fullscreen panel */
    body:has(.of-conv-open) { overflow: hidden; }
  }

/* --- from messaging/templates/messaging/home.html --- */
/* ── Hub container ─────────────────────────────────────────── */
.of-fc-hub { max-width: 1200px; }

/* ── Concept guide strip ───────────────────────────────────── */
.of-fc-guide {
  display: flex; align-items: stretch; gap: .5rem;
  background: #fff; border: 1px solid #e3eaf5; border-radius: 1rem;
  padding: .85rem 1.1rem; box-shadow: 0 2px 8px rgba(30,40,80,.04);
}
.of-fc-guide-item {
  display: flex; align-items: flex-start; gap: .65rem; flex: 1; min-width: 0;
}
.of-fc-guide-icon {
  width: 40px; height: 40px; border-radius: .55rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.of-fc-guide-title { font-size: .85rem; font-weight: 700; color: var(--of-ink); }
.of-fc-guide-desc  { font-size: .72rem; color: var(--of-muted); margin-top: 2px; line-height: 1.45; }
.of-fc-guide-arrow { color: var(--of-line); font-size: 1.2rem; flex-shrink: 0; align-self: center; padding: 0 .15rem; }
@media (max-width: 767.98px) {
  .of-fc-guide { flex-direction: column; gap: .65rem; }
  .of-fc-guide-arrow { display: none; }
  .of-fc-guide-item { gap: .55rem; }
}

/* ── Search bar ────────────────────────────────────────────── */
.of-fc-search-wrap {
  position: relative;
}
.of-fc-search-inner {
  display: flex; align-items: center; gap: 0.65rem;
  background: #fff;
  border: 1.5px solid #d1dae8;
  border-radius: 0.85rem;
  padding: 0.65rem 1rem;
  box-shadow: 0 2px 8px rgba(67,97,238,.06);
  transition: border-color .15s, box-shadow .15s;
}
.of-fc-search-inner:focus-within {
  border-color: #4361ee;
  box-shadow: 0 0 0 3px rgba(67,97,238,.12);
}
.of-fc-search-icon { font-size: 1.05rem; flex-shrink: 0; }
.of-fc-search-input {
  flex: 1 1 auto; border: none; outline: none; background: transparent;
  font-size: 0.97rem; color: var(--of-ink);
}
.of-fc-search-input::placeholder { color: var(--of-muted); }
.of-fc-search-hint { font-size: 0.72rem; color: var(--of-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Card ──────────────────────────────────────────────────── */
.of-fc-card {
  background: #fff;
  border: 1px solid #e3eaf5;
  border-radius: 1rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(30,40,80,.05);
}
.of-fc-card-fav  { border-top: 3px solid var(--of-warning); }
.of-fc-card-dm   { border-top: 3px solid #4361ee; }
.of-fc-card-space{ border-top: 3px solid #059669; }

/* ── Card header ───────────────────────────────────────────── */
.of-fc-card-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid #f1f5fb;
  background: #fafbfd;
}
.of-fc-card-icon { font-size: 1.35rem; line-height: 1; }
.of-fc-card-title { font-size: 0.97rem; font-weight: 700; color: var(--of-ink); }
.of-fc-card-sub   { font-size: 0.72rem; color: var(--of-muted); margin-top: 1px; }
.of-fc-card-action {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--of-accent-soft); color: #4361ee;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  text-decoration: none; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.of-fc-card-action:hover { background: #4361ee; color: #fff; }

/* ── Card body ─────────────────────────────────────────────── */
.of-fc-card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.5rem;
  max-height: 52vh;
}

/* ── Card footer ───────────────────────────────────────────── */
.of-fc-card-foot {
  padding: 0.55rem 1rem;
  border-top: 1px solid #f1f5fb;
  background: #fafbfd;
  text-align: center;
}
.of-fc-foot-link {
  font-size: 0.78rem; color: var(--of-muted); text-decoration: none; font-weight: 500;
}
.of-fc-foot-link:hover { color: #4361ee; text-decoration: underline; }

/* ── Row item ──────────────────────────────────────────────── */
.of-fc-row {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.6rem;
  text-decoration: none; color: var(--of-ink);
  transition: background .1s;
}
.of-fc-row:hover { background: #f1f5fb; color: var(--of-ink); }

/* ── Avatar ────────────────────────────────────────────────── */
.of-fc-avatar {
  flex-shrink: 0; width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; color: #fff;
}
.of-fc-avatar-dm    { background: linear-gradient(135deg, #4361ee 0%, #7b8cff 100%); }
.of-fc-avatar-space { background: linear-gradient(135deg, #059669 0%, #34d399 100%); border-radius: 0.45rem; }
.of-fc-avatar-fav   { background: linear-gradient(135deg, var(--of-warning) 0%, var(--of-star) 100%); border-radius: 0.45rem; }

/* ── Row body ──────────────────────────────────────────────── */
.of-fc-row-body { min-width: 0; flex: 1 1 auto; }
.of-fc-row-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-fc-row-meta { font-size: 0.75rem; color: var(--of-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-fc-row-time { font-size: 0.7rem; color: var(--of-muted); flex-shrink: 0; white-space: nowrap; }

/* ── Unpin button (favorites) ──────────────────────────────── */
.of-fc-unpin {
  flex-shrink: 0; background: transparent; border: none;
  font-size: 1rem; color: var(--of-warning); cursor: pointer;
  padding: 0.2rem 0.3rem; border-radius: 0.35rem;
  transition: background .12s, transform .1s;
  line-height: 1;
}
.of-fc-unpin:hover { background: rgba(245,158,11,.12); transform: scale(1.15); }

/* ── Empty state ───────────────────────────────────────────── */
.of-fc-empty { padding: 1.5rem 0.5rem; text-align: center; }
.of-fc-empty-icon { font-size: 2rem; margin-bottom: 0.4rem; }
.of-fc-empty-text { font-size: 0.88rem; font-weight: 600; color: #374151; margin: 0 0 0.2rem; }
.of-fc-empty-hint { font-size: 0.78rem; color: var(--of-muted); margin: 0; }
.of-fc-cta {
  display: inline-block; margin-top: 0.65rem;
  padding: 0.4rem 1rem; border-radius: 0.5rem;
  background: #4361ee; color: #fff; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.of-fc-cta:hover { background: #3451cc; color: #fff; }

/* ── No-match alert ────────────────────────────────────────── */
.of-fc-nomatch {
  margin-top: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--of-line); border-radius: 0.65rem;
  text-align: center; font-size: 0.82rem; color: var(--of-muted);
  background: var(--of-bg);
}

/* ── Live search dropdown ──────────────────────────────────── */
.of-fc-search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #d1dae8;
  border-radius: 0.85rem;
  box-shadow: 0 8px 32px rgba(30,40,80,.16);
  z-index: 300;
  max-height: 480px;
  overflow-y: auto;
}
.of-fc-drop-head {
  padding: 0.5rem 1rem 0.3rem;
  font-size: 0.68rem; font-weight: 700;
  color: var(--of-muted); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid #f1f5fb;
}
.of-fc-drop-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.58rem 1rem;
  text-decoration: none; color: var(--of-ink);
  transition: background .1s;
}
.of-fc-drop-row:hover { background: #f1f5fb; color: var(--of-ink); }
.of-fc-drop-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--of-accent) 0%, #a5b4fc 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 700; color: #fff;
}
.of-fc-drop-avatar-user { background: linear-gradient(135deg, #4361ee 0%, #7b8cff 100%); }
.of-fc-drop-info { min-width: 0; flex: 1 1 auto; }
.of-fc-drop-name { font-weight: 600; font-size: 0.88rem; color: var(--of-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-fc-drop-meta { font-size: 0.73rem; color: var(--of-muted); }
.of-fc-drop-btn {
  flex-shrink: 0; padding: 0.3rem 0.75rem;
  background: #4361ee; color: #fff;
  border-radius: 0.45rem;
  font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}
.of-fc-drop-divider { border-top: 1px solid #f1f5fb; }
.of-fc-drop-none { padding: 0.55rem 1rem; font-size: 0.82rem; color: var(--of-muted); }

/* ── Contacts card accent ──────────────────────────────────── */
.of-fc-card-contacts { border-top: 3px solid var(--of-accent); }

/* ── Contacts internal search ──────────────────────────────── */
.of-fc-contacts-search-wrap {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid #f1f5fb;
  background: #fafbff;
}
.of-fc-contacts-search-icon { font-size: 0.95rem; flex-shrink: 0; color: var(--of-muted); }
.of-fc-contacts-search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 0.9rem; color: var(--of-ink);
}
.of-fc-contacts-search-input::placeholder { color: var(--of-muted); }

/* ── Contacts list ─────────────────────────────────────────── */
.of-fc-contacts-list {
  overflow-y: auto;
  max-height: 55vh;
}

.of-fc-contact-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #f5f7fc;
  transition: background .1s;
}
.of-fc-contact-row:last-child { border-bottom: none; }
.of-fc-contact-row:hover { background: #f5f7ff; }

.of-fc-contact-avatar {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--of-accent) 0%, #a5b4fc 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; color: #fff;
}
.of-fc-contact-info { min-width: 0; flex: 1 1 auto; }
.of-fc-contact-name {
  font-weight: 600; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--of-ink);
}
.of-fc-contact-meta {
  font-size: 0.75rem; color: var(--of-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.of-fc-wink-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.38rem 0.85rem;
  background: #4361ee; color: #fff;
  border: none; border-radius: 0.55rem;
  font-size: 0.8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .1s;
}
.of-fc-wink-btn:hover { background: #3451cc; color: #fff; transform: translateY(-1px); }

.of-fc-contact-nomatch {
  padding: 1.2rem; text-align: center;
  font-size: 0.85rem; color: var(--of-muted);
}

/* ── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .of-fc-card-body { max-height: 40vh; }
  .of-fc-contacts-list { max-height: 45vh; }
}
@media (max-width: 575.98px) {
  .of-fc-search-inner { padding: 0.55rem 0.75rem; }
  .of-fc-card-body { max-height: 32vh; }
  .of-fc-wink-btn { padding: 0.32rem 0.6rem; font-size: 0.75rem; }
}


/* ==========================================================================
   23g. MESSAGING SUBPAGES (hoisted messaging/templates/messaging/**/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from messaging/templates/messaging/channel/dashboard.html --- */
.of-planet-header { background-color:#1d1f35; } .of-planet-header::after { background:linear-gradient(115deg,rgba(18,19,34,.88),rgba(30,39,66,.55)); }

/* --- from messaging/templates/messaging/group/channel_list.html --- */
.of-hover-lift{transition:transform .12s ease, box-shadow .12s ease}.of-hover-lift:hover{transform:translateY(-2px);box-shadow:0 .5rem 1rem rgba(0,0,0,.08)!important}

/* --- from messaging/templates/messaging/group/management.html (design Phase 13) ---
   That page also carried a verbatim copy of the .of-fc-guide-* strip already hoisted
   from messaging/home.html above; the duplicate was deleted rather than merged, so the
   two pages stop rendering the same component in two different palettes.
   #1d5660 below IS --of-brand exactly, so that stop is a token with no visual change.
   The emerald/indigo stops are decorative gradients that match no role token — mapping
   them to --of-success would be claiming a semantic they do not have — so they stay
   literal here, exactly as .of-planet-header above does, and are tracked in
   docs/design/TASKS.md as colour debt rather than silently reinterpreted. */
.of-space-card { border-radius: 1rem; overflow: hidden; transition: box-shadow .15s; }
.of-space-card:hover { box-shadow: 0 4px 20px rgba(30, 40, 80, .12) !important; }
.of-space-accent { height: 4px; }
.of-space-accent-owner { background: linear-gradient(90deg, var(--of-brand), #059669); }
.of-space-accent-member { background: linear-gradient(90deg, #4361ee, #059669); }
.of-space-av {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: .6rem;
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: #fff;
}


/* ==========================================================================
   23h. CMS (hoisted cms/templates/cms/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from cms/templates/cms/_block_editor.html --- */
.of-block-list { display:flex; flex-direction:column; gap:.5rem; }
.of-block-row {
  border: 1px solid var(--of-line); border-radius: .5rem; background: var(--of-bg);
  padding: .6rem .75rem;
}
.of-block-row-head {
  display:flex; align-items:center; gap:.5rem; cursor:grab;
  font-size:.8rem; font-weight:600; color:var(--of-muted); margin-bottom:.4rem;
}
.of-block-row-head .of-drag-handle { opacity:.45; }
.of-block-body { display:none; }
.of-block-body.open { display:block; }

/* --- from cms/templates/cms/_page_blocks.html --- */
.of-cms-navbar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1rem;
  border-radius: .5rem;
  flex-wrap: wrap;
}
.of-cms-navbar--horizontal { flex-direction: row; }
.of-cms-navbar--vertical   { flex-direction: column; align-items: flex-start; max-width: 240px; }

/* Light — visible grey band so it stands out from white page body */
.of-cms-navbar--light {
  background: var(--of-bg-deep);
  border: 1px solid var(--of-line);
  color: var(--of-ink);
}
/* Dark */
.of-cms-navbar--dark  { background: var(--of-ink); color: var(--of-bg); }
/* Accent — falls back to brand blue if CSS var not set */
.of-cms-navbar--accent { background: var(--of-cms-accent, #4361ee); color: #fff; }

.of-cms-navbar--sticky { position: sticky; top: 0; z-index: 100; }

.of-cms-navbar-brand {
  font-weight: 700;
  margin-right: .6rem;
  white-space: nowrap;
  font-size: .95rem;
  letter-spacing: -.01em;
}

.of-cms-navbar-links { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.of-cms-navbar--vertical .of-cms-navbar-links { flex-direction: column; width: 100%; }

/* Links — pill-shaped, clearly interactive */
.of-cms-navbar-links a {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .14s, color .14s, box-shadow .14s;
  white-space: nowrap;
  cursor: pointer;
}
/* Light links — blue text makes them look obviously clickable */
.of-cms-navbar--light .of-cms-navbar-links a { color: var(--of-info); }
.of-cms-navbar--light .of-cms-navbar-links a:hover {
  background: var(--of-accent-soft); color: var(--of-info);
  box-shadow: 0 1px 3px rgba(37,99,235,.15);
}
/* Dark links */
.of-cms-navbar--dark .of-cms-navbar-links a { color: var(--of-line); }
.of-cms-navbar--dark .of-cms-navbar-links a:hover { background: rgba(255,255,255,.15); color: #fff; }
/* Accent links */
.of-cms-navbar--accent .of-cms-navbar-links a { color: rgba(255,255,255,.9); }
.of-cms-navbar--accent .of-cms-navbar-links a:hover { background: rgba(0,0,0,.18); color: #fff; }

/* Vertical — full-width links */
.of-cms-navbar--vertical .of-cms-navbar-links a {
  display: block; width: 100%; border-radius: .375rem;
  padding: .4rem .75rem;
}

@media (max-width: 575.98px) {
  .of-cms-navbar { padding: .5rem .75rem; }
  .of-cms-navbar-links a { padding: .3rem .65rem; font-size: .82rem; }
}

/* Form block */
.of-cms-form { background: var(--of-bg); border: 1px solid var(--of-line); border-radius: .5rem; padding: 1.25rem; }
.of-cms-form-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; color: var(--of-ink); }
.of-cms-form-desc { margin-bottom: 1rem; }
.of-form-error { min-height: 1rem; }
@media (max-width: 575.98px) {
  .of-cms-form { padding: .85rem; }
}

/* --- from cms/templates/cms/sitemap.html --- */
.of-sitemap-tree { padding-left: 0; }
.of-sitemap-node { margin: 0; }
.of-sitemap-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem; border-radius: .35rem;
  text-decoration: none; color: var(--of-ink); font-size: .9rem;
}
.of-sitemap-item:hover { background: var(--of-accent-soft); }
.of-sitemap-item .sm-badge { font-size: .6rem; }
.of-sitemap-children { padding-left: 1.5rem; border-left: 2px solid var(--of-line); margin-left: .75rem; }


/* ==========================================================================
   23i. USER APP (hoisted userapp/templates/userapp/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from userapp/templates/userapp/dashboard.html --- */
/* Collapsible hub sections (owner request 2026-07-21): every section is
       its own fold, all closed on arrival, one switch opens/closes them all. */
    .of-sec-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .75rem;
        border: 1px solid rgba(29, 86, 96, .14);
        border-left: 5px solid var(--of-brand);
        border-radius: .8rem;
        background: var(--of-surface-strong);
        padding: .8rem 1.1rem;
        text-align: left;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
        transition: background .15s ease, box-shadow .15s ease;
    }
    .of-sec-toggle:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .1); }
    .of-sec-toggle .of-sec-icon {
        width: 2.2rem; height: 2.2rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: .6rem; flex: 0 0 auto; font-size: 1.1rem;
    }
    .of-sec-toggle .of-sec-title { font-weight: 800; color: #14232b; font-size: 1.02rem; }
    .of-sec-toggle .of-sec-sub { color: #5c6b70; font-size: .8rem; }
    .of-sec-toggle .of-sec-count {
        margin-left: auto; flex: 0 0 auto; font-weight: 700;
        border-radius: 999px; padding: .1rem .65rem; font-size: .82rem;
        background: #eef5f6; color: var(--of-brand);
    }
    .of-sec-toggle .of-sec-chev { flex: 0 0 auto; color: #8a8377; transition: transform .2s ease; }
    .of-sec-toggle:not(.collapsed) .of-sec-chev { transform: rotate(180deg); }
    .of-sec-body { padding: 1rem .25rem .25rem; }
    .of-hub-sec { margin-bottom: .8rem; }

    /* Distinct accent per section (owner request 2026-07-21: headers looked
       too alike). Left bar + icon + count pill share the section's color;
       opening a section tints its header so the open one stands out. */
    .mod-winks   { border-left-color: var(--of-accent); }
    .mod-winks   .of-sec-icon  { background: #fdeede; color: #b95c10; }
    .mod-winks   .of-sec-count { background: #fdeede; color: #b95c10; }
    .mod-winks:not(.collapsed) { background: #fef8f2; }

    .mod-next    { border-left-color: var(--of-brand); }
    .mod-next    .of-sec-icon  { background: #e2eff1; color: var(--of-brand); }
    .mod-next    .of-sec-count { background: #e2eff1; color: var(--of-brand); }
    .mod-next:not(.collapsed)  { background: #f4fafa; }

    .mod-stats   { border-left-color: var(--of-accent); }
    .mod-stats   .of-sec-icon  { background: #f0e9fd; color: #6427cf; }
    .mod-stats:not(.collapsed) { background: var(--of-accent-soft); }

    .mod-orbit   { border-left-color: #1d3557; }
    .mod-orbit   .of-sec-icon  { background: #e6ebf3; color: #1d3557; }
    .mod-orbit   .of-sec-count { background: #e6ebf3; color: #1d3557; }
    .mod-orbit:not(.collapsed) { background: #f6f8fb; }

    .mod-account { border-left-color: #0F7B46; }
    .mod-account .of-sec-icon  { background: #e4f3ea; color: #0F7B46; }
    .mod-account:not(.collapsed) { background: #f5faf7; }


/* ==========================================================================
   23j. SHARED ROOT TEMPLATES (hoisted templates/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from templates/404.html --- */
/* ── Layout ── */
.of-404-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem 2.5rem;
}

/* ── Code + canvas overlay ── */
.of-404-code-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
}
#of404Canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}
.of-404-code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 700;
  color: #b8864a;
  letter-spacing: -.03em;
  pointer-events: none;
  /* subtle text shadow for depth */
  text-shadow: 0 2px 18px rgba(184,134,74,.18), 0 1px 0 rgba(255,255,255,.6);
}

/* ── Hero text ── */
.of-404-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #2c2a25;
  margin: .75rem 0 .5rem;
  max-width: 560px;
}
.of-404-lead {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  color: #5c5649;
  max-width: 520px;
  line-height: 1.65;
  margin-bottom: 0;
}
.of-404-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ── Nav section ── */
.of-404-nav-section {
  text-align: center;
}
.of-404-nav-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c2a25;
  margin-bottom: .35rem;
}
.of-404-nav-sub {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #7a6e61;
  font-size: .95rem;
  margin-bottom: 2rem;
}
.of-404-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 780px;
  margin: 0 auto;
}
.of-404-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1rem 1.2rem;
  background: #fffbf4;
  border: 1.5px solid #ede6d8;
  border-radius: .875rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  cursor: pointer;
}
.of-404-nav-card:hover {
  border-color: var(--of-accent);
  box-shadow: 0 4px 18px rgba(223,122,47,.12);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.of-404-nav-icon {
  margin-bottom: .65rem;
  line-height: 1;
}
.of-404-nav-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: #2c2a25;
  margin-bottom: .3rem;
}
.of-404-nav-desc {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .8rem;
  color: #7a6e61;
  line-height: 1.45;
}

/* ── About block ── */
.of-404-about {
  background: #fffbf4;
  border: 1.5px solid #ede6d8;
  border-radius: 1rem;
  padding: 1.75rem 2rem !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.of-404-about-inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.of-404-about-fox {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: .1rem;
}
.of-404-about-text p {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .92rem;
  color: #5c5649;
  line-height: 1.65;
  margin-bottom: .6rem;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .of-404-about-inner { flex-direction: column; gap: .75rem; }
  .of-404-about-fox { font-size: 2rem; }
  .of-404-nav-grid { grid-template-columns: repeat(2, 1fr); }
  #of404Canvas { max-width: 300px; }
}
@media (max-width: 479.98px) {
  .of-404-nav-grid { grid-template-columns: 1fr 1fr; }
}

/* --- from templates/_app_menu.html --- */
.of-app-menu-group { border: none; margin-bottom: .25rem; }
  .of-app-menu-group summary {
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--of-muted, #888);
    padding: .35rem .5rem;
    user-select: none;
    list-style: none;
  }
  .of-app-menu-group summary::-webkit-details-marker { display: none; }
  .of-app-menu-group summary::before {
    content: '▸ ';
    font-size: .75em;
    opacity: .6;
    transition: transform .15s ease;
  }
  .of-app-menu-group[open] > summary::before { content: '▾ '; }

/* --- from templates/blink_detail.html --- */
.of-attachment-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-media-summary-card {
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.of-media-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(13, 110, 253, 0.24);
}
.of-media-summary-count {
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 700;
    margin: 8px 0;
}
.of-media-block {
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.88) 0%, var(--of-surface-strong) 100%);
    margin-bottom: 18px;
}
.of-media-empty {
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 14px;
    padding: 18px;
    background: var(--of-bg);
}
.of-subcard {
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.of-primary-image-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.of-file-action-btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}
.of-attachment-path-label {
    font-weight: 500;
}
.of-attachment-path-toggle {
    font-size: 0.95rem;
    line-height: 1;
}
.of-attachment-path-full {
    word-break: break-all;
    white-space: normal;
    background: var(--of-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
}


/* Legacy markdown rendering */
.of-inline-code {
  font-size: .82em; background: var(--of-bg-deep);
  border: 1px solid var(--of-line); border-radius: .25rem;
  padding: .1em .35em; color: var(--of-ink);
}
.of-description a.of-desc-link { color: var(--of-info); text-decoration: underline; }
.of-bq {
  border-left: 3px solid var(--of-line) !important;
  padding-left: .75rem; color: var(--of-muted); font-style: italic;
}

/* Quill HTML output in detail view */
.of-description p   { margin-bottom: .35rem; }
.of-description h1  { font-size: 1.3rem;  font-weight: 700; margin: .5rem 0 .25rem; }
.of-description h2  { font-size: 1.1rem;  font-weight: 600; margin: .4rem 0 .2rem; }
.of-description h3  { font-size: .95rem;  font-weight: 600; margin: .3rem 0 .15rem; }
.of-description ul,
.of-description ol  { padding-left: 1.4rem; margin-bottom: .35rem; }
.of-description blockquote {
  border-left: 3px solid var(--of-line); padding-left: .75rem;
  color: var(--of-muted); font-style: italic; margin: .35rem 0;
}
.of-description pre {
  background: var(--of-bg-deep); border-radius: .375rem;
  padding: .5rem .75rem; font-size: .82rem;
  overflow-x: auto; margin: .35rem 0;
}
.of-description code {
  background: var(--of-bg-deep); border: 1px solid var(--of-line);
  border-radius: .25rem; padding: .1em .35em;
  font-size: .82em; color: var(--of-ink);
}
.of-description a { color: var(--of-info); text-decoration: underline; }
.of-description img {
  max-width: 100%; height: auto;
  border-radius: .375rem; display: inline-block; margin: .4rem 0;
  box-sizing: border-box; cursor: zoom-in;
}
/* Inline-block above lets text-align on the paragraph move an image
   left / center / right (the alignment set in the editor). */
/* KaTeX display math centering and overflow */
.of-description .katex-display { overflow-x: auto; overflow-y: hidden; margin: .5rem 0; }

/* --- from templates/our_philosophy.html --- */
.of-orbit-canvas-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0 0.5rem;
}
#ofOrbitCanvas {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0.75rem;
    background: #fffaf1;
    display: block;
}
.of-orbit-caption {
    margin-top: 0.55rem;
    text-align: center;
    letter-spacing: 0.01em;
}
@media (max-width: 480px) {
    #ofOrbitCanvas { max-width: 320px; }
}


/* ==========================================================================
   23k. BLINK (hoisted templates/blink/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from templates/blink/how_it_works.html --- */
/* Match the rest of the site: same typography rhythm and spacing as the
       Blink dashboard. Keep embedded admin HTML safely contained. */
    .of-blink-howto { font-size: 1rem; line-height: 1.65; color: var(--of-text, var(--of-ink)); }
    .of-blink-howto h1, .of-blink-howto h2, .of-blink-howto h3, .of-blink-howto h4 { margin-top: 1.4em; margin-bottom: .5em; font-weight: 600; }
    .of-blink-howto h2 { font-size: 1.35rem; }
    .of-blink-howto h3 { font-size: 1.15rem; }
    .of-blink-howto p { margin-bottom: 1em; }
    .of-blink-howto ul, .of-blink-howto ol { padding-left: 1.25rem; margin-bottom: 1em; }
    .of-blink-howto li { margin-bottom: .35em; }
    .of-blink-howto img { max-width: 100%; height: auto; border-radius: 8px; }
    .of-blink-howto iframe, .of-blink-howto video { max-width: 100%; border-radius: 8px; }
    .of-blink-howto table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
    .of-blink-howto table th, .of-blink-howto table td { border: 1px solid var(--of-line); padding: .5rem .75rem; text-align: left; vertical-align: top; }
    .of-blink-howto blockquote { border-left: 3px solid var(--of-accent-soft); padding: .25rem 0 .25rem 1rem; color: #4b5563; margin: 1em 0; }
    .of-blink-howto code { background: var(--of-bg-deep); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
    .of-blink-howto pre { background: var(--of-bg-deep); padding: .75rem 1rem; border-radius: 8px; overflow-x: auto; }
    .of-blink-howto a { color: var(--of-link, var(--of-info)); text-decoration: underline; }
    @media (max-width: 575.98px) {
        .of-blink-howto { font-size: .95rem; }
        .of-blink-howto h2 { font-size: 1.2rem; }
    }


/* ==========================================================================
   23l. CORE PAGES (hoisted templates/core/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from templates/core/admin_app_directory.html --- */
.ad-shell { max-width: 1200px; margin: 0 auto; }

  /* ── Hero ── */
  .ad-hero {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 24px;
    background:
      radial-gradient(circle at top right, rgba(29,78,216,0.10), transparent 35%),
      linear-gradient(180deg, rgba(239,246,255,0.98), rgba(255,255,255,0.98));
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 20px 45px rgba(15,23,42,0.07);
    margin-bottom: 1.5rem;
  }
  .ad-hero-kicker { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--of-info); font-weight:700; }
  .ad-hero-title  { font-family:"Fraunces",serif; font-size:clamp(1.5rem,2.8vw,2rem); color:var(--of-ink); margin:.4rem 0 .6rem; }
  .ad-hero-copy   { color:var(--of-muted); margin:0 0 1.1rem; font-size:.95rem; }
  .ad-hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

  /* ── Stat pills ── */
  .ad-stat-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
  .ad-stat-pill { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:999px; font-size:.85rem; font-weight:600; border:1.5px solid; }
  .ad-stat-pill.total  { background:#f0f9ff; border-color:var(--of-info); color:#0c4a6e; }
  .ad-stat-pill.user   { background:var(--of-bg); border-color:var(--of-success); color:var(--of-success-ink); }
  .ad-stat-pill.system { background:var(--of-warning-soft); border-color:var(--of-warning); color:var(--of-warning-ink); }
  .ad-stat-pill.admin  { background:#faf5ff; border-color:var(--of-accent); color:#3b0764; }

  /* ── Legend ── */
  .ad-legend { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.8rem; color:var(--of-muted); padding:.4rem 0 .9rem; }
  .ad-legend-item { display:flex; align-items:center; gap:.3rem; }
  .ad-legend-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

  /* ── Toolbar rows ── */
  .ad-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.5rem; align-items:center; }
  .ad-toolbar-row2 { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; align-items:center; }
  .ad-search-input {
    flex:1 1 240px; padding:.5rem .9rem;
    border-radius:10px; border:1px solid rgba(15,23,42,.14);
    font-size:.9rem; background:#fff;
  }
  .ad-search-input:focus { outline:none; border-color:var(--of-info); box-shadow:0 0 0 3px rgba(29,78,216,.12); }

  .ad-filter-btn {
    padding:.42rem .9rem; border-radius:999px;
    border:1.5px solid rgba(15,23,42,.14); background:var(--of-bg);
    color:var(--of-ink); font-size:.82rem; font-weight:600;
    cursor:pointer; transition:all .13s; white-space:nowrap;
  }
  .ad-filter-btn:hover { background:var(--of-line); }
  .ad-filter-btn.active           { background:var(--of-info); border-color:var(--of-info); color:#fff; }
  .ad-filter-btn.f-user.active    { background:var(--of-success); border-color:var(--of-success); color:#fff; }
  .ad-filter-btn.f-system.active  { background:var(--of-warning); border-color:var(--of-warning); color:#fff; }
  .ad-filter-btn.f-admin.active   { background:var(--of-accent); border-color:var(--of-accent); color:#fff; }

  /* Sort buttons */
  .ad-sort-label { font-size:.75rem; font-weight:600; color:var(--of-muted); white-space:nowrap; }
  .ad-sort-btn {
    padding:.32rem .72rem; border-radius:999px;
    border:1.5px solid rgba(15,23,42,.12); background:var(--of-bg);
    color:var(--of-muted); font-size:.76rem; font-weight:600;
    cursor:pointer; transition:all .13s; white-space:nowrap;
  }
  .ad-sort-btn:hover { background:var(--of-line); }
  .ad-sort-btn.active { background:var(--of-ink); border-color:var(--of-ink); color:#fff; }

  /* View-switch — identical pattern to blinks dashboard */
  .ad-view-switch {
    display:inline-flex; border:1.5px solid var(--of-line);
    border-radius:8px; overflow:hidden; background:var(--of-bg-deep);
    flex-shrink:0; margin-left:auto;
  }
  .ad-vsw-btn {
    border:none; background:transparent;
    padding:.38rem .72rem; font-size:.78rem; font-weight:500; color:var(--of-muted);
    cursor:pointer; border-right:1px solid var(--of-line);
    white-space:nowrap; transition:background .12s,color .12s; line-height:1.3;
  }
  .ad-vsw-btn:last-child { border-right:none; }
  .ad-vsw-btn.active { background:#fff; color:var(--of-info); font-weight:600; }
  .ad-vsw-btn:hover:not(.active) { background:var(--of-line); color:#374151; }

  /* ── Code badge ── */
  .ad-code-badge {
    font-size:.62rem; font-family:monospace; font-weight:700; letter-spacing:.04em;
    color:var(--of-muted); background:var(--of-bg-deep); border:1px solid rgba(15,23,42,.10);
    padding:.07rem .42rem; border-radius:5px; flex-shrink:0; white-space:nowrap;
  }

  /* ── Shared helpers ── */
  .ad-tag {
    font-size:.7rem; font-weight:700; letter-spacing:.05em;
    padding:.12rem .5rem; border-radius:999px; border:1px solid; white-space:nowrap;
  }
  .ad-tag.tag-orbit  { background:var(--of-bg); border-color:var(--of-success); color:var(--of-success-ink); }
  .ad-tag.tag-ai     { background:var(--of-bg); border-color:#3b82f6; color:var(--of-info); }
  .ad-tag.tag-billing{ background:var(--of-warning-soft); border-color:var(--of-warning); color:var(--of-warning-ink); }
  .ad-tag.tag-staff  { background:#faf5ff; border-color:var(--of-accent); color:#3b0764; }
  .ad-tag.tag-system { background:var(--of-warning-soft); border-color:var(--of-warning); color:#7c2d12; }
  .ad-tag.tag-content{ background:var(--of-accent-soft); border-color:var(--of-brand); color:var(--of-brand-strong); }
  .ad-tag.tag-core   { background:var(--of-bg-deep); border-color:var(--of-muted); color:var(--of-ink); }

  .ad-prefix {
    font-size:.72rem; font-family:monospace; color:var(--of-info);
    background:var(--of-bg); border:1px solid rgba(29,78,216,.18);
    padding:.1rem .48rem; border-radius:6px; display:inline-block;
  }
  .ad-link {
    display:inline-flex; align-items:center; gap:.28rem;
    padding:.28rem .62rem; border-radius:7px;
    font-size:.78rem; font-weight:600; text-decoration:none; border:1px solid;
    transition:background .12s; white-space:nowrap;
  }
  .ad-link.lk-dashboard { background:var(--of-bg); border-color:var(--of-info); color:var(--of-info); }
  .ad-link.lk-dashboard:hover { background:var(--of-accent-soft); }
  .ad-link.lk-settings  { background:#faf5ff; border-color:var(--of-accent); color:#3b0764; }
  .ad-link.lk-settings:hover { background:var(--of-accent-soft); }
  .ad-link.lk-docs      { background:var(--of-accent-soft); border-color:var(--of-brand); color:var(--of-brand-strong); }
  .ad-link.lk-docs:hover { background:#ccfbf1; }
  .ad-link.lk-extra     { background:var(--of-bg); border-color:rgba(15,23,42,.12); color:var(--of-muted); }
  .ad-link.lk-extra:hover { background:var(--of-bg-deep); color:var(--of-ink); }
  .ad-link.lk-none      { background:var(--of-bg); border-color:rgba(15,23,42,.08); color:var(--of-muted); cursor:default; font-style:italic; }
  .ad-link.lk-profile   { background:#fdf2f8; border-color:#db2777; color:#831843; }
  .ad-link.lk-profile:hover { background:#fce7f3; }

  .ad-links-group { display:flex; flex-direction:column; gap:.22rem; }
  .ad-links-label { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--of-muted); }
  .ad-links-row   { display:flex; flex-wrap:wrap; gap:.28rem; }

  /* ── TYPE BADGE (used in list view) ── */
  .ad-type-badge { font-size:.7rem; font-weight:700; padding:.18rem .58rem; border-radius:999px; border:1px solid; white-space:nowrap; }
  .ad-type-badge.t-user   { background:var(--of-bg); border-color:var(--of-success); color:var(--of-success-ink); }
  .ad-type-badge.t-system { background:var(--of-warning-soft); border-color:var(--of-warning); color:var(--of-warning-ink); }
  .ad-type-badge.t-admin  { background:#faf5ff; border-color:var(--of-accent); color:#3b0764; }

  /* ── GRID VIEW ── */
  .ad-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:1rem;
  }
  .ad-grid-item {
    border:1px solid rgba(15,23,42,.09); border-radius:20px;
    background:#fff; padding:1.2rem 1.3rem;
    display:flex; flex-direction:column; gap:.55rem;
    transition:box-shadow .15s,border-color .15s; position:relative;
  }
  .ad-grid-item:hover { box-shadow:0 10px 28px rgba(15,23,42,.10); border-color:rgba(15,23,42,.16); }
  .ad-grid-item::before {
    content:''; position:absolute; top:0; left:0;
    width:4px; height:100%; border-radius:20px 0 0 20px;
  }
  .ad-grid-item.t-user::before   { background:var(--of-success); }
  .ad-grid-item.t-system::before { background:var(--of-warning); }
  .ad-grid-item.t-admin::before  { background:var(--of-accent); }
  .ad-grid-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
  .ad-grid-name { font-family:"Fraunces",serif; font-size:1.05rem; color:var(--of-ink); margin:0; line-height:1.2; }
  .ad-grid-folder {
    font-size:.7rem; color:var(--of-muted); font-family:monospace;
    background:var(--of-bg-deep); padding:.09rem .4rem; border-radius:5px;
    border:1px solid rgba(15,23,42,.06); flex-shrink:0; margin-top:.15rem;
  }
  .ad-grid-desc { font-size:.84rem; color:var(--of-muted); line-height:1.5; margin:0; flex:1 1 auto; }

  /* ── LIST VIEW ── */
  .ad-list { border:1px solid rgba(15,23,42,.09); border-radius:18px; overflow:hidden; background:#fff; }
  .ad-list-row {
    display:flex; align-items:flex-start; gap:0;
    border-bottom:1px solid rgba(15,23,42,.05);
    transition:background .12s; position:relative;
  }
  .ad-list-row:last-child { border-bottom:none; }
  .ad-list-row:hover { background:var(--of-bg); }
  .ad-list-stripe { width:4px; flex-shrink:0; align-self:stretch; }
  .t-user   .ad-list-stripe { background:var(--of-success); }
  .t-system .ad-list-stripe { background:var(--of-warning); }
  .t-admin  .ad-list-stripe { background:var(--of-accent); }
  .ad-list-body {
    flex:1 1 0; min-width:0;
    display:grid;
    grid-template-columns: minmax(155px,215px) minmax(0,1fr) auto;
    gap:.7rem 1rem; padding:.85rem 1rem; align-items:start;
  }
  .ad-list-name { font-family:"Fraunces",serif; font-size:.95rem; color:var(--of-ink); margin:0 0 .15rem; line-height:1.25; }
  .ad-list-folder {
    font-size:.68rem; color:var(--of-muted); font-family:monospace;
    background:var(--of-bg-deep); padding:.07rem .38rem; border-radius:5px;
    border:1px solid rgba(15,23,42,.05); display:inline-block; margin-bottom:.28rem;
  }
  .ad-list-desc { font-size:.82rem; color:var(--of-muted); line-height:1.45; margin:0 0 .38rem; }
  @media (max-width:767.98px) {
    .ad-list-body { grid-template-columns:1fr; }
  }

  /* ── COMPACT VIEW ── */
  .ad-compact { border:1px solid rgba(15,23,42,.09); border-radius:18px; overflow:hidden; background:#fff; }
  .ad-compact-row {
    display:flex; align-items:center; gap:0;
    border-bottom:1px solid rgba(15,23,42,.05);
    transition:background .12s; min-height:2.5rem;
  }
  .ad-compact-row:last-child { border-bottom:none; }
  .ad-compact-row:hover { background:var(--of-bg); }
  .ad-compact-stripe { width:3px; flex-shrink:0; align-self:stretch; }
  .t-user   .ad-compact-stripe { background:var(--of-success); }
  .t-system .ad-compact-stripe { background:var(--of-warning); }
  .t-admin  .ad-compact-stripe { background:var(--of-accent); }
  .ad-compact-body {
    flex:1 1 0; min-width:0;
    display:flex; align-items:center; gap:.6rem;
    padding:.42rem .85rem; flex-wrap:wrap;
  }
  .ad-compact-name {
    font-weight:600; font-size:.84rem; color:var(--of-ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:100px; flex:0 0 auto;
  }
  .ad-compact-folder {
    font-size:.67rem; color:var(--of-muted); font-family:monospace;
    background:var(--of-bg-deep); padding:.06rem .36rem; border-radius:4px;
    border:1px solid rgba(15,23,42,.05); flex-shrink:0;
  }
  .ad-compact-desc {
    font-size:.77rem; color:var(--of-muted);
    flex:1 1 80px; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis; min-width:0;
  }
  .ad-compact-links { display:flex; flex-wrap:wrap; gap:.28rem; flex-shrink:0; margin-left:auto; }

  /* No-results */
  #adNoResults { display:none; }

  @media (max-width:767.98px) {
    .ad-grid { grid-template-columns:1fr; }
    .ad-hero { border-radius:18px; }
    .ad-view-switch { margin-left:0; }
    .ad-compact-desc { display:none; }
  }

/* --- from templates/core/django_code_map.html --- */
.of-code-map-shell {
    display: grid;
    gap: 1.5rem;
  }

  .of-code-map-hero,
  .of-code-map-card,
  .of-code-map-flow,
  .of-code-map-tabs-wrap {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: var(--of-surface-strong);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  }

  .of-code-map-hero,
  .of-code-map-card,
  .of-code-map-flow,
  .of-code-map-tabs-wrap {
    padding: 1.35rem;
  }

  .of-code-map-kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--of-brand);
    font-weight: 700;
  }

  .of-code-map-title,
  .of-code-map-section-title {
    font-family: "Fraunces", serif;
    color: var(--of-ink);
  }

  .of-code-map-title {
    margin: 0.55rem 0 0.8rem;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
  }

  .of-code-map-copy,
  .of-code-map-muted {
    color: var(--of-muted);
  }

  .of-code-map-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.2rem;
  }

  .of-code-map-stat {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
  }

  .of-code-map-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--of-ink);
  }

  .of-code-map-stat-label {
    display: block;
    margin-top: 0.25rem;
    color: var(--of-muted);
    font-size: 0.86rem;
  }

  .of-code-map-flow-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
    margin-top: 1rem;
  }

  .of-code-map-flow-step {
    position: relative;
    padding: 1rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(15, 23, 42, 0.08);
  }

  .of-code-map-flow-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--of-brand);
    font-weight: 700;
    background: var(--of-surface-strong);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
  }

  .of-code-map-flow-label {
    display: block;
    font-weight: 700;
    color: var(--of-ink);
    margin-bottom: 0.45rem;
  }

  .of-code-map-tabs {
    gap: 0.65rem;
  }

  .of-code-map-tabs .nav-link {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--of-ink);
    font-weight: 700;
    background: var(--of-bg);
  }

  .of-code-map-tabs .nav-link.active {
    background: var(--of-ink);
    border-color: var(--of-ink);
    color: var(--of-bg);
  }

  .of-code-map-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.9rem;
  }

  .of-code-map-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: var(--of-bg);
    color: var(--of-ink);
    font-size: 0.86rem;
  }

  .of-code-map-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .of-code-map-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    color: #115e59;
    font-size: 0.85rem;
  }

  .of-code-map-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--of-muted);
  }

  .of-code-map-code {
    margin: 0;
    padding: 1rem;
    border-radius: 18px;
    background: var(--of-ink);
    color: var(--of-accent-soft);
    overflow: auto;
    max-height: 34rem;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre;
    tab-size: 4;
  }

  .of-code-map-list {
    margin-bottom: 0;
    padding-left: 1.15rem;
    color: var(--of-ink);
  }

  @media (max-width: 991.98px) {
    .of-code-map-stat-grid,
    .of-code-map-flow-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .of-code-map-flow-step::after {
      display: none;
    }
  }

  @media (max-width: 767.98px) {
    .of-code-map-hero,
    .of-code-map-card,
    .of-code-map-flow,
    .of-code-map-tabs-wrap {
      border-radius: 20px;
      padding: 1rem;
    }

    .of-code-map-stat-grid,
    .of-code-map-flow-grid {
      grid-template-columns: 1fr;
    }
  }


/* ==========================================================================
   23n. ORBIT CARDS (hoisted orbitcards/templates/orbitcards/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from orbitcards/templates/orbitcards/card_detail.html --- */
/* ── View toggle ── */
.oc-view-toggle { display: flex; gap: .4rem; background: var(--of-accent-soft); border-radius: .65rem; padding: .3rem; }
.oc-view-btn {
  flex: 1; padding: .35rem .5rem; border-radius: .45rem; border: none;
  background: transparent; font-size: .8rem; font-weight: 600; color: #9ba8c0;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.oc-view-btn.active { background: var(--of-orbitcards); color: #fff; box-shadow: 0 2px 6px rgba(91,106,245,.3); }

/* ── Card panels ── */
.oc-card-panel {
  position: relative;
  border-radius: 1rem; padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.09); box-sizing: border-box;
  width: 100%; max-width: 600px; margin: 0 auto;
}
.oc-panel-front { background: #fff; border: 2px solid var(--of-orbitcards); color: var(--of-ink); }
.oc-panel-back  { background: var(--of-orbitcards); color: #fff; }

/* ── Copy button ── */
.oc-copy-btn {
  position: absolute; top: .6rem; right: .75rem;
  background: none; border: none; padding: .3rem; cursor: pointer;
  line-height: 1; border-radius: .4rem;
  color: rgba(91,106,245,.45);
  transition: color .15s, background .15s;
  z-index: 2;
}
.oc-copy-btn:hover { color: var(--of-orbitcards); background: rgba(91,106,245,.08); }
.oc-panel-back .oc-copy-btn { color: rgba(255,255,255,.45); }
.oc-panel-back .oc-copy-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
.oc-copy-btn svg { display: block; width: 16px; height: 16px; }
.oc-copy-btn.oc-copied { color: var(--of-success) !important; background: none !important; }

.oc-card-label {
  display: inline-block; font-size: .65rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; opacity: .55; margin-bottom: .65rem;
}
.oc-card-body { font-size: 1rem; line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; }
.oc-card-body img { max-width: 100%; height: auto; display: block; margin: .4rem auto; border-radius: .35rem; }
.oc-card-body h1, .oc-card-body h2, .oc-card-body h3 { font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .25rem; }
.oc-card-body ul, .oc-card-body ol { padding-left: 1.4rem; margin: .3rem 0; }
.oc-card-body table { border-collapse: collapse; width: 100%; font-size: .85rem; margin: .4rem 0; }
.oc-card-body td, .oc-card-body th { border: 1px solid rgba(91,106,245,.25); padding: .25rem .4rem; }
.oc-panel-back .oc-card-body td,
.oc-panel-back .oc-card-body th { border-color: rgba(255,255,255,.35); }
.oc-card-body audio { width: 100%; max-width: 400px; display: block; margin: .5rem auto; }
.oc-yt-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: .5rem; margin: .5rem 0; }
.oc-yt-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.oc-ext-link { display: inline-block; padding: .3rem .7rem; border-radius: .4rem; background: var(--of-accent-soft); color: var(--of-orbitcards); text-decoration: none; font-size: .88rem; margin: .3rem 0; }
.oc-ext-link:hover { background: var(--of-accent-soft); }
.oc-panel-back .oc-ext-link { background: rgba(255,255,255,.18); color: #fff; }
.oc-panel-back .oc-ext-link:hover { background: rgba(255,255,255,.28); }

/* ── Divider between both panels ── */
.oc-card-divider {
  display: flex; align-items: center; gap: .6rem;
  max-width: 600px; margin: 1rem auto; color: #b0bbdd; font-size: .75rem; font-weight: 600;
}
.oc-card-divider::before, .oc-card-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--of-accent-soft);
}

/* ── Action bar ── */
.oc-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; }

/* ── Nav ── */
.oc-card-nav { display: flex; justify-content: space-between; margin-top: 1rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.oc-nav-btn {
  padding: .35rem .9rem; border-radius: .6rem; font-size: .84rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid #d0d9ff; color: var(--of-orbitcards); background: #fff;
}
.oc-nav-btn:hover { background: var(--of-accent-soft); color: var(--of-orbitcards); }
.oc-nav-btn.disabled { opacity: .35; pointer-events: none; }

@media (max-width: 575.98px) {
  .oc-card-panel { padding: 1.5rem 1.25rem 1.25rem; }
  .oc-card-body { font-size: .93rem; }
}
@media print {
.of-page-orbitcards .oc-view-toggle, .of-page-orbitcards .oc-card-actions, .of-page-orbitcards .oc-card-nav, .of-page-orbitcards nav, .of-page-orbitcards .breadcrumb, .of-page-orbitcards header, .of-page-orbitcards footer { display: none !important; }
  .oc-panel-front, .oc-panel-back { box-shadow: none !important; }
  #panel-back { page-break-before: always; }
}

/* --- from orbitcards/templates/orbitcards/card_form.html --- */
/* Image resize handles */
.of-img-resize-overlay { position:absolute; pointer-events:none; border:2px solid var(--of-orbitcards); border-radius:2px; z-index:10; }
.of-img-resize-handle  { position:absolute; width:10px; height:10px; background:var(--of-orbitcards); border-radius:2px; cursor:nwse-resize; pointer-events:all; }

/* Quill editor wrapper */
.oc-editor img { max-width:100%; height:auto; display:block; margin:.3rem 0; }
.oc-quill-wrap .ql-toolbar { border-bottom:1px solid var(--of-line); }
.oc-quill-wrap { border:1px solid var(--of-line); border-radius:.375rem; background:#fff; }
.oc-quill-wrap .ql-container { border:none; }
.oc-quill-wrap .ql-editor { min-height:130px; font-size:.9rem; }

/* Front / Back card panels */
.oc-side-panel { border-radius:.6rem; padding:1.1rem 1.2rem 1rem; margin-bottom:0; }
.oc-side-panel.front { background:var(--of-accent-soft); border:1.5px solid #c7cef8; }
.oc-side-panel.back  { background:var(--of-bg); border:1.5px solid #a8d5b5; }
.oc-side-panel .oc-side-badge {
  display:inline-block; font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:.15rem .55rem; margin-bottom:.55rem;
}
.oc-side-panel.front .oc-side-badge { background:var(--of-orbitcards); color:#fff; }
.oc-side-panel.back  .oc-side-badge { background:var(--of-success); color:#fff; }
.oc-side-divider { display:flex; align-items:center; gap:.75rem; margin:1.1rem 0; }
.oc-side-divider hr { flex:1; border:none; border-top:2px dashed var(--of-line); margin:0; }
.oc-side-divider span { font-size:.72rem; font-weight:700; color:var(--of-muted); white-space:nowrap; letter-spacing:.06em; }
/* Quill border adapts to panel colour */
.oc-side-panel.front .oc-quill-wrap { border-color:#b0baef; }
.oc-side-panel.back  .oc-quill-wrap { border-color:#86c99a; }
.oc-side-panel.front .oc-attach-panel { background:var(--of-accent-soft); border-color:#c7cef8; }
.oc-side-panel.back  .oc-attach-panel { background:var(--of-bg); border-color:#a8d5b5; }
@media (max-width:576px) {
  .oc-side-panel { padding:.85rem .9rem .8rem; }
}

/* Table picker popup */
.oc-tbl-picker { position:fixed; z-index:9999; background:#fff; border:1px solid var(--of-line); border-radius:.4rem; padding:.5rem .5rem .4rem; box-shadow:0 4px 18px rgba(0,0,0,.13); display:none; }
.oc-tbl-picker.open { display:block; }
.oc-tbl-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.oc-tbl-cell { width:18px; height:18px; border:1px solid var(--of-line); border-radius:2px; cursor:pointer; transition:background .08s,border-color .08s; }
.oc-tbl-cell.hl { background:var(--of-accent-soft); border-color:var(--of-orbitcards); }
.oc-tbl-lbl { text-align:center; font-size:.7rem; color:var(--of-orbitcards); font-weight:600; margin-top:.35rem; min-height:1rem; }
.ql-editor .oc-tbl { overflow-x:auto; margin:.4rem 0; }

/* Collapsible panel header */
.oc-panel-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; margin-bottom:.55rem; }
.oc-panel-header .oc-side-badge { margin-bottom:0; }
.oc-panel-chevron { font-size:.8rem; color:var(--of-muted); transition:transform .22s; line-height:1; }
.oc-side-panel.collapsed .oc-panel-chevron { transform:rotate(-90deg); }
.oc-panel-body { overflow:hidden; }

/* Preview modal panels */
.oc-prev-panel { border-radius:.75rem; padding:1.25rem 1.5rem; }
.oc-prev-front { background:#fff; border:2px solid var(--of-orbitcards); }
.oc-prev-back  { background:var(--of-orbitcards); color:#fff; }
.oc-prev-label { font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.6; margin-bottom:.5rem; }
.oc-prev-body  { font-size:.95rem; line-height:1.6; word-break:break-word; overflow-wrap:anywhere; }
.oc-prev-body img { max-width:100%; height:auto; display:block; margin:.4rem auto; border-radius:.35rem; }
.oc-prev-body table { border-collapse:collapse; width:100%; font-size:.85rem; margin:.4rem 0; }
.oc-prev-body td, .oc-prev-body th { border:1px solid rgba(91,106,245,.25); padding:.25rem .4rem; vertical-align:top; }
.oc-prev-back .oc-prev-body td,
.oc-prev-back .oc-prev-body th { border-color:rgba(255,255,255,.35); }
.oc-prev-body ul, .oc-prev-body ol { padding-left:1.4rem; margin:.3rem 0; }
.oc-prev-body h1,.oc-prev-body h2,.oc-prev-body h3 { font-size:1rem; font-weight:700; margin:.5rem 0 .25rem; }
.oc-prev-body strong { font-weight:700; }
.oc-prev-body em { font-style:italic; }
.oc-prev-body blockquote { border-left:3px solid rgba(91,106,245,.4); padding-left:.6rem; margin:.3rem 0; opacity:.85; }
.oc-prev-body pre,.oc-prev-body code { font-family:'Courier New',monospace; font-size:.82rem; background:rgba(0,0,0,.06); padding:.1rem .3rem; border-radius:.25rem; }
.oc-prev-back .oc-prev-body pre,
.oc-prev-back .oc-prev-body code { background:rgba(255,255,255,.15); }

/* Attachment panel */
.oc-attach-panel { border:1px solid var(--of-line); border-radius:.5rem; padding:1rem; margin-top:.75rem; background:#fafbff; }
.oc-attach-panel h6 { font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--of-orbitcards); margin-bottom:.75rem; }
.oc-attach-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; flex-wrap:wrap; }
.oc-attach-row label { font-size:.82rem; font-weight:600; color:#374151; min-width:5.5rem; }
.oc-attach-row input[type="file"],
.oc-attach-row input[type="text"],
.oc-attach-row input[type="url"] { flex:1; min-width:0; font-size:.82rem; }
@media (max-width:575.98px) {
  /* Link row: each input takes full row width */
  .oc-attach-row input[type="url"],
  .oc-attach-row input[type="text"] { min-width:100% !important; }
  /* Table picker grid: bigger touch targets */
  .oc-tbl-cell { width:24px; height:24px; }
  .oc-tbl-grid { grid-template-columns:repeat(8,1fr); gap:3px; }
}
.oc-attach-row .form-control { padding:.3rem .6rem; }
.oc-media-existing { margin-top:.5rem; }
.oc-media-item-row { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:.35rem; background:#fff; border:1px solid var(--of-line); margin-bottom:.35rem; }
.oc-media-item-row img { width:40px; height:40px; object-fit:cover; border-radius:.25rem; flex-shrink:0; }
.oc-media-item-row .oc-media-label { font-size:.78rem; color:var(--of-muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-media-item-row .oc-media-del { flex-shrink:0; }

/* --- from orbitcards/templates/orbitcards/dashboard.html --- */
.oc-deck-card {
  border: 1.5px solid var(--of-accent-soft);
  border-radius: .85rem;
  background: #fff;
  transition: box-shadow .15s;
}
.oc-deck-card:hover { box-shadow: 0 4px 18px rgba(91,106,245,.13); }
.oc-sl-row {
  background: #fff;
  border: 1.5px solid var(--of-accent-soft);
  border-radius: .75rem;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  transition: box-shadow .15s;
}
.oc-sl-row:hover { box-shadow: 0 4px 14px rgba(91,106,245,.1); }
.oc-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #9ba8c0; margin-bottom: .75rem;
}
/* ── Deck card logo thumbnail ── */
.oc-deck-thumb {
  width: 32px; height: 32px; border-radius: .4rem; object-fit: cover;
  border: 1.5px solid var(--of-accent-soft); flex-shrink: 0;
}
.oc-deck-thumb-initial {
  width: 32px; height: 32px; border-radius: .4rem; flex-shrink: 0;
  background: linear-gradient(135deg, #818cf8 0%, var(--of-orbitcards) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
}
/* ── Study list row thumbnail ── */
.oc-sl-thumb {
  width: 36px; height: 36px; border-radius: .4rem; object-fit: cover;
  border: 1.5px solid var(--of-accent-soft); flex-shrink: 0;
}
.oc-sl-thumb-initial {
  width: 36px; height: 36px; border-radius: .4rem; flex-shrink: 0;
  background: linear-gradient(135deg, #818cf8 0%, var(--of-orbitcards) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: #fff;
}
/* ── Search / filter bar ── */
.oc-filter-bar { background: var(--of-accent-soft); border: 1.5px solid var(--of-accent-soft); border-radius: .75rem; padding: .6rem .85rem; margin-bottom: 1rem; }
.oc-filter-bar .form-control-sm, .oc-filter-bar .form-select-sm { font-size: .83rem; }
#deck-no-results { border: 1.5px dashed #d0d9ff; border-radius: .75rem; }

/* ── View toggle ── */
.oc-view-switch { display:inline-flex; border:1.5px solid #d0d9ff; border-radius:.55rem; overflow:hidden; background:var(--of-accent-soft); }
.oc-vsw-btn { padding:.25rem .65rem; border:none; border-right:1.5px solid #d0d9ff; background:transparent; font-size:.78rem; font-weight:600; color:#9ba8c0; cursor:pointer; transition:all .12s; white-space:nowrap; }
.oc-vsw-btn:last-child { border-right:none; }
.oc-vsw-btn.active { background:var(--of-orbitcards); color:#fff; }
.oc-vsw-btn:not(.active):hover { background:var(--of-accent-soft); color:var(--of-orbitcards); }

/* ── List view rows ── */
.oc-deck-list-row {
  background:#fff; border:1.5px solid var(--of-accent-soft); border-radius:.7rem;
  padding:.65rem 1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  transition:box-shadow .15s;
}
.oc-deck-list-row:hover { box-shadow:0 3px 12px rgba(91,106,245,.1); }

/* ── Compact view ── */
.oc-deck-compact-wrap { background:#fff; border:1.5px solid var(--of-accent-soft); border-radius:.75rem; overflow:hidden; }
.oc-deck-compact-item {
  display:flex; align-items:center; gap:.6rem; padding:.42rem .85rem;
  border-bottom:1px solid var(--of-accent-soft); transition:background .1s;
}
.oc-deck-compact-item:last-child { border-bottom:none; }
.oc-deck-compact-item:hover { background:#fafbff; }
.oc-deck-initial-sm {
  width:26px; height:26px; border-radius:.3rem; flex-shrink:0;
  background:linear-gradient(135deg,#818cf8 0%,var(--of-orbitcards) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; color:#fff;
}
.oc-deck-logo-sm { width:26px; height:26px; border-radius:.3rem; object-fit:cover; flex-shrink:0; border:1px solid var(--of-accent-soft); }

@media (max-width:575.98px) {
  /* Filter bar: full-width inputs stack naturally */
  .oc-filter-bar .form-control-sm,
  .oc-filter-bar .form-select-sm { max-width:100% !important; width:100%; }
  /* List view rows: logo + content + buttons wrap gracefully */
  .oc-deck-list-row { align-items:flex-start; }
  .oc-deck-list-row > .d-flex.gap-2.flex-shrink-0 { width:100%; justify-content:flex-end; }
  /* Compact view: allow name to shrink, keep Study button visible */
  .oc-deck-compact-item { flex-wrap:wrap; }
  .oc-deck-compact-item > a[style*="flex:1"] { min-width:80px; }
}


                #importTabs { background:transparent; border-radius:.65rem; padding:0; gap:.5rem; border:none; }
                #importTabs .nav-link {
                  border:none; border-radius:.55rem; font-weight:600;
                  font-size:.875rem; padding:.55rem 1.2rem;
                  transition:filter .18s, box-shadow .18s, transform .1s;
                  white-space:nowrap;
                }
                /* CSV tab — indigo */
                #tab-csv               { background:var(--of-accent-soft); color:var(--of-accent); }
                #tab-csv:hover         { filter:brightness(.95); }
                #tab-csv.active        { background:var(--of-accent); color:#fff;
                                         box-shadow:0 2px 8px rgba(79,70,229,.35); transform:translateY(-1px); }
                /* ZIP tab — amber */
                #tab-zip               { background:var(--of-warning-soft); color:var(--of-warning-ink); }
                #tab-zip:hover         { filter:brightness(.97); }
                #tab-zip.active        { background:var(--of-warning); color:#fff;
                                         box-shadow:0 2px 8px rgba(245,158,11,.35); transform:translateY(-1px); }

/* --- from orbitcards/templates/orbitcards/deck_detail.html --- */
/* ── Deck profile header (mirrors FoxCom of-dash-header style) ── */
.oc-deck-header-wrap { position: relative; border-radius: 0; overflow: visible; margin-bottom: 1.5rem; }
.oc-deck-header {
  position: relative; min-height: 160px; border-radius: 1rem;
  background: linear-gradient(135deg, var(--of-orbitcards) 0%, #818cf8 100%);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.25rem .9rem; overflow: hidden;
}
.oc-deck-header::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  border-radius: inherit; pointer-events: none;
}
.oc-deck-header-actions {
  position: absolute; top: .65rem; right: .75rem; z-index: 3;
  display: flex; gap: .4rem; flex-wrap: wrap;
}
/* Mobile More dropdown */
.oc-more-menu { min-width: 170px; border-radius: .6rem; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.oc-more-menu .dropdown-item { font-size: .82rem; padding: .45rem .9rem; }
.oc-more-menu .dropdown-item:hover { background: var(--of-accent-soft); color: var(--of-accent); }
.oc-more-menu .dropdown-divider { margin: .25rem 0; }
.oc-header-btn {
  padding: .25rem .6rem; border-radius: .5rem; font-size: .75rem; font-weight: 600;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3);
  transition: background .15s;
}
.oc-header-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.oc-header-btn-danger { border-color: rgba(255,100,100,.45); color: var(--of-danger); }
.oc-header-btn-danger:hover { background: rgba(220,38,38,.35); color: #fff; }
.oc-deck-identity { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: .75rem; }
.oc-deck-logo {
  width: 56px; height: 56px; object-fit: cover; border-radius: .55rem;
  border: 2.5px solid rgba(255,255,255,.85); flex-shrink: 0;
}
.oc-deck-logo-initial {
  width: 56px; height: 56px; border-radius: .55rem;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  border: 2.5px solid rgba(255,255,255,.6); flex-shrink: 0;
}
.oc-deck-header-name { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.oc-deck-header-meta { font-size: .72rem; color: rgba(255,255,255,.72); margin-top: .1rem; }

/* Sub-deck rows */
.oc-subdeck-row {
  background: var(--of-accent-soft); border: 1.5px solid var(--of-accent-soft); border-radius: .7rem;
  padding: .7rem 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.oc-subdeck-row:hover { box-shadow: 0 3px 10px rgba(91,106,245,.1); }

@media (max-width: 575.98px) {
  .oc-deck-header { min-height: 120px; padding: .75rem 1rem .75rem; }
  .oc-deck-logo, .oc-deck-logo-initial { width: 42px; height: 42px; font-size: 1.1rem; }
  .oc-deck-header-name { font-size: .9rem; }
  .oc-deck-header-meta { font-size: .68rem; }
}

/* ── Card list view toggle ── */
.oc-view-switch { display:inline-flex; border:1.5px solid #d0d9ff; border-radius:.55rem; overflow:hidden; background:var(--of-accent-soft); }
.oc-vsw-btn { padding:.22rem .6rem; border:none; border-right:1.5px solid #d0d9ff; background:transparent; font-size:.76rem; font-weight:600; color:#9ba8c0; cursor:pointer; transition:all .12s; white-space:nowrap; }
.oc-vsw-btn:last-child { border-right:none; }
.oc-vsw-btn.active { background:var(--of-orbitcards); color:#fff; }
.oc-vsw-btn:not(.active):hover { background:var(--of-accent-soft); color:var(--of-orbitcards); }

/* ── Card grid view ── */
.oc-card-grid-item { border:1.5px solid var(--of-accent-soft); border-radius:.65rem; background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s; overflow:hidden; }
.oc-card-grid-item:hover { box-shadow:0 3px 10px rgba(91,106,245,.1); }
.oc-card-grid-body { padding:.6rem .75rem; flex-grow:1; }
.oc-card-grid-footer { padding:.4rem .75rem; background:#fafbff; border-top:1px solid var(--of-accent-soft); display:flex; align-items:center; justify-content:space-between; gap:.4rem; }

/* ── Card compact view ── */
.oc-card-compact-wrap { background:#fff; border:1.5px solid var(--of-accent-soft); border-radius:.75rem; overflow:hidden; }
.oc-card-compact-row { display:flex; align-items:center; gap:.6rem; padding:.38rem .85rem; border-bottom:1px solid var(--of-accent-soft); transition:background .1s; }
.oc-card-compact-row:last-child { border-bottom:none; }
.oc-card-compact-row:hover { background:#fafbff; }

/* ── Bulk select ── */
.oc-bulk-cb { accent-color:var(--of-orbitcards); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.oc-card-row.oc-selected { background:var(--of-accent-soft) !important; outline:2px solid var(--of-orbitcards); outline-offset:-2px; border-radius:.35rem; }
#oc-bulk-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:1050;
  background:#1e2050; color:#fff; padding:.75rem 1rem;
  display:none; align-items:center; gap:.75rem; flex-wrap:wrap;
  box-shadow:0 -4px 16px rgba(0,0,0,.25);
}
#oc-bulk-bar.active { display:flex; }
#oc-bulk-bar select { font-size:.83rem; max-width:220px; }
#oc-bulk-bar .oc-bulk-count { font-size:.9rem; font-weight:700; white-space:nowrap; min-width:5rem; }

/* ── List view responsive ── */
@media (max-width:575.98px) {
  /* Card list row: wrap so buttons fall below text on narrow screens */
  #card-list-view .oc-card-row { flex-wrap:wrap; }
  #card-list-view .oc-card-row > a.flex-grow-1 { flex-basis:100%; min-width:0; }
  #card-list-view .oc-card-row > .d-flex.gap-1 { width:100%; justify-content:flex-end; margin-top:.25rem; }
  #card-list-view .oc-card-row > .badge { order:-1; margin-left:auto; }
  /* Search bar: full-width inputs on mobile */
  #card-list-view ~ * .form-control-sm,
  .of-page-orbitcards .d-flex.gap-2.mb-2.flex-wrap .form-control-sm,
.of-page-orbitcards .d-flex.gap-2.mb-2.flex-wrap .form-select-sm { max-width:100% !important; width:100%; }
  /* Sub-deck rows: stack vertically */
  .oc-subdeck-row { flex-direction:column; align-items:flex-start; }
  .oc-subdeck-row > .d-flex.gap-2 { width:100%; justify-content:flex-end; }
}


          #diTabs { background:transparent; border-radius:.65rem; padding:0; gap:.5rem; border:none; }
          #diTabs .nav-link { border:none; border-radius:.55rem; font-weight:600; font-size:.875rem; padding:.55rem 1.2rem; transition:filter .18s,box-shadow .18s,transform .1s; white-space:nowrap; }
          #diTabs #ditab-csv          { background:var(--of-accent-soft); color:var(--of-accent); }
          #diTabs #ditab-csv:hover    { filter:brightness(.95); }
          #diTabs #ditab-csv.active   { background:var(--of-accent); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.35); transform:translateY(-1px); }
          #diTabs #ditab-zip          { background:var(--of-warning-soft); color:var(--of-warning-ink); }
          #diTabs #ditab-zip:hover    { filter:brightness(.97); }
          #diTabs #ditab-zip.active   { background:var(--of-warning); color:#fff; box-shadow:0 2px 8px rgba(245,158,11,.35); transform:translateY(-1px); }

/* --- from orbitcards/templates/orbitcards/deck_form.html --- */
.oc-img-preview-wrap {
  position: relative; border-radius: .65rem; overflow: hidden;
  background: var(--of-accent-soft); border: 1.5px dashed #C7CEF8;
  display: flex; align-items: center; justify-content: center;
}
.oc-header-preview { width: 100%; height: 130px; object-fit: cover; display: none; }
.oc-logo-preview   { width: 80px; height: 80px; object-fit: cover; border-radius: .5rem; display: none; }
.oc-img-placeholder {
  color: #b0bbdd; font-size: .82rem; text-align: center; padding: .75rem;
  pointer-events: none; user-select: none;
}
.oc-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #9ba8c0; margin-bottom: .6rem;
}
@media (max-width: 575.98px) {
  /* Logo preview: stack preview above file input on mobile */
.of-page-orbitcards .d-flex.align-items-center.gap-3.mb-2 { flex-direction: column; align-items: flex-start !important; }
.of-page-orbitcards .d-flex.align-items-center.gap-3.mb-2 > .flex-grow-1 { width: 100%; }
}

/* --- from orbitcards/templates/orbitcards/deck_share_manage.html --- */
/* ── Share type cards ── */
.sh-type-card {
  border-radius: .85rem; border: 2px solid var(--of-accent-soft);
  background: #fff; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.sh-type-card.active   { border-color: var(--of-orbitcards); box-shadow: 0 4px 18px rgba(91,106,245,.13); }
.sh-type-card.active-users { border-color: var(--of-success); box-shadow: 0 4px 18px rgba(16,185,129,.12); }
.sh-type-card.active-groups { border-color: var(--of-warning); box-shadow: 0 4px 18px rgba(245,158,11,.12); }

.sh-type-header {
  padding: 1rem 1.1rem .85rem;
  display: flex; align-items: flex-start; gap: .85rem;
  border-bottom: 1.5px solid var(--of-accent-soft);
}
.sh-type-icon {
  width: 44px; height: 44px; border-radius: .65rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.sh-icon-public  { background: var(--of-accent-soft); }
.sh-icon-users   { background: var(--of-bg); }
.sh-icon-groups  { background: var(--of-warning-soft); }

.sh-type-label   { font-size: .82rem; font-weight: 700; color: var(--of-ink); margin-bottom: .15rem; }
.sh-type-desc    { font-size: .75rem; color: var(--of-muted); line-height: 1.4; }
.sh-status-pill  { font-size: .65rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; margin-left: auto; flex-shrink: 0; align-self: flex-start; }
.sh-pill-active  { background: var(--of-bg); color: var(--of-success-ink); }
.sh-pill-public-active { background: var(--of-accent-soft); color: var(--of-accent-ink); }
.sh-pill-off     { background: var(--of-accent-soft); color: #9BA8C0; }

.sh-type-body    { padding: .9rem 1.1rem; background: #fafbff; }
.sh-url-row {
  display: flex; align-items: center; gap: .5rem;
  background: var(--of-accent-soft); border: 1px solid #d0d9ff; border-radius: .5rem;
  padding: .35rem .6rem .35rem .8rem; margin-bottom: .75rem;
}
.sh-url-row input { flex: 1; border: none; background: transparent; font-size: .78rem; color: #444; outline: none; font-family: monospace; }

/* Recipient rows */
.sh-recipient-row {
  display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--of-accent-soft); font-size: .8rem;
}
.sh-recipient-row:last-child { border-bottom: none; }
.sh-recipient-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
}
.sh-avatar-user  { background: linear-gradient(135deg,var(--of-success),var(--of-success)); }
.sh-avatar-group { background: linear-gradient(135deg,var(--of-star),var(--of-warning)); }

.sh-perm-dots { display: flex; gap: .3rem; margin-left: auto; }
.sh-perm-dot  { width: 8px; height: 8px; border-radius: 50%; }
.sh-dot-on    { background: var(--of-success); }
.sh-dot-off   { background: var(--of-line); }

/* Add form */
.sh-add-form { margin-top: .85rem; padding-top: .85rem; border-top: 1.5px dashed #d0d9ff; }
.sh-perm-row  { display: flex; flex-wrap: wrap; gap: .75rem; margin: .6rem 0 .75rem; }
.sh-perm-label { font-size: .75rem; display: flex; align-items: center; gap: .3rem; }

/* Empty state */
.sh-empty { font-size: .78rem; color: #9BA8C0; padding: .5rem 0 .25rem; }

/* Permissions legend */
.sh-legend { display: flex; gap: 1rem; font-size: .7rem; color: var(--of-muted); margin-top: .6rem; flex-wrap: wrap; }
.sh-legend span { display: flex; align-items: center; gap: .3rem; }

@media (max-width: 575.98px) {
  /* URL row: allow input + buttons to wrap */
  .sh-url-row { flex-wrap: wrap; }
  .sh-url-row input { min-width: 0; }
  /* Recipient rows: wrap avatar + name / buttons on separate lines */
  .sh-recipient-row { flex-wrap: wrap; }
  .sh-recipient-row .sh-perm-dots { margin-left: 0; }
  /* Page header back button: stack below heading */
.of-page-orbitcards .d-flex.align-items-center.gap-3.mb-3.flex-wrap > .ms-auto { margin-left: 0 !important; width: 100%; }
}

/* --- from orbitcards/templates/orbitcards/deck_study.html --- */
/* ── Progress bar ── */
.oc-progress-bar  { height: 6px; border-radius: 3px; background: var(--of-line); }
.oc-progress-fill { height: 100%; border-radius: 3px; background: var(--of-orbitcards); transition: width .3s; }

/* ── Pre-study panel ── */
.oc-prestudy {
  background: #fff;
  border: 2px solid var(--of-orbitcards);
  border-radius: 1rem;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}
.oc-prestudy h6 {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--of-orbitcards); margin-bottom: .6rem;
}
.oc-toggle-group { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.oc-toggle-btn {
  flex: 1; padding: .5rem .75rem; border-radius: .6rem; border: 1.5px solid #d0d9ff;
  background: #fff; color: var(--of-orbitcards); font-size: .88rem; cursor: pointer; transition: all .15s;
  text-align: center;
}
.oc-toggle-btn.active {
  background: var(--of-orbitcards); color: #fff; border-color: var(--of-orbitcards);
}

/* ── Card wrapper ── */
.oc-card-container { width: 100%; max-width: 600px; margin: 0 auto; }

/* ── Card sides ── */
.oc-card { position: relative; width: 100%; }
.oc-card-front,
.oc-card-back {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  padding: 2.5rem 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  box-sizing: border-box;
  display: none;
}
.oc-card-front { background: #fff; border: 2px solid var(--of-orbitcards); color: var(--of-ink); }
.oc-card-back  { background: var(--of-orbitcards); color: #fff; }
.oc-card-front.oc-active,
.oc-card-back.oc-active  { display: block; }
/* When both sides are visible, give the back a little breathing room */
.oc-card-front.oc-active + .oc-card-back.oc-active { margin-top: .75rem; }

/* ── Copy button ── */
.oc-copy-btn {
  position: absolute; top: .6rem; right: .75rem;
  background: none; border: none; padding: .3rem; cursor: pointer;
  line-height: 1; border-radius: .4rem;
  color: rgba(91,106,245,.45);
  transition: color .15s, background .15s;
  z-index: 2;
}
.oc-copy-btn:hover { color: var(--of-orbitcards); background: rgba(91,106,245,.08); }
.oc-card-back .oc-copy-btn { color: rgba(255,255,255,.45); }
.oc-card-back .oc-copy-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
.oc-copy-btn svg { display: block; width: 16px; height: 16px; }
.oc-copy-btn.oc-copied { color: var(--of-success) !important; background: none !important; }

/* ── Label pill ── */
.oc-card-label {
  display: inline-block;
  font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  opacity: .55; margin-bottom: .75rem;
}

/* ── Content area ── */
.oc-card-body {
  font-size: 1rem; line-height: 1.6;
  word-break: break-word; overflow-wrap: anywhere;
}
.oc-card-body-inner {
  max-height: 55vh;
  overflow-y: auto;
  padding-right: .25rem;
}

/* ── Rich content inside cards ── */
.oc-card-body img {
  max-width: 100%; height: auto; display: block;
  margin: .4rem auto; border-radius: .35rem;
}
.oc-card-body h1, .oc-card-body h2, .oc-card-body h3 { font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .25rem; }
.oc-card-body ul, .oc-card-body ol { padding-left: 1.4rem; margin: .3rem 0; }
.oc-card-body pre, .oc-card-body code { font-size: .82rem; white-space: pre-wrap; word-break: break-all; }
.oc-card-body blockquote { border-left: 3px solid rgba(255,255,255,.4); padding-left: .75rem; margin: .4rem 0; opacity: .85; }
.oc-card-front .oc-card-body blockquote { border-color: var(--of-orbitcards); }

/* ── Tables in card body ── */
.oc-card-body-inner table { border-collapse: collapse; width: 100%; font-size: .85rem; margin: .4rem 0; }
.oc-card-body-inner td,
.oc-card-body-inner th   { border: 1px solid rgba(91,106,245,.25); padding: .25rem .4rem; }
.oc-card-back .oc-card-body-inner td,
.oc-card-back .oc-card-body-inner th { border-color: rgba(255,255,255,.35); }

/* ── Media attachments ── */
.oc-media-item { margin: .6rem 0; }
.oc-media-item img { max-width: 100%; height: auto; border-radius: .4rem; display: block; margin: .4rem auto; }
.oc-media-item audio { width: 100%; max-width: 400px; display: block; margin: .5rem auto; }
.oc-yt-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: .5rem; margin: .5rem 0; }
.oc-yt-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.oc-ext-link {
  display: inline-block; padding: .3rem .7rem; border-radius: .4rem;
  background: var(--of-accent-soft); color: var(--of-orbitcards); text-decoration: none;
  font-size: .88rem; margin: .3rem 0;
}
.oc-ext-link:hover { background: var(--of-accent-soft); }
.oc-card-back .oc-ext-link { background: rgba(255,255,255,.18); color: #fff; }
.oc-card-back .oc-ext-link:hover { background: rgba(255,255,255,.28); }

/* ── Info trigger ── */
.oc-info-trigger {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 1rem; color: #9ba8c0; line-height: 1;
  transition: color .15s;
}
.oc-info-trigger:hover { color: var(--of-orbitcards); }
.oc-info-box {
  background: var(--of-accent-soft); border-left: 3px solid var(--of-orbitcards); border-radius: 0 .5rem .5rem 0;
  padding: .6rem .85rem; font-size: .82rem; color: #3d4a8f;
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .oc-card-front, .oc-card-back { padding: 2rem 1.25rem 1.5rem; }
  .oc-card-body { font-size: .93rem; }
  .oc-card-body-inner { max-height: 55vh; }
  .oc-prestudy { padding: 1.5rem 1.25rem 1.25rem; }
  .oc-toggle-group { flex-direction: column; }
  /* Result buttons: stack vertically so text doesn't squeeze */
  #oc-result-btns { flex-direction: column; gap: .6rem; }
  #oc-result-btns .btn { width: 100%; }
}

/* --- from orbitcards/templates/orbitcards/import_guide.html --- */
/* ── Method nav ── */
.oc-guide-nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff; padding: .6rem 0; border-bottom: 1px solid var(--of-accent-soft);
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.oc-guide-nav a {
  padding: .4rem .9rem; border-radius: 2rem; font-size: .85rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid transparent; transition: all .15s;
  white-space: nowrap;
}
.oc-guide-nav a:hover { opacity: .85; }

/* ── Method sections ── */
.oc-method-section { scroll-margin-top: 72px; margin-bottom: 3.5rem; }
.oc-method-header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
}
.oc-method-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem; flex-shrink: 0; color: #fff;
}
.oc-step { display: flex; gap: .75rem; margin-bottom: .75rem; }
.oc-step-num {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0; color: #fff; margin-top: .05rem;
}
.oc-tip {
  background: var(--of-accent-soft); border-left: 3px solid var(--of-orbitcards);
  border-radius: 0 .5rem .5rem 0; padding: .6rem .9rem;
  font-size: .88rem; color: #3d4a8f; margin-top: .75rem;
}
.oc-code-block {
  background: #FAFBFF; border: 1px solid var(--of-line); border-radius: .5rem;
  padding: .75rem 1rem; font-family: monospace; font-size: .82rem;
  overflow-x: auto; margin: .75rem 0;
}
.oc-file-tree {
  background: #1e1e2e; color: #D0D9FF; border-radius: .65rem;
  padding: .85rem 1.25rem; font-family: monospace; font-size: .82rem;
  line-height: 1.8; overflow-x: auto; margin: .75rem 0;
}
.oc-file-tree .dir  { color: #89b4fa; }
.oc-file-tree .file { color: var(--of-success); }
.oc-csv-preview {
  border-collapse: collapse; width: 100%; font-size: .82rem; margin: .75rem 0;
  border-radius: .5rem; overflow: hidden;
}
.oc-csv-preview th { background: var(--of-accent-soft); color: var(--of-orbitcards); font-weight: 700; }
.oc-csv-preview td, .oc-csv-preview th { border: 1px solid #d0d9ff; padding: .35rem .6rem; }
.oc-method-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .75rem 0; }
.oc-method-table th { background: var(--of-accent-soft); color: var(--of-orbitcards); font-weight: 600; }
.oc-method-table td, .oc-method-table th { border: 1px solid #d0d9ff; padding: .35rem .6rem; }
.oc-badge-yes { color: #059669; font-weight: 700; }
.oc-badge-no  { color: var(--of-muted); }
.oc-faq-item { border-bottom: 1px solid var(--of-accent-soft); padding: .85rem 0; }
.oc-faq-q { font-weight: 600; color: var(--of-ink); margin-bottom: .3rem; }
.oc-faq-a { color: #555; font-size: .9rem; }
@media (max-width: 575.98px) {
  .oc-guide-nav { gap: .35rem; }
  .oc-guide-nav a { font-size: .78rem; padding: .35rem .65rem; }
}

/* --- from orbitcards/templates/orbitcards/study_list_detail.html --- */
/* ── Study List profile header ── */
.oc-sl-header-wrap { border-radius: 1rem; overflow: hidden; margin-bottom: 1.5rem; }
.oc-sl-header {
  position: relative; min-height: 160px; border-radius: 0;
  background: linear-gradient(135deg, #818cf8 0%, var(--of-orbitcards) 100%);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.25rem .9rem;
}
.oc-sl-header::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  pointer-events: none;
}
.oc-sl-header-actions {
  position: absolute; top: .65rem; right: .75rem; z-index: 3;
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.oc-header-btn {
  padding: .25rem .6rem; border-radius: .5rem; font-size: .75rem; font-weight: 600;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3);
  transition: background .15s;
}
.oc-header-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
.oc-header-btn-danger { border-color: rgba(255,100,100,.45); color: var(--of-danger); }
.oc-header-btn-danger:hover { background: rgba(220,38,38,.35); color: #fff; }
.oc-sl-identity { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: .75rem; }
.oc-sl-logo {
  width: 56px; height: 56px; object-fit: cover; border-radius: .55rem;
  border: 2.5px solid rgba(255,255,255,.85); flex-shrink: 0;
}
.oc-sl-logo-initial {
  width: 56px; height: 56px; border-radius: .55rem;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  border: 2.5px solid rgba(255,255,255,.6); flex-shrink: 0;
}
.oc-sl-header-name { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.oc-sl-header-meta { font-size: .72rem; color: rgba(255,255,255,.72); margin-top: .1rem; }
@media (max-width: 575.98px) {
  .oc-sl-header { min-height: 120px; }
  .oc-sl-logo, .oc-sl-logo-initial { width: 42px; height: 42px; font-size: 1.1rem; }
  .oc-sl-header-name { font-size: .9rem; }
  /* Deck rows in study list: wrap so Remove button doesn't crowd deck name */
  .list-group-item.d-flex.justify-content-between { flex-wrap: wrap; }
  .list-group-item.d-flex.justify-content-between > form { width: 100%; display: flex; justify-content: flex-end; margin-top: .25rem; }
}

/* --- from orbitcards/templates/orbitcards/study_list_form.html --- */
.oc-deck-checkbox-group { max-height: 340px; overflow-y: auto; border: 1.5px solid var(--of-accent-soft); border-radius: .65rem; padding: .75rem 1rem; }
.oc-deck-checkbox-group .oc-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ba8c0; margin: .6rem 0 .3rem; }
.oc-deck-checkbox-group .oc-group-label:first-child { margin-top: 0; }
.oc-deck-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.oc-deck-item input[type="checkbox"] { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--of-orbitcards); }
.oc-deck-item label { cursor: pointer; font-size: .9rem; color: #333; }
.oc-deck-item .oc-card-count { font-size: .78rem; color: #9ba8c0; margin-left: auto; }
.oc-section-label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9ba8c0; margin-bottom: .6rem; }
.oc-img-preview-wrap {
  position: relative; border-radius: .65rem; overflow: hidden;
  background: var(--of-accent-soft); border: 1.5px dashed #C7CEF8;
  display: flex; align-items: center; justify-content: center;
}
.oc-header-preview { width: 100%; height: 130px; object-fit: cover; display: none; }
.oc-logo-preview   { width: 80px; height: 80px; object-fit: cover; border-radius: .5rem; display: none; }
.oc-img-placeholder { color: #b0bbdd; font-size: .82rem; text-align: center; padding: .75rem; pointer-events: none; user-select: none; }
@media (max-width: 575.98px) {
  /* Logo preview: stack above file input */
.of-page-orbitcards .d-flex.align-items-center.gap-3.mb-2 { flex-direction: column; align-items: flex-start !important; }
.of-page-orbitcards .d-flex.align-items-center.gap-3.mb-2 > .flex-grow-1 { width: 100%; }
  /* Deck checkbox group: reduce height so it doesn't dominate small screens */
  .oc-deck-checkbox-group { max-height: 220px; }
}


/* ==========================================================================
   23p. NOTIFICATIONS (hoisted notifications/templates/notifications/*.html, 2026-08-17)
   These rules lived in inline <style> blocks inside individual pages, so they
   were invisible to /adminapp/design-system/, unreachable by any admin theme,
   and impossible to find when the same look was wanted elsewhere. Moved
   verbatim; colours mapped to tokens by role. Each block names its source.
   ========================================================================== */

/* --- from notifications/templates/notifications/list.html --- */
.of-notif-item { border-left: 3px solid transparent; transition: background .15s; }
.of-notif-item.unread  { border-left-color: var(--of-accent); background: #fffbf4; }
.of-notif-item:hover   { background: #f8f4ef; }
.of-notif-icon         { font-size: 1.4rem; min-width: 36px; text-align: center; }
.of-notif-time         { font-size: .72rem; color: #999; }
.of-quick-card         { border-radius: 12px; border: 1px solid #e5ddd3;
                         padding: 1rem 1.2rem; display: flex; align-items: center;
                         gap: .75rem; text-decoration: none; color: inherit;
                         transition: box-shadow .15s, transform .1s; background: #fff; }
.of-quick-card:hover   { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); color: inherit; }
.of-quick-card .icon   { font-size: 1.6rem; }
.of-quick-card .label  { font-weight: 600; font-size: .9rem; }
.of-quick-card .sub    { font-size: .78rem; color: #888; }

/* ==========================================================================
   23q. MESSAGE BOARD (hoisted from messaging/templates/messaging/_board_styles.html,
        2026-08-17, design Phase 13 file 2 of 3; that partial has since been deleted —
        this section is now the only home for these rules)
   343 lines / 149 rules lived in a <style> block that three pages pulled in with
   {% include %} — cms/page_view.html, messaging/channel/dashboard.html and
   messaging/group/dashboard.html. Because the include sits INSIDE
   {% block content %}, those rules were emitted after the stylesheet link and
   therefore WON over it. A plain hoist would have inverted that.

   EVERY selector here is scoped to .of-page-messaging, and that is deliberate.
   Nine classes collide with rules the shared stylesheet already defines
   (of-comment-form, of-comment-item, of-file-chip, of-info-btn, of-msg-actions,
   of-msg-row, of-react-btn, of-react-count, of-reacted), and — the part that is
   easy to miss — several of the NON-colliding names are used by
   messaging/direct_dashboard.html, which does NOT include this block. Hoisting
   even those unscoped would have newly styled the direct-messages page.
   Scoping the whole block reproduces the previous behaviour exactly: these rules
   apply on the three pages that opted in, and nowhere else.

   The scoping was applied mechanically, not by hand, and verified by re-parsing
   the output (149 rule bodies in and out, all 158 selectors carrying the scope,
   with a self-test proving the verifier can actually fail).

   .of-page-messaging currently has no rule of its own — it is purely a scoping
   hook. When the messaging module colour token lands it will also rebind
   --of-accent here, and everything below keeps working unchanged.
   ========================================================================== */

/* ── Dashboard Header ── */
.of-page-messaging .of-dash-header {
  position:relative; min-height:180px; border-radius:1rem;
  background:#1b2236 center/cover no-repeat; overflow:hidden;
  display:flex; align-items:flex-end; padding:.85rem 1rem;
}
.of-page-messaging .of-dash-header::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(10,18,34,.82) 0%,rgba(20,38,58,.5) 100%);
  pointer-events:none;
}
.of-page-messaging .of-dash-go-up {
  position:absolute; top:.6rem; left:.75rem; z-index:2;
  background:rgba(255,255,255,.18); color:#fff; border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; text-decoration:none; backdrop-filter:blur(4px); transition:background .15s;
}
.of-page-messaging .of-dash-go-up:hover { background:rgba(255,255,255,.35); }
.of-page-messaging .of-dash-icon-strip {
  position:absolute; top:.6rem; right:.75rem; z-index:2;
  display:flex; flex-direction:column; gap:.35rem;
}
.of-page-messaging .of-dash-icon-btn {
  background:rgba(255,255,255,.18); border-radius:.4rem;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; text-decoration:none; backdrop-filter:blur(4px); transition:background .15s;
  border:none; cursor:pointer; color:inherit;
}
.of-page-messaging .of-dash-icon-btn:hover { background:rgba(255,255,255,.35); }
.of-page-messaging .of-info-btn { background:rgba(59,130,246,.55); }
.of-page-messaging .of-info-btn:hover { background:rgba(59,130,246,.8); }
.of-page-messaging .of-dash-identity { position:relative; z-index:2; display:flex; align-items:center; gap:.65rem; flex:1; }
.of-page-messaging .of-dash-logo { width:56px; height:56px; object-fit:cover; border:2px solid rgba(255,255,255,.8); flex-shrink:0; }
.of-page-messaging .of-dash-logo-initial {
  width:56px; height:56px; background:linear-gradient(135deg,#059669,#34d399);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:#fff;
  border:2px solid rgba(255,255,255,.8); flex-shrink:0;
}
.of-page-messaging .of-dash-logo-oval { border-radius:44% 56% / 38% 62%; }
.of-page-messaging .of-dash-logo-circle { border-radius:50%; }
.of-page-messaging .of-dash-name { font-size:1rem; font-weight:700; color:#fff; }
.of-page-messaging .of-dash-meta { font-size:.72rem; color:rgba(255,255,255,.65); }
.of-page-messaging .of-dash-header-wrap { border-radius:1rem; overflow:hidden; }
.of-page-messaging .of-dash-header-wrap .of-dash-header { border-radius:0; min-height:180px; }
.of-page-messaging .of-dash-nav-strip {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.45rem 1.1rem; background:#111827;
}
.of-page-messaging .of-dash-gb-btn {
  background:rgba(255,255,255,.12); color:#e2e8f0; border-radius:2rem;
  padding:.25rem .8rem; font-size:.72rem; font-weight:600; text-decoration:none;
  white-space:nowrap; transition:background .15s;
}
.of-page-messaging .of-dash-gb-btn:hover { background:rgba(255,255,255,.22); color:#fff; }
.of-page-messaging .of-dash-up-btn { background:rgba(255,255,255,.07); }

/* ── Layout ── */
.of-page-messaging .of-dash-layout { display:grid; grid-template-columns:220px 1fr; gap:1rem; align-items:start; }
@media (max-width:991.98px) { .of-page-messaging .of-dash-layout { grid-template-columns:1fr; } }

/* ── Sidebar ── */
.of-page-messaging .of-dash-sidebar {
  background:#fff; border:1px solid #e2e8f0; border-radius:.75rem;
  overflow:hidden; position:sticky; top:72px;
}
@media (max-width:991.98px) {
  .of-page-messaging .of-dash-sidebar {
    position:fixed; top:0; left:0; width:240px; height:100vh;
    z-index:1055; border-radius:0; overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease;
  }
  .of-page-messaging .of-dash-sidebar.of-sidebar-open { transform:translateX(0); }
  .of-page-messaging .of-sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1054; display:none; }
  .of-page-messaging .of-sidebar-overlay.of-overlay-visible { display:block; }
}
.of-page-messaging .of-sidebar-close {
  display:block; width:100%; background:#f8fafc; border:none;
  border-bottom:1px solid #e2e8f0; padding:.5rem .65rem;
  text-align:right; font-size:.85rem; color:#64748b; cursor:pointer;
}
.of-page-messaging .of-sb-section { border-bottom:1px solid #e2e8f0; padding:.4rem 0; }
.of-page-messaging .of-sb-section:last-child { border-bottom:none; }
.of-page-messaging .of-sb-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:.3rem .65rem; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:#64748b;
}
.of-page-messaging .of-sb-add { color:#059669; text-decoration:none; font-size:.95rem; font-weight:700; }
.of-page-messaging .of-sb-item {
  display:block; padding:.3rem .65rem; font-size:.78rem; color:#334155;
  text-decoration:none; transition:background .1s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.of-page-messaging .of-sb-item:hover { background:#f1f5f9; color:#0f172a; }
.of-page-messaging .of-sb-item-pinned { color:#059669; font-weight:600; }
.of-page-messaging .of-sb-member { display:flex; justify-content:space-between; align-items:center; cursor:default; }
.of-page-messaging .of-sb-empty { padding:.25rem .65rem; font-size:.74rem; color:#94a3b8; }

/* ── General Board identity block (top of sidebar) ── */
.of-page-messaging .of-sb-gb-header { border-bottom:1px solid #e2e8f0; }
.of-page-messaging .of-sb-gb-space { background:#e0f2fe; }
.of-page-messaging .of-sb-gb-planet { background:#dcfce7; }
.of-page-messaging .of-sb-gb-link {
  display:block; padding:.55rem .65rem; text-decoration:none;
}
.of-page-messaging .of-sb-gb-title {
  font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#0369a1;
}
.of-page-messaging .of-sb-gb-planet .of-sb-gb-title { color:#166534; }
.of-page-messaging .of-sb-gb-name {
  font-size:.82rem; font-weight:600; color:#0c4a6e; margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.of-page-messaging .of-sb-gb-planet .of-sb-gb-name { color:#14532d; }
.of-page-messaging .of-sb-gb-link:hover .of-sb-gb-title,
.of-page-messaging .of-sb-gb-link:hover .of-sb-gb-name { opacity:.75; }
.of-page-messaging .of-sb-role { font-size:.58rem; padding:.1rem .3rem; border-radius:.25rem; font-weight:600; text-transform:uppercase; }
.of-page-messaging .of-sb-role-admin { background:#fee2e2; color:#991b1b; }
.of-page-messaging .of-sb-role-moderator { background:#fef3c7; color:#92400e; }
.of-page-messaging .of-sb-role-member { background:#e2e8f0; color:#475569; }

/* ── Board toolbar (search/filter/sort) ── */
.of-page-messaging .of-board-toolbar {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.5rem .65rem; background:#f8fafc;
  border:1px solid #e2e8f0; border-radius:.6rem; margin-bottom:.6rem;
}
.of-page-messaging .of-board-toolbar input,
.of-page-messaging .of-board-toolbar select {
  font-size:.78rem; padding:.25rem .5rem; border:1px solid #e2e8f0;
  border-radius:.4rem; background:#fff; outline:none;
}
.of-page-messaging .of-board-toolbar input { flex:1; min-width:120px; }
.of-page-messaging .of-board-toolbar select { max-width:130px; }
.of-page-messaging .of-board-no-results { text-align:center; color:#94a3b8; font-size:.82rem; padding:1.5rem; display:none; }

/* ── Board ── */
.of-page-messaging .of-board-feed { display:flex; flex-direction:column; gap:.4rem; }
.of-page-messaging .of-board-compose {
  position:sticky; bottom:0; background:#fff;
  border-top:1px solid #e2e8f0; padding:.6rem;
  margin-top:.5rem; border-radius:.6rem;
  box-shadow:0 -2px 10px rgba(0,0,0,.05);
}
.of-page-messaging .of-board-compose textarea { resize:none; font-size:.84rem; }

/* ── Compact message card ── */
.of-page-messaging .of-msg-card {
  background:#fff; border:1px solid #e9edf3; border-radius:.55rem;
  padding:.5rem .65rem .35rem; transition:box-shadow .12s;
}
.of-page-messaging .of-msg-card:hover { box-shadow:0 1px 8px rgba(0,0,0,.07); }
.of-page-messaging .of-msg-row { display:flex; align-items:flex-start; gap:.55rem; }
.of-page-messaging .of-msg-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4361ee,#059669);
  color:#fff; font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.of-page-messaging .of-msg-content { flex:1; min-width:0; }
.of-page-messaging .of-msg-meta { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.15rem; }
.of-page-messaging .of-msg-author { font-size:.78rem; font-weight:700; color:#1e293b; }
.of-page-messaging .of-msg-time { font-size:.67rem; color:#94a3b8; }
.of-page-messaging .of-msg-body { font-size:.82rem; color:#334155; word-break:break-word; line-height:1.45; white-space:pre-wrap; }

/* ── Compact image thumbnail ── */
.of-page-messaging .of-thumb-wrap {
  display:inline-block; position:relative; margin-top:.35rem;
  border-radius:.35rem; overflow:hidden; flex-shrink:0;
}
.of-page-messaging .of-msg-thumb {
  width:72px; height:72px; object-fit:cover; display:block;
  border-radius:.35rem; border:1px solid #e2e8f0;
}
.of-page-messaging .of-thumb-expand {
  position:absolute; bottom:2px; right:2px; font-size:.65rem;
  background:rgba(0,0,0,.45); color:#fff; padding:1px 3px; border-radius:2px;
}

/* ── File chip ── */
.of-page-messaging .of-file-chip {
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.3rem;
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:1rem;
  padding:.15rem .55rem; font-size:.75rem; color:#334155;
  text-decoration:none; max-width:220px;
}
.of-page-messaging .of-file-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
.of-page-messaging .of-audio-toggle {
  background:none; border:none; padding:0; cursor:pointer;
  font-size:.8rem; color:#4361ee; flex-shrink:0;
}

/* ── Action icon buttons ── */
.of-page-messaging .of-msg-actions {
  display:flex; flex-direction:column; gap:.25rem;
  align-items:flex-end; flex-shrink:0; padding-top:.05rem;
}
.of-page-messaging .of-action-btn {
  background:none; border:1px solid transparent; border-radius:.35rem;
  padding:.1rem .35rem; font-size:.75rem; cursor:pointer; color:#64748b;
  transition:background .12s, border-color .12s; white-space:nowrap; line-height:1.5;
}
.of-page-messaging .of-action-btn:hover { background:#f1f5f9; border-color:#e2e8f0; color:#1e293b; }
.of-page-messaging .of-action-cnt { font-size:.7rem; color:#64748b; }

/* ── Expand panels ── */
.of-page-messaging .of-expand-panel {
  border-top:1px solid #f0f4f8; margin-top:.35rem; padding-top:.25rem;
}

/* ── Reactions ── */
.of-page-messaging .of-react-strip { display:flex; flex-wrap:wrap; gap:.3rem; }
.of-page-messaging .of-react-btn {
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:1rem;
  padding:.12rem .4rem; font-size:.78rem; cursor:pointer; transition:background .1s; line-height:1.4;
}
.of-page-messaging .of-react-btn:hover { background:#e2e8f0; }
.of-page-messaging .of-react-btn.of-reacted { background:#dbeafe; border-color:#93c5fd; }
.of-page-messaging .of-react-count { font-size:.7rem; color:#475569; }

/* ── Comments ── */
.of-page-messaging .of-comment-list { display:flex; flex-direction:column; gap:.25rem; }
.of-page-messaging .of-comment-item { padding:.25rem .4rem; background:#f8fafc; border-radius:.35rem; font-size:.78rem; }
.of-page-messaging .of-comment-edited { font-size:.65rem; color:#94a3b8; margin-left:.25rem; }
.of-page-messaging .of-comment-form input { font-size:.78rem; }
.of-page-messaging .of-comment-input {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.of-page-messaging .of-comment-input:focus {
  background: #e0f2fe;
  border-color: #7dd3fc;
  box-shadow: 0 0 0 .2rem rgba(125,211,252,.25);
}

/* ── Mobile overflow prevention ── */
.of-page-messaging .of-dash-layout,
.of-page-messaging .of-dash-main,
.of-page-messaging .of-board { overflow-x: hidden; }
.of-page-messaging .of-msg-card,
.of-page-messaging .of-msg-content { min-width: 0; }
.of-page-messaging .of-msg-body { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width:575.98px) {
  .of-page-messaging .of-board-toolbar { flex-direction:column; gap:.35rem; }
  .of-page-messaging .of-board-toolbar input,
.of-page-messaging .of-board-toolbar select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
  .of-page-messaging .of-dash-header { min-height:130px; }
  .of-page-messaging .of-dash-logo,
.of-page-messaging .of-dash-logo-initial { width:42px; height:42px; font-size:1.1rem; }
  .of-page-messaging .of-dash-name { font-size:.9rem; }
  .of-page-messaging .of-dash-meta { font-size:.68rem; }
  .of-page-messaging .of-board-compose textarea { font-size:.8rem; }
}

/* ── View picker dropdown ── */
.of-page-messaging .of-view-picker { position:relative; margin-left:auto; flex-shrink:0; }
.of-page-messaging .of-view-picker-btn {
  display:flex; align-items:center; gap:.3rem;
  background:#fff; border:1px solid #e2e8f0; border-radius:.4rem;
  padding:.22rem .6rem; font-size:.78rem; cursor:pointer; color:#334155;
  transition:background .12s; white-space:nowrap; line-height:1.5;
}
.of-page-messaging .of-view-picker-btn:hover { background:#f1f5f9; }
.of-page-messaging .of-view-picker-btn.of-vp-open { background:#f1f5f9; border-color:#cbd5e1; }
.of-page-messaging .of-vp-caret { font-size:.6rem; color:#94a3b8; }
.of-page-messaging .of-view-picker-menu {
  position:absolute; right:0; top:calc(100% + 5px); z-index:200;
  background:#fff; border:1px solid #e2e8f0; border-radius:.6rem;
  box-shadow:0 6px 24px rgba(15,23,42,.13); min-width:192px;
  overflow:hidden; padding:.25rem 0;
}
.of-page-messaging .of-vp-opt {
  display:flex; align-items:center; gap:.65rem; width:100%;
  background:none; border:none; padding:.48rem .85rem;
  cursor:pointer; text-align:left; transition:background .1s; position:relative;
}
.of-page-messaging .of-vp-opt:hover { background:#f1f5f9; }
.of-page-messaging .of-vp-opt.of-vp-active { background:#eff6ff; }
.of-page-messaging .of-vp-opt.of-vp-active::before {
  content:"•"; position:absolute; left:.28rem;
  font-size:.85rem; color:#4361ee; line-height:1;
}
.of-page-messaging .of-vp-icon { font-size:.9rem; width:20px; text-align:center; flex-shrink:0; color:#64748b; }
.of-page-messaging .of-vp-name { font-size:.8rem; font-weight:600; color:#1e293b; display:block; }
.of-page-messaging .of-vp-desc { font-size:.68rem; color:#94a3b8; display:block; }
.of-page-messaging .of-vp-sep { height:1px; background:#f1f5f9; margin:.2rem 0; }

/* ── Large view — full card, Instagram-style ── */
.of-page-messaging #ofBoardFeed.of-view-large { gap:.75rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-card { padding:.85rem 1rem .7rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-av { width:38px; height:38px; font-size:.9rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-author { font-size:.88rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-time { font-size:.74rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-body { font-size:.92rem; line-height:1.6; }
.of-page-messaging #ofBoardFeed.of-view-large .of-thumb-wrap { display:block; width:100%; margin-top:.6rem; }
.of-page-messaging #ofBoardFeed.of-view-large .of-msg-thumb { width:100%; height:260px; border-radius:.45rem; }

/* ── Medium view — default compact (no extra class needed) ── */

/* ── Small view — 2-column icon grid ── */
.of-page-messaging #ofBoardFeed.of-view-small {
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:.5rem;
}
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-card { padding:.45rem .5rem .35rem; }
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-av { width:22px; height:22px; font-size:.6rem; }
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-author { font-size:.7rem; }
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-time { font-size:.6rem; }
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-body {
  font-size:.72rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-height:1.5em;
}
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-thumb { width:100%; height:80px; }
.of-page-messaging #ofBoardFeed.of-view-small .of-thumb-wrap { display:block; width:100%; margin-top:.3rem; }
.of-page-messaging #ofBoardFeed.of-view-small .of-msg-actions { display:none; }
.of-page-messaging #ofBoardFeed.of-view-small .of-expand-panel { display:none; }

/* ── List view — single dense line per post ── */
.of-page-messaging #ofBoardFeed.of-view-list { gap:.2rem; }
.of-page-messaging #ofBoardFeed.of-view-list .of-msg-card { padding:.28rem .65rem; }
.of-page-messaging #ofBoardFeed.of-view-list .of-msg-av { width:22px; height:22px; font-size:.6rem; margin-top:0; }
.of-page-messaging #ofBoardFeed.of-view-list .of-msg-body {
  font-size:.78rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-height:1.5em;
}
.of-page-messaging #ofBoardFeed.of-view-list .of-thumb-wrap,
.of-page-messaging #ofBoardFeed.of-view-list .of-file-chip,
.of-page-messaging #ofBoardFeed.of-view-list audio { display:none; }
.of-page-messaging #ofBoardFeed.of-view-list .of-msg-actions { display:none; }
.of-page-messaging #ofBoardFeed.of-view-list .of-expand-panel { display:none; }

/* ── Details view — list + metadata shown ── */
.of-page-messaging #ofBoardFeed.of-view-details { gap:.25rem; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-card { padding:.38rem .75rem; border-left:3px solid #e2e8f0; border-radius:.35rem; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-card:hover { border-left-color:#4361ee; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-av { width:26px; height:26px; font-size:.66rem; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-body { font-size:.8rem; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-thumb { width:56px; height:56px; }
.of-page-messaging #ofBoardFeed.of-view-details .of-msg-actions { flex-direction:row; gap:.25rem; }

@media (max-width:575.98px) {
  .of-page-messaging #ofBoardFeed.of-view-small { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  .of-page-messaging .of-view-picker-menu { right:0; }
}


/* ==========================================================================
   23r. CMS PAGE EDITOR — "Orbit Editor" (hoisted cms/templates/cms/page_form.html,
        2026-08-17, design Phase 13 file 3 of 3)
   98 rules lived in a <style> block inside {% block extra_head %}, i.e. emitted
   after the stylesheet link, so they WON over the shared rules. A plain hoist
   would have inverted that.

   Every selector is scoped to .of-page-cms, for the same reason as §23q. FORTY-SIX
   of these classes are already defined in this stylesheet, and the oe-* block-editor
   family belongs to a DIFFERENT APP — it was hoisted from
   microsites/website_preview.html and microsites/_block_row.html. Hoisting the CMS
   copies unscoped would have silently restyled the microsites page builder.

   The list also included bare-looking names — .active, .collapsed, .drag-over,
   .is-dragging. Those turned out to be compound (.oe-panel-pane.active,
   .oe-block.collapsed), so they were never standalone globals, but they are scoped
   now regardless: a rule like `.active { display:block }` reaching the shared
   stylesheet would hit every page on the platform.

   Two one-off breakpoints (767px, 991px) were folded to the canonical 767.98px /
   991.98px on the way in. They are a sub-pixel change, and leaving them would have
   pushed the noncanonical_breakpoints ratchet off its floor of 0.

   Scoping applied mechanically and verified by re-parsing the output (98 rule bodies
   in and out, all 98 selectors scoped, verifier self-tested against a planted leak).
   ========================================================================== */

/* ═══════════════════════════════════════════════
   ORBIT EDITOR — Custom design
   Layout: dark command bar · canvas · icon-tab sidebar
   ═══════════════════════════════════════════════ */

/* ── Shell ── */
.of-page-cms .oe-shell {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  background: #0f172a;
}

/* ── Command bar (top) ── */
.of-page-cms .oe-bar {
  flex-shrink: 0; height: 48px;
  display: flex; align-items: center; gap: 0;
  background: #0f172a; border-bottom: 1px solid #1e293b;
  padding: 0 .75rem; z-index: 300;
}
.of-page-cms .oe-bar-back {
  display: flex; align-items: center; gap: .3rem;
  color: #94a3b8; text-decoration: none; font-size: .78rem;
  padding: .3rem .55rem; border-radius: .35rem;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.of-page-cms .oe-bar-back:hover { background: #1e293b; color: #e2e8f0; }
.of-page-cms .oe-bar-sep { width: 1px; height: 22px; background: #1e293b; margin: 0 .5rem; flex-shrink: 0; }
.of-page-cms .oe-bar-title {
  flex: 1; background: #1e293b; border: 1px solid #334155; outline: none;
  color: #f1f5f9; font-size: .95rem; font-weight: 600;
  padding: .3rem .5rem; border-radius: .3rem; min-width: 0;
  transition: border-color .12s, background .12s;
}
.of-page-cms .oe-bar-title:focus { background: #1e293b; border-color: #6366f1; }
.of-page-cms .oe-bar-title::placeholder { color: #94a3b8; font-weight: 400; }
.of-page-cms .oe-bar-status {
  background: #1e293b; border: 1px solid #334155; color: #94a3b8;
  font-size: .72rem; border-radius: .3rem; padding: .2rem .5rem;
  cursor: pointer; outline: none; margin-left: .4rem;
}
.of-page-cms .oe-bar-status:focus { border-color: #6366f1; color: #e2e8f0; }
.of-page-cms .oe-bar-actions { display: flex; align-items: center; gap: .4rem; margin-left: .5rem; }
.of-page-cms .oe-btn-ghost {
  background: transparent; border: 1px solid #334155; color: #94a3b8;
  font-size: .75rem; padding: .3rem .7rem; border-radius: .35rem;
  cursor: pointer; text-decoration: none; transition: all .12s;
  display: inline-flex; align-items: center;
}
.of-page-cms .oe-btn-ghost:hover { border-color: #64748b; color: #e2e8f0; background: #1e293b; }
.of-page-cms .oe-btn-save {
  background: #6366f1; border: none; color: #fff;
  font-size: .78rem; font-weight: 600; padding: .3rem .9rem;
  border-radius: .35rem; cursor: pointer; transition: background .12s;
}
.of-page-cms .oe-btn-save:hover { background: #4f46e5; }

/* ── Workspace ── */
.of-page-cms .oe-workspace {
  flex: 1; display: flex; min-height: 0; overflow: hidden;
}

/* ── Canvas (left) ── */
.of-page-cms .oe-canvas {
  flex: 1; overflow-y: auto; background: #f1f5f9;
  padding: 1.5rem 2rem 6rem;
  min-width: 0;
}
@media (max-width: 767.98px) { .of-page-cms .oe-canvas { padding: 1rem 1rem 5rem; } }

/* ── Page header preview strip ── */
.of-page-cms .oe-pg-preview {
  border-radius: .65rem; margin-bottom: 1.25rem;
  min-height: 88px; display: flex; align-items: flex-end;
  padding: 1.25rem 1.5rem;
  background: var(--pg-accent, #6366f1);
  position: relative; overflow: hidden;
}
.of-page-cms .oe-pg-preview::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.35) 0%, transparent 60%);
}
.of-page-cms .oe-pg-preview h2 {
  position: relative; margin: 0; color: #fff;
  font-size: 1.35rem; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Block rows ── */
.of-page-cms .oe-block {
  background: #fff; border-radius: .55rem;
  border: 1px solid #e2e8f0; margin-bottom: .65rem;
  transition: box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.of-page-cms .oe-block:hover { border-color: #c7d2fe; box-shadow: 0 2px 10px rgba(99,102,241,.08); }
.of-page-cms .oe-block.drag-over { border-color: #6366f1; box-shadow: 0 0 0 2px #6366f130; }
.of-page-cms .oe-block-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .7rem; background: #fafafa;
  border-bottom: 1px solid #f1f5f9; cursor: grab;
  user-select: none;
}
.of-page-cms .oe-block-bar:active { cursor: grabbing; }
.of-page-cms .oe-drag-dots {
  display: grid; grid-template-columns: repeat(2, 4px); gap: 2px;
  padding: 2px 1px; color: #cbd5e1;
}
.of-page-cms .oe-drag-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }
.of-page-cms .oe-block-chip {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .15rem .5rem;
  border-radius: .25rem; background: #f1f5f9; color: #64748b;
  flex-grow: 1;
}
/* Category accent colours on chip */
.of-page-cms .oe-chip-text { background: #eff6ff; color: #2563eb; }
.of-page-cms .oe-chip-image { background: #fdf4ff; color: #9333ea; }
.of-page-cms .oe-chip-video { background: #fdf4ff; color: #9333ea; }
.of-page-cms .oe-chip-youtube { background: #fff1f2; color: #e11d48; }
.of-page-cms .oe-chip-file { background: #f0fdf4; color: #16a34a; }
.of-page-cms .oe-chip-embed { background: #fff7ed; color: #ea580c; }
.of-page-cms .oe-chip-button { background: #f0fdf4; color: #059669; }
.of-page-cms .oe-chip-map { background: #fff7ed; color: #d97706; }
.of-page-cms .oe-chip-columns { background: #f5f3ff; color: #7c3aed; }
.of-page-cms .oe-chip-collapse { background: #fff7ed; color: #b45309; }
.of-page-cms .oe-chip-toc { background: #eff6ff; color: #1d4ed8; }
.of-page-cms .oe-chip-divider { background: #f8fafc; color: #64748b; }
.of-page-cms .oe-chip-spacer { background: #f8fafc; color: #64748b; }
.of-page-cms .oe-chip-form { background: #f0fdf4; color: #16a34a; }
.of-page-cms .nb-drag-handle { cursor: grab; color: #94a3b8; font-size: 1rem; padding: 0 2px; flex-shrink: 0; user-select: none; line-height: 1; }
.of-page-cms .nb-drag-handle:active { cursor: grabbing; }
.of-page-cms .navbar-item-row { transition: opacity .15s; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.of-page-cms .navbar-item-row.is-dragging { opacity: .3; }
.of-page-cms .navbar-item-row.drag-over-top { border-top-color: #4361ee; }
.of-page-cms .navbar-item-row.drag-over-bottom { border-bottom-color: #4361ee; }
.of-page-cms .oe-block-actions { display: flex; gap: .3rem; }
.of-page-cms .oe-block-actions button {
  border: none; background: transparent; cursor: pointer;
  font-size: .7rem; padding: .2rem .45rem; border-radius: .25rem;
  transition: background .1s, color .1s;
}
.of-page-cms .oe-block-actions .oe-save-btn { color: #6366f1; }
.of-page-cms .oe-block-actions .oe-save-btn:hover { background: #eff6ff; }
.of-page-cms .oe-block-actions .oe-del-btn { color: #94a3b8; }
.of-page-cms .oe-block-actions .oe-del-btn:hover { background: #fff1f2; color: #e11d48; }
.of-page-cms .oe-block-body { padding: .85rem .9rem; }
.of-page-cms .oe-block-body.collapsed { display: none; }

/* ── Empty canvas state ── */
.of-page-cms .oe-canvas-empty {
  text-align: center; padding: 4rem 2rem; color: #94a3b8;
  border: 2px dashed #e2e8f0; border-radius: .65rem;
}
.of-page-cms .oe-canvas-empty .oe-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .45; }

/* ── Sidebar ── */
.of-page-cms .oe-sidebar {
  width: 288px; flex-shrink: 0;
  display: flex; background: #fff;
  border-left: 1px solid #e2e8f0;
  height: 100%; overflow: hidden;
}
.of-page-cms .oe-panel-body {
  flex: 1; overflow-y: auto; min-width: 0;
}
.of-page-cms .oe-panel-pane { display: none; }
.of-page-cms .oe-panel-pane.active { display: block; }

/* ── Vertical tab strip ── */
.of-page-cms .oe-tab-strip {
  width: 44px; flex-shrink: 0;
  background: #f8fafc; border-left: 1px solid #e2e8f0;
  display: flex; flex-direction: column; align-items: center;
  padding: .65rem 0; gap: .3rem;
}
.of-page-cms .oe-tab-btn {
  width: 34px; height: 34px; border-radius: .4rem;
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: .6rem; color: #94a3b8;
  transition: background .12s, color .12s; gap: 2px;
  padding: 0;
}
.of-page-cms .oe-tab-btn .tb-icon { font-size: 1rem; line-height: 1; }
.of-page-cms .oe-tab-btn .tb-label { font-size: .52rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.of-page-cms .oe-tab-btn:hover { background: #e2e8f0; color: #475569; }
.of-page-cms .oe-tab-btn.active { background: #6366f1; color: #fff; }

/* ── Blocks panel ── */
.of-page-cms .oe-blocks-panel { padding: .65rem; }
.of-page-cms .oe-block-group { margin-bottom: .85rem; }
.of-page-cms .oe-block-group-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #94a3b8; padding: .2rem .5rem;
  margin-bottom: .3rem;
}
.of-page-cms .oe-block-tile {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border-radius: .4rem; cursor: pointer;
  color: #374151; font-size: .8rem; transition: background .1s;
  border: 1px solid transparent;
}
.of-page-cms .oe-block-tile:hover { background: #f0f4ff; border-color: #c7d2fe; color: #4338ca; }
.of-page-cms .oe-block-tile .tile-icon {
  width: 28px; height: 28px; border-radius: .3rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
  background: #f1f5f9;
}
.of-page-cms .oe-block-tile:hover .tile-icon { background: #e0e7ff; }
.of-page-cms .oe-block-tile .tile-name { font-weight: 500; }


/* ── Style panel ── */
.of-page-cms .oe-style-panel { padding: .75rem; }
.of-page-cms .oe-style-section { margin-bottom: 1.1rem; }
.of-page-cms .oe-style-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b; margin-bottom: .45rem;
  display: block;
}
.of-page-cms .oe-style-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }

/* ── Quill override ── */
.of-page-cms .ql-container { font-size: .88rem; border-radius: 0 0 .35rem .35rem !important; }
.of-page-cms .ql-toolbar { border-radius: .35rem .35rem 0 0 !important; }
.of-page-cms .ql-editor { min-height: 110px; }

/* ── File picker ── */
.of-page-cms .fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); gap: .5rem; }
.of-page-cms .fp-item { border: 2px solid transparent; border-radius: .4rem; cursor: pointer; text-align: center; font-size: .68rem; color: #374151; transition: border-color .12s; overflow: hidden; }
.of-page-cms .fp-item:hover { border-color: #6366f1; }
.of-page-cms .fp-item img { width: 100%; height: 64px; object-fit: cover; display: block; }
.of-page-cms .fp-item .fp-icon { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: #f1f5f9; }
.of-page-cms .fp-item .fp-name { padding: .15rem .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
  /* Let the page scroll naturally — don't lock to 100vh on mobile */
  .of-page-cms .oe-shell { height: auto; overflow: visible; }
  .of-page-cms .oe-workspace { flex-direction: column; overflow: visible; min-height: 0; }
  .of-page-cms .oe-canvas { overflow: visible; padding-bottom: 2rem; }
  /* Sidebar stacks below canvas; tab strip is a horizontal bar at the top */
  .of-page-cms .oe-sidebar {
    width: 100%; height: auto; flex-direction: column;
    border-left: none; border-top: 1px solid #e2e8f0;
  }
  .of-page-cms .oe-tab-strip {
    order: -1; flex-direction: row; width: 100%; height: auto;
    border-left: none; border-bottom: 1px solid #e2e8f0;
    padding: .4rem .65rem; justify-content: flex-start; gap: .4rem;
  }
  .of-page-cms .oe-tab-btn { width: auto; height: 34px; padding: 0 .7rem; flex-direction: row; gap: .35rem; }
  .of-page-cms .oe-tab-btn .tb-label { font-size: .7rem; }
  .of-page-cms .oe-panel-body { max-height: 380px; overflow-y: auto; }
}


/* ==========================================================================
   24. DESIGN SYSTEM — UTILITIES
   Single-purpose classes. Deliberately LAST in the file so a utility class
   always wins over the component and feature CSS above it. Use these instead
   of style="font-size:…" / style="color:…" in templates.
   Browse these rendered live at /adminapp/design-system/.
   ========================================================================== */

/* ─── Type size ─────────────────────────────────────────────────────────── */
.of-text-2xs     { font-size: var(--of-text-2xs); }
.of-text-xs      { font-size: var(--of-text-xs); }
.of-text-sm      { font-size: var(--of-text-sm); }
.of-text-md      { font-size: var(--of-text-md); }
.of-text-base    { font-size: var(--of-text-base); }
.of-text-lg      { font-size: var(--of-text-lg); }
.of-text-xl      { font-size: var(--of-text-xl); }
.of-text-2xl     { font-size: var(--of-text-2xl); }
.of-text-hero    { font-size: var(--of-text-hero); }
.of-text-display { font-size: var(--of-text-display); }

/* ─── Weight ────────────────────────────────────────────────────────────── */
.of-weight-normal   { font-weight: var(--of-weight-normal); }
.of-weight-medium   { font-weight: var(--of-weight-medium); }
.of-weight-semibold { font-weight: var(--of-weight-semibold); }
.of-weight-bold     { font-weight: var(--of-weight-bold); }

/* ─── Line height ───────────────────────────────────────────────────────── */
.of-leading-tight  { line-height: var(--of-leading-tight); }
.of-leading-snug   { line-height: var(--of-leading-snug); }
.of-leading-normal { line-height: var(--of-leading-normal); }
.of-leading-loose  { line-height: var(--of-leading-loose); }

/* ─── Letter spacing ────────────────────────────────────────────────────── */
.of-tracking-tight  { letter-spacing: var(--of-tracking-tight); }
.of-tracking-normal { letter-spacing: var(--of-tracking-normal); }
.of-tracking-wide   { letter-spacing: var(--of-tracking-wide); }
.of-tracking-wider  { letter-spacing: var(--of-tracking-wider); }

/* ─── Semantic text colour ──────────────────────────────────────────────── */
.of-ink-strong { color: var(--of-ink); }
.of-ink-muted  { color: var(--of-muted); }
.of-ink-accent { color: var(--of-accent-ink); }
.of-ink-brand  { color: var(--of-brand); }
.of-ink-danger { color: var(--of-danger-ink); }
.of-ink-success { color: var(--of-success-ink); }
.of-ink-warning { color: var(--of-warning-ink); }
.of-ink-info { color: var(--of-info-ink); }

/* ─── Named type roles ──────────────────────────────────────────────────────
   .of-kicker, .of-page-title and .of-section-title were previously referenced
   by templates but defined in NO stylesheet, so authors inline-styled them
   instead (see adminapp/templates/adminapp/homepage_design.html). The values
   below match the inline styles that were compensating for the gap, so those
   templates render identically once the inline style is removed. */
.of-kicker {
    display: inline-block;
    font-size: var(--of-text-xs);
    font-weight: var(--of-weight-semibold);
    letter-spacing: var(--of-tracking-wider);
    text-transform: uppercase;
    color: var(--of-muted);
}

.of-page-title {
    font-size: var(--of-text-2xl);
    font-weight: var(--of-weight-bold);
    letter-spacing: var(--of-tracking-tight);
    line-height: var(--of-leading-tight);
    color: var(--of-ink);
}

.of-section-title {
    font-size: var(--of-text-lg);
    font-weight: var(--of-weight-bold);
    line-height: var(--of-leading-snug);
    color: var(--of-ink);
}

.of-page-content { color: var(--of-ink); }

/* ─── Image / thumbnail utilities ───────────────────────────────────────────
   Replaces the style="width:48px;height:48px;object-fit:cover;border-radius:6px"
   pattern. `of-thumb` was referenced by templates but never defined. */
.of-thumb {
    object-fit: cover;
    border-radius: var(--of-radius-xs);
    display: block;
}

.of-thumb-xs { width: 28px;  height: 28px;  object-fit: cover; border-radius: var(--of-radius-xs); }
.of-thumb-sm { width: 40px;  height: 40px;  object-fit: cover; border-radius: var(--of-radius-xs); }
.of-thumb-md { width: 64px;  height: 64px;  object-fit: cover; border-radius: var(--of-radius-xs); }
.of-thumb-lg { width: 120px; height: 120px; object-fit: cover; border-radius: var(--of-radius-xs); }

.of-thumb-round { border-radius: var(--of-radius-pill); }

.of-card-img       { width: 100%; height: 160px; object-fit: cover; display: block; }
.of-card-img-tall  { width: 100%; height: 200px; object-fit: cover; display: block; }

/* ─── Surface / radius / shadow helpers ─────────────────────────────────── */
.of-surface       { background: var(--of-surface-strong); }
.of-surface-muted { background: var(--of-bg); }
.of-radius-xs   { border-radius: var(--of-radius-xs); }
.of-radius-sm   { border-radius: var(--of-radius-sm); }
.of-radius-md   { border-radius: var(--of-radius-md); }
.of-radius-pill { border-radius: var(--of-radius-pill); }
.of-shadow-sm { box-shadow: var(--of-shadow-sm); }
.of-shadow-lg { box-shadow: var(--of-shadow-lg); }
.of-border    { border: var(--of-border-thin); }

/* --- Layout helpers used by the live style guide (and generally useful) --- */
.of-card-tight { padding: var(--of-space-2) var(--of-space-3); }
.of-min-w-0    { min-width: 0; }
.of-no-shrink  { flex: 0 0 auto; }
.of-clickable  { cursor: pointer; }

/* Colour swatch — the only place a dynamic inline background is legitimate,
   because the value comes from the token being displayed. */
.of-swatch {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--of-radius-xs);
    border: var(--of-border-thin);
    flex: 0 0 auto;
}

/* Admin sidebar quick links. Token-driven so they follow the admin's theme —
   the older links beside them still carry inline hexes and cannot. Combine with
   an of-page-<module> class to tint one a module's colour, reusing the same
   accent-scope mechanism as the rest of the system. */
.of-admin-quicklink {
    background: color-mix(in srgb, var(--of-accent) 10%, var(--of-surface-strong));
    border: 1px solid color-mix(in srgb, var(--of-accent) 40%, transparent);
    color: var(--of-accent);
    font-weight: var(--of-weight-bold);
    margin-bottom: var(--of-space-1);
}

/* State modifiers for the sidebar quick links. They MUST sit after the base rule
   above: both are single-class selectors, so the later declaration wins and a
   modifier placed in §23c with the rest of the dashboard CSS would be silently
   overridden. Only genuine state is coloured — setup still incomplete, workers
   paused — so colour in that sidebar means something instead of being decoration. */
.of-admin-quicklink-warn {
    background: color-mix(in srgb, var(--of-warning) 12%, var(--of-surface-strong));
    border-color: color-mix(in srgb, var(--of-warning) 55%, transparent);
    color: var(--of-warning-ink);
}

.of-admin-quicklink-ok {
    background: color-mix(in srgb, var(--of-success) 12%, var(--of-surface-strong));
    border-color: color-mix(in srgb, var(--of-success) 55%, transparent);
    color: var(--of-success-ink);
}

/* Contrast sample chip on the design-system page. Only the two colours are set
   inline, because they are the values being demonstrated. */
.of-contrast-sample {
    display: inline-block;
    padding: var(--of-space-1) var(--of-space-2);
    border: var(--of-border-thin);
    border-radius: var(--of-radius-xs);
    font-size: var(--of-text-2xs);
    font-weight: var(--of-weight-semibold);
}

/* --------------------------------------------------------------------------
   ICONS — rendered by {% of_icon "key" %} (adminapp/templatetags/of_icons.py).
   Sizes are token-driven so an icon scales with the type around it. Bootstrap
   Icons are a font, so they inherit currentColor and follow the admin's theme;
   emoji cannot, which is why .of-icon-emoji exists only as an escape hatch.
   -------------------------------------------------------------------------- */
.of-icon {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
    font-size: var(--of-text-base);
}

.of-icon-sm { font-size: var(--of-text-xs); }
.of-icon-lg { font-size: var(--of-text-lg); }
.of-icon-xl { font-size: var(--of-text-2xl); }

/* Emoji ignore currentColor, so they will not follow a theme. Kept for
   decoration only — see docs/design/DESIGN.md. */
.of-icon-emoji { font-style: normal; }

/* DEBUG-only marker for a template asking for an unregistered icon key. Loud on
   purpose: a silent missing icon is how inconsistency creeps back. */
.of-icon-missing {
    padding: 0 var(--of-space-1);
    border: 1px dashed var(--of-danger);
    border-radius: var(--of-radius-xs);
    color: var(--of-danger);
    font-size: var(--of-text-2xs);
    font-family: monospace;
}

/* Icon + label pairing, so every button spaces its icon the same way. */
.of-icon-label {
    display: inline-flex;
    align-items: center;
    gap: var(--of-space-1);
}

/* Generic horizontal-scroll container for wide non-table content (code blocks,
   chip rows). Wide content scrolls inside its own box; the page never does. */
.of-scroll-x {
    overflow-x: auto;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   TAB NAV — for admin pages split across several real pages. These are links,
   not JavaScript tabs, so each section is bookmarkable and renders less.
   Scrolls horizontally on a phone instead of wrapping into an unreadable pile.
   -------------------------------------------------------------------------- */
.of-tab-nav {
    display: flex;
    gap: var(--of-space-1);
    padding: var(--of-space-1);
    border-radius: var(--of-radius-sm);
    background: var(--of-bg);
    border: var(--of-border-thin);
    overflow-x: auto;
    max-width: 100%;
}

.of-tab {
    flex: 0 0 auto;
    padding: var(--of-space-2) var(--of-space-3);
    border-radius: var(--of-radius-xs);
    font-size: var(--of-text-sm);
    font-weight: var(--of-weight-semibold);
    color: var(--of-muted);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: var(--of-transition-fast);
}

.of-tab:hover {
    background: var(--of-surface-strong);
    color: var(--of-ink);
}

.of-tab.is-active {
    background: var(--of-surface-strong);
    color: var(--of-accent-ink);
    border-color: color-mix(in srgb, var(--of-accent) 35%, transparent);
}