/*
 * Desk shell layout. Body, three regions, modal, and responsive rules.
 */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

/* =============================================================
 * Body + Layout root
 * ============================================================= */

.desk-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

.desk-layout {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 48px);
}

/* =============================================================
 * NavRegion (7.x) — fixed 48px top bar
 * ============================================================= */

.nav-region {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    flex: 0 0 48px;
    background: var(--desk-color-bg-panel);
    border-bottom: 1px solid var(--desk-color-border-subtle);
    z-index: 50;
}

.nav-region__logo-box {
    width: 64px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-region[data-nav-layout="tabs"] .nav-region__logo-box {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px 0 18px;
    overflow: visible;
}

.nav-region__wordmark {
    display: none;
    font-family: var(--desk-lens-tip-font, inherit);
    font-size: 10px;
    font-weight: 500;
    color: var(--desk-color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.nav-region[data-nav-layout="tabs"] .nav-region__wordmark {
    display: inline;
}

.nav-region__logo-box:hover .nav-region__logo,
.nav-region__logo-box:focus-visible .nav-region__logo {
    transform: scale(1.12);
}

.nav-region__logo-box:focus-visible {
    outline: 2px solid var(--desk-color-accent);
    outline-offset: -4px;
    border-radius: 6px;
}

.nav-region__logo {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: block;
    overflow: hidden;
    transition: transform 150ms var(--desk-transition-ease);
}

.nav-region__logo--dark { display: none; }
[data-theme="dark"] .nav-region__logo--light { display: none; }
[data-theme="dark"] .nav-region__logo--dark { display: block; }

.nav-region__menu {
    /* JS sets `position:absolute` and `left:` to align under ProsePane (snap-3). */
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    top: 0;
}

.nav-region__menu-btn {
    background: transparent;
    border: none;
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    font-family: inherit;
    padding: 4px 10px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.nav-region__menu-btn:hover,
.nav-region__menu-btn:focus-visible {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
    outline: none;
}

/* Option 2 — Menu sits just left of the version tabs. */
.nav-region__overflow {
    display: none;
    position: relative;
    align-self: flex-end;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 8px;
    margin-bottom: 1px;
    z-index: 80;
}

.nav-region[data-nav-layout="tabs"] .nav-region__overflow {
    display: flex;
}

.nav-region[data-nav-layout="tabs"] .nav-region__menu {
    display: none;
}

.nav-region[data-nav-layout="tabs"] .nav-region__overflow-btn,
.nav-region[data-nav-layout="tabs"] .nav-region__tab-more,
.nav-region[data-nav-layout="tabs"] .nav-region__share-btn,
.nav-region[data-nav-layout="tabs"] .nav-region__tab {
    font-family: var(--desk-lens-tip-font, inherit);
}

.nav-region[data-nav-layout="tabs"] .nav-region__overflow-btn,
.nav-region[data-nav-layout="tabs"] .nav-region__tab-more,
.nav-region[data-nav-layout="tabs"] .nav-region__share-btn {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    line-height: 1;
}

.nav-region[data-nav-layout="tabs"] .nav-region__overflow-btn:hover,
.nav-region[data-nav-layout="tabs"] .nav-region__overflow-btn:focus-visible,
.nav-region[data-nav-layout="tabs"] .nav-region__tab-more:hover,
.nav-region[data-nav-layout="tabs"] .nav-region__tab-more:focus-visible,
.nav-region[data-nav-layout="tabs"] .nav-region__share-btn:hover,
.nav-region[data-nav-layout="tabs"] .nav-region__share-btn:focus-visible {
    color: var(--desk-color-text);
}

.nav-region__overflow-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 148px;
    padding: 6px 0;
    background: var(--desk-color-bg-panel);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 8px;
    box-shadow: 0 6px 20px var(--desk-color-shadow);
    z-index: 160;
}

.nav-region__overflow-menu .nav-region__menu-btn {
    display: block;
    width: 100%;
    text-align: left;
    height: auto;
    border-radius: 0;
    padding: 8px 14px;
    font-family: var(--desk-lens-tip-font, inherit);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    line-height: 1;
}

.nav-region__overflow-menu .nav-region__menu-btn:hover,
.nav-region__overflow-menu .nav-region__menu-btn:focus-visible {
    color: var(--desk-color-text);
}

.nav-region__tabs {
    display: none;
    align-items: flex-end;
    height: 48px;
    gap: 2px;
    top: 0;
    overflow: visible;
}

.nav-region[data-nav-layout="tabs"] .nav-region__tabs {
    display: flex;
}

.nav-region[data-reader="true"] .nav-region__tabs-list,
.nav-region[data-reader="true"] .nav-region__tab-add,
.nav-region[data-reader="true"] .nav-region__tab-more {
    display: none;
}

.nav-region__tabs-list {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    min-width: 0;
    flex: 1 1 auto;
    scrollbar-width: thin;
}

.nav-region__tab {
    position: relative;
    flex: 0 0 auto;
    min-width: 96px;
    max-width: 180px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--desk-color-border-subtle);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--desk-color-bg-panel);
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.nav-region__tab-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 28px;
}

.nav-region__tab-split {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.nav-region__tab:hover .nav-region__tab-split,
.nav-region__tab-split:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.nav-region__tab.is-split-used .nav-region__tab-split {
    opacity: 0;
    pointer-events: none;
}

.nav-region__tab-split:hover,
.nav-region__tab-split:focus-visible {
    color: var(--desk-color-text);
    background: var(--desk-color-border-subtle);
    outline: none;
}

.nav-region__tab:hover,
.nav-region__tab:focus-visible {
    color: var(--desk-color-text);
    outline: none;
}

.nav-region__tab.is-active {
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
}

.nav-region__tab.is-split-side {
    padding-right: 28px;
}

.nav-region__tab-split-mark {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--desk-color-text-muted);
    pointer-events: none;
}

.nav-region__tab-add,
.nav-region__tab-more {
    flex: 0 0 auto;
    height: 28px;
    margin-bottom: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--desk-color-text-secondary);
    cursor: pointer;
}

.nav-region__tab-add {
    width: 28px;
    padding: 0;
}

.nav-region__tab-more {
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    font-family: inherit;
    white-space: nowrap;
}

.nav-region__tab-add:hover,
.nav-region__tab-add:focus-visible,
.nav-region__tab-more:hover,
.nav-region__tab-more:focus-visible {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
    outline: none;
}

.nav-region__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 16px;
    height: 48px;
}

.nav-region__theme-toggle {
    background: transparent;
    border: none;
    color: var(--desk-color-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.nav-region__theme-toggle:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.nav-region__theme-icon--moon { display: none; }
[data-theme="dark"] .nav-region__theme-icon--sun { display: none; }
[data-theme="dark"] .nav-region__theme-icon--moon { display: inline-block; }

.nav-region__share-btn {
    background: transparent;
    border: 1px solid var(--desk-color-border-subtle);
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    font-family: var(--desk-lens-tip-font, inherit);
    padding: 4px 12px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.nav-region__share-btn:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    border-color: var(--desk-color-border);
}

.nav-region[data-nav-layout="tabs"] button.nav-region__share-btn {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    -webkit-text-fill-color: var(--desk-color-text-muted);
    line-height: 1;
}

.nav-region[data-nav-layout="tabs"] button.nav-region__share-btn:hover,
.nav-region[data-nav-layout="tabs"] button.nav-region__share-btn:focus-visible {
    color: var(--desk-color-text);
    -webkit-text-fill-color: var(--desk-color-text);
}

/* =============================================================
 * ToolRegion (8.x) — IconBar + PanelZone
 * ============================================================= */

.tool-region {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    background: var(--desk-color-bg-panel);
    z-index: 30;
    overflow: visible;
    transition: width var(--desk-transition-speed) var(--desk-transition-ease);
}

.icon-bar {
    width: 64px;
    flex: 0 0 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 12px;
    background: var(--desk-color-bg-panel);
    border-right: 1px solid var(--desk-color-border-subtle);
    position: relative;
    z-index: 2;
    overflow: visible;
}

.icon-bar__btn {
    position: relative;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 80ms ease;
    transform-origin: left center;
}

.icon-bar__btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.icon-bar__square {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    color: var(--desk-color-text-muted);
    font-size: 11px;
    font-weight: 600;
    transition: background 120ms ease, color 120ms ease;
}

.icon-bar__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: stroke 120ms ease, color 120ms ease;
}

/* 3.3 — hover bg flips ONLY when panel is closed */
.tool-region[data-panel-state="closed"] .icon-bar__btn:hover .icon-bar__square {
    background: var(--desk-color-bg-surface);
}

/* 3.4 — dark mode hover: white bg, black icon. SVG strokes inherit
 * via stroke="currentColor" so setting `color` cascades to the icon. */
[data-theme="dark"] .tool-region[data-panel-state="closed"] .icon-bar__btn:hover .icon-bar__square {
    background: #ffffff;
    color: #000000;
}

/* 4.2 — active-lens highlight when panel is open (mirrors closed-panel hover). */
.icon-bar__btn.is-active-lens .icon-bar__square {
    background: var(--desk-color-bg-surface);
}

[data-theme="dark"] .icon-bar__btn.is-active-lens .icon-bar__square {
    background: #ffffff;
    color: #000000;
}

/* 1.3 — hovering any icon while panel is open gives a solid opaque background
 * so the icon-bar__square border never bleeds onto the panel edge. */
.tool-region[data-panel-state="default"] .icon-bar__btn:hover .icon-bar__square,
.tool-region[data-panel-state="expanded"] .icon-bar__btn:hover .icon-bar__square {
    background: var(--desk-color-bg-surface);
}

[data-theme="dark"] .tool-region[data-panel-state="default"] .icon-bar__btn:hover .icon-bar__square,
[data-theme="dark"] .tool-region[data-panel-state="expanded"] .icon-bar__btn:hover .icon-bar__square {
    background: #ffffff;
    color: #000000;
}

.icon-bar__icon {
    line-height: 1;
}

.icon-bar__tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border: 1px solid var(--desk-color-border-subtle);
    box-shadow: 0 2px 6px var(--desk-color-shadow);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 75; /* spec: 20 + 55 */
    transition: opacity 120ms ease;
}

.icon-bar__btn:hover .icon-bar__tooltip {
    opacity: 1;
}

/* Persistent lens-name tips. Sibling of the button so dock magnification
 * does not scale the label. Hidden unless Customize → Lens names is On,
 * the left gutter is wide enough, the panel is closed, and overlay
 * mode is off. Typing sets data-lens-tips-busy and the chosen motion
 * plays the labels out; idle clears it and they return. */
.icon-bar__slot {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.icon-bar__tip {
    position: absolute;
    left: calc(100% + 18px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--desk-color-text-muted);
    font-size: 10px;
    font-weight: 500;
    font-family: var(--desk-lens-tip-font, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    z-index: 40;
    text-shadow:
        0 0 8px var(--desk-color-bg-surface),
        0 0 8px var(--desk-color-bg-surface);
    filter: blur(0);
    transition: none;
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__tip {
    opacity: 1;
    transition:
        opacity 420ms ease,
        transform 420ms ease,
        filter 420ms ease,
        letter-spacing 420ms ease;
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(1) .icon-bar__tip { transition-delay: 0ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(2) .icon-bar__tip { transition-delay: 40ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(3) .icon-bar__tip { transition-delay: 80ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(4) .icon-bar__tip { transition-delay: 120ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(5) .icon-bar__tip { transition-delay: 160ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(6) .icon-bar__tip { transition-delay: 200ms; }
.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__slot:nth-child(7) .icon-bar__tip { transition-delay: 240ms; }

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]):not([data-lens-tips-busy="true"]) .icon-bar__tooltip {
    display: none;
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"])[data-lens-tips-busy="true"][data-lens-tip-motion="fade"] .icon-bar__tip {
    opacity: 0;
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"])[data-lens-tips-busy="true"][data-lens-tip-motion="slide"] .icon-bar__tip {
    opacity: 0;
    transform: translate(-18px, -50%);
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"])[data-lens-tips-busy="true"][data-lens-tip-motion="rise"] .icon-bar__tip {
    opacity: 0;
    transform: translateY(calc(-50% - 12px));
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"])[data-lens-tips-busy="true"][data-lens-tip-motion="blur"] .icon-bar__tip {
    opacity: 0;
    filter: blur(8px);
}

.tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"])[data-lens-tips-busy="true"][data-lens-tip-motion="scale"] .icon-bar__tip {
    opacity: 0;
    transform: translateY(-50%) scale(0.55);
    transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
    .tool-region[data-lens-tips="on"][data-lens-tips-room="true"][data-panel-state="closed"]:not([data-overlay-mode="true"]) .icon-bar__tip {
        transition: opacity 120ms linear;
        filter: none;
        transform: translateY(-50%);
    }
}

/* PanelZone — width-driven state machine, 300ms cubic-bezier transition. */
.panel-zone {
    height: 100%;
    background: var(--desk-color-bg-panel);
    overflow: hidden;
    transition: width var(--desk-transition-speed) var(--desk-transition-ease);
    position: relative;
    z-index: 1;
}

.tool-region[data-panel-state="closed"] .panel-zone,
.panel-zone[data-panel-state="closed"] {
    width: 0;
}

.tool-region[data-panel-state="default"] .panel-zone,
.panel-zone[data-panel-state="default"] {
    width: var(--lens-panel-width, 324px);
}

.tool-region[data-panel-state="expanded"] .panel-zone,
.panel-zone[data-panel-state="expanded"] {
    width: min(50vw, 560px);
}

/* 1.4 — when panel is open (default or expanded), separator from ContentRegion */
.tool-region[data-panel-state="default"] .panel-zone,
.tool-region[data-panel-state="expanded"] .panel-zone {
    border-right: 1px solid var(--desk-color-border-subtle);
}

/* Overlay mode (8.5) — shrink ProsePane width <280px collapses panel. */
.tool-region[data-overlay-mode="true"] {
    position: absolute;
    z-index: 50;
}

.tool-region[data-overlay-mode="true"]::before {
    content: "";
    position: fixed;
    inset: 0 0 0 64px;
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
    pointer-events: none;
}

/* =============================================================
 * ContentRegion (9.x) — ActionBar + ScrollContainer + StatusBar
 * ============================================================= */

.content-region {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--desk-color-bg-surface);
    --desk-body-font-family: Baskerville, "Libre Baskerville", Georgia, serif;
    --desk-title-font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    --desk-body-font-weight: 400;
    --desk-title-font-weight: 700;
    --desk-body-line-height: 1.6em;
    --desk-para-gap: 1.2em;
    --desk-body-font-size: 16px;
}

.action-bar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 40px;
    flex: 0 0 40px;
    background: var(--desk-color-bg-surface);
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

/* 0002 Loop 4 TG6.1 — ActionBar columns track layout zones in real time
 * via JS (position.js::positionActionBarColumns). CSS sets only the
 * common base (no flex; widths come from JS). */
.action-col {
    flex: 0 0 auto;  /* widths set inline by JS */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 0002 Loop 5 TG2.1 — ColB anchors its child snap-3 to the left so the
 * formatting buttons sit at ProsePane's left edge (with snap-3's own
 * padding-left: 24px providing the inset). The base .action-col rule
 * sets justify-content: center for the other cols. */
.action-col--b {
    justify-content: flex-start;
}

.action-snap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--desk-color-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
    border-radius: 4px;
    cursor: pointer;
}

.action-btn.is-disabled,
.action-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 0005 Loop 2 task 1.2 — reader-mode replacement for the formatting snap.
 * Lives in ColB (action-col--b) when is_reader=True so the ActionBar
 * height/baseline matches the owner view exactly (no layout shift).
 *
 * 0005 Loop 6 task 1.2 — bump padding-left from 8px → 24px so the message
 * text starts at the same horizontal position as ProsePane's text edge
 * (which has padding: 24px on .prose-pane). Aligning these two left edges
 * was admin's request: "shift right so it's aligned with the left edge of
 * the ProsePane below it." Right padding stays at 8px so the message can
 * still ellipsis-trail in narrow viewports.
 *
 * 0005 Loop 7 task 1.1 — switch from `display: flex; align-items: center;`
 * to `display: block; line-height: 40px;`. In a flex container, text
 * fragments interspersed with inline elements (`<strong>`) become separate
 * flex items, and the browser layout engine normalises (collapses) the
 * inter-item whitespace — so the visible rendering of "by <strong>Michael
 * Dean</strong>." comes out as "byMichael Dean." even though the HTML
 * source preserves the spaces (Loop 6's source-grep tests verify the
 * source). Block layout keeps the inline text + <strong> sequence as a
 * single inline-formatting context, where whitespace between siblings is
 * preserved. `line-height: 40px` matches `height: 40px` to keep single-
 * line text vertically centred without flex. */
.actionbar__reader-message {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 8px 0 24px;
    color: var(--desk-color-text-muted);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--desk-color-bg-surface);
    min-height: 0;
    /* 0002 Loop 7 TG2.1 — reserve scrollbar gutter so ProsePane + ActionBar
     * don't shift left when overflow content appears. */
    scrollbar-gutter: stable;
}

.text-zone {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100%;
    background: var(--desk-color-bg-surface);
}

.gutter {
    flex: 1;
    min-width: 0;
}

/* 1.3 — extend MarginPane color through right gutter */
.gutter--r {
    background: var(--desk-color-bg-surface);
}

.prose-pane {
    max-width: 720px;
    /* 0002 Loop 9 TG4.1 — flex-shrink: 1 (was 0) so ProsePane shrinks below
     * its 720px max-width when MarginPane (72 or 288) plus gutters wouldn't
     * otherwise fit. Without this, ProsePane held 720px at any viewport and
     * pushed MarginPane off the right edge between ~935 and ~1076px,
     * visually hiding it. With flex-shrink:1, ProsePane caps at 720 when
     * there's room and gracefully shrinks when there isn't — MarginPane
     * stays visible at every viewport in both modes. */
    flex-shrink: 1;
    width: 100%;
    /* 0002 Loop 2 — tighten top gap between ActionBar and title (32px → 16px)
     * 0002 Loop 4 TG3.3 — bump symmetric padding 16 → 24 per admin. */
    padding: 24px;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
}

.editor-mount {
    min-height: 200px;
}

.margin-pane {
    width: 288px;
    flex-shrink: 0;
    overflow: visible;
    background: var(--desk-color-bg-surface);
    border-left: 1px solid var(--desk-color-border-subtle);
    transition: width var(--desk-transition-speed) var(--desk-transition-ease);
}

/* 0002 Loop 8 TG4.1 — manual data-margin-mode toggle drives pane width on
 * wide viewports too. Base 288 / media-query 72 alone would leave the
 * toggle button inert above 850px. These two rules outweigh both via
 * higher specificity. */
[data-margin-mode="expanded"] .margin-pane {
    width: 288px;
}
[data-margin-mode="compressed"] .margin-pane {
    width: 72px;
}

/* 0002 Loop 8 TG1.2 — AllComments is the inner region of MarginPane,
 * derived from MarginPane width minus 12px horizontal padding on each
 * side: 264px wide expanded, 48px wide compressed. The 12px pane padding
 * + 6px card padding = 18px stable icon offset from MarginPane's left
 * edge in both modes. */
.all-comments {
    position: relative;
    padding: 12px;
}

/* StatusBar — absolute, transparent. */
.status-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 0;
    pointer-events: none;
    z-index: 10;
    background: transparent;
}

/* 0002 Loop 2 — StatusPill rebuild: single font, black text, more padding,
 * X-close button + collapse animation.
 * 0002 Loop 3 TG5.3 — stronger box-shadow (two-layer ambient + contact).
 * 0002 Loop 3 TG5.2 — collapse transform now driven inline by JS so the
 * pill morphs into the ball position rather than sliding off-screen.
 * 0002 Loop 6 TG1.1 — 2-stage morph per admin spec. Pill animates
 * scale(1)→scale(0) + slides left in 200ms; once pill scale = 0, JS
 * toggles the ball's data-show="true" so the ball animates scale(0)→
 * scale(1) in 150ms. Total morph 350ms (within admin's 250–500ms band).
 * Ball position is FIXED (set by JS once); only its scale animates. */
.status-pill {
    position: absolute;
    bottom: 0;
    /* JS sets `left:` and `transform: translateX(-50%)`. */
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);  /* black, was --desk-color-text-secondary */
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 999px;
    padding: 6px 16px;  /* was 2px 10px — admin asked for more padding all sides */
    font-size: 12px;
    font-family: inherit;  /* one consistent font across the pill */
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 12px var(--desk-color-shadow), 0 1px 3px var(--desk-color-shadow);
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform-origin: center center;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, box-shadow 200ms ease;
}

.status-pill[data-collapsed="true"] {
    /* JS sets the inline transform to translateX(-50%) translateX(dx) scale(0)
     * so the pill morphs into the StatusBall's position while shrinking. CSS
     * only contributes pointer-events here — the actual transform/opacity
     * are inline. */
    pointer-events: none;
}

.status-pill__close {
    background: transparent;
    border: none;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    margin-right: 4px;
    font-family: inherit;
}
.status-pill__close:hover {
    color: var(--desk-color-text);
}

/* 0002 Loop 4 TG8.1 + 8.2 — Ball is now a same-height-as-pill perfect
 * circle whose width/height come from JS (matched to pillEl.offsetHeight)
 * so the morph from pill → ball lands at consistent vertical size. The
 * ball itself is a <button> housing a right-pointing chevron SVG; clicking
 * it triggers restore(), replacing Loop-3's separate pill X close + ball
 * click-anywhere pattern with a single morphing control. */
/* 0002 Loop 5 TG1.1 — `:not([hidden])` selector lets the HTML `hidden`
 * attribute resolve to UA-default `display: none` on page load. Loop-4's
 * unconditional `.status-ball { display: inline-flex }` overrode the UA
 * default and made the ball visible before the pill was ever closed.
 *
 * 0002 Loop 6 TG1.1 — 2-stage morph: ball position is FIXED (JS sets
 * left/width/height once on collapse). Ball defaults to transform: scale(0)
 * and only scales to 1 when JS toggles data-show="true" on it after the
 * pill's scale-out finishes. transform-origin: center center so the scale
 * pivots around the ball's geometric center. */
.status-ball:not([hidden]) {
    position: absolute;
    /* JS sets `left:`, `width:`, `height:` (ball diameter = pill height). */
    bottom: 0;
    border-radius: 50%;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    color: var(--desk-color-text-muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px var(--desk-color-shadow);
    pointer-events: auto;
    transform: scale(0);
    transform-origin: center center;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms ease;
}
.status-ball[data-show="true"] {
    transform: scale(1);
}
.status-ball svg {
    width: 14px;
    height: 14px;
    display: block;
}
.status-ball[data-show="true"]:hover {
    transform: scale(1.05);
    color: var(--desk-color-text);
}

/* Responsive (9.5)
 *
 * 0002 Loop 9 TG4.1 — auto-compress breakpoint moved 850 → 935. Below 935
 * the row of fixed-width MarginPane (288) + gutters + a 720px ProsePane
 * starts visibly squeezing; auto-collapsing the pane to 72px restores
 * comfortable ProsePane width. Above 935 the layout breathes naturally.
 *
 * The earlier `@media (max-width: 1076px) { .prose-pane { max-width: none } }`
 * rule was REMOVED. With .prose-pane { flex-shrink: 1 } above, ProsePane
 * already shrinks below 720px when needed, so dropping max-width is
 * unnecessary. (And keeping the rule was the root cause of the
 * "MarginPane disappears around 1076" bug — it made ProsePane hog 100%
 * of available width while flex-shrink: 0 prevented it from yielding any
 * space, pushing MarginPane off the right edge.)
 *
 * Gutter compression to 4px is moved under the same 935 breakpoint as
 * the pane compression, so wide-viewport behavior (gutters absorb extra
 * space) is preserved between 935 and 1076.
 */
@media (max-width: 935px) {
    .margin-pane {
        width: 72px;
    }
    .gutter {
        flex: 0 0 4px;
    }
    /* 0002 Loop 4 TG6.1 — ActionCol--c width is JS-driven from
     * MarginPane's bounding rect, so it tracks this 72px compression
     * automatically. No CSS rule needed here.
     * 0002 Loop 8 TG1.2 — narrow-viewport auto-compress matches the manual
     * data-margin-mode="compressed" width (72px) so both produce the same
     * 18px stable icon anchor. */
}

/* 1.5 — narrow-viewport defensive hide of NavMenu */
@media (max-width: 539px) {
    .nav-region__menu {
        display: none;
    }
}

@media (max-width: 539px) {
    .nav-region[data-nav-layout="tabs"] .nav-region__tabs-list,
    .nav-region[data-nav-layout="tabs"] .nav-region__tab-add,
    .nav-region[data-nav-layout="tabs"] .nav-region__tab-more {
        display: none;
    }
}

/* 0005 Loop 2 — narrow-viewport reader message + essay-private polish */
@media (max-width: 539px) {
    .actionbar__reader-message {
        font-size: 12px;
        padding: 0 6px;
    }
}

/* =============================================================
 * Modal system (10.x) — opacity + scale transitions
 * ============================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--desk-color-bg-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-dialog {
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 32px var(--desk-color-shadow);
    max-width: 480px;
    width: calc(100% - 48px);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 28px 32px;
    transform: scale(0.96);
    transition: transform var(--desk-transition-speed) var(--desk-transition-ease);
    position: relative;
}

.modal-overlay.is-open:has(.display-menu) {
    background: transparent;
}

.modal-dialog:has(.display-menu) {
    max-width: min(800px, calc(100vw - 48px));
    width: calc(100% - 48px);
    height: min(680px, calc(100vh - 96px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    box-shadow: 0 8px 32px var(--desk-color-shadow),
                0 0 0 100vmax var(--desk-color-bg-modal);
}

.modal-dialog:has(.display-menu)[data-style-editing="true"] {
    overflow: visible;
}

.modal-dialog:has(.display-menu) .modal-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: transparent;
}

.modal-dialog:has(.display-menu) .display-menu__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 56px 0 28px;
    background: var(--desk-color-bg-surface);
}

.modal-dialog:has(.display-menu) .display-menu__header h2 {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: transparent;
}

.modal-dialog:has(.display-menu) .modal-close {
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.display-menu__dock {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.display-menu__dock-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--desk-color-text-muted);
    cursor: pointer;
}

.display-menu__dock-btn:hover,
.display-menu__dock-btn:focus-visible {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.display-menu__dock-btn[aria-pressed="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    box-shadow: inset 0 0 0 1px var(--desk-color-border);
}

.modal-overlay.is-open:has(.display-menu)[data-display-position="left"] {
    justify-content: flex-start;
    padding-left: 32px;
}

.modal-overlay.is-open:has(.display-menu)[data-display-position="right"] {
    justify-content: flex-end;
    padding-right: 32px;
}

.modal-overlay.is-open .modal-dialog {
    transform: scale(1.0);
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--desk-color-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.modal-close:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.modal-content h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: var(--desk-color-text);
}

.modal-coming-soon {
    color: var(--desk-color-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* Customize modal — sidebar groups + scrollable setting cards */
.display-menu {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.display-menu__nav {
    flex: 0 0 188px;
    width: 188px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px 20px 18px;
    border-right: 1px solid var(--desk-color-border-subtle);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--desk-color-bg-surface);
}

.display-menu__groups {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.display-menu__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text-secondary);
    cursor: pointer;
}

.display-menu__nav-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

.display-menu__nav-item:hover,
.display-menu__nav-item:focus-visible {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.display-menu__nav-item.is-active {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.display-menu__styles {
    padding-top: 16px;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.display-menu__styles-heading,
.display-menu__card-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    margin: 0 0 8px;
    line-height: 1;
}

.display-menu__block + .display-menu__block {
    margin-top: 16px;
}

.display-menu__card-title {
    margin: 0 0 6px 2px;
}

.display-menu__style-add {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px dashed var(--desk-color-border-subtle);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--desk-color-text-secondary);
    cursor: pointer;
    margin-bottom: 8px;
}

.display-menu__style-add:hover,
.display-menu__style-add:focus-visible {
    color: var(--desk-color-text);
    border-color: var(--desk-color-border);
    background: var(--desk-color-bg-elevated);
}

.display-menu__style-add:disabled {
    opacity: 0.45;
    cursor: default;
}

.display-menu__style-add[hidden] {
    display: none;
}

.display-menu__archive-toggle {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--desk-color-text-muted);
    font-size: 11px;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.display-menu__archive-toggle:hover,
.display-menu__archive-toggle:focus-visible {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.display-menu__archive-toggle[hidden] {
    display: none;
}

.display-menu__style-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.display-menu__style-form[hidden] {
    display: none;
}

.display-menu__style .display-menu__style-input {
    flex: 1 1 auto;
    min-width: 0;
}

.display-menu__style-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--desk-color-border);
    border-radius: 4px;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    font-size: 13px;
    font-family: inherit;
}

.display-menu__style-form-actions {
    display: flex;
    gap: 6px;
}

.display-menu__style-form-save,
.display-menu__style-form-cancel,
.display-menu__edit-cancel,
.display-menu__edit-save {
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.display-menu__style-form-save,
.display-menu__edit-save {
    color: var(--desk-color-text);
}

.display-menu__style-form-save:hover,
.display-menu__style-form-cancel:hover,
.display-menu__edit-cancel:hover,
.display-menu__edit-save:hover {
    color: var(--desk-color-text);
}

.display-menu__style-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.display-menu__style {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    height: 32px;
    box-sizing: border-box;
    padding: 0 2px 0 4px;
    border-radius: 6px;
    cursor: default;
    position: relative;
}

.display-menu[data-rearranging="true"] .display-menu__style {
    cursor: grab;
    user-select: none;
}

.display-menu__style.is-dragging {
    opacity: 0.4;
}

.display-menu__style.is-drop-before::before,
.display-menu__style.is-drop-after::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--desk-color-text);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
}

.display-menu__style.is-drop-before::before {
    top: -2px;
}

.display-menu__style.is-drop-after::after {
    bottom: -2px;
}

.display-menu__style.is-active,
.display-menu__style.is-editing {
    background: var(--desk-color-bg-elevated);
}

.display-menu__style.is-archived .display-menu__style-name {
    color: var(--desk-color-text-muted);
}

.display-menu__style-num.is-blank {
    border-color: transparent;
    background: transparent;
    color: transparent;
    cursor: default;
}

.display-menu__style-num {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--desk-color-border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--desk-color-text-muted);
    cursor: grab;
}

.display-menu__style.is-dragging .display-menu__style-num {
    cursor: grabbing;
}

.display-menu__style.is-active .display-menu__style-num,
.display-menu__style.is-editing .display-menu__style-num {
    border-color: var(--desk-color-border);
    color: var(--desk-color-text);
}

.display-menu__style-name {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    line-height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.display-menu[data-rearranging="true"] .display-menu__style-name {
    cursor: grab;
}

.display-menu[data-rearranging="true"] .display-menu__style-more {
    opacity: 0;
    pointer-events: none;
}

.display-menu__style-menu {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
}

.display-menu__style-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    opacity: 0;
}

.display-menu__style:hover .display-menu__style-more,
.display-menu__style:focus-within .display-menu__style-more,
.display-menu__style.is-menu-open .display-menu__style-more,
.display-menu__style.is-editing .display-menu__style-more {
    opacity: 1;
}

@media (hover: none) {
    .display-menu__style-more {
        opacity: 1;
    }
}

.display-menu__style-more:hover,
.display-menu__style-more[aria-expanded="true"] {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-surface);
}

.display-menu__style-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 8;
    min-width: 112px;
    padding: 4px 0;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    box-shadow: 0 6px 16px var(--desk-color-shadow);
}

.display-menu__style-dropdown[hidden] {
    display: none;
}

.display-menu__style-action {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
    white-space: nowrap;
}

.display-menu__style-action:hover,
.display-menu__style-action:focus-visible {
    background: var(--desk-color-bg-elevated);
}

.display-menu__main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px 28px 84px;
    background: color-mix(in srgb, var(--desk-color-bg-surface) 95%, transparent);
}

[data-theme="dark"] .display-menu__nav,
[data-theme="dark"] .display-menu__main {
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: var(--desk-color-text-muted) var(--desk-color-bg);
}

[data-theme="dark"] .display-menu__nav::-webkit-scrollbar,
[data-theme="dark"] .display-menu__main::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] .display-menu__nav::-webkit-scrollbar-track,
[data-theme="dark"] .display-menu__main::-webkit-scrollbar-track {
    background: var(--desk-color-bg);
}

[data-theme="dark"] .display-menu__nav::-webkit-scrollbar-thumb,
[data-theme="dark"] .display-menu__main::-webkit-scrollbar-thumb {
    background: var(--desk-color-text-muted);
    border-radius: 4px;
}

[data-theme="dark"] .display-menu__nav::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .display-menu__main::-webkit-scrollbar-thumb:hover {
    background: var(--desk-color-text-secondary);
}

.display-menu__group {
    scroll-margin-top: 12px;
}

.display-menu__group + .display-menu__group {
    margin-top: 32px;
}

.display-menu__group:last-child {
    margin-bottom: 0;
}

.display-menu__group-title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--desk-color-text);
}

.display-menu__card {
    background: var(--desk-color-bg);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 8px;
    padding: 4px 16px;
    min-width: 0;
}

.display-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}

.display-menu__card .display-menu__row + .display-menu__row {
    border-top: 1px solid var(--desk-color-border-subtle);
}

.display-menu__edit-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 10px 28px;
    border-top: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-surface);
}

.display-menu__edit-bar[hidden] {
    display: none;
}

.display-menu__edit-copy {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--desk-color-text-secondary);
}

.display-menu__edit-copy strong {
    color: var(--desk-color-text);
    font-weight: 600;
}

.display-menu__edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.display-menu__edit-save {
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--desk-color-button);
    border: 1px solid var(--desk-color-button);
    color: #fff;
}

.display-menu__edit-save:hover,
.display-menu__edit-save:focus-visible {
    color: #fff;
    filter: brightness(1.06);
}

.modal-dialog:has(.display-menu)[data-style-editing="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--desk-color-accent);
    border-radius: inherit;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--desk-color-accent) 40%, transparent);
    animation: display-edit-ring 2.4s ease-in-out infinite;
}

.modal-dialog:has(.display-menu)[data-style-editing="true"] .display-menu__edit-save,
.modal-dialog:has(.display-menu)[data-style-rearranging="true"] .display-menu__edit-save {
    animation: display-edit-save-pulse 2.4s ease-in-out infinite;
}

@keyframes display-edit-ring {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--desk-color-accent) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--desk-color-accent) 28%, transparent);
    }
}

@keyframes display-edit-save-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--desk-color-button) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--desk-color-button) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog:has(.display-menu)[data-style-editing="true"]::after,
    .modal-dialog:has(.display-menu)[data-style-editing="true"] .display-menu__edit-save,
    .modal-dialog:has(.display-menu)[data-style-rearranging="true"] .display-menu__edit-save {
        animation: none;
    }
}

.display-menu__label {
    font-size: 14px;
    color: var(--desk-color-text-secondary);
    flex-shrink: 0;
}

.display-menu__toggle-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.display-menu__font-pick {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.display-menu__row--sub .display-menu__label {
    font-size: 12px;
}

.display-menu__toggle-btn {
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 4px;
    background: transparent;
    color: var(--desk-color-text-secondary);
    cursor: pointer;
    transition: background var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.display-menu__toggle-btn:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.display-menu__toggle-btn[aria-pressed="true"] {
    background: var(--desk-color-bg-elevated);
    border-color: var(--desk-color-border);
    color: var(--desk-color-text);
}

.display-menu__toggle-btn--face {
    font-size: 13px;
    line-height: 18px;
    height: 26px;
    box-sizing: border-box;
}

.display-menu__toggle-btn--classic { font-family: Baskerville, "Libre Baskerville", Georgia, serif; }
.display-menu__toggle-btn--georgia { font-family: Georgia, "Times New Roman", Times, serif; }
.display-menu__toggle-btn--garamond { font-family: "EB Garamond", Garamond, Georgia, serif; }
.display-menu__toggle-btn--newsreader { font-family: "Newsreader", Georgia, serif; }
.display-menu__toggle-btn--plex { font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
.display-menu__toggle-btn--title-sans { font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
.display-menu__toggle-btn--title-serif { font-family: Baskerville, "Libre Baskerville", Georgia, serif; }
.display-menu__toggle-btn--title-playfair { font-family: "Playfair Display", Georgia, serif; }
.display-menu__toggle-btn--title-fraunces { font-family: "Fraunces", Georgia, serif; }
.display-menu__toggle-btn--title-newsreader { font-family: "Newsreader", Georgia, serif; }
.display-menu__toggle-btn--tip-sans { font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
.display-menu__toggle-btn--tip-plex { font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
.display-menu__toggle-btn--tip-classic { font-family: Baskerville, "Libre Baskerville", Georgia, serif; }
.display-menu__toggle-btn--tip-newsreader { font-family: "Newsreader", Georgia, serif; }
.display-menu__toggle-btn--tip-playfair { font-family: "Playfair Display", Georgia, serif; }

.display-menu__slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.display-menu__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    background: var(--desk-color-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.display-menu__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--desk-color-text);
    border: none;
    cursor: pointer;
}

.display-menu__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--desk-color-text);
    border: none;
    cursor: pointer;
}

.display-menu__slider-value {
    font-size: 13px;
    color: var(--desk-color-text-secondary);
    min-width: 3ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Inline slash-command pill (`//size:16//`).
 * Shrink-wrap to content — inline-flex was stretching the pill to the
 * remaining line width and parking the caret at the far right.
 * Wrap long prompts; clone the chrome onto each line fragment. */
.slash-command-pill {
    display: inline;
    padding: 1px 8px 2px 6px;
    margin: 0 1px;
    border: 1px solid var(--desk-color-border);
    border-radius: 999px;
    background: var(--desk-color-bg-elevated);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.slash-command-pill__prefix {
    color: var(--desk-color-text-muted);
    margin-right: 4px;
    user-select: none;
}

.slash-command-pill__body {
    color: #2563eb;
    min-width: 1px;
}

[data-theme="dark"] .slash-command-pill__body {
    color: #60a5fa;
}

/* Autocomplete ghost — the untyped remainder of the first matching command
 * name, rendered inline after the caret in light gray. Inert: it's a
 * ProseMirror widget decoration, never part of the document. */
.slash-command-pill__ghost {
    color: var(--desk-color-text-muted);
    pointer-events: none;
    user-select: none;
}

/* Command palette (`==`) — 5×3 letter-key grid. */
.command-palette {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: var(--desk-color-bg-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.command-palette.is-open {
    opacity: 1;
    pointer-events: auto;
}

.command-palette__dialog {
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 32px var(--desk-color-shadow);
    max-width: 680px;
    width: calc(100% - 48px);
    padding: 20px;
    transform: scale(0.96);
    transition: transform var(--desk-transition-speed) var(--desk-transition-ease);
    outline: none;
}

.command-palette.is-open .command-palette__dialog {
    transform: scale(1.0);
}

.command-palette__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 8px;
}

.command-palette__styles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.command-palette__styles[hidden] {
    display: none;
}

.command-palette__label-kicker,
.command-palette__label-name {
    display: block;
}

.command-palette__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 12px 6px;
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    color: var(--desk-color-text);
    cursor: pointer;
    font: inherit;
}

.command-palette__cell:hover,
.command-palette__cell:focus-visible {
    background: var(--desk-color-bg-surface);
    border-color: var(--desk-color-border);
    outline: none;
}

.command-palette__key {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

.command-palette__label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--desk-color-text-secondary);
    text-align: center;
}

.modal-platform-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modal-platform-links li {
    border-top: 1px solid var(--desk-color-border-subtle);
}

.modal-platform-links li:first-child {
    border-top: none;
}

.modal-platform-links a {
    display: block;
    padding: 10px 4px;
    color: var(--desk-color-text);
    text-decoration: none;
    font-size: 14px;
}

.modal-platform-links a:hover {
    color: var(--desk-color-accent);
}

.modal-platform-groups {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.modal-platform-group {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

.modal-platform-group__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    margin: 0 0 6px 4px;
}

/* ─── Out of musings ────────────────────────────────────────────────────────── */

.modal-dialog:has(.out-of-musings) {
    max-width: 360px;
}

.out-of-musings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.out-of-musings__heading {
    margin: 0;
    font-size: 22px;
}

.out-of-musings__renew {
    margin: 0;
    font-size: 14px;
    color: var(--desk-color-text-muted);
}

.out-of-musings__plans {
    margin-top: 4px;
    padding: 6px 14px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.out-of-musings__plans:hover {
    opacity: 0.9;
}

/* ─── AI modal ──────────────────────────────────────────────────────────────── */

.modal-dialog:has(.ai-modal) {
    max-width: 640px;
}

.ai-modal {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ai-modal__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px 0;
}

.ai-modal__heading {
    margin: 0;
}

.ai-modal__tabs {
    display: inline-flex;
    gap: 2px;
}

.ai-modal__tab {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    border-radius: var(--desk-radius-sm);
}

.ai-modal__tab:hover {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.ai-modal__tab[aria-selected="true"],
.ai-modal__tab--active {
    color: var(--desk-color-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--desk-color-accent);
    border-radius: 0;
    background: transparent;
}

.ai-meter__kicker {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text-muted);
}

.ai-meter__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 12px;
}

.ai-meter__summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--desk-color-text);
}

.ai-meter__reset {
    margin: 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

.ai-meter__track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--desk-color-bg-elevated);
    overflow: hidden;
}

.ai-meter__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 240ms ease;
}

.ai-meter__fill--projected {
    background: var(--desk-color-accent);
    opacity: 0.28;
}

.ai-meter__fill--used {
    background: var(--desk-color-accent);
}

.ai-meter__track.is-over .ai-meter__fill--projected {
    opacity: 0.4;
}

.ai-meter__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.ai-meter__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--desk-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ai-meter__legend strong {
    font-weight: 600;
    color: var(--desk-color-text);
}

.ai-meter__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 999px;
    vertical-align: -1px;
}

.ai-meter__swatch--used {
    background: var(--desk-color-accent);
}

.ai-meter__swatch--projected {
    background: var(--desk-color-accent);
    opacity: 0.35;
}

.ai-facts {
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.ai-facts__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
}

.ai-facts__row dt {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text-muted);
}

.ai-facts__row dd {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text);
    text-align: right;
}

.ai-model {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.ai-model__label {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--desk-color-text-muted);
}

.ai-model__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.ai-model__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ai-model__cost {
    margin: 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

.ai-model__note {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--desk-color-text-muted);
}

.ai-plans {
    margin: 0;
}

.ai-plans__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto auto;
    gap: 8px;
    align-items: stretch;
}

.ai-plans__col {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    min-width: 0;
    padding: 18px 12px 14px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-md);
}

.ai-plans__col.is-current {
    border-color: var(--desk-color-accent);
    box-shadow: inset 0 0 0 1px var(--desk-color-accent);
}

.ai-plans__badge {
    position: absolute;
    top: -9px;
    left: 12px;
    margin: 0;
    padding: 1px 7px;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-plans__name {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.ai-plans__price {
    margin: 0 0 16px;
    min-height: 52px;
}

.ai-plans__amount {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ai-plans__per {
    font-size: 13px;
    color: var(--desk-color-text-muted);
}

.ai-plans__price-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--desk-color-text-muted);
}

.ai-plans__cell {
    padding: 10px 0;
    border-top: 1px solid var(--desk-color-border-subtle);
    font-size: 13px;
    line-height: 1.4;
    color: var(--desk-color-text);
}

.ai-plans__cell--musings {
    padding-top: 12px;
}

.ai-plans__stat {
    display: block;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ai-plans__stat-label {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.ai-plans__dash {
    color: var(--desk-color-text-muted);
}

.ai-plans__cell--cta {
    min-height: 36px;
    display: flex;
    align-items: flex-end;
    border-top: none;
    padding-top: 12px;
}

.ai-plans__upgrade {
    display: inline-block;
    padding: 6px 12px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.ai-plans__upgrade:hover {
    opacity: 0.9;
    color: #ffffff;
}

.ai-plans__footnote {
    margin: 16px 0 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    text-align: center;
}

.ai-history__status {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text-secondary);
}

.ai-history__list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

.ai-history__day {
    margin: 0 0 18px;
}

.ai-history__day:last-child {
    margin-bottom: 0;
}

.ai-history__day-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
}

.ai-history__events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-history__event {
    padding: 10px 0;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.ai-history__event:first-child {
    border-top: none;
}

.ai-history__event-main,
.ai-history__event-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.ai-history__event-label {
    font-size: 14px;
    color: var(--desk-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ai-history__event-credits {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--desk-color-text);
    white-space: nowrap;
}

.ai-history__event-meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.ai-history__event-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ai-history__event-meta span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =============================================================
 * NavRegion profile dropdown (3.2)
 * ============================================================= */

.nav-region__profile {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.nav-region__profile-pic,
.nav-region__profile-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--desk-color-border-subtle);
    user-select: none;
}

.nav-region__profile-pic:hover,
.nav-region__profile-initial:hover {
    border-color: var(--desk-color-border);
}

.nav-region__profile-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 6px 20px var(--desk-color-shadow);
    padding: 6px 0;
    z-index: 150;
    display: none;
}

.nav-region__profile-dropdown.show {
    display: block;
}

.nav-region__profile-dropdown .dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--desk-color-text);
    text-decoration: none;
}

.nav-region__profile-dropdown .dropdown-item .dropdown-value {
    color: var(--desk-color-text-secondary);
    font-size: 12px;
}

.nav-region__profile-dropdown a.dropdown-item:hover,
.nav-region__profile-dropdown .dropdown-link:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-accent);
}

.nav-region__profile-dropdown .dropdown-divider {
    border-top: 1px solid var(--desk-color-border-subtle);
    margin: 6px 0;
    height: 0;
}

/* =============================================================
 * Panel stub content (4.2)
 * ============================================================= */

.panel-stub {
    padding: 16px 14px;
    color: var(--desk-color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.panel-stub__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--desk-color-text);
    margin: 0 0 6px;
}

.panel-stub__body {
    margin: 0;
}

/* =============================================================
 * Welcome page
 * ============================================================= */

.welcome-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--desk-color-bg);
}
.welcome-page__form {
    width: min(1020px, 100%);
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 32px var(--desk-color-shadow);
    padding: 32px 36px 28px;
}
.welcome-card {
    max-width: 560px;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 24px var(--desk-color-shadow);
    padding: 40px 36px;
}
.welcome-card h1 { margin: 0 0 16px; font-size: 28px; font-weight: 600; }
.welcome-card p { margin: 0 0 16px; color: var(--desk-color-text-secondary); line-height: 1.6; }
.welcome-dismiss {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}
.welcome-dismiss:hover { opacity: 0.9; }
.welcome-dismiss:focus-visible {
    outline: 2px solid var(--desk-color-accent);
    outline-offset: 2px;
}

.modal-dialog:has(.welcome-screen) {
    max-width: min(1020px, calc(100vw - 48px));
    padding: 32px 36px 28px;
    /* Grow out of / shrink into the nav logo. JS sets the origin vars to
       the logo's position; the fallback approximates the top-left corner.
       Slower than the standard modal, with a long deceleration so it
       settles gently into place (and into the icon on close). */
    --welcome-anim-duration: 650ms;
    --welcome-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: var(--welcome-origin-x, 48px) var(--welcome-origin-y, -60px);
    transform: scale(0.04);
    opacity: 0;
    transition:
        transform var(--welcome-anim-duration) var(--welcome-anim-ease),
        opacity var(--welcome-anim-duration) var(--welcome-anim-ease);
}

.modal-overlay.is-open .modal-dialog:has(.welcome-screen) {
    transform: scale(1);
    opacity: 1;
}

/* Keep the backdrop fade in step with the slower dialog animation
   (modal.js clears content on the overlay's transitionend, so this
   also delays cleanup until the shrink finishes). */
.modal-overlay:has(.welcome-screen) {
    transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .modal-dialog:has(.welcome-screen) {
        transform: scale(0.96);
        opacity: 1;
    }
}

.welcome-screen {
    --welcome-serif: "EB Garamond", var(--desk-body-font-family, Georgia, serif);
    --welcome-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-family: var(--welcome-serif);
    color: var(--desk-color-text);
}

.welcome-screen__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
}

.welcome-screen__header-copy {
    min-width: 0;
    flex: 1;
}

.welcome-screen__kicker {
    margin: 0 0 10px;
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    color: var(--desk-color-text-secondary);
    line-height: 1.3;
}

.welcome-screen__kicker strong {
    font-style: normal;
    font-weight: 600;
    color: var(--desk-color-rust);
}

.welcome-screen__headline {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    line-height: 1.15;
}

.welcome-screen__body {
    display: grid;
    grid-template-columns: 4fr 7fr;
}

.welcome-screen__menu {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--desk-color-border);
}

.welcome-screen__tab {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--desk-color-border);
    border-left: 3px solid transparent;
    padding: 15px 14px 15px 11px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 400;
    color: var(--desk-color-text);
    cursor: pointer;
    line-height: 1.25;
}

.welcome-screen__tab:last-child {
    border-bottom: none;
}

.welcome-screen__tab:hover:not(.is-selected) {
    background: color-mix(in srgb, var(--desk-color-bg-elevated) 50%, transparent);
}

.welcome-screen__tab.is-selected {
    background: var(--desk-color-bg-elevated);
    border-left-color: var(--desk-color-rust);
    color: var(--desk-color-rust);
    font-weight: 600;
}

.welcome-screen__main {
    position: relative;
    padding: 22px 0 0 30px;
}

.welcome-screen__main::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 0;
    width: 30px;
    border-top: 1px dashed var(--desk-color-text-muted);
}

.welcome-screen__card {
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border);
    padding: 18px 26px 24px;
}

.welcome-screen__card.is-fading {
    opacity: 0;
}

.welcome-screen__card.is-entering {
    opacity: 1;
    transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .welcome-screen__card.is-fading,
    .welcome-screen__card.is-entering {
        opacity: 1;
        transition: none;
    }
}

.welcome-screen__feature[hidden] {
    display: none;
}

.welcome-screen h2.welcome-screen__subtitle {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.6vw, 28px);
    font-weight: 500;
    line-height: 1.2;
}

.welcome-screen__copy {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}

.welcome-screen__gallery {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 16px;
    overflow: visible;
}

.welcome-screen__vignette {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    min-width: 0;
}

.welcome-screen__vignette:hover,
.welcome-screen__vignette:focus-within {
    z-index: 4;
}

.welcome-screen__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f1ea;
    border: 1px solid color-mix(in srgb, var(--desk-color-rust) 78%, #1a120e);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 6px 16px rgba(26, 26, 26, 0.08);
}

.welcome-screen__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.welcome-screen__vignette figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 0;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    color: var(--desk-color-text);
}

.welcome-screen__label {
    text-wrap: balance;
}

.welcome-screen__info {
    position: relative;
    flex: 0 0 auto;
    margin-top: 1px;
}

.welcome-screen__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--desk-color-border);
    border-radius: 50%;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-style: italic;
    line-height: 1;
    color: var(--desk-color-text-muted);
    cursor: help;
}

.welcome-screen__vignette figcaption:hover .welcome-screen__hint,
.welcome-screen__hint:focus-visible {
    border-color: var(--desk-color-rust);
    color: var(--desk-color-rust);
}

.welcome-screen__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 30;
    width: min(320px, 74vw);
    padding: 22px 24px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    box-shadow: 0 8px 24px var(--desk-color-shadow);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
}

.welcome-screen__vignette:nth-child(4n + 1) .welcome-screen__tooltip {
    left: 0;
    transform: none;
}

.welcome-screen__vignette:nth-child(4n) .welcome-screen__tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* Hover anywhere on the caption (text or ? icon) — or keyboard-focus the
   hint — to reveal the tooltip. Clicking is not required (and does nothing). */
.welcome-screen__vignette figcaption:hover .welcome-screen__tooltip,
.welcome-screen__info:focus-within .welcome-screen__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.welcome-screen__tooltip strong {
    display: block;
    margin: 0 0 10px;
    font-size: 22px; /* 15px + 50% */
    font-weight: 600;
    line-height: 1.25;
}

.welcome-screen__tooltip span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--desk-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .welcome-screen__tooltip {
        transition: none;
    }
}

.welcome-screen[data-welcome-layout="classic"] .welcome-screen__body {
    border-top: 1px solid var(--desk-color-border);
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__header {
    margin-bottom: 28px;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__body {
    grid-template-columns: 1fr;
    border-top: none;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__menu,
.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__card {
    display: none;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__gallery {
    display: grid;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__main {
    padding: 8px 0 0;
    overflow: visible;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__main::before {
    display: none;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__plan {
    max-width: none;
    gap: 1px; /* two tight rows */
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__plan-meta {
    display: none;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__plan-link {
    color: var(--desk-color-rust);
    text-decoration: none;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__plan-link:hover,
.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__plan-link:focus-visible {
    text-decoration: underline;
}

.welcome-screen[data-welcome-layout="gallery"] .welcome-screen__actions {
    align-items: flex-end;
}

.welcome-screen[data-welcome-layout="classic"] .welcome-screen__gallery {
    display: none;
}

.welcome-screen[data-welcome-layout="classic"] .welcome-screen__bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 24px;
    row-gap: 12px;
}

.welcome-screen[data-welcome-layout="classic"] .welcome-screen__plan {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.welcome-screen[data-welcome-layout="classic"] .welcome-screen__actions {
    grid-column: 2;
    grid-row: 1;
}

.welcome-screen__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
}

.welcome-screen__plan {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    max-width: 20em;
    font-family: var(--welcome-mono);
    font-size: 12px;
    line-height: 1.45;
    color: var(--desk-color-text-muted);
}

.welcome-screen__plan p {
    margin: 0;
}

.welcome-screen__plan-sub {
    line-height: 1.3;
}

.welcome-screen__plan-name {
    color: var(--desk-color-text); /* not a link — keep it ink-black */
    font-weight: 600;
}

.welcome-screen__plan strong {
    color: var(--desk-color-text-secondary);
    font-weight: 700;
}

.welcome-screen__plan-link {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--desk-color-link);
    cursor: pointer;
    text-decoration: underline;
}

.welcome-screen__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.welcome-screen__buttons {
    display: flex;
    gap: 12px;
}

.welcome-screen__btn {
    padding: 8px 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
}

.welcome-screen__btn--primary {
    background: var(--desk-color-accent);
    color: #fff;
    border: 1px solid var(--desk-color-accent);
}

.welcome-screen__btn--secondary {
    background: transparent;
    color: var(--desk-color-text);
    border: 1px solid var(--desk-color-border);
}

.welcome-screen__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .welcome-page__form,
    .modal-dialog:has(.welcome-screen) {
        padding: 24px 18px 20px;
    }

    .welcome-screen__headline br {
        display: none;
    }

    .welcome-screen__header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
    }

    .welcome-screen__body {
        grid-template-columns: 1fr;
    }

    .welcome-screen__menu {
        border-right: none;
        border-bottom: 1px solid var(--desk-color-border);
    }

    .welcome-screen__main {
        padding: 18px 0 0;
    }

    .welcome-screen__main::before {
        display: none;
    }

    .welcome-screen__gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-screen__vignette:nth-child(2n + 1) .welcome-screen__tooltip {
        left: 0;
        right: auto;
        transform: none;
    }

    .welcome-screen__vignette:nth-child(2n) .welcome-screen__tooltip {
        left: auto;
        right: 0;
        transform: none;
    }

    .welcome-screen__bar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 16px;
    }

    .welcome-screen[data-welcome-layout="gallery"] .welcome-screen__bar,
    .welcome-screen[data-welcome-layout="classic"] .welcome-screen__bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .welcome-screen[data-welcome-layout="gallery"] .welcome-screen__actions {
        align-items: stretch;
    }

    .welcome-screen__plan {
        max-width: none;
    }
}

/* =============================================================
 * Essay private landing (0005 Loop 2 task 5.1)
 * Friendly message shown when a logged-in non-owner hits a private
 * essay slug — instead of a hard 404, the reader sees a centered
 * card explaining the author has revoked access.
 * ============================================================= */

.essay-private {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--desk-color-bg);
}
.essay-private__card {
    max-width: 560px;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 24px var(--desk-color-shadow);
    padding: 24px 36px;
    text-align: center;
}
.essay-private__heading {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 600;
}
.essay-private__body {
    margin: 0 0 16px;
    color: var(--desk-color-text-secondary);
    line-height: 1.6;
}
.essay-private__back-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 20px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}
.essay-private__back-btn:hover { opacity: 0.9; }
.essay-private__back-btn:focus-visible {
    outline: 2px solid var(--desk-color-accent);
    outline-offset: 2px;
}

@media (max-width: 539px) {
    .essay-private {
        padding: 16px;
    }
    .essay-private__card {
        padding: 24px 20px;
    }
    .essay-private__heading {
        font-size: 22px;
    }
}

/* =============================================================
 * Public landing page
 * ============================================================= */

.landing-page {
    min-height: 100vh;
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.landing-page__logo { width: 56px; height: 56px; margin-bottom: 24px; border-radius: 4px; }
.landing-page__title { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.landing-page__tagline { color: var(--desk-color-text-secondary); margin: 0; }
.landing-modal-cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    background: var(--desk-color-accent);
    color: var(--desk-color-bg-surface);
    text-decoration: none;
    border-radius: var(--desk-radius-sm);
    font-weight: 500;
}

/* =============================================================
 * Allauth socialaccount confirmation page
 * Used by mysite/templates/socialaccount/login.html.
 * ============================================================= */

.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
}
.auth-card {
    max-width: 420px;
    width: 100%;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-md);
    box-shadow: 0 8px 24px var(--desk-color-shadow);
    padding: 40px 36px;
    text-align: center;
}
.auth-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 600;
}
.auth-body {
    margin: 0 0 24px;
    color: var(--desk-color-text-secondary);
}
.auth-submit {
    display: inline-block;
    padding: 12px 28px;
    background: var(--desk-color-text);
    color: var(--desk-color-bg-surface);
    border: none;
    border-radius: var(--desk-radius-sm);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.auth-submit:hover { opacity: 0.9; }

/* =============================================================
 * Anonymous /desk/ auth modal (5.x)
 * Gray backdrop, 3 actions, no close button.
 * ============================================================= */

.auth-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.auth-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.auth-modal-btn:hover {
    background: var(--desk-color-bg-surface);
    border-color: var(--desk-color-border);
}

.auth-modal-btn__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.auth-modal-btn--secondary {
    background: transparent;
    border: none;
    color: var(--desk-color-text-secondary);
    font-size: 13px;
    padding: 6px;
    text-align: center;
}

.auth-modal-btn--secondary:hover {
    background: transparent;
    color: var(--desk-color-text);
}

.auth-modal-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.auth-modal-tagline {
    margin: 0 0 12px;
    color: var(--desk-color-text-secondary);
    text-align: center;
    font-size: 14px;
}

/* 0002 Loop 2 — ActionBar formatting buttons (snap-3): smaller buttons,
 * gray icons, group dividers, ProsePane-aligned left edge, and a stronger
 * active-state contrast bump per admin Loop-1 review.
 *
 * TG7.5 alignment: ProsePane sits inside .text-zone after .gutter--l (which
 * has flex:1, min-width:0). Anchoring snap-3 to the same horizontal position
 * dynamically would require JS; instead we use the same `max-width: 720px`
 * + `margin-left: auto` trick mirrored on .action-col--b/.action-snap--3
 * by giving snap-3 a `padding-left` that matches ProsePane's content inset
 * (16px) and relying on .action-col--a flex:1 to push the snap right. To
 * make the B button's left edge align with ProsePane's content, we set
 * `padding-left: 16px` on the snap (matching .prose-pane padding) so the
 * button cluster starts where prose text starts. Button padding (0 6px)
 * provides the small inset admin asked for. */
.action-snap--3 {
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 0;
    /* 0002 Loop 6 TG2.1 — 14px aligns B's left edge with prose text edge
     * (24px ProsePane padding minus 10px button optical inset). */
    padding-left: 15px;
}
.action-snap--3 .action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--desk-color-text-secondary);  /* TG7.1 → 0002 Loop 3 TG6.2 — darker than muted */
    font: inherit;
    font-size: 12px;                       /* TG7.1 — smaller font */
    height: 26px;                          /* TG7.1 — ~26px target */
    min-width: 26px;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 0002 Loop 4 TG7.1 — bump border-color transition to 150ms so the
     * active-state black border eases in/out instead of snapping. */
    transition: background 120ms ease, color 120ms ease, border-color 150ms ease;
}
.action-snap--3 .action-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}
.action-snap--3 .action-btn:hover {
    background: var(--desk-color-bg-elevated, rgba(0, 0, 0, 0.04));
    color: var(--desk-color-text);
}
/* 0002 Loop 3 TG6.1 — root cause of the recurring "active state invisible"
 * complaint: this rule was scoped as `.action-btn--active` (specificity
 * 0,1,0), losing the cascade to `.action-snap--3 .action-btn` (0,2,0)
 * above for `color` and `background`. The `.action-btn--active` class
 * toggle was firing correctly via syncActiveState, but the visual change
 * never landed because the base rule won. Prefixing with `.action-snap--3`
 * raises specificity to 0,2,0 — equal to the base, source-order wins.
 *
 * 0002 Loop 4 TG7.1 — Loop-3's accent-fill + bg-color text + bold weight
 * read as too heavy for an inline formatting cue. New contract: active
 * state is a 1px black border ONLY (no fill, no font-weight change). The
 * base rule already declares `border: 1px solid transparent`, so this
 * rule just swaps border-color to text (near-black across themes). It's
 * fully composable with :hover — the hover bg-elevated still applies
 * when a button is both hovered AND active. */
.action-snap--3 .action-btn--active {
    border-color: var(--desk-color-text);
}
.action-snap--3 .action-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* TG7.2 — group dividers between BIU | H1-H3 | list | undo/redo. Height
 * matches the button (not the full bar) so groups read as related but not
 * merged. */
.action-divider {
    width: 1px;
    height: 18px;
    background: var(--desk-color-border-subtle);
    margin: 0 6px;
    flex-shrink: 0;
}

/* 0002 — editor placeholders + header counter */
/* 0002 Loop 14 TG1.1 — placeholder is a single absolutely-positioned
 * ::before pseudo. Admin Loop-12 review surfaced that Loop 11.2's
 * in-flow ::before placed the caret AFTER the placeholder text in an
 * empty contenteditable — caret should render at the LEFT edge.
 *
 * Loop 13 tried to preserve wrap-pushes-subtitle by adding an invisible
 * in-flow ::after twin, but the in-flow pseudo rendered AFTER PM's
 * trailingBreak <br> (CSS spec: ::after is the host's last child),
 * making empty titles 2 lines tall vs typed titles' 1 line. Loop 14
 * removes the ::after — empty title now matches typed-title height at
 * any viewport. Tradeoff: wrap-pushes-subtitle on narrow viewports is
 * lost (would need a JS Decoration.widget to restore).
 *
 * The host element needs `position: relative` for the absolute ::before
 * to anchor to its left/top, hence the .empty-node rule below. */
.empty-node {
    position: relative;
}
.empty-node[data-placeholder]::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--desk-color-text-muted);
    pointer-events: none;
    user-select: none;
}
/* Title carries `padding-top: 24px` (Loop 5 / Loop 6 TG3.1) unless the
 * version label is showing, in which case that padding moves onto
 * `.version-label` and the title's padding-top is 0. The absolute
 * ::before doesn't inherit padding, so match whichever offset is live. */
.editor-mount .essay-title.empty-node[data-placeholder]::before {
    top: 24px;
}
.editor-mount:has(.version-label:not([hidden])) .essay-title.empty-node[data-placeholder]::before {
    top: 0;
}
.header-counter {
    font-size: 11px;
    font-family: var(--desk-font-mono, monospace);
    color: var(--desk-color-text-muted);
    margin-left: 4px;
    user-select: none;
}

/* 0002 TG6 — StatusPill structured stats. Separators use the border-subtle
 * token so they read as quiet visual dividers, not data. Cursor segment
 * inherits the pill font (Loop 2: single-font throughout). */
.status-pill__sep {
    color: var(--desk-color-border-subtle);
    margin: 0 6px;
}

/* Autosave-status message slot inside the pill (post-0005 fix). The slot
 * lives appended to the stats and is `hidden` by default; autosave-status.js
 * writes a transient message ("Save failed — retrying...") and removes the
 * hidden attribute. Leading separator before it via ::before so the message
 * reads as a distinct segment without needing a sibling sep span. */
.status-pill__message[hidden] { display: none; }
.status-pill__message:not([hidden])::before {
    content: '·';
    color: var(--desk-color-border-subtle);
    margin: 0 6px;
}

.status-pill__open {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--desk-color-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.status-pill__open:hover {
    opacity: 0.85;
}

/* ------------------------------------------------------------------
 * StatusPill AI loading mode.
 *
 * While a lens Celery job is in flight the stats collapse and the pill
 * becomes a silent 45s countdown (no seconds shown) in the veil theme.
 * --pill-progress (0–1) is driven by JS.
 *
 *   veil — faint iridescent tint sweeping in with a 1px light edge
 * ------------------------------------------------------------------ */

.status-pill__stats {
    display: contents;
}

.status-pill__loading[hidden] {
    display: none;
}

.status-pill[data-loading] {
    isolation: isolate;
    overflow: hidden;
    min-width: 260px;
    cursor: default;
    user-select: none;
    --pill-progress: 0;
    --pill-holo-a: #7cc4ff; /* sky */
    --pill-holo-b: #b49aff; /* violet */
    --pill-holo-c: #ff9ad5; /* pink */
    --pill-holo-d: #7ef0d4; /* mint */
}

.status-pill[data-loading] .status-pill__stats,
.status-pill[data-loading] .status-pill__message {
    display: none;
}

/* The label is a normal flex item so the pill's own align-items: center
 * keeps it vertically centered; the track pins to the pill separately. */
.status-pill[data-loading] .status-pill__loading:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.status-pill__loading-label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.status-pill__close {
    position: relative;
    z-index: 2;
}

.status-pill__loading-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.status-pill__loading-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(var(--pill-progress, 0));
    border-radius: inherit;
    pointer-events: none;
}

/* Overtime (run exceeded the assumed 45s) — one shared quiet breathe. */
.status-pill[data-loading][data-loading-overtime] {
    animation: pill-overtime-breathe 3s ease-in-out infinite;
}

@keyframes pill-overtime-breathe {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.04) saturate(1.15); }
}

/* Veil — a barely-there iridescent tint slides in left → right,
 * finished with a 1px light edge so the countdown reads precisely.
 * Left corners inherit the pill radius so the fill sits inside the
 * capsule instead of painting square edges. */
.status-pill[data-loading-style="veil"] .status-pill__loading-fill {
    inset: 0 auto 0 0;
    width: calc(var(--pill-progress, 0) * 100%);
    transform: none;
    border-radius: inherit;
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--pill-holo-a) 14%, transparent),
        color-mix(in srgb, var(--pill-holo-b) 14%, transparent) 40%,
        color-mix(in srgb, var(--pill-holo-c) 12%, transparent) 70%,
        color-mix(in srgb, var(--pill-holo-d) 14%, transparent)
    );
    background-size: 200% 100%;
    animation: pill-veil-shift 8s linear infinite;
    border-right: 1px solid color-mix(in srgb, var(--pill-holo-b) 55%, transparent);
}

[data-theme="dark"] .status-pill[data-loading-style="veil"] .status-pill__loading-fill {
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--pill-holo-a) 22%, transparent),
        color-mix(in srgb, var(--pill-holo-b) 22%, transparent) 40%,
        color-mix(in srgb, var(--pill-holo-c) 18%, transparent) 70%,
        color-mix(in srgb, var(--pill-holo-d) 22%, transparent)
    );
    background-size: 200% 100%;
}

@keyframes pill-veil-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .status-pill[data-loading-style="veil"] .status-pill__loading-fill,
    .status-pill[data-loading][data-loading-overtime] {
        animation: none;
    }
}

/* 0002 Loop 8 TG1.2 / TG2.1 / TG2.2 — bare comment card + MarginPane mode
 * toggle, rebuilt on first-principles spec from admin.
 *
 * The Loop-1 four-state cards (idle/ready/reply/resolved) are gone. Only
 * one bare card lives inside #AllComments now: a circular icon plus outer
 * card shell, no body content, anchored by data-paragraph via
 * comment-positioner.js (top set in JS).
 *
 * 0002 Loop 11 TG1.1 — DOM REFACTOR: .comment-icon is now a SIBLING of
 * .comment-card (not a child), absolutely positioned in .all-comments at
 * left:18px. Its on-screen position is INVARIANT of card.left/card.right/
 * width across all states and transitions, because it doesn't reference
 * the card at all. Across every state (expanded, compressed-collapsed,
 * compressed-open) and every transition (E↔C, hover-open, hover-close)
 * the icon stays at pane.left + 18 from the viewport edge.
 *
 * Math: CSS absolute positioning measures from the padding-edge of the
 * containing block (`.all-comments`). For elements with no border, the
 * padding-edge equals the outer edge — i.e. .all-comments outer-left =
 * pane.left (since .all-comments has no margin/offset within MarginPane).
 * So `.comment-icon { left: 18 }` places icon.left at pane.left + 18. ✓
 * (Same convention used by `.comment-card { left: 12 }` → card.left at
 * pane.left + 12.) The 12px padding on .all-comments does NOT add to the
 * positioning origin.
 *
 * Card geometry retained from Loop 10 (only structural change is that
 * the icon is no longer a flex child — flex layout removed from the
 * card, no flex children left to lay out):
 *   - Expanded: card left:12, width:264.
 *   - Compressed-collapsed: card left:12, width:48 (transparent shell).
 *   - Compressed-OPEN: card left:-204, width:264 (z-index:50 over prose).
 *
 * The card is now a pure visual rectangle. The icon overlays it via
 * z-index:51 (above any compressed-open card body at z-index:50, and
 * above the default expanded card body which has no positive z-index). */
.comment-card {
    position: absolute;
    left: 12px;
    width: 264px;
    padding: 6px;
    min-height: 50px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    box-shadow: 0 1px 2px var(--desk-color-shadow);
    transition: top var(--desk-transition-speed) var(--desk-transition-ease),
                left var(--desk-transition-speed) var(--desk-transition-ease),
                width var(--desk-transition-speed) var(--desk-transition-ease),
                background-color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease),
                box-shadow var(--desk-transition-speed) var(--desk-transition-ease);
}

/* Compressed mode: animate top + left + width. Top is included so when a
 * card opens on hover and reposition shifts siblings down, they slide in
 * sync with the open animation instead of snapping after it completes. */
[data-margin-mode="compressed"] .comment-card {
    transition: top var(--desk-transition-speed) var(--desk-transition-ease),
                left var(--desk-transition-speed) var(--desk-transition-ease),
                width var(--desk-transition-speed) var(--desk-transition-ease),
                background-color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease),
                box-shadow var(--desk-transition-speed) var(--desk-transition-ease);
}

/* During the hover-open / hover-close width transition, hold content at its
 * FINAL 252px layout (264px card minus 2×6 padding) and clip overflow so the
 * card body's measured offsetHeight reflects the open height from the first
 * frame. That lets reposition() compute correct sibling tops immediately and
 * the `top` transition above animates them in parallel with the width grow.
 *
 * Scoped strictly to `[data-hover-transitioning]` (set in JS on mouseenter
 * and cleared on width transitionend) so menu dropdowns and other
 * position:absolute children on a stable open card aren't clipped. */
[data-margin-mode="compressed"] .comment-card[data-hover-transitioning] {
    overflow: hidden;
}
[data-margin-mode="compressed"] .comment-card[data-hover-transitioning] > * {
    min-width: 252px;
}

/* 0002 Loop 11 TG1.1 — comment-icon is a SIBLING of comment-card (not a
 * child), absolutely positioned in .all-comments. The `top` is set by
 * comment-positioner.js (paragraph offset, identical to the matching
 * card's top so they stay vertically aligned). z-index:51 keeps the icon
 * above the compressed-open card body (z-index:50) and above the default
 * expanded card body.
 *
 * left:18px is unconditional across all modes — the icon's pane-space
 * position never changes. During E↔C transitions the MarginPane's own
 * width transition carries the icon rightward/leftward in viewport space;
 * no icon-level transition is needed. */
.comment-icon {
    position: absolute;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--desk-color-bg-elevated);
    pointer-events: auto;
    cursor: pointer;
    z-index: 51;
}

/* Expanded (default): card left-anchored 12px from MarginPane left.
 * Icon is a sibling at left:18 inside .all-comments → pane.left + 18. */
[data-margin-mode="expanded"] .comment-card {
    left: 12px;
}

[data-margin-mode="compressed"] .comment-card {
    z-index: 50;
}

/* Compressed collapsed: 48px transparent shell. left:12 is inherited from
 * the base .comment-card rule — during E→C the pane's own width transition
 * carries the card rightward in viewport space while width shrinks from
 * 264→48, giving a smooth "body disappears, icon stays" effect. */
[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) {
    width: 48px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
/* Compressed open: full 264px card extending left over the prose area.
 * calc(100% - 264px) resolves to -192px in the 72px-wide pane, putting
 * the card's right edge flush with the pane's right edge. This left value
 * only animates during hover-open when the pane width is stable. */
[data-margin-mode="compressed"] .comment-card[data-open="true"] {
    left: calc(100% - 264px);
    width: 264px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    box-shadow: 0 1px 2px var(--desk-color-shadow);
}

/* ============================================================
 * 0003 Task Group 5 — comment card render layer
 * ============================================================ */

/* Base card — position:absolute so JS can set top.
 * Already established above for the legacy bare card; these sub-rules
 * add the new content areas for TG5 cards. */

/* Reply zone: hidden by default (idle state), slides in on ready/reply. */
.comment-card[data-state="idle"] .comment-card__reply-zone {
    max-height: 0;
    overflow: hidden;
}
.comment-card[data-state="ready"] .comment-card__reply-zone,
.comment-card[data-state="reply"] .comment-card__reply-zone {
    max-height: 400px; /* enough for 10-row textarea + actions row */
    overflow: hidden;
    transition: max-height 0.2s ease;
}

/* Header layout. */
.comment-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comment-card__pfp {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.comment-card__pfp--initials {
    background: var(--desk-color-bg-elevated, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--desk-color-text-secondary, #64748b);
}
/* AI-originated comments (accepted chat feedback cards) — chat bubble
 * avatar instead of the accepting user's pfp. */
.comment-card__pfp--ai {
    background: var(--desk-color-bg-elevated, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--desk-color-text-secondary, #64748b);
}
/* Pattern-suggestion comments carry the pattern's own icon (cloned from
 * the panel tile) on a white chip, matching the report header treatment.
 * Deliberately NOT inverted in dark mode: the icon artwork has no good
 * inverted state, so the chip stays white-with-black-ink in both themes. */
.comment-card__pfp--pattern {
    background: #fff;
    border: 1px solid var(--desk-color-border-subtle);
}
.comment-card__pfp--pattern img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.comment-card__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
.comment-card__author {
    font-size: 12px;
    font-weight: 600;
    color: var(--desk-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comment-card__author-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--desk-color-accent);
    line-height: 1.2;
}
.comment-card__date {
    font-size: 11px;
    color: var(--desk-color-text-muted);
}
.comment-card__resolve {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    font-size: 14px;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.comment-card__resolve:hover {
    color: var(--desk-color-success, #22c55e);
    background: var(--desk-color-bg-elevated, #f1f5f9);
}

/* Three-dot menu. */
.comment-card__menu {
    position: relative;
    flex-shrink: 0;
}
.comment-card__menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.comment-card:hover .comment-card__menu-trigger,
.comment-card__reply-entry:hover > .comment-card__reply-meta .comment-card__menu-trigger,
.comment-card__menu:has(.comment-card__menu-dropdown--open) .comment-card__menu-trigger,
.comment-card__menu-trigger:focus-visible {
    opacity: 1;
}
.comment-card__menu-trigger:hover {
    background: var(--desk-color-bg-elevated, #f1f5f9);
    color: var(--desk-color-text);
}
.comment-card__menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--desk-color-bg-panel, #fff);
    border: 1px solid var(--desk-color-border-subtle, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    padding: 4px 0;
}
.comment-card__menu-dropdown--open {
    display: block;
}
.comment-card__replies-scroll:has(.comment-card__menu-dropdown--open) {
    overflow: visible;
}
.comment-card__menu-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    color: var(--desk-color-text);
    text-align: left;
}
.comment-card__menu-item:hover {
    background: var(--desk-color-bg-elevated, #f1f5f9);
}
.comment-card__menu-item--danger:hover {
    color: var(--desk-color-danger, #ef4444);
}
.comment-card__menu--reply {
    margin-left: auto;
}

/* Body text. */
.comment-card__body {
    margin-top: 6px;
    font-size: 13px;
    color: var(--desk-color-text);
    line-height: 1.5;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.comment-card__body p {
    margin: 0 0 0.65em;
}
.comment-card__body p:last-child {
    margin-bottom: 0;
}
.comment-card__body ul,
.comment-card__body ol,
.comment-card__reply-body ul,
.comment-card__reply-body ol {
    margin: 0.35em 0 0.65em;
    padding-left: 1.3em;
}
.comment-card__body li,
.comment-card__reply-body li {
    margin: 0.15em 0;
}
.comment-card__body strong,
.comment-card__reply-body strong {
    font-weight: 700;
}
.comment-card__body em,
.comment-card__reply-body em {
    font-style: italic;
}
.comment-card__body u,
.comment-card__reply-body u {
    text-decoration: underline;
}

/* Reply entries (nested flat thread). */
.comment-card__replies {
    margin-top: 4px;
}
.comment-card__replies-scroll {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Border only when there are replies — avoids a phantom divider on empty cards. */
.comment-card__replies-scroll:not(:empty) {
    border-top: 1px solid var(--desk-color-border-subtle, #e2e8f0);
}
.comment-card__reply-entry {
    display: grid;
    grid-template-columns: 27px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    padding: 6px 0;
    border-top: 1px solid var(--desk-color-border-subtle, #e2e8f0);
}
/* The scroll wrapper already has a top border; remove the duplicate from the
 * first reply entry to avoid a double-border. */
.comment-card__replies-scroll .comment-card__reply-entry:first-child {
    border-top: none;
}
.comment-reply__pfp {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: flex-start;
    margin-top: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    object-fit: cover;
}
.comment-reply__pfp--initials {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: flex-start;
    margin-top: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--desk-color-accent, #6366f1);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comment-card__reply-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.comment-card__reply-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.comment-card__reply-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--desk-color-text-secondary, #64748b);
}
.comment-card__reply-date {
    font-size: 10px;
    color: var(--desk-color-text-muted);
}
.comment-card__reply-body {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: var(--desk-color-text);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
}
.comment-card__reply-body p {
    margin: 0 0 0.55em;
}
.comment-card__reply-body p:last-child {
    margin-bottom: 0;
}

/* Reply zone — textarea + actions. */
.comment-card__reply-zone {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
}
.comment-card__compose {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 6px;
    border: 1px solid var(--desk-color-border-subtle, #e2e8f0);
    border-radius: 4px;
    min-height: 72px;
    font-family: inherit;
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
}
.comment-card__compose:focus-within {
    outline: none;
    border-color: var(--desk-color-border-focus, #94a3b8);
}
.comment-card__compose.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 4px;
    left: 6px;
    color: var(--desk-color-text-muted);
    pointer-events: none;
    font-size: 12px;
    line-height: 1.4;
}
.comment-card__compose .ProseMirror {
    outline: none;
    min-height: 64px;
    max-height: calc(1.4em * 10 + 8px);
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.comment-card__compose .ProseMirror p {
    margin: 0 0 0.55em;
}
.comment-card__compose .ProseMirror p:last-child {
    margin-bottom: 0;
}
.comment-card__compose .ProseMirror ul,
.comment-card__compose .ProseMirror ol {
    margin: 0.25em 0 0.55em;
    padding-left: 1.3em;
}
.comment-card__actions {
    display: flex;
    flex-shrink: 0; /* never compressed when textarea grows */
    gap: 4px;
    margin-top: 4px;
    justify-content: flex-end;
}
.comment-card__cancel,
.comment-card__send {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.comment-card__cancel {
    background: none;
    color: var(--desk-color-text-secondary, #64748b);
}
.comment-card__cancel:hover {
    background: var(--desk-color-bg-elevated, #f1f5f9);
}
.comment-card__send {
    background: var(--desk-color-accent, #3b82f6);
    color: #ffffff;
}
.comment-card__send:disabled {
    background: var(--desk-color-bg-elevated, #e2e8f0);
    color: var(--desk-color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}
.comment-card__send:not(:disabled):hover {
    background: var(--desk-color-accent-hover, #2563eb);
}

/* Compressed mode — show only pfp icon; rest is hidden via opacity/overflow.
 * When ContentRegion has data-margin-mode="compressed" and the card is not
 * open, collapse to icon-only view. The data-open="true" overlay (existing
 * Loop 8/10 rule) extends to the left as full card. */
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__header .comment-card__meta,
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__header .comment-card__resolve,
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__header .comment-card__menu,
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__body,
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__replies,
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__reply-zone {
    display: none;
}
/* Mode transition helpers (E→C and C→E).
 * JS sets data-mode-transitioning="ec" or "ce" on #ContentRegion
 * for the duration of the pane-width transition, then removes it.
 *
 * Both directions: overflow:hidden on pane clips cards at the pane
 * edge; overflow:hidden on cards clips content that overflows during
 * the width change; min-width on children keeps text at its final
 * 264px layout so it reveals/hides without reflowing.
 *
 * E→C only: opacity fades the card near the end of the clip so the
 * snap to compressed geometry reads as one continuous motion. */
#ContentRegion[data-mode-transitioning] .margin-pane {
    overflow: hidden;
}
#ContentRegion[data-mode-transitioning] .comment-card {
    overflow: hidden;
}
#ContentRegion[data-mode-transitioning] .comment-card > * {
    min-width: 252px;
}
/* E→C fade: card shell (bg/border/shadow) and content children fade
 * out, but the pfp stays visible so there's no flicker when the snap
 * to compressed mode paints the pfp-only compressed card. */
#ContentRegion[data-mode-transitioning="ec"] .comment-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: background-color 150ms var(--desk-transition-ease) 150ms,
                border-color 150ms var(--desk-transition-ease) 150ms,
                box-shadow 150ms var(--desk-transition-ease) 150ms;
}
#ContentRegion[data-mode-transitioning="ec"] .comment-card__header .comment-card__meta,
#ContentRegion[data-mode-transitioning="ec"] .comment-card__header .comment-card__resolve,
#ContentRegion[data-mode-transitioning="ec"] .comment-card__header .comment-card__menu,
#ContentRegion[data-mode-transitioning="ec"] .comment-card__body,
#ContentRegion[data-mode-transitioning="ec"] .comment-card__replies,
#ContentRegion[data-mode-transitioning="ec"] .comment-card__reply-zone {
    opacity: 0;
    transition: opacity 150ms var(--desk-transition-ease) 150ms;
}

/* 0003 Task 3.1 — Reply button: visible only in compressed hover
 * (data-open="true" but data-reply-open not set). Hidden everywhere else. */
.comment-card__reply-btn {
    display: none;
}
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"]:not([data-reply-open="true"]) .comment-card__reply-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-family: inherit;
    background: none;
    border: 1px solid var(--desk-color-border-subtle, #c8c8c0);
    border-radius: 4px;
    color: var(--desk-color-text-secondary, #666660);
    cursor: pointer;
    text-align: center;
}
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"]:not([data-reply-open="true"]) .comment-card__reply-btn:hover {
    background: var(--desk-color-bg-elevated, #e8e8e2);
    color: var(--desk-color-text);
}

/* 0003 Task 3.1 — in compressed hover mode (open, no data-reply-open),
 * hide the reply zone. The reply zone only appears after clicking Reply
 * (data-reply-open="true"). The state-machine rule (data-state="ready/reply")
 * would otherwise reveal it; this override takes precedence.
 * Pending cards (.comment-card--compressed-pending) are excluded — they
 * always show their reply zone since they ARE a compose card. */
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"]:not([data-reply-open="true"]):not(.comment-card--compressed-pending) .comment-card__reply-zone {
    display: none;
}

/* 0003 Task 3.1 — compressed-mode pending card.
 * When the user adds a comment while MarginPane is compressed, the pending
 * compose card appears to the LEFT of the pfp icon position, overlapping
 * ProsePane.  The card carries data-open="true" so the existing open-card
 * left / width / background rules already render it as a full card; this
 * class pins it in place and ensures it stays visible above prose content. */
.comment-card--compressed-pending {
    /* Override the collapsed (not[data-open]) transparent shell so the card
     * is always rendered as a full card regardless of data-open state. */
    position: absolute;
    z-index: 55; /* above compressed-open cards (z-index:50) and icons (z-index:51) */
}

/* Ensure the pending card's inner sections remain visible in compressed mode
 * even though the generic compressed hide-rule targets :not([data-open="true"]).
 * The pending card always has data-open="true", but add an explicit override
 * for safety in case JS hasn't set the attribute yet.
 *
 * NOTE: .comment-card__meta is intentionally excluded here. The hide-rule at
 * line 1644 uses :not([data-open="true"]) — the pending card always has
 * data-open="true", so meta is never hidden by that rule and needs no revert.
 * Including meta in this display:revert block would override the base
 * display:flex rule on .comment-card__meta with display:block (the browser
 * default for div), causing the author and date <span>s to render inline
 * (side by side) instead of stacked in a column — the persistent bug reported
 * after the earlier fix attempt. */
#ContentRegion[data-margin-mode="compressed"] .comment-card--compressed-pending .comment-card__header .comment-card__resolve,
#ContentRegion[data-margin-mode="compressed"] .comment-card--compressed-pending .comment-card__body,
#ContentRegion[data-margin-mode="compressed"] .comment-card--compressed-pending .comment-card__replies,
#ContentRegion[data-margin-mode="compressed"] .comment-card--compressed-pending .comment-card__reply-zone {
    display: revert;
}

/* 0003 Task 2.2 — in compressed mode, mirror the header so the layout
 * reflects the right-anchored card extending leftward.
 *
 * flex-direction: row-reverse on the header flips the visual order of its
 * three flex children (pfp | meta | resolve) to (resolve | meta | pfp)
 * without touching the DOM.  The result:
 *   - pfp stays at the far RIGHT (aligned with the right-edge icon)
 *   - resolve checkmark moves to the far LEFT
 *   - meta (author/date) sits between them, text-aligned right so it reads
 *     naturally against the right side of the card body.
 *
 * Applied to ALL compressed cards (not just open ones) so that row-reverse
 * is stable across the open/close cycle. In a collapsed (48px) card with
 * meta and resolve hidden via display:none, row vs row-reverse is visually
 * identical (only pfp is in the flex row). Applying row-reverse only when
 * data-open="true" caused the pfp to snap from right (open, row-reverse) to
 * left (closed, row) at the start of the close transition, then animate right
 * as the card width shrank — the "jumps to the left and animate right" bug. */
#ContentRegion[data-margin-mode="compressed"] .comment-card .comment-card__header {
    flex-direction: row-reverse;
    /* Pin items to the top of the header cross-axis so the pfp can never
     * shift downward during the hover-open width animation. The base rule
     * uses align-items:center, which would move the pfp down by (header-
     * height - pfp-height)/2 if any sibling flex item were ever taller
     * than the pfp (36px). flex-start keeps pfp at top:0 regardless,
     * removing that vector entirely. Visual result is identical in the
     * common case (pfp is the tallest item). */
    align-items: flex-start;
}
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"] .comment-card__meta {
    text-align: right;
    align-items: flex-end;
}
/* Pending card in compressed mode: ensure author/date stay stacked in a
 * column regardless of any flex-direction inheritance from header rules. */
#ContentRegion[data-margin-mode="compressed"] .comment-card--compressed-pending .comment-card__meta {
    flex-direction: column;
}

/* 0003 Task 3.2 — in compressed mode, hide Delete/Cancel while the reply
 * zone is not yet open (i.e. data-reply-open is not set). Once the user
 * clicks Reply and the reply zone opens (data-reply-open="true"), these
 * buttons become visible.
 * Pending cards (.comment-card--pending) are always compose cards — Cancel
 * must remain visible regardless of reply-open state (Task 2.3). */
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"]:not([data-reply-open="true"]):not(.comment-card--pending) .comment-card__delete,
#ContentRegion[data-margin-mode="compressed"] .comment-card[data-open="true"]:not([data-reply-open="true"]):not(.comment-card--pending) .comment-card__cancel {
    display: none;
}

/* ============================================================
 * 0002 Loop 2 — editor surface polish
 * ============================================================ */

/* 1.1 — remove ProseMirror's default blue focus outline */
.editor-mount [contenteditable="true"]:focus {
    outline: none;
}

/* 4.1 — body typography (Baskerville editorial stack; Display modal
 * overrides via --desk-body-font-family on #ContentRegion). */
.editor-mount p,
.editor-mount h1,
.editor-mount h2,
.editor-mount h3,
.editor-mount li {
    font-family: var(--desk-body-font-family);
}

/* 4.2 / 8.1 — body line-height + paragraph spacing.
 * 0002 Loop 3 TG7.1 (third raise) — list-item gap matches paragraph gap.
 * The `list_item` content expression "paragraph block*" (from
 * prosemirror-schema-list's addListNodes) puts a `<p>` inside every
 * `<li>`. Loop-2 set `li { margin-block: 0 }`, expecting the inner
 * `<p>`'s 1.2em margin to drive the gap between bullets via
 * margin-collapse. After Batch A bumped body `p` margin to 1.2em the
 * cascade still made bullets feel spacier than paragraphs, so this
 * loop moves the rhythm onto `<li>` directly and zeroes the inner
 * `<p>` so it can't double-add. Net result: gap between adjacent
 * `<li>`s collapses to the same 1.2em as gap between adjacent body
 * `<p>`s. */
/* 0002 Loop 4 TG3.1 + TG3.2 — body font-size 16px (Loop-3 was 17px) and
 * line-height 1.0em (Loop-3 was 1.8). Admin asked for very tight body
 * leading; paragraph spacing stays on margin-block: 1.2em so adjacent
 * paragraphs still breathe. The inner `<p>` reset on `<li> > <p>` stays
 * — it kills double spacing inside list items.
 *
 * 0002 Loop 5 TG5.1 — body line-height 1.0em → 1.5em (Loop-4's 1.0em
 * was too tight; admin wants more comfortable body leading). Font size
 * 16px and paragraph margin-block: 1.2em both unchanged. */
.editor-mount p,
.editor-mount li {
    font-weight: var(--desk-body-font-weight, 400);
    font-size: var(--desk-body-font-size, 16px);
    /* 0002 Loop 6 TG3.3 — body line-height 1.5em → 1.6em (more comfortable).
     * Display modal slider writes --desk-body-line-height on #ContentRegion. */
    line-height: var(--desk-body-line-height);
}
.editor-mount p {
    margin-block: var(--desk-para-gap, 1.2em);
}
.editor-mount li > p {
    margin-block: 0;
}
/* 0002 Loop 5 TG3.1 — Lists tighter than paragraph prose. ul/ol carry no
 * outer margin (so a list flows like inline content); li's get 0.3em
 * breathing room (less than body p's 1.2em). Body p margin-block: 1.2em
 * stays unchanged. */
.editor-mount ul,
.editor-mount ol {
    margin-block: 0;
    padding-inline-start: 1.5em;
}

/* Block quote — a left rule that runs the full height of the excerpt.
 * Display modal `data-quote-style` restyles the same node (rule / pull /
 * box / soft). Default is Rule so quotes read as callouts without a
 * Display visit. */
.editor-mount blockquote {
    --desk-quote-gutter: calc(1em + 3px);
    margin-block: var(--desk-para-gap, 1.2em);
    margin-inline: 0;
    padding-block: 0.15em;
    padding-inline-start: 1em;
    border: none;
    border-inline-start: 3px solid var(--desk-color-text, #1a1a1a);
    background: transparent;
    quotes: none;
}
.editor-mount blockquote > * {
    margin-block: 0.45em;
}
.editor-mount blockquote > *:first-child {
    margin-block-start: 0;
}
.editor-mount blockquote > *:last-child {
    margin-block-end: 0;
}

.editor-mount hr {
    display: block;
    width: 100%;
    border: none;
    border-top: 1px solid var(--desk-color-border, rgba(0, 0, 0, 0.18));
    margin-block: 2.25em;
    height: 0;
}

#ContentRegion[data-quote-style="pull"] .editor-mount blockquote {
    --desk-quote-gutter: calc(1.35em + 4px);
    padding-inline-start: 1.35em;
    padding-block: 0.35em;
    border-inline-start-width: 4px;
    font-size: 1.08em;
    font-style: italic;
}
#ContentRegion[data-quote-style="box"] .editor-mount blockquote {
    --desk-quote-gutter: calc(1.1em + 1px);
    padding: 0.85em 1.1em;
    border: 1px solid var(--desk-color-border, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    background: var(--desk-color-bg-elevated, rgba(0, 0, 0, 0.04));
}
#ContentRegion[data-quote-style="soft"] .editor-mount blockquote {
    --desk-quote-gutter: calc(1.5em + 2px);
    padding-inline-start: 1.5em;
    border-inline-start-width: 2px;
    border-inline-start-color: var(--desk-color-text-muted, #999);
    color: var(--desk-color-text-secondary, #666);
    font-size: 0.95em;
    font-style: italic;
}

/* 0002 Loop 4 TG5.1 (FOURTH raise) — list spacing STILL feels tall after
 * Loop-3's li{margin-block:1.2em} + li>p{margin-block:0} and Loop-4's
 * 1.0em line-height. Declared margin math is correct (1.2em margin-collapse
 * → 19.2px gap on both <p> and <li>); the extra space must come from a
 * COMPUTED contributor browsers add automatically:
 *
 *   - <ul>/<ol> may carry default padding-block (older user-agent sheets
 *     and some normalize variants set it).
 *   - <li> can pick up implicit padding-block depending on user-agent.
 *   - <li>::marker has its own line-box; if its line-height resolves
 *     differently from the host <li>'s 1.0em, the marker line-box can
 *     be taller than the inner <p>'s line-box and dictate the row height.
 *
 * Force explicit zeros on every contributor and pin the marker's
 * font-size + line-height to the body so the marker line-box can never
 * be taller than the inner <p>'s line-box. This is additive — the rules
 * above stay; these only override the COMPUTED defaults browsers inject. */
.editor-mount ul,
.editor-mount ol {
    padding-block: 0;
}
/* 0002 Loop 5 TG3.1 — li margin-block 1.2em → 0.3em so list items pack
 * tighter than body paragraphs. padding-block: 0 stays from Loop-4. */
.editor-mount li {
    padding-block: 0;
    margin-block: 0.3em;
}
/* 0002 Loop 5 TG5.1 — marker line-height tracks the body's new 1.5em so
 * the marker line-box doesn't dictate row height (Loop-4 pinned this at
 * 1.0em to match the then-current body leading; same reasoning, new value). */
.editor-mount li::marker {
    font-size: var(--desk-body-font-size, 16px);
    /* 0002 Loop 6 TG3.3 — match body's new 1.6em. */
    line-height: var(--desk-body-line-height);
}

/* 0002 Loop 2 — alternating indent markers (depth cycles disc/circle, decimal/lower-alpha) */
.editor-mount ul { list-style-type: disc; }
.editor-mount ul ul { list-style-type: circle; }
.editor-mount ul ul ul { list-style-type: disc; }
.editor-mount ol { list-style-type: decimal; }
.editor-mount ol ol { list-style-type: lower-alpha; }
.editor-mount ol ol ol { list-style-type: decimal; }

/* 5.1 — marks keep their style markers without changing text size */
.editor-mount strong,
.editor-mount em,
.editor-mount u {
    font-size: inherit;
    line-height: inherit;
}

/* 0002 Loop 2 TG2.3 / Loop 4 TG1.2 — subtitle color now lives on the
 * consolidated Loop-4 rule below (literal #666660, not the theme-varying
 * --desk-color-text-muted token). Earlier muted rule removed so the
 * cascade is unambiguous. */

/* 0002 Loop 3 TG1.1 + TG1.3 — title + subtitle revert to system sans
 * (override Loop-2 Baskerville cascade) and zero margins so the gap
 * between title and subtitle collapses. The body `<p>` margin below
 * the subtitle takes over the rhythm.
 *
 * 0002 Loop 4 TG1.1/1.2/1.3 — explicit sizes (32 / 18), literal subtitle
 * color #666660 (concrete hex; not the theme-varying muted token), and
 * line-height 1.1 on both so the line-box doesn't add visual padding
 * around the text. (Loop-3 left line-height at the inherited body 1.6,
 * which made the title's line-box ~51px tall and pushed the subtitle
 * baseline well below the title baseline even with margin-block:0.) */
.editor-mount .essay-title,
.editor-mount .essay-subtitle {
    font-family: var(--desk-title-font-family);
    margin-block: 0;
    text-align: left;
}
/* 0002 Loop 5 TG6.1 — give the subtitle a 5px breathing room below the
 * title (Loop-4's combined `margin-block: 0` closed the gap entirely).
 * Source order matters: this rule comes AFTER the combined margin-block:0
 * rule so its margin-bottom: 5px wins for the title. margin-top stays 0
 * from the shorthand above (margin-block expands to top+bottom; only
 * bottom is overridden here). */
.editor-mount .essay-title {
    font-size: 32px;
    font-weight: var(--desk-title-font-weight, 700);
    line-height: 1.1;
    /* 0002 Loop 6 TG3.1 — breathing room above title (was flush with ActionBar).
     * When the version label is showing it takes this 24px (see .version-label)
     * so the title sits tight under the file name. */
    padding-top: 24px;
    margin-bottom: 5px;
}
.editor-mount:has(.version-label:not([hidden])) .essay-title {
    padding-top: 0;
}
.editor-mount .essay-subtitle {
    font-size: 18px;
    line-height: 1.1;
    color: #666660;
    font-weight: 400;
}

/* Version.name — sits slightly above the title, outside the PM doc.
 * 12.6px is 30% smaller than the 18px subtitle; muted token is a step
 * lighter than the subtitle's literal #666660. */
.version-label {
    padding-top: 24px;
    margin-bottom: 4px;
    line-height: 1.1;
}
.version-label[hidden] {
    display: none;
}
.version-label__name {
    display: inline-block;
    min-width: 1ch;
    font-family: var(--desk-title-font-family);
    font-size: 12.6px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--desk-color-text-muted);
    outline: none;
    caret-color: var(--desk-color-text-muted);
    white-space: nowrap;
}
.version-label__name[contenteditable="true"],
.version-label__name[contenteditable="plaintext-only"] {
    cursor: text;
}
.version-label__error {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--desk-color-text-muted);
    margin-top: 2px;
}
.version-label__error[hidden] {
    display: none;
}

/* 0002 Loop 5 TG7.1 — body headings inside the editor get line-height 1.2
 * (separate from body p's 1.5em). .essay-title / .essay-subtitle keep
 * their 1.1 via higher specificity (two-class selectors above). */
.editor-mount h1,
.editor-mount h2,
.editor-mount h3 {
    line-height: 1.2;
}

/* 0002 Loop 2 TG3.4 — author block: two-column avatar | name+date.
 * Left column auto-sized to the 40px avatar; right column expands.
 * Avatar is either an <img class="author-block__pfp"> (when picture_url
 * is set on the node) or a stylized initials div. CSS keeps both shapes
 * the same size/rounding so the layout is stable regardless of source. */
.editor-mount .author-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    /* 0002 Loop 6 TG3.2 — bottom 24px → 32px for more breathing room before body. */
    margin: 16px 0 32px;
}

#ContentRegion[data-show-author="off"] .editor-mount .author-block {
    display: none;
}
.editor-mount .author-block__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}
.editor-mount .author-block__pfp {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.editor-mount .author-block__initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 16px;
}
/* 0002 Loop 4 TG2.1 — meta column gets font-size 14px so name + date
 * inherit it (Loop-3 had no size on the column, so name inherited the
 * 15px body and date was pinned at 13px). Letter-spacing on the name
 * tightens 0.06em → 0.04em. Date drops its explicit size to inherit 14px. */
.editor-mount .author-block__meta {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.editor-mount .author-block__name {
    font-weight: 600;
    color: var(--desk-color-text);
    /* 0002 Loop 3 TG2.1 — name renders ALL CAPS with letter-spacing.
     * DOM stays mixed-case so accessibility / copy stays intact.
     * 0002 Loop 4 TG2.1 — letter-spacing tightened 0.06em → 0.04em. */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.editor-mount .author-block__date {
    color: var(--desk-color-text-muted);
}

/* Display modal — body alignment, indent, drop caps, paragraph numbers.
 * Driven by data-* on #ContentRegion; defaults match the pre-existing look
 * (left, no indent, no drop cap, no numbers). */
#ContentRegion[data-align="center"] .editor-mount .ProseMirror > p,
#ContentRegion[data-align="center"] .editor-mount .ProseMirror > h1:not(.essay-title),
#ContentRegion[data-align="center"] .editor-mount .ProseMirror > h2:not(.essay-subtitle),
#ContentRegion[data-align="center"] .editor-mount .ProseMirror > h3,
#ContentRegion[data-align="center"] .editor-mount li {
    text-align: center;
}
#ContentRegion[data-align="right"] .editor-mount .ProseMirror > p,
#ContentRegion[data-align="right"] .editor-mount .ProseMirror > h1:not(.essay-title),
#ContentRegion[data-align="right"] .editor-mount .ProseMirror > h2:not(.essay-subtitle),
#ContentRegion[data-align="right"] .editor-mount .ProseMirror > h3,
#ContentRegion[data-align="right"] .editor-mount li {
    text-align: right;
}
#ContentRegion[data-align="justify"] .editor-mount .ProseMirror > p,
#ContentRegion[data-align="justify"] .editor-mount li {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

#ContentRegion[data-indent="sm"] .editor-mount .ProseMirror > p { text-indent: 1em; }
#ContentRegion[data-indent="md"] .editor-mount .ProseMirror > p { text-indent: 1.75em; }
#ContentRegion[data-indent="lg"] .editor-mount .ProseMirror > p { text-indent: 2.5em; }
#ContentRegion[data-indent]:not([data-indent="off"]) .editor-mount .author-block + p,
#ContentRegion[data-drop-cap]:not([data-drop-cap="off"]) .editor-mount .author-block + p {
    text-indent: 0;
}

#ContentRegion[data-drop-cap="drop"] .editor-mount .author-block + p::first-letter,
#ContentRegion[data-drop-cap="accent"] .editor-mount .author-block + p::first-letter {
    float: left;
    font-family: var(--desk-title-font-family);
    font-size: 3.4em;
    line-height: 0.85;
    padding-right: 0.08em;
    padding-top: 0.06em;
    font-weight: 600;
}
#ContentRegion[data-drop-cap="accent"] .editor-mount .author-block + p::first-letter {
    color: var(--desk-color-accent);
}
#ContentRegion[data-drop-cap="raised"] .editor-mount .author-block + p::first-letter {
    font-family: var(--desk-title-font-family);
    font-size: 2.2em;
    line-height: 1;
    font-weight: 600;
    padding-right: 0.04em;
}
#ContentRegion[data-drop-cap="boxed"] .editor-mount .author-block + p::first-letter {
    float: left;
    font-family: var(--desk-title-font-family);
    font-size: 2.8em;
    line-height: 1;
    font-weight: 600;
    padding: 0.08em 0.14em;
    margin-right: 0.18em;
    border: 1px solid var(--desk-color-border);
}

#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .prose-pane,
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount,
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount .ProseMirror,
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount .ProseMirror blockquote {
    overflow: visible;
}
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph] {
    position: relative;
}
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph]::before {
    position: absolute;
    right: 100%;
    margin-right: var(--desk-para-num-distance, 10px);
    top: 0;
    font-size: var(--desk-para-num-size, 11px);
    line-height: inherit;
    color: var(--desk-color-text-muted);
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    text-align: right;
}
#ContentRegion[data-para-nums]:not([data-para-nums="off"]) .editor-mount .ProseMirror blockquote :is(p, ul, ol)[data-paragraph]::before {
    margin-right: calc(var(--desk-para-num-distance, 10px) + var(--desk-quote-gutter));
}
#ContentRegion[data-para-nums="p"] .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph]::before {
    content: "p(" attr(data-paragraph) ")";
}
#ContentRegion[data-para-nums="paren"] .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph]::before {
    content: "(" attr(data-paragraph) ")";
}
#ContentRegion[data-para-nums="dot"] .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph]::before {
    content: attr(data-paragraph) ".";
}
#ContentRegion[data-para-nums="pilcrow"] .editor-mount .ProseMirror :is(p, ul, ol)[data-paragraph]::before {
    content: "\00b6" attr(data-paragraph);
}

/* 0002 Loop 7 TG5.3 — ActionBar snap-5 toggle button: flips
 * data-margin-mode on #ContentRegion. Visual treatment matches
 * snap-3's formatting buttons (transparent bg, muted icon, hover lift).
 *
 * 0002 Loop 9 TG1.1 — left-align the snap inside ColC (ColC inherits
 * `justify-content: center` from the base .action-col rule). flex-start
 * makes the toggle hug ColC's left edge. */
.action-col--c {
    justify-content: flex-start;
}
/* 0002 Loop 10 TG1.1 — nudge the toggle button right so its center aligns
 * with the comment-bubble icon centers in the cards below. The comment
 * icon center sits at pane.left + 12 (pane padding) + 6 (card padding)
 * + 18 (half of the 36px icon) = pane.left + 36. ActionColC tracks
 * MarginPane.left via positionActionBarColumns(), so ColC.left = pane.left.
 * The 26px-wide toggle button (with `justify-content: flex-start` on this
 * snap) starts at ColC.left + padding-left, with its visual center at
 * (ColC.left + padding-left) + 13. Setting padding-left: 23px puts the
 * button center at ColC.left + 23 + 13 = ColC.left + 36 — perfectly
 * centered on the comment icons below. Overrides the base .action-snap
 * `padding: 0 8px`. */
.action-snap--5 {
    justify-content: flex-start;
    padding: 0 8px 0 23px;
}
.action-snap--5 .action-btn--toggle-margin {
    background: transparent;
    border: 1px solid transparent;
    color: var(--desk-color-text-secondary);
    height: 26px;
    min-width: 26px;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 0002 Loop 9 TG1.1 — match snap-3's border-color transition so the
     * active-state border eases in/out. */
    transition: background 120ms ease, color 120ms ease, border-color 150ms ease;
}
.action-snap--5 .action-btn--toggle-margin svg {
    width: 14px;
    height: 14px;
    display: block;
}
.action-snap--5 .action-btn--toggle-margin:hover {
    background: var(--desk-color-bg-elevated, rgba(0, 0, 0, 0.04));
    color: var(--desk-color-text);
}
/* 0002 Loop 9 TG1.1 — active-state border on the toggle button mirrors
 * the snap-3 pattern, with INVERTED semantics: Expanded mode = active
 * (border ON, "you can see comments"); Compressed = inactive (border
 * OFF, "you can't see comments"). JS in desk.js::setupMarginModeToggle
 * toggles the .action-btn--active class to match data-margin-mode. */
.action-snap--5 .action-btn--toggle-margin.action-btn--active {
    border-color: var(--desk-color-text);
}

/* 0002 Loop 10 TG3.1 — at viewport ≤ 515px, MarginPane is forced compressed
 * AND the toggle button is hidden (no expanded mode possible at this width).
 * JS in desk.js::syncMarginModeToBreakpoint sets data-margin-locked="true"
 * on #ContentRegion when window.innerWidth <= 515 and removes it above
 * that threshold, so the visibility of the toggle tracks the lock. */
[data-margin-locked="true"] .action-btn--toggle-margin { display: none }

/* 0002 Loop 7 TG3.1 — Scrollbar inverts in dark mode. */
[data-theme="dark"] .scroll-container {
    scrollbar-color: var(--desk-color-text-muted) var(--desk-color-bg);
}
[data-theme="dark"] .scroll-container::-webkit-scrollbar-track {
    background: var(--desk-color-bg);
}
[data-theme="dark"] .scroll-container::-webkit-scrollbar-thumb {
    background: var(--desk-color-text-muted);
}
[data-theme="dark"] .scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--desk-color-text-secondary);
}

/* 0002 Loop 11 TG5.1 — dark-mode visibility for placeholder elements.
 * The comment icon (.comment-icon) and the author PFP placeholder
 * (.author-block__initials, rendered when no picture URL is available)
 * both default to `var(--desk-color-bg-elevated)` for their background.
 * In dark theme that elevated surface sits very close to the page bg,
 * making both placeholders nearly invisible. Loop-10 admin review asked
 * for these to match the EssaySubtitle gray, so brighten them to
 * `--desk-color-text-secondary` (the same token the dark scrollbar-thumb
 * hover uses, ~the subtitle gray). Light-mode treatment is unchanged. */
[data-theme="dark"] .comment-icon {
    background: var(--desk-color-text-secondary);
}
[data-theme="dark"] .editor-mount .author-block__initials {
    background: var(--desk-color-text-secondary);
}

/* 0002 Loop 7 TG4.1 — empty-state title alignment.
 * Originally a `top: 24px` override on the absolute placeholder, made
 * redundant by Loop 11 TG2.1's switch to in-flow rendering: the title's
 * own padding-top: 24px now offsets the in-flow pseudo identically to
 * typed content, so empty-state and typed-state align without an override. */

/* =============================================================
 * Hyperlinks — ProseMirror `link` mark (schema.js → a.pm-link)
 * ============================================================= */
.editor-mount .ProseMirror a.pm-link {
    color: var(--desk-color-link, #2563eb);
    text-decoration: underline;
    cursor: pointer;
}

/* =============================================================
 * 0003 — Comment mark inline decoration
 * ============================================================= */

/* .pm-comment — rendered by the ProseMirror `comment` mark (schema.js).
 * Visual style is driven by #ContentRegion[data-comment-style]:
 *   highlight (default) — yellow background fill with box-decoration-break:
 *     clone so multi-line spans get full-height blocks on each line.
 *   underline — subtle yellow text-decoration; composes cleanly
 *     with bold/italic/underline without stacking fills.
 * The tokens are defined per-palette/theme in tokens.css. */

/* Underline mode */
#ContentRegion[data-comment-style="underline"] .pm-comment {
    text-decoration: underline;
    text-decoration-color: var(--desk-color-comment-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    background-color: transparent;
}

/* Highlight mode (default when attribute is absent or "highlight") */
#ContentRegion[data-comment-style="highlight"] .pm-comment,
#ContentRegion:not([data-comment-style]) .pm-comment {
    background-color: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* 0003 dogfood fix B — padding: 0 1px was producing tall yellow bars at
     * the left/right extents of the span when a selection overlapped the mark.
     * The background fill from box-decoration-break:clone extended into the
     * padding boxes at span boundaries, creating visible bar artifacts. Removed. */
}

/* Active state — underline mode (matches specificity of mode rules above) */
#ContentRegion[data-comment-style="underline"] .pm-comment[data-active="true"] {
    text-decoration-color: var(--desk-color-comment-underline-active);
}

/* Active state — highlight mode */
#ContentRegion[data-comment-style="highlight"] .pm-comment[data-active="true"],
#ContentRegion:not([data-comment-style]) .pm-comment[data-active="true"] {
    background-color: var(--desk-color-comment-highlight-active);
}

/* Pending pulse — mark exists in the doc but no open comment in the store yet
 * (someone else is mid-compose). Decoration dims to a faint yellow (never
 * fully transparent) and text fades to a medium gray so the span stays
 * readable but clearly signals "in progress." */
@keyframes comment-pending-pulse-underline {
    0%, 100% {
        text-decoration-color: var(--desk-color-comment-underline);
        color: inherit;
    }
    50% {
        text-decoration-color: rgba(234, 179, 8, 0.3);
        color: #999;
    }
}

@keyframes comment-pending-pulse-highlight {
    0%, 100% {
        background-color: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
        color: inherit;
    }
    50% {
        background-color: rgba(234, 179, 8, 0.08);
        color: #999;
    }
}

#ContentRegion[data-comment-style="underline"] .pm-comment--pending {
    animation: comment-pending-pulse-underline 2s ease-in-out infinite;
}

#ContentRegion[data-comment-style="highlight"] .pm-comment--pending,
#ContentRegion:not([data-comment-style]) .pm-comment--pending {
    animation: comment-pending-pulse-highlight 2s ease-in-out infinite;
}

/* Fallback / shared active state (lower specificity; mode rules above take precedence) */
.pm-comment[data-active="true"] {
    position: relative;
    z-index: 1;
}

.comment-card--active {
    box-shadow: 0 0 0 2px var(--desk-color-comment-underline);
}

/* Compressed-mode reply count badge. Rendered inside every card but only
 * revealed when the card is in compressed-collapsed mode AND total comments
 * > 1. The card is the positioned ancestor (position: absolute already), so
 * bottom/right anchor to the card box (≈48x48 in compressed-collapsed,
 * matching the pfp's visual footprint). */
.comment-card__count-badge {
    display: none;
}
#ContentRegion[data-margin-mode="compressed"] .comment-card:not([data-open="true"]) .comment-card__count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
}

/* 0003 Task 6.1 — compressed icon active indicator (0002 cards with a
 * sibling .comment-icon element) */
[data-margin-mode="compressed"] .comment-icon[data-active] {
    border: 4px solid var(--desk-color-comment-highlight-active);
}

/* 0003 Task 6.1 — compressed collapsed card pfp active indicator (0003 cards
 * whose "icon" is the collapsed .comment-card itself; outline is used instead
 * of border to avoid altering the box model on the circle pfp). */
[data-margin-mode="compressed"] .comment-card[data-active]:not([data-open="true"]) .comment-card__pfp {
    outline: 4px solid var(--desk-color-comment-highlight-active);
    outline-offset: 1px;
}

/* =============================================================
 * 0003 Task Group 6 — Comment drag handles
 * ============================================================= */

/* =============================================================
 * 0003 — Selection menu (task group 3)
 * ============================================================= */

/* Floating toolbar that appears above a non-empty body-content selection.
 * Positioned `fixed` so it follows the viewport coords returned by
 * coordsAtPos — no scroll-offset adjustment needed.
 *
 * z-index: 5 keeps it above editor content but strictly BELOW every UI
 * chrome surface:
 *   - .nav-region (z-index 50) — top bar
 *   - .action-bar (z-index 20) — formatting toolbar (action-bar gets an
 *     explicit z-index since position:fixed elements always paint above
 *     normal-flow elements regardless of value otherwise)
 *   - .status-bar (z-index 10) — bottom status row holding .status-pill
 * Floor of all three is 10, so any value < 10 puts the menu behind them.
 */
.selection-menu {
    position: fixed;
    z-index: 5;
    display: none; /* shown/hidden via JS */
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--desk-color-bg-panel, #fff);
    border: 1px solid var(--desk-color-border, rgba(0, 0, 0, 0.1));
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    user-select: none;
}

.selection-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--desk-color-text, #111);
    cursor: pointer;
    transition: background 0.1s;
}

.selection-menu__btn:hover:not(:disabled) {
    background: var(--desk-color-bg-hover, rgba(0, 0, 0, 0.06));
}

/* Disabled (Scrapyard, and Chat when the lens is absent) — mute the
 * icon only, not the button. Opacity on the button element creates a
 * compositing group that makes child ::after tooltips inherit the
 * reduced opacity (near-invisible). Targeting the inner icon span
 * keeps the button at opacity:1 so tooltips render at full opacity. */
.selection-menu__btn.disabled,
.selection-menu__btn:disabled {
    cursor: default;
}
.selection-menu__btn.disabled .selection-menu__btn-icon,
.selection-menu__btn:disabled .selection-menu__btn-icon {
    opacity: 0.35;
}

/* Tooltips on selection bar icon buttons */
.selection-menu__btn {
    position: relative;
}

.selection-menu__btn::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--desk-color-tooltip-bg);
    color: var(--desk-color-tooltip-text);
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: none;
}

.selection-menu__btn:hover::after {
    opacity: 1;
}

.selection-menu__btn--copy.is-copied {
    width: auto;
    min-width: 28px;
    padding: 0 6px;
}

.selection-menu__btn--copy.is-copied::after {
    opacity: 0;
}

.selection-menu__copied {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.selection-menu__icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.selection-menu__link-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.selection-menu__link-form[hidden],
.selection-menu__icons[hidden],
.selection-menu__link-chip[hidden],
.selection-menu__btn[hidden] {
    display: none;
}

.selection-menu__link-input {
    width: 220px;
    height: 24px;
    margin: 0;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--desk-color-text, #111);
    font-size: 12px;
    line-height: 24px;
    outline: none;
}

.selection-menu--linking {
    padding: 4px 6px;
}

.selection-menu__link-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.selection-menu__link-preview {
    max-width: 180px;
    margin: 0 2px 0 0;
    padding: 0 10px 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    border-right: 1px solid var(--desk-color-border, rgba(0, 0, 0, 0.1));
    background: transparent;
    color: var(--desk-color-link, #2563eb);
    font-size: 12px;
    line-height: 24px;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.selection-menu__link-preview:hover {
    color: var(--desk-color-link, #2563eb);
}

.selection-menu__btn--copy-link.is-copied {
    width: auto;
    min-width: 28px;
    padding: 0 6px;
}

.selection-menu__btn--copy-link.is-copied::after {
    opacity: 0;
}

[data-theme="dark"] .selection-menu {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── Comment count icon (task 5.1) ──────────────────────────────────────── */
/* Dedicated circle element to the right of the comment bubble button.
 * Matches the 26×26 px footprint of .action-btn--toggle-margin so it sits
 * flush in action-snap--5 alongside the other snap icons.
 * display:none default is set inline in the template; JS sets display:inline-flex
 * when count > 0 and display:none when count === 0. */

.action-bar__count-icon {
    font-family: Baskerville, 'Baskerville Old Face', serif;
    font-size: 13px;
    color: var(--desk-color-text, #1a1a1a);
    /* 0005 Loop 2 Task 3.4 — `pointer-events: auto` is explicit so a future
     * ancestor cannot accidentally suppress hover; the native title tooltip
     * still fires reliably without a special cursor cue. The element is
     * keyboard-focusable (tabindex=0 on the span) so the tooltip also
     * surfaces on focus. */
    pointer-events: auto;
    flex-shrink: 0;
    margin-left: 2px;
    /* Outline only on keyboard focus so the focusable badge doesn't draw a
     * ring on every click. */
    outline: none;
}
.action-bar__count-icon:focus-visible {
    outline: 2px solid var(--desk-color-text, #1a1a1a);
    outline-offset: 2px;
}

.comment-filter {
    position: relative;
    flex-shrink: 0;
    margin-left: 2px;
}
.action-btn--comment-filter {
    background: transparent;
    border: 1px solid transparent;
    color: var(--desk-color-text-secondary);
    height: 26px;
    min-width: 26px;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.action-btn--comment-filter:hover,
.action-btn--comment-filter[aria-expanded="true"] {
    color: var(--desk-color-text);
    border-color: var(--desk-color-border-subtle);
}
.comment-filter__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 160px;
    padding: 8px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--desk-color-shadow);
}
.comment-filter__menu[hidden] {
    display: none;
}
.comment-filter__shortcuts {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.comment-filter__shortcut {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-family: inherit;
    color: var(--desk-color-accent, #4285f4);
    cursor: pointer;
}
.comment-filter__shortcut:hover {
    text-decoration: underline;
}
.comment-filter__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--desk-color-text);
    padding: 3px 0;
    cursor: pointer;
}
.comment-filter__sep {
    height: 1px;
    background: var(--desk-color-border-subtle);
    margin: 6px 0;
}
.pm-comment--filtered {
    text-decoration: none !important;
    background-color: transparent !important;
}

.comment-card__pfp--reassign {
    cursor: pointer;
}
.comment-card__reassign {
    position: absolute;
    top: 42px;
    left: 6px;
    z-index: 30;
    width: 200px;
    padding: 8px;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--desk-color-shadow);
}
.comment-card__reassign[hidden] {
    display: none;
}
.comment-card__reassign-search {
    width: 100%;
    margin-bottom: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 4px;
    background: var(--desk-color-bg-elevated, var(--desk-color-bg-surface));
    color: var(--desk-color-text);
}
.comment-card__reassign-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.comment-card__reassign-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
}
.comment-card__reassign-item:hover {
    background: var(--desk-color-bg-elevated);
}

/* ─── Files modal — the writer's file explorer ──────────────────────────────
 * Wide dialog (The Desk, Atelier look): favorites as paper cards, the rest
 * in a sortable table. Grid rows, tag chips, metadata columns, and a per-row
 * ⋮ menu. The pin zone scrolls away; the table header sticks to the top of
 * the scroll region so filters stay reachable. */

.modal-dialog:has(.files-modal) {
    max-width: min(1060px, calc(100vw - 48px));
    max-height: calc(92vh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-dialog:has(.files-modal) .modal-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.files-modal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-dialog:has(.files-modal) .modal-close {
    top: 10px;
    right: 16px;
    font-size: 16px;
    padding: 2px;
}

/* Pin the modal's TOP edge — as search shortens the list, the modal must
 * shrink from the bottom only (a center-anchored modal "breathes" weirdly
 * while filtering). */
.modal-overlay:has(.files-modal) {
    align-items: flex-start;
    padding-top: 8vh;
}

/* Unified top bar — three sections: count heading (left), expanding
 * search (center), view toggle + create (right). */
.files-top-bar__left,
.files-top-bar__right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.files-top-bar__right {
    justify-content: flex-end;
}

.files-top-bar__center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Expanding search — a circular icon that grows into a field. The wrap is
 * centered in the middle section, so the field appears to expand outward
 * from the center. */
.files-search-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 999px;
    background: var(--desk-color-bg-surface);
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-search-wrap.is-open {
    background: var(--desk-color-bg-elevated);
}

.files-search-btn {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--desk-color-text-muted);
}

.files-search-btn:hover {
    color: var(--desk-color-text);
}

.files-search {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    transition: width var(--desk-transition-speed) var(--desk-transition-ease),
                opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-search-wrap.is-open .files-search {
    width: 220px;
    opacity: 1;
    padding: 4px 12px 4px 0;
}

.files-search:focus {
    outline: none;
}

/* Scrollable desk body — the pin zone scrolls away; the table header
 * sticks to the top of this region. overflow:hidden would clip scroll
 * (that was the Atelier bug). The dialog flex column bounds the height. */
.files-body {
    flex: 1 1 auto;
    min-height: 160px;
    max-height: min(560px, calc(100vh - 280px));
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 12px;
}

/* ── Rows — CSS grid, fixed height, single-line truncation everywhere. ──
 * Ledger: star | title | tags | words | versions | comments | publish |
 * date | menu. Compact (other schemes): star | title | tags | words |
 * date | menu. */
.files-row {
    display: grid;
    align-items: center;
    min-height: 50px;
    padding: 6px;
    border-top: 1px solid var(--desk-color-border-subtle);
    cursor: pointer;
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-row--ledger {
    grid-template-columns: 32px minmax(0, 1fr) 168px 60px 64px 74px 82px 146px 36px;
}

.files-row--compact {
    grid-template-columns: 32px minmax(0, 1fr) 170px 110px 150px 36px;
}

.files-row:hover {
    background-color: var(--desk-color-bg-elevated);
}

/* Inline edit mode (Rename / Tags) — the row grows to fit the form. */
.files-row.is-editing {
    height: auto;
    min-height: 50px;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: default;
}

.files-row.is-editing:hover {
    background: none;
}

.files-row.is-editing .files-hover-btn {
    display: none;
}

/* Tagging / scheduling still borrow the metadata columns. Rename keeps
 * words / versions / comments / publish / date visible. */
.files-row.is-editing:not(:has([data-files-edit="rename"])) .files-row__num,
.files-row.is-editing:not(:has([data-files-edit="rename"])) .files-row__date {
    display: none;
}

/* Stars and featured tags would re-render (and wipe) an in-progress rename. */
.files-body.is-renaming .files-row__star {
    visibility: hidden;
    pointer-events: none;
}

.files-lheader--renaming .files-lheader__tags {
    visibility: hidden;
    pointer-events: none;
}

.files-row.is-editing [data-files-edit="tags"] {
    grid-column: 3 / -2;
}

.files-row.is-editing [data-files-edit="schedule"] {
    grid-column: 4 / -2;
}

/* Renaming borrows the tags column for wider inputs; the tags cell hides. */
.files-row:has([data-files-edit="rename"]) [data-files-edit="rename"] {
    grid-column: 2 / 4;
}

.files-row:has([data-files-edit="rename"]) .files-row__tags {
    display: none;
}

.files-body.is-renaming .files-row:not(:has([data-files-edit="rename"])) .files-row__tags {
    visibility: hidden;
    pointer-events: none;
}

/* Hover actions — "Rename" beside the title, "Add tags" in the tags cell,
 * "Schedule" in the publish column. Hidden until the row is hovered. */
.files-hover-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    padding: 2px 6px;
    border-radius: var(--desk-radius-sm);
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-row:hover .files-hover-btn {
    visibility: visible;
    opacity: 1;
}

.files-hover-btn:hover {
    color: var(--desk-color-accent);
    text-decoration: underline;
}

.files-row__star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--desk-color-text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    transition: color var(--desk-transition-speed) var(--desk-transition-ease),
                background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-row__star:hover {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.files-row__star.is-on {
    color: #d9a514;
}

.files-row__main {
    min-width: 0;
    padding-right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.files-row__text {
    flex: 1;
    min-width: 0;
}

.files-row__title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--desk-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-row__subtitle {
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--desk-color-text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-row__tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    max-height: 35px;
    overflow: hidden;
    padding-right: 8px;
}

.files-tag {
    box-sizing: border-box;
    height: 16px;
    font-size: 10px;
    line-height: 14px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--desk-color-bg-elevated) 40%, var(--desk-color-bg-surface) 60%);
    border: 1px solid var(--desk-color-border-subtle);
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

.files-row__num {
    font-size: 12px;
    color: var(--desk-color-text-muted);
    text-align: right;
    padding-right: 14px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.files-row__date {
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    padding-right: 8px;
}

/* Sortable table header — sticks to the top of .files-body once the
 * pin zone has scrolled away. */
.files-lheader {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 168px 60px 64px 74px 82px 146px 36px;
    align-items: center;
    height: 34px;
    padding: 0 6px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--desk-color-bg-surface);
    border-bottom: 1px solid var(--desk-color-border-subtle);
    box-shadow: 0 1px 0 var(--desk-color-border-subtle);
}

.files-lheader + .files-row {
    border-top: none;
}

.files-lheader__col,
.files-lheader__static {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

.files-lheader__col {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    padding: 0 14px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.files-lheader__col--left {
    text-align: left;
    justify-content: flex-start;
}

.files-lheader__col--vcount {
    text-transform: none;
    letter-spacing: 0;
}

.files-lheader__col:last-of-type {
    padding-right: 8px;
}

.files-lheader__col:hover,
.files-lheader__col.is-active {
    color: var(--desk-color-text);
}

.files-lheader__icon,
.files-lheader__filter {
    display: block;
    flex: none;
}

.files-lheader__tags-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.files-lheader__filter {
    width: 13px;
    height: 13px;
    color: var(--desk-color-text);
}

.files-lheader__tags-btn.is-active .files-lheader__filter {
    color: var(--desk-color-accent);
}

/* Group labels (Journal time buckets, Shelf tag sections, Study list). */
.files-group__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--desk-color-text-muted);
    padding: 14px 12px 6px;
}

/* Paper cards (favorites strip) — light gray well behind the pin zone. */
.files-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
    padding: 22px 18px;
    background: color-mix(in srgb, var(--desk-color-bg-elevated) 75%, var(--desk-color-bg-surface) 25%);
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.files-card {
    width: 138px;
    height: 174px;
    display: flex;
    flex-direction: column;
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 16px;
    box-shadow: 0 2px 8px var(--desk-color-shadow);
    padding: 12px 10px 8px;
    position: relative;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.files-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 22px var(--desk-color-shadow);
}

.files-card__star {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #d9a514;
    font-size: 13px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.files-card__star:hover {
    background: var(--desk-color-bg-elevated);
}

.files-card__head {
    flex: none;
    margin: 0 16px 0 0;
}

.files-card__rule {
    flex: none;
    height: 1px;
    margin: 6px 16px 6px 0;
    background: color-mix(in srgb, var(--desk-color-text-muted) 45%, transparent);
}

.files-card__title {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--desk-color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.files-card__subtitle {
    font-size: 10px;
    font-style: italic;
    line-height: 1.2;
    color: var(--desk-color-text-muted);
    margin: 1px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.files-card__preview {
    flex: 1;
    min-height: 0;
    font-size: 8px;
    line-height: 1.4;
    color: var(--desk-color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.files-card__meta {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
}

.files-card__words {
    font-size: 10px;
    color: var(--desk-color-text-muted);
}

.files-card__comments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--desk-color-text-muted);
}

.files-card__comments .files-lheader__icon {
    width: 11px;
    height: 11px;
}

.files-card--new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-style: dashed;
    border-radius: 16px;
    background: none;
    box-shadow: none;
    font-family: inherit;
}

.files-card--new:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--desk-color-accent);
}

.files-card__plus {
    font-size: 28px;
    line-height: 1;
    color: var(--desk-color-text-muted);
}

.files-card__new-label {
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.files-card--new:hover .files-card__plus,
.files-card--new:hover .files-card__new-label {
    color: var(--desk-color-accent);
}

.files-cards__hint {
    align-self: center;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    padding: 0 8px;
}

/* Tag filter chips (Shelf scheme). */
.files-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.files-chip {
    font-size: 12px;
    font-family: inherit;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--desk-color-border-subtle);
    background: none;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-chip:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.files-chip.is-selected {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-weight: 500;
}

.files-shelf-hint {
    padding: 16px 12px 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

/* Corpus stats strip (Study scheme). */
.files-stats {
    display: flex;
    gap: 36px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.files-stat__num {
    font-size: 22px;
    font-weight: 600;
    color: var(--desk-color-text);
    font-variant-numeric: tabular-nums;
}

.files-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--desk-color-text-muted);
    margin-top: 2px;
}

/* Inline edit forms (Rename / Tags / Schedule) — fields on the left,
 * Save/Cancel to the right. */
.files-edit {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-right: 14px;
}

.files-edit__fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.files-edit__input {
    width: 100%;
    font-size: 13px;
    font-family: inherit;
    padding: 4px 8px;
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    box-sizing: border-box;
}

.files-edit__input:focus {
    outline: none;
    border-color: var(--desk-color-accent);
}

.files-edit__input--subtitle {
    font-size: 12px;
}

/* One-at-a-time tag entry: narrow input with an autocomplete flyout,
 * draft chips (each removable) to its left. Overflow must stay visible or
 * the .files-row__tags base style would clip the autocomplete flyout. */
.files-edit--tags {
    overflow: visible;
}

.files-edit__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.files-tag--edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.files-tag__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.files-tag__remove:hover {
    color: var(--desk-color-text);
}

.files-edit__combo {
    position: relative;
    display: inline-flex;
}

.files-edit__input--tag {
    width: 104px;
    font-size: 12px;
}

.files-edit__input--date {
    width: 150px;
    font-size: 12px;
}

.files-edit__suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 40;
    background: var(--desk-color-bg-panel, var(--desk-color-bg-surface));
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    box-shadow: 0 4px 12px var(--desk-color-shadow);
    min-width: 140px;
    padding: 2px 0;
    max-height: 180px;
    overflow-y: auto;
}

.files-edit__suggest[hidden] {
    display: none;
}

.files-edit__suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
    white-space: nowrap;
}

.files-edit__suggest-item:hover {
    background: var(--desk-color-bg-elevated);
}

.files-edit__actions {
    display: flex;
    gap: 6px;
    flex: none;
}

.files-edit__save,
.files-edit__cancel {
    font-size: 11px;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
    border: 1px solid var(--desk-color-border-subtle);
    background: none;
    color: var(--desk-color-text-muted);
}

.files-edit__save {
    background: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
    color: #ffffff;
}

.files-edit__cancel:hover {
    color: var(--desk-color-text);
}

/* Per-row 3-dot action menu. The trigger is a 24x24 circle that picks up a
 * light-gray background on hover — same idiom as `.comment-card__menu-trigger`
 * so the affordance reads identically across the desk surface. The dropdown
 * is absolutely positioned beneath the trigger; JS toggles `hidden` on click. */
.files-row__actions {
    justify-self: end;
    padding-right: 4px;
    /* Always the last grid column — edit modes hide sibling cells, which
     * would otherwise let auto-placement pull the menu leftward. */
    grid-column: -2;
}

.files-row__menu {
    position: relative;
    display: inline-block;
}

.files-row__menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-row__menu-trigger:hover,
.files-row__menu-trigger[aria-expanded="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.files-row__menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--desk-color-bg-panel, var(--desk-color-bg-surface));
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    box-shadow: 0 4px 12px var(--desk-color-shadow);
    min-width: 150px;
    padding: 4px 0;
}

.files-row__menu-dropdown[hidden] {
    display: none;
}

.files-row__menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--desk-color-text);
    cursor: pointer;
    white-space: nowrap;
}

.files-row__menu-item:hover {
    background: var(--desk-color-bg-elevated);
}

.files-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--desk-color-text-muted);
    font-size: 13px;
}

/* Unified top toolbar — count heading on the left, expanding search in
 * the center, Active|Archive + New essay on the right. Zero horizontal
 * padding so both ends sit flush with the scroll region's borders below. */
.files-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 0 0 12px 0;
    flex: none;
}

/* Override the global `.modal-content h2 { margin: 0 0 12px 0 }` so the
 * heading sits flush in the flex row without a phantom 12px below it. */
.files-modal__heading {
    margin: 0;
    white-space: nowrap;
}

/* Active|Archive view toggle — pill background on the selected option. */
.files-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.files-view-toggle__option {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    border-radius: var(--desk-radius-sm);
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-view-toggle__option[aria-selected="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-weight: 500;
    border-radius: 999px;
}

/* "Create new essay" — primary blue button using the desk accent color. */
.files-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px 8px 14px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.files-create-btn:hover {
    opacity: 0.9;
}

.files-create-btn__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    margin-top: -1px;
}

/* Publish column — a set date reads as plain text until hovered. */
.files-publish-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    padding: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.files-publish-btn:hover {
    color: var(--desk-color-text);
    text-decoration: underline;
}

/* Tags header dropdown — All Tags / Grouped / per-tag rename and delete. */
.files-lheader__tags {
    position: relative;
    min-width: 0;
    text-align: left;
}

.files-tagmenu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 40;
    width: 250px;
    background: var(--desk-color-bg-panel, var(--desk-color-bg-surface));
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    box-shadow: 0 4px 12px var(--desk-color-shadow);
    text-transform: none;
    letter-spacing: normal;
}

.files-tagmenu__view {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
}

.files-tagmenu__view:hover {
    background: var(--desk-color-bg-elevated);
}

.files-tagmenu__view.is-selected {
    font-weight: 500;
    color: var(--desk-color-accent);
}

.files-tagmenu__list {
    border-top: 1px solid var(--desk-color-border-subtle);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.files-tagmenu__row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
}

.files-tagmenu__pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    text-align: left;
    padding: 6px 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
    border-radius: var(--desk-radius-sm);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.files-tagmenu__pick:hover {
    background: var(--desk-color-bg-elevated);
}

.files-tagmenu__pick.is-selected {
    font-weight: 500;
}

.files-tagmenu__mark {
    color: var(--desk-color-text-muted);
    font-size: 12px;
}

.files-tagmenu__pick.is-selected .files-tagmenu__mark {
    color: var(--desk-color-accent);
}

.files-tagmenu__icon {
    flex: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.files-tagmenu__icon:hover {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.files-tagmenu__row--edit,
.files-tagmenu__row--confirm {
    gap: 6px;
    padding: 4px 8px;
}

.files-tagmenu__row--edit .files-edit__input--tag {
    flex: 1;
    width: auto;
    min-width: 0;
}

.files-tagmenu__confirm-label {
    flex: 1;
    font-size: 12px;
    color: var(--desk-color-text);
    white-space: nowrap;
}

.files-tagmenu__danger {
    background: #c0392b;
    border: 1px solid #c0392b;
    color: #ffffff;
    font-size: 11px;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
}

.files-tagmenu__danger:hover {
    opacity: 0.9;
}

.files-tagmenu__empty {
    padding: 12px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    text-align: center;
}

.files-tagmenu__footer {
    padding: 6px 8px;
    border-top: 1px solid var(--desk-color-border-subtle);
}

/* ─── Versions modal ─────────────────────────────────────────────────────────
 * Mirrors the Files modal table idiom: horizontal-line rows, fixed top/
 * bottom bars around a scrollable table region. Row actions are inline
 * icon buttons (Duplicate / Export / Archive) with CSS tooltips — no
 * dropdown, so nothing clips against the scroll region. Archived rows
 * render greyed; the current version is a blinking dot in the Split
 * column, and archived drafts keep a text badge. */

/* Wider dialog — the row carries name + words + date + three icons. */
.modal-dialog:has(.versions-table-wrap) {
    max-width: min(720px, calc(100vw - 48px));
}

.versions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.versions-table .versions-row {
    cursor: pointer;
    border-top: 1px solid var(--desk-color-border-subtle);
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-table .versions-row:first-child {
    border-top: none;
}

.versions-table .versions-row:hover {
    background-color: var(--desk-color-bg-elevated);
}

.versions-row--current {
    cursor: default;
}

.versions-row--archived {
    cursor: default;
    opacity: 0.55;
}

/* Name column absorbs the leftover width so words/date/icons stay hugged
 * to the right edge and vertically centered as one line. */
.versions-row__main {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

.versions-row__name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.versions-row__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--desk-color-text);
}

.versions-row__badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

.versions-row__current-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1967d2;
    animation: versions-current-pulse 1.6s ease-in-out infinite;
}

@keyframes versions-current-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
    .versions-row__current-dot {
        animation: none;
    }
}

/* Rename — quiet text button revealed on row hover, directly right of the
 * version name. Focus-visible also reveals it for keyboard users. */
.versions-row__rename-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease),
                background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-row:hover .versions-row__rename-btn,
.versions-row__rename-btn:focus-visible {
    opacity: 1;
}

.versions-row__rename-btn:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.versions-row__rename-input {
    font-size: 14px;
    font-weight: 500;
    color: var(--desk-color-text);
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    padding: 2px 8px;
    width: 100%;
    max-width: 220px;
    outline: none;
}

.versions-row__words {
    padding: 12px 8px 12px 16px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.versions-row__comments {
    padding: 12px 8px 12px 8px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.versions-row__comments svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
}

.versions-row__date {
    padding: 12px 8px 12px 16px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.versions-row__actions {
    padding: 12px 12px 12px 16px;
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
    width: 128px;
}

/* Inline icon actions — 24px hit targets with a CSS tooltip (aria-label
 * mirrored via ::after, same idiom as .selection-menu__btn). Four fixed
 * slots per row (placeholder spans fill unused ones) so the Split /
 * Duplicate / Export / Archive icons form clean vertical columns across rows. */
.versions-icon-btn,
.versions-icon-slot {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.versions-icon-btn {
    cursor: pointer;
    color: var(--desk-color-text-muted);
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-icon-btn:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

/* Icon tooltip — a single fixed-position element that versions.js appends
 * to document.body and centers above the hovered icon. Living outside the
 * modal DOM means the table-wrap's overflow can never clip it, and the
 * high z-index keeps it above the modal overlay (z-index 200). */
.versions-tooltip {
    position: fixed;
    z-index: 400;
    background: var(--desk-color-tooltip-bg);
    color: var(--desk-color-tooltip-text);
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

.versions-tooltip[hidden] {
    display: none;
}

.versions-empty td {
    padding: 24px 16px;
    text-align: center;
    color: var(--desk-color-text-muted);
    font-size: 13px;
}

/* Taller list — the modal is allowed to grow so many versions fit before
 * the region scrolls. */
.versions-table-wrap {
    max-height: min(62vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--desk-color-border-subtle);
    border-left: 1px solid var(--desk-color-border-subtle);
    border-right: 1px solid var(--desk-color-border-subtle);
}

.versions-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px 0;
}

.versions-top-bar__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.versions-modal__heading {
    margin: 0;
}

/* Top-bar toggles ("Show time created" / "Show archived") — quiet text
 * buttons; pressed state picks up the pill background used by the Files
 * modal's view-toggle options. */
.versions-toggle {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--desk-color-text-muted);
    border-radius: var(--desk-radius-sm);
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-toggle:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.versions-toggle[aria-pressed="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-weight: 500;
}

.versions-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--desk-color-border-subtle);
}

/* "New draft" — primary accent button (same idiom as .files-create-btn). */
.versions-create-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-create-btn:hover {
    opacity: 0.9;
}

.versions-create-btn:disabled,
.versions-import-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* "Import markdown" — secondary outline button. */
.versions-import-btn {
    display: inline-block;
    padding: 8px 16px;
    background: none;
    color: var(--desk-color-text);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.versions-import-btn:hover {
    background: var(--desk-color-bg-elevated);
}

/* 0005 task 1.1 — Share modal: public toggle, share URL input, copy button.
 * Toggle uses role="switch" + aria-checked (driven by JS in 1.4). The thumb
 * slides via translateX when aria-checked="true". URL input is readonly with
 * onfocus="this.select()" so the user can grab the link with one click. */
.share-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 12px 0;
}

.share-modal__label {
    font-size: 14px;
    color: var(--desk-color-text-secondary);
    flex-shrink: 0;
}

.share-modal__switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-elevated);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.share-modal__switch[aria-checked="true"] {
    background: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
}

.share-modal__switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--desk-color-bg-surface);
    box-shadow: 0 1px 2px var(--desk-color-shadow);
    transition: transform var(--desk-transition-speed) var(--desk-transition-ease);
}

.share-modal__switch[aria-checked="true"] .share-modal__switch-thumb {
    transform: translateX(18px);
}

.share-modal__url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}

.share-modal__url-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-family: inherit;
}

.share-modal__url-input:focus {
    outline: none;
    border-color: var(--desk-color-border);
}

.share-modal__copy-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--desk-transition-speed) var(--desk-transition-ease);
}

.share-modal__copy-btn:hover {
    opacity: 0.9;
}

/* Disabled when essay is private — copying the URL is misleading because
 * the link won't grant access. The button stays in the layout (so the row
 * doesn't reflow on toggle) but reads as inactive. */
.share-modal__copy-btn:disabled,
.share-modal__copy-btn[aria-disabled="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text-muted);
    border-color: var(--desk-color-border-subtle);
    cursor: not-allowed;
    opacity: 1;
}
.share-modal__copy-btn:disabled:hover,
.share-modal__copy-btn[aria-disabled="true"]:hover {
    opacity: 1;
}

.share-modal__hint {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text-secondary);
    line-height: 1.5;
}

/* 0005 task 1.4 — inline error message used by share-modal.js when the
 * is_public toggle POST fails. Hidden by default; .share-modal__error[hidden]
 * is handled by the global [hidden] rule, but we re-state visuals here. */
.share-modal__error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--desk-color-danger, #c0392b);
}

.share-modal__error[hidden] {
    display: none;
}

/* Success state for the Copy link button — the JS toggles this class for
 * 1500ms after a successful clipboard write. */
.share-modal__copy-btn--success {
    background: var(--desk-color-success, #27ae60);
    border-color: var(--desk-color-success, #27ae60);
}

/* =============================================================
 * 0005 task 2.2 — reader-mode visual gates
 * ============================================================= */

/* ToolRegion collapse: in reader mode the lens icons stay clickable (Loop 2
 * 2.4 — un-disable them so guests can interact).
 *
 * 0005 Loop 6 task 2.1 — the prior `display: none` override on the panel
 * zone in reader mode has been dropped. Admin's request: "We can click
 * icons now, but the panel still doesn't open. Please make it openable!"
 * The base `.panel-zone` rule uses width-based open/close (closed → 0,
 * default → 216px, expanded → min(50vw, 560px)) and panel.js initialises
 * the panel to `closed`, so removing the display:none override yields the
 * desired behaviour: panel hidden by default, openable via lens icons.
 * Lens panels themselves remain placeholder stubs until 0006 ships. */

/* =============================================================
 * 0005 task group 4 — MarginPane mixed-source comment cards
 *
 * Reviewer-source comments (data-source="reviewer") render with the
 * SAME body, reply, and resolve UI as human comments. The only visual
 * differentiator is a 2px yellow accent on the card's left edge.
 *
 * 0005 Loop 2 Task 3.1 — the prior R badge (and its positioning-wrapper
 * shell on the pfp) was dropped: the border alone is the cue. The pfp now
 * renders as a direct child of .comment-card__header again.
 * ============================================================= */

/* 0005 Task 4.2 — yellow accent border on reviewer cards.
 * The base .comment-card already has a 1px subtle border on all sides;
 * this override swaps the LEFT edge to a 2px yellow stripe and keeps the
 * other three sides untouched, so reviewer cards read as the same shape
 * as owner cards with one accent edge. */
.comment-card[data-source="reviewer"] {
    border-left: 2px solid #f5b800;
}

/* 0005 Task 7.3 — arrival pulse for poll-surfaced reviewer comments.
 * render.js stamps `.comment-card--just-arrived` on a freshly-rendered
 * card whose client_id was added to the cache by the most recent poll,
 * then setTimeout-removes the class after 500ms. The keyframes fade a
 * yellow background tint in and back out so the card reads as "new"
 * without obscuring its content. */
@keyframes comment-card-arrival-pulse {
    0% {
        background: var(--desk-color-bg-surface);
        box-shadow: 0 1px 2px var(--desk-color-shadow);
    }
    50% {
        background: rgba(245, 184, 0, 0.25);
        box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.4);
    }
    100% {
        background: var(--desk-color-bg-surface);
        box-shadow: 0 1px 2px var(--desk-color-shadow);
    }
}

.comment-card--just-arrived {
    animation: comment-card-arrival-pulse 0.5s ease-out;
}

/* Respect the user's reduced-motion preference. With reduce, skip the
 * animation entirely — no flash, no movement. */
@media (prefers-reduced-motion: reduce) {
    .comment-card--just-arrived {
        animation: none;
    }
}

/* =============================================================
 * 0006 — Lens preview panels
 *
 * Each `#lens-panel-{id}` div is pre-rendered hidden inside `#PanelZone`.
 * panel-machine.js toggles `hidden` to switch lenses. All visual states
 * use --desk-color-* tokens so light / dark / palette swaps just work.
 * ============================================================= */

.lens-panels {
    height: 100%;
    overflow: hidden;
}

.lens-panel {
    height: 100%;
    overflow-y: auto;
    padding: 16px 18px 28px;
    color: var(--desk-color-text);
    font-size: 14px;
    line-height: 1.5;
    /* Pattern-wiki entries quote long author names / hyphenless words that
     * could blow out the 216px panel width. Break onto the next line
     * instead of overflowing. Scoped to the whole panel so every lens
     * inherits the same defensive wrap. */
    overflow-wrap: anywhere;
}

.lens-panel[hidden] {
    display: none;
}

.lens-preview__hero {
    margin-bottom: 18px;
}

.lens-preview__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.lens-preview__tagline {
    margin: 0 0 10px;
    font-size: 13px;
    font-style: italic;
    color: var(--desk-color-text-secondary);
}

.lens-preview__body {
    margin: 0;
    font-size: 13px;
    color: var(--desk-color-text-secondary);
    line-height: 1.55;
}

.lens-preview__demo {
    border-top: 1px solid var(--desk-color-border-subtle);
    padding-top: 14px;
}

.lens-preview__demo-caption {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Dark-mode scrollbars for every lens panel and nested overflow
 * regions (Agents list, Report, Patterns, Chat thread, Thesis, …).
 * color-scheme is required so macOS overlay thumbs follow the panel,
 * not the OS light appearance. */
[data-theme="dark"] .lens-panel,
[data-theme="dark"] .lens-panel * {
    color-scheme: dark;
    scrollbar-color: var(--desk-color-text-muted) var(--desk-color-bg);
}
[data-theme="dark"] .lens-panel::-webkit-scrollbar-track,
[data-theme="dark"] .lens-panel *::-webkit-scrollbar-track {
    background: var(--desk-color-bg);
}
[data-theme="dark"] .lens-panel::-webkit-scrollbar-thumb,
[data-theme="dark"] .lens-panel *::-webkit-scrollbar-thumb {
    background: var(--desk-color-text-muted);
}
[data-theme="dark"] .lens-panel::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .lens-panel *::-webkit-scrollbar-thumb:hover {
    background: var(--desk-color-text-secondary);
}

/* ---- Inquiries ---- */

.inquiries-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.inquiries-chip {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease),
                color var(--desk-transition-speed) var(--desk-transition-ease);
}

.inquiries-chip:hover {
    border-color: var(--desk-color-accent);
}

.inquiries-chip[aria-pressed="true"],
.inquiries-chip.inquiries-chip--active {
    background: var(--desk-color-accent);
    color: var(--desk-color-bg);
    border-color: var(--desk-color-accent);
}

/* Header help tooltip — paragraph lives here, not in the panel body. */
.lens-preview--inquiries .chat-header__tagline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inquiries-header__help {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--desk-color-text-muted);
    cursor: help;
}

.inquiries-header__help:hover,
.inquiries-header__help:focus-visible {
    color: var(--desk-color-text);
}

.inquiries-header__help::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 200;
    width: min(240px, 70vw);
    padding: 8px 10px;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-tooltip-bg);
    color: var(--desk-color-tooltip-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
}

.inquiries-header__help:hover::after,
.inquiries-header__help:focus-visible::after {
    opacity: 1;
}

/* Detail box */

.inquiries-detail {
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
    min-height: 96px;
}

.inquiries-detail__placeholder {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    font-style: italic;
}

.inquiries-persona__name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.inquiries-persona__desc {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.inquiries-persona ul {
    margin: 0;
    padding-left: 20px;
}

.inquiries-persona li {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--desk-color-text-secondary);
}

/* Generate controls */

.inquiries-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.inquiries-model-picker {
    max-width: none;
    width: 100%;
}

.inquiries-generate-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inquiries-slider {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inquiries-slider__label {
    flex: 0 0 auto;
    width: 1.2em;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--desk-color-text);
    text-align: center;
}

.inquiries-slider input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--desk-color-accent);
    cursor: pointer;
}

.inquiries-generate {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-accent);
    color: var(--desk-color-text-on-accent, #ffffff);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.inquiries-generate:hover:not([disabled]) {
    opacity: 0.85;
}

.inquiries-generate[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.inquiries-status {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.inquiries-status[hidden] {
    display: none;
}

.inquiries-status--error {
    color: var(--desk-color-danger, #b3261e);
}

/* Result cards */

.inquiries-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.inquiry-card {
    position: relative;
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-elevated);
    box-shadow: 0 1px 2px var(--desk-color-shadow);
    padding: 10px 12px 36px;
}

.inquiry-card__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--desk-color-text);
}

.inquiry-card__status {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.inquiry-card__status:empty {
    display: none;
}

.inquiry-card[data-state="not-found"] .inquiry-card__status,
.inquiry-card[data-state="error"] .inquiry-card__status {
    color: var(--desk-color-danger, #b3261e);
}

.inquiry-card__actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.inquiry-card__add,
.inquiry-card__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    font-size: 12px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.inquiry-card__dismiss {
    width: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
    color: var(--desk-color-text-muted);
}

.inquiry-card__add:hover:not(:disabled),
.inquiry-card__dismiss:hover {
    background: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
}

.inquiry-card__add:disabled {
    cursor: default;
}

.inquiry-card[data-state="added"] {
    border-color: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.4));
}

.inquiry-card[data-state="added"] .inquiry-card__add {
    background: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
}

.inquiry-card--pending {
    opacity: 0.7;
}

/* ---- Thesis ---- */

/* Panel flex chain so the active view fills remaining height and scrolls:
 * .lens-panel (height:100%) → .lens-preview--thesis (height:100%, flex
 * column) → .thesis-body (flex:1, flex column) → .thesis-view (flex:1,
 * overflow-y:auto). */
.lens-preview--thesis {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.thesis-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.thesis-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.thesis-view[hidden] {
    display: none;
}

.thesis-status {
    flex: 0 0 auto;
    margin-top: 8px;
}

/* Toolbar (History toggle) */

.thesis-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.thesis-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: transparent;
    color: var(--desk-color-text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.thesis-history-toggle:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.thesis-history-toggle[hidden] {
    display: none;
}

/* Intro view: orbit animation + one button */

.thesis-view--intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    overflow-y: hidden;
}

.thesis-view--intro[hidden] {
    display: none;
}

.thesis-orbit {
    position: relative;
    width: 132px;
    height: 132px;
}

.thesis-orbit__ring {
    position: absolute;
    inset: 12px;
    border: 1px dashed var(--desk-color-border-subtle);
    border-radius: 50%;
}

.thesis-orbit__center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--desk-color-accent);
    animation: thesis-orbit-pulse 2.8s ease-in-out infinite;
}

.thesis-orbit__sat {
    position: absolute;
    inset: 12px;
    animation: thesis-orbit-spin var(--thesis-orbit-duration, 16s) linear infinite;
}

.thesis-orbit__sat--2 { animation-delay: -4s; }
.thesis-orbit__sat--3 { animation-delay: -8s; }
.thesis-orbit__sat--4 { animation-delay: -12s; }

.thesis-orbit__dot {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--desk-color-text-muted);
    opacity: 0.75;
}

.thesis-orbit__sat--2 .thesis-orbit__dot { width: 6px; height: 6px; margin-left: -3px; opacity: 0.55; }
.thesis-orbit__sat--3 .thesis-orbit__dot { width: 9px; height: 9px; margin-left: -4.5px; opacity: 0.65; }
.thesis-orbit__sat--4 .thesis-orbit__dot { width: 5px; height: 5px; margin-left: -2.5px; opacity: 0.45; }

.thesis-orbit--busy {
    --thesis-orbit-duration: 3.5s;
}

.thesis-orbit--busy .thesis-orbit__center {
    animation-duration: 1.2s;
}

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

@keyframes thesis-orbit-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .thesis-orbit__sat,
    .thesis-orbit__center {
        animation: none;
    }
}

/* Section headings shared by options + history views */

.thesis-section-heading {
    margin: 4px 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.thesis-section-sub {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--desk-color-text-secondary);
}

.thesis-options-notice {
    margin-bottom: 10px;
}

/* Options view: multiple choice + write-in */

.thesis-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.thesis-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-elevated);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.thesis-option:hover {
    background: var(--desk-color-bg-surface);
}

.thesis-option--selected {
    border-color: var(--desk-color-accent);
    background: var(--desk-color-bg-surface);
}

.thesis-option__radio {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border: 1.5px solid var(--desk-color-border);
    border-radius: 50%;
    background: transparent;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.thesis-option--selected .thesis-option__radio {
    border-color: var(--desk-color-accent);
    box-shadow: inset 0 0 0 3.5px var(--desk-color-accent);
}

.thesis-option__body {
    flex: 1 1 auto;
    min-width: 0;
}

.thesis-option__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--desk-color-text);
}

.thesis-option__text--custom {
    font-weight: 600;
    margin-bottom: 6px;
}

.thesis-option__why {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--desk-color-text-muted);
}

.thesis-option__input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.thesis-option__input:focus {
    outline: none;
    border-color: var(--desk-color-accent);
}

.thesis-choose {
    width: 100%;
    margin-bottom: 12px;
}

/* Results view: pinned thesis + grouped move cards */

.thesis-pinned {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--desk-color-bg);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.thesis-option-card {
    padding: 10px 14px;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-surface);
    margin-bottom: 6px;
}

.thesis-option-card__label {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-accent);
}

.thesis-option-card__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.thesis-pinned__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.thesis-pinned__meta {
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.thesis-regenerate {
    padding: 3px 10px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.thesis-regenerate:hover:not(:disabled) {
    background: var(--desk-color-bg-surface);
}

.thesis-regenerate:disabled {
    opacity: 0.5;
    cursor: default;
}

.thesis-guidance__heading {
    margin: 12px 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--desk-color-text-muted);
}

.thesis-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* History view */

.thesis-history-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.thesis-back {
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--desk-color-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.thesis-back:hover {
    color: var(--desk-color-text);
}

.thesis-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thesis-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-elevated);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.thesis-history-item:hover {
    background: var(--desk-color-bg-surface);
}

.thesis-history-item--active {
    border-color: var(--desk-color-accent);
}

.thesis-history-item__date {
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.thesis-history-item__snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--desk-color-text);
}

/* ---- Patterns ---- */

/* Library-style tile grid: fixed-size square tiles held to the panel's
   right edge, one rotated element label per row, one dimension header
   per 3x3 block. Icon + serif name are dominant. On hover the icon
   shrinks into a white circle straddling the card's top edge, two
   stacked action buttons appear, and the core question shows as a
   multi-line tooltip above the cell. */
.patterns-menu {
    --patterns-card-size: 96px;
    --patterns-gap: 10px;
    /* Center the whole grid block (labels + cards) within the panel. */
    width: max-content;
    margin: 0 auto;
}

/* Dimension header — centered above each 3x3 block, with rule lines
   running out to the block's extents on either side. */
.patterns-dim-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--desk-color-text-muted);
}

.patterns-dim-header::before,
.patterns-dim-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--desk-color-border-subtle);
}

/* The header text is a button — opens the dimension's textbook overview. */
.patterns-dim-header__btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    transition: color var(--desk-transition-speed) var(--desk-transition-ease);
}

.patterns-dim-header__btn:hover {
    color: var(--desk-color-accent);
}

.patterns-dim-header:first-child {
    margin-top: 0;
}

/* One element row: rotated label + 3 cards. Row spacing matches the
   column gap so each dimension reads as an even 3x3 grid. */
.patterns-row {
    display: grid;
    grid-template-columns: 14px repeat(3, var(--patterns-card-size));
    gap: var(--patterns-gap);
    margin-bottom: var(--patterns-gap);
}

/* Element name, rotated to read bottom-to-top beside its row's
   left-most card. A button — opens the element's textbook overview. */
.patterns-element-label {
    justify-self: center;
    align-self: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
    transition: color var(--desk-transition-speed) var(--desk-transition-ease);
}

.patterns-element-label:hover {
    color: var(--desk-color-accent);
}

.patterns-card {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04);
    cursor: pointer;
    transition: border-color var(--desk-transition-speed) var(--desk-transition-ease),
                box-shadow var(--desk-transition-speed) var(--desk-transition-ease),
                transform var(--desk-transition-speed) var(--desk-transition-ease);
    /* Staggered fade-in each time the panel opens — the panel is toggled
       via [hidden], so the animation restarts on every open. --card-i is
       set inline per tile (0-26). */
    animation: patterns-card-in 240ms ease backwards;
    animation-delay: calc(var(--card-i, 0) * 22ms);
}

@keyframes patterns-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .patterns-card {
        animation: none;
    }
}

[data-theme="dark"] .patterns-card {
    background: var(--desk-color-bg-elevated);
}

.patterns-card:hover {
    border-color: var(--desk-color-border);
    box-shadow: 0 3px 12px rgba(15, 15, 18, 0.1);
    transform: translateY(-2px);
    /* Lift the hovered cell so its question tooltip renders above
       neighboring cells and headers. */
    z-index: 10;
}

/* Dimension accent — bottom edge, matching the desk's dimension hues:
   Idea = accent slate, Form = sage, Voice = terracotta. */
.patterns-card[data-dimension="idea"] { border-bottom: 2px solid var(--desk-color-accent); }
.patterns-card[data-dimension="form"] { border-bottom: 2px solid #7c9e72; }
.patterns-card[data-dimension="voice"] { border-bottom: 2px solid #b8704a; }
[data-theme="dark"] .patterns-card[data-dimension="form"] { border-bottom-color: #96bb8b; }
[data-theme="dark"] .patterns-card[data-dimension="voice"] { border-bottom-color: #d08860; }

.patterns-card__icon-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 58%;
    object-fit: contain;
    z-index: 4;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -60%);
    transition: top 180ms ease, transform 180ms ease, padding 180ms ease,
                background-color 180ms ease, box-shadow 180ms ease;
    will-change: transform;
}

/* Quick shrink on hover into a white circle whose center sits on the
   card's top edge — full opacity, the freed middle hosts the buttons. */
.patterns-card:hover .patterns-card__icon-img {
    top: 0;
    transform: translate(-50%, -50%) scale(0.74);
    padding: 9%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--desk-color-border-subtle),
                0 2px 8px rgba(15, 15, 18, 0.12);
}

/* Icon PNGs are dark-on-transparent — invert for dark theme. */
[data-theme="dark"] .patterns-card__icon-img {
    filter: invert(0.88);
}

[data-theme="dark"] .patterns-card:hover .patterns-card__icon-img {
    background: var(--desk-color-bg-elevated);
}

.patterns-card__name {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--desk-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    z-index: 2;
}

/* Core question — multi-line tooltip above the cell, wider than the
   cell and centered on it, slightly delayed so it doesn't flash on
   pass-through hovers. Serif to match the card names. Offset clears the
   hover icon-circle poking above the card edge. */
.patterns-card::after {
    content: attr(data-question);
    position: absolute;
    bottom: calc(100% + 26px);
    left: 50%;
    width: 170%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 7px 10px;
    background: var(--desk-color-tooltip-bg);
    color: var(--desk-color-tooltip-text);
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease 0ms;
}

.patterns-card:hover::after {
    opacity: 1;
    transition-delay: 350ms;
}

/* Hover overlay — just the two stacked action buttons, centered between
   the icon-circle's bottom edge and the pattern name. */
.patterns-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 12px 24px;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.patterns-card:hover .patterns-card__overlay,
.patterns-card:focus-within .patterns-card__overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.patterns-overlay-btn {
    width: 100%;
    max-width: 84px;
    padding: 3px 0;
    font-size: 10px;
    font-weight: 600;
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 999px;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease),
                background var(--desk-transition-speed) var(--desk-transition-ease);
}

.patterns-overlay-btn:hover {
    color: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
}

.patterns-overlay-btn--primary {
    color: #ffffff;
    background: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
}

.patterns-overlay-btn--primary:hover {
    color: #ffffff;
    opacity: 0.88;
}

.patterns-overlay-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.patterns-overlay-note {
    font-size: 10px;
    font-style: italic;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

/* Grading in flight — pulse the tile icon; overlay button says "Grading…" */
.patterns-card[data-state="running"] .patterns-card__icon-img {
    animation: patterns-grading-pulse 1.2s ease-in-out infinite;
}

.patterns-back {
    background: none;
    border: none;
    color: var(--desk-color-accent);
    cursor: pointer;
    padding: 0;
    margin-bottom: 12px;
    font-size: 13px;
}

.patterns-back:hover {
    text-decoration: underline;
}

.pattern-wiki {
    padding: 4px 0 10px;
}

.pattern-wiki__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.pattern-wiki__hint {
    margin: 0 0 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--desk-color-text-secondary);
}

.pattern-wiki__heading {
    margin: 12px 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
}

.pattern-wiki p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
}

.pattern-wiki__examples {
    margin: 0;
    padding-left: 18px;
}

.pattern-wiki__examples li {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.5;
}

.pattern-wiki__coming-soon {
    color: var(--desk-color-text-muted);
    font-style: italic;
}

/* ---- Textbook pages (Detail view — patterns, elements, dimensions) ---- */

.textbook {
    /* Generous side margins, matching the breathing room the All Patterns
       menu gets from centering its grid block. */
    padding: 0 28px 8px;
}

/* Icon + kicker/title masthead */
.textbook__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

/* Framed icon — white rounded square regardless of the page background */
.textbook__icon {
    flex: none;
    width: 96px;
    height: 96px;
    padding: 14px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04);
}

[data-theme="dark"] .textbook__icon {
    filter: invert(0.88);
    background: var(--desk-color-bg-elevated);
}

.textbook__kicker {
    margin: 0 0 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
}

.textbook__title {
    margin: 0;
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--desk-color-text);
}

.textbook__title-num {
    font-size: 15px;
    font-weight: 400;
    color: var(--desk-color-text-muted);
}

/* Guiding question — header-sized epigraph framing the page, with its own
   section rule below. */
.textbook__question {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.35;
    color: var(--desk-color-text);
}

/* Paywalled textbook: lock the panel, scroll the preview, pin Upgrade. */
.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .lens-preview--patterns,
.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .lens-preview__demo--patterns,
.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .patterns-detail:not([hidden]),
.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .pattern-wiki:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .lens-preview--patterns {
    height: 100%;
}

.lens-panel:has(.pattern-wiki:not([hidden]) .textbook--gated) .patterns-back {
    flex: none;
}

.textbook--gated {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

.textbook--gated .textbook__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 96px;
}

.textbook__blur {
    filter: blur(2.4px);
    opacity: 0.72;
    user-select: none;
    pointer-events: none;
}

.textbook__blur p {
    margin: 0 0 10px;
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--desk-color-text);
}

.textbook__gate {
    position: absolute;
    left: -28px;
    right: -28px;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 28px 8px;
    text-align: center;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--desk-color-bg-panel) 48%,
        var(--desk-color-bg-panel)
    );
    pointer-events: none;
}

.textbook__gate-copy {
    margin: 0;
    font-size: 14px;
    color: var(--desk-color-text);
}

.textbook__gate-btn {
    pointer-events: auto;
    padding: 6px 14px;
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.textbook__gate-btn:hover {
    opacity: 0.9;
}

.textbook__lede p,
.textbook__section-body p {
    margin: 0 0 10px;
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--desk-color-text);
}

.textbook__section {
    margin-top: 18px;
}

/* Section headers — small caps with a rule running to the right edge */
.textbook__section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
}

.textbook__section-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--desk-color-border-subtle);
}

.textbook__section-suffix {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.textbook__section-body ul,
.textbook__section-body ol {
    margin: 0;
    padding-left: 18px;
}

.textbook__section-body li {
    margin-bottom: 6px;
    font-family: var(--desk-body-font-family, Georgia, serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--desk-color-text);
}

/* Scoring criteria — numbered score badges instead of a plain ol */
.textbook__section-body--scoring ol {
    list-style: none;
    padding-left: 0;
    counter-reset: score;
}

.textbook__section-body--scoring ol li {
    counter-increment: score;
    position: relative;
    padding-left: 30px;
    margin-bottom: 8px;
}

.textbook__section-body--scoring ol li::before {
    content: counter(score);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--desk-color-border);
    border-radius: 50%;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--desk-color-text-muted);
    background: var(--desk-color-bg-elevated);
}

/* Cross-reference links — emphasized "Name (n.m)" mentions that jump to
   the referenced pattern/element page. */
.textbook-xref {
    color: var(--desk-color-accent);
    cursor: pointer;
    text-decoration: none;
}

.textbook-xref:hover {
    text-decoration: underline;
}

/* --- Patterns grader (patterns-grader v1, staff-only) ------------------- */

@keyframes patterns-grading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Unread red dot — tile corner, above the hover overlay so it stays
 * visible while hovering. */
.patterns-report-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0453e;
    pointer-events: none;
}

/* Per-pattern report article in the Detail region (rendered by patterns.js). */
.pattern-report {
    padding: 4px 0 10px;
}

/* Report header: icon | kicker + name + calibration | score dial. */
.pattern-report__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.pattern-report__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 10px;
    background: #fff;
}

.pattern-report__icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

[data-theme="dark"] .pattern-report__icon {
    filter: invert(0.88);
    background: var(--desk-color-bg-elevated);
}

.pattern-report__headings {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.pattern-report__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
}

.pattern-report__name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.pattern-report__calibration {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--desk-color-border-subtle);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
}

.pattern-report__calibration--ok {
    color: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
}

/* Score dial — 270° gauge, nine half-point ticks, color-coded arc. */
.pattern-report__dial {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    color: var(--desk-color-text-muted);
}

.pattern-report__dial--high { color: var(--desk-color-success, #22c55e); }
.pattern-report__dial--mid { color: var(--desk-color-warning, #d97706); }
.pattern-report__dial--low { color: var(--desk-color-danger, #ef4444); }

.pattern-report__dial svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pattern-report__dial-track {
    fill: none;
    stroke: var(--desk-color-border-subtle);
    stroke-width: 5;
    stroke-linecap: round;
}

.pattern-report__dial-progress {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
}

.pattern-report__dial-tick {
    stroke: var(--desk-color-text-muted);
    stroke-width: 1;
    opacity: 0.55;
}

.pattern-report__dial-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}

.pattern-report__dial-value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--desk-color-text);
}

.pattern-report__dial-denom {
    margin-top: 2px;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
}

/* Editor suggestions — quote-anchored Add cards above the evaluation.
   Cards reuse the shared .inquiry-card styles (thesis/inquiries). */
.pattern-report__suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}

.pattern-report__suggestions-header {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
}

.pattern-report__source {
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.pattern-report__prose p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
}

.pattern-report__raw {
    margin: 12px 0;
}

.pattern-report__raw summary {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
    cursor: pointer;
}

.pattern-report__raw pre {
    margin: 8px 0 0;
    padding: 8px;
    max-height: 260px;
    overflow: auto;
    background: var(--desk-color-bg-surface);
    border-radius: var(--desk-radius-sm);
    font-size: 11px;
    line-height: 1.5;
}

.pattern-report__meta {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

/* Run-history picker — one chip per past run, newest first. */
.pattern-report__history {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 12px;
}

.pattern-report__history-chip {
    padding: 3px 9px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    background: none;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 999px;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--desk-transition-speed) var(--desk-transition-ease),
                border-color var(--desk-transition-speed) var(--desk-transition-ease);
}

.pattern-report__history-chip:hover {
    color: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
}

.pattern-report__history-chip--active {
    color: var(--desk-color-accent);
    border-color: var(--desk-color-accent);
    background: var(--desk-color-bg-surface);
    cursor: default;
}

.pattern-report__history-chip--failed {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Footer action — run the grader again from inside the report. */
.pattern-report__actions {
    margin: 14px 0 0;
}

.pattern-report__rerun {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: 1px solid var(--desk-color-accent);
    border-radius: 999px;
    color: var(--desk-color-accent);
    cursor: pointer;
    transition: background var(--desk-transition-speed) var(--desk-transition-ease);
}

.pattern-report__rerun:hover {
    background: var(--desk-color-bg-surface);
}

.pattern-report__rerun:disabled {
    opacity: 0.6;
    cursor: default;
    animation: patterns-grading-pulse 1.2s ease-in-out infinite;
}

/* Detail mode: hide panel hero/header so the wiki content fills the panel. */
.lens-preview--patterns[data-patterns-mode="detail"] .lens-preview__hero {
    display: none;
}

/* ---- Report ---- */

/* Radar chart container — sized to fill the 432px-wide panel */
.report-chart {
    margin: 0 0 16px;
}

.report-radar-wrap {
    position: relative;
    width: 100%;
    height: 320px;  /* fixed height; Chart.js fills it responsively */
}

.report-radar-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Element bars — namespaced under .report-* to avoid collision with
 * the drafts .element-row / .b-* styles which live in a different CSS file. */

.report-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-bar-row {
    display: grid;
    grid-template-columns: 80px 1fr 32px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
}

.report-bar-label {
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Track: the grey horizontal rail the bar sits inside */
.report-bar-track {
    position: relative;
    height: 8px;
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 4px;
    overflow: visible;
}

/* Grid subdivisions (3 evenly-spaced dividers across the track) */
.report-b-scale {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to right,
            transparent,
            transparent calc(25% - 0.5px),
            var(--desk-color-border-subtle) calc(25% - 0.5px),
            var(--desk-color-border-subtle) calc(25%),
            transparent calc(25%)
        );
    border-radius: 4px;
    pointer-events: none;
}

/* Min–max range fill: colored box from min-position to max-position */
.report-b-min-max {
    position: absolute;
    top: 0;
    height: 100%;
    border: 1.5px solid transparent;   /* color set by JS */
    border-radius: 3px;
    /* background set by JS as hex + '20' alpha suffix */
    transition: left 0.5s ease-out, width 0.5s ease-out;
}

/* Score marker: small vertical tick at the average position */
.report-b-score {
    position: absolute;
    top: -3px;
    width: 4px;
    height: calc(100% + 6px);
    border-radius: 2px;
    transform: translateX(-50%);
    /* background-color set by JS */
    transition: left 0.5s ease-out;
}

/* Numeric score to the right of the track */
.report-bar-score {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    /* color set by JS to match bar color */
}

/* Dark-mode: the grey track and borders are token-driven so they adapt
 * automatically. The hex score-colors (#dc3545 / #ffc107 / #4285f4) are
 * intentionally literal — they are the chart's data palette and must match
 * the radar node colors exactly, regardless of theme. */

/* Overall bar — visually distinct aggregate above the element list */

.report-bar-row--overall {
    font-weight: 600;
}

.report-bar-row--overall .report-bar-label {
    color: var(--desk-color-text);
    font-weight: 600;
}

.report-bar-row--overall .report-bar-track {
    height: 10px; /* slightly taller than the 8px element bars */
}

/* Active bar selection highlight */

.report-bar-row--active .report-bar-label {
    color: var(--desk-color-text);
    font-weight: 600;
}

.report-bar-row--active .report-bar-track {
    background: var(--desk-color-bg-elevated);
    border-color: var(--desk-color-border);
}

/* Synopsis box — labelled container below the bars */

.report-synopsis {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
}

.report-synopsis__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--desk-color-text-muted);
    margin: 0 0 6px;
}

.report-synopsis__text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--desk-color-text-secondary);
    margin: 0;
}

/* Suggestions — the editor's quote-anchored Add cards (reuses the shared
 * .inquiry-card styles for the cards themselves). */

.report-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.report-suggestions__header {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--desk-color-text-muted);
}

.report-suggestions__note {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.report-suggestions__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Which pattern a suggestion most serves — small kicker atop the card. */
.report-suggestion-card__pattern {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--desk-color-text-muted);
    margin-bottom: 4px;
}

/* ---- Report ---- */

/* Header: title + picker stacked with date on the left; regenerate +
 * slider + comments count stacked on the right. */
.report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

.report-header__left {
    min-width: 0;
    flex: 1 1 auto;
}

.report-header__heading {
    display: flex;
    align-items: center;
    gap: 4px;
}

.report-header__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.report-toolbar__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 4px;
}

.report-toolbar__date {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--desk-color-text-secondary);
    white-space: nowrap;
}

.report-toolbar__picker {
    position: relative;
    flex: 0 0 auto;
}

.report-toolbar__dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--desk-color-text-muted);
    cursor: pointer;
}

.report-toolbar__dropdown-btn:hover,
.report-toolbar__dropdown-btn[aria-expanded="true"] {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.report-toolbar__dropdown-btn svg {
    display: block;
}

.report-toolbar__menu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    margin: 4px 0 0;
    padding: 4px 0;
    min-width: 160px;
    list-style: none;
    background: var(--desk-color-bg-panel, var(--desk-color-bg-surface));
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    box-shadow: 0 4px 12px var(--desk-color-shadow);
}

.report-toolbar__menu[hidden] {
    display: none;
}

.report-toolbar__menu-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 12px;
    font-family: inherit;
    color: var(--desk-color-text);
    cursor: pointer;
}

.report-toolbar__menu-item:hover {
    background: var(--desk-color-bg-elevated);
}

.report-toolbar__menu-item--empty {
    color: var(--desk-color-text-muted);
    cursor: default;
}

.report-toolbar__menu-item--empty:hover {
    background: none;
}

.report-toolbar__stats {
    margin: 0;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.report-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.report-controls__row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.report-controls__slider-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.report-controls__label {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--desk-color-text-secondary);
    white-space: nowrap;
}

.report-controls__count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--desk-color-text);
}

.report-controls__slider {
    width: 120px;
    max-width: 100%;
    accent-color: var(--desk-color-accent);
    cursor: pointer;
}

.report-controls__slider[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.report-controls__generate {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-accent);
    color: var(--desk-color-text-on-accent, #ffffff);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.report-controls__generate:hover:not([disabled]) {
    opacity: 0.85;
}

.report-controls__generate[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.report-controls__cancel {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    background: none;
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.report-controls__cancel:hover:not([disabled]) {
    color: var(--desk-color-text);
    border-color: var(--desk-color-text-secondary);
}

.report-controls__cancel[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.report-controls__status {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

/* ---- Agents ---- */

/* Form */

.agents-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.agents-form__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.agents-form__label input,
.agents-form__label textarea,
.agents-form__select {
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    color: var(--desk-color-text);
    padding: 5px 8px;
    font-size: 13px;
    line-height: 1.5;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.agents-form__label input:focus,
.agents-form__label textarea:focus,
.agents-form__select:focus {
    outline: 2px solid var(--desk-color-accent);
    outline-offset: -1px;
    border-color: var(--desk-color-accent);
}

/* Fieldsets for slider and checkboxes */

.agents-form__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.agents-form__legend {
    font-size: 12px;
    color: var(--desk-color-text-muted);
    margin-bottom: 6px;
    padding: 0;
}

/* "Focuses On" textarea — 4-row minimum, vertically resizable */

.agents-form__focus {
    resize: vertical;
    min-height: calc(4 * 1.4em + 12px); /* ~4 lines: 4×line-height + top/bottom padding */
}

/* Checkboxes */

.agents-form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agents-form__check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--desk-color-text-secondary);
    min-height: 22px;
    cursor: pointer;
}

.agents-form__check-label input[type="checkbox"] {
    accent-color: var(--desk-color-accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Actions row */

.agents-form__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.agents-form__save {
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    padding: 8px 16px;
    min-height: 44px; /* touch target */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.agents-form__save:hover {
    opacity: 0.9;
}

.agents-form__save--compact {
    padding: 4px 12px;
    min-height: 28px;
    font-size: 12px;
    font-weight: 500;
}

.agents-form__note {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    font-style: italic;
}

.agents-form__note[hidden] {
    display: none;
}

.agents-form__count {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.agents-form__count-btn {
    min-width: 44px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    cursor: pointer;
}

.agents-form__count-btn:hover {
    border-color: var(--desk-color-text-secondary);
}

.agents-form__count-btn[aria-pressed="true"] {
    border-color: var(--desk-color-accent);
    background: var(--desk-color-accent);
    color: #ffffff;
}

.agents-form__custom-count[hidden] {
    display: none;
}

.agents-form__custom-count {
    margin-top: 8px;
}

/* Agents panel fills the lens so the per-agent session can pin input */

.lens-preview--agents {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.agents-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.agents-view--list,
.agents-view--archive {
    display: flex;
    flex-direction: column;
}

.agents-view--session {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agents-view[hidden],
.agents-view--list[hidden],
.agents-view--archive[hidden],
.agents-view--form[hidden],
.agents-view--session[hidden] {
    display: none !important;
}

.lens-preview--agents .chat-input-area[hidden] {
    display: none;
}

.lens-preview--agents .chat-tab-bar__tab:last-child {
    flex: 1 1 auto;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--desk-color-text-muted);
}

.lens-preview--agents .chat-tab-bar__tab--active:last-child {
    color: var(--desk-color-text);
    font-weight: 600;
}

.agents-session-run {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-panel);
}

.agents-session-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 8px;
    flex: 0 0 auto;
    width: 100%;
}

.agents-session-head__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.agents-back,
.agents-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--desk-color-accent);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.agents-back {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 10px;
}

.agents-session-head .agents-back {
    margin-bottom: 0;
}

.agents-back:hover,
.agents-link:hover {
    text-decoration: underline;
}

.agents-list__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.agents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 0 0 auto;
}

.agents-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg-surface);
    padding: 8px 10px;
}

.agents-list__main {
    grid-column: 1 / -1;
    min-width: 0;
}

.agents-list__item:has(.agents-list__run) .agents-list__main {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.agents-list__title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.agents-list__open {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.agents-list__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.agents-list__hover-action {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--desk-color-text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.agents-list__item:hover .agents-list__hover-action,
.agents-list__item:focus-within .agents-list__hover-action {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .agents-list__hover-action {
        opacity: 1;
        pointer-events: auto;
    }
}

.agents-list__hover-action:hover {
    color: var(--desk-color-text);
}

.agents-list__focus {
    display: block;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    line-height: 1.4;
}

.agents-list__run {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-accent);
    color: #ffffff;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.agents-list__run:hover:not([disabled]) {
    opacity: 0.85;
}

.agents-list__run[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.agents-empty {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.agents-empty[hidden] {
    display: none;
}

.agents-run-marker {
    margin: 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    font-style: italic;
}

.chat-thread__msg--run {
    list-style: none;
}

/* ---- Polish checks UI (324px panel) ---- */

.polish-checks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Toolbar: toggle-all button */

.polish-checks__toolbar {
    margin-bottom: 8px;
}

.polish-toggle-all {
    background: none;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    color: var(--desk-color-text-secondary);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1.4;
}

.polish-toggle-all:hover {
    border-color: var(--desk-color-accent);
    color: var(--desk-color-accent);
}

/* Checkbox list */

.polish-check-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual check row — ≥44px touch target via min-height on label */

.polish-check-item {
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.polish-check-item:first-child {
    border-top: 1px solid var(--desk-color-border-subtle);
}

.polish-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 4px;
    cursor: pointer;
}

.polish-check-input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--desk-color-accent);
    cursor: pointer;
}

.polish-check-text {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--desk-color-text);
    line-height: 1.4;
}

/* Run bar */

.polish-run-bar {
    border-top: 1px solid var(--desk-color-border-subtle);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.polish-run-btn {
    background: var(--desk-color-accent);
    color: #ffffff;
    border: 1px solid var(--desk-color-accent);
    border-radius: var(--desk-radius-sm);
    padding: 8px 16px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
}

.polish-run-btn:hover {
    opacity: 0.9;
}

.polish-run-note {
    margin: 0;
    font-size: 12px;
    color: var(--desk-color-text-muted);
    font-style: italic;
}

.polish-run-note[hidden] {
    display: none;
}

/* ---- Chat ---- */

/*
 * Full-viewport-height flex chain for the Chat panel:
 *
 * .lens-panel (height:100%) → .lens-preview--chat (height:100%, flex column)
 * → .lens-preview__demo--chat (flex:1, flex column) → .chat-layout
 * (flex:1, flex column) → .chat-thread-region (flex:1, overflow-y:auto)
 * so the thread scrolls and the input row stays pinned at the bottom.
 */
.lens-preview--chat {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lens-preview__demo--chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Outer wrapper — flex-fills the remaining panel height */
.chat-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    overflow: hidden;
    background: var(--desk-color-bg);
}

/* TAB BAR */
.chat-tab-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-panel);
}

.chat-tab-bar__tab {
    flex: 1 1 auto;
    padding: 8px 4px;
    border: none;
    border-right: 1px solid var(--desk-color-border-subtle);
    background: transparent;
    color: var(--desk-color-text-muted);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.chat-tab-bar__tab:last-child {
    border-right: none;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    font-weight: 400;
    color: var(--desk-color-accent);
}

.chat-tab-bar__tab:hover {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

.chat-tab-bar__tab--active {
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--desk-color-accent);
}

/* VIEWS: History and Conversation share the remaining space */
.chat-view {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.chat-view[hidden] {
    display: none;
}

/* HISTORY VIEW */
.chat-view--history {
    overflow-y: auto;
    background: var(--desk-color-bg-panel);
}

.chat-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-history-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--desk-color-border-subtle);
    font-size: 13px;
    line-height: 1.4;
    color: var(--desk-color-text);
    transition: background 0.1s;
}

.chat-history-list__item:last-child {
    border-bottom: none;
}

.chat-history-list__item:hover,
.chat-history-list__item:focus-visible {
    background: var(--desk-color-bg-elevated);
    outline: none;
}

.chat-history-list__title {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-history-list__time,
.chat-history-list__when {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
}

/* CONVERSATION VIEW */
.chat-view--conversation {
    background: var(--desk-color-bg);
}

/* Scrollable thread region */
.chat-thread-region {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Dark-mode scrollbar — same invert as .scroll-container (Loop 7 TG3.1)
 * so the thread / history / input thumbs aren't the OS light overlay. */
[data-theme="dark"] .chat-thread-region,
[data-theme="dark"] .chat-view--history,
[data-theme="dark"] .chat-input-area__field {
    color-scheme: dark;
    scrollbar-color: var(--desk-color-text-muted) var(--desk-color-bg);
}
[data-theme="dark"] .chat-thread-region::-webkit-scrollbar-track,
[data-theme="dark"] .chat-view--history::-webkit-scrollbar-track,
[data-theme="dark"] .chat-input-area__field::-webkit-scrollbar-track {
    background: var(--desk-color-bg);
}
[data-theme="dark"] .chat-thread-region::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-view--history::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-input-area__field::-webkit-scrollbar-thumb {
    background: var(--desk-color-text-muted);
}
[data-theme="dark"] .chat-thread-region::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-view--history::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-input-area__field::-webkit-scrollbar-thumb:hover {
    background: var(--desk-color-text-secondary);
}

/* Scrollable message list */
.chat-thread {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-thread[hidden] {
    display: none;
}

.chat-thread__msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: var(--desk-radius-sm);
    font-size: 13px;
    line-height: 1.5;
    max-width: 85%;
}

/* Writer messages: quiet gray bubble, right-aligned, no "You" label. */
.chat-thread__msg--writer {
    align-self: flex-end;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
}

/* Claude replies: loose text, no bubble (Claude/ChatGPT convention). */
.chat-thread__msg--model {
    align-self: stretch;
    max-width: 100%;
    background: transparent;
    color: var(--desk-color-text);
    border: none;
    padding: 8px 2px;
}

.chat-thread__who {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desk-color-text-muted);
}

/* Label row on Claude replies: "CLAUDE  Sonnet 5 · $0.004" */
.chat-thread__who-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.chat-thread__msg p {
    margin: 0;
}

/* Rendered-markdown message body (chat-lens-v1). Scoped under
 * .chat-thread__msg so this outranks `.chat-thread__msg p { margin: 0 }`
 * above — otherwise paragraph spacing collapses to zero. */
.chat-thread__msg .chat-msg-body > * + * {
    margin-top: 8px;
}

.chat-msg-body h4,
.chat-msg-body h5,
.chat-msg-body h6 {
    margin: 0;
    font-weight: 600;
    color: var(--desk-color-text);
}

.chat-msg-body h4 { font-size: 15px; }
.chat-msg-body h5 { font-size: 14px; }
.chat-msg-body h6 { font-size: 13px; }

.chat-msg-body ul,
.chat-msg-body ol {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat-msg-body code {
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--desk-color-bg-elevated);
    font-size: 12px;
}

/* Inside the gray writer bubble, elevated-bg code needs a step darker
 * to stay visible; fall back to a translucent overlay. */
.chat-thread__msg--writer .chat-msg-body code {
    background: rgba(0, 0, 0, 0.08);
}

/* FEEDBACK CARDS — <card><quote>…</quote><note>…</note></card> blocks in
 * assistant replies (chat.js splitCards). Hover reveals "+" which anchors
 * the note into the doc as a margin comment on the quoted passage. */
.chat-card {
    position: relative;
    border: 1px solid var(--desk-color-border);
    border-radius: var(--desk-radius-sm);
    background: transparent;
    box-shadow: 0 1px 2px var(--desk-color-shadow);
    padding: 8px 34px 8px 12px;
}

/* Quoted passage: thick left rule + indent (blockquote convention), muted
 * dark gray to differentiate from the note below. Same rule is reused for
 * selection-menu excerpts in the input box and for markdown `>` quotes in
 * writer bubbles. */
.chat-card__quote,
.chat-msg-body blockquote {
    margin: 0 0 4px;
    padding: 1px 0 1px 8px;
    font-size: 12px;
    font-style: italic;
    color: var(--desk-color-text-muted);
    border-left: 3px solid var(--desk-color-text-muted);
    max-width: 100%;
}

.chat-card__note {
    font-size: 13px;
    line-height: 1.5;
}

.chat-card__add {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 50%;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    /* Faintly visible at rest so the affordance is discoverable; full
     * strength on hover/focus. */
    opacity: 0.45;
    transition: opacity 120ms ease, background 120ms ease;
}

.chat-card:hover .chat-card__add,
.chat-card__add:focus-visible {
    opacity: 1;
}

.chat-card__add:hover:not(:disabled) {
    background: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
}

.chat-card__add:disabled {
    cursor: default;
}

.chat-card__status {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.chat-card__status:empty {
    display: none;
}

/* Accepted: keep the card but mark it done — chat.js swaps the + for the
 * same square-cap polyline check the margin cards' resolve button uses. */
.chat-card[data-state="added"] {
    border-color: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.4));
}

.chat-card[data-state="added"] .chat-card__add {
    opacity: 1;
    background: var(--desk-color-comment-highlight, rgba(234, 179, 8, 0.25));
}

.chat-card[data-state="not-found"] .chat-card__status,
.chat-card[data-state="error"] .chat-card__status {
    color: var(--desk-color-danger, #b3261e);
}

/* INPUT AREA: full-width textarea + Send below */
.chat-input-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-panel);
}

/* Bordered field wrapper — grows when a selection excerpt is attached
 * so the textarea doesn't have to absorb the callout height. */
.chat-input-area__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg);
}

.chat-input-area__box:focus-within {
    border-color: var(--desk-color-accent);
}

.chat-input-area__box:has(.chat-excerpt:not([hidden])) {
    min-height: 72px;
}

.chat-excerpt {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 6px 4px 10px;
}

.chat-excerpt[hidden] {
    display: none;
}

.chat-excerpt__quote {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.5;
    max-height: calc(20 * 1.5em); /* up to 20 lines */
    overflow-y: auto;
}

.chat-excerpt__dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    font-family: inherit;
}

.chat-excerpt__dismiss:hover {
    color: var(--desk-color-text);
}

.chat-input-area__field {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 120px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--desk-radius-sm);
    background: transparent;
    color: var(--desk-color-text);
    font-size: 13px;   /* matches the thread bubbles */
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    overflow-y: hidden;
    outline: none;
}

.chat-input-area__field:focus {
    border-color: transparent;
}

.chat-input-area__field::placeholder {
    color: var(--desk-color-text-muted);
}

/* Footer row: preview hint (left) + Send button (right) */
.chat-input-area__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
}

.chat-input-area__send {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-accent);
    color: var(--desk-color-text-on-accent, #ffffff);
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chat-input-area__send:hover {
    opacity: 0.85;
}

/* Compact header (chat-lens-v1) — one title line + tagline, no hero body */
.chat-header {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.chat-header__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--desk-color-text);
}

.chat-header__tagline {
    margin: 2px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--desk-color-text-secondary);
}

.chat-header__usage {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Model picker in the input footer */
.chat-model-picker {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 180px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: var(--desk-color-bg);
    color: var(--desk-color-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

.chat-model-picker:focus {
    border-color: var(--desk-color-accent);
}

/* Model + cost, inline to the right of the CLAUDE label */
.chat-cost-line {
    font-size: 10px;
    color: var(--desk-color-text-muted);
    letter-spacing: 0.02em;
}

/* Empty-state notes (no conversations / fresh thread) */
.chat-empty-note {
    margin: 0;
    padding: 16px 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--desk-color-text-muted);
}

.chat-empty-note[hidden] {
    display: none;
}

/* Typing indicator — three pulsing dots while a run is in flight */
.chat-typing-dots {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--desk-color-text-muted);
    animation: chat-dot-pulse 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-dot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots span {
        animation: none;
        opacity: 0.6;
    }
}

/* Error bubble + Retry */
.chat-thread__msg--error {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--desk-color-border-subtle);
    color: var(--desk-color-text-secondary);
}

.chat-thread__msg--error .chat-thread__who {
    color: var(--desk-color-text-muted);
}

.chat-retry-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 10px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: var(--desk-radius-sm);
    background: transparent;
    color: var(--desk-color-text);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}

.chat-retry-btn:hover {
    background: var(--desk-color-bg-elevated);
}

.chat-input-area__send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---- Active lens icon (panel-machine.js toggle) ---- */

.icon-bar__btn.is-active-lens .icon-bar__icon {
    color: var(--desk-color-accent);
}

/* Feature-request modal */
.modal-dialog:has(.requests-modal) {
    max-width: min(720px, calc(100vw - 48px));
}

.requests-modal {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    max-height: 70vh;
}

.requests-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-right: 28px;
}

.requests-modal__heading {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.25rem;
}

.requests-tabs {
    display: inline-flex;
    gap: 2px;
}

.requests-tab {
    background: none;
    border: none;
    padding: 4px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--desk-color-text-muted);
    cursor: pointer;
    border-radius: var(--desk-radius-sm);
}

.requests-tab:hover {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}

.requests-tab[aria-selected="true"] {
    color: var(--desk-color-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--desk-color-accent);
    border-radius: 0;
    background: transparent;
}

.requests-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.requests-view[hidden],
.requests-form[hidden],
.requests-tabs[hidden] {
    display: none;
}

.requests-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 420px;
}

.requests-row {
    display: grid;
    grid-template-columns: 3.75rem 32px minmax(6.5rem, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.requests-row:last-child {
    border-bottom: none;
}

.requests-changelog-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    column-gap: 20px;
    row-gap: 4px;
    align-items: start;
    padding: 14px 4px;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.requests-changelog-row:last-child {
    border-bottom: none;
}

.requests-changelog-row__version {
    font-family: Georgia, serif;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    color: var(--desk-color-text-muted);
    padding-top: 1px;
}

.requests-changelog-row__v {
    font-size: 0.72em;
    font-weight: 400;
    margin-right: 1px;
}

.requests-changelog-row__body {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--desk-color-text);
    text-align: justify;
    hyphens: auto;
}

.requests-changelog-row__name {
    font-weight: 600;
    color: var(--desk-color-text);
}

.requests-changelog-row__colon {
    font-weight: 600;
}

.requests-changelog-row__description {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--desk-color-text-muted);
}

.requests-changelog-row__date {
    font-family: inherit;
    font-size: 11px;
    color: var(--desk-color-text-muted);
    white-space: nowrap;
    padding-top: 4px;
}

.requests-vote {
    display: grid;
    grid-template-columns: 3ch 18px;
    align-items: center;
    column-gap: 6px;
    justify-self: start;
    min-height: 32px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--desk-color-accent);
    cursor: pointer;
    font-family: inherit;
}

.requests-vote:hover,
.requests-vote:focus-visible {
    background: var(--desk-color-bg-elevated);
    border-color: var(--desk-color-border-subtle);
}

.requests-vote__count {
    min-width: 3ch;
    text-align: right;
    font-size: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.requests-vote__icon {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linejoin: miter;
    stroke-linecap: square;
    paint-order: stroke;
}

.requests-vote--on .requests-vote__icon {
    fill: currentColor;
    stroke: currentColor;
}

.requests-row__title-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.requests-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--desk-color-text-muted);
    cursor: help;
}

.requests-note:hover,
.requests-note:focus-visible {
    color: var(--desk-color-text);
}

.requests-tooltip {
    position: fixed;
    z-index: 400;
    box-sizing: border-box;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--desk-color-tooltip-bg);
    color: var(--desk-color-tooltip-text);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    pointer-events: none;
    box-shadow: 0 4px 16px var(--desk-color-shadow);
}

.requests-tooltip[hidden] {
    display: none;
}

.requests-row__pfp {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.requests-row__pfp--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.requests-row__pfp--anon {
    background: var(--desk-color-bg-elevated);
    color: var(--desk-color-text-muted);
    border: 1px solid var(--desk-color-border-subtle);
}

.requests-row__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.requests-row__name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.requests-row__date {
    font-size: 11px;
    color: var(--desk-color-text-muted);
}

.requests-row__title {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.requests-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--desk-color-text);
    background: none;
    padding: 0;
    border-radius: 0;
}

.requests-status--in_progress {
    font-weight: 700;
}

.requests-status--shipped {
    color: #2f9e44;
}

.requests-empty,
.requests-flash {
    margin: 16px 0 0;
    color: var(--desk-color-text-muted);
    font-size: 13px;
}

.requests-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.requests-list-footer[hidden] {
    display: none;
}

.requests-submit-cta {
    margin-left: auto;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: var(--desk-color-accent, #4f6372);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.requests-submit-cta:hover {
    filter: brightness(1.05);
}

.requests-submit-cta[hidden] {
    display: none;
}

.requests-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requests-form__label {
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.requests-form__input,
.requests-form__textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
    font: inherit;
    font-size: 14px;
}

.requests-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.requests-form__anon {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.requests-form__anon-check {
    flex: 0 0 auto;
}

.requests-form__anon-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.requests-form__anon-title {
    font-size: 13px;
    color: var(--desk-color-text);
}

.requests-form__anon-hint {
    font-size: 12px;
    color: var(--desk-color-text-muted);
}

.requests-form__error {
    margin: 0;
    color: #c5221f;
    font-size: 12px;
}

.requests-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.requests-form__buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.requests-form__cancel,
.requests-form__submit {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.requests-form__cancel {
    border: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg);
    color: var(--desk-color-text);
}

.requests-form__submit {
    border: none;
    background: var(--desk-color-accent, #4285f4);
    color: #fff;
}

/* Live collaborator carets */
.live-cursor {
    position: relative;
    display: inline-block;
    width: 0;
    height: 1.15em;
    pointer-events: none;
    z-index: 4;
}

.live-cursor__caret {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 1.15em;
    background: currentColor;
}

.live-cursor__label {
    position: absolute;
    left: 0;
    top: -1.15em;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-family: Inter, sans-serif;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}

.live-cursor--0 { color: #1967d2; }
.live-cursor--0 .live-cursor__label { background: #1967d2; }
.live-cursor--1 { color: #c5221f; }
.live-cursor--1 .live-cursor__label { background: #c5221f; }
.live-cursor--2 { color: #137333; }
.live-cursor--2 .live-cursor__label { background: #137333; }
.live-cursor--3 { color: #7627bb; }
.live-cursor--3 .live-cursor__label { background: #7627bb; }
.live-cursor--4 { color: #b06000; }
.live-cursor--4 .live-cursor__label { background: #b06000; }
.live-cursor--5 { color: #00838f; }
.live-cursor--5 .live-cursor__label { background: #00838f; }
.live-cursor--6 { color: #c2185b; }
.live-cursor--6 .live-cursor__label { background: #c2185b; }
.live-cursor--7 { color: #5d4037; }
.live-cursor--7 .live-cursor__label { background: #5d4037; }

/* Footnotes */
.pm-footnote {
    font-size: 0.7em;
    font-weight: 600;
    font-family: Inter, sans-serif;
    line-height: 1;
    vertical-align: super;
    color: var(--desk-color-accent, #4285f4);
    cursor: pointer;
    padding: 0 1px;
}

/* Toolbar icon: "Fn" with a superscript # (like a marker). */
.action-btn__sup {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    margin-left: 1px;
    position: relative;
    top: -4px;
}

.footnote-list {
    margin: 32px 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.footnote-list__heading {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--desk-color-text);
}

.footnote-list__items {
    margin: 0;
    padding-left: 1.4rem;
}

/* Compact entries — smaller than body prose but still readable (87.5%
 * of the body size, 14px at the 16px default, tracking the Display
 * text-size setting), with a subtle gap so each footnote reads as a
 * discrete object. `.editor-mount` prefixes beat the body-prose rules
 * (`.editor-mount p/li { font-size: var(--desk-body-font-size) }`),
 * which would otherwise render footnotes at full essay size. */
.editor-mount .footnote-list__item {
    font-size: calc(var(--desk-body-font-size, 16px) * 0.875);
    line-height: 1.45;
    color: var(--desk-color-text-muted);
    margin: 0 0 12px;
    cursor: pointer;
    border-radius: 3px;
    /* Hover region hugs the text, not the full column width. */
    width: fit-content;
    max-width: 100%;
}

.editor-mount .footnote-list__item::marker {
    font-size: calc(var(--desk-body-font-size, 16px) * 0.875);
    line-height: 1.45;
}

.editor-mount .footnote-list__item:last-child {
    margin-bottom: 0;
}

/* The box-shadow spread pads the highlight on all sides without moving
 * the text, so the list number stays aligned with the entry. */
.editor-mount .footnote-list__item:hover {
    background: var(--desk-color-bg-elevated);
    box-shadow: 0 0 0 5px var(--desk-color-bg-elevated);
}

/* Mod-a selects the essay body inside ProseMirror; the footnote list
 * is a sibling of the contenteditable, so it is painted to match when
 * the body range is fully selected. */
.editor-mount .footnote-list.is-selected .footnote-list__heading,
.editor-mount .footnote-list.is-selected .footnote-list__item {
    background: Highlight;
    color: HighlightText;
}
.editor-mount .footnote-list.is-selected .footnote-list__item {
    box-shadow: 0 0 0 5px Highlight;
}

/* Rich bodies render real blocks — keep them compact in the list. */
.editor-mount .footnote-list__item p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 4px;
    text-indent: 0;
}
.editor-mount .footnote-list__item p:last-child {
    margin-bottom: 0;
}
.editor-mount .footnote-list__item h1,
.editor-mount .footnote-list__item h2,
.editor-mount .footnote-list__item h3 {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.3;
}
.editor-mount .footnote-list__item ul,
.editor-mount .footnote-list__item ol {
    margin: 0 0 4px;
    padding-left: 1.2rem;
}
.editor-mount .footnote-list__item li {
    font-size: inherit;
    line-height: inherit;
}
.editor-mount .footnote-list__item blockquote {
    margin: 0 0 4px;
    padding-left: 10px;
    border-left: 2px solid var(--desk-color-border-subtle);
}

/* Footnote modal — app-standard dialog with a mini formatting toolbar
 * and a ProseMirror editor. */
.footnote-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--desk-color-border-subtle);
}

.footnote-modal__toolbar .action-btn svg {
    width: 14px;
    height: 14px;
}

.footnote-modal__editor {
    min-height: 140px;
    max-height: 45vh;
    overflow-y: auto;
    /* Right padding keeps long text off the scrollbar. */
    padding: 12px 14px 12px 2px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--desk-color-text);
}

.footnote-modal__editor .ProseMirror {
    outline: none;
    min-height: 120px;
    white-space: pre-wrap;
}

.footnote-modal__editor h1,
.footnote-modal__editor h2,
.footnote-modal__editor h3 {
    margin: 0 0 8px;
    line-height: 1.3;
}
.footnote-modal__editor h1 { font-size: 20px; }
.footnote-modal__editor h2 { font-size: 17px; }
.footnote-modal__editor h3 { font-size: 15px; }
.footnote-modal__editor p {
    margin: 0 0 8px;
}
.footnote-modal__editor blockquote {
    margin: 0 0 8px;
    padding-left: 12px;
    border-left: 3px solid var(--desk-color-border-subtle);
    color: var(--desk-color-text-muted);
}
.footnote-modal__editor ul,
.footnote-modal__editor ol {
    margin: 0 0 8px;
    padding-left: 1.4rem;
}

/* Discard confirmation — shown when closing the modal would drop
 * unsaved footnote text. `:not([hidden])` keeps the [hidden] attribute
 * working against display: flex. */
.footnote-modal__confirm:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    font-size: 13px;
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 6px;
}

.footnote-modal__confirm-text {
    line-height: 1.45;
}

.footnote-modal__confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.footnote-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--desk-color-border-subtle);
}

.footnote-modal__btn {
    font: inherit;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--desk-color-border-subtle);
    background: var(--desk-color-bg-surface);
    color: var(--desk-color-text);
    cursor: pointer;
    white-space: nowrap;
}

.footnote-modal__btn--primary {
    background: var(--desk-color-accent, #4285f4);
    border-color: var(--desk-color-accent, #4285f4);
    color: #fff;
}

.footnote-modal__btn--danger {
    color: #c0392b;
}

/* In the actions row, Remove sits apart on the left. */
.footnote-modal__actions .footnote-modal__btn--danger {
    margin-right: auto;
}

.footnote-modal__btn:hover {
    filter: brightness(0.96);
}

/* Split-screen: two editable version panes, each with its own margin.
 * Grid order in split: essay-1 | margin-1 | essay-2 | margin-2.
 * The split-only siblings stay display:none (not just [hidden]) until
 * #ContentRegion[data-split="true"] — a `hidden` sibling would rejoin
 * the flex row if any rule overrode the UA [hidden] { display: none }
 * (same trap as .status-ball). */

/* Toolbar title — in-flow at the start of the formatting cluster. */
.split-essay-title {
    display: none;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-color-text);
    margin-right: 12px;
    flex: 0 0 auto;
}

.prose-pane.prose-pane--split,
.margin-pane.margin-pane--split {
    display: none;
}

/* Each essay+margin pair lives in a .split-scroll wrapper. Outside of
 * split the wrapper is display:contents — invisible to the text-zone
 * flex row, so single-essay layout is untouched. In split, each wrapper
 * becomes its own independent scroll container. */
.split-scroll {
    display: contents;
}

#ContentRegion[data-split="true"] .split-essay-title {
    display: block;
}

/* ScrollContainer stops scrolling in split — the two panes scroll
 * themselves instead. */
#ContentRegion[data-split="true"] .scroll-container {
    display: flex;
    overflow-y: hidden;
}

#ContentRegion[data-split="true"] .text-zone {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

#ContentRegion[data-split="true"] .gutter {
    display: none;
}

/* Grid, not flex: a single-line flex container clamps stretched items
 * to the CONTAINER height, so the margin's border-left (and the sticky
 * picker's travel range) stopped one viewport down. The row must be
 * minmax(min-content, 1fr) — min-content tracks the tallest pane's full
 * content height (divider runs the whole scroll length, sticky bar can
 * travel the whole document) while 1fr expands short docs to fill the
 * viewport. NOT minmax(100%, auto): Chrome resolves that row to the
 * container height and lets content overflow it (verified in-browser),
 * which reintroduces both bugs. */
#ContentRegion[data-split="true"] .split-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    grid-template-rows: minmax(min-content, 1fr);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    min-height: 0;
    scrollbar-gutter: stable;
}

#ContentRegion[data-split="true"] .split-scroll--right {
    border-left: 1px solid var(--desk-color-border-subtle);
}

/* Active-half frame sits on the text-zone (the visible 50/50 cells),
 * not the scrollers — inset shadows on overflow:auto only paint a
 * sliver of the content box and drift in dark mode. */
#ContentRegion[data-split="true"] .text-zone::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    z-index: 8;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--desk-color-button) 55%, transparent);
}

#ContentRegion[data-split="true"][data-split-active="left"] .text-zone::after {
    left: 0;
}

#ContentRegion[data-split="true"][data-split-active="right"] .text-zone::after {
    left: 50%;
}

#ContentRegion[data-split="true"] .prose-pane {
    max-width: none;
    min-width: 0;
    width: auto;
    /* Extra left inset so each essay column breathes (24 → 40). */
    padding: 24px 24px 24px 40px;
}

/* The picker replaces the in-doc version label in split mode. */
#ContentRegion[data-split="true"] .version-label {
    display: none;
}

#ContentRegion[data-split="true"] .prose-pane--split {
    display: flex;
    flex-direction: column;
}

#ContentRegion[data-split="true"] .margin-pane {
    width: 72px;
}

#ContentRegion[data-split="true"] .margin-pane--split {
    display: block;
}

#ContentRegion[data-split="true"] .editor-mount .essay-title,
#ContentRegion[data-split="true"] .editor-mount .essay-subtitle,
#ContentRegion[data-split="true"] .editor-mount .author-block {
    display: none;
}

/* Margins are always compressed in split — the toggle would be inert. */
#ContentRegion[data-split="true"] .action-btn--toggle-margin {
    display: none;
}

#ContentRegion[data-split="true"] .action-col--b {
    overflow: visible;
}

/* Filter (plus the comment count) pinned to the toolbar's right edge —
 * ColC tracks MarginPane's position, which in split is mid-bar. */
#ContentRegion[data-split="true"] .action-snap--5 {
    position: absolute;
    top: 0;
    right: 12px;
    height: 40px;
}

/* margin-2 — the right pane's comments as pfp icons (positioned by
 * split.js against the right editor's .pm-comment marks). */
.split-comment-icon {
    position: absolute;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--desk-color-bg-elevated);
    border: 1px solid var(--desk-color-border-subtle);
    font-size: 13px;
    font-weight: 600;
    color: var(--desk-color-text-muted);
    z-index: 51;
}

.split-comment-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pickers only exist in split mode. display: none here (not just the
 * [hidden] attribute) — the flex display would otherwise override the
 * UA [hidden] rule and leak the left bar into single-essay mode. */
.split-pane-bar {
    display: none;
    align-items: center;
    padding: 0 0 12px;
}

#ContentRegion[data-split="true"] .split-pane-bar {
    display: flex;
    /* Stay visible while the pane scrolls. */
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--desk-color-bg-surface);
    padding: 8px 0 12px;
}

.split-pane-picker {
    font: inherit;
    font-size: 12px;
    color: var(--desk-color-text);
    background: var(--desk-color-bg-surface);
    border: 1px solid var(--desk-color-border-subtle);
    border-radius: 4px;
    padding: 4px 8px;
    max-width: 100%;
}

/* Same all-caps treatment as lens tips / menu labels. */
.split-pane-close-label {
    margin-left: 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--desk-color-text-muted);
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}

.split-pane-close-label:hover {
    color: var(--desk-color-text);
}

/* X sits at the right of the essay column, just left of the margin. */
.split-pane-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--desk-color-text-muted);
    cursor: pointer;
}

.split-pane-close:hover {
    color: var(--desk-color-text);
    background: var(--desk-color-bg-elevated);
}