/* Thistle and Brier — baseline stylesheet. Design pass pending; control system settled. */
:root {
  --ink: #0d0e11;
  --paper: #e6e1d4;
  --muted: #9a9486;
  --rule: #2b2d33;
  --rule-soft: #1d1f24;
  --well: #14161a;
  --accent: #c8a45f;
  --moon: #d9dde6;
  --sun: #e9bf55;
  --sun-line: #4a3408;
  --sun-eye: #a97c22;
  --link: #b39ddb;
  --danger: #d3705f;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --measure: 68ch;
  --control-h: 34px;
}
:root[data-theme="light"] {
  --ink: #f2eee5;
  --paper: #16171a;
  --muted: #625c50;
  --rule: #c9c2b2;
  --rule-soft: #ddd7c8;
  --well: #e7e1d3;
  --accent: #7a5d1c;
  --moon: #4a5266;
  --sun: #e6b43a;
  --sun-line: #4a3408;
  --sun-eye: #a3761d;
  --link: #553a86;
  --danger: #9e3a2b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--ink); padding: 6px 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- links: text links are underlined, always ---------- */
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--paper); text-decoration-thickness: 2px; }
.textlink { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }

/* ---------- controls: one size, one face, three variants ----------
   .btn          outlined, paper text on ink       hover: filled well, paper border
   .btn-primary  filled paper, ink text             hover: filled accent, ink text
   .btn-danger   outlined, danger text              hover: filled danger, ink text
   All controls are exactly var(--control-h) tall, mono 13px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 14px; min-width: var(--control-h);
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; line-height: 1;
  color: var(--paper); background: transparent; border: 1px solid var(--rule);
  border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
.btn:hover { background: var(--well); border-color: var(--paper); color: var(--paper); }
.btn:active { background: var(--rule); }
.btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--ink); }
.btn-danger.btn-filled { background: var(--danger); color: var(--ink); }
.btn-danger.btn-filled:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-icon { padding: 0; width: var(--control-h); }
.btn b, .btn i { font-family: var(--serif); font-size: 15px; }
.inline { display: inline; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- read-only states: plain text, never bordered ---------- */
.state { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.state::before { content: "● "; }
.state-hidden { color: var(--danger); }
.status { color: var(--muted); min-height: 1.4em; margin: 6px 0 0; }
.hint { color: var(--muted); font-size: 16px; margin: 0 0 14px; }
.error { color: var(--danger); border-left: 2px solid var(--danger); padding: 4px 12px; margin: 0 0 14px; }

/* ---------- masthead ---------- */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.mark { display: flex; align-items: center; gap: 14px; color: var(--paper); text-decoration: none; }
.mark:hover { color: var(--accent); }

/* Carolingia (William Boyd, 1991, free of charge), self-hosted, with a fallback sized to the same width */
@font-face { font-family: "Carolingia"; src: url("/static/fonts/carolingia.woff2") format("woff2"), url("/static/fonts/carolingia.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carolingia Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 112%; ascent-override: 79.3%; descent-override: 38.2%; line-gap-override: 0%; }
.device { width: 40px; height: 40px; flex: none; }
.wordmark { font-family: "Carolingia", "Carolingia Fallback", Georgia, serif; font-size: 30px; line-height: 1; letter-spacing: .02em; white-space: nowrap; color: var(--paper); position: relative; top: .1em; }
.tagline { margin: 0; color: var(--muted); white-space: nowrap; letter-spacing: .06em; }
.tag-mark { width: 18px; height: 18px; vertical-align: -4px; color: var(--accent); margin: 0 2px; }
.endmark { text-align: center; margin: 44px 0 0; }
.endmark svg { width: 40px; height: 40px; color: var(--muted); }
.tools { display: flex; gap: 18px; align-items: center; margin-left: auto; }

/* ---------- admin bar: shown only when signed in ---------- */
.adminbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 24px; background: var(--well); border-bottom: 1px solid var(--rule); }
.adminbar-who { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.adminbar-actions { display: flex; gap: 8px; align-items: center; }

main { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: 40px 24px 80px; }
main.editor-page { max-width: 1200px; }
main.admin { max-width: 900px; }

/* ---------- front page ---------- */
.index { list-style: none; margin: 0; padding: 0; }
.entry { position: relative; display: grid; grid-template-columns: 72px 110px minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.entry .ex-player, .entry .player { min-width: 0; }
.entry .no, .entry .dt { color: var(--muted); font-variant-numeric: tabular-nums; }
.entry .ti { margin: 0; font-size: 22px; font-weight: normal; line-height: 1.25; }
.entry .ti a { color: var(--paper); text-decoration: none; }
.entry .ti a:hover { color: var(--accent); text-decoration: underline; }
.entry .ex { grid-column: 3; margin: 0; color: var(--muted); font-style: italic; font-size: 17px; }
.entry .edit { grid-column: 4; grid-row: 1; align-self: center; }

.empty { color: var(--muted); font-style: italic; }

/* ---------- article ---------- */
.editrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 14px; margin-bottom: 22px; border-bottom: 1px solid var(--rule-soft); }
.article-head { margin-bottom: 28px; }
.article-head .meta { color: var(--muted); margin: 0 0 10px; }
.article-head h1 { font-size: 34px; line-height: 1.15; font-weight: normal; margin: 0; text-wrap: balance; }
.body h2 { font-size: 24px; font-weight: normal; margin: 36px 0 10px; }
.body h3 { font-size: 20px; margin: 28px 0 8px; }
.body p { margin: 0 0 18px; }
.body img, .body video { max-width: 100%; height: auto; display: block; margin: 24px auto; }
.body blockquote { margin: 24px 0; padding: 0 0 0 18px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.body pre { background: var(--well); border: 1px solid var(--rule); padding: 14px 16px; overflow-x: auto; font-size: 14px; }
.body code { font-family: var(--mono); font-size: .85em; }
.body table { border-collapse: collapse; width: 100%; margin: 24px 0; font-size: 17px; }
.body th, .body td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-soft); }
.body th { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.body hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; }
.body .footnotes { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--muted); }
.body .footnotes ol { padding-left: 1.4em; }
.body sup a { text-decoration: none; }
.article-foot { margin-top: 48px; justify-content: space-between; }
.btn-icon-svg { width: 16px; height: 16px; }

.notice h1, .login h1, .admin-head h1 { font-weight: normal; font-size: 30px; margin: 0 0 12px; }

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--paper); background: var(--well); border: 1px solid var(--rule); padding: 0 10px; height: 40px; border-radius: 0; }
select { height: 40px; }
textarea { height: auto; padding: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* ---------- admin list ---------- */
.admin-list { list-style: none; margin: 24px 0 0; padding: 0; }
.admin-entry { display: grid; grid-template-columns: 24px 66px 96px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.admin-entry { position: relative; background: var(--ink); will-change: transform; }
.admin-entry .handle { color: var(--muted); cursor: grab; visibility: hidden; touch-action: none; user-select: none; padding: 8px 4px; margin: -8px -4px; }
.admin-entry .handle:hover, .admin-entry .handle:focus-visible { color: var(--paper); }
.admin-list.is-dragging { cursor: grabbing; user-select: none; }
.admin-list.is-dragging .handle { cursor: grabbing; }
.admin-list.js .handle { visibility: visible; }
.admin-list.js .nojs-order { display: none; }
.admin-entry.dragging { z-index: 5; background: var(--well); box-shadow: 0 10px 30px rgba(0,0,0,.45); border-bottom-color: transparent; outline: 1px solid var(--rule); }
.ti-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-entry .ti { color: var(--paper); text-decoration: none; font-size: 19px; }
.admin-entry .ti:hover { color: var(--accent); text-decoration: underline; }
.admin-entry .no, .admin-entry .dt { color: var(--muted); }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- editor ---------- */
.editor { display: flex; flex-direction: column; gap: 14px; }
.fields { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; }
.fields .wide { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.toolbar .status { margin: 0 0 0 8px; }
.status.is-error { color: var(--danger); }
.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 60vh; }
.panes textarea { min-height: 60vh; resize: vertical; font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.preview { border: 1px solid var(--rule); padding: 16px 20px; overflow-y: auto; max-height: 80vh; }

@media (max-width: 800px) {
  body { font-size: 18px; }
  .mast, .adminbar { padding-left: 16px; padding-right: 16px; }
  .entry { grid-template-columns: 70px 1fr auto; }
  .entry .ti, .entry .ex { grid-column: 1 / -1; }
  .entry .edit { grid-column: 3; }
  .fields { grid-template-columns: 1fr 1fr; }
  .panes { grid-template-columns: 1fr; }
  .admin-entry { grid-template-columns: 24px 1fr; }
  .admin-entry .no, .admin-entry .dt { display: none; }
  .admin-entry .actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { a, .btn { transition: color .12s, border-color .12s, background-color .12s; } }

/* ---------- masthead nav additions ---------- */
.search { display: flex; gap: 0; align-items: center; }
.search-link { display: none; }
.search input { height: var(--control-h); width: 150px; font-family: var(--mono); font-size: 13px; }
.search .btn { border-left: 0; }
.search .btn:hover { border-left: 1px solid var(--paper); margin-left: -1px; }
.search input:focus { border-color: var(--accent); }
.tag { margin-right: 10px; }
.byline { grid-column: 3; margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 10px; }
.byline .by { margin-right: 18px; }
.byline .kind { margin-right: 18px; }
.byline .by a { color: var(--muted); }
.entry .byline { font-size: 12px; }
.entry-podcast .ex-player { grid-column: 3; margin-top: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; color: var(--muted); }
.tags .tag { margin-right: 0; }
.listing-head { margin-bottom: 24px; }
.listing-head h1 { font-weight: normal; font-size: 34px; margin: 0 0 8px; }
.listing-head .hint { font-size: 17px; }
.hero-player { margin: 0 0 28px; }
.hero-player p { margin: 8px 0 0; }
.span2 { grid-column: span 2; } .span4 { grid-column: 1 / -1; }
.fields { grid-template-columns: repeat(4, 1fr); }
.audio-field { border: 1px solid var(--rule); padding: 12px 14px 14px; margin: 0; }
.audio-field legend { padding: 0 6px; color: var(--muted); }
.audio-field.is-required legend { color: var(--paper); }

/* ---------- player ---------- */
.player { --pfg: var(--paper); --pbg: var(--well); margin: 0 0 20px; background: var(--pbg); border: 1px solid var(--rule); }
.player-video video { display: block; width: 100%; max-height: 80vh; background: #000; cursor: pointer; margin: 0; }
.player-audio audio { display: none; }
.player video::-webkit-media-controls { display: none !important; }
.pui { padding: 10px 12px 12px; }
.pseek { position: relative; height: 24px; display: flex; align-items: center; }
.pbuf { position: absolute; left: 0; top: 11px; height: 2px; background: var(--muted); opacity: .5; width: 0; pointer-events: none; z-index: 0; }
.prange { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 24px; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.prange::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.prange::-moz-range-track { height: 2px; background: var(--rule); }
.prange::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pbg); margin-top: -8px; }
.prange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pbg); }

.prow { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--pfg); border: 1px solid transparent; cursor: pointer; border-radius: 0; }
.pbtn svg { width: 24px; height: 24px; }
.pbtn:hover { border-color: var(--paper); background: var(--ink); }
.pbtn-main { border-color: var(--paper); }
.pbtn-main svg { width: 28px; height: 28px; }
.pspeed, .pskip { width: auto; min-width: 44px; padding: 0 8px; font-size: 13px; font-family: var(--mono); letter-spacing: .02em; }
.ptime { margin: 0 auto 0 6px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.player.is-playing .pbtn-main { background: var(--paper); color: var(--ink); }
.body .player video { margin: 0; }

/* ---------- dock ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--well); border-top: 1px solid var(--rule); padding: 10px 12px 8px; }
.dock .prange { height: 20px; }
.drow { display: flex; align-items: center; gap: 6px; }
.dtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.dtitle { color: var(--paper); text-decoration: none; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; max-width: 100%; }
.dtitle:hover { color: var(--accent); text-decoration: underline; }
.dsub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-dock { padding-bottom: 96px; }

@media (max-width: 1280px) { .tagline { display: none; } }
@media (max-width: 800px) {
  /* two quiet rows: the mark, then the links with the theme toggle at the right */
  .mast { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; }
  .mark { flex: 1 1 100%; gap: 10px; }
  .device { width: 32px; height: 32px; }
  .wordmark { font-size: 24px; }
  .tagline { display: none; }
  .tools { flex: 1 1 100%; margin-left: 0; gap: 14px; justify-content: flex-start; }
  .tools [data-theme-toggle] { margin-left: auto; }
  .search { display: none; }
  .search-link { display: inline; }
  .fields { grid-template-columns: 1fr 1fr; }
  .span2, .span4 { grid-column: 1 / -1; }
  .ptime { font-size: 12px; }
  .pspeed { display: none; }
  .entry-podcast .ex-player, .entry .byline { grid-column: 1 / -1; }
}

/* ---------- editor drop target ---------- */
.editor.is-dropping .panes { outline: 2px dashed var(--accent); outline-offset: 6px; }
.editor.is-dropping textarea { background: var(--ink); }
.drop-hint { display: none; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.editor.is-dropping .drop-hint { display: inline; }

/* ---------- video fullscreen: picture fills the screen, controls overlay and fade ---------- */
.player-video.is-fullscreen { position: relative; width: 100%; height: 100%; margin: 0; border: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.player-video.is-fullscreen video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.player-video.is-fullscreen .pui { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 16px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); --pfg: #e6e1d4; transition: opacity .25s ease; }
.player-video.is-fullscreen .pbtn { color: #e6e1d4; }
.player-video.is-fullscreen .pbtn:hover { background: rgba(255,255,255,.12); border-color: #e6e1d4; }
.player-video.is-fullscreen .pbtn-main { border-color: #e6e1d4; }
.player-video.is-fullscreen.is-playing .pbtn-main { background: #e6e1d4; color: #000; }
.player-video.is-fullscreen .ptime { color: #cfc9bb; }
.player-video.is-fullscreen .pbuf { background: rgba(255,255,255,.35); }
.player-video.is-fullscreen .prange::-webkit-slider-runnable-track { background: rgba(255,255,255,.35); }
.player-video.is-fullscreen .prange::-moz-range-track { background: rgba(255,255,255,.35); }
.player-video.is-fullscreen .prange::-webkit-slider-thumb { background: #e6e1d4; border-color: #000; }
.player-video.is-fullscreen .prange::-moz-range-thumb { background: #e6e1d4; border-color: #000; }
.player-video.is-fullscreen.controls-hidden { cursor: none; }
.player-video.is-fullscreen.controls-hidden .pui { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .player-video.is-fullscreen .pui { transition: none; } }

/* ---------- player shell (server-rendered, replaced in place by the script) ---------- */
.pui-shell .pseek { align-items: center; }
.prange-shell { display: block; width: 100%; height: 2px; background: var(--rule); }
.pui-shell .prow { gap: 6px; }
.pbtn-shell { display: inline-block; width: 44px; height: 44px; border: 1px solid transparent; }
.pbtn-main-shell { border-color: var(--rule); }

/* ---------- editor: preview matches the article column exactly ---------- */
main.editor-page { max-width: none; padding-left: 24px; padding-right: 24px; }
.editor-page .editor { max-width: 1600px; margin: 0 auto; }
.panes { grid-template-columns: minmax(0, 1fr) var(--measure); }
.preview { width: var(--measure); padding: 24px; font-size: 19px; }
@media (max-width: 1200px) { .panes { grid-template-columns: 1fr; } .preview { width: auto; } }

/* ---------- thumbnails in lists ---------- */
.entry.has-thumb { grid-template-columns: 72px 110px minmax(0, 1fr) auto 96px; }
.entry .thumb { grid-column: 5; grid-row: 1 / span 4; align-self: start; display: block; width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--rule); }
.entry .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry.has-thumb .edit { grid-column: 4; }
@media (max-width: 800px) {
  .entry.has-thumb { grid-template-columns: 70px 1fr auto 72px; }
  .entry .thumb { grid-column: 4; width: 72px; height: 72px; }
  .entry.has-thumb .ti, .entry.has-thumb .ex, .entry.has-thumb .byline { grid-column: 1 / 4; }
}
.thumb-preview { display: inline-block; width: 80px; height: 80px; border: 1px solid var(--rule); background: var(--ink); flex: none; }
.thumb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-preview:empty { display: none; }
.state-saved { color: var(--accent); }
.state-draft { color: var(--accent); }
.states { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* ---------- draft banner ---------- */
.editor-actions { gap: 8px; }
.editor-actions .status { margin: 0 0 0 8px; }
.draft-actions { gap: 8px; margin-left: 16px; }

/* ---------- stable media boxes ---------- */
.body img { height: auto; }
.player-video { aspect-ratio: var(--ar, auto); }
.player-video video { width: 100%; height: auto; }
.player-video[style*="--ar"] { display: grid; grid-template-rows: 1fr auto; }
.player-video[style*="--ar"] video { height: 100%; object-fit: contain; min-height: 0; }

/* ---------- volume ---------- */
.pvol { display: inline-flex; align-items: center; gap: 4px; }
.pvol .prange { width: 86px; height: 24px; }
@media (pointer: coarse), (max-width: 480px) { .pvol .prange { display: none; } }

/* ---------- timestamp links ---------- */
.body a.ts { font-family: var(--mono); font-size: .85em; text-decoration: none; border-bottom: 1px dotted var(--link); }
.body a.ts:hover { color: var(--accent); border-bottom-style: solid; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 60; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; padding: 10px 16px; border: 1px solid var(--paper); box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.has-dock .toast { bottom: 110px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: translate(-50%, 0); } }

/* ---------- no focus rings on player controls ---------- */
.player .pbtn:focus, .player .pbtn:focus-visible, .player .prange:focus, .player .prange:focus-visible,
.dock .pbtn:focus, .dock .pbtn:focus-visible, .dock .prange:focus, .dock .prange:focus-visible,
.player:focus, .player:focus-visible, .player video:focus, .player video:focus-visible { outline: none; box-shadow: none; }

/* ---------- wide screens: the Edit button hangs in the margin, clear of every entry column ---------- */
@media (min-width: 1000px) {
  .entry { grid-template-columns: 72px 110px minmax(0, 1fr); }
  .entry.has-thumb { grid-template-columns: 72px 110px minmax(0, 1fr) 96px; }
  .entry.has-thumb .thumb { grid-column: 4; }
  .entry .edit, .entry.has-thumb .edit { position: absolute; left: 100%; top: 18px; margin-left: 28px; grid-column: auto; grid-row: auto; }
}

/* ---------- account page ---------- */
.account-block { margin-top: 36px; }
.account-block h2 { font-weight: normal; font-size: 24px; margin: 0 0 14px; }
.account-block h3 { font-weight: normal; font-size: 19px; margin: 28px 0 10px; }
.user-list { list-style: none; margin: 0 0 8px; padding: 0; }
.user-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.user-name { min-width: 160px; }
.user-row .mono { flex: 1; }

/* ---------- search page form ---------- */
.page-search { display: flex; gap: 8px; margin: 0 0 16px; }
.page-search input { flex: 1; min-width: 0; height: var(--control-h); font-family: var(--mono); font-size: 14px; }

/* ---------- theme switch: an orb travels a rail; a rayed sun by day, a thick crescent by night ---------- */
.theme-switch { display: inline-flex; align-items: center; height: var(--control-h); padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--paper); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ts-track { position: relative; display: block; width: 50px; height: var(--control-h); }
.ts-track::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 18px; margin-top: -9px; border-radius: 9px; background: var(--well); border: 1px solid var(--rule); box-sizing: border-box; transition: border-color .3s; }
.theme-switch:hover .ts-track::before { border-color: var(--muted); }
.ts-orb { position: absolute; top: 2px; left: 0; width: 30px; height: 30px; overflow: visible; transition: transform .36s cubic-bezier(.4,.1,.2,1); }
.ts-sun, .ts-moon { transform-origin: 16px 16px; transition: transform .36s cubic-bezier(.4,.1,.2,1), opacity .22s; }
.sun-body { fill: var(--sun); stroke: var(--sun-line); stroke-width: 3; stroke-linejoin: round; }
.sun-face { fill: var(--sun-line); }
.sun-eye { fill: var(--sun-eye); }
.moon-body { fill: var(--moon); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
/* dark (default): the crescent at the right end of the rail */
.ts-orb { transform: translateX(23px); }
.ts-sun { transform: scale(.3) rotate(-60deg); opacity: 0; }
.ts-moon { transform: scale(1) rotate(0deg); opacity: 1; }
/* light: the sun at the left end */
:root[data-theme="light"] .ts-orb { transform: translateX(0); }
:root[data-theme="light"] .ts-sun { transform: scale(1) rotate(0deg); opacity: 1; }
:root[data-theme="light"] .ts-moon { transform: scale(.3) rotate(60deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ts-orb, .ts-sun, .ts-moon { transition: none; } }

/* ---------- handbook ---------- */
.handbook dl { margin: 0 0 18px; }
.handbook dt { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 18px 0 4px; }
.handbook dd { margin: 0; }
.handbook .body h2 { margin-top: 44px; }
.handbook pre { white-space: pre; }