/* ================================================================
   Blog Editor v2 — shared theme (vanilla CSS; Tailwind utilities
   are generated per-page by @tailwindcss/browser from the markup)
   ================================================================ */

:root {
    --bg: 40 33% 98%;
    --fg: 24 10% 10%;
    --card: 0 0% 100%;
    --muted: 40 15% 94%;
    --muted-fg: 25 6% 39%;   /* AA: 6.16 on card / 5.92 on bg (WCAG 1.4.3) */
    --border: 35 14% 88%;
    --brand: 26 90% 37%;
    --brand-fg: 0 0% 100%;
    --brand2: var(--brand);      /* secondary brand color (duo mode) */
    --brand2-fg: var(--brand-fg);
    --ok: 152 62% 30%;       /* AA: 5.18 as text on card */
    --warn: 38 95% 32%;      /* AA: 4.80 as text on card */
    --danger: 4 74% 47%;
    --radius: 12px;
    --rad-sm: 8px;   /* small controls */
    --rad-md: 10px;  /* buttons, fields, nav items */
    --rad-lg: 12px;  /* cards, menus */
    --shadow-card: 0 1px 2px hsl(24 10% 10% / .04), 0 4px 20px hsl(24 10% 10% / .05);
    --shadow-pop: 0 10px 36px hsl(24 10% 10% / .16);
}
.dark {
    --bg: 24 10% 6%;
    --fg: 40 20% 92%;
    --card: 26 9% 9%;
    --muted: 26 8% 13%;
    --muted-fg: 30 6% 60%;
    --border: 26 8% 16%;
    --brand: 30 92% 55%;
    --brand-fg: 26 60% 8%;
    --ok: 152 55% 45%;
    --warn: 38 92% 55%;
    --danger: 4 78% 62%;     /* AA: 5.27 as text on dark card */
    --shadow-card: 0 1px 2px hsl(0 0% 0% / .3), 0 4px 20px hsl(0 0% 0% / .25);
    --shadow-pop: 0 10px 36px hsl(0 0% 0% / .5);
}

html { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
html, body { overflow-x: clip; }
/* html is the real scroll container (overflow-x: clip above stops body
   overflow from propagating to the viewport) — lock IT when a drawer is open */
html:has(body.nav-open), html:has(body.drawer-open) { overflow: hidden; }
body {
    background: hsl(var(--bg));
    color: hsl(var(--fg));
    font-size: 14px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
::selection { background: hsl(var(--brand) / 0.18); }
:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; border: 3px solid hsl(var(--bg)); }

.font-display { font-family: inherit; letter-spacing: -0.02em; }

/* ---------- App shell: fixed sidebar + fluid main ---------- */
.shell { display: flex; min-height: 100dvh; }

.side {
    position: sticky; top: 0; align-self: flex-start;
    display: flex; flex-direction: column;
    width: 264px; flex: 0 0 264px; height: 100dvh;
    padding: 20px 0 16px;                       /* no side padding → nav scrollbar sits at the edge */
    border-right: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}
.side nav {
    flex: 1 1 auto; overflow-y: auto; margin-top: 18px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 14px;
    scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent;
    overscroll-behavior: contain;              /* don't chain scroll to the page */
    /* soft fade at the bottom scroll edge only (a top fade clips the first
       WORKSPACE label, reading as a glow on the text) */
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 10px), transparent 100%);
}
.side nav::-webkit-scrollbar { width: 8px; }
.side nav::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ---- Sidebar header: brand + collapse toggle (ChatGPT style) ---- */
.side-top { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 0 2px; position: relative; }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
/* programmatic square logo support (v2SetBrandLogo) */
.brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.brand-logo.has-img { background: hsl(var(--muted)); }
.rail-toggle {
    width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: hsl(var(--muted-fg)); cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.rail-toggle svg { width: 18px; height: 18px; }
.rail-toggle:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
.rail-toggle .ico-close { display: none; }

/* ---------- Mobile top app bar (phones only) ---------- */
.m-top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 12px;
    background: hsl(var(--bg) / .88); backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
}
@media (min-width: 768px) { .m-top { display: none; } }

/* ---- Collapsed icon rail ---- */
.side {
    transition: width .25s cubic-bezier(.32,.72,0,1), flex-basis .25s cubic-bezier(.32,.72,0,1),
                padding .25s cubic-bezier(.32,.72,0,1);
}
body.rail .side { width: 64px; flex: 0 0 64px; padding: 20px 0 16px; }
body.rail .side nav { padding: 0 10px; }
body.rail .side-top { margin: 0 10px; }
body.rail .side-foot { margin-left: 10px; margin-right: 10px; }
body.rail .side .txt,
body.rail .side-label,
body.rail .snav .count,
body.rail .snav .tag-new,
body.rail .side-foot .theme-seg,
body.rail .user-card > :not(.avatar) { display: none; }
body.rail .snav { justify-content: center; padding: 9px 0; }
body.rail .user-card { justify-content: center; padding: 8px 0; }
body.rail .side-top { justify-content: center; padding: 0; }
/* logo → toggle swap on hover (like ChatGPT's rail) */
body.rail .rail-toggle { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; opacity: 0; background: hsl(var(--muted)); }
body.rail .side-top:hover .side-brand { opacity: 0; }
body.rail .side-top:hover .rail-toggle { opacity: 1; }
.side-label {
    font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: hsl(var(--fg) / .55); margin: 18px 10px 6px;
}
.side nav .side-label:first-child { margin-top: 0; }

.snav {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: var(--rad-md);
    font-size: 13.5px; font-weight: 500; color: hsl(var(--fg) / .85);
    transition: background .15s ease, color .15s ease;
}
.snav svg { width: 18px; height: 18px; flex: 0 0 auto; }
.snav:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
.snav.active { background: hsl(var(--brand) / 0.1); color: hsl(var(--brand)); font-weight: 600; }
.snav .count {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; border-radius: 9999px;
    background: hsl(var(--muted)); color: hsl(var(--muted-fg));
}
.snav.active .count { background: hsl(var(--brand) / 0.14); color: hsl(var(--brand)); }
.snav .tag-new {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 9999px;
    background: hsl(var(--brand)); color: hsl(var(--brand-fg));
}

.side-foot { border-top: 1px solid hsl(var(--border)); padding-top: 12px; margin: 12px 14px 0; display: grid; gap: 10px; }
.user-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--rad-md); cursor: pointer;
    width: 100%; border: 0; background: transparent; font: inherit; text-align: left;
}
.user-card:hover { background: hsl(var(--muted)); }
/* user drop-up menu */
.menu.up { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.has-menu.open .menu.up { transform: translateY(0); }
.side-foot .has-menu > .menu { left: 0; right: 0; min-width: 0; }
body.rail .side-foot .has-menu > .menu { left: -4px; right: auto; min-width: 200px; }
.avatar {
    width: 32px; height: 32px; border-radius: 9999px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: hsl(var(--brand-fg));
    background: linear-gradient(135deg, hsl(var(--brand)), hsl(var(--brand) / 0.7));
}

/* Duo brand identity: secondary color flows into gradient surfaces */
html.brand-duo .avatar:not(.has-img) { background: linear-gradient(135deg, hsl(var(--brand)), hsl(var(--brand2))); }
html.brand-duo.bs-gradient .btn-brand {
    background: linear-gradient(135deg, hsl(var(--brand)), hsl(var(--brand2)));
}
html.brand-duo.bs-gradient .btn-brand:hover {
    background: linear-gradient(135deg, color-mix(in srgb, hsl(var(--brand)) 92%, transparent), color-mix(in srgb, hsl(var(--brand2)) 85%, black));
}

/* Mobile drawer */
.scrim {
    position: fixed; inset: 0; z-index: 40; background: hsl(0 0% 0% / .45);
    opacity: 0; visibility: hidden; transition: .2s ease;
}
@media (max-width: 1023px) and (min-width: 768px) {
    /* tablets: always the icon rail by default */
    .side { width: 64px; flex: 0 0 64px; padding: 20px 0 16px; }
    .side nav { padding: 0 10px; }
    .side-top { margin: 0 10px; }
    .side .side-foot { margin-left: 10px; margin-right: 10px; }
    .side .txt, .side .side-label, .side .snav .count, .side .snav .tag-new,
    .side .side-foot .theme-seg, .side .user-card > :not(.avatar) { display: none; }
    .side .snav { justify-content: center; padding: 9px 0; }
    .side .user-card { justify-content: center; padding: 8px 0; }
    .side-top { justify-content: center; padding: 0; }
    .side .side-foot .has-menu > .menu { left: -4px; right: auto; min-width: 200px; }
    .side .rail-toggle { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; opacity: 0; background: hsl(var(--muted)); }
    .side-top:hover .side-brand { opacity: 0; }
    .side-top:hover .rail-toggle { opacity: 1; }

    /* expanded: overlay drawer with scrim */
    body.nav-open .side {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
        width: 264px; flex-basis: 264px; padding: 20px 0 16px;
        background: hsl(var(--card)); box-shadow: var(--shadow-pop);
    }
    body.nav-open .side nav { padding: 0 14px; }
    body.nav-open .side-top { margin: 0 14px; }
    body.nav-open .side-foot { margin-left: 14px; margin-right: 14px; }
    body.nav-open .side-foot .has-menu > .menu { left: 0; right: 0; min-width: 0; }
    body.nav-open .side .txt { display: block; }
    body.nav-open .side-label, body.nav-open .snav .count, body.nav-open .snav .tag-new,
    body.nav-open .side-foot .theme-seg { display: revert; }
    body.nav-open .user-card > :not(.avatar) { display: revert; }
    body.nav-open .snav { justify-content: flex-start; padding: 9px 10px; }
    body.nav-open .user-card { justify-content: flex-start; padding: 8px 10px; }
    body.nav-open .side-top { justify-content: flex-start; padding: 0 2px; }
    body.nav-open .rail-toggle { position: static; opacity: 1; background: transparent; width: 34px; height: 34px; }
    body.nav-open .side-top:hover .side-brand { opacity: 1; }
    body.nav-open .scrim { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }
}

/* ---------- Phones: no rail — top app bar + full overlay drawer (ChatGPT style) ---------- */
@media (max-width: 767px) {
    .side, body.rail .side {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
        width: min(300px, 85vw); flex-basis: auto; height: 100dvh;
        padding: 16px 0;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
        background: hsl(var(--card));
    }
    .side nav, body.rail .side nav { padding: 0 14px; }
    .side-top, body.rail .side-top { margin: 0 14px; }
    .side-foot, body.rail .side-foot { margin-left: 14px; margin-right: 14px; }
    .side-foot .has-menu > .menu, body.rail .side-foot .has-menu > .menu { left: 0; right: 0; min-width: 0; }
    body.nav-open .side { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-pop); }
    body.nav-open .scrim { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }

    /* drawer is always fully expanded — neutralize any rail state */
    body.rail .side .txt { display: block; }
    body.rail .side-label, body.rail .snav .count, body.rail .snav .tag-new,
    body.rail .side-foot .theme-seg { display: revert; }
    body.rail .user-card > :not(.avatar) { display: revert; }
    body.rail .snav { justify-content: flex-start; padding: 9px 10px; }
    body.rail .user-card { justify-content: flex-start; padding: 8px 10px; }
    body.rail .side-top { justify-content: flex-start; padding: 0 2px; }
    body.rail .rail-toggle { position: static; opacity: 1; background: transparent; width: 34px; height: 34px; }
    body.rail .side-top:hover .side-brand { opacity: 1; }

    /* close (×) instead of panel icon inside the drawer */
    .rail-toggle .ico-rail { display: none; }
    .rail-toggle .ico-close { display: inline-flex; }
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
    position: fixed; left: 12px; top: 12px; z-index: 200;
    transform: translateY(-250%);
    background: hsl(var(--card)); color: hsl(var(--fg));
    border: 1px solid hsl(var(--border)); border-radius: var(--rad-md);
    padding: 10px 16px; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-card);
}
.skip-link:focus { transform: none; }

/* ================= Top-navbar layout (SPA console shell) =================
   Mirrors frontend Shell: full-width 56px blurred topbar (sidebar toggle +
   brand), 240px sidebar that collapses to width 0 on desktop (persisted in
   localStorage['v2.topside']) and becomes an off-canvas drawer under the
   topbar on ≤900px. Activate with body.layout-top. */
body.layout-top { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
    position: sticky; top: 0; z-index: 45; flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 16px;
    background: hsl(var(--bg) / .85); backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
}
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.tshell { display: flex; flex: 1 1 auto; min-height: 0; }
.tshell > main { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; }

.tside {
    display: flex; flex-direction: column;
    overflow-x: hidden; overflow-y: auto;
    background: hsl(var(--card)); border-right: 1px solid hsl(var(--border));
    scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent;
}
.tside nav { display: flex; flex-direction: column; gap: 2px; min-width: 216px; flex: 1 1 auto; }
.tside .side-foot { min-width: 216px; margin: 12px 0 0; }

@media (min-width: 901px) {
    .tside {
        width: 240px; flex: 0 0 auto; padding: 16px 12px;
        transition: width .25s cubic-bezier(.32,.72,0,1), padding .25s cubic-bezier(.32,.72,0,1), border-color .25s;
    }
    body.tside-hidden .tside { width: 0; padding: 16px 0; border-color: transparent; }
}
@media (max-width: 900px) {
    /* off-canvas drawer under the topbar */
    .tside {
        position: fixed; top: 56px; bottom: 0; left: 0; z-index: 35;
        width: 240px; padding: 16px 12px;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .25s cubic-bezier(.32,.72,0,1), visibility .25s;
    }
    body.tnav-open .tside { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-pop); }
    body.tnav-open .tscrim { opacity: 1; visibility: visible; }
}
.tscrim {
    position: fixed; inset: 0; top: 56px; z-index: 30;
    background: hsl(0 0% 0% / .5);
    opacity: 0; visibility: hidden; transition: .2s ease;
}
@media (min-width: 901px) { .tscrim { display: none; } }

@media (prefers-reduced-motion: reduce) { .tside { transition: none; } }
@media print { .topbar, .tside, .tscrim { display: none !important; } }

/* ---------- Buttons ---------- */
.btn {
    height: 38px; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--btn-rad, var(--rad-md));
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-brand {
    background: hsl(var(--brand)); color: hsl(var(--brand-fg));
    box-shadow: 0 1px 2px hsl(var(--brand) / .4), inset 0 1px 0 hsl(0 0% 100% / .12);
}
.btn-brand:hover { background: hsl(var(--brand) / 0.88); }
.btn-ghost { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--fg)); background: hsl(var(--card)); }
.btn-ghost:hover { background: hsl(var(--muted)); }
.btn-soft { background: hsl(var(--brand) / 0.1); color: hsl(var(--brand)); }
.btn-soft:hover { background: hsl(var(--brand) / 0.16); }
.btn-danger { background: hsl(var(--danger) / .1); color: hsl(var(--danger)); }
.btn-danger:hover { background: hsl(var(--danger) / .16); }
.btn-contrast { background: hsl(var(--fg)); color: hsl(var(--bg)); }
.btn-contrast:hover { background: hsl(var(--fg) / .85); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--btn-rad-sm, var(--rad-sm)); }

.icon-btn {
    width: 38px; height: 38px; border-radius: var(--btn-rad, var(--rad-md));
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent; color: hsl(var(--muted-fg));
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
.icon-btn.bordered { border-color: hsl(var(--border)); background: hsl(var(--card)); }
.icon-btn:disabled { opacity: .5; pointer-events: none; }
.icon-btn-sm { width: 32px; height: 32px; }
.icon-btn-sm svg { width: 16px; height: 16px; }
/* light-on-dark buttons for image overlays */
.icon-btn.on-media { background: hsl(0 0% 100% / .15); color: #fff; }
.icon-btn.on-media:hover { background: hsl(0 0% 100% / .3); color: #fff; }
.icon-btn.on-media.danger:hover { background: hsl(var(--danger) / .8); }

/* ---------- Cards ---------- */
.card {
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease;   /* hover-shadow presets ease both in AND out */
}
.card-pad { padding: 22px; }
.card-pad-sm { padding: 16px; }
@media (min-width: 640px) { .card-pad-sm { padding: 20px; } }

/* ---------- Status pills ---------- */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px; border-radius: 9999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok    { color: hsl(var(--ok));    background: hsl(var(--ok) / .1); }
.pill-warn  { color: hsl(var(--warn));  background: hsl(var(--warn) / .12); }
.pill-danger { color: hsl(var(--danger)); background: hsl(var(--danger) / .1); }
.pill-plain { color: hsl(var(--muted-fg)); background: hsl(var(--muted)); }
.pill-brand { color: hsl(var(--brand)); background: hsl(var(--brand) / .1); }
.pill-icon::before { content: none; }   /* pills with a custom icon drop the status dot */
.pill svg { width: 13px; height: 13px; }

/* ---------- Forms ---------- */
.lbl { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.hint { font-size: 12px; color: hsl(var(--muted-fg)); margin-top: 6px; }
.field {
    width: 100%; height: 40px; padding: 0 13px;
    font: inherit; font-size: 13.5px; color: hsl(var(--fg));
    background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--rad-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: hsl(var(--muted-fg) / .7); }
.field:focus { outline: none; border-color: hsl(var(--brand)); box-shadow: 0 0 0 3px hsl(var(--brand) / .28); }
.field:disabled { opacity: .55; cursor: not-allowed; }
textarea.field { height: auto; padding: 10px 13px; resize: vertical; }
select.field {
    appearance: none; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23918a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}

/* ---------- Segmented filter chips ---------- */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
    height: 32px; padding: 0 14px; border-radius: 9999px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    color: hsl(var(--muted-fg)); background: transparent;
    border: 1px solid hsl(var(--border));
    transition: .15s ease;
}
.chip:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
.chip.active { background: hsl(var(--fg)); color: hsl(var(--bg)); border-color: hsl(var(--fg)); }
.chip .n { font-size: 11.5px; opacity: .65; font-weight: 600; }

/* ---------- Dropdown menu ---------- */
.menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 180px; padding: 6px;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: var(--rad-lg); box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: .15s ease;
}
.has-menu.open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu button, .menu a {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: 8px; font-size: 13px; text-align: left;
    color: hsl(var(--fg)); cursor: pointer;
}
.menu button:hover, .menu a:hover { background: hsl(var(--muted)); }
.menu svg { width: 15px; height: 15px; color: hsl(var(--muted-fg)); }
.menu .danger { color: hsl(var(--danger)); }
.menu .danger svg { color: hsl(var(--danger)); }

/* ---------- Theme segmented (sidebar footer) ---------- */
.theme-seg { display: flex; gap: 3px; padding: 3px; background: hsl(var(--muted)); border-radius: 10px; }
.theme-seg button {
    flex: 1; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: hsl(var(--muted-fg)); background: transparent; transition: .15s ease;
}
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button.active { background: hsl(var(--card)); color: hsl(var(--fg)); box-shadow: 0 1px 3px hsl(0 0% 0% / .12); }

/* ---------- Editor page ---------- */
.ed-topbar {
    position: sticky; top: 0; z-index: 30; height: 56px;
    display: flex; align-items: center; gap: 10px; padding: 0 16px;
    background: hsl(var(--bg) / .86); backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border) / .7);
}
.ed-title {
    width: 100%; border: 0; background: transparent; resize: none; outline: none;
    font-family: inherit; font-size: 40px; font-weight: 700;
    line-height: 1.15; letter-spacing: -0.025em; color: hsl(var(--fg));
}
.ed-title::placeholder { color: hsl(var(--muted-fg) / .45); }
.ed-body {
    font-family: inherit; font-size: var(--ed-fs, 18px); line-height: 1.75;
    color: hsl(var(--fg) / .92); outline: none; min-height: 50vh;
}
.ed-body:empty::before { content: attr(data-placeholder); color: hsl(var(--muted-fg) / .5); pointer-events: none; }

.ed-fab {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 30;
    display: flex; align-items: center; gap: 2px; padding: 6px;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: 9999px; box-shadow: var(--shadow-pop);
}
.ed-fab button {
    width: 36px; height: 36px; border-radius: 9999px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: hsl(var(--muted-fg)); transition: .15s ease;
}
.ed-fab button:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
.ed-fab button svg { width: 16px; height: 16px; }
.ed-fab .sep { width: 1px; height: 20px; background: hsl(var(--border)); margin: 0 4px; }

/* ---- Toolbar overflow drop-up (phones) ---- */
.fab-more { position: relative; display: none; }
.fab-menu {
    position: absolute; bottom: calc(100% + 12px); right: -6px; z-index: 40;
    min-width: 190px; padding: 6px;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: 12px; box-shadow: var(--shadow-pop);
    display: none; flex-direction: column; gap: 2px;
}
.fab-more.open .fab-menu { display: flex; }
.fab-more .fab-more-btn svg { transition: transform .18s ease; }
.fab-more.open .fab-more-btn svg { transform: rotate(180deg); }
.fab-menu button {
    width: 100%; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    padding: 0 10px; font-size: 13px; font-weight: 500;
    background: transparent; color: hsl(var(--fg));
}
.fab-menu button::after { content: attr(title); }
.fab-menu button svg { color: hsl(var(--muted-fg)); }
.fab-menu button:hover { background: hsl(var(--muted)); }
.fab-menu button.active { background: hsl(var(--brand) / .12); color: hsl(var(--brand)); }
.fab-menu button.active svg { color: hsl(var(--brand)); }

.ed-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
    width: 400px; max-width: calc(100vw - 40px);
    background: hsl(var(--card)); border-left: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-pop);
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
}
body.drawer-open .ed-drawer { transform: translateX(0); visibility: visible; }
body.drawer-open .scrim, body.nav-open .scrim { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

/* ---------- Editor page: phone tweaks ---------- */
@media (max-width: 640px) {
    .ed-title { font-size: 30px; }
    .ed-body { font-size: 17px; }
    .ed-fab {
        left: 12px; right: 12px; bottom: 14px;
        transform: none; justify-content: space-around;
        max-width: none; overflow: visible;
    }
    .ed-fab > .sep { display: none; }
    .fab-more { display: inline-flex; }
    .ed-drawer { width: 100vw; max-width: 100vw; border-left: 0; }
}

/* ---------- Misc ---------- */
.shell > main { min-width: 0; overflow-x: clip; }
/* Any grid without an active grid-cols-* utility falls back to a single
   column that can SHRINK (implicit columns size to max-content and blow
   out small screens otherwise). MUST live in a layer below `utilities`:
   unlayered CSS beats all layered CSS, which would kill grid-cols-* on
   desktop. Inside @layer base, Tailwind's utilities still win. */
@layer base {
    .shell > main .grid { grid-template-columns: minmax(0, 1fr); }
    .shell > main > div { grid-template-columns: minmax(0, 1fr); }
}
.divider { height: 1px; background: hsl(var(--border)); }

/* ---------- Full-width bottom toast bar (Cloudflare style) ---------- */
.toastbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 12px 56px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 13.5px; font-weight: 600; text-align: center;
    background: hsl(var(--fg)); color: hsl(var(--bg));
    transform: translateY(100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.32,.72,0,1), visibility .3s;
}
.toastbar.show { transform: none; visibility: visible; }
.toastbar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.toastbar-action {
    background: none; border: 0; cursor: pointer; padding: 0;
    font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
    white-space: nowrap;
}
.toastbar-action:hover { opacity: .85; }
.toastbar-close {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: inherit; opacity: .75;
}
.toastbar-close:hover { opacity: 1; background: hsl(0 0% 100% / .14); }
.toastbar-close svg { width: 16px; height: 16px; }
.toastbar.brand  { background: hsl(var(--brand));  color: hsl(var(--brand-fg)); }
.toastbar.ok     { background: hsl(var(--ok));     color: hsl(0 0% 100%); }
.toastbar.danger { background: hsl(var(--danger)); color: hsl(0 0% 100%); }
.toastbar.warn   { background: hsl(var(--warn));   color: hsl(0 0% 100%); }
.dark .toastbar.warn, .dark .toastbar.ok, .dark .toastbar.danger { color: hsl(24 10% 8%); }
.dark .toastbar.warn .toastbar-close:hover,
.dark .toastbar.ok .toastbar-close:hover,
.dark .toastbar.danger .toastbar-close:hover { background: hsl(0 0% 0% / .12); }
@media (max-width: 640px) {
    .toastbar { justify-content: flex-start; text-align: left; padding-left: 16px; }
}

/* ---------- Tooltip (pure CSS, data-tip attribute) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
    z-index: 60; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    font-size: 12px; font-weight: 600; line-height: 1.3;
    background: hsl(var(--fg)); color: hsl(var(--bg));
    box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-tip]::before {
    content: "";
    position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(2px);
    z-index: 60; border: 5px solid transparent; border-top-color: hsl(var(--fg)); border-bottom: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ---------- Accordion (details/summary) ---------- */
details.acc { border: 1px solid hsl(var(--border)); border-radius: var(--rad-md); background: hsl(var(--card)); }
details.acc + details.acc { margin-top: 8px; }
details.acc > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; cursor: pointer; user-select: none;
    font-size: 13.5px; font-weight: 600; list-style: none;
    border-radius: inherit;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { background: hsl(var(--muted) / .5); }
details.acc > summary .acc-chev { margin-left: auto; transition: transform .18s ease; color: hsl(var(--muted-fg)); }
details.acc[open] > summary .acc-chev { transform: rotate(180deg); }
details.acc > .acc-body {
    padding: 2px 14px 14px; font-size: 13px; color: hsl(var(--muted-fg));
    border-top: 1px solid hsl(var(--border) / .6); padding-top: 12px; margin: 0 0;
}
.spark { width: 100%; height: 36px; }
.spark path.line { fill: none; stroke: hsl(var(--brand)); stroke-width: 2; stroke-linecap: round; }
.spark path.area { fill: url(#sparkfill); stroke: none; opacity: .9; }
/* gradient stops follow the accent (SVG attrs can't use var(); CSS can) */
.spark defs stop:first-child { stop-color: hsl(var(--brand)); stop-opacity: .25; }
.spark defs stop:last-child  { stop-color: hsl(var(--brand)); stop-opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .side, .ed-drawer, .menu, .toastbar, .card, [data-tip]::after, [data-tip]::before { transition: none; }
    .skel::after { animation: none; }
}

/* ---------- Print ---------- */
@media print {
    .side, .m-top, .toastbar, .scrim, .skip-link, .ed-fab { display: none !important; }
    .shell > main { overflow: visible; }
    .card { box-shadow: none; break-inside: avoid; }
}

/* ================================================================
   UI PREFERENCE PRESETS (classes applied on <html> by uiprefs.js)
   ================================================================ */

/* ---- Corner radius (also overrides Tailwind's rounded-* theme vars) ---- */
html.r-sharp  { --rad-sm: 2px;  --rad-md: 3px;  --rad-lg: 4px;  --radius: 4px;
                --radius-sm: .1rem; --radius-md: .15rem; --radius-lg: .2rem;
                --radius-xl: .25rem; --radius-2xl: .3rem; --radius-3xl: .4rem; }
html.r-subtle { --rad-sm: 5px;  --rad-md: 6px;  --rad-lg: 8px;  --radius: 8px;
                --radius-sm: .18rem; --radius-md: .25rem; --radius-lg: .33rem;
                --radius-xl: .5rem;  --radius-2xl: .65rem; --radius-3xl: 1rem; }
html.r-round  { --rad-sm: 12px; --rad-md: 15px; --rad-lg: 18px; --radius: 18px;
                --radius-sm: .4rem; --radius-md: .6rem; --radius-lg: .8rem;
                --radius-xl: 1.1rem; --radius-2xl: 1.4rem; --radius-3xl: 2rem; }

/* ---- Card base shadows (flat, xs, sm, md, lg, xl, 2xl) ---- */
html.sh-flat { --shadow-card: none; }
html.sh-xs   { --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); }
html.sh-sm   { --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); }
html.sh-md   { --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); }
html.sh-lg   { --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); }
html.sh-xl   { --shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
html.sh-2xl  { --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.18); }

/* ---- Card hover shadows (none, xs, sm, md, lg, xl, 2xl) ---- */
html.ch-xs .card:hover, html.ch-xs section.card:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html.ch-sm .card:hover, html.ch-sm section.card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html.ch-md .card:hover, html.ch-md section.card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html.ch-lg .card:hover, html.ch-lg section.card:hover {
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html.ch-xl .card:hover, html.ch-xl section.card:hover {
    box-shadow: 0 24px 38px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html.ch-2xl .card:hover, html.ch-2xl section.card:hover {
    box-shadow: 0 35px 64px rgba(0, 0, 0, 0.22);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ---- Lucide icon weight (CSS beats the SVG stroke-width attribute) ---- */
html.ic-light svg.lucide { stroke-width: 1.5; }
html.ic-bold  svg.lucide { stroke-width: 2.4; }

/* ---- Density ---- */
html.dn-compact .btn { height: 34px; }
html.dn-compact .btn-sm { height: 28px; }
html.dn-compact .icon-btn { width: 34px; height: 34px; }
html.dn-compact .field { height: 36px; }
html.dn-compact .snav { padding: 7px 10px; }
html.dn-compact .card-pad { padding: 16px; }
html.dn-compact .user-card { padding: 6px 10px; }
html.dn-spacious .btn { height: 42px; }
html.dn-spacious .btn-sm { height: 34px; }
html.dn-spacious .icon-btn { width: 42px; height: 42px; }
html.dn-spacious .field { height: 44px; }
html.dn-spacious .snav { padding: 11px 12px; }
html.dn-spacious .card-pad { padding: 28px; }
html.dn-spacious .user-card { padding: 10px; }

/* ---- Content width (shell pages) ---- */
html.w-narrow .shell > main > div { max-width: 920px; }
html.w-wide   .shell > main > div { max-width: 1420px; }

/* ---- UI scale ---- */
html.sc-90 body  { zoom: .9; }
html.sc-110 body { zoom: 1.1; }

/* ---- Border strength ---- */
html.bd-soft   { --border: 35 14% 92%; }
html.bd-soft.dark   { --border: 26 8% 13%; }
html.bd-strong { --border: 35 12% 79%; }
html.bd-strong.dark { --border: 26 8% 25%; }

/* ---- Background tint ---- */
html.bg-neutral { --bg: 0 0% 98%; --card: 0 0% 100%; --muted: 0 0% 94%; }
html.bg-neutral.dark { --bg: 0 0% 6%; --card: 0 0% 9%; --muted: 0 0% 13%; }
html.bg-cool { --bg: 210 30% 98%; --card: 210 25% 100%; --muted: 210 20% 93%; }
html.bg-cool.dark { --bg: 220 16% 7%; --card: 220 13% 10%; --muted: 220 11% 14%; }

/* ---- Reduced motion ---- */
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
    transition: none !important;
    animation: none !important;
}

/* ---- Button styles (primary buttons; frontend-standard color-mix algebra) ---- */
html.bs-gradient .btn-brand {
    background: linear-gradient(135deg, hsl(var(--brand)), color-mix(in srgb, hsl(var(--brand)) 70%, black));
    color: hsl(var(--brand-fg));
    border-color: transparent;
    box-shadow: 0 2px 10px color-mix(in srgb, hsl(var(--brand)) 35%, transparent);
}
html.bs-gradient .btn-brand:hover {
    background: linear-gradient(135deg, color-mix(in srgb, hsl(var(--brand)) 92%, transparent), color-mix(in srgb, hsl(var(--brand)) 60%, black));
}
html.bs-soft .btn-brand {
    background: color-mix(in srgb, hsl(var(--brand)) 15%, transparent);
    color: hsl(var(--brand)); box-shadow: none; border-color: transparent;
}
html.bs-soft .btn-brand:hover { background: color-mix(in srgb, hsl(var(--brand)) 22%, transparent); }
html.bs-outline .btn-brand {
    background: transparent; color: hsl(var(--brand));
    border: 1.5px solid hsl(var(--brand)); box-shadow: none;
}
html.bs-outline .btn-brand:hover { background: color-mix(in srgb, hsl(var(--brand)) 8%, transparent); }
html.bs-push .btn-brand {
    box-shadow: 0 4px 0 color-mix(in srgb, hsl(var(--brand)) 60%, black), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: transparent;
}
html.bs-push .btn-brand:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 color-mix(in srgb, hsl(var(--brand)) 60%, black);
}
html.bs-glow .btn-brand {
    box-shadow: 0 0 0 1px color-mix(in srgb, hsl(var(--brand)) 40%, transparent), 0 4px 20px color-mix(in srgb, hsl(var(--brand)) 55%, transparent);
    border-color: transparent;
}
html.bs-glow .btn-brand:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, hsl(var(--brand)) 50%, transparent), 0 6px 26px color-mix(in srgb, hsl(var(--brand)) 65%, transparent);
}
html.bs-elevated .btn-brand {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 8px 24px color-mix(in srgb, hsl(var(--brand)) 40%, transparent);
    border-color: transparent;
}
html.bs-elevated .btn-brand:hover {
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.17), 0 10px 28px color-mix(in srgb, hsl(var(--brand)) 48%, transparent);
}

/* ---- Button radius (separate from global corner radius) ---- */
html.br-sharp { --btn-rad: 2px;  --btn-rad-sm: 2px; }
html.br-sm    { --btn-rad: 6px;  --btn-rad-sm: 5px; }
html.br-lg    { --btn-rad: 14px; --btn-rad-sm: 12px; }
html.br-xl    { --btn-rad: 18px; --btn-rad-sm: 16px; }
html.br-pill  { --btn-rad: 999px; --btn-rad-sm: 999px; }

/* ---- Heading font (titles + editor title) ---- */
html.ft-serif .font-display,
html.ft-serif .ed-title {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    letter-spacing: -0.01em;
}

/* ---- Editor font (writing canvas) ---- */
html.ef-serif .ed-body {
    font-family: Charter, Georgia, Cambria, "Times New Roman", serif;
}

/* ---- Contrast (stronger text + outlines; wins over border presets) ---- */
html.hc { --fg: 24 12% 4%; --muted-fg: 25 8% 32%; --border: 35 12% 76%; }
html.hc.dark { --fg: 40 20% 97%; --muted-fg: 30 8% 74%; --border: 26 8% 30%; }

/* ---- Sidebar style (desktop/tablet closed state only — overlay
        drawers keep their solid card background) ---- */
@media (min-width: 768px) {
    html.sb-tint body:not(.nav-open) .side { background: hsl(var(--muted)); }
    html.sb-plain body:not(.nav-open) .side { background: transparent; border-right-color: transparent; }
}

/* ---- Badges & tags (universal tag style) ---- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px; border-radius: 9999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: hsl(var(--brand) / .12); color: hsl(var(--brand));
    border: 1px solid transparent;
}
html.tag-solid .badge {
    background: hsl(var(--brand)); color: hsl(var(--brand-fg));
}
html.tag-outline .badge {
    background: transparent; border-color: hsl(var(--brand)); color: hsl(var(--brand));
}
html.tag-dot .badge {
    background: transparent; color: hsl(var(--fg)); padding-left: 2px;
}
html.tag-dot .badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: hsl(var(--brand)); flex-shrink: 0;
}

/* ---- Code & token font (universal) ---- */
html.cf-fira code, html.cf-fira pre, html.cf-fira .font-mono {
    font-family: "Fira Code", ui-monospace, monospace;
}
html.cf-jetbrains code, html.cf-jetbrains pre, html.cf-jetbrains .font-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}
html.cf-system code, html.cf-system pre, html.cf-system .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Preference controls (settings page) ---- */
.pref-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 13px 0;
    border-bottom: 1px dashed hsl(var(--border));
}
.pref-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pref-row:first-child { padding-top: 0; }
.pref-info b { display: block; font-size: 13.5px; font-weight: 600; }
.pref-info span { display: block; font-size: 12px; color: hsl(var(--muted-fg)); margin-top: 1px; }
.pchips { display: inline-flex; gap: 3px; padding: 3px; background: hsl(var(--muted)); border-radius: var(--rad-md); }
.pchips button {
    height: 28px; padding: 0 12px; border: 0; cursor: pointer;
    border-radius: calc(var(--rad-md) - 3px);
    font-size: 12.5px; font-weight: 600; color: hsl(var(--muted-fg));
    background: transparent; transition: .12s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.pchips button svg { width: 14px; height: 14px; }
.pchips button.on { background: hsl(var(--card)); color: hsl(var(--fg)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }