/* resources.css — shared stylesheet for the Resources / Puzzle Maker's
   Dictionary pages (js html - working/resources/**). Every other journal
   page duplicates its own inline <style> block (see docs/website-style-
   notes.md); this family of pages breaks that pattern deliberately, since
   they're machine-generated by generate-dictionary.js — one shared file
   keeps ~15 generated pages from drifting out of sync with each other.
   Tokens below are copied from manifesto-part-1.html's own :root block to
   stay visually identical to the rest of the journal. */

:root{
  --ink:#111;
  --muted:#555;
  --rule:#1a1a1a;
  --light-rule:#b7b7b7;
  --paper:#fff;
  --measure:640px;
  --measure-wide:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Times New Roman", Times, serif;
  line-height:1.4;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

.journal{
  width:min(calc(100% - 34px), var(--measure));
  margin:0 auto;
  padding:28px 0 80px;
}

.journal.wide{ width:min(calc(100% - 34px), var(--measure-wide)); }

.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--light-rule);
}

.site-nav-link{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}

a.site-nav-link:hover, a.site-nav-link:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.site-nav-link.is-current{ color:var(--ink); font-weight:700; }

.breadcrumbs{
  margin:0 0 20px;
  font-size:.82rem;
  color:var(--muted);
}

.breadcrumbs a:hover, .breadcrumbs a:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.breadcrumbs [aria-current="page"]{ color:var(--ink); }
.crumb-sep{ color:var(--light-rule); }

.masthead{
  border-bottom:3px double var(--rule);
  padding-bottom:18px;
  margin-bottom:28px;
}

.paper-number{
  display:block;
  margin-bottom:5px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}

.publication{
  margin:0;
  font-size:clamp(2rem, 7vw, 3.2rem);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.02em;
}

.story p{ margin:0 0 20px; font-size:1.06rem; }

.editorial-tba{
  margin:0 0 24px;
  padding:10px 14px;
  font-size:.92rem;
  font-style:italic;
  color:var(--muted);
  border:1px dashed var(--light-rule);
}

.owl-explainer{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 28px;
  font-size:.88rem;
  font-style:italic;
  color:var(--muted);
}

.owl-explainer .owl-glyph{ width:16px; height:19px; flex:none; }

.dict-section{
  margin:0 0 36px;
  padding-top:22px;
  border-top:1px solid var(--light-rule);
}

.dict-section h2{
  margin:0 0 14px;
  font-size:clamp(1.2rem, 4vw, 1.5rem);
  font-weight:400;
}

.entry-list{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:24px;
}

.entry-list li{
  break-inside:avoid;
  margin-bottom:8px;
  font-size:.98rem;
}

.entry-list a:hover, .entry-list a:focus-visible{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.entry-count{ color:var(--muted); font-size:.85rem; }

.dict-search{
  display:block;
  width:100%;
  max-width:360px;
  margin:0 0 16px;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--light-rule);
  padding:8px 10px;
}

.dict-search:focus{ outline:none; border-color:var(--rule); }

.local-toc{
  margin:0 0 32px;
  padding:16px 18px;
  border:1px solid var(--light-rule);
}

.local-toc h2{
  margin:0 0 10px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  font-weight:400;
}

.local-toc ul{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:20px;
}

.local-toc li{ break-inside:avoid; margin-bottom:6px; font-size:.92rem; }

.dict-entries{ margin-bottom:20px; }

.dict-entry{
  padding:26px 0;
  border-top:1px solid var(--light-rule);
  scroll-margin-top:20px;
}

.dict-entry:first-child{ border-top:none; }

/* Passage-focus mode — on request, 2026-08-03: pressing an owl marker no
   longer just highlights the passage in place; it clears everything else
   off the page so the ONE paragraph (or Author's Points block) the
   comments are about is unambiguous, with nothing before or after it to
   scroll to. dictionary-panel.js toggles `.passage-isolated` on <body>
   and `.is-focused-entry`/`.is-focused-passage` on the specific elements
   — CSS (not JS) owns what that actually hides, so open/close only ever
   has to toggle a few class names. */
body.passage-isolated .site-nav,
body.passage-isolated .breadcrumbs,
body.passage-isolated .masthead,
body.passage-isolated .editorial-tba,
body.passage-isolated .owl-explainer,
body.passage-isolated .local-toc,
body.passage-isolated .chapter-nav,
body.passage-isolated .methodology-link,
body.passage-isolated .footer{
  display:none;
}

body.passage-isolated .dict-entry{ display:none; }
body.passage-isolated .dict-entry.is-focused-entry{ display:block; border-top:none; padding-top:0; }
body.passage-isolated .dict-entry.is-focused-entry .entry-title{ display:none; }
body.passage-isolated .dict-entry.is-focused-entry .entry-source{ display:none; }
body.passage-isolated .dict-entry.is-focused-entry .entry-technical-terms,
body.passage-isolated .dict-entry.is-focused-entry .nearby-ideas,
body.passage-isolated .dict-entry.is-focused-entry .see-it-in .block-label,
body.passage-isolated .dict-entry.is-focused-entry .what-you-can-do .block-label,
body.passage-isolated .dict-entry.is-focused-entry .ask-a-player .block-label{
  display:none;
}
body.passage-isolated .dict-entry.is-focused-entry .passage{ display:none; }
body.passage-isolated .dict-entry.is-focused-entry .passage.is-focused-passage{
  display:block !important;
}

body.passage-isolated .journal{ padding-bottom:50vh; } /* keeps the isolated passage from sitting behind the fixed bottom panel */

.entry-title{
  margin:0 0 12px;
  font-size:clamp(1.15rem, 3.5vw, 1.4rem);
  font-weight:700;
}

.entry-definition p, .entry-example p{
  margin:0 0 14px;
  font-size:1.02rem;
}

.entry-example{ margin-top:4px; }
.entry-example p em{ font-style:italic; }

.entry-source{
  margin:14px 0;
  padding:10px 14px;
  font-size:.88rem;
  color:var(--muted);
  border-left:2px solid var(--light-rule);
}

.entry-technical-terms{
  margin:0 0 14px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

.category-introduction{ margin:0 0 28px; }
.category-introduction p{ margin:0 0 16px; font-size:1.04rem; }

.see-it-in, .what-you-can-do, .ask-a-player, .nearby-ideas{ margin:16px 0; }

.see-it-in .block-label,
.what-you-can-do .block-label,
.ask-a-player .block-label,
.nearby-ideas .block-label{
  margin:0 0 8px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

.see-it-in p, .what-you-can-do p,
.entry-definition p{ margin:0 0 14px; font-size:1.02rem; }

.entry-definition ul, .entry-definition ol,
.see-it-in ul, .see-it-in ol,
.what-you-can-do ul, .what-you-can-do ol{
  margin:0 0 14px;
  padding-left:22px;
}
.entry-definition li, .see-it-in li, .what-you-can-do li{
  margin-bottom:6px;
  font-size:1.02rem;
}
.passage-list{ position:relative; }

.ask-a-player{
  padding:10px 14px;
  border-left:2px solid var(--light-rule);
}
.ask-a-player p{ margin:0; font-size:1.02rem; font-style:italic; }

.nearby-ideas ul{ margin:0; padding-left:20px; }
.nearby-ideas li{ margin-bottom:6px; font-size:.96rem; }

.dict-entry-teaser p{ font-size:1.02rem; margin:0 0 10px; }

.learning-path{
  margin:0 0 22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--light-rule);
}
.learning-path:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.learning-path-title{ margin:0 0 6px; font-weight:700; font-size:1.02rem; }
.learning-path p{ margin:0 0 8px; font-size:.96rem; }
.learning-path-chain{ font-size:.92rem; }
.learning-path-chain .path-arrow{ color:var(--muted); margin:0 2px; }

.authors-points .block-label{
  margin:0 0 8px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

.authors-points ul{ margin:0 0 10px; padding-left:20px; }
.authors-points li{ margin-bottom:6px; font-size:.96rem; }

.owl-marker{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:44px;
  min-height:44px;
  padding:0 8px;
  margin-left:2px;
  vertical-align:middle;
  color:var(--muted);
  background:transparent;
  border:none;
  cursor:pointer;
}

.owl-marker .owl-glyph{ width:14px; height:17px; }

.owl-marker:hover, .owl-marker:focus-visible, .owl-marker.is-active{
  color:var(--ink);
}

.owl-marker:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.owl-count{ font-size:.82rem; font-weight:700; }

.chapter-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 14px;
  margin-top:8px;
  padding-top:22px;
  border-top:1px solid var(--light-rule);
  font-size:.85rem;
}

.chapter-nav-link{ color:var(--muted); }

a.chapter-nav-link:hover, a.chapter-nav-link:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.methodology-link{
  margin:20px 0 0;
  font-size:.85rem;
  color:var(--muted);
}

.methodology-link a:hover, .methodology-link a:focus-visible{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.footer{
  margin-top:54px;
  padding-top:12px;
  border-top:3px double var(--rule);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.78rem;
}

@media (max-width:600px){
  .journal, .journal.wide{
    width:min(calc(100% - 28px), var(--measure));
    padding-top:18px;
  }
  .entry-list, .local-toc ul{ columns:1; }
  .footer{ display:block; }
  .footer span{ display:block; margin-bottom:5px; }
}

/* -----------------------------
   Passage discussion panel
   ----------------------------- */
.discussion-panel{
  position:fixed;
  left:0; right:0; bottom:0;
  height:50vh;
  background:var(--paper);
  border-top:3px double var(--rule);
  box-shadow:0 -6px 24px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
}

.discussion-panel[hidden]{ display:none; }

@media (max-width:600px){
  .discussion-panel{ height:min(65dvh, 520px); }
  body.passage-isolated .journal{ padding-bottom:min(65dvh, 520px); }
}

.discussion-panel-header{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--light-rule);
}

.discussion-panel-heading{ min-width:0; }

.discussion-panel-title{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:700;
}

.discussion-panel-excerpt{
  margin:0;
  font-size:.85rem;
  font-style:italic;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.discussion-panel-actions{
  flex:none;
  display:flex;
  gap:10px;
  align-items:center;
}

.discussion-panel-copy, .discussion-panel-close{
  font-family:inherit;
  font-size:.85rem;
  color:var(--ink);
  background:none;
  border:1px solid var(--rule);
  padding:5px 12px;
  cursor:pointer;
  min-height:36px;
}

.discussion-panel-copy:hover, .discussion-panel-copy:focus-visible,
.discussion-panel-close:hover, .discussion-panel-close:focus-visible{
  background:var(--ink);
  color:var(--paper);
}

.discussion-panel-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 20px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.discussion-panel-status{
  margin:0 0 14px;
  font-size:.95rem;
  font-style:italic;
  color:var(--muted);
}

@media (prefers-reduced-motion: no-preference){
  .discussion-panel{ transition:transform .18s ease-out; }
}

/* Comments inside the discussion panel — same shape/copy as the
   .comments-section every journal page duplicates in its own inline
   <style> (see comments.js's own header comment on why that's
   duplicated rather than shared elsewhere); centralized here instead
   since this whole file already breaks that per-page convention on
   purpose for the machine-generated dictionary pages. */
.comment{
  padding:14px 0;
  border-top:1px solid var(--light-rule);
}

.comment:first-child{ border-top:none; }

.comment-meta{
  margin:0 0 4px;
  font-size:.78rem;
  color:var(--muted);
}

.comment-author{ font-weight:700; color:var(--ink); }

.comment-admin-badge{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--muted);
  border:1px solid var(--light-rule);
  border-radius:999px;
  padding:1px 6px;
}

.comment-delete, .comment-edit{
  margin-left:8px;
  font-family:inherit;
  font-size:.78rem;
  color:var(--muted);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

.comment-delete:hover, .comment-delete:focus-visible,
.comment-edit:hover, .comment-edit:focus-visible{
  color:var(--ink);
}

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

.comment-edit-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.comment-edit-textarea{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--light-rule);
  padding:10px;
  min-height:88px;
  resize:vertical;
  width:100%;
}

.comment-edit-textarea:focus{ outline:none; border-color:var(--rule); }

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

.comment-edit-save, .comment-edit-cancel{
  font-family:inherit;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  background:none;
  border:1px solid var(--rule);
  padding:4px 12px;
  cursor:pointer;
}

.comment-edit-save:hover, .comment-edit-save:focus-visible,
.comment-edit-cancel:hover, .comment-edit-cancel:focus-visible{
  background:var(--ink);
  color:var(--paper);
}

.comment-edit-status{
  margin:0;
  font-size:.85rem;
  font-style:italic;
  color:var(--muted);
}

.comment-body{
  margin:0;
  font-size:1rem;
  white-space:pre-wrap;
}

.comments-empty{
  margin:0 0 18px;
  font-size:.95rem;
  font-style:italic;
  color:var(--muted);
}

.spinner{
  display:inline-block;
  width:13px;
  height:13px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid var(--light-rule);
  border-top-color:var(--muted);
  border-radius:50%;
  animation:spinner-spin .7s linear infinite;
}

@keyframes spinner-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration:2.4s; }
}

.comments-loading{
  margin:0 0 18px;
  font-size:.95rem;
  font-style:italic;
  color:var(--muted);
}

.comment-form:not([hidden]){
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}

.comment-name-field input[type="text"]{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--light-rule);
  padding:8px 10px;
  width:100%;
}

.comment-name-field input[type="text"]:focus{ outline:none; border-color:var(--rule); }

.comment-form textarea{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--light-rule);
  padding:10px;
  min-height:88px;
  resize:vertical;
}

.comment-form textarea:focus{ outline:none; border-color:var(--rule); }

.comment-form button{
  align-self:flex-start;
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
  background:none;
  border:1px solid var(--rule);
  padding:6px 14px;
  cursor:pointer;
}

.comment-form button:hover, .comment-form button:focus-visible{
  background:var(--ink);
  color:var(--paper);
}

.comment-status{
  margin:0;
  font-size:.88rem;
  font-style:italic;
  color:var(--muted);
}

.comment-signin:not([hidden]){ margin-top:22px; }

.comment-signin .join-blurb{
  margin:0 0 10px;
  font-size:.92rem;
  font-style:italic;
  color:var(--muted);
}

.comment-signin .join-form:not([hidden]){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.comment-signin .join-form input[type="email"]{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:4px 2px;
  flex:1 1 200px;
  min-width:0;
}

.comment-signin .join-form input[type="email"]:focus{
  outline:none;
  border-bottom-width:2px;
}

.comment-signin .join-form button{
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
  background:none;
  border:1px solid var(--rule);
  padding:6px 14px;
  cursor:pointer;
}

.comment-signin .join-form button:hover, .comment-signin .join-form button:focus-visible{
  background:var(--ink);
  color:var(--paper);
}

.comment-signin .join-status{
  margin:10px 0 0;
  font-size:.88rem;
  font-style:italic;
  color:var(--muted);
  flex-basis:100%;
}