/* ============================================================
   Atelier — app shell + 3-column canvas
   ============================================================ */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ---------- App bar ---------- */
.appbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    z-index: 50;
}

.appbar-leading,
.appbar-trailing { display: flex; align-items: center; gap: 12px; }
.appbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.appbar-title {
    font: 600 17px 'Inter', system-ui, sans-serif;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.appbar-badge {
    font: 500 9.5px inherit;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

.appbar-close { margin-left: 4px; }

.appbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
}

.appbar-doc-name {
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    max-width: 320px;
    /* overflow stays visible so the tooltip pseudo-elements render;
       ellipsis is delegated to the inner .appbar-doc-name-text span. */
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.appbar-doc-name-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.appbar-doc-name:hover {
    color: var(--text-primary);
    background: var(--bg-glass-hover);
    border-color: var(--border-subtle);
}
.appbar-doc-name-input {
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    padding: 6px 10px;
    width: 320px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    border-radius: var(--radius-sm);
    outline: none;
}

/* ---------- Brand mark ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.app-icon { display: inline-block; flex-shrink: 0; }
.app-icon-md { width: 32px; height: 32px; }

/* ---------- Status bar ---------- */
.statusbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 28px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.statusbar-section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.statusbar-spacer { flex: 1; }
.statusbar-divider {
    width: 1px; height: 14px;
    background: var(--border-subtle);
}
.statusbar-section .label { color: var(--text-secondary); }
.statusbar-section .value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---------- 3-column body ---------- */
.workspace {
    flex: 1;
    display: flex;
    min-height: 0;
    background: var(--bg-primary);
}

.panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-secondary);
    overflow: hidden;
}
.panel + .panel        { border-left: 1px solid var(--border-subtle); }
.panel-data   { width: 280px; flex-shrink: 0; }
.panel-canvas { flex: 1; min-width: 0; }
.panel-props  { width: 320px; flex-shrink: 0; }
.panel-pages  { width: 144px; flex-shrink: 0; }

.panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 8px;
}
.panel-header-title {
    font: 600 11px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.panel-header-actions { display: flex; gap: 4px; }
.panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;  /* a child overflowing horizontally shouldn't scroll the panel */
    padding: 12px;
}
.panel-body.no-pad { padding: 0; }

/* ---------- Datasource list ---------- */
.ds-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    transition: color 0.12s ease;
}
.ds-group:hover .ds-group-label { color: var(--text-secondary); }
.ds-group-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.ds-group.collapsed .ds-group-chevron {
    transform: rotate(-90deg);
}
.ds-group-label {
    flex: 1;
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ds-group-count {
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    background: var(--bg-glass);
    border-radius: var(--radius-full);
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}

.ds-item-wrap {
    position: relative;
}
.ds-item-wrap .ds-item {
    /* Reserve room on the right for the kebab so the meta text never runs
       under it, even on hover when the kebab fades in. */
    padding-right: 36px;
}
.ds-menu-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ds-item-wrap:hover .ds-menu-btn,
.ds-menu-btn.active {
    opacity: 1;
}
.ds-menu-btn:hover,
.ds-menu-btn.active {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.ds-menu {
    position: absolute;
    top: calc(100% - 2px);
    right: 4px;
    z-index: 41;
    min-width: 180px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: card-menu-in 0.12s ease-out;
}

.ds-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    width: 100%;
    text-align: left;
}
.ds-item:hover {
    background: var(--bg-glass-hover);
}
.ds-item.active {
    background: var(--accent-soft);
    border-color: rgba(47, 179, 131, 0.18);
}
.ds-item.active .ds-name { color: var(--accent); }

.ds-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.ds-item.active .ds-icon {
    background: var(--accent-soft);
    color: var(--accent);
}
.ds-meta { min-width: 0; flex: 1; }
.ds-name {
    display: block;
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-sub {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.ds-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1px dashed var(--border);
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.ds-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ---------- Canvas (template) ---------- */
.canvas-toolbar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: nowrap;
    overflow: visible;
}
.tool-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 500 12.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.tool-button:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.tool-button.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(47, 179, 131, 0.18);
}

/* Block-add buttons: color the icon to match the block's icon color */
.tool-button-heading > svg { color: var(--accent); }
.tool-button-text    > svg { color: #3b82f6; }
.tool-button-image   > svg { color: #6366f1; }
.tool-button-table   > svg { color: #f59e0b; }
.tool-button-chart   > svg { color: #ec4899; }
.tool-divider {
    width: 1px;
    height: 22px;
    background: var(--border-subtle);
    margin: 0 6px;
}

/* AI assist (centered toolbar button + chat bubble) */
/* ---------- Layers popover ---------- */
.layers {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}
.layers-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.layers-header {
    font: 600 11px 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 6px 0;
}
.layers-empty {
    color: var(--text-muted);
    font-size: 12.5px;
    font-style: italic;
    padding: 8px 6px;
}
.layers-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.layer-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 13px 'Inter', system-ui, sans-serif;
    cursor: grab;
    user-select: none;
    background: transparent;
    border: 0;
    text-align: left;
}
.layer-item:hover { background: var(--bg-glass-hover); }
.layer-item.selected {
    background: var(--accent-soft);
    color: var(--text-primary);
}
.layer-item.dragging { opacity: 0.5; }
.layer-grip {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    cursor: grab;
}
.layer-icon {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}
.layer-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-flag {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}
/* Drop indicators — a 2px accent line above/below the hovered row. */
.layer-item.drop-above::before,
.layer-item.drop-below::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    pointer-events: none;
}
.layer-item.drop-above::before { top: -1px; }
.layer-item.drop-below::after  { bottom: -1px; }

.ai-assist {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}
.ai-assist-button {
    color: var(--accent);
    border-color: rgba(47, 179, 131, 0.18);
    background: var(--accent-soft);
}
.ai-assist-button > svg { color: var(--accent); }
.ai-assist-button:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.ai-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-bubble-input {
    width: 100%;
    min-height: 110px;
    max-height: 240px;
    resize: vertical;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 13px/1.45 'Inter', system-ui, sans-serif;
    outline: none;
    transition: var(--transition);
}
.ai-bubble-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ai-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ai-bubble-hint {
    font: 11px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
}
.ai-bubble-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font: 12.5px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.ai-bubble-option > input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}
.ai-bubble-option:hover > span { color: var(--text-primary); }
.ai-bubble-send {
    padding: 6px 12px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font: 600 12px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.ai-bubble-send:hover:not(:disabled) { filter: brightness(1.05); }
.ai-bubble-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ai-bubble-optimize {
    padding: 6px 12px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: 500 12px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.ai-bubble-optimize:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
}
.ai-bubble-optimize:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@property --ai-glow-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.ai-glow {
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-md) + 2px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
    background: conic-gradient(
        from var(--ai-glow-angle),
        rgba(47, 179, 131, 0)    0deg,
        rgba(47, 179, 131, 0)   50deg,
        rgba(47, 179, 131, 0.75) 100deg,
        rgba(47, 179, 131, 0)  150deg,
        rgba(47, 179, 131, 0)  360deg
    );
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 3px;
}
/* Tighter corner radius when the glow rings a textarea (radius-sm) */
.ai-input-wrap > .ai-glow {
    border-radius: calc(var(--radius-sm) + 2px);
}
.ai-bubble.busy .ai-glow,
.ai-input-wrap.busy .ai-glow {
    opacity: 1;
    animation: ai-glow-spin 3s linear infinite;
}
@keyframes ai-glow-spin {
    to { --ai-glow-angle: 360deg; }
}

.canvas-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-primary);
    background-image:
        radial-gradient(circle at 0 0, var(--border-subtle) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 32px;
    display: flex;
    justify-content: center;
    outline: none; /* focusable for keyboard delete — suppress default ring */
}

/* Communication canvas: no paper, no dotted backdrop — a clean white surface
   that fills the editor area. Same outer wrapper for layout consistency. */
.canvas-scroll.comm {
    background: #ffffff;
    background-image: none;
    padding: 0;
    display: block;
}
[data-theme='dark'] .canvas-scroll.comm { background: #ffffff; }
.page-sizer.comm {
    width: 100%;
    min-height: 100%;
}
.page.comm {
    position: static;
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Override the .page light-mode token block: in comm mode every descendant
       (blocks, handles, snap guides) should still render against white in any
       theme — keep the same token override the document page uses. */
    --bg-elevated:   #ffffff;
    --text-primary:  #1a1a2e;
    --text-secondary:#6b7084;
    --text-muted:    #9ca3b4;
    --border:        rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
}

/* Email header — a stack of From/To/Cc/Bcc/Subject inputs at the top of the
   communication canvas. The page's bottom border separates header from blocks. */
.email-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.email-row:last-child { border-bottom: 0; }
.email-label {
    width: 56px;
    flex-shrink: 0;
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.email-input {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font: 400 12.5px 'Inter', system-ui, sans-serif;
    outline: none;
}
.email-input:focus    { background: var(--accent-soft); }
.email-input:disabled { color: var(--text-muted); }

/* Block layer — wraps all blocks/snap-guides/margin-warn strips. In doc mode
   it just covers the page (absolute fill). In comm mode the page is a flex
   column and this layer takes the remaining space below the email header. */
.block-layer {
    position: absolute;
    inset: 0;
}
.page.comm .block-layer {
    position: relative;
    flex: 1;
    min-height: 0;
    inset: auto;
}

/* ---------- Block editor canvas ----------
   Reusable-block editor: a fluid white surface sized to the block's chosen
   width/height, with a single resize grip in the bottom-right corner. */
.block-canvas-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 32px;
    background: var(--bg-primary);
    background-image: radial-gradient(circle at 0 0, var(--border-subtle) 1px, transparent 1px);
    background-size: 20px 20px;
    outline: none;
}
.block-canvas-surface {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    /* Pin the same colour tokens the comm-page uses so descendant blocks render
       correctly against white regardless of the active theme. */
    --bg-elevated:    #ffffff;
    --text-primary:   #1a1a2e;
    --text-secondary: #6b7084;
    --text-muted:     #9ca3b4;
    --border:         rgba(0, 0, 0, 0.08);
    --border-subtle:  rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    cursor: default;
}
.block-canvas-surface.resizing {
    /* While dragging the corner, hint the operation everywhere on the surface. */
    cursor: nwse-resize;
}
.block-canvas-resize-handle {
    position: absolute;
    right:  -7px;
    bottom: -7px;
    width:  14px;
    height: 14px;
    background: var(--accent);
    border: 2px solid #ffffff;
    border-radius: 3px;
    cursor: nwse-resize;
    z-index: 20;
    box-shadow:
        0 0 0 1px rgba(47, 179, 131, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 120ms ease, background 120ms ease;
}
.block-canvas-resize-handle:hover  { background: #34d399; transform: scale(1.1); }
.block-canvas-resize-handle:active { transform: scale(0.95); }

.block-canvas-readout {
    font: 500 12px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    padding: 4px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    font-variant-numeric: tabular-nums;
}

.page-sizer {
    position: relative;
    flex-shrink: 0;
    /* width/height set inline from _zoom — defines scrollable area */
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    /* width/height set inline from PageSettings (varies with format & orientation) */
    /* Page is paper — light by default. Re-declare the light-mode tokens
       locally so every block/handle inside renders against the page even
       when the rest of the app is in dark mode. The dark-mode override
       below dims the paper a touch so it doesn't blow out against the
       dark backdrop. */
    --bg-elevated:   #ffffff;
    --text-primary:  #1a1a2e;
    --text-secondary:#6b7084;
    --text-muted:    #9ca3b4;
    --border:        rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transform-origin: top left;
}
[data-theme='dark'] .page {
    --bg-elevated:   #ffffff;
    --border:        rgba(0, 0, 0, 0.14);
    --border-subtle: rgba(0, 0, 0, 0.06);
}

/* Alignment guides shown while dragging/resizing a block */
.snap-guide {
    position: absolute;
    background: var(--accent);
    pointer-events: none;
    z-index: 5;
}
.snap-guide.v { top: 0; bottom: 0; width: 1px; }
.snap-guide.h { left: 0; right: 0; height: 1px; }

/* Safe area outline — dashed rectangle drawn at the page margin boundary */
.page-margin {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border: 1px dashed rgba(0, 0, 0, 0.14);
}

/* Tinted strip drawn over the part of a block that crosses into the margin */
.block-margin-warn {
    position: absolute;
    background: rgba(245, 158, 11, 0.22);
    pointer-events: none;
    z-index: 3; /* above blocks, below resize handles (z:4) */
}
.page.empty::before {
    content: "Drop content blocks anywhere on the page";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

/* ---------- Content block ---------- */
.block {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px dashed var(--text-muted);
    border-radius: 0;
    padding: 10px 12px;
    cursor: grab;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
}
.block-header,
.block-body { overflow: hidden; }
.block:hover {
    border-color: var(--text-secondary);
}
.block.selected {
    border-style: dashed;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.block.dragging { cursor: grabbing; opacity: 0.92; }
.block:focus, .block:focus-visible { outline: none; }

.block-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.block-body {
    flex: 1;
    min-height: 0;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
}
.block-placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12.5px;
}

.block.type-text     .block-icon { color: #3b82f6; }
.block.type-heading  .block-icon { color: var(--accent); }
.block.type-image    .block-icon { color: #6366f1; }
.block.type-table    .block-icon { color: #f59e0b; }
.block.type-chart    .block-icon { color: #ec4899; }
.block.type-shape    .block-icon { color: #8b5cf6; }

/* Shapes render their fill/border with no surrounding chrome — the dashed
   block frame would compete with the shape's own visuals. */
.block.block-shape {
    background: transparent;
    border: 0;
    padding: 0;
}
.block.block-shape:hover {
    /* Restore a subtle hint that the shape is hoverable without a hard frame. */
    box-shadow: 0 0 0 1px var(--text-muted);
}
.block.block-shape.selected {
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft);
}
.shape-render {
    pointer-events: none; /* clicks/drags fall through to the block wrapper */
}

/* Preview mode — every block renders as it would on the final document, so we
   strip the editor chrome (dashed border, padding, tinted background) and
   replace it with a hairline outline so the block bounds remain visible. The
   selected accent ring is preserved so the user can still see what's active. */
.block.block-preview {
    background: transparent;
    border: 1px solid var(--border-subtle);
    padding: 0;
    overflow: hidden;
}
.block.block-preview:hover {
    border-color: var(--border);
}
.block.block-preview.selected {
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft);
}
.block-image-render {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.table-render {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    display: block;
}
.table-render-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.table-render-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font: 500 12px var(--font-ui, system-ui);
}

/* Table designer dialog — denser grid editor for column/row data.
   Override .modal-wide (460px) so the grid actually has room to breathe.
   `resize: both` plus a non-visible overflow gives users a corner grip in the
   bottom-right to drag the dialog to whatever size suits their data.
   Padding is zeroed here so the grid can run edge-to-edge horizontally; the
   header/body/actions add their own padding internally. */
.modal.table-designer {
    width: min(1100px, 95vw);
    height: min(700px, 90vh);
    min-width: 480px;
    min-height: 360px;
    max-width: 98vw;
    max-height: 95vh;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
}
.table-designer .modal-header {
    padding: 18px 18px 8px;
    margin-bottom: 0;
}
.table-designer .modal-actions {
    padding: 12px 18px 16px;
    background: var(--bg-elevated);
}
/* Subtle visual cue at the resize corner so the affordance is discoverable. */
.modal.table-designer::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    pointer-events: none;
    background-image: linear-gradient(
        135deg,
        transparent 0 5px,
        var(--text-muted) 5px 6px,
        transparent 6px 8px,
        var(--text-muted) 8px 9px,
        transparent 9px 11px,
        var(--text-muted) 11px 12px,
        transparent 12px
    );
    opacity: 0.6;
}
.table-designer .modal-body {
    flex: 1;
    min-height: 0;
    /* Edge-to-edge horizontally — toolbar and grid each manage their own
       horizontal padding so there's no chrome strip beside the data. */
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.table-designer-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 360px;
}
.table-designer-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.table-designer-summary {
    margin-left: auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.table-designer-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* No border / radius — the grid sits edge-to-edge inside the dialog walls,
       so the dialog's own border+radius framing reads as the grid's frame. */
    border: 0;
    border-radius: 0;
    /* Match the cell background so when the user scrolls horizontally the
       trailing area beside the last column never shows a contrasting strip. */
    background: var(--bg-primary);
}
/* Excel-style grid editor.
   - Sticky column-letter row at the top, sticky row-number column on the left.
   - Header / meta rows scroll with the body so users keep them in view as they
     navigate big tables.
   - Cells are chromeless inputs that fill their td; focus paints an inset ring. */
.table-designer-grid {
    border-collapse: separate;
    border-spacing: 0;
    /* min-width (not width) so the table fills the scroll container when there
       are few columns, and grows past it when columns overflow — eliminating
       the empty strip on the right when scrolled. */
    min-width: 100%;
    font: 12px/1.35 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.table-designer-grid th,
.table-designer-grid td {
    padding: 0;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    vertical-align: middle;
    height: 26px;
}
.table-designer-grid tr td:last-child,
.table-designer-grid tr th:last-child { border-right: 0; }
.table-designer-grid tbody tr:last-child td,
.table-designer-grid tbody tr:last-child th { border-bottom: 0; }

/* Letter row — A, B, C… sticky on top. */
.td-letters th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    height: 22px;
    user-select: none;
    border-bottom: 1px solid var(--border);
}
.td-letter { min-width: 140px; }

/* Editable header row & action row scroll with the data. */
.td-headers th { background: var(--bg-elevated); }
.td-meta th    { background: var(--bg-secondary); }
.td-meta-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
}
.td-icon-btn {
    height: 20px;
    min-width: 20px;
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.td-icon-btn:hover {
    background: var(--bg-primary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}
.td-icon-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--accent);
}
.td-icon-btn.td-danger:hover {
    background: rgba(217, 113, 121, 0.15);
    border-color: rgba(217, 113, 121, 0.4);
    color: #c64f57;
}

/* Corner & row-number cells — Excel's gray gutter. */
.td-corner,
.td-rownum {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    user-select: none;
    width: 44px;
    min-width: 44px;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border) !important;
}
.td-letters .td-corner,
.td-headers .td-corner,
.td-meta    .td-corner { z-index: 3; }   /* corners must beat sticky neighbours */

.td-rownum-num { display: inline-block; }
.td-rownum-del {
    display: none;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    padding: 0;
}
.td-rownum:hover .td-rownum-num { display: none; }
.td-rownum:hover .td-rownum-del { display: inline-block; }
.td-rownum-del:hover {
    background: rgba(217, 113, 121, 0.15);
    color: #c64f57;
}

/* Chromeless cell input — fills the td, only shows chrome on focus. */
.td-cell-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 4px 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    border-radius: 0;
    box-sizing: border-box;
}
.td-cell-input:focus {
    background: var(--bg-elevated);
    box-shadow: inset 0 0 0 2px var(--accent);
    position: relative;
    z-index: 2;
}
.td-header-input {
    font-weight: 600;
    color: var(--text-primary);
}

/* Inline "+ column" tile to the right of the column letters. Spans the
   three header rows via rowspan so the affordance reads as a single tall
   tile rather than three repeated buttons. */
.td-add-col-cell {
    width: 36px;
    background: var(--bg-tertiary);
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border-bottom: 1px solid var(--border) !important;
    border-right: 0 !important;
}
.td-add-col-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-add-col-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Trailing pad cell on each body row to match the +column header column. */
.td-pad-cell {
    background: var(--bg-secondary);
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-subtle);
    width: 36px;
}

/* Inline "+ row" tile under the last data row — fills the grid width. */
.td-add-row td {
    padding: 0;
    background: var(--bg-secondary);
    border-bottom: 0;
    border-right: 0;
}
.td-add-row-btn {
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 500 12px 'Inter', system-ui, sans-serif;
}
.td-add-row-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Friendly empty-state when no columns yet. */
.td-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}
.td-empty-title {
    font: 600 14px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
}
.td-empty-sub { font-size: 12px; }

.chart-render {
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
}
.chart-render .chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.chart-render .chart-title {
    font: 600 13px var(--font-ui, system-ui);
    fill: var(--text-primary);
}
.chart-render .chart-axis {
    font: 500 10px var(--font-ui, system-ui);
    fill: var(--text-secondary);
}
.chart-render .chart-value {
    font: 500 10px var(--font-ui, system-ui);
    fill: var(--text-primary);
}
.chart-render .chart-value-on-fill {
    fill: #ffffff;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.18);
    stroke-width: 0.5;
}
.chart-render .chart-grid {
    stroke: var(--border-subtle);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.chart-render .chart-empty {
    font: 500 12px var(--font-ui, system-ui);
    fill: var(--text-muted);
}

/* Series editor — one row per series in the properties panel. */
.chart-series-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 8px;
    background: var(--bg-secondary);
}
.chart-series-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chart-series-readonly-name {
    font: 500 13px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-series-values {
    flex: 1;
    min-width: 0;
}
.block-text-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}
.block-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font: 400 12.5px 'Inter', system-ui, sans-serif;
    font-style: italic;
}

/* Reusable inline checkbox row for property panels */
.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font: 13px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.checkbox-row > input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}

/* Bottom-right state markers on a block (lock, content-overflow, …) */
.block-corner-indicators {
    position: absolute;
    bottom: 4px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 3;
}
.block-corner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7084;            /* dark gray, no chrome */
}

/* Locked block — no drag/resize affordance */
.block.locked {
    cursor: default;
}
.block.locked .handle {
    display: none;
}

/* AI assist chip — sits inside an .ai-input-wrap, overlaying the textarea */
.ai-input-wrap {
    position: relative;
}
.ai-input-wrap > .textarea {
    /* Reserve space at the top-right so the chip never overlaps user text. */
    padding-right: 56px;
    /* Kill the baseline-descender gap below an inline-replaced <textarea>,
       otherwise the glow ring sits a few px lower than the textarea bottom. */
    display: block;
    /* Roomier than the default prompt-area so users can see/draft a few
       paragraphs before reaching for the AI polish chip. */
    min-height: 200px;
}
.ai-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 6px;
    height: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(47, 179, 131, 0.22);
    border-radius: 999px;
    font: 600 10.5px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 3;
    transition: var(--transition);
}
.ai-chip:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.ai-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ai-chip > svg { color: currentColor; }

/* Resize handles — 4 corner grips + 4 edge grips, visible on hover and when selected */
.handle {
    position: absolute;
    background: var(--accent);
    border: 1.5px solid var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--accent);
    border-radius: 0;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
    transition: opacity 0.12s ease;
}
.block:hover .handle  { opacity: 0.55; pointer-events: auto; }
.block.selected .handle { opacity: 1;  pointer-events: auto; }

/* Corners: small squares centered on the block corners */
.handle.nw { width: 7px; height: 7px; top: -4px;    left: -4px;    cursor: nwse-resize; }
.handle.ne { width: 7px; height: 7px; top: -4px;    right: -4px;   cursor: nesw-resize; }
.handle.sw { width: 7px; height: 7px; bottom: -4px; left: -4px;    cursor: nesw-resize; }
.handle.se { width: 7px; height: 7px; bottom: -4px; right: -4px;   cursor: nwse-resize; }

/* Edges: thin rectangles oriented along the edge */
.handle.n  { width: 14px; height: 5px; top: -3px;    left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle.s  { width: 14px; height: 5px; bottom: -3px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle.w  { width: 5px; height: 14px; left: -3px;   top: 50%;  transform: translateY(-50%); cursor: ew-resize; }
.handle.e  { width: 5px; height: 14px; right: -3px;  top: 50%;  transform: translateY(-50%); cursor: ew-resize; }

/* Rotation handle — small accent circle centred above the block, with a thin
   stem connecting it to the top edge. Sits inside the rotated coordinate
   system so it always orbits the top of the block. */
.rotate-handle {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--accent);
    cursor: grab;
    z-index: 5;
    touch-action: none;
}
.rotate-handle::before {
    content: "";
    position: absolute;
    top: 100%;          /* start at handle bottom edge */
    left: 50%;
    width: 1px;
    height: 14px;       /* span the gap down to the block's top edge */
    margin-left: -0.5px;
    background: var(--accent);
    pointer-events: none;
}
.rotate-handle:active { cursor: grabbing; }
/* Once a block is rotated, the resize handles are hidden — the rotation
   handle remains so the user can dial it back. The handle anchors above
   the block's top edge in the rotated frame, which feels natural. */

/* ---------- Properties panel ---------- */
.props-section {
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}
.props-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    transition: background-color 0.12s ease;
}
.props-section-toggle:hover { background: var(--bg-glass-hover); }
.props-section-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.props-section.collapsed .props-section-chevron {
    transform: rotate(-90deg);
}
.props-section-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.props-section-title {
    font: 600 10.5px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1;
}
.props-section-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.props-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.text-style-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}
/* Adjacent style rows belong to the same control group — only separate them
   by a hair so they read as one block. */
.text-style-row + .text-style-row { margin-top: 4px; }
.text-style-row .tool-button {
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
}

/* Appearance section layout — consistent, tight gap between field rows
   without per-row inline spacer divs. */
.appearance-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Typography fields disabled because the block is bound to a textstyle. */
.typography-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.typography-fields[disabled] {
    opacity: 0.55;
    pointer-events: none;
}

/* ---------- Custom dropdown ---------- */
.dropdown {
    position: relative;
    width: 100%;
}
.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 14px/1.5 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dropdown-trigger:hover { border-color: var(--text-muted); }
.dropdown.open .dropdown-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.dropdown-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-chevron {
    display: inline-flex;
    color: var(--text-secondary);
    transition: transform 0.18s ease, color 0.15s ease;
}
.dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Invisible click-catcher: clicking anywhere outside the menu closes it */
.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: dropdown-in 0.12s ease-out;
}
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font: 400 13.5px/1.4 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover  { background: var(--bg-glass-hover); }
.dropdown-item:focus  { outline: none; background: var(--bg-glass-hover); }
.dropdown-item.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}
.dropdown-check { display: inline-flex; color: var(--accent); }
.dropdown-empty {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---------- Segmented control (binary toggles, e.g. block mode) ---------- */
.segmented {
    display: flex;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.segmented button {
    flex: 1;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: 500 12.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.segmented button:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}
.segmented button.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.segmented button + button { border-left: 1px solid var(--border); }

/* ---------- Color picker ---------- */
.color-picker {
    position: relative;
    width: 100%;
}
.color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px 6px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.color-picker-trigger:hover { border-color: var(--text-muted); }
.color-picker.open .color-picker-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.color-picker-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    /* checkerboard backdrop reveals partial transparency if value is rgba/transparent */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border-subtle) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border-subtle) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.color-picker-value {
    flex: 1;
    font: 500 12.5px 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.color-picker-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.18s ease, color 0.15s ease;
}
.color-picker.open .color-picker-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.color-picker-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: dropdown-in 0.12s ease-out;
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.color-picker-cell {
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.color-picker-cell:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.color-picker-cell.selected {
    box-shadow: 0 0 0 2px var(--accent);
}
/* "No fill" swatch — clean white cell with a single thin red diagonal stroke,
   from bottom-left to top-right. Mirrors the Figma/Sketch convention. */
.color-picker-cell-none,
.color-picker-swatch-none {
    background: var(--bg-elevated);
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        var(--status-danger) calc(50% - 1px),
        var(--status-danger) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
}
.color-picker-section-label {
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
    margin-top: 2px;
}
.color-picker-section-label + .color-picker-grid { margin-bottom: 8px; }

.color-picker-hex {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.color-picker-hex:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.color-picker-hex-prefix {
    padding: 0 8px 0 12px;
    font: 500 13px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted);
}
.color-picker-hex .input {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 8px 12px 8px 0;
    font: 500 13px 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.color-picker-hex .input:focus { box-shadow: none; }
.props-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.props-empty-icon {
    display: inline-flex;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.prompt-area {
    min-height: 110px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------- Misc ---------- */
.kbd {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.4;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 10.5px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

/* AI error toast — pinned bottom-center, dismissible */
.ai-error-toast {
    position: fixed;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    z-index: 150;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid #d97179;
    border-left: 4px solid #d97179;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font: 13px/1.4 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    max-width: calc(100vw - 64px);
    animation: modal-pop 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-error-msg { white-space: pre-wrap; }
.ai-error-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font: 600 16px 'Inter', system-ui, sans-serif;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.ai-error-close:hover { color: var(--text-primary); background: var(--bg-glass-hover); }

/* ---------- Confirm dialog ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: modal-fade-in 120ms ease-out;
}
.modal {
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 18px 18px 14px;
    animation: modal-pop 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-header {
    font: 600 15px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.modal-body {
    font: 13.5px/1.5 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.btn-danger {
    padding: 8px 16px;
    background: #d97179;
    color: #fff;
    border: 1px solid #d97179;
    border-radius: var(--radius-sm);
    font: 600 13px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.btn-danger:hover  { background: #cc6068; border-color: #cc6068; }
.btn-danger:active { background: #bd535b; border-color: #bd535b; }
@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-pop {
    from { transform: translateY(6px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Wider modal variant — used for form dialogs (e.g. new blueprint) where the
   body has fields of its own rather than a one-line confirmation. */
.modal-wide { width: 460px; }

/* Key/value rows used inside the datasource info modal. */
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: 13px;
}
.info-row:last-child { border-bottom: none; }
.info-row > span    { color: var(--text-secondary); }
.info-row > strong  { color: var(--text-primary); font-weight: 500; }

/* List of blocking references shown in the "can't delete" warning modal. */
.blocked-list {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    max-height: 180px;
    overflow-y: auto;
}
.blocked-list li { margin: 0; }

/* Scrollable picker list inside an .attach modal — re-uses .ds-item rows
   for the available datasources. */
.attach-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow-y: auto;
    margin: -4px;
    padding: 4px;
}
.modal-wide .modal-body {
    font: 13.5px/1.5 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    margin-bottom: 18px;
}
.segmented.segmented-3 button + button { border-left: 1px solid var(--border); }

/* ---------- Home page ---------- */
.home-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
}
.home-shell::before {
    content: "";
    position: absolute;
    inset: -4% -6% 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(1600px 1000px at 50% 110%, rgba(47, 179, 131, 0.42), transparent 65%);
    animation: home-glow-drift 32s ease-in-out infinite;
    will-change: transform, opacity;
}
[data-theme='dark'] .home-shell::before {
    background: radial-gradient(1600px 1000px at 50% 110%, rgba(13, 148, 136, 0.38), transparent 65%);
}

@keyframes home-glow-drift {
    0%, 100% { transform: translate3d(-0.4%, 0.2%, 0) scale(1);     opacity: 0.96; }
    50%      { transform: translate3d( 0.4%, -0.4%, 0) scale(1.015); opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
    .home-shell::before { animation: none; transform: none; opacity: 1; }
}
/* Style-guide tabs (segmented). Reusable beyond the home page. */
.tabs {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    padding: 3px;
    border-radius: var(--radius-md);
    gap: 2px;
}
.tab-btn {
    padding: 7px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Centred wrapper so the segmented .tabs sits in the middle of the page. */
.home-tabs-row {
    display: flex;
    justify-content: center;
    margin: 22px 0 4px;
}
.home-content {
    flex: 1;
    padding: 28px 32px 56px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 24px;
}
.home-section-title {
    font: 700 26px/1.15 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.home-section-sub {
    font: 14px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    margin: 0;
}
.home-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 16px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}
.home-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
}
.home-empty h3 {
    font: 600 15px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.home-empty p { margin: 0; }

.blueprint-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.blueprint-card-wrap { position: relative; }
/* Top-right corner cluster: PROD chip (when in production) + kebab. */
.blueprint-card-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 4;
}
.blueprint-card-menu-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blueprint-card-menu-btn:hover,
.blueprint-card-menu-btn.active {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.card-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
.card-menu {
    position: absolute;
    top: 12px;
    left: calc(100% + 4px);
    z-index: 41;
    min-width: 220px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    animation: card-menu-in 0.12s ease-out;
}
@keyframes card-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.card-menu-item:hover { background: var(--bg-glass-hover); }
.card-menu-item.danger { color: #c95960; }
.card-menu-item.danger:hover {
    background: rgba(217, 113, 121, 0.12);
    color: #b54851;
}
.card-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.card-menu-item.danger .card-menu-icon { color: inherit; }
.blueprint-card {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* Right padding leaves room for the kebab to sit inside the card */
    padding: 20px 44px 18px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.blueprint-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 0 0 3px var(--accent-soft);
    transform: translateY(-2px);
}
/* Non-clickable variant — used for datasource cards where the card itself
   has no action; the kebab menu is the only interactive surface. */
.blueprint-card.blueprint-card-static {
    cursor: default;
}
.blueprint-card.blueprint-card-static:hover {
    border-color: var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transform: none;
}
.blueprint-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
}
.blueprint-card-body { flex: 1; min-width: 0; }
.blueprint-card-name {
    font: 600 14px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.prod-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font: 600 9.5px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(47, 179, 131, 0.28);
    border-radius: var(--radius-full);
    line-height: 1.6;
    flex-shrink: 0;
}
.blueprint-card-wrap.in-production .blueprint-card-icon {
    color: var(--accent);
    background: var(--accent-soft);
}
.blueprint-card-sub {
    font: 12px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
}
.blueprint-card-time {
    font: 11.5px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Production / read-only banner shown above the workspace */
.prod-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--accent-soft);
    border-bottom: 1px solid rgba(47, 179, 131, 0.32);
    color: var(--text-primary);
    font: 13px 'Inter', system-ui, sans-serif;
}
.prod-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--accent);
    background: rgba(47, 179, 131, 0.18);
    border-radius: 999px;
    flex-shrink: 0;
}
.prod-banner-body { flex: 1; line-height: 1.5; }
.prod-banner-body strong { color: var(--text-primary); margin-right: 6px; }
.prod-banner-action { flex-shrink: 0; }

/* Lock interactive panels in read-only mode while keeping content readable. */
.app-shell.is-readonly .panel-props,
.app-shell.is-readonly .appbar-doc-name {
    pointer-events: none;
    opacity: 0.7;
}

/* "Not found" screen — used when a blueprint or stylesheet id doesn't
   resolve. Centred card on a soft canvas with a glowing icon, a title,
   and a primary action back to home. */
.missing-blueprint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(80% 60% at 50% 20%, var(--accent-soft) 0%, transparent 60%),
        var(--bg-primary);
    color: var(--text-primary);
}
.missing-blueprint .missing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 420px;
    padding: 40px 36px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.missing-blueprint .missing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-soft);
}
.missing-blueprint h2 {
    font: 600 22px 'Inter', system-ui, sans-serif;
    margin: 0;
    letter-spacing: -0.01em;
}
.missing-blueprint p {
    margin: 0;
    color: var(--text-secondary);
    font: 400 14px/1.55 'Inter', system-ui, sans-serif;
    max-width: 320px;
}
.missing-blueprint .missing-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.missing-blueprint .missing-actions .btn-primary { text-decoration: none; }

/* ============================================================
   Tooltips — CSS-only, driven by `data-tooltip` attribute.
   Position:  default below the element; opt-in `data-tooltip-pos="top"`.
   Alignment: default centered; opt-in `data-tooltip-align="start"`
              (left-anchored) or `="end"` (right-anchored) for
              elements near the viewport edge whose bubble would
              otherwise clip.
   Note: the host element must allow overflow on its pseudo-elements
   — i.e. avoid `overflow: hidden` on the tooltip carrier. If you
   need ellipsis, put it on an inner span instead.
   ============================================================ */

/* :where() keeps specificity at 0 so existing rules like
   `.ai-chip { position: absolute; }` win without an !important. */
:where([data-tooltip]) { position: relative; }

/* Lift the host while its tooltip is showing so the bubble paints above
   later DOM siblings. Needed when neighbours create their own stacking
   contexts (e.g. transform on hover for the color picker swatches). */
:where([data-tooltip]):hover,
:where([data-tooltip]):focus-visible { z-index: 2; }

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    transition: opacity 120ms ease, transform 120ms ease;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    background: #1c2230;
    color: #f3f4f7;
    font: 500 11.5px/1.45 'Inter', system-ui, sans-serif;
    letter-spacing: -0.005em;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 260px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
[data-tooltip]::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #1c2230;
    border-radius: 1px;
}

/* ---------- Default: below the element, centered ---------- */
[data-tooltip]::after {
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}
[data-tooltip]::before {
    left: 50%;
    top: calc(100% + 4px);
    transform: translate(-50%, -4px) rotate(45deg);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after          { transform: translate(-50%, 0); }
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before         { transform: translate(-50%, 0) rotate(45deg); }

/* ---------- Above the element ---------- */
[data-tooltip-pos="top"]::after {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
}
[data-tooltip-pos="top"]::before {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translate(-50%, 4px) rotate(45deg);
}
[data-tooltip-pos="top"]:hover::after,
[data-tooltip-pos="top"]:focus-visible::after  { transform: translate(-50%, 0); }
[data-tooltip-pos="top"]:hover::before,
[data-tooltip-pos="top"]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

/* ---------- Right-anchored bubble (arrow stays centered on element) ---------- */
[data-tooltip-align="end"]::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}
[data-tooltip-pos="top"][data-tooltip-align="end"]::after {
    transform: translateY(4px);
}
[data-tooltip-align="end"]:hover::after,
[data-tooltip-align="end"]:focus-visible::after { transform: translateY(0); }

/* ---------- Left-anchored bubble ---------- */
[data-tooltip-align="start"]::after {
    left: 0;
    transform: translateY(-4px);
}
[data-tooltip-pos="top"][data-tooltip-align="start"]::after {
    transform: translateY(4px);
}
[data-tooltip-align="start"]:hover::after,
[data-tooltip-align="start"]:focus-visible::after { transform: translateY(0); }

/* ---------- Reveal ---------- */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    transition-delay: 350ms;
}

/* Disabled state — never show */
[data-tooltip][disabled]::after,
[data-tooltip][disabled]::before,
[data-tooltip][aria-disabled="true"]::after,
[data-tooltip][aria-disabled="true"]::before { display: none; }

/* Theme adjustments — slightly lighter slate in dark mode for contrast */
[data-theme="dark"] [data-tooltip]::after,
[data-theme="dark"] [data-tooltip]::before {
    background: #2a3140;
    color: #e6edf3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Stylesheet editor — designer's brand book canvas
   ============================================================ */
.ss-canvas-scroll {
    flex: 1;
    overflow: auto;
    background: var(--bg-primary);
    padding: 48px 24px 64px;
}
.ss-canvas {
    max-width: 1080px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 56px 64px 72px;
}
@media (max-width: 720px) {
    .ss-canvas        { padding: 40px 28px 56px; border-radius: var(--radius-md); }
    .ss-canvas-scroll { padding: 24px 12px 40px; }
}

.ss-section + .ss-section {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--border-subtle);
}
/* When collapsed, tighten the gap between sections — the head is the only thing visible. */
.ss-section.collapsed + .ss-section,
.ss-section + .ss-section.collapsed {
    margin-top: 24px;
    padding-top: 24px;
}

.ss-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.ss-section.collapsed .ss-section-head { margin-bottom: 0; }

.ss-section-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Strip default <button> chrome — this is just a click target on a heading. */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.ss-section-meta:hover { color: var(--text-primary); }
.ss-section-meta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.ss-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color var(--transition);
}
.ss-section.collapsed .ss-section-chevron { transform: rotate(-90deg); }
.ss-section-meta:hover .ss-section-chevron { color: var(--text-secondary); }
.ss-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}
.ss-section-title {
    font: 600 22px 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.ss-section-count {
    font: 500 12px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted);
    background: var(--bg-glass);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
}

.ss-empty {
    color: var(--text-muted);
    font-size: 13.5px;
    padding: 20px 0;
    border-top: 1px dashed var(--border-subtle);
    border-bottom: 1px dashed var(--border-subtle);
}

/* ---------- Shared tile chrome ---------- */
.ss-text-tile,
.ss-color-tile,
.ss-image-tile {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}
.ss-text-tile:hover,
.ss-color-tile:hover,
.ss-image-tile:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.ss-tile-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-2px);
    transition: var(--transition);
    z-index: 2;
}
.ss-text-tile:hover .ss-tile-actions,
.ss-color-tile:hover .ss-tile-actions,
.ss-image-tile:hover .ss-tile-actions {
    opacity: 1;
    transform: translateY(0);
}
.ss-tile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(8px);
}
.ss-tile-action:hover {
    color: var(--status-danger);
    border-color: var(--status-danger);
}
/* In dark mode the style/color/image tiles stay light — the swatches and
   typography specimens read truer against a neutral white surface. Re-declare
   the light-mode tokens locally so every descendant (text, borders, image
   checkerboard, action buttons) renders against the white card. */
[data-theme="dark"] .ss-text-tile,
[data-theme="dark"] .ss-color-tile,
[data-theme="dark"] .ss-image-tile {
    --bg-elevated:    #ffffff;
    --bg-tertiary:    #e3e6ed;
    --bg-glass:       rgba(0, 0, 0, 0.04);
    --text-primary:   #1a1a2e;
    --text-secondary: #5b6172;
    --text-muted:     #8b909f;
    --border:         rgba(0, 0, 0, 0.13);
    --border-subtle:  rgba(0, 0, 0, 0.07);
}

/* ---------- Textstyle tiles ---------- */
.ss-textstyle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.ss-text-tile {
    padding: 28px 32px;
}
.ss-text-specimen {
    word-break: break-word;
    margin-bottom: 14px;
    /* Inline styles set the typography; we just need the line to breathe. */
}
.ss-text-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.ss-text-name {
    font: 500 13px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
}
.ss-text-spec {
    font: 400 11.5px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-align: right;
}

.ss-text-preview {
    padding: 18px 20px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    word-break: break-word;
}
/* Keep the textstyle preview on a light surface in dark mode so the
   sample type renders against the same neutral the tiles use. */
[data-theme="dark"] .ss-text-preview {
    --bg-tertiary:    #ffffff;
    --border-subtle:  rgba(0, 0, 0, 0.07);
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

/* ---------- Color tiles ---------- */
.ss-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.ss-color-tile {
    padding: 0;
}
.ss-color-swatch {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-bottom: 1px solid var(--border-subtle);
}
.ss-color-meta {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ss-color-name {
    font: 500 13px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
}
.ss-color-hex {
    font: 500 11.5px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ---------- Image tiles ---------- */
.ss-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.ss-image-tile { padding: 0; }
.ss-image-frame {
    aspect-ratio: 4 / 3;
    width: 100%;
    background:
        linear-gradient(45deg, var(--bg-glass) 25%, transparent 25%) 0 0 / 16px 16px,
        linear-gradient(-45deg, var(--bg-glass) 25%, transparent 25%) 0 8px / 16px 16px,
        linear-gradient(45deg, transparent 75%, var(--bg-glass) 75%) 8px -8px / 16px 16px,
        linear-gradient(-45deg, transparent 75%, var(--bg-glass) 75%) -8px 0 / 16px 16px,
        var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
}
.ss-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.ss-image-placeholder { color: var(--text-muted); }
.ss-image-meta {
    padding: 12px 14px 14px;
}
.ss-image-name {
    font: 500 13px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Image upload widget (in modal) ---------- */
.ss-image-upload {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.ss-upload-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: var(--bg-glass);
    cursor: pointer;
    transition: var(--transition);
}
.ss-upload-drop:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--accent-soft);
}
.ss-upload-primary {
    font: 500 14px 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
}
.ss-upload-secondary {
    font: 400 12px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
}
.ss-upload-preview {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ss-upload-replace {
    align-self: flex-start;
    cursor: pointer;
}
/* Hide the native file input — the wrapping label triggers the click. */
.ss-upload-drop    input[type="file"],
.ss-upload-replace input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Error / not-found screens
   ============================================================ */
.error-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(120% 100% at 50% 0%, var(--accent-soft) 0%, transparent 55%),
        var(--bg-primary);
    color: var(--text-primary);
}
.error-card {
    width: min(560px, 100%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 56px 48px 40px;
    text-align: center;
}
.error-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
    color: var(--text-secondary);
}
.error-brand-name {
    font: 600 14px 'Inter', system-ui, sans-serif;
    letter-spacing: -0.005em;
}

.error-code {
    display: block;
    font: 700 80px/1 'Inter', system-ui, sans-serif;
    letter-spacing: -0.04em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
}
.error-title {
    font: 600 22px 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.error-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 380px;
}
.error-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* Sub-card for diagnostic info on the error page (request id, dev hint). */
.error-detail {
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.error-detail strong { color: var(--text-primary); }
.error-detail code {
    font: 500 12px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-primary);
    background: var(--bg-glass-hover);
    padding: 2px 6px;
    border-radius: 4px;
}
.error-detail + .error-detail { margin-top: 12px; }

@media (max-width: 540px) {
    .error-card { padding: 40px 28px 32px; }
    .error-code { font-size: 64px; }
}

/* Suppress the browser's default focus outline on programmatic focus targets
   (Routes.razor uses <FocusOnNavigate Selector="h1" /> for screen-reader
   accessibility; without this rule the user sees a black ring flash on every
   page load). :focus-visible still kicks in for actual keyboard users, so
   accessibility is preserved. */
h1:focus { outline: none; }
h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   Pages panel — left of canvas in document blueprints, lists
   pages as wireframe thumbnails with drag-reorder.
   ============================================================ */
.panel-pages-body {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;    /* never let tooltips/transforms force a horizontal scrollbar */
}
.page-section {
    display: flex;
    flex-direction: column;
    align-items: center;   /* keep the fixed-width thumbs centred in the column */
    gap: 8px;
}
.page-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
}
.page-section:first-child .page-section-head {
    border-top: 0;
    padding-top: 0;
}
.page-section-title {
    font: 600 11px 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.page-section-empty {
    font: 12px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 4px;
}
.page-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}
.page-thumb:hover { background: var(--bg-glass-hover); }
.page-thumb.active { background: var(--accent-soft); }
.page-thumb.dragging { opacity: 0.5; }
.page-thumb-card {
    /* Width must match ThumbCardWidth in PagesPanel.razor (112) so the inline
       transform: scale(...) on .page-thumb-mini lands the page exactly inside. */
    width: 112px;
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.12s ease;
}
.page-thumb:hover .page-thumb-card { border-color: var(--text-muted); }
.page-thumb.active .page-thumb-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm);
}
.page-thumb-mini {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.page-thumb-mini-block {
    position: absolute;
    transform-origin: center center;
}
.page-thumb-label {
    font: 500 11px 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
}
.page-thumb.active .page-thumb-label { color: var(--text-primary); }

/* Kebab menu trigger — small round overlay in the top-right of each card.
   Reveals on hover (or stays visible when its menu is open). */
.page-thumb-menu-trigger {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-muted);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
    z-index: 2;
}
.page-thumb:hover .page-thumb-menu-trigger,
.page-thumb-menu-trigger:focus-visible {
    opacity: 1;
}
.page-thumb-menu-trigger:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 1);
}

/* Popover menu — fixed-positioned in viewport coords so it can extend past
   the panel's overflow boundaries. The inline `top` / `left` come from a JS
   measurement of the trigger's bounding rect. */
.page-thumb-menu {
    position: fixed;
    min-width: 132px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 50;
}
.page-thumb-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 12.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}
.page-thumb-menu-item:hover { background: var(--bg-glass-hover); }
.page-thumb-menu-item.danger { color: var(--status-danger); }
.page-thumb-menu-item.danger:hover { background: rgba(239, 68, 68, 0.08); }

/* Drop indicators — accent line above/below the row being hovered. */
.page-thumb.drop-above::before,
.page-thumb.drop-below::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    pointer-events: none;
}
.page-thumb.drop-above::before { top: -2px; }
.page-thumb.drop-below::after  { bottom: -2px; }