/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  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 (Winks) panels and summary
 *  12. Calendar
 *  13. Kanban / Focus Board
 *  14. Wink 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); }

/* ─── 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;
}

.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 {
    border-color: rgba(47, 109, 149, 0.28);
    box-shadow: inset 0 0 0 1px rgba(47, 109, 149, 0.14), 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);
}

/* ── Wink 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,
    .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.
   ========================================================================== */

/* --- 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; }

/* --- 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; }


/* ==========================================================================
   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);
}