/* PulseCore book — reading and editing layer.
   Loaded after public/home.css, which supplies the tokens, nav and footer. */

.book-main { padding: 54px 0 92px; min-height: 60vh; }

/* ---------- Table of contents ---------- */

/* Two columns once there is room: what the book is, and what you can do
   with it. Below that they stack in the order you would read them. */
.book-masthead { margin-bottom: 54px; }
.masthead-say { max-width: 62ch; }
.masthead-do { max-width: 62ch; }

@media (min-width: 900px) {
    .book-masthead {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 12px 48px;
        align-items: start;
    }
    /* The right column starts level with the heading, not with the eyebrow
       above it, so the two columns read as a pair rather than a stagger. */
    .masthead-do { padding-top: 6px; }
}
.book-masthead h1 {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 5.4vw, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.book-count { color: var(--text-mute); font-size: 0.92rem; }
.draft-note { color: var(--phase-1); }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.toc-chapter { margin-bottom: 46px; }

/* Chapter, then section count, then the title — the same two numbers in the
   same order as the editor's list, so one screen teaches the other. */
.toc-legend,
.toc-chapter-head {
    display: grid;
    grid-template-columns: 3.4rem 3.4rem 1fr auto;
    align-items: baseline;
    gap: 0 14px;
    padding-left: 12px;
}
.toc-chapter-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

/* Says what the two figures are, once, above the lot. */
.toc-legend {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(35, 38, 46, .6);
}
.toc-legend .toc-n {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.toc-n {
    font-size: 0.95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.toc-n-chapter { color: var(--phase-1); }
.toc-n-section { color: var(--phase-0); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .toc-n-section {
        background: linear-gradient(135deg, var(--phase-0), var(--phase-mid) 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* The masthead tally, in the same two colours as the columns below it. */
.book-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.book-count .count-part { font-size: 0.95rem; color: var(--text-dim); }
.book-count strong { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Says what a group is when it has no number to say it with. */
.toc-kind {
    margin-left: 10px;
    padding: 2px 9px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--text-mute);
    border: 1px solid var(--line);
    border-radius: 999px;
}

/* The chapter's own summary, where its duplicate row used to be. */
.toc-chapter-summary {
    margin: 0 0 10px;
    padding-left: calc(6.8rem + 40px);
    font-size: 0.9rem;
    color: var(--text-mute);
}

/* Opens the chapter's sections. Matches the editor's control. */
.toc-fold {
    padding: 2px 7px;
    font: inherit;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-mute);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
}
.toc-fold:hover { color: var(--phase-1); border-color: var(--phase-1); }
.toc-sections[hidden] { display: none; }
.toc-chapter-head h2 { margin: 0; font-size: 1.3rem; font-weight: 650; }

.toc-sections { list-style: none; margin: 0; padding: 0; }
.toc-sections li { border-bottom: 1px solid rgba(35,38,46,.6); }
.toc-sections li:last-child { border-bottom: 0; }

.toc-sections a {
    display: grid;
    grid-template-columns: 3.4rem 3.4rem 1fr;
    gap: 0 14px;
    padding: 14px 14px 14px 12px;
    border-radius: 8px;
    transition: background .14s ease;
}
.toc-sections a:hover { background: var(--bg-card); }
/* The section number sits in the column the chapter's count sits in, so the
   figures line up down the page instead of drifting with the titles. */
/* A section has no chapter number, so the first column stays empty and its
   figure sits under Section rather than under Chapter. */
.toc-sections .toc-n { grid-column: 2; grid-row: 1 / span 3; padding-top: 2px; }
.toc-sections .toc-title,
.toc-sections .toc-summary { grid-column: 3; }

.toc-title { display: block; font-size: 1.02rem; color: var(--text); }

/* The part's number, ahead of its name. Tabular figures and a fixed width so
   1.9 and 1.15 leave their titles starting at the same place down the list. */
/* The same number ahead of a title in the pager, so "Next" says which part
   is next rather than only what it is called. */
.pager-num { color: var(--phase-1); font-variant-numeric: tabular-nums; }

.toc-part-num {
    display: inline-block;
    min-width: 2.8em;
    color: var(--phase-1);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
}
.toc-summary { display: block; margin-top: 3px; font-size: 0.9rem; color: var(--text-mute); }

.badge-draft {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #07080a;
    background: var(--phase-0);
    border-radius: 4px;
    vertical-align: middle;
}

/* A work groups the chapters beneath it. */
.toc-work { margin-bottom: 56px; }
.toc-work-title {
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.012em;
}
.toc-work-title a { color: var(--text); }
.toc-work-title a:hover { color: var(--phase-1); }
.toc-chapter-head h3 { margin: 0; font-size: 1.22rem; font-weight: 650; }

/* Parts sitting below a chapter are stepped in. */
.toc-sections li.is-nested a { padding-left: 26px; }
.toc-sections li.is-nested a:hover { padding-left: 32px; }

.prose-ref {
    margin: 0 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--phase-1);
}

.crumbs a:hover { color: var(--text); }

.book-empty {
    max-width: 62ch;
    padding: 46px 0;
    color: var(--text-dim);
}
.book-empty h1, .book-empty h2 { color: var(--text); margin-top: 0; }
.book-empty code, .admin-head code, .prose code {
    padding: 2px 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.89em;
}

/* ---------- Reading ---------- */

.book-reader { max-width: 760px; }

.crumbs {
    display: flex;
    gap: 9px;
    margin-bottom: 26px;
    font-size: 0.86rem;
    color: var(--text-mute);
}
.crumbs a { color: var(--phase-1); }

.prose-head { margin-bottom: 38px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.prose-head h1 {
    margin: 0 0 12px;
    font-size: clamp(1.9rem, 4.6vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
}
.prose-summary { margin: 0; color: var(--text-dim); font-size: 1.04rem; }

.prose {
    font-size: 1.07rem;
    line-height: 1.78;
    color: #d7dae1;
}
.prose > h2 {
    margin: 52px 0 16px;
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -0.01em;
}
.prose > h3 { margin: 38px 0 12px; font-size: 1.2rem; font-weight: 600; color: var(--text); }
.prose > h4 { margin: 30px 0 10px; font-size: 1.04rem; font-weight: 600; color: var(--text); }
.prose p  { margin: 0 0 22px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 26px; }
.prose li { margin-bottom: 9px; }
.prose a  { color: var(--phase-1); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--text); }
.prose strong { color: var(--text); font-weight: 650; }
.prose em { color: #e8eaef; }
.prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }

.prose blockquote {
    margin: 30px 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--phase-0);
    color: var(--text-dim);
    font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose pre {
    margin: 26px 0;
    padding: 18px 20px;
    background: #0d0f13;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}
.prose pre code { padding: 0; background: none; border: 0; }

.prose table {
    width: 100%;
    margin: 26px 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-card); color: var(--text); font-weight: 600; }

.prose img { max-width: 100%; height: auto; border-radius: 9px; }

.edit-link { margin: 40px 0 0; font-size: 0.9rem; }
.edit-link a { color: var(--phase-1); }

.pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 58px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.pager a {
    max-width: 46%;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.pager a:hover { border-color: var(--phase-1); background: var(--bg-card); }
.pager-next { text-align: right; margin-left: auto; }
.pager-label { display: block; font-size: 0.78rem; color: var(--phase-1); margin-bottom: 4px; }
.pager-title { display: block; font-size: 0.95rem; color: var(--text); }

/* ---------- Editor ---------- */

.admin-head {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 38px;
}
.admin-head h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.admin-head .muted { margin: 0; }

.flash {
    padding: 13px 17px;
    margin: 0 0 20px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    font-size: 0.94rem;
}
.flash-ok  { border-color: rgba(53,232,224,.45); }
.flash-err { border-color: rgba(255,51,102,.5); color: #ffc2d1; }
.flash a { color: var(--phase-1); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }

/* Previous and next section, within reach of the thumb.
   A horizontal pill at the bottom corner, matching the page navigator that
   sits centred on the same edge: same neon rim, same glass, same glow. */
.pc-sectionnav {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid rgba(53, 232, 224, .3);
    border-radius: 999px;
    background: rgba(10, 11, 13, .82);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 18px rgba(53, 232, 224, .12),
                0 8px 26px rgba(0, 0, 0, .5);
}
.pc-sectionnav a,
.pc-sectionnav .is-spent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
    color: var(--phase-1);
    text-decoration: none;
    border-radius: 50%;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.pc-sectionnav a:hover,
.pc-sectionnav a:focus-visible {
    color: #07080a;
    background: var(--phase-1);
    box-shadow: 0 0 14px rgba(53, 232, 224, .55);
    outline: none;
}
/* One end of the book: the arrow stays, so the pair keeps its shape. */
.pc-sectionnav .is-spent { color: var(--text-mute); opacity: .35; }

/* It sits over the text, so give the page something to scroll past. */
.book-page .pager { margin-bottom: 76px; }

@media (max-width: 700px) {
    .pc-sectionnav { right: 12px; bottom: 12px; }
}
@media print {
    .pc-sectionnav { display: none; }
}

/* The two number columns are told apart by colour rather than by reading
   them: chapters in turquoise, sections in pink running to purple. Each
   column keeps its colour whether the cell holds a number or a count. */
/* How baked the lexicon is. The bar is the measure; the figure beside it is
   the same number for anyone who wants it exactly. */
.baked-overall {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg-card);
}
.baked-figure {
    font-size: 2.6rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--phase-1);
}
.baked-of { flex: 1 1 260px; color: var(--text-dim); font-size: 0.92rem; }

.baked-bar {
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
.baked-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--phase-0), var(--phase-mid) 55%, var(--phase-1));
}
.baked-table td { vertical-align: middle; }

.baked-dist { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 24px; }
.baked-chip {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
}
.baked-chip b { color: var(--phase-1); font-variant-numeric: tabular-nums; }
.baked-pick { font-size: 0.82rem; }

.num-chapter,
.num-section {
    font-weight: 650;
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
}
.num-chapter { color: var(--phase-1); }
.num-section { color: var(--phase-0); }

/* Gradient text only where it can be painted; the colours above keep the
   numbers visible rather than transparent on top of nothing. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .num-section {
        background: linear-gradient(135deg, var(--phase-0), var(--phase-mid) 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* The list folds to its chapters; a chapter opens to show what is inside. */
/* A table row's display is set by the table, which can outrank [hidden]. */
.admin-table tr[hidden] { display: none; }

.row-fold {
    padding: 2px 6px;
    margin-right: 6px;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--text-mute);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
    vertical-align: middle;
}
.row-fold:hover { color: var(--phase-1); border-color: var(--phase-1); }
.row-kids {
    margin-left: 8px;
    font-size: 0.76rem;
    color: var(--text-mute);
    white-space: nowrap;
}
.admin-table th {
    padding: 11px 12px;
    text-align: left;
    color: var(--text-mute);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 13px 12px; border-bottom: 1px solid rgba(35,38,46,.65); vertical-align: top; }
.admin-table td.num { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.admin-table a { color: var(--text); }
.admin-table a:hover { color: var(--phase-1); }
.admin-table .file { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--text-mute); }
.admin-table .muted { color: var(--text-mute); white-space: nowrap; }
.row-actions { white-space: nowrap; }
.row-actions a { margin-right: 12px; font-size: 0.88rem; color: var(--phase-1) !important; }
.row-actions a:last-child { margin-right: 0; }
.row-actions a.branch {
    padding: 2px 9px;
    border: 1px solid rgba(53,232,224,.35);
    border-radius: 12px;
    font-size: 0.82rem;
}
.row-actions a.branch:hover { background: rgba(53,232,224,.1); border-color: var(--phase-1); }

/* The address hierarchy, shown as indentation. */
.admin-table tr.depth-2 td:nth-child(3) { padding-left: 30px; }
.admin-table tr.depth-3 td:nth-child(3) { padding-left: 52px; }
.admin-table tr.depth-4 td:nth-child(3) { padding-left: 74px; }
.admin-table tr.depth-5 td:nth-child(3) { padding-left: 96px; }
.admin-table .file em { color: var(--text-mute); font-style: normal; opacity: .8; }

.flash-branch { border-color: rgba(53,232,224,.45); }
.flash-branch code { color: var(--phase-1); }

.status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.status-published { background: rgba(53,232,224,.14); color: var(--phase-1); }
.status-draft     { background: rgba(255,51,102,.14); color: #ff7a9c; }

.editor { margin-top: 10px; }

/* Page settings collapse to one line. They matter when a page is created
   and rarely afterwards, and the writing area is what the screen is for. */
.pc-meta {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-raise);
    overflow: hidden;
}

.pc-meta-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    color: var(--text-dim);
    background: var(--bg-card);
    border: 0;
    cursor: pointer;
}
.pc-meta-head:hover { color: var(--text); }

.pc-meta-caret { transition: transform .15s ease; color: var(--text-mute); }
.pc-meta.is-open .pc-meta-caret { transform: rotate(90deg); }

.pc-meta-label { font-weight: 600; white-space: nowrap; }

/* The summary stands in for the panel while it is closed. */
.pc-meta-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-mute);
    font-size: 0.85rem;
}
.pc-meta.is-open .pc-meta-summary { display: none; }
.pc-meta-summary b { color: var(--text-dim); font-weight: 500; }
.pc-meta-summary .sep { opacity: .5; margin: 0 6px; }
.pc-meta-summary .is-draft { color: #ff7a9c; }
.pc-meta-summary .is-published { color: var(--phase-1); }

.pc-meta:not(.is-open) .editor-meta { display: none; }

.editor-meta {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px 14px;
    padding: 14px;
}
.editor-meta label,
.editor-meta .f-field { display: flex; flex-direction: column; gap: 5px; }
.editor-meta .f-field > label { gap: 0; }
.editor-meta > label > span,
.editor-meta .f-field > label > span {
    font-size: 0.76rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-meta em { color: var(--text-mute); font-style: normal; }

/* Three rows rather than five: identity, address, summary. */
.f-title   { grid-column: span 6; }
.f-num     { grid-column: span 2; }
.f-status  { grid-column: span 2; }
.f-folder  { grid-column: span 6; }
.f-slug    { grid-column: span 6; }
.f-summary { grid-column: span 12; }

.f-urlpreview {
    grid-column: span 12;
    margin: -4px 0 0;
    font-size: 0.82rem;
}
.f-urlpreview code { color: var(--phase-1); word-break: break-all; }

.editor-meta input, .editor-meta select { padding: 8px 11px; font-size: 0.9rem; }

/* An input with an action beside it. */
.f-inline { display: flex; gap: 6px; align-items: stretch; }
.f-inline input { flex: 1; min-width: 0; }

.f-gen {
    padding: 0 12px;
    font: inherit;
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--text-dim);
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}
.f-gen:hover { color: var(--text); border-color: var(--phase-1); }
.f-gen:disabled { opacity: .45; cursor: not-allowed; }
.f-gen:disabled:hover { color: var(--text-dim); border-color: var(--line); }

.editor input, .editor select, .editor textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.96rem;
}
.editor textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.93rem;
    line-height: 1.7;
    resize: vertical;
    min-height: 420px;
}
.editor input:focus, .editor select:focus, .editor textarea:focus {
    outline: none;
    border-color: var(--phase-1);
    box-shadow: 0 0 0 3px rgba(53,232,224,.12);
}

.editor-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Floating save — reachable from anywhere in a long section.
   Above the full-screen preview on purpose: losing unsaved work is worse
   than a button overlapping a reading view. */
.pc-floatsave {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(17, 19, 24, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.pc-floatsave .btn { padding: 10px 22px; font-size: 0.92rem; }

.pc-floatsave-state {
    padding-right: 4px;
    font-size: 0.8rem;
    color: var(--text-mute);
    white-space: nowrap;
}

/* Unsaved work gets a visible marker, not just different words. */
.pc-floatsave.is-dirty { border-color: rgba(255, 51, 102, 0.55); }
.pc-floatsave.is-dirty .pc-floatsave-state { color: #ff7a9c; }
.pc-floatsave.is-dirty .pc-floatsave-state::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--phase-0);
    vertical-align: middle;
}

@media (max-width: 560px) {
    .pc-floatsave { left: 12px; bottom: 12px; }
    .pc-floatsave-state { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-floatsave { backdrop-filter: none; }
}

/* Deleting sits apart from saving, and looks it. */
.danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 48px 0 0;
    padding: 20px 22px;
    border: 1px solid rgba(255,51,102,.35);
    border-radius: 12px;
    background: rgba(255,51,102,.05);
}
.danger-zone h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 650; color: #ff7a9c; }
.danger-zone .muted { margin: 0; max-width: 62ch; font-size: 0.9rem; }
.danger-zone code { background: rgba(0,0,0,.25); }

.btn-danger {
    border-color: rgba(255,51,102,.5);
    color: #ff7a9c;
    white-space: nowrap;
}
.btn-danger:hover { background: var(--phase-0); color: #fff; border-color: var(--phase-0); }

@media (max-width: 720px) {
    .editor-meta { grid-template-columns: repeat(4, 1fr); }
    .f-title, .f-folder, .f-slug, .f-summary, .f-urlpreview { grid-column: span 4; }
    .f-num, .f-status { grid-column: span 2; }
    .pager { flex-direction: column; }
    .pager a { max-width: 100%; }
    .pager-next { text-align: left; margin-left: 0; }
    .admin-table .file, .admin-table thead { display: none; }
}

/* =================================================================
   Site blocks — the ::: presets.
   Styled once and shared by the reader and the editor preview, so
   what an author sees while writing is what a reader gets.
   ================================================================= */

.cx { margin: 30px 0; }

.cx-label {
    margin: 0 0 8px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cx p:last-child { margin-bottom: 0; }

.cx-note, .cx-key, .cx-warning, .cx-aside {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--bg-card);
    font-size: 0.99rem;
}
.cx-note    { border-left-color: var(--phase-1); }
.cx-note    .cx-label { color: var(--phase-1); }
.cx-key     { border-left-color: var(--phase-mid); background: linear-gradient(120deg, rgba(176,92,196,.08), var(--bg-card)); }
.cx-key     .cx-label { color: #d59bea; }
.cx-warning { border-left-color: var(--phase-0); }
.cx-warning .cx-label { color: #ff7a9c; }
.cx-aside   { border-left-color: var(--text-mute); color: var(--text-dim); }

.cx-quote { margin: 38px 0; padding: 0; text-align: center; }
.cx-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.5;
    color: var(--text);
}
.cx-quote figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--text-mute); }

.cx-figure { margin: 34px 0; }
.cx-figure img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.cx-figure figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-mute); }
.cx-figure figcaption p { margin: 0; }

/* The block that turns a claim into something the reader can go and run. */
.cx-sim {
    padding: 22px 24px;
    border: 1px solid rgba(53,232,224,.32);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(53,232,224,.07), var(--bg-card) 60%);
}
.cx-sim-body p:last-child { margin-bottom: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.cx-chip {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg);
    font-size: 0.78rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cx-chip b { color: var(--phase-1); font-weight: 600; }
.cx-sim-go {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--phase-1);
    text-decoration: none !important;
}
.cx-sim-go:hover { color: var(--text); }

.cx-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* =================================================================
   Page builder
   ================================================================= */

.admin-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pc-editor {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raise);
    /* Deliberately not overflow:hidden — that would stop the header
       sticking. The corners are rounded on the first and last children
       instead. */
}

/* The header follows you down the page, so the controls stay reachable
   while editing rather than scrolling away above the text. */
.pc-editor > .pc-head {
    position: sticky;
    top: var(--pc-nav-h, 56px);
    z-index: 20;
    border-radius: 12px 12px 0 0;
    background: var(--bg-card);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.pc-editor > .pc-head > :first-child { border-radius: 12px 12px 0 0; }

.pc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-card);
}
/* The bar is space-between, so its two halves have to be two children:
   the view tabs and the history buttons share the left one. */
.pc-bar-left  { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-views { display: flex; gap: 4px; }
.pc-history { display: flex; gap: 4px; }
.pc-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Nothing left to step back to. Dimmed rather than hidden, so the pair keeps
   its place and the bar does not shift under the pointer mid-click. */
.pc-ghost:disabled { opacity: .4; cursor: not-allowed; }
.pc-ghost:disabled:hover { color: var(--text-dim); background: transparent; }

.pc-format {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.pc-tab, .pc-ghost, .pc-toolbar button:not(.pc-row-toggle) {
    padding: 5px 11px;
    font: inherit;
    font-size: 0.83rem;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pc-tab:hover, .pc-ghost:hover, .pc-toolbar button:not(.pc-row-toggle):hover {
    color: var(--text);
    background: rgba(255,255,255,.06);
}
.pc-tab.is-active { color: #07080a; background: var(--phase-1); font-weight: 600; }
.pc-ghost { border-color: var(--line); }

/* Format and Blocks are collapsed by default: the header is pinned over the
   text, so its resting height is what you give up from the writing area. */
.pc-panel-btn.is-active {
    color: #07080a;
    background: var(--phase-1);
    border-color: var(--phase-1);
    font-weight: 600;
}

/* The formatting strip is always present; its groups collapse individually. */
.pc-editor .pc-toolbar { display: flex; }

/* Four rows. Each keeps its label at the left and its toggle at the far
   right; a collapsed row's toggle moves up, so they gather on the topmost
   row still showing. */
/* Top-aligned, not centred: the controls wrap to two or three lines on a
   narrow editor, and centring left the label and the toggle floating in the
   middle of a tall row instead of level with the first line of buttons. */
.pc-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(35,38,46,.55);
    min-height: 30px;
}
.pc-row:last-child { border-bottom: 0; }

.pc-row-label {
    flex: 0 0 auto;
    width: 52px;
    padding-top: 7px;          /* level with the first line of controls */
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
}

.pc-row-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
/* A collapsed row leaves the strip entirely — its name rides on the toggle
   that moved up. Leaving it in place produced a full-width row empty but for
   a caret at the far right, which reads as broken rather than as folded. */
.pc-row.is-collapsed { display: none; }

/* Unless nothing above it is open: then it stays as a bare strip so the
   toolbar always has somewhere to click. */
.pc-row.is-collapsed.is-stub { display: flex; }
.pc-row.is-collapsed.is-stub .pc-row-label { opacity: .5; }

/* A stub is folded like any other row — only its strip survives. Without
   this it kept every control on screen, so collapsing the top row looked
   like the click had done nothing at all. */
.pc-row.is-collapsed.is-stub .pc-row-items { display: none; }

/* The extract report: its own full-width row under the toolbar, so a list of
   fifteen parts does not wrap back through the buttons. */
.pc-report-slot:empty { display: none; }
.pc-report-slot {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(35,38,46,.55);
    font-size: 0.86rem;
}
.pc-report summary { cursor: pointer; color: var(--phase-1); }
.pc-report ol {
    margin: 8px 0 0;
    padding-left: 26px;
    max-height: 210px;
    overflow-y: auto;
    color: var(--text-dim);
}
.pc-report li { margin: 2px 0; }
.pc-report p { margin: 8px 0 0; color: var(--text-dim); }

/* The toggles, gathered at the right. */
.pc-row-toggles {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 3px 0 0 10px;     /* level with the first line, clear of it */
    max-width: 55%;            /* chips wrap rather than squeezing the row */
}

/* An open row's toggle: a small square target, so the tray reads as a
   control rather than a stray character sitting at the edge. */
.pc-row-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font: inherit;
    font-size: 0.66rem;
    line-height: 1;
    color: var(--text-mute);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.pc-row-toggle:hover { color: var(--phase-1); border-color: var(--phase-1); background: rgba(53,232,224,.08); }

/* A chip for a folded row: it carries that row's name, so the strip always
   says what is missing and what clicking will bring back. */
.pc-row-toggle.is-collapsed {
    padding: 2px 8px;
    color: var(--phase-1);
    border-color: rgba(53,232,224,.35);
    background: rgba(53,232,224,.07);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pc-row-toggle.is-collapsed:hover {
    background: rgba(53,232,224,.16);
    border-color: var(--phase-1);
}

/* Markdown writes its own syntax, so the formatting row has nothing to do. */
.pc-editor.is-markdown .pc-toolbar { display: none; }

/* Formatting rows, kept dense so the set fits without pushing the writing
   area down the screen. */
.pc-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.pc-toolbar button:not(.pc-row-toggle) {
    padding: 4px 7px;
    min-width: 28px;
    font-size: 0.8rem;
    border-radius: 5px;
}
.pc-toolbar select {
    max-width: 118px;
    padding: 4px 7px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.pc-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }

/* Alignment icons: a stack of lines with a direction hint. */
.pc-toolbar button.pc-ico { font-size: 0.78rem; line-height: 1; letter-spacing: -1px; }
.pc-toolbar button.pc-ico sub { font-size: 0.7em; vertical-align: baseline; }

/* ---------- Colour ---------- */

.pc-colour { position: relative; display: inline-flex; }

.pc-colour-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 7px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
}
.pc-colour-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pc-colour-a { line-height: 1; font-weight: 700; }
.pc-colour-bar {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--phase-1);
}

.pc-colour-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 186px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.pc-colour-menu[hidden] { display: none; }

.pc-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.pc-swatch {
    width: 100%;
    aspect-ratio: 1;
    min-height: 24px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 5px;
    cursor: pointer;
}
.pc-swatch:hover { outline: 2px solid var(--phase-1); outline-offset: 1px; }

.pc-colour-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.pc-colour-custom input[type="color"] {
    width: 44px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.pc-colour-clear {
    width: 100%;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}
.pc-colour-clear:hover { color: var(--text); border-color: var(--phase-1); }

.pc-row[data-row="blocks"] button[data-block] { border-color: var(--line); }

/* Fill the page from a document without leaving the editor. */
.pc-import {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.pc-import-btn {
    padding: 5px 11px;
    font-size: 0.82rem;
    color: var(--text-dim);
    border: 1px dashed var(--line);
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.pc-import-btn:hover {
    color: var(--text);
    border-color: var(--phase-1);
    background: rgba(53,232,224,.06);
}
.pc-import-note { font-size: 0.8rem; color: var(--text-mute); }
.pc-import-note.is-error { color: #ff7a9c; }



/* Segmented layout control: editor | split | preview. */
.pc-layout {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}
.pc-lay {
    padding: 5px 12px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-dim);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.pc-lay:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pc-lay.is-active { color: #07080a; background: var(--phase-1); font-weight: 600; }

/* Either side can take the full width, or they can share it. */
.pc-split { display: grid; grid-template-columns: 1fr; }
.pc-editor.layout-split .pc-split { grid-template-columns: 1fr 1fr; }

.pc-editor.layout-editor .pc-preview-wrap { display: none; }

.pc-editor.layout-preview .pc-panes { display: none; }
.pc-editor.layout-preview .pc-toolbar { display: none; }
.pc-editor.layout-preview .pc-preview-wrap {
    border-left: 0;
    max-height: none;
}
.pc-editor.layout-preview .pc-preview {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    padding: 34px 24px 60px;
}

.pc-panes { min-width: 0; }
.pc-editor.layout-editor .pc-panes textarea,
.pc-editor.layout-editor .pc-canvas { border-radius: 0; }
.pc-pane[hidden] { display: none; }

/* The visual canvas is styled the way a reader sees the page, so what you
   build looks like what gets published rather than like a form field. */
.pc-canvas {
    min-height: 520px;
    padding: 26px 28px;
    background: var(--bg);
    color: #d7dae1;
    font-size: 1.04rem;
    line-height: 1.75;
    overflow-y: auto;
}
.pc-canvas:focus { outline: none; }

/* Section dividers, named where they fall.
 *
 * A part break is an <hr> in the stored body and looks like any other rule
 * in the canvas, so a chapter of fifteen showed fifteen identical lines with
 * nothing to say which section each one opened. The number comes from a CSS
 * counter and the label from generated content: neither is in the document,
 * so nothing here can be typed over, selected, or saved into the body. */
.pc-canvas { counter-reset: pc-section; }

.pc-canvas hr.pc-part {
    counter-increment: pc-section;
    position: relative;
    margin: 52px 0 40px;            /* room beneath for the label */
    border: 0;
    border-top: 1px solid rgba(53, 232, 224, .45);
}
.pc-canvas hr.pc-part::after {
    content: "Section " counter(pc-section);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 12px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--phase-1);
    background: var(--bg-card);
    border: 1px solid rgba(53, 232, 224, .35);
    border-radius: 999px;
    /* It is furniture, not text: the caret and the mouse pass through it. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.pc-canvas:empty::before {
    content: 'Start writing, or drop in a block from the row above.';
    color: var(--text-mute);
}
.pc-canvas > :first-child { margin-top: 0; }
.pc-canvas img { max-width: 100%; height: auto; }
.pc-canvas table { width: 100%; }

/* Make structural blocks visible while editing without altering output. */
.pc-canvas .cx-columns > div {
    outline: 1px dashed rgba(154,161,173,.28);
    outline-offset: 4px;
    min-height: 40px;
}

.pc-editor textarea {
    width: 100%;
    min-height: 520px;
    padding: 20px 22px;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.72;
    resize: vertical;
}
.pc-editor textarea:focus { outline: none; box-shadow: none; }

.pc-preview-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--bg);
    max-height: 700px;
}
.pc-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.pc-preview-close { display: none; }

.pc-preview {
    flex: 1;
    overflow-y: auto;
    padding: 26px 28px;
    font-size: 1.02rem;
}
.pc-preview > :first-child { margin-top: 0; }
.pc-editor.is-previewing .pc-preview { opacity: .55; transition: opacity .15s ease; }

.pc-preview-empty { color: var(--text-mute); font-style: italic; }
.pc-preview-error {
    padding: 16px 18px;
    border: 1px solid rgba(255,51,102,.45);
    border-radius: 9px;
    background: rgba(255,51,102,.08);
    color: #ffc2d1;
    font-size: 0.94rem;
}
.pc-preview-error button {
    margin-top: 10px;
    padding: 6px 13px;
    font: inherit;
    font-size: 0.86rem;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}

.pc-status {
    margin: 0;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
    background: var(--bg-card);
    font-size: 0.82rem;
    color: var(--text-mute);
    min-height: 34px;
}

/* ---------- Full-screen preview ---------- */

body.pc-noscroll { overflow: hidden; }

.pc-editor.is-fullscreen .pc-head { position: static; box-shadow: none; }
.pc-editor.is-fullscreen .pc-preview-wrap {
    position: fixed;
    inset: 0;
    z-index: 999;
    max-height: none;
    border-left: 0;
    background: var(--bg);
}
.pc-editor.is-fullscreen .pc-preview-head {
    padding: 14px 24px;
    font-size: 0.78rem;
}
.pc-editor.is-fullscreen .pc-preview-close {
    display: inline-block;
    padding: 6px 14px;
    font: inherit;
    font-size: 0.84rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}
.pc-editor.is-fullscreen .pc-preview-close:hover { border-color: var(--phase-1); }
.pc-editor.is-fullscreen .pc-preview {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    padding: 46px 24px 80px;
    font-size: 1.07rem;
}

@media (max-width: 900px) {
    /* Not enough width for two columns; the toggle still picks which one. */
    .pc-editor.layout-split .pc-split { grid-template-columns: 1fr; }
    .pc-editor.layout-split .pc-preview-wrap {
        border-left: 0;
        border-top: 1px solid var(--line);
        max-height: 460px;
    }
    .pc-bar-left,
    .pc-bar-right { width: 100%; justify-content: space-between; }
}

/* =================================================================
   Import
   ================================================================= */

/* The importer offering a split it can see but was not asked for. Laid out
   as one line so the offer and the button read as a single sentence. */
.import-report code { color: var(--phase-1); }
.import-report p { margin: 0; }
.import-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.import-suggest p { margin: 0; flex: 1 1 280px; }
.import-suggest .btn { flex: 0 0 auto; }

.upload-form .f-file { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.upload-form .f-file > span { font-size: 0.82rem; color: var(--text-dim); }
.upload-form input[type="file"] {
    padding: 22px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-dim);
    cursor: pointer;
}
.upload-form input[type="file"]:hover { border-color: var(--phase-1); }
.upload-note { margin: 18px 0 0; font-size: 0.92rem; }
.upload-note strong { color: var(--phase-1); }

.resplit-form { margin-bottom: 26px; }
.resplit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
}
.resplit-row label { display: flex; flex-direction: column; gap: 6px; }
.resplit-row span { font-size: 0.78rem; color: var(--text-dim); }
.resplit-row .btn { padding: 10px 18px; }

.import-card {
    margin: 0 0 18px;
    padding: 18px 20px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-raise);
}
.import-card.has-conflict { border-color: rgba(255,51,102,.45); }
.import-card legend { padding: 0 4px; }

.include-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.include-toggle input { width: auto; }
.include-toggle span { font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.04em; }

.conflict-note {
    margin: 14px 0 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: rgba(255,51,102,.09);
    font-size: 0.9rem;
    color: #ffc2d1;
}
.conflict-note code { background: rgba(0,0,0,.3); }

.import-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    font-size: 0.88rem;
    color: var(--text-dim);
}
.import-bulk span { margin-right: auto; }
.import-bulk button {
    padding: 6px 13px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}
.import-bulk button:hover { color: var(--text); border-color: var(--phase-1); }

.import-wordcount { margin: 14px 0 0; font-size: 0.85rem; color: var(--text-mute); }

.import-body { margin-top: 16px; }
.import-body summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--phase-1);
    padding: 6px 0;
}
.import-body textarea {
    margin-top: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .cx-columns { grid-template-columns: 1fr; }
}

/* =================================================================
   Search
   ================================================================= */

.search-form {
    display: flex;
    gap: 10px;
    margin: 26px 0 8px;
    max-width: 560px;
}
.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 12px 15px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.98rem;
}
.search-form input[type="search"]::placeholder { color: var(--text-mute); }
.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--phase-1);
    box-shadow: 0 0 0 3px rgba(53,232,224,.12);
}
.search-form .btn { white-space: nowrap; }

.book-tools { margin: 4px 0 0; font-size: 0.9rem; color: var(--text-mute); }
.book-tools a { color: var(--phase-1); }

.search-hint { max-width: 58ch; margin-top: 18px; }
.search-count { margin: 26px 0 18px; color: var(--text-dim); font-size: 0.96rem; }

.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { border-bottom: 1px solid rgba(35,38,46,.7); }
.search-results li:last-child { border-bottom: 0; }
.search-results a {
    display: block;
    padding: 18px 14px;
    border-radius: 9px;
    transition: background .14s ease;
}
.search-results a:hover { background: var(--bg-card); }

.sr-ref {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phase-1);
    margin-bottom: 5px;
}
.sr-title { display: block; font-size: 1.06rem; color: var(--text); margin-bottom: 6px; }
.sr-snippet { display: block; font-size: 0.93rem; color: var(--text-mute); line-height: 1.65; }
.sr-snippet mark {
    padding: 0 2px;
    background: rgba(53,232,224,.22);
    color: var(--text);
    border-radius: 3px;
}

@media (max-width: 560px) {
    .search-form { flex-direction: column; }
}

/* Parts a document will publish, shown while reviewing an import. */
.import-parts {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(53,232,224,.28);
    border-radius: 9px;
    background: rgba(53,232,224,.05);
}
.import-parts summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--phase-1);
}
.import-parts ol { margin: 10px 0 0; padding-left: 22px; }
.import-parts li { margin-bottom: 6px; font-size: 0.9rem; color: var(--text-dim); }
.import-parts code {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-mute);
    word-break: break-all;
}

/* Headings the import repaired, shown before anything is written. */
.import-fixes summary { cursor: pointer; color: var(--phase-1); }
.import-fixes ul { margin: 10px 0 0; padding-left: 20px; }
.import-fixes li { margin-bottom: 5px; font-size: 0.89rem; }
.import-fixes del { color: var(--text-mute); text-decoration: line-through; }
.import-fixes ins { color: var(--text); text-decoration: none; }

/* =================================================================
   Margin comments — editors only
   ================================================================= */

/* The reading column keeps its measure; the margin sits beside it. */
.book-main.with-comments .book-reader {
    position: relative;
    max-width: 1140px;
    padding-right: 340px;
}

.pc-comments {
    position: absolute;
    top: 0;
    right: 0;
    width: 312px;
}
.pc-comments-head {
    position: sticky;
    top: var(--pc-nav-h, 56px);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-card);
    font-size: 0.8rem;
    color: var(--text-mute);
}
.pc-comment-list { position: relative; }
.pc-comments-hint,
.pc-comments-empty {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--text-mute);
    font-style: italic;
}

.pc-comment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    font-size: 0.86rem;
    transition: transform .18s ease, border-color .15s ease;
}
.pc-comment.is-active { border-color: var(--phase-1); }
.pc-comment.is-resolved { opacity: .6; }
.pc-comment.is-detached { border-color: rgba(255,209,102,.5); }

.pc-composer { position: relative; margin-bottom: 12px; }

.pc-quote {
    margin: 0 0 8px;
    padding-left: 8px;
    border-left: 2px solid var(--phase-1);
    color: var(--text-mute);
    font-size: 0.78rem;
    font-style: italic;
    max-height: 3.4em;
    overflow: hidden;
}
.pc-detached { margin: 0 0 8px; font-size: 0.76rem; color: #ffd166; }

/* A comment card's author line. Named apart from the editor's .pc-head on
   purpose: they collided, and the generic rule turned the editor header into
   a flex row, so its bar and toolbar rendered as two columns. */
.pc-comment .pc-byline { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.pc-who { font-weight: 650; color: var(--text); font-size: 0.82rem; }
.pc-when { font-size: 0.72rem; color: var(--text-mute); }
.pc-comment .pc-body { color: var(--text-dim); line-height: 1.55; }

.pc-assignee { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-mute); }
.pc-assignee b { color: var(--phase-1); font-weight: 600; }

.pc-reply {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(35,38,46,.8);
}

.pc-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pc-actions button,
.pc-comment form button {
    padding: 3px 8px;
    font: inherit;
    font-size: 0.75rem;
    color: var(--text-mute);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
}
.pc-actions button:hover,
.pc-comment form button:hover { color: var(--text); border-color: var(--phase-1); }
.pc-actions .pc-danger:hover { color: #ff7a9c; border-color: rgba(255,51,102,.6); }

.pc-comment textarea,
.pc-comment input[type="text"] {
    width: 100%;
    margin: 8px 0 6px;
    padding: 7px 9px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    resize: vertical;
}
.pc-assign-field {
    display: block;
    font-size: 0.75rem;
    color: var(--text-mute);
}

/* The anchored words in the page. */
mark.pc-anchor {
    background: rgba(255, 209, 102, .22);
    color: inherit;
    border-bottom: 1px solid rgba(255, 209, 102, .55);
    border-radius: 2px;
    cursor: pointer;
    padding: 0 1px;
}
mark.pc-anchor:hover { background: rgba(255, 209, 102, .34); }

/* Appears over a selection. */
.pc-comment-bubble {
    position: absolute;
    z-index: 900;
    padding: 5px 12px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #07080a;
    background: var(--phase-1);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.pc-comment-bubble[hidden] { display: none; }

@media (max-width: 1100px) {
    /* No room for a margin; the thread sits under the text instead. */
    .book-main.with-comments .book-reader { padding-right: 0; max-width: 760px; }
    .pc-comments { position: static; width: 100%; margin-top: 40px; }
    .pc-comment { position: static; transform: none !important; margin-bottom: 10px; }
    .pc-comment-list { height: auto !important; }
}

/* Tasks */
.pill {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--phase-0);
    color: #07080a;
    font-size: 0.74rem;
    font-weight: 700;
}
.task-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.task-filters a {
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 0.84rem;
    color: var(--text-dim);
}
.task-filters a:hover { color: var(--text); border-color: var(--phase-1); }
.task-filters a.is-on { background: var(--phase-1); border-color: var(--phase-1); color: #07080a; font-weight: 600; }

.task-list { list-style: none; margin: 0; padding: 0; }
.task {
    padding: 16px 18px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg-card);
}
.task-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.task-page { font-size: 0.82rem; color: var(--phase-1); word-break: break-all; }
.task-who {
    padding: 1px 9px;
    border-radius: 10px;
    background: rgba(53,232,224,.14);
    color: var(--phase-1);
    font-size: 0.74rem;
}
.task-when { margin-left: auto; font-size: 0.76rem; color: var(--text-mute); }
.task-body { margin: 0; color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; }
.task-body strong { color: var(--text); margin-right: 6px; }
.task-replies { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-mute); }
.row-comments {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(255,209,102,.16);
    color: #ffd166;
    font-size: 0.74rem;
}

/* Opened near the right edge, the colour menu hangs from the button's right
   instead of running off the editor. */
.pc-colour-menu.is-flipped { left: auto; right: 0; }

/* ---- Citations -------------------------------------------------------
   An in-text citation stays part of the sentence: no underline, no colour
   shift until it is hovered. Reading is the point; following the reference
   is the exception. */
.prose a.cite {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
}
.prose a.cite:hover,
.prose a.cite:focus-visible {
    color: var(--phase-1);
    border-bottom-color: var(--phase-1);
}

/* The works cited on this page, derived from the page's own citations. */
.page-refs {
    margin: 56px 0 0;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}
.page-refs h2 {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.page-refs ol {
    margin: 0;
    padding-left: 22px;
    font-size: 0.93rem;
    line-height: 1.6;
}
.page-refs li { margin-bottom: 8px; color: var(--text-dim); }
.page-refs li:last-child { margin-bottom: 0; }
.page-refs a { color: var(--phase-1); text-decoration: none; }
.page-refs a:hover { text-decoration: underline; }
.page-refs .ref-missing em { color: var(--phase-0); font-style: normal; font-size: 0.86em; }
.page-refs-all { margin: 16px 0 0; font-size: 0.86rem; }

/* An entry on the sources page, when it is the link's destination. */
.prose .ref-entry { scroll-margin-top: 90px; }
.prose .ref-entry:target {
    background: rgba(0, 224, 200, 0.08);
    box-shadow: -14px 0 0 rgba(0, 224, 200, 0.08), 14px 0 0 rgba(0, 224, 200, 0.08);
    border-radius: 2px;
}

/* ---- Back matter: glossary and notation ------------------------------ */
.gl-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.gl-tab {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.86rem;
    color: var(--text-dim);
    text-decoration: none;
}
.gl-tab:hover { color: var(--text); border-color: var(--phase-1); }
.gl-tab.is-on { color: var(--bg); background: var(--phase-1); border-color: var(--phase-1); }

/* The letter and chapter picker. A glossary is looked up, not read, so
   getting to the right slice has to be one tap. */
.gl-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; }
.gl-jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 34px;
    justify-content: center;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    text-decoration: none;
}
.gl-jump a:hover { color: var(--text); border-color: var(--phase-1); }
.gl-jump a.is-on { color: var(--bg); background: var(--phase-1); border-color: var(--phase-1); }
.gl-jump .gl-n { font-size: 0.72em; opacity: 0.65; }

.gl-group { margin: 0 0 42px; }
.gl-letter {
    margin: 0 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--line);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--phase-1);
}
.gl-letter .gl-count { font-size: 0.6em; color: var(--text-dim); font-weight: 400; }

.gl-entry {
    margin: 0 0 30px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--line);
    scroll-margin-top: 90px;
}
.gl-entry:target { border-left-color: var(--phase-1); }
.gl-term { margin: 0 0 8px; font-size: 1.06rem; font-weight: 600; color: var(--text); }
/* The book's own glyphs are the reason this page exists, so they lead. */
.gl-sym {
    display: inline-block;
    min-width: 1.7em;
    margin-right: 8px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 1.05em;
    text-align: center;
    color: var(--phase-0);
}
.gl-def { margin: 0 0 10px; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }
/* Standing in for a lexicon entry that does not exist yet. */
.gl-def-book { border-left: 2px dotted var(--phase-0); padding-left: 10px; }
.gl-formal {
    margin: 0 0 10px;
    padding: 9px 13px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.95rem;
    text-align: left;
    overflow-x: auto;
}
.gl-formal strong { font-weight: 500; }
.gl-links { margin: 0; font-size: 0.82rem; color: var(--text-dim); }
.gl-links a { color: var(--phase-1); text-decoration: none; }
.gl-links a:hover { text-decoration: underline; }
.gl-baked {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}
.gl-nolex { color: var(--phase-0); }

/* Notation table */
.nt-table { width: 100%; border-collapse: collapse; margin: 0 0 46px; font-size: 0.93rem; }
.nt-table caption {
    margin-bottom: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: left;
}
.nt-table th, .nt-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.nt-table thead th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.nt-sym { font-size: 1.15rem; color: var(--phase-0); white-space: nowrap; }
.nt-dim { color: var(--text-dim); white-space: nowrap; }
.nt-count { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* The same glyph is read differently in different chapters; say so rather
   than presenting one reading as the definition. */
.nt-alt { display: block; margin-top: 3px; font-size: 0.8em; color: var(--phase-0); }

/* ---- Defined terms in the text -------------------------------------- */
/* The manuscript marks them with a literal "(G)", which meant nothing to a
   reader. The marker becomes the link, and the heading keeps its own words. */
a.pc-gmark {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.06em;
    vertical-align: middle;
    color: var(--phase-0);
    text-decoration: none;
    text-transform: uppercase;
}
a.pc-gmark:hover, a.pc-gmark:focus-visible { color: var(--bg); background: var(--phase-0); border-color: var(--phase-0); }
/* A term mentioned in prose rather than defined. */
a.pc-gterm { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--phase-0); }
a.pc-gterm:hover { color: var(--phase-0); }

/* "PulseCore Verified ✓" already links into the calculator; it just never
   looked like the stamp it is. */
.prose a[href*="/calculator/"] {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid rgba(0, 224, 200, 0.4);
    border-radius: 999px;
    font-size: 0.82em;
    text-decoration: none;
    white-space: nowrap;
}
.prose a[href*="/calculator/"]:hover { background: rgba(0, 224, 200, 0.12); }

@media (max-width: 640px) {
    .gl-entry { padding-left: 12px; }
    .nt-table { font-size: 0.86rem; }
    .nt-table th, .nt-table td { padding: 7px 8px; }
}

/* ---- Display equations ---------------------------------------------- */
/* The manuscript marks these as headings, because that is what a Docs export
   does with a centred formula. They are set as equations instead, and no
   longer appear in the page outline. */
.prose .pc-eq {
    margin: 26px 0;
    padding: 14px 18px;
    border-left: 2px solid var(--phase-0);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.025);
    font-size: 1.04rem;
    line-height: 1.7;
    text-align: center;
    overflow-x: auto;
    scroll-margin-top: 90px;
}
/* Emphasis inside a formula is Docs bolding, not meaning. */
.prose .pc-eq strong, .prose .pc-eq b { font-weight: 500; }
.prose .pc-eq em { font-style: normal; }

/* Docs tables, once they have a header row. */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 0.94rem; display: block; overflow-x: auto; }
.prose thead th {
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 2px solid var(--line);
}
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose td p:last-child, .prose th p:last-child { margin-bottom: 0; }
.prose td p, .prose th p { margin-bottom: 8px; }

@media (max-width: 640px) {
    .prose .pc-eq { padding: 11px 12px; font-size: 0.97rem; }
}

/* ---- Harvesting the lexicon from the manuscript --------------------- */
.harvest-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.harvest-row {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
/* A term the text never defines is not worth a row, and says so. */
.harvest-row.is-empty { opacity: 0.6; }
.harvest-row label { display: flex; align-items: baseline; gap: 9px; cursor: pointer; }
.harvest-term { font-weight: 600; }
.harvest-def { margin: 8px 0 0 27px; font-size: 0.92rem; color: var(--text-dim); }
.harvest-none { font-style: italic; }
.harvest-formal { margin: 6px 0 0 27px; font-size: 0.92rem; }
.harvest-src { margin: 6px 0 0 27px; font-size: 0.82rem; }
.harvest-src a { color: var(--phase-1); text-decoration: none; }
.sql-preview {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.86rem;
    overflow-x: auto;
    white-space: pre;
}
.gl-also { margin: 0 0 6px; font-size: 0.82rem; color: var(--text-dim); }
.gl-also a { color: var(--phase-0); text-decoration: none; font-variant-numeric: tabular-nums; }
.gl-also a:hover { text-decoration: underline; }

/* ---- The apparatus, on the editor screen ----------------------------- */
/* It has no rows in the table above because it has no files. */
.derived-views { margin: 34px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; }
.derived-views h2 { margin: 0 0 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.derived-note { margin: 0 0 16px; font-size: 0.88rem; color: var(--text-dim); max-width: 62ch; }
.derived-views ul { margin: 0; padding: 0; list-style: none; }
.derived-views li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); }
.derived-views li > a:first-child { color: var(--phase-1); text-decoration: none; font-weight: 600; }
.derived-views .muted { font-size: 0.86rem; color: var(--text-dim); }
.derived-fix { margin-left: auto; font-size: 0.84rem; color: var(--phase-0); text-decoration: none; }
.derived-fix:hover { text-decoration: underline; }

/* The apparatus, listed with the front matter on the contents page. It is
   reached the same way a section is, but its figure counts entries or terms
   rather than being a section number. */
.toc-apparatus .toc-n-section { font-variant-numeric: tabular-nums; }
.toc-apparatus .toc-kind {
    margin-left: 7px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    vertical-align: 1px;
}

/* Notation, joined to the calculator */
.nt-name { color: var(--text-dim); }
.nt-sym a { color: var(--phase-0); text-decoration: none; border-bottom: 1px dotted var(--phase-0); }
.nt-sym a:hover { color: var(--text); }
.nt-flag {
    margin-left: 5px; padding: 0 6px;
    border: 1px solid rgba(0, 224, 200, 0.4); border-radius: 999px;
    font-size: 0.72rem; color: var(--phase-1);
}
.nt-nocalc { font-style: italic; opacity: 0.7; }
/* Editors only: the two records disagree here. */
.nt-conflict { background: rgba(255, 170, 0, 0.05); }
.nt-warn { color: #e0a33a; }
.nt-checks {
    margin: 0 0 28px; padding: 16px 20px;
    border: 1px solid rgba(255, 170, 0, 0.35); border-radius: 10px;
    background: rgba(255, 170, 0, 0.04);
}
.nt-checks h2 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #e0a33a; }
.nt-checks ul { margin: 0; padding-left: 20px; font-size: 0.9rem; color: var(--text-dim); }
.nt-checks li { margin-bottom: 6px; }

/* A symbol in a "Where:" list opens in the calculator, where its dimensions
   are kept. Kept quiet: the list is read as prose, not as a set of links. */
.prose a.pc-sym { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--phase-0); }
.prose a.pc-sym:hover, .prose a.pc-sym:focus-visible { color: var(--phase-0); border-bottom-style: solid; }
.prose a.pc-sym strong, .prose a.pc-sym b { font-weight: 600; }

/* The calculator's dimensions, on a glossary entry that has a symbol. */
.gl-dim {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-dim);
}
a.gl-sym { text-decoration: none; }
a.gl-sym:hover { color: var(--text); border-color: var(--phase-0); }

/* The second line of the masthead tally: what the book adds up to, as
   opposed to how it is divided. Quieter than the chapter and section counts,
   and the figures that have a page of their own are ways in. */
.book-figures { margin-top: 6px; font-size: 0.92rem; color: var(--text-dim); }
.book-figures strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.book-figures a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }
.book-figures a:hover { color: var(--text); border-bottom-color: var(--phase-1); }
.book-figures a:hover strong { color: var(--phase-1); }