/* Option D "Chambers". Colours, fonts and sizes come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--small-size); line-height: 1.6; color: var(--ink); background: var(--bg); overflow-wrap: anywhere; }
a { color: inherit; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.page { max-width: var(--page-width); margin: 0 auto; padding: 0 1rem 4rem; }

/* Header: Back, italic serif program name (links to Home), nav on the right, hairline under. */
.site-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .25rem 1.5rem; padding-top: 1.25rem; border-bottom: 1px solid var(--ink); }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-bottom: .6rem; }
.brand a { text-decoration: none; color: inherit; border-bottom: 1px solid transparent; }
.brand a:hover, .brand a:focus-visible { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.home-button, .icon-tool { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); min-width: var(--tap); height: var(--tap); color: var(--ink); border: 1px solid var(--hair); border-radius: 3px; text-decoration: none; }
.home-button:hover, .home-button:focus-visible, .icon-tool:hover, .icon-tool:focus-visible { color: var(--oxblood); border-color: var(--oxblood); }
.history-buttons { display: inline-flex; gap: .4rem; }
.back-button, .forward-button { padding: 0; width: var(--tap); min-width: var(--tap); }
.back-button:disabled, .forward-button:disabled { opacity: .45; cursor: not-allowed; }
.brand { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.1; }
.profile-name { font-size: var(--small-size); font-style: normal; opacity: .7; }
.button.disabled, .button[aria-disabled=true] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.program-disabled { margin: 0; }
.program-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1.25rem; font-size: var(--small-size); }
.program-nav a, .program-nav button.link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.program-nav a:hover, .program-nav button.link:hover { color: var(--ink); }
.program-nav a.on { color: var(--ink); border-bottom-color: var(--oxblood); }
.program-nav .who { align-self: center; color: var(--muted); font-size: var(--small-size); }
form.inline { display: inline; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Breadcrumb row under the header (judgment-list pages only). */
.crumb-row { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; padding-top: .25rem; }
.breadcrumb { color: var(--muted); }
.breadcrumb a { display: inline-block; min-height: var(--tap); line-height: var(--tap); color: var(--muted); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb .sep { margin: 0 .35rem; }
.toc-subject { margin: 0 0 .5rem; font-weight: 600; }
.toc-subject a { padding: .25rem 0; }

/* Buttons: outlined secondary, filled oxblood primary (class "primary"). */
button, .button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--ink); background: var(--panel); color: var(--ink); border-radius: 2px; font: inherit; line-height: 1.2; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: #fff; }
button.small, .button.small { padding: 0 .9rem; }
button.primary, .button.primary, button[type=submit]:not(.link):not(.danger):not(.secondary) { background: var(--oxblood); border-color: var(--oxblood); color: var(--oxblood-ink); }
button.danger { background: var(--oxblood); border-color: var(--oxblood); color: var(--oxblood-ink); }
button.link { min-height: var(--tap); border: 0; background: none; }
.actions .button, .actions button { font-size: var(--small-size); }

main { padding-top: 1.5rem; }
.page-title, main h1 { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; line-height: 1.15; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 3px double var(--ink); }
main h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; }
.meta, .label { font-size: var(--small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stack p { margin: 0 0 1rem; }
.stack label { display: block; font-size: var(--small-size); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
input[type=text], input[type=password], input[type=search], input[type=email], select { width: 100%; max-width: 28rem; min-height: var(--tap); padding: .4rem .6rem; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--muted); border-radius: 2px; }
input[type=file] { max-width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }

/* Tables: sans, hairline rows, serif for the first column is not forced. */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { font-weight: 600; font-size: var(--small-size); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--ink); }
td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--hair); }
td a { display: inline-block; min-height: var(--tap); line-height: var(--tap); padding: 0 .25rem; }

/* Messages and alerts: oxblood is for alerts. */
.messages { list-style: none; padding: 0; }
.messages li { padding: .6rem .8rem; margin-bottom: .5rem; border: 1px solid var(--hair); border-left: 4px solid var(--muted); background: var(--panel); }
.messages li.error { border-left-color: var(--oxblood); color: var(--oxblood); }
.error, .errorlist { color: var(--oxblood); }
.errorlist { padding-left: 1rem; }
.helptext { display: block; font-size: var(--small-size); color: var(--muted); }
.banner-warning { padding: .6rem 1rem; margin-top: .5rem; background: var(--panel); border: 1px solid var(--oxblood); border-left-width: 4px; font-weight: 600; }
.banner-warning a { color: var(--oxblood); }
.warning-box { padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--oxblood); border-left-width: 4px; margin-bottom: 1rem; }

/* Lists used by Other Subjects and Subject contents. */
.plain-list, .toc, .toc ul { list-style: none; padding: 0; margin: 0; }
.toc ul { padding-left: 1.25rem; }
.row-link { display: block; min-height: var(--tap); padding: .6rem .25rem; text-decoration: none; border-bottom: 1px solid var(--hair); font-family: var(--font-serif); font-size: 1.2rem; }
.toc ul .row-link { font-family: var(--font-sans); font-size: var(--small-size); letter-spacing: .06em; }
.row-link:hover { background: var(--panel); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: .25rem; }

/* Home (Option A layout in Option D colours): a centred narrow column. */
.home-column { max-width: 46rem; margin: 0 auto; padding-top: 1rem; }
.home-column h1 { font-size: 2.5rem; border-bottom: 0; padding-bottom: 0; margin-bottom: .25rem; }
.home-meta { margin: .4rem 0 0; }
.subject-index { list-style: none; padding: 0; margin: 1.5rem 0 0; columns: 1; column-gap: 4rem; }
.subject-index li { break-inside: avoid; }
.subject-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: var(--tap); padding: .7rem .1rem; text-decoration: none; border-bottom: 1px solid var(--hair); font-family: var(--font-serif); font-size: 1.25rem; }
.subject-index a:hover { background: var(--panel); }
.subject-index .count { font-family: var(--font-sans); font-size: var(--small-size); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--muted); font-style: italic; }

/* Launcher (suite Home) */
.launcher { max-width: 46rem; margin: 0 auto; }
.program-link { display: block; margin-bottom: 1.5rem; padding: 1.5rem 1rem; border: 1px solid var(--hair); border-bottom: 2px solid var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; color: var(--ink); text-decoration: none; }
.program-link:hover { background: var(--panel); color: var(--oxblood); border-bottom-color: var(--oxblood); }
.program-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Users form: profile and role on one line */
.profile-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: nowrap; }
.profile-row p { flex: 1 1 0; min-width: 0; margin: 0 0 1rem; }
.profile-row select { width: 100%; }
@media (max-width: 480px) { .profile-row { flex-wrap: wrap; } .profile-row p { flex-basis: 100%; } }

/* Subjects page: Other Subjects below the main list */
.other-divider { border: 0; border-top: 1px solid var(--ink); margin: 2.5rem 0 1.5rem; }
.other-title { margin: 0; }

/* Reading screens. Phone first: one column, 16px+ text, 44px+ tap targets. */
.reading { min-width: 0; font-size: var(--text-size); }
.reading h1 { font-size: 2rem; }
.topic-heading { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; margin: 2rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--ink); }
.subtopic-heading { font-family: var(--font-sans); font-weight: 600; font-size: var(--small-size); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 .4rem; }
.section-header { margin: 1.25rem 0 .25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; }
.section-header strong { font-weight: 400; }
.item { display: flex; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.item .num { flex: 0 0 2.6em; margin: 0; color: var(--muted); font-family: var(--font-serif); }
.item-body { min-width: 0; flex: 1 1 auto; font-family: var(--font-serif); line-height: 1.5; }
.item-text p { display: inline; margin: 0; }
.item-text p + p { display: block; margin-top: .4rem; }
.citation { font-style: italic; color: var(--muted); }
.case-comment { font-size: .9em; color: var(--muted); }
/* Citations on separate lines: "(a) <comment> - <citation>", the wrapped lines hang under the text, not the label. */
.case-lines { margin-top: .35rem; }
.case-line { display: flex; gap: .5rem; margin: .15rem 0; }
.case-line .num { flex: 0 0 2.2em; color: var(--muted); }
.case-line-body { min-width: 0; }
.case-line-comment p { display: inline; margin: 0; }
.case-line-comment p + p { display: block; margin-top: .3rem; }
.case-comment p { display: inline; margin: 0; }
.under-section { margin-left: 1.5rem; }
.item.flagged > .item-body, .flag-text { color: var(--oxblood); }
.flag-text { display: inline-block; font-family: var(--font-sans); font-size: var(--small-size); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--oxblood); border-radius: 2px; padding: 0 .4rem; }
.review-marker { display: inline-block; font-family: var(--font-sans); font-size: var(--small-size); letter-spacing: .06em; text-transform: uppercase; padding: 0 .5rem; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 2px; color: var(--amber-ink); }
.note { margin: .5rem 0; padding: .5rem 0 0; border-top: 1px solid var(--hair); color: var(--muted); font-family: var(--font-sans); font-size: var(--small-size); }
.see-also { display: block; }
.see-also a { display: inline-block; min-height: var(--tap); line-height: var(--tap); color: var(--oxblood); }
.target-gone { color: var(--muted); }
/* "Linked from: path", one line for each Note that links to this heading, Section or Item (D35). */
.linked-from { margin: .25rem 0 0; font-family: var(--font-sans); font-size: var(--small-size); font-weight: 400; font-style: normal; color: var(--muted); }
.linked-line { display: block; }
.linked-line a { display: inline-block; min-height: var(--tap); line-height: var(--tap); color: var(--oxblood); }
.note-edit { margin: .25rem 0; }
.contents-panel { display: none; position: fixed; inset: 0 0 0 auto; width: min(22rem, 90vw); z-index: 30; overflow-y: auto; padding: 1rem; background: var(--panel); box-shadow: -2px 0 8px rgba(0,0,0,.3); }
.contents-panel.open { display: block; }
.contents-panel h2 { font-size: var(--small-size); font-family: var(--font-sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contents-panel a { display: block; min-height: var(--tap); padding: .55rem 0; line-height: 1.25; text-decoration: none; }
.contents-panel ul { list-style: none; padding-left: 2.75rem; margin: 0; }
.contents-panel > ul, .contents-panel .toc-list { padding-left: 0; }
.contents-panel li li { border-bottom: 1px solid var(--hair); }
.header-toggle { padding: 0; width: var(--tap); min-width: var(--tap); border-color: var(--hair); margin-right: .5rem; }
.header-toggle[hidden] { display: none; }
.site-header.header-open { position: fixed; z-index: 40; background: var(--bg); box-shadow: 0 4px 10px rgba(0,0,0,.25); max-height: calc(100vh - var(--header-top, 0px)); overflow-y: auto; padding-left: 1rem; padding-right: 1rem; }
.header-spacer { visibility: hidden; }
/* Jump targets stop below the sticky breadcrumb row (--sticky-offset is measured by site.js). */
.reading [id] { scroll-margin-top: calc(var(--sticky-offset, 0px) + .75rem); }
/* Phone only: the Contents button at the right end of the sticky row opens the side panel. Dots plus lines, unlike the three plain lines of the Show header button at the left. */
.contents-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); min-width: var(--tap); height: var(--tap); padding: 0; margin-left: auto; color: var(--ink); border: 1px solid var(--hair); border-radius: 3px; background: var(--bg); cursor: pointer; }
.contents-icon[aria-expanded="true"] { background: var(--panel); border-color: var(--ink); }
/* Topic and Sub-topic headings are links that look like headings; only a quiet underline on hover or focus shows they can be clicked. */
.heading-link { color: inherit; text-decoration: none; cursor: pointer; }
.heading-link:hover, .heading-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.toc-subject-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.toc-subject-row .toc-subject { margin: 0; flex: 1 1 auto; min-width: 0; }
.toc-controls { display: flex; flex: 0 0 auto; gap: .25rem; }
.icon-button { padding: 0; width: var(--tap); min-width: var(--tap); }
.toc-row { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--hair); }
.toc-row a, .toc-node ul a { display: flex; align-items: baseline; gap: .4rem; }
.toc-row a { flex: 1 1 auto; min-width: 0; font-family: var(--font-serif); font-size: 1.1rem; }
/* Hanging indent: the number sits in a fixed column and wrapped text lines up under the text, not the number. */
.contents-panel .num { flex: 0 0 2.4em; margin: 0; }
.toc-node ul a { font-size: var(--small-size); }
.toc-toggle, .toc-spacer { flex: 0 0 1.5rem; width: 1.5rem; min-height: var(--tap); padding: 0; }
.toc-toggle { border: 0; background: none; }
.toc-chevron { display: inline-block; width: .55rem; height: .55rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
.toc-toggle[aria-expanded=false] .toc-chevron { transform: rotate(-45deg); }
.toc-node ul[hidden] { display: none; }
.hint { color: var(--muted); font-style: italic; }
/* Subjects list (opened from the breadcrumb), Subjects list, resize handle (handle and Reset width only on wide screens). */
.panel-subject-list { list-style: none; padding: 0 !important; margin: 0; }
.panel-subject-list li { border-bottom: 1px solid var(--hair); }
.panel-subject-list a { display: block; font-family: var(--font-serif); font-size: 1.1rem; }
.panel-subject-list a.current { font-weight: 700; color: var(--oxblood); }
.panel-label { margin: 1rem 0 .25rem; font-size: var(--small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.panel-label--other { margin-top: 1.75rem; padding-top: 1rem; border-top: 2px solid var(--muted); }
.toc-resizer, .toc-reset { display: none; }
.toc-resizer { position: absolute; top: 0; bottom: 0; right: 0; width: 1rem; cursor: col-resize; touch-action: none; z-index: 2; }
.toc-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: .6rem; border-left: 1px solid var(--hair); }
.toc-resizer:hover::after, .toc-resizer:focus-visible::after { border-left: 3px solid var(--focus); left: .5rem; }
.toc-reset { margin-top: 1rem; }

/* Review list: Kind on one line, the table scrolls inside its box on phones. */
.col-kind { white-space: nowrap; min-width: 6.5rem; }
.review-table { max-width: 100%; overflow-x: auto; }
.review-table table { min-width: 40rem; }
.review-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.review-filter select { max-width: 22rem; }

/* Search (Milestone 4b): header box, page form, results. */
.icon-tool { background: var(--panel); cursor: pointer; padding: 0; align-self: center; }
.program-nav .home-button, .program-nav .icon-tool { align-self: center; margin-bottom: 0; border: 1px solid var(--hair); }
.program-nav .home-button { color: var(--ink); }
.search-pop { border-bottom: 1px solid var(--hair); background: var(--panel); padding: .6rem 0; }
.search-pop[hidden] { display: none; }
.search-pop-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.search-pop-form input[type=search] { flex: 1 1 16rem; max-width: none; min-height: var(--tap); }
.search-pop-form button { min-height: var(--tap); min-width: 6rem; }
.search-pop-full { display: inline-flex; align-items: center; min-height: var(--tap); }
.search-row { display: flex; gap: .5rem; margin: 1rem 0 .5rem; }
.search-row input[type=search] { flex: 1 1 auto; max-width: none; min-height: 48px; font-size: 1.1rem; }
.search-row button { min-height: 48px; min-width: 6rem; flex: 0 0 auto; }
.search-filters { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin: 0 0 1rem; }
.search-filters select { max-width: 20rem; }
.search-check { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); }
.search-help { max-width: 42rem; }
.search-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.search-results.cards { border-top: 0; display: grid; gap: .75rem; }
.search-result.card { background: var(--panel); border: 1px solid var(--hair); border-left: 3px solid var(--ink); padding: .8rem 1rem; }
.search-kind.badge { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border: 1px solid var(--hair); border-radius: 999px; background: var(--panel); }
.search-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.search-two { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.search-subjects { border: 1px solid var(--hair); background: var(--panel); }
.search-subjects a { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-height: var(--tap); padding: .3rem .8rem; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.search-subjects a:last-child { border-bottom: 0; }
.search-subjects a.sel { background: var(--bg); box-shadow: inset 3px 0 0 var(--oxblood); }
.search-subjects .count { font-size: .8rem; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 0 .55rem; }
.search-pane-title { margin: 0 0 .6rem; font-size: 1.2rem; }
.search-back { display: none; margin: 0 0 .5rem; }
@media (max-width: 599px) {
  .search-two { grid-template-columns: 1fr; }
  .search-two.has-pick .search-subjects { display: none; }
  .search-two:not(.has-pick) .search-pane { display: none; }
  .search-two.has-pick .search-back { display: block; }
}
.search-result { padding: .75rem 0; border-bottom: 1px solid var(--hair); }
.search-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-family: var(--font-sans); font-size: var(--small-size); color: var(--muted); }
.search-kind { letter-spacing: .06em; text-transform: uppercase; }
.search-link { display: inline-block; margin-top: .15rem; font-weight: 600; overflow-wrap: anywhere; }
.search-path { color: var(--muted); font-size: var(--small-size); overflow-wrap: anywhere; }
.search-snippet { margin: .25rem 0 0; overflow-wrap: anywhere; }
.search-field { font-family: var(--font-sans); font-size: var(--small-size); color: var(--muted); }
.search-snippet mark { background: var(--amber-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--amber-line); border-radius: 2px; padding: 0 .05em; }
.search-more { margin: 1rem 0; }

/* Jump flash: the target of a jump (#n-...) is briefly highlighted. */
.jump-flash { animation: jump-flash 2.5s ease-out; }
@keyframes jump-flash { 0% { background-color: var(--amber-line); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .jump-flash { animation: none; outline: 3px solid var(--amber-line); outline-offset: 2px; }
}

/* Subject contents page: Contents shown in the page on phones (no slide-over), side panel on wide screens. */
.contents-panel--page { display: block; position: static; width: auto; box-shadow: none; padding: 0; background: none; }
.reader-layout--page { display: flex; flex-direction: column; }
.reader-layout--page .reading { order: -1; }
.reader-layout--page .reading h1 { margin-bottom: 1rem; }

/* Resizable table columns (static/js/resizable-columns.js) */
table[data-resizable-columns].resized { table-layout: fixed; width: auto; }
table[data-resizable-columns] th { position: relative; overflow-wrap: anywhere; }
.col-resizer { position: absolute; top: 0; right: 0; width: 14px; height: 100%; cursor: col-resize; touch-action: none; }
.col-resizer::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 6px; border-right: 1px solid var(--muted); }
.col-resizer:hover::after, .col-resizer:focus-visible::after { border-right: 3px solid var(--focus); right: 5px; }
.table-tools { margin: 0 0 .5rem; }

@media (min-width: 600px) {
  .subject-index { columns: 2; }
}
@media (min-width: 900px) {
  .page { padding: 0 2.5rem 5rem; }
  .reader-layout { display: grid; grid-template-columns: var(--panel-width, 17.5rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .reading { max-width: 46rem; }
  .contents-panel { display: block; position: sticky; inset: auto; top: 4rem; width: auto; box-shadow: none; border: 0; background: none; padding: 0; z-index: 1; overflow: visible; align-self: start; }
  .contents-button { display: none; }
  .toc-resizer { display: block; }
  .toc-reset { display: inline-flex; }
  .reader-layout--page { display: grid; }
  .reader-layout--page .reading { order: 0; }
  .reader-layout--page.no-contents { grid-template-columns: minmax(0, 1fr); }
  .contents-panel--page { position: sticky; top: 4rem; }
  .panel-scroll { max-height: calc(100vh - 5rem); overflow-y: auto; padding-right: 1.25rem; }
}
@media (max-width: 599px) {
  .brand { font-size: 1.5rem; }
  .program-nav { gap: 0 .9rem; }
  main h1, .page-title { font-size: 1.75rem; }
  .home-column h1 { font-size: 2rem; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Edit mode (Milestone 3b). Phone first: one column, every control at least 44px high. */
.edit-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.edit-btn { min-height: var(--tap); min-width: var(--tap); padding: 0 .9rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 2px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; list-style: none; }
.edit-btn.danger { background: var(--oxblood); border-color: var(--oxblood); color: var(--oxblood-ink); }
.edit-actions { align-items: center; }
.edit-field { display: flex; flex-direction: column; gap: .25rem; }
.edit-field .field-label { font-weight: 600; }
.edit-form input:disabled, .edit-form textarea:disabled { background: var(--hair); color: var(--muted); cursor: not-allowed; }
.edit-form label:has(input:disabled) { color: var(--muted); }
.rt[hidden], .edit-field [hidden] { display: none; }
.edit-more[open] { border: 1px solid var(--hair); padding: .5rem; background: var(--bg); }
.edit-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.edit-form label { display: flex; flex-direction: column; gap: .25rem; }
.edit-form input[type=text], .edit-form select, .edit-form textarea { min-height: var(--tap); font: inherit; padding: .4rem .6rem; width: 100%; box-sizing: border-box; }
.dragging { opacity: .55; }
.drop-before { box-shadow: 0 -3px 0 0 var(--focus); }
.drop-after { box-shadow: 0 3px 0 0 var(--focus); }
.edit-confirm { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.renumber-list { padding-left: 1.25rem; }
.picker-list { list-style: none; margin: 0; padding: 0; }
.picker-list li { margin: .25rem 0; }
.picker-sub { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
.picker-sub[hidden] { display: none; }
.picker-row { display: flex; align-items: center; gap: .25rem; }
.picker-row > .picker-choice, .picker-row > .picker-no { flex: 1 1 auto; width: auto; }
.picker-toggle, .picker-spacer { flex: 0 0 var(--tap); width: var(--tap); min-height: var(--tap); padding: 0; }
.picker-toggle { border: 0; background: none; cursor: pointer; }
.picker-toggle[hidden] { display: none; }
.picker-toggle[aria-expanded=false] .toc-chevron { transform: rotate(-45deg); }
.picker-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.picker-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.picker-controls[hidden] { display: none; }
.picker-controls button { min-height: var(--tap); }
.picker-choice { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
.picker-no { display: block; min-height: var(--tap); padding: .6rem 1rem; color: var(--muted); }


/* Item editor (Milestone 3c). One column; every control at least 44px high. */
.item-editor { max-width: 46rem; }
.item-editor h1 { font-size: 1.9rem; }
.editor-form .field, .item-editor .field { margin: 1.25rem 0; padding: 0; border: 0; min-width: 0; }
.field-label { display: block; font-family: var(--font-sans); font-weight: 600; margin-bottom: .25rem; padding: 0; }
.hint { color: var(--muted); font-family: var(--font-sans); font-size: var(--small-size); margin: .15rem 0 .5rem; }
.item-editor input[type=text], .item-editor select { max-width: none; }
.item-editor textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem .6rem; border: 1px solid var(--muted); border-radius: 2px; background: var(--panel); color: var(--ink); }
.item-editor label { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; }
.item-editor label.switch, .item-editor label.choice { flex-direction: row; align-items: center; gap: .6rem; min-height: var(--tap); }
.item-editor label.choice { align-items: flex-start; flex-wrap: wrap; }
.item-editor input[type=checkbox], .item-editor input[type=radio] { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.rt-toolbar { display: flex; gap: .4rem; margin-bottom: .35rem; }
.rt-btn { min-width: var(--tap); min-height: var(--tap); padding: 0; font-size: 1.1rem; }
.rt-btn[aria-pressed=true] { background: var(--amber-bg); border-color: var(--amber-line); }
.rt-area { min-height: 6em; padding: .5rem .6rem; border: 1px solid var(--muted); border-radius: 2px; background: var(--panel); font-family: var(--font-serif); line-height: 1.5; }
.rt-area:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.rt-area p { margin: 0 0 .5rem; }
.rt-area p:last-child { margin-bottom: 0; }
.case-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.case-row { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--hair); background: var(--panel); }
.case-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.case-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.flag-row { display: flex; flex-direction: column; gap: .5rem; }
.editor-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.convert-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.record-info dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; font-family: var(--font-sans); font-size: var(--small-size); }
.record-info dt { color: var(--muted); }
.record-info dd { margin: 0; }
.original-line { margin-top: 1rem; padding: .6rem .75rem; border: 1px solid var(--hair); background: var(--panel); }
.original-line summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
.original-text { white-space: pre-wrap; font-family: var(--font-serif); margin: .25rem 0 0; }
.notice { margin: 1rem 0; padding: .6rem .9rem; border: 1px solid var(--hair); background: var(--panel); font-family: var(--font-sans); }
.notice.warning { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); }
.notice.refusal { border-color: var(--oxblood); }
.conv-compare { display: flex; flex-direction: column; gap: .75rem; }
.conv-side { flex: 1 1 0; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--hair); background: var(--panel); }
.conv-side h3 { margin: 0 0 .4rem; font-family: var(--font-sans); font-size: var(--small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.conv-text p { margin: 0 0 .4rem; }
.conv-list { margin: .25rem 0; padding-left: 1.25rem; }
.conv-arrow { align-self: center; font-size: 1.5rem; transform: rotate(90deg); }
@media (min-width: 700px) {
  .flag-row { flex-direction: row; }
  .conv-compare { flex-direction: row; align-items: stretch; }
  .conv-arrow { transform: none; }
}

/* Trash, History, Undo and the conflict screen (Milestone 3d). Every control at least 44px high. */
.undo-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; padding: .5rem; border: 1px solid var(--hair); background: var(--panel); font-family: var(--font-sans); }
.trash-list { list-style: none; margin: 0; padding: 0; }
.trash-entry { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--hair); background: var(--panel); }
.trash-entry p { margin: .2rem 0; }
.trash-path { color: var(--muted); font-family: var(--font-sans); font-size: var(--small-size); overflow-wrap: anywhere; }
.trash-entry .edit-actions form { margin: 0; }
.history-table, .conflict-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--small-size); }
.history-table th, .history-table td, .conflict-table th, .conflict-table td { text-align: left; vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.history-table tr.differs, .conflict-table tr.differs { background: var(--amber-bg); }
.conflict-choices { display: grid; gap: 1rem; margin-top: 1.25rem; }
.conflict-choice { padding: .75rem; border: 1px solid var(--hair); background: var(--panel); }
.conflict-choice h2 { margin-top: 0; font-size: 1.25rem; }
.conflict-choice button, .conflict-choice .button, .undo-bar button, .undo-bar .edit-btn { min-height: var(--tap); }
.saved-version { margin: 1rem 0; padding: .5rem .75rem; border: 1px solid var(--hair); background: var(--amber-bg); }
@media (min-width: 900px) {
  .conflict-choices { grid-template-columns: repeat(3, 1fr); }
}

/* My settings: number formats with a live preview. */
.settings-section { margin: 0 0 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hair); }
.settings-section h2 { margin: 0 0 .75rem; }
.settings-form fieldset { margin: 0 0 1rem; padding: .5rem 1rem 0; border: 1px solid var(--hair); }
.settings-form legend { padding: 0 .4rem; font-size: var(--small-size); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field-help { display: block; font-size: var(--small-size); color: var(--muted); margin-top: .25rem; }
.format-layout { display: grid; gap: 1.5rem; }
.format-preview-box { padding: .75rem 1rem 1rem; border: 1px solid var(--hair); background: var(--panel); align-self: start; }
.format-preview-box h3 { margin: 0 0 .5rem; font-size: var(--small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.format-preview { font-family: var(--font-serif); font-size: var(--text-size); }
.pv { padding: .1rem 0; }
.pv .num { display: inline-block; min-width: 2.6em; margin: 0; color: var(--muted); }
.pv-subject, .pv-topic { font-weight: 600; }
.pv-section { font-weight: 600; }
.pv-citation .pv-text { font-style: italic; }
.pv-i1 { padding-left: .75rem; }
.pv-i2 { padding-left: 1.5rem; }
.pv-i3 { padding-left: 2.25rem; }
.pv-i4 { padding-left: 3rem; }
@media (min-width: 900px) {
  .format-layout { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}

/* Note editor and link picker (Milestone 5). Rows are at least 44px high so they can be tapped on a phone. */
.link-rows { list-style: none; margin: 0 0 .75rem; padding: 0; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; padding: .5rem .75rem; border: 1px solid var(--hair); background: var(--panel); }
.link-path { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.link-path a { display: inline-block; min-height: var(--tap); line-height: var(--tap); }
.link-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.link-buttons .small, .link-buttons button, .link-buttons .button { min-height: var(--tap); min-width: var(--tap); }
.pick-crumbs { margin: .5rem 0; font-family: var(--font-sans); }
.pick-crumbs a { display: inline-block; min-height: var(--tap); line-height: var(--tap); }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--tap); padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.pick-row.pick-here { background: var(--panel); padding-left: .5rem; padding-right: .5rem; }
.pick-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pick-label small { display: block; color: var(--muted); font-family: var(--font-sans); }
.pick-label a { display: inline-block; min-height: var(--tap); line-height: var(--tap); }
.pick-form { flex: 0 0 auto; margin: 0; }
.link-list li { margin: 0 0 1rem; }
.menu-link { display: flex; align-items: center; min-height: 40px; padding: 0 1rem; color: var(--ink); text-decoration: none; font-family: var(--font-sans); }
.menu-link:hover { background: var(--panel); }
@media (max-width: 599px) {
  .note-editor .editor-actions { position: sticky; bottom: 0; margin: 1rem -1rem 0; padding: .6rem 1rem; border-top: 1px solid var(--ink); background: var(--bg); }
  .menu-link { min-height: 48px; }
}

/* Word export (Milestone 6) */
.export-link { min-height: var(--tap); font-size: var(--small-size); }
.export-page .settings-section { margin-bottom: 1.25rem; }

/* Help page, first-run hint and small-screen polish (Milestone 7). */
.help-page h2 { margin-top: 2rem; }
.help-page p, .help-page li { max-width: 42rem; }
.help-toc ul { padding-left: 0; list-style: none; }
.help-toc a, .help-link a, .first-run a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 599px) {
  .search-pop-form input[type=search] { flex-basis: 100%; }
  .search-pop-form button { flex: 1 1 auto; }
  .toc-toggle { width: var(--tap); flex-basis: var(--tap); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Export control (round 12): option E split button on desktop, option B icon-only on phones (CSS media query only). */
.export-split { position: relative; display: inline-flex; align-items: stretch; }
.export-link { display: inline-flex; align-items: center; gap: .4rem; }
.export-icon { display: none; flex: 0 0 auto; }
.export-split .export-main { border-radius: 2px 0 0 2px; }
.export-more { border-radius: 0 2px 2px 0; border-left: 0; padding: 0 .6rem; min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.export-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 14rem; background: var(--panel); border: 1px solid var(--ink); border-radius: 2px; box-shadow: 0 4px 14px rgba(0,0,0,.15); flex-direction: column; }
.export-menu:not([hidden]) { display: flex; }
.export-menu a { display: flex; align-items: center; min-height: var(--tap); padding: 0 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); font-size: var(--small-size); }
.export-menu a:last-child { border-bottom: 0; }
.export-menu a:hover, .export-menu a:focus { background: var(--bg); }
.export-menu small { color: var(--muted); margin-left: auto; padding-left: 1rem; }
@media (max-width: 599px) {
  .export-icon { display: inline; }
  .export-word { display: none; }
  .export-link { justify-content: center; padding: 0; width: var(--tap); min-width: var(--tap); min-height: var(--tap); }
  .export-more, .export-menu { display: none !important; }
  .export-split .export-main { border-radius: 2px; }
}