/* Page Editor — three-column workspace inside the Pages tab. Left rail is
   the tools panel (templates, bubble shapes, panel library shortcut). Center
   is the canvas with toolbar above it. Right rail is the inspector that
   updates based on what's currently selected on the canvas. */

.page-editor-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 18px;
    min-height: 760px;
}

.page-editor-rail {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.page-editor-rail h4 {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.page-editor-rail .muted-copy {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.page-editor-center {
    display: grid;
    gap: 12px;
    align-content: start;
}

.page-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.page-editor-toolbar input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
}

.page-editor-toolbar .toolbar-spacer {
    flex: 1;
}

.page-editor-canvas-wrap {
    display: grid;
    place-items: start center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%, rgba(0,0,0,0.04)),
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%, rgba(0,0,0,0.04));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    background-color: #e7e7eb;
    overflow: auto;
    max-height: 78vh;
}

.page-editor-canvas-wrap canvas {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    background: #fff;
}

/* Template gallery — small thumbnails drawn with CSS gradients/grid so we
   don't need image assets for the 5 presets. Each card calls
   applyTemplate(id) on click. */
.template-gallery {
    display: grid;
    gap: 8px;
}

.template-card-wrap {
    position: relative;
}

.template-card-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.template-card-wrap:hover .template-card-delete {
    opacity: 1;
}

.template-card-delete:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.template-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    font: inherit;
    width: 100%;
}

.template-card:hover {
    border-color: var(--accent);
}

.template-card.active {
    border-color: var(--accent);
    background: rgba(239, 68, 68, 0.08);
}

.template-card-thumb {
    width: 64px;
    aspect-ratio: 1240 / 1748;
    position: relative;
    background: #1f1f1f;
    border-radius: 5px;
    overflow: hidden;
}

.template-card-thumb .slot {
    position: absolute;
    background: #fafafa;
    border: 1px solid #1f1f1f;
}

.template-card-meta strong {
    display: block;
    font-size: 0.86rem;
}

.template-card-meta small {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

/* Bubble shape buttons */
.bubble-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.bubble-tool {
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}

.bubble-tool:hover {
    border-color: var(--accent);
}

/* Mini panel library inside the Pages tab. Same data as the Phase 1
   library, but reduced visual density and each tile is draggable so the
   user can drop it onto a slot. */
.page-editor-rail-library {
    display: grid;
    gap: 8px;
}

.page-editor-rail-library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-editor-rail-library-heading h4 {
    margin: 0;
}

.page-editor-rail-library-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.narrorift-mode .page-editor-rail-library-count {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5f5;
}

.page-editor-rail-library-search {
    position: relative;
    display: flex;
    align-items: center;
}

.page-editor-rail-library-search > span {
    position: absolute;
    left: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    pointer-events: none;
}

.page-editor-rail-library-search input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.82rem;
}

.page-editor-rail-library-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 59, 69, 0.15);
}

.narrorift-mode .page-editor-rail-library-search input {
    background: #0b1018;
    border-color: #334155;
}

.page-editor-panel-library {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.page-editor-panel-tile {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #0c0c10;
    cursor: grab;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.page-editor-panel-tile:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border-color: rgba(15, 23, 42, 0.25);
}

.page-editor-panel-tile:active {
    cursor: grabbing;
}

.page-editor-panel-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Brief highlight when the user clicks "Use in Pages" from the main
   library — guides the eye to the panel they just chose. */
.page-editor-panel-tile.is-highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 59, 69, 0.35);
    animation: panel-library-pulse 1.4s ease-in-out 1;
}

@keyframes panel-library-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(210, 59, 69, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(210, 59, 69, 0.12); }
}

.page-editor-empty-library {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px 8px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Inspector — right rail. Updates when canvas selection changes. */
.page-editor-inspector .inspector-empty {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.inspector-field {
    display: grid;
    gap: 4px;
    margin-top: 12px;
}

.inspector-field label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}

.inspector-field select,
.inspector-field input[type="number"] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.inspector-actions {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

/* Saved pages strip at the bottom of the Pages tab */
.saved-pages-strip {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.saved-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.saved-page-tile {
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: var(--paper);
    cursor: pointer;
    display: grid;
    gap: 6px;
}

.saved-page-tile.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.saved-page-tile-thumb {
    aspect-ratio: 1240 / 1748;
    background: #1f1f1f;
    overflow: hidden;
}

.saved-page-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saved-page-tile-meta {
    padding: 6px 10px 10px;
    display: grid;
    gap: 2px;
}

.saved-page-tile-meta strong {
    font-size: 0.85rem;
    line-height: 1.35;
}

.saved-page-tile-meta small {
    color: var(--muted);
    font-size: 0.72rem;
}

.page-editor-dirty {
    color: var(--amber);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Narrorift-mode overrides */
.narrorift-mode .page-editor-rail,
.narrorift-mode .page-editor-toolbar,
.narrorift-mode .saved-pages-strip {
    background: rgba(15, 23, 42, 0.7);
    border-color: #334155;
}

.narrorift-mode .page-editor-toolbar input[type="text"],
.narrorift-mode .inspector-field select,
.narrorift-mode .inspector-field input,
.narrorift-mode .template-card,
.narrorift-mode .bubble-tool,
.narrorift-mode .saved-page-tile {
    background: #0b1220;
    color: #e5e7eb;
    border-color: #334155;
}

.narrorift-mode .page-editor-canvas-wrap {
    background-color: #0c111c;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04)),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04));
}

.narrorift-mode .template-card.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--accent);
}

.template-builder-open {
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

/* ---- Phase 3: Chapter editor -------------------------------------------- */

.chapter-editor-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 260px;
    gap: 18px;
    min-height: 640px;
}

.chapter-rail {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
}

.chapter-rail h4 {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.chapter-rail .muted-copy {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.chapter-rail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chapter-list {
    display: grid;
    gap: 6px;
}

.chapter-list-empty {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.chapter-list-item {
    display: grid;
    gap: 4px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.chapter-list-item:hover {
    border-color: var(--accent);
}

.chapter-list-item.active {
    border-color: var(--accent);
    background: rgba(239, 68, 68, 0.08);
}

.chapter-list-item strong {
    font-size: 0.88rem;
}

.chapter-list-item small {
    color: var(--muted);
    font-size: 0.74rem;
}

.chapter-list-item .chapter-status-pill {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chapter-list-item .chapter-status-pill[data-status="submitted"] {
    background: rgba(245, 158, 11, 0.18);
    color: var(--amber);
}

.chapter-list-item .chapter-status-pill[data-status="published"] {
    background: rgba(34, 197, 94, 0.18);
    color: var(--green);
}

.chapter-editor-main {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.chapter-meta-form {
    display: grid;
    gap: 10px;
}

.chapter-meta-field {
    display: grid;
    gap: 4px;
}

.chapter-meta-field > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.chapter-meta-field small {
    color: var(--muted);
    font-weight: 400;
}

.chapter-meta-field input,
.chapter-meta-field textarea {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.chapter-meta-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chapter-status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chapter-status-badge[data-status="submitted"] {
    background: rgba(245, 158, 11, 0.2);
    color: var(--amber);
}

.chapter-status-badge[data-status="published"] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--green);
}

.chapter-dirty {
    color: var(--amber);
    font-size: 0.8rem;
    font-weight: 600;
}

.chapter-section-heading h4 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--ink);
}

.chapter-section-heading small {
    color: var(--muted);
    font-weight: 400;
}

.chapter-ordered-pages {
    display: grid;
    gap: 6px;
    min-height: 200px;
    padding: 8px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
}

.chapter-ordered-pages.is-drop-target {
    border-color: var(--accent);
    background: rgba(239, 68, 68, 0.06);
}

.chapter-ordered-pages-empty {
    place-self: center;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 24px;
}

.chapter-ordered-page {
    display: grid;
    grid-template-columns: auto 56px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    cursor: grab;
}

.chapter-ordered-page:active {
    cursor: grabbing;
}

.chapter-ordered-page.sortable-ghost {
    opacity: 0.4;
}

.chapter-ordered-page .drag-handle {
    color: var(--muted);
    cursor: grab;
}

.chapter-ordered-page-thumb {
    width: 56px;
    aspect-ratio: 1240 / 1748;
    background: #1f1f1f;
    border-radius: 5px;
    overflow: hidden;
}

.chapter-ordered-page-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-ordered-page-meta strong {
    display: block;
    font-size: 0.88rem;
}

.chapter-ordered-page-meta small {
    color: var(--muted);
    font-size: 0.74rem;
}

.chapter-ordered-page-meta .is-cover {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.18);
    color: var(--blue);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chapter-ordered-page-controls {
    display: flex;
    gap: 4px;
}

.chapter-ordered-page-controls button {
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.74rem;
}

.chapter-ordered-page-controls button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.chapter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-available-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
}

.chapter-available-tile {
    aspect-ratio: 1240 / 1748;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #1f1f1f;
    cursor: grab;
    position: relative;
}

.chapter-available-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-available-tile-empty {
    grid-column: 1 / -1;
    padding: 12px 8px;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

/* ---- Phase 3: Custom template builder modal --------------------------- */

.template-builder-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-builder-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 17, 0.62);
    backdrop-filter: blur(4px);
}

.template-builder-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(1100px, 96vw);
    max-height: 92vh;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.template-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.template-builder-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.template-builder-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    overflow: hidden;
    min-height: 0;
}

.template-builder-controls {
    display: grid;
    gap: 12px;
    align-content: start;
    overflow-y: auto;
    padding-right: 4px;
}

.template-builder-controls h4 {
    margin: 8px 0 4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.builder-field {
    display: grid;
    gap: 4px;
}

.builder-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
}

.builder-field small {
    color: var(--muted);
    font-weight: 500;
}

.builder-field input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.builder-field input[type="range"] {
    width: 100%;
}

.builder-slot-list {
    display: grid;
    gap: 6px;
}

.builder-slot-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-strong);
}

.builder-slot-row input {
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
}

.builder-slot-row button {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.builder-slot-row button:hover {
    color: var(--danger);
}

.builder-slot-empty {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
    padding: 10px;
}

.template-builder-canvas-wrap {
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 12px;
    background:
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%, rgba(0,0,0,0.04)),
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%, rgba(0,0,0,0.04));
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    background-color: #e7e7eb;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.template-builder-stage {
    position: relative;
    width: 520px;
    aspect-ratio: 1240 / 1748;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    user-select: none;
    touch-action: none;
}

.template-builder-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
}

.template-builder-grid .grid-cell {
    position: absolute;
    border: 1px dashed rgba(31, 31, 31, 0.25);
}

.template-builder-slots {
    position: absolute;
    inset: 0;
}

.builder-slot-rect {
    position: absolute;
    background: rgba(239, 68, 68, 0.14);
    border: 2px solid rgba(239, 68, 68, 0.7);
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #7f1d1d;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    padding: 4px;
    overflow: hidden;
}

.builder-slot-rect.selected {
    background: rgba(56, 189, 248, 0.2);
    border-color: var(--accent);
    color: #0c4a6e;
}

.builder-drag-preview {
    position: absolute;
    background: rgba(56, 189, 248, 0.18);
    border: 2px dashed var(--accent);
    border-radius: 4px;
    pointer-events: none;
}

.template-builder-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-strong);
}

/* ---- Phase 4: Chapter submission modal -------------------------------- */

.chapter-submit-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-submit-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(560px, 96vw);
    max-height: 92vh;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.chapter-submit-body {
    padding: 18px;
    display: grid;
    gap: 14px;
    overflow-y: auto;
}

.trust-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.trust-tier-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.trust-tier-badge[data-trust="standard"] {
    color: var(--amber);
    background: rgba(245, 158, 11, 0.16);
}

.trust-tier-badge[data-trust="trusted"] {
    color: var(--green);
    background: rgba(34, 197, 94, 0.16);
}

.trust-tier-badge[data-trust="banned"] {
    color: var(--danger);
    background: rgba(248, 113, 113, 0.16);
}

.submission-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-strong);
}

.submission-summary dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.submission-summary dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.45;
    word-break: break-word;
}

#chapter-submit-routing {
    margin: 0;
    line-height: 1.55;
}

.submit-to-narrorift {
    background: var(--green);
    color: #052e16;
    border-color: var(--green);
}

.submit-to-narrorift:hover:not(:disabled) {
    background: #16a34a;
    border-color: #16a34a;
}

.submit-to-narrorift:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chapter-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.45);
    color: var(--green);
}

.chapter-view-link:hover {
    background: rgba(34, 197, 94, 0.2);
    color: var(--green);
}

.narrorift-mode .chapter-submit-dialog {
    background: #0b1220;
    border-color: #334155;
}

.narrorift-mode .submission-summary {
    background: rgba(15, 23, 42, 0.7);
    border-color: #334155;
}

.narrorift-mode .submit-to-narrorift {
    background: var(--green);
    color: #052e16;
}

/* Narrorift-mode overrides for new components */
.narrorift-mode .chapter-rail,
.narrorift-mode .chapter-editor-main {
    background: rgba(15, 23, 42, 0.7);
    border-color: #334155;
}

.narrorift-mode .chapter-list-item,
.narrorift-mode .chapter-meta-field input,
.narrorift-mode .chapter-meta-field textarea,
.narrorift-mode .chapter-ordered-page,
.narrorift-mode .chapter-available-tile {
    background: #0b1220;
    color: #e5e7eb;
    border-color: #334155;
}

.narrorift-mode .chapter-ordered-pages {
    background: rgba(15, 23, 42, 0.5);
}

.narrorift-mode .chapter-list-item.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--accent);
}

.narrorift-mode .template-builder-dialog {
    background: #0b1220;
    border-color: #334155;
}

.narrorift-mode .template-builder-header,
.narrorift-mode .template-builder-footer {
    border-color: #334155;
    background: rgba(15, 23, 42, 0.7);
}

.narrorift-mode .builder-field input[type="text"] {
    background: #080c14;
    border-color: #334155;
    color: #e5e7eb;
}

.narrorift-mode .builder-slot-row {
    background: rgba(15, 23, 42, 0.7);
}

.narrorift-mode .template-builder-canvas-wrap {
    background-color: #0c111c;
}

.narrorift-mode .template-builder-stage {
    background: #f8fafc;
}

/* Responsive — collapse rails on narrower viewports */
@media (max-width: 1100px) {
    .page-editor-shell,
    .chapter-editor-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-editor-rail,
    .chapter-rail {
        max-height: none;
    }

    .page-editor-panel-library,
    .chapter-available-pages {
        max-height: 240px;
    }

    .template-builder-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Workflow redesign keeps Narrorift editing dark and production-focused. */
.narrorift-mode .page-editor-rail,
.narrorift-mode .page-editor-toolbar,
.narrorift-mode .chapter-rail,
.narrorift-mode .chapter-editor-main,
.narrorift-mode .submission-summary {
    background: #10151d;
    border-color: #293244;
}

.narrorift-mode .page-editor-toolbar input[type="text"],
.narrorift-mode .chapter-meta-field input,
.narrorift-mode .chapter-meta-field textarea,
.narrorift-mode .builder-field input[type="text"] {
    background: #0b1018;
    border-color: #334155;
    color: var(--ink);
}

.narrorift-mode .page-editor-canvas-wrap {
    border-color: #293244;
    background:
        linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, 0.08) 75%, rgba(148, 163, 184, 0.08)),
        linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%, transparent 75%, rgba(148, 163, 184, 0.08) 75%, rgba(148, 163, 184, 0.08));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    background-color: #080d14;
}

.narrorift-mode .chapter-list-item,
.narrorift-mode .chapter-ordered-page,
.narrorift-mode .chapter-available-tile,
.narrorift-mode .builder-slot-row {
    background: #111721;
    color: var(--ink);
    border-color: #293244;
}

.narrorift-mode .chapter-ordered-pages {
    background: #0b1018;
}

.narrorift-mode .chapter-list-item.active {
    background: #172033;
    border-color: #57b6ff;
}

.narrorift-mode .chapter-submit-dialog,
.narrorift-mode .template-builder-dialog {
    background: #10151d;
    border-color: #293244;
}

.narrorift-mode .template-builder-header,
.narrorift-mode .template-builder-footer {
    border-color: #293244;
    background: #0c1119;
}

.narrorift-mode .template-builder-canvas-wrap {
    background-color: #080d14;
}

.narrorift-mode .page-editor-rail h4,
.narrorift-mode .chapter-rail h4,
.narrorift-mode .chapter-section-heading h4,
.narrorift-mode .chapter-meta-field > span,
.narrorift-mode .submission-summary dd {
    color: var(--ink);
}

.narrorift-mode .page-editor-rail .muted-copy,
.narrorift-mode .chapter-rail .muted-copy,
.narrorift-mode .chapter-meta-field small,
.narrorift-mode .chapter-list-item small,
.narrorift-mode .chapter-ordered-page-meta small,
.narrorift-mode .submission-summary dt {
    color: var(--muted);
}

.narrorift-mode .template-card,
.narrorift-mode .bubble-tool,
.narrorift-mode .saved-page-tile {
    background: #111721;
    border-color: #293244;
    color: var(--ink);
}

.narrorift-mode .template-card:hover,
.narrorift-mode .bubble-tool:hover,
.narrorift-mode .saved-page-tile:hover {
    border-color: #57b6ff;
}

.narrorift-mode .template-card.active,
.narrorift-mode .saved-page-tile.active {
    background: #172033;
    border-color: #57b6ff;
}

.narrorift-mode .submit-to-narrorift {
    background: var(--green);
    border-color: var(--green);
    color: #052e16;
}