/* Self-hosted Roboto Serif, pinned to wdth 85 / wght 700 (optical-size axis kept).
   The only web font. Downloaded 2026-08-03; no third-party font requests remain. */
@font-face{font-family:'Roboto Serif';src:url('lib/fonts/roboto-serif-700-w85.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --bg:#f8fafc;
  --paper:#ffffff;
  --ink:#182033;
  --muted:#5b6478;
  --line:#d8def3;
  --brand:#2851a3;
  --focus-ring:#2851a3;
  --brand-dark:#183a78;
  --brand-2:#7457c5;
  --blue-soft:#eef4ff;
  --lav:#f6f2ff;
  --lav-2:#eae3f7;
  --lav-band:#f9f6ff;
  --mark-bg:#fff6bf;
  --mark-line:#e6c545;
  --mark-text:#5f5220;
  --flum-open-space:#c2f5b6;
  --flum-agriculture:#9dc671;
  --flum-residential-low:#fdff95;
  --flum-residential-high:#ecca4f;
  --flum-institutional:#abccec;
  --flum-commercial:#fe6564;
  --flum-mixed-use:#f2a3c0;
  --flum-downtown:#e356a8;
  --flum-industrial:#b983e3;
  --green-soft:#ecf8f0;
  --green:#2d7a4b;
  --green-bright:#35a853;
  --faint:#7a8699;--measure:45rem;--measure-box:45rem;
  --line-green:#bfe5ca;
  --green-active:#9dcca9;
  --warn:#b85c5c;
  --line-lav:#d6c9f3;
  --border-blue:#bcc8ee;
  --purple:#5637a0;
  --shadow:0 14px 34px rgba(40,81,163,.12);
  --soft-shadow:0 7px 18px rgba(40,81,163,.055);
  --shadow-tint:rgba(30,45,75,.06);
  --press-tint:rgba(116,87,197,.2);
  --lightbox-scrim:rgba(8,13,24,.72);
  --lightbox-action-bar:rgba(12,18,31,.88);
  --lightbox-line:rgba(255,255,255,.18);
  --lightbox-control-border:rgba(255,255,255,.82);
  --lightbox-control-border-hover:rgba(255,255,255,.9);
  --lightbox-action-shadow:0 -8px 24px rgba(0,0,0,.22);
  --lightbox-image-shadow:0 18px 60px rgba(0,0,0,.42);
  --lightbox-control-shadow:0 5px 18px rgba(0,0,0,.34);
  --mark-ring-shadow:0 0 0 2px rgba(232,200,73,.10);
  --mark-active-ring-shadow:0 0 0 3px rgba(232,200,73,.13);
  --external-door-scrim:rgba(23,32,51,.48);
  --external-door-shadow:0 24px 70px rgba(20,30,50,.34);
  --video-frame-shadow:0 14px 40px rgba(30,45,75,.18);
  --video-loading-scrim:rgba(14,22,38,.76);
  --video-spinner-line:rgba(255,255,255,.42);
  --light-control-line:rgba(255,255,255,.7);
  --light-control-hover:rgba(255,255,255,.14);
  --research-item-shadow:0 8px 24px rgba(31,54,92,.05);
  --preview-card-shadow:0 22px 60px rgba(31,41,51,.12);
  --topbar-surface:rgba(234,227,247,.96);
  --topbar-shadow:0 4px 16px rgba(42,37,72,.07);
  --nav-shadow:0 4px 0 var(--line-lav),0 7px 12px rgba(54,37,99,.13);
  --nav-hover-shadow:0 5px 0 var(--line-lav),0 8px 14px rgba(54,37,99,.15);
  --nav-press-shadow:inset 0 3px 6px rgba(54,37,99,.2),inset 0 0 0 1px var(--press-tint);
  --nav-active-shadow:inset 0 3px 7px rgba(54,37,99,.22),inset 0 0 0 1px var(--press-tint);
  --nav-action-shadow:0 4px 0 var(--brand-dark),0 7px 12px rgba(24,58,120,.2);
  --nav-action-hover-shadow:0 5px 0 var(--brand-dark),0 8px 14px rgba(24,58,120,.23);
  --nav-action-press-shadow:inset 0 4px 7px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.08);
  --breadcrumb-surface:rgba(249,246,255,.97);
  --breadcrumb-shadow:0 5px 14px rgba(34,45,70,.05);
  --record-current-shadow:0 5px 16px rgba(30,45,75,.08);
  --radius:18px;
  --max:1120px;
  --font-ui:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-title:"Roboto Serif",Georgia,"Times New Roman",serif;
  --control-height:44px;
  --control-small-height:40px;
  --text-h1:clamp(1.625rem,5.32vw,2.5rem);--text-h2:clamp(1.3125rem,3.46vw,1.625rem);--text-h3:clamp(1.25rem,3.06vw,1.4375rem);--text-summary:clamp(1.1875rem,2.93vw,1.375rem);--text-quote:clamp(1.125rem,2.79vw,1.3125rem);--text-body:clamp(1.0625rem,2.66vw,1.25rem);--text-small:clamp(1rem,2.39vw,1.125rem);--text-tag:0.8125rem;
  --sticky-topbar-height:68px;
  --sticky-breadcrumb-height:0px;
  --page-max:760px;
  --reader-max:900px;
  --sp2046-gutter:28px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--sticky-topbar-height) + var(--sticky-breadcrumb-height) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{min-height:100vh;margin:0;background:var(--lav-2);color:var(--ink);font-family:var(--font-ui);font-size:var(--text-body);line-height:1.62}
main{background:var(--bg)}
a{color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
a:not(.btn):hover{color:var(--brand-dark)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;width:100%}

.hero{padding:76px 0 46px;background:var(--bg);color:var(--ink)}
/* Honeypot link: kept in the DOM for scrapers, invisible and unfocusable for
   people (and robots-disallowed + nofollow so real crawlers never follow it). */
.trap-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

h1,h2,h3{font-family:var(--font-title);font-weight:700;line-height:1.1;margin:0 0 14px;color:var(--ink);letter-spacing:-.015em}h1{font-size:var(--text-h1);max-width:38rem}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}
/* ── Type scale ─────────────────────────────────────────────────────────
   The whole ramp lives in :root as --text-*. Change a token, the site
   follows. Do not hard-code a heading or body size anywhere else.

     --text-h1       36px   page title
     --text-h2       23px   section heading
     --text-h3       20px   subheading
     --text-summary  19px   page-summary, one step above body
     --text-quote    18px   pull quote, deliberately above body
     --text-body     17px   all prose
     --text-small    16px   card metadata, counts, supporting info
     --text-tag      13px   short labels only, never a sentence

   14px is the floor for anything read as a sentence. */
/* ── Reading measure ────────────────────────────────────────────────────
   ONE number governs every column of prose on this site. Change --measure
   and everything below follows; nothing else sets a prose max-width.

   --measure      the text column, about 69 characters
   --measure-box  a bordered/padded block. Same width, so its visible box
                  edge lines up with the prose; its text runs ~65 characters.

   To give something the measure later: add class="measured", or
   class="measured-box" if it has the quote padding and left border.
   Only add a selector below if you cannot reach the markup.
   Do not write a new max-width anywhere else. */
.measured,
.page-summary,
.section-intro,
.records-background-intro,
.page-guide p,
body.text-page .comment-text-rendered,
.video-page .video-description,
.video-moment-description,
.video-record-summary,
.research-item p,
.video-search-panel>p,
main.page-standard>.section>.wrap>p,
main.page-standard>.hero>.wrap>p,
.home-refocus-page .home-beat>.wrap>p{max-width:var(--measure)}

/* Homepage wildfire notice, added 2026-08-02 during the Old Trails / Autumn Lane /
   Fairview fires. Plain by intent: no card, no color block, no urgency styling.
   Remove this rule and the section in index.html together when it comes down. */
main.page-standard>.section.home-fire-notice{padding:36px 0 0;border-top:0}
.home-fire-notice h2{margin:0 0 4px}
.fire-notice-dateline{max-width:var(--measure);margin:0 0 12px;font-size:var(--text-small);color:var(--muted)}.home-fire-notice ul{max-width:var(--measure);margin:0;padding-left:22px;font-size:var(--text-body);line-height:1.6;color:var(--ink)}
.home-fire-notice li+li{margin-top:6px}
.fire-notice-rule{border:0;border-top:1px solid var(--line);margin:40px 0 0;width:100%}
/* The page title should not sit tighter to the rule than a section heading does. */
main.page-standard>.home-fire-notice+.hero{padding-top:64px}
.measured-box,
.quote,
blockquote,
.saying-quote,
.video-quote-excerpt{max-width:var(--measure-box)}
.page-summary{font-size:var(--text-summary);line-height:1.55;margin:0 0 18px;color:var(--ink);text-wrap:pretty}main.page-standard>.section>.wrap>p,main.page-standard>.hero>.wrap>p{text-wrap:pretty}.page-summary > p{margin:0 0 10px}.page-summary > p:last-child{margin-bottom:0}p{margin:0 0 16px}.small{font-size:var(--text-small);color:var(--muted)}

.section{padding:54px 0;border-top:1px solid var(--line);background:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.tight{margin-top:10px}
.card,
.callout,
.comment-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--soft-shadow)}
.card p + p{margin-top:12px}
/* .hl green sentence highlighter retired 2026-07-14. The sentences stay; the marker pen does not. */
.card.flat,.comment-card{box-shadow:none}.callout{border-left:6px solid var(--brand-2)}.callout h3{margin-top:0}.notice{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:18px 0}.note{background:var(--blue-soft);border-left:4px solid var(--brand-2);padding:16px 18px;border-radius:0 14px 14px 0;margin:18px 0;color:var(--ink)}
.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps{counter-reset:step;display:grid;gap:18px}.step{display:flex;gap:16px;background:transparent;padding:0;margin:0}.step:before{counter-increment:step;content:counter(step);width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--paper);display:grid;place-items:center;font-weight:900;flex:0 0 30px;margin-top:2px}.step strong{color:var(--ink)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.tag{display:inline-block;font-size:var(--text-tag);font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-2);background:var(--lav);border:1px solid var(--line-lav);border-radius:999px;padding:4px 9px;margin-bottom:8px}.count{font-size:2rem;font-weight:900;color:var(--brand);line-height:1}
.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg);border-radius:14px;overflow:hidden;line-height:0;align-self:start}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}
.quote,blockquote{margin:16px 0;padding:14px 18px;border-left:4px solid var(--brand);background:var(--blue-soft);border-radius:0 8px 8px 0;color:var(--ink);font-size:var(--text-quote);line-height:1.5;box-shadow:none;overflow-wrap:break-word;min-width:0}.who{display:block;margin-top:10px;font-size:0.875rem;color:var(--ink);font-style:normal;font-weight:700}

.comment-list{display:grid;gap:10px}.comment-card{display:grid;grid-template-columns:130px 1fr auto;gap:14px 24px;align-items:start;background:var(--paper);border-radius:14px;padding:14px 16px}.comment-date{font-weight:850;color:var(--brand-2)}.comment-title{font-weight:850;font-size:1.04rem}.comment-topic{margin-top:4px;color:var(--muted);line-height:1.45}

.image-frame,.img-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--soft-shadow);overflow:auto}.image-frame img,.img-card img{display:block;width:100%;max-width:100%;height:auto;border-radius:12px;background:var(--paper)}
.tablelike{width:100%;margin:14px 0 18px;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}.tablelike th,.tablelike td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.tablelike th{background:var(--blue-soft);font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-dark)}
.footer{padding:36px 0 0;border-top:1px solid var(--line-lav);color:var(--muted);font-size:0.9375rem;text-align:center;background:var(--lav-band)}.footer a{color:var(--brand)}
@media(max-width:900px){.source-grid{grid-template-columns:repeat(2,1fr)}.comment-card{grid-template-columns:1fr}.tablelike{font-size:.92rem}}
@media(max-width:640px){body{font-size:1.0625rem}.wrap{padding:0 16px}.hero{padding:46px 0 30px}.section{padding:38px 0}.source-grid{grid-template-columns:1fr;display:grid}.quote,blockquote{font-size:var(--text-quote)}.card,
.callout,
.comment-card{padding:18px}}
.card,
.callout,
.comment-card,
.image-frame,
.img-card,
.notice{border-color:var(--line-lav);border-radius:12px}
.callout,
.note{background:var(--lav);border-left-color:var(--brand-2);border-radius:0 12px 12px 0}

/* Nav clarity pass */

/* v06 funnel refresh: mobile-first rhythm, clear summary, proof + quote video cards */

/* v06 story rebuild: homepage funnel, four-card grids, and standardized meeting highlights */
.source-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:900px){.source-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.source-grid.compact{grid-template-columns:1fr;}}

.library-list{display:grid;gap:12px}

/* Comment-writing actions are primary, and they say so in the markup: use
   .btn (filled blue) and not .btn.secondary on a Comment action.
   2026-08-11: a three-way href attribute selector used to force that here. It
   restated the base .btn colors for plain links, so its only live effect was
   overriding .secondary on two pages, and it silently missed every
   Parameterized and anchored links because both forms fail an exact or
   ends-with match.
   Class in the markup, not URL matching in the stylesheet. */

/* v08: source cards explain the reader-facing use before the law number takes over */
.explain-source-grid{align-items:stretch;}

/* v09d: mobile-first cleanup, source-guide style */

.page-guide{margin:20px 0 0;}

.page-guide p{margin:0;}
.comment-card > div:last-child{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.comment-card .btn.small{white-space:nowrap;width:auto;}
@media(max-width:640px){
  
  
  
  .hero{padding-top:30px;}
  .comment-card > div:last-child{justify-content:flex-start;}
}

/* 09e comment refinements */
.comment-actions .btn.small{margin:0;}
@media(max-width:900px){.comment-actions{justify-content:flex-end;gap:10px;}.comment-actions .btn.small{width:auto;}}
@media(max-width:640px){.comment-actions{display:flex;flex-wrap:wrap;gap:10px;}.comment-actions .btn.small{width:auto;min-width:110px;}}
.section.compact{padding-top:22px;}

/* 09 consistency pass: simple source-guide flow */

.section-intro{margin:-4px 0 22px}

@media(max-width:640px){.section-intro{font-size:1.0625rem;margin:0 0 18px}.comment-actions{justify-content:flex-end}}

/* v09 voice and mobile cleanup */

.page-guide p{font-size:1.125rem;line-height:1.5;margin-bottom:0}
.section-intro{color:var(--ink);font-size:1.0625rem;line-height:1.55}
.comment-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
@media(max-width:640px){.comment-actions .btn,.comment-actions button{width:auto}.page-guide p{font-size:1.0625rem}}
.section-rule{border:0;border-top:1px solid var(--line);margin:30px 0;}

/* 2026-08-04: marks a heading whose section is visible only on localhost, so
   a localhost preview shows at a glance what no other visitor can see. Never
   ships: spokane2046_draft_marker() returns '' the moment
   SPOKANE2046_SHOW_DRAFT flips, and the markup disappears with it. */
.draft-marker{font:600 0.75rem/1 var(--font-ui);color:var(--muted);vertical-align:middle;}

/* 2026-08-04: one-time margin note pointing at the first glossary term the
   reader scrolls to, drawn by lib/js/glossary-first-hint.js. A curved arrow
   plus a short italic note, not a UI chip: the site reads as a document, so an
   annotation belongs and a filled pill would compete with the green term it is
   pointing at. Two earlier passes are recorded in the JS - small muted type was
   too quiet to notice, a green pill was noticed but read as chrome.
   It sits in normal flow, inserted after the paragraph: inline would reflow the
   sentence mid-read, and an absolutely positioned overlay covered the paragraph
   below it at every width, which is what overlays do. In flow it cannot cover
   anything. pointer-events:none so it can never sit between the reader and the
   term it is advertising. */
.glossary-first-hint{
  display:block;position:relative;
  margin:14px 0 0;
  color:var(--green);
  pointer-events:none;
}
/* Spans the whole column and contributes no layout; the tip is drawn at a
   measured coordinate inside it, so nothing about the note's own box position
   can move the arrow off its word. */
.glossary-first-hint-arrow{position:absolute;left:0;top:0;}
/* Placed in JS: its left margin puts it just past the arrow's tail. */
.glossary-first-hint-label{
  display:inline-block;
  white-space:nowrap;
  font:italic 600 0.9375rem/1 var(--font-title);
}
/* The arrow scales with the column, so only the note needs shrinking. Its left
   margin is clamped in JS so it slides left rather than off the right edge. */
@media(max-width:520px){
  .glossary-first-hint-label{font-size:0.875rem;}
}

/* v10-0 records room cleanup */
#records .comment-list{margin-top:18px;}
#records .comment-card{background:var(--paper);}

@media(max-width:640px){.step{gap:15px;}}

.density-row{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;}
.density-row figure{margin:0;border-radius:0;overflow:hidden;box-shadow:var(--soft-shadow);cursor:zoom-in;background:var(--paper);}
.density-row img{display:block;width:100%;height:auto;}
.density-row figcaption{padding:10px 10px 8px;text-align:center;}
.density-row figcaption h3{display:block;font-size:0.9375rem;color:var(--ink);margin:0 0 2px;line-height:1.2}
.density-row figcaption p{display:block;line-height:1.35;color:var(--muted);margin:0;}
@media(max-width:420px){.density-row{gap:6px;}}
/* Now that each thumbnail carries real caption text (not just a bare
   image), three across is too cramped to read on a phone - stack them
   like every other card on the site. */
.density-row figcaption p{font-size:0.84375rem;}

.slide-stage{margin:0;}
.slide-stage img{width:100%;height:auto;display:block;border-radius:8px;}
.slide-viewer-caption{margin:12px 0 0;color:var(--muted);line-height:1.5;}

/* v12 generic PDF slides */
.buttonrow a + a, .source-action-row a + a, .library-actions a + a { margin-left: 8px; }
@media(max-width:640px){  .buttonrow a + a, .source-action-row a + a, .library-actions a + a { margin-left:0; } }

.slide-viewer{display:grid;gap:14px;}
.slide-bottom-nav .slide-page-status{font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;padding:0 4px;}
.slide-page-button{border:1px solid var(--border-blue);background:var(--paper);color:var(--brand);font-weight:850;border-radius:999px;min-width:34px;height:34px;padding:0 10px;}
.slide-page-button.active{background:var(--brand);border-color:var(--brand);color:var(--paper);}
.slide-dots{color:var(--muted);font-weight:850;padding:0 2px;}
.slide-bottom-nav .btn.small{width:auto;margin:0;box-shadow:none;background:var(--brand);border-color:var(--brand);color:var(--paper);}
.slide-bottom-nav .btn.small:disabled{opacity:.45;}

@media(max-width:640px){.slide-bottom-nav{border-radius:14px;gap:6px;padding:8px;}.slide-page-button{min-width:30px;height:32px;padding:0 8px;font-size:0.8125rem;}.slide-bottom-nav .btn.small{min-width:74px;padding:8px 10px;font-size:0.8125rem;}.comment-actions .btn,.comment-actions button{flex:1 1 128px;}}
.source-action-row .btn.small:first-child:not(.secondary){background:var(--brand);border-color:var(--brand);color:var(--paper);}
.source-action-row .btn.small:first-child:not(.secondary):hover{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--paper);}

/* v15 comment buttons stay white */
.comment-actions .btn{background:var(--paper);color:var(--brand);border-color:var(--border-blue);}
.comment-actions .btn:hover{background:var(--lav);color:var(--brand-dark);border-color:var(--border-blue);}

/* Slide navigation follows the document page, matching the video viewer's
   player-then-stepper reading order. */
.slide-bottom-nav{
  position:static;
  bottom:auto;
  z-index:auto;
  margin:12px 0 0;
  padding:10px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.slide-bottom-nav .btn,
.slide-bottom-nav .btn.small{
  background:var(--paper);
  color:var(--brand);
  border-color:var(--border-blue);
}
.slide-bottom-nav .btn:hover,
.slide-bottom-nav .btn.small:hover{
  background:var(--lav);
  color:var(--brand-dark);
  border-color:var(--border-blue);
}
.comment-count{
  margin:12px 0 0;
  color:var(--muted);
  font-weight:750;
}
[hidden]{display:none;}
.mobile-data-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:0.875rem;
}
.mobile-data-table th,
.mobile-data-table td{
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}
.mobile-data-table th{
  color:var(--ink);
  font-weight:850;
  background:var(--lav);
}
.mobile-data-table td:not(:first-child),
.mobile-data-table th:not(:first-child){
  text-align:right;
}
@media(max-width:760px){
  .mobile-data-table thead{display:none;}
  .mobile-data-table,
  .mobile-data-table tbody,
  .mobile-data-table tr,
  .mobile-data-table td{display:block;width:100%;}
  .mobile-data-table tr{
    border:1px solid var(--line);
    border-radius:14px;
    margin:0 0 12px;
    padding:8px 10px;
    background:var(--paper);
  }
  .mobile-data-table td{
    border:0;
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:7px 0;
    text-align:right;
  }
  .mobile-data-table td::before{
    content:attr(data-label);
    font-weight:850;
    color:var(--muted);
    text-align:left;
  }
  .mobile-data-table td:first-child{
    display:block;
    text-align:left;
    font-size:1rem;
    font-weight:850;
    padding-bottom:9px;
    border-bottom:1px solid var(--line);
    margin-bottom:4px;
  }
  .mobile-data-table td:first-child::before{display:none;}
}
.slide-viewer .slide-stage{
  display:block;
  overflow:visible;
  background:var(--paper);
}
.slide-viewer .slide-stage img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:contain;
  display:block;
  background:var(--paper);
}
.slide-viewer-caption{
  display:block;
  width:100%;
  min-height:2.6em;
  margin-top:12px;
}
.slide-viewer-caption:empty{display:none}
.slide-income-focus{position:absolute;inset:0;display:block;overflow:hidden;border-radius:8px;pointer-events:none}
.slide-income-focus svg{display:block;width:100%;height:100%}
.slide-income-focus-outline,
.slide-income-focus-arrow,
.slide-income-focus-arrowhead{fill:none;stroke:var(--brand);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:slide-income-focus-pulse 800ms ease-in-out 2}
/* City Evidence passages read as a marker swipe, not a box: the shared yellow
   highlighter fill multiplied over the page image so the printed ink shows
   through, the same one-yellow rule the transcript highlighter follows. */
.slide-income-focus .slide-evidence-highlight-layer{mix-blend-mode:multiply}
.slide-evidence-highlight{fill:var(--mark-bg);stroke:none;animation:slide-income-focus-pulse 800ms ease-in-out 2}
.slide-income-focus-arrow,
.slide-income-focus-arrowhead{stroke-width:7}
.slide-viewer-focus-note{margin:0;color:var(--brand);font-size:0.9375rem;font-weight:800;line-height:1.4}
@keyframes slide-income-focus-pulse{0%,100%{opacity:.48}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.slide-income-focus-outline,.slide-income-focus-arrow,.slide-income-focus-arrowhead{animation:none;opacity:1}}
.slide-viewer .slide-stage>.enlargeable-image-trigger{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  height:100%;
}
.slide-viewer .slide-stage>.enlargeable-image-trigger .slide-viewer-image{
  width:100%;
  height:100%;
}
@media(max-width:640px){
.slide-viewer .slide-stage img{
    aspect-ratio:4/3;
  }
.slide-viewer-caption{
    min-height:auto;
  }
}

/* v25 slideshow controls below + tap-to-zoom */
.slide-deck-portrait .slide-stage img{
  aspect-ratio:3/4;
  max-height:78vh;
}
@media(max-width:640px){
.slide-deck-landscape .slide-stage img{
    aspect-ratio:4/3;
  }
.slide-deck-portrait .slide-stage img{
    aspect-ratio:3/4;
    max-height:72vh;
  }
}
.pdf-comment-meta{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  margin-top:12px;
  box-shadow:var(--soft-shadow);
}
.pdf-comment-meta .meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:800;
  font-size:0.875rem;
}
.pdf-comment-meta .meta-row span:not(:empty){
  border:1px solid var(--border-blue);
  border-radius:999px;
  padding:4px 9px;
  background:var(--paper);
  color:var(--brand);
}
.pdf-comment-meta p{
  margin:10px 0 0;
  color:var(--ink);
  line-height:1.45;
}
.pdf-comment-meta .buttonrow{
  margin-top:12px;
}

/* v34 compact comment slide viewer */
.comment-slide-page .pdf-comment-meta{
  margin-top:10px;
}
.comment-slide-page .pdf-comment-meta p{
  margin-top:9px;
}
.comment-slide-page .slide-viewer{
  margin:0 auto;
}
@media(max-width:760px){
  .comment-slide-page .pdf-comment-meta{
    padding:12px;
  }
  .comment-slide-page .pdf-comment-meta p{
    font-size:1rem;
  }
  .comment-slide-page .section{
    padding-top:24px;
  }
}

/* v35 comment viewer actions and plain metadata */
.comment-slide-page .pdf-slide-hero{
  padding:22px 0 20px;
}
.comment-slide-page .pdf-comment-meta{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
}
.comment-slide-page .pdf-comment-meta .meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:0.875rem;
  color:var(--muted);
  font-weight:800;
}
.comment-slide-page .pdf-comment-meta .meta-row span{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:0;
  border-radius:0;
}
.comment-slide-page .pdf-comment-meta .meta-row span:not(:empty)::after{
  content:"";
}
.comment-slide-page .pdf-comment-meta p{
  font-size:1rem;
  line-height:1.4;
  margin:12px 0 16px;
  color:var(--ink);
}
.comment-slide-page .section{
  padding-top:22px;
}
@media(max-width:760px){
  .comment-slide-page .pdf-slide-hero{
    padding:18px 0 18px;
  }
}

/* v36 centered comment title card */
.comment-slide-page .pdf-title-card{
  max-width:980px;
  margin:0 auto;
}
.comment-slide-page .pdf-comment-meta{max-width:100%;text-align:left}
.comment-slide-page .slide-viewer{
  max-width:980px;
}
@media(min-width:900px){
  .comment-slide-page .pdf-title-card,
  .comment-slide-page .slide-viewer{
    width:min(980px, calc(100vw - 64px));
  }
}

.comment-slide-page .slide-viewer{
  margin-top:0;
}

.slide-deck-landscape .slide-stage{
  aspect-ratio:16/10;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.slide-deck-landscape .slide-stage img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  aspect-ratio:auto;
}

.slide-deck-portrait .slide-stage,
.comment-slide-page .slide-stage{
  aspect-ratio:8.5/11;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.slide-deck-portrait .slide-stage img,
.comment-slide-page .slide-stage img{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  aspect-ratio:auto;
}

@media(max-width:640px){
.slide-deck-landscape .slide-stage{
    aspect-ratio:16/10;
  }
  .slide-deck-portrait .slide-stage,
  .comment-slide-page .slide-stage{
    aspect-ratio:8.5/11;
  }
}
.slide-number-row{
  flex-wrap:wrap;
}

@media(max-width:420px){
.slide-number-row{
    gap:4px;
  }
.slide-page-button{
    min-width:32px;
    padding:7px 9px;
    font-size:0.8125rem;
  }
.slide-prev,
.slide-next{
    padding-left:10px;
    padding-right:10px;
  }
  .slide-dots{
    min-width:12px;
    padding:0 1px;
  }
}

/* v84 simpler comment zoom */
.comment-slide-page .slide-viewer-caption{
  display:none;
}

.slide-number-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.slide-dots{
  display:none;
}
.slide-bottom-nav .btn.small{
  min-width:88px;
}

@media(max-width:420px){
.slide-bottom-nav{
    gap:6px;
  }
.slide-bottom-nav .btn.small{
    min-width:72px;
    padding:8px 10px;
  }
}
.map-detail-card{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--soft-shadow);
  overflow:hidden;
}
.map-detail-card figcaption{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.map-detail-card h3{
  margin:0 0 6px;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  line-height:1.15;
}
.map-detail-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:820px;
}
.map-detail-card .btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.map-detail-image{
  display:block;
  width:100%;
  height:auto;
  background:var(--bg);
}@media(max-width:760px){
  .map-detail-card figcaption{
    display:block;
    padding:16px;
  }
  .map-detail-card .btn{
    margin-top:12px;
  }
}

/* Desktop cursor and compact PDF viewer header */
@media (hover:hover) and (pointer:fine){
.map-detail-image,
.slide-viewer-image{
    cursor:zoom-in;
  }
}
/* Unified compact record-viewer header — one scale across text, slide, and video
   viewers (AGENTS: viewer heading clamp(24px,3.2vw,34px), hero padding 14px 0 8px).
   Do not reintroduce per-viewer heading scales. */
body.text-page .hero,
body.pdf-slide-page .hero,
body.video-page .hero{
  padding:14px 0 8px;
}

.pdf-slide-page .hero .btn,
body.pdf-slide-page .hero .btn{
  width:auto;
  min-height:38px;
  padding:8px 13px;
  font-size:0.875rem;
}
@media(max-width:640px){
  body.text-page .hero,
  body.pdf-slide-page .hero,
  body.video-page .hero{
    padding:12px 0 8px;
  }
}

/* 2026-07-09 development cleanup: keep Records Room aligned with the mobile-first pages */
.records-page .hero > .wrap,
.records-page .section > .wrap{
  max-width:720px;
}
.records-page .library-list,
.records-page .records-room-library{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.records-page .library-item,
.records-page .records-room-doc{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
}
.records-page .library-item span,
.records-page .records-room-doc span{
  max-width:100%;
  line-height:1.5;
}
.records-page .library-actions,
.records-page .records-room-multi-actions,
.records-page .source-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}
.records-page .library-actions .btn,
.records-page .source-action-row .btn{
  min-height:42px;
}
.records-page .source-grid,
.records-page .explain-source-grid,
.records-page .single-action-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media(max-width:640px){
  .records-page .hero > .wrap,
  .records-page .section > .wrap{
    width:min(100% - 32px, 720px);
    padding-left:0;
    padding-right:0;
  }
  .records-page .library-actions .btn,
  .records-page .source-action-row .btn{
    width:100%;
  }
}

.page-standard .hero,
.saying-page .hero{
  padding:26px 0 22px;
}

.saying-page .hero .buttonrow .btn{
  width:min(100%, 520px);
  max-width:520px;
}
.saying-tag-row span{
  justify-content:center;
  font:inherit;
  white-space:nowrap;
}
.people-result-count{margin:16px 0 0;color:var(--muted);font-size:0.875rem;font-weight:850;text-align:center;}
.saying-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:760px;margin:0 auto;}
.saying-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px var(--shadow-tint);
  min-width:0;
  overflow-wrap:break-word;
}
.saying-card h2,
.saying-card h3{
  font-size:clamp(1.5625rem, 7.4vw, 2.125rem);
  line-height:1.05;
  margin-bottom:8px;
}
.saying-source{
  font-size:0.875rem;
  line-height:1.35;
  color:var(--muted);
  margin-bottom:10px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  column-gap:9px;
  row-gap:0;
  align-items:center;
}
.saying-number-inline{
  grid-row:1 / span 2;
  grid-column:1;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--brand);
  color:var(--paper);
  font-weight:900;
  font-size:0.8125rem;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.saying-source .source-line-one,
.saying-source .source-line-two{display:block;grid-column:2;min-width:0;overflow-wrap:break-word;}
.saying-source .source-line-one{font-weight:900;color:var(--brand-dark);}
.saying-source .source-line-two{margin-top:2px;font-weight:800;color:var(--muted);}
.saying-tag-row{display:flex;flex-wrap:wrap;margin:0 0 14px;}
.saying-question{
  background:var(--green-soft);
  border-left:5px solid var(--green-bright);
  border-radius:0 12px 12px 0;
  padding:13px 14px;
  margin:12px 0;
  overflow-wrap:break-word;
}
.saying-quote{
  margin:12px 0;
  padding:14px 16px;
  border-left:5px solid var(--brand);
  border-radius:0 12px 12px 0;
  background:var(--lav);
  font-size:1rem;
  line-height:1.5;
  overflow-wrap:break-word;
}
.saying-why{margin-top:12px;}
.saying-details{margin-top:12px}
.saying-details>summary{display:inline-flex;align-items:center;gap:6px;color:var(--brand-dark);font:800 0.875rem/1.3 var(--font-ui);cursor:pointer;list-style:none;padding:4px 0}
.saying-details>summary::-webkit-details-marker{display:none}
.saying-details>summary::after{content:"+";color:var(--brand);font-size:1.125rem;font-weight:600;line-height:1}
.saying-details[open]>summary::after{content:"\2212"}
.saying-details .saying-quote,.saying-details .saying-why{margin-top:10px}
.saying-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  margin-top:14px;
}
@media(max-width:640px){
.page-standard .hero,
.saying-page .hero{padding:22px 0 18px;}
.saying-card{border-radius:16px;padding:16px;}
.saying-tag-row span{min-height:32px;padding:7px 11px;font-size:var(--text-tag);}
}

/* Root pages use the same readable column. Viewer pages can go wider when showing large slides/text. */
main.page-standard > .hero > .wrap,
main.page-standard > .section > .wrap{
  max-width:var(--page-max);
}
body.pdf-slide-page main.page-standard > .section > .wrap,
main.text-page > .section > .wrap{
  max-width:var(--reader-max);
}
body.pdf-slide-page main.page-standard > .hero > .wrap,
main.text-page > .hero > .wrap{
  max-width:var(--reader-max);
}

/* Standard page headers: compact, readable, and consistent with the mobile-first home/map/people feel. */
main.page-standard > .hero{
  padding:30px 0 24px;
  background:var(--bg);
}
.library-list,
.records-room-library,
.comment-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.comment-card,
.map-detail-card,
.saying-card{
  border-radius:16px;
  border-color:var(--line);
  box-shadow:0 10px 26px var(--shadow-tint);
}


.comment-actions,
.records-room-multi-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.source-action-row .btn,
.comment-actions .btn,
.records-room-multi-actions .btn{
  min-height:42px;
  width:auto;
  white-space:normal;
  text-align:center;
}
/* Tag pills read as labels, not buttons. Comment cards opt out of this and
   style their own flat, dot-separated tags further down. */
.tag,
.saying-tag-row span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--lav);
  border:1px solid var(--line-lav);
  color:var(--purple);
  font-size:var(--text-tag);
  line-height:1.05;
  font-weight:850;
  text-transform:none;
  letter-spacing:0;
}

/* City evidence labels are editorial kickers, not controls. */
.city-evidence-page .evidence-featured-card .tag{
  justify-self:start;
  min-height:0;
  margin:0 0 -2px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--purple);
  font-size:var(--text-tag);
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* City evidence leads with the public test, then separates proof from limits. */
.city-evidence-page{
  overflow-x:clip;
}
.city-evidence-page .evidence-standard{
  display:grid;
  gap:8px;
  margin:20px 0 0;
  font-size:var(--text-body);
  line-height:1.45;
}
.city-evidence-page .evidence-standard strong{
  color:var(--ink);
  font-size:var(--text-summary);
}
.city-evidence-page .evidence-standard span{
  color:var(--ink);
}
.city-evidence-page .evidence-featured-intro{
  margin:10px 0 22px;
}
.city-evidence-page .records-room-library{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.city-evidence-page .records-room-library>.full-bleed-rule{
  margin:20px 0;
}
.city-evidence-page .evidence-takeaway>strong,
.city-evidence-page .evidence-question>strong{
  color:var(--green);
  font-size:var(--text-tag);
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.city-evidence-page .evidence-featured-card{
  gap:16px;
  padding:24px;
}
.city-evidence-page .evidence-featured-card>div:first-child{
  display:grid;
  gap:14px;
}
.city-evidence-page .evidence-claim{
  margin:0;
  padding:18px 20px;
  border-left-width:5px;
  font-size:var(--text-quote);
}
.city-evidence-page .evidence-takeaway{
  display:grid;
  gap:6px;
  margin:0;
  padding:2px 0;
}
.city-evidence-page .evidence-takeaway span{
  color:var(--ink);
  font-size:var(--text-body);
  line-height:1.55;
}
.city-evidence-page .evidence-question{
  display:grid;
  gap:5px;
  margin:0;
  color:var(--ink);
}
.city-evidence-page .evidence-question>span{
  color:var(--ink);
}
.city-evidence-page .evidence-question{
  padding:2px 0;
  border-top:0;
}
.city-evidence-page .evidence-question>strong{
  color:var(--brand);
}
.city-evidence-page .evidence-action-section .button-row{
  justify-content:flex-start;
}
@media(max-width:640px){
  .city-evidence-page .evidence-featured-card{padding:18px}
  .city-evidence-page .evidence-claim{padding:15px 16px}
}

/* Public promise, counted result, and missing result in one evidence-led ledger. */
.public-ledger{
  overflow:hidden;
  margin-top:18px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  box-shadow:var(--soft-shadow);
}
.public-ledger > h3{
  margin:0;
  padding:14px 16px;
  background:var(--ink);
  color:var(--paper);
}
.public-ledger-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.public-ledger-item{
  min-width:0;
  padding:16px;
  border-right:1px solid var(--line);
}
.public-ledger-item:last-child{
  border-right:0;
}
.public-ledger-item strong{
  display:block;
  margin-bottom:6px;
  color:var(--purple);
  font-size:var(--text-tag);
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.public-ledger-item span{
  display:block;
  font-size:var(--text-small);
  line-height:1.5;
}
.public-ledger-verdict{
  margin:0;
  padding:14px 16px;
  border-top:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  font-size:var(--text-small);
  line-height:1.5;
}
.public-ledger-verdict strong{
  color:var(--paper);
}

/* Keep buttons consistent on mobile. */

.hero .buttonrow .btn{
  min-height:48px;
}
@media(max-width:640px){
  .wrap{padding-left:16px;padding-right:16px;}
  main.page-standard > .hero{padding:24px 0 20px;}
  main.page-standard > .section{padding:36px 0;}
  
  .source-action-row .btn,
  .comment-actions .btn,
  .records-room-multi-actions .btn,
  .saying-actions .btn,
  .buttonrow .btn{
    width:100%;
  }
  .comment-card{
    grid-template-columns:1fr;
  }
  .public-ledger-grid{
    grid-template-columns:1fr;
  }
  .public-ledger-item{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .public-ledger-item:last-child{
    border-bottom:0;
  }
}
.saying-actions .btn.secondary{background:var(--paper);}

/* 2026-07-09 text viewer: match slide viewer look and clean readable text cards. */
body.text-page main.page-standard > .hero{
  padding:28px 0 22px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
body.text-page main.page-standard > .hero > .wrap,
body.text-page main.page-standard > .section > .wrap{
  max-width:900px;
}
body.text-page .viewer-head{
  max-width:900px;
}

body.text-page .viewer-org{
  font-size:clamp(1.0625rem, 2.5vw, 1.3125rem);
  line-height:1.28;
  color:var(--ink);
  font-weight:650;
  margin:0 0 6px;
  max-width:850px;
}
body.text-page .viewer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin:6px 0 0;
  color:var(--muted);
  font-size:0.9375rem;
  line-height:1.4;
  font-weight:750;
}
body.text-page .viewer-meta span{
  display:inline;
  color:var(--muted);
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  font:inherit;
}
body.text-page .viewer-meta span:not(:last-child)::after{
  content:"\00a0\00b7\00a0";
  color:var(--faint);
  font-weight:900;
}
body.text-page main.page-standard > .section{
  padding:36px 0 56px;
}
.viewer-record-frame{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  box-shadow:0 12px 32px var(--shadow-tint);
  overflow:visible;
}
body.text-page .comment-text-rendered{
  font-family:var(--font-ui);
  font-size:1.0625rem;
  line-height:1.66;
  color:var(--ink);
}
body.text-page .comment-line{
  margin:0 0 .62rem;
  overflow-wrap:break-word;
  font-weight:400;
}
body.text-page .comment-line.number{
  padding-left:0;
  text-indent:0;
}
body.text-page .comment-line.letter{
  margin-left:1rem;
  padding-left:1.55rem;
  text-indent:-1.55rem;
}
body.text-page .comment-line.roman{
  margin-left:2rem;
  padding-left:1.7rem;
  text-indent:-1.7rem;
  color:var(--ink);
}
body.text-page .comment-line.continuation{
  margin-left:2.1rem;
  color:var(--ink);
}
body.text-page .comment-attachment{
  margin:22px 0 14px;
  padding:10px 13px;
  border-left:5px solid var(--green-bright);
  background:var(--green-soft);
  border-radius:0 12px 12px 0;
  color:var(--ink);
  font-weight:750;
}
body.text-page .comment-rule{
  height:1px;
  background:var(--line);
  margin:18px 0;
}
/* 2026-07-13: the combined "All Comments" text file separates each written
   comment with a row of "====" characters plus the source .txt filename on
   its own line. Previously these fell through to plain body-text rendering
   and showed up as raw punctuation and bare filenames in the middle of the
   reading flow. Render the filename as a small muted label instead - a
   quiet section break between comments, not a callout. */
body.text-page .comment-doc-label{
  margin:20px 0 4px;
  font-size:0.84375rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
  text-transform:uppercase;
}
body.text-page .comment-space{
  height:.45rem;
}
body.text-page .btn.copy-btn.copied{
  background:var(--green-soft);
  color:var(--green);
  border-color:var(--green-active);
}
body.text-page .copy-status{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
@media(max-width:640px){
  body.text-page main.page-standard > .hero{
    padding:22px 0 18px;
  }
  
  body.text-page .viewer-org{
    font-size:1.0625rem;
  }
  body.text-page .viewer-meta{
    font-size:0.875rem;
  }
  body.text-page main.page-standard > .section{
    padding:24px 0 40px;
  }
  .viewer-record-frame{
    padding:16px;
    border-radius:16px;
  }
  body.text-page .comment-text-rendered{
    font-size:1.0625rem;
    line-height:1.62;
  }
  body.text-page .comment-line.letter{
    margin-left:.45rem;
    padding-left:1.35rem;
    text-indent:-1.35rem;
  }
  body.text-page .comment-line.roman,
  body.text-page .comment-line.continuation{
    margin-left:1rem;
  }
}

/* Transcript anchors and soft quote highlighting. */
body.text-page .comment-timestamp{
  display:inline-block;
  margin:1.15rem 0 .35rem;
  padding:3px 9px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--muted);
  font-size:0.8125rem;
  line-height:1.35;
  font-weight:750;
  letter-spacing:.01em;
}

/* 2026-07-09: Questions card labels and map legends should read as topics, not buttons. */
.saying-question strong{
  font-weight:900;
}
body.text-page .comment-line.quote-container{
  box-shadow:none;
}
body.text-page .comment-timestamp.jump-highlight{
  background:var(--mark-bg);
  color:var(--mark-text);
  box-shadow:var(--mark-ring-shadow);
}
body.text-page .comment-text-rendered.transcript-readable{
  font-size:1.0625rem;
  line-height:1.7;
}
body.text-page .transcript-readable .transcript-paragraph{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}
body.text-page .transcript-readable .transcript-cue{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:0 0 1.1rem;
}
body.text-page .transcript-readable .transcript-time-inline{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  margin:2px 0 0;
  padding:2px 8px;
  justify-self:start;
}
body.text-page .transcript-readable .transcript-time-inline::before{
  content:attr(data-label);
}
body.text-page .transcript-readable .transcript-time-inline:not([data-time]){
  background:none;
  min-height:0;
  padding:0;
}
@media(max-width:640px){
  body.text-page .comment-text-rendered.transcript-readable{
    font-size:1.0625rem;
    line-height:1.68;
  }
  body.text-page .transcript-readable .transcript-cue{
    grid-template-columns:54px minmax(0,1fr);
    gap:9px;
    margin-bottom:1rem;
  }
}

.footer .wrap{
  width:min(100% - var(--sp2046-gutter), var(--page-max));
  max-width:var(--page-max);
  margin-inline:auto;
}

.page-standard > .hero > .wrap,
.page-standard > .section > .wrap,
.home-mobile-page > .hero > .wrap,
.home-mobile-page > .section > .wrap,
.saying-page > .hero > .wrap,
.saying-page > .section > .wrap,
.records-page > .hero > .wrap,
.records-page > .section > .wrap,
.text-page > .hero > .wrap,
.text-page > .section > .wrap{
  width:min(100% - var(--sp2046-gutter), var(--page-max));
  max-width:var(--page-max);
  margin-inline:auto;
}
.footer p{
  margin:.4rem auto;
  max-width:720px;
  line-height:1.45;
}
.footer-band{
  width:100%;
  margin-top:22px;
  padding:14px 0;
  background:var(--lav-2);
  border-top:1px solid var(--line-lav);
}
.footer-links{
  margin:0 auto;
  font-size:0.875rem;
  color:var(--muted);
}
.footer a{
  font-weight:700;
  text-decoration:underline;
}

.saying-actions{
  align-items:center;
}
@media(max-width:420px){
  :root{--sp2046-gutter:22px;}
}
.saying-tag-row span{cursor:default;
  pointer-events:none;display:inline-flex;
  align-items:center;
  min-height:0;
  line-height:1.15;
  letter-spacing:0}
button,
a.btn{
  cursor:pointer;
}
body.text-page .quote-mark{
  display:inline;
  padding:.06em .16em;
  line-height:1.75;
  background:var(--mark-bg);
  border:0;
  border-left:0;
  border-radius:7px;
  box-shadow:var(--mark-active-ring-shadow);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
body.text-page .comment-line.quote-container{
  background:transparent;
  border-left:0;
  padding-left:0;
}
/* The zeroed padding above must not cancel the hanging-indent padding on list
   lines: a highlighted numbered line kept its negative text-indent but lost the
   balancing padding, pushing its first line outside the record card
   (found 2026-08-12 on the CRSB conclusions list). */
body.text-page .comment-line.number.quote-container{padding-left:0}
body.text-page .comment-line.letter.quote-container{padding-left:1.55rem}
body.text-page .comment-line.roman.quote-container{padding-left:1.7rem}
body.text-page .comment-line.bullet.quote-container{padding-left:1.4rem}
@media(max-width:640px){
  body.text-page .comment-line.letter.quote-container{padding-left:1.35rem}
}

/* 2026-07-10: consistency pass - topic tags read as plain labels (no pill
   background/border, matches the growth-map corridor tag treatment), and
   action buttons on questions/records-room use the shared right-aligned,
   width-capped style instead of stretching wide or stacking full-width. */
.saying-tag-row{
  gap:0;
  background:none;
}
.saying-tag-row span{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  color:var(--muted);
  font-size:var(--text-tag);
  font-weight:750;
}
.saying-tag-row span:not(:last-child)::after{
  content:"\00b7";
  display:inline-block;
  margin:0 6px;
  color:var(--faint);
  font-weight:400;
}
.saying-actions{
  flex-direction:row;
  justify-content:flex-end;
}
.saying-actions .btn{
  width:auto;
  min-width:160px;
  max-width:220px;
  flex:0 1 auto;
}
.records-page .library-actions,
.records-page .records-room-multi-actions,
.records-page .source-action-row{
  justify-content:flex-end;
}
.records-page .library-actions .btn,
.records-page .records-room-multi-actions .btn,
.records-page .source-action-row .btn{
  width:auto;
  min-width:160px;
  max-width:220px;
  flex:0 1 auto;
}

/* The mailto button's label is a full email address, not a short button
   label like the others in .buttonrow - the shared 260px cap squeezed it
   into a misshapen pill. Let it size to its content instead. */

/* Same fix, now that this button lives in an .explainer-card's
   .source-action-row instead of a plain .buttonrow - the universal
   50%-width cap on action buttons would squeeze this long email address
   just as badly. */
.write-comment-page .source-action-row a[href^="mailto:"]{
  max-width:none;
  white-space:nowrap;
}
@media(max-width:420px){
  .write-comment-page .source-action-row a[href^="mailto:"]{
    white-space:normal;
  }
}

.saying-question,
.saying-quote,
blockquote,
.quote,
.note{
  border-radius:0;
}/* ============================================================
   2026-07-12: Mobile-first simplification, final pass.

   ~90% of traffic is on phones, so this collapses the patchwork of
   breakpoints built up over past edits (420/430/480/560/640/760/820/
   900/960/1100px) into one continuous page-width rule and a single
   column layout everywhere, on every page. Desktop only gets small,
   safe affordances (pointer cursor, a hover tint) - nothing structural
   changes above phone width, so there is no more "in-between" range
   where some elements have switched to a wider layout and others
   haven't caught up yet.

   Deliberately last in the file so it wins over the older, scattered,
   conflicting breakpoint rules above without hunting down and editing
   every one of them individually.
   ============================================================ */

/* One page-width rule, no discrete breakpoints: min() shrinks smoothly
   down to phone width and caps out at 720px on anything wider, so
   there's no jump between a "mobile" and "desktop" layout to land
   between. Covers every page - they all render through main.page-standard. */

.footer .wrap,
main.page-standard > .hero > .wrap,
main.page-standard > .section > .wrap{
  width:min(100% - 32px, 720px);
  max-width:720px;
  margin-inline:auto;
  padding-left:0;
  padding-right:0;
}
.library-list,
.records-room-library,
.comment-list,
.source-grid,
.explain-source-grid,
.single-action-grid,
.records-page .grid,
.records-page .cards{
  display:grid;
  grid-template-columns:1fr;
}
.comment-card,
.written-comments-page .comment-card,
.records-page .card,
.records-page article{
  display:block;
}
.written-comments-page .comment-card[hidden]{display:none}
.source-action-row .btn,
.comment-actions .btn,
.comment-actions button,
.records-room-multi-actions .btn,
.buttonrow .btn,
.records-page .btn,
.records-page a.btn,
.records-page .btn.small,
.written-comments-page .comment-actions .btn{
  width:auto;
  flex:0 1 auto;
  max-width:calc(50% - 5px);
}

/* Desktop is a bonus, not a target: pointer cursor and a subtle hover
   tint. Layout and column count don't change above phone width. */
@media (hover:hover) and (pointer:fine){
  a, button, [role="button"]{
    cursor:pointer;
  }
  
  
}/* 2026-07-13: dividers between the three density-row figures. Stacked
   single-column on every screen size now, so Low/Moderate/High Density
   ran together without a clear break between them - a thin rule marks
   where one housing type ends and the next begins. */

/* Comment presents a four-step email-writing path as a card sequence. */
.comment-steps{
  display:grid;
  gap:14px;
}
/* 2026-07-27: separates a run of cards from the block that follows, where the next
   card opens a new subsection rather than continuing the sequence. Unlike
   .density-divider this sits between cards, so it takes no negative side margin. */
.block-divider{
  border:0;
  border-top:1px solid var(--line);
  margin:26px 0;
}
/* Full-bleed rule: spans the viewport regardless of the wrap it sits in, so a
   divider inside a section matches the edge-to-edge border-top that separates
   sections. One shared implementation (2026-08-11) - the map homepage and the
   analytics dashboard each had their own page-local copy, and analytics used a
   -50vw margin that only lands correctly while its container is perfectly
   centered. Requires overflow-x:clip on an ancestor, which .records-page and
   the map page already set. */
.full-bleed-rule{
  position:relative;
  left:50%;
  width:100vw;
  max-width:none;
  border:0;
  border-top:1px solid var(--line);
  transform:translateX(-50%);
}
.comment-step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--soft-shadow);
}

.comment-step p{
  margin:0 0 12px;
}
.comment-example{
  border:1px solid var(--border-blue);
  border-radius:10px;
  background:var(--blue-soft);
  overflow:hidden;
}
.comment-example>summary{
  min-height:44px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--brand-dark);
  font:800 0.9375rem/1.3 var(--font-ui);
  list-style:none;
  cursor:pointer;
}
.comment-example>summary::-webkit-details-marker{display:none}
.comment-example>summary::after{
  content:"+";
  flex:0 0 auto;
  color:var(--brand);
  font-size:1.25rem;
  font-weight:700;
  line-height:1;
}
.comment-example[open]>summary{
  border-bottom:1px solid var(--border-blue);
}
.comment-example[open]>summary::after{content:"\2212"}
.comment-step .example{
  padding:12px 14px;
  font-size:0.9375rem;
  line-height:1.45;
  color:var(--ink);
}

/* The comment/document viewer (body.comment-slide-page, set at runtime by
   pdf-slide-links.js) widens past the standard 760px reading column to 1120px so
   scanned PDFs, emails, and map images have room. Scoped to body + main.page-standard
   so it outranks the older .page-standard > .section > .wrap width rules on
   specificity; index/listing pages keep the standard 760px column. */
body.comment-slide-page main.page-standard > .hero > .wrap,
body.comment-slide-page main.page-standard > .section > .wrap{
  width:min(100% - 32px, 1120px);
  max-width:1120px;
}

/* 2026-07-13: Written Comments should read like Questions - flat,
   dot-separated topic labels instead of bordered pill chips (the chips
   are what made the tag row feel like a cramped horizontal strip on
   narrow screens), plus a little fluid sizing on the name/org line so
   the card has the same "grows and shrinks with the viewport" feel as a
   saying-card instead of one fixed size. */
.comment-card .tagrow{
  gap:0;
  background:none;
}
.comment-card .comment-source-tag,
.comment-card .comment-topic-tag{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:0.8125rem;
  line-height:1.15;
  font-weight:750;
  cursor:default;
}
.comment-card .comment-source-tag:not(:last-child)::after,
.comment-card .comment-topic-tag:not(:last-child)::after{
  content:"\00b7";
  display:inline-block;
  margin:0 6px;
  color:var(--faint);
  font-weight:400;
}
.written-comments-page .comment-title{
  font-size:clamp(1.0625rem, 4.6vw, 1.1875rem);
  line-height:1.25;
}
@media(min-width:900px){
  body.comment-slide-page .pdf-title-card,
  body.comment-slide-page .slide-viewer{
    width:min(1080px, calc(100vw - 64px));
  }
}
body.comment-slide-page .slide-viewer{
  max-width:1080px;
}
/* Widen the comment/document viewer's title card to match the wider slide stage
   above. Scoped to body.comment-slide-page so it outranks the base .pdf-title-card
   width. */
body.comment-slide-page .pdf-title-card{
  max-width:1080px;
}

/* 2026-07-13: written-comments card list was overflowing past the page
   edge (visible to the right of the search/filter box above it), and the
   filter pills stopped wrapping at narrow widths. Root cause: .comment-list
   is a CSS grid with a 1fr track, and grid items default to min-width:auto
   (their min-content size) instead of 0 - so a comment-card whose content
   cannot shrink below some width forces the whole 1fr track (and the card)
   wider than the wrap column, spilling past it. .saying-card on
   questions.html already had min-width:0 + overflow-wrap:break-word for
   exactly this reason; comment-card never got the same treatment. Fixing
   that stops the card from forcing page-level horizontal overflow, which
   was almost certainly why the filter pill row above it also stopped
   wrapping at narrow widths. */
.comment-list{
  min-width:0;
}
.comment-card{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
}
.comment-card .comment-title,
.comment-card .comment-topic,
.comment-card .comment-date{
  min-width:0;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* 2026-07-14: the 50%-cap button rule above (2026-07-13) fixed desktop
   full-bleed stretching but never re-added a phone override, so on
   narrow screens (e.g. Records Room's View Comments / View City Summary
   pair) a longer label like "View City Summary" gets squeezed into half
   the row width and wraps to two lines. Stack these full-width again
   below 560px, matching the phone-first single-column pattern used
   everywhere else on the site. */
@media(max-width:640px){
.source-action-row .btn,
.comment-actions .btn,
.comment-actions button,
.records-room-multi-actions .btn,
.buttonrow .btn,
.records-page .btn,
.records-page a.btn,
.records-page .btn.small,
.written-comments-page .comment-actions .btn{
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }
}

/* 2026-07-14: Records Room meeting-transcript entries now carry a
   date + runtime line between the meeting type and its description,
   matching the muted/bold meta-line convention used on the text viewer
   (.viewer-meta) so it reads as metadata, not more description text. */

/* 2026-07-14: filter cleanup on written-comments and questions. The search
   boxes and the Who row are gone (too confusing on phones); topics are the
   one filter. The result count moved up where the search box sat, and got
   big enough that you can watch it change when you tap a pill. */
.comment-count,
.people-result-count{
  margin:6px 0 12px;
  color:var(--ink);
  font-size:1.1875rem;
  font-weight:850;
  text-align:right;
  border-radius:10px;
}
/* Green pulse when the number changes, so tapping a pill visibly does
   something even if the cards below are off screen. */
@keyframes sp2046-count-pulse{
  0%{background:var(--green-soft);transform:scale(1.08);}
  100%{background:transparent;transform:scale(1);}
}
.comment-count.count-changed,
.people-result-count.count-changed{
  animation:sp2046-count-pulse .55s ease-out;
}

/* Glossary terms use dark green text and a matching dotted cue so people
   recognize that they can tap a definition without mistaking it for a
   conventional blue destination link. */
.glossary-term-link{
  color:var(--green);
  font-weight:800;
  text-decoration:none;
  border-bottom:0;
  background-image:radial-gradient(circle, var(--green) 1px, transparent 1.4px);
  background-size:5px 3px;
  background-repeat:repeat-x;
  background-position:0 100%;
  padding-bottom:3px;
}
.glossary-term-link:hover,
.glossary-term-link:focus-visible{
  color:var(--green);
  background-color:var(--green-soft);
}

/* Keep the browser's page-level double-tap zoom off map thumbnails so one tap
   opens the shared lightbox and the lightbox can own its double-tap gesture. */
.map-detail-image{
  touch-action:manipulation;
}
body .explainer-card p,
body .card p,
body .comment-step p,
body .density-row figcaption p{
  color:var(--ink);
}

/* 2026-07-14: centered top navigation. */

/* 2026-07-14: density photos read caption-like. Centered bold text above a
   photo reads as a headline; captions belong below the image, left-aligned,
   smaller and quieter. CSS order flip, so the markup (figcaption first)
   stays put for the zoom overlay, which copies the figcaption. */
.density-row figure figcaption{
  text-align:left;
  padding:12px 14px 10px;
}
body .density-row figcaption h3{
  text-align:left;
  font-size:0.9375rem;
  margin:0 0 3px;
}
body .density-row figcaption p{
  text-align:left;
  font-size:0.875rem;
  line-height:1.45;
  color:var(--muted);
}

/* Home uses the shared page-title and section-heading scale. Text wrapping is
   handled by the readable column rather than a page-specific type size. */

/* 2026-07-14: visible block dividers. The 1px hairline between density
   photos and under the map headers disappeared on phones. Dividers get
   real weight, and the map header's own border-bottom retires so the hr
   after the note is the one line. */
.density-divider{
  border:0;
  border-top:1px solid var(--border-blue);
  margin:16px -22px;
}
.map-card-header .density-divider{
  margin:12px -20px 2px;
}

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:10000;
  padding:10px 14px;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font-weight:800;
  transform:translateY(-160%);
}
.skip-link:focus{
  transform:translateY(0);
}

/* Keep the long Questions list inexpensive until cards approach the viewport. */
.saying-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}

/* Footer glossary terms use the same green definition cue as reading content. */
.footer a.glossary-term-link,
.footer a.glossary-term-link:hover,
.footer a.glossary-term-link:focus{
  color:var(--green);
  text-decoration:none;
  border-bottom:0;
  background-image:radial-gradient(circle, var(--green) 1.15px, transparent 1.55px);
}

/* Shared door shown before a visitor follows an external website link. */
.external-door-backdrop{
  position:fixed;
  inset:0;
  z-index:10020;
  background:var(--external-door-scrim);
}
.external-door{
  position:fixed;
  z-index:10021;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(390px,calc(100vw - 32px));
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  box-shadow:var(--external-door-shadow);
}
.external-door h2{margin:0 0 8px;font-size:1.375rem;line-height:1.15;}
.external-door p{margin:0;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;}
.external-door-domain{font-weight:700;color:var(--muted);}
.external-door .external-door-return{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:0.875rem;color:var(--muted);}
.external-door-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.external-door-actions .btn{width:100%;min-height:46px;}
@media(max-width:420px){.external-door-actions{grid-template-columns:1fr;}}
/* Sticky primary navigation: one compact, horizontally scrollable row on phones. */

/* Editorial reading system: narrative pages read like articles, while controls stay sans-serif. */
.home-refocus-page .home-beat > .wrap{
  max-width:760px;
}
.home-refocus-page .home-beat h2{
  max-width:var(--measure);
  text-wrap:balance;
}
.home-refocus-page .home-beat > .wrap > p{
  margin:0 0 18px;
  color:var(--ink);
  font-size:clamp(1.125rem,2.1vw,1.25rem);
  line-height:1.58;
  letter-spacing:0;
  text-wrap:pretty;
}
.home-refocus-page .home-beat > .wrap > p:last-of-type{
  margin-bottom:0;
}
@media(max-width:640px){
  .home-refocus-page .home-beat > .wrap{padding-left:18px;padding-right:18px;}
  .home-refocus-page .home-beat{padding-top:38px;padding-bottom:40px;}
  .home-refocus-page .home-beat > .wrap > p{font-size:1.125rem;line-height:1.6;}
}
/* Homepage actions are one modest step larger than compact navigation. */
@media(max-width:640px){
  .home-mobile-page a.btn,
  .home-mobile-page button.btn{
    min-height:46px;
    font-size:1rem;
    padding:10px 15px;
  }
  .home-mobile-page a.btn.small,
  .home-mobile-page button.btn.small{
    min-height:42px;
    font-size:0.9375rem;
    padding:9px 13px;
  }
}
/* Video viewer: editorial context above the player and the record summary below it. */
.video-title-row{display:block}
.video-page .viewer-head{max-width:900px}
.video-title-copy{min-width:0}
body.video-page .video-title-row h1{margin:0 0 5px;font-size:clamp(1.875rem,4vw,2.75rem)}
.video-save-slot .research-save{
  background:var(--paper);
  border-color:var(--border-blue);
  color:var(--brand);
  -webkit-text-fill-color:var(--brand);
}
.video-save-slot .research-save:hover{background:var(--lav);color:var(--brand-dark)}
.video-save-slot .research-save[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green-active);color:var(--green);-webkit-text-fill-color:var(--green)}
.video-page .viewer-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:0;
  color:var(--muted);
  font-size:0.9375rem;
  line-height:1.4;
}
.video-page .video-description{
  
  margin:10px 0 0;
  color:var(--ink);
  font-size:clamp(1.0625rem,1.8vw,1.1875rem);
  line-height:1.48;
  text-wrap:pretty;
}
.video-page .video-box{max-width:900px;margin:0 auto;}
.video-page .video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:14px;
  background:var(--ink);
  box-shadow:var(--video-frame-shadow);
}
.video-page .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-page .video-loading-status{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  background:var(--video-loading-scrim);
  color:var(--paper);
  font:800 1.0625rem/1.4 var(--font-ui);
  letter-spacing:.01em;
  pointer-events:auto;
  cursor:progress;
}
.video-page .video-loading-status[hidden]{display:none;}
.video-page .video-loading-spinner{
  width:22px;
  height:22px;
  border:3px solid var(--video-spinner-line);
  border-top-color:var(--paper);
  border-radius:50%;
  animation:video-loading-spin .8s linear infinite;
}
@keyframes video-loading-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .video-page .video-loading-spinner{animation:none;border-color:var(--paper);}
}
.video-page .video-player-section{padding:8px 0 12px}
.video-page .video-current-section{padding:14px 0 18px;scroll-margin-top:120px;border-top:1px solid var(--line)}
.land-use-swatch{display:block;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;box-shadow:inset 0 0 0 1px var(--paper)}
.land-use-swatch.open-space{background:var(--flum-open-space)}
.land-use-swatch.agriculture{background:var(--flum-agriculture)}
.land-use-swatch.residential-low{background:var(--flum-residential-low)}
.land-use-swatch.residential-high{background:var(--flum-residential-high)}
.land-use-swatch.institutional{background:var(--flum-institutional)}
.land-use-swatch.commercial{background:var(--flum-commercial)}
.land-use-swatch.mixed-use{background:var(--flum-mixed-use)}
.land-use-swatch.downtown{background:var(--flum-downtown)}
.land-use-swatch.industrial{background:var(--flum-industrial)}
.land-use-label{display:flex;align-items:center;gap:8px;min-width:0}
.land-use-label .land-use-swatch{flex:0 0 auto;width:20px;height:20px;border-radius:5px}
.density-row figcaption h3.land-use-label{display:flex}
.density-row figcaption .land-use-label~p{margin-left:28px}
.density-row figcaption p+p{margin-top:8px}

/* Briefly marks a Before / If approved map change on both map surfaces. */
.future-map-page .map-image-stage::after{position:absolute;z-index:2;inset:0;content:"";background:var(--focus-ring);opacity:0;pointer-events:none}
.future-map-page .map-image-stage.is-map-switching::after{animation:map-change-highlight .65s ease-out}
@keyframes map-change-highlight{0%{opacity:.28}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.future-map-page .map-image-stage.is-map-switching::after{animation:none}}

/* Shared interface contract: navigation, controls, record cards, and image enlargement. */
.btn,button.btn{width:auto;min-height:var(--control-height);padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--brand);border-radius:14px;background:var(--brand);color:var(--paper);box-shadow:none;font-family:var(--font-ui);font-size:0.9375rem;font-weight:850;line-height:1.2;text-align:center;text-decoration:none}.btn[hidden]{display:none}
.btn:hover,.btn:active{background:var(--brand-dark);color:var(--paper);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.btn.secondary{background:var(--lav);color:var(--brand-dark);border-color:var(--brand)}
.btn.secondary:hover,.btn.secondary:hover{background:var(--lav-2);border-color:var(--brand-dark)}
.btn.secondary:active{background:var(--line-lav);color:var(--brand-dark)}
.btn.light{background:var(--paper);color:var(--brand);border-color:var(--paper)}
.btn.light.secondary{background:transparent;color:var(--paper);border-color:var(--light-control-line)}
.btn.light.secondary:hover{background:var(--light-control-hover);color:var(--paper)}
.btn.small{min-height:var(--control-small-height);padding:8px 12px;font-size:0.875rem}
.buttonrow,.source-action-row,.library-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:14px}
.quote-companion-action{padding-right:18px}
.buttonrow.tight{margin-top:14px}
.source-action-row .btn.small,.library-actions .btn{min-height:42px;width:auto;white-space:normal}
.explainer-card{min-width:0;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow)}
.explainer-card h3{margin-bottom:10px}
.explainer-card p{margin:0 0 10px;color:var(--ink);font-size:1.0625rem;line-height:1.58}
.explainer-card p:last-child{margin-bottom:0}
.explainer-card .source-action-row{justify-content:flex-end}
.library-item,.records-room-doc{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px var(--shadow-tint)}
.library-item strong,.records-room-doc strong{font-size:1.125rem;line-height:1.24}
.library-item span,.records-room-doc span{max-width:100%;color:var(--muted);font-size:1.0625rem;line-height:1.55}
.library-item .meeting-meta{color:var(--muted);font-size:1rem;font-weight:750}
.enlargeable-image{touch-action:manipulation}
@media (hover:hover) and (pointer:fine){.image-lightbox-stage{cursor:grab}}
@media(max-width:640px){.explainer-card{padding:18px}.density-divider{margin:16px -18px}.image-lightbox{padding-left:8px;padding-right:8px}}
/* 2026-07-17: editorial structure for preserved record text */
body.text-page .comment-line.bullet{
  padding-left:1.4rem;
  text-indent:-1.4rem;
}
body.text-page .comment-heading{
  margin:1.45rem 0 .55rem;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:1.08em;
  font-weight:800;
  line-height:1.28;
}
body.text-page .comment-pdf-page{
  margin:1.5rem 0 .55rem;
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:.78em;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.video-library-count{margin:0 0 12px;color:var(--muted);font-size:1rem;font-weight:750;line-height:1.35;text-align:right}
.video-library-page .video-search-panel #video-quote-search-form>label{margin-top:0}
.video-record-list{gap:20px}
.video-recording-list{gap:20px}
.video-recording-list .video-record-card{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:22px 24px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--soft-shadow)}
.video-record-card{grid-template-columns:minmax(0,1fr);align-items:start}
.video-record-card>.comment-date{margin:0 0 6px;font-size:var(--text-small);line-height:1.3}
.video-record-title{margin:0 0 8px;color:var(--ink);font-family:var(--font-title);font-size:var(--text-h3);line-height:1.22}
.video-record-card .video-result-meta{margin-bottom:7px}
.video-record-summary{margin:0;color:var(--muted);font-size:var(--text-small);line-height:1.52}
.video-record-actions{align-self:auto;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.video-record-actions .btn:first-child{border-color:var(--brand);background:var(--brand);color:var(--paper)}
.video-record-actions .btn:first-child:hover{border-color:var(--brand-dark);background:var(--brand-dark);color:var(--paper)}
.video-record-actions .btn.secondary{border-color:var(--border-blue);background:var(--lav);color:var(--brand-dark)}
/* The doorway is part of the recording card, not another card inside it. */
.video-doorway{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.video-doorway-title{margin:0 0 7px;color:var(--ink);font-family:var(--font-ui);font-size:var(--text-small);font-weight:850;line-height:1.32}
.video-doorway .video-result-meta{margin-bottom:0}
.video-doorway .video-quote-excerpt{margin:14px 0 0;padding:4px 0 4px 18px;border-left:4px solid var(--brand);background:transparent}
.video-doorway .video-record-summary{margin-top:12px;color:var(--muted)}
.video-search-section{padding:34px 0}
.video-search-panel{max-width:900px;margin:0 auto;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.video-search-panel h2{margin-bottom:8px}
.video-search-panel>p{color:var(--muted);font-size:1.0625rem;line-height:1.5}
#video-quote-search-form>label,#comment-search-form>label,#document-search-form>label{display:block;margin:18px 0 7px;color:var(--ink);font-size:0.9375rem;font-weight:800}
.video-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
.video-search-combobox{position:relative;min-width:0}
#video-quote-search-input,#comment-search-input,#document-search-input{width:100%;min-height:48px;padding:10px 13px;border:1px solid var(--border-blue);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;font-size:1.0625rem;line-height:1.35}
#video-quote-search-input::placeholder,#comment-search-input::placeholder,#document-search-input::placeholder{color:var(--muted);opacity:1}
#video-quote-search-input:focus,#comment-search-input:focus,#document-search-input:focus{outline:3px solid var(--focus-ring);outline-offset:2px;border-color:var(--brand)}
.video-search-row>.btn{min-height:48px;max-width:none;margin:0;white-space:nowrap}
.video-search-suggestions{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:330px;margin:0;padding:5px;overflow-y:auto;border:1px solid var(--border-blue);border-radius:14px;background:var(--paper);box-shadow:var(--shadow);list-style:none}
.video-search-suggestions[hidden]{display:none}
.video-search-suggestion{min-height:46px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:10px;color:var(--ink);cursor:pointer}
.video-search-suggestion:hover,.video-search-suggestion[aria-selected="true"]{background:var(--blue-soft)}
.video-search-suggestion-label{font-size:1rem;font-weight:800;line-height:1.3}
.video-search-suggestion-type{flex:0 0 auto;color:var(--muted);font-size:0.875rem;font-weight:750;line-height:1.2}
.video-search-noscript{margin:12px 0 0;color:var(--muted);font-size:0.9375rem}
.video-search-results-section[hidden]{display:none}
.video-search-results-section{padding:38px 0;scroll-margin-top:120px}
.video-search-results-head{max-width:900px;margin:0 auto 14px;display:flex;align-items:end;justify-content:space-between;gap:14px}
.video-search-results-head h2{margin-bottom:5px}
.video-search-results-head p{margin:0;color:var(--muted);font-size:1rem}
.video-search-results-head>.btn{flex:0 0 auto;margin:0}
.video-search-results{max-width:900px;margin:0 auto;display:grid;gap:10px}
.video-quote-result{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.video-quote-result-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.video-quote-result-top .video-quote-result-meta{justify-content:flex-end}
.video-quote-result h3{margin:0 0 6px;font-size:1.3125rem;line-height:1.25}
.video-quote-result-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:0.875rem;font-weight:750;line-height:1.35}
.video-quote-context{margin-bottom:10px}
.video-quote-excerpt{margin:0 0 10px;padding:12px 15px;font-size:1.125rem;line-height:1.5}
.video-quote-excerpt p{margin:0}
.video-quote-source{margin:0;color:var(--muted);font-size:0.875rem;font-weight:700;line-height:1.4}
.video-quote-result-actions{display:flex;justify-content:flex-end;margin-top:12px}
.video-quote-result-actions .btn{margin:0}
.video-association-result>.video-kind{margin-bottom:10px}
.video-association-explanation{margin:10px 0 0;color:var(--muted);font-size:1.0625rem;line-height:1.5}
.comment-search-result .video-association-explanation{margin:0 0 10px}
.video-search-empty{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.video-search-empty strong{display:block;margin-bottom:5px;font-size:1.25rem}
.video-search-empty p{margin:0;color:var(--muted)}
.video-library-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}
.video-library-heading h2,.video-library-heading .video-library-count{margin:0}
.video-moment-headline{max-width:900px;margin:12px auto 0}
.video-moment-headline .video-current-moment{margin:0}
.video-current-moment{max-width:900px;margin:0 auto}
.video-moment-description{margin:10px 0 0;color:var(--ink);font:400 1rem/1.55 var(--font-ui)}
.video-moment-description[hidden]{display:none}
.video-current-section .video-quote-excerpt{margin:12px 0 0}
.video-current-section .video-quote-excerpt[hidden]{display:none}
/* The answer voice in a two-quote Q&A moment: same box, green accent. */
.video-answer-excerpt{border-left-color:var(--green);background:var(--green-soft)}
.video-clip-replay{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;max-width:900px;margin:16px auto 0;padding:12px 14px;border:1px solid var(--border-blue);border-radius:12px;background:var(--lav)}
.video-clip-replay[hidden]{display:none}
.video-clip-replay p{margin:0;color:var(--brand-dark);font:800 0.9375rem/1.4 var(--font-ui)}
/* Who is talking, flush left; countdown and Replay stay on the right. The
   selectors carry .video-clip-replay so they outrank the shared p rule above. */
.video-clip-replay .video-clip-speaker{margin:0 auto 0 0;color:var(--ink)}
.video-clip-replay .video-clip-speaker:empty{display:none}
/* Bare tabular-digit countdown; the ticking explains itself, and the freed
   width belongs to the speaker label. At the pause it simply empties: the
   paused player and the Replay button say everything the row needs to. */
.video-clip-replay .video-clip-status{min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums;font-size:1.1875rem}
.video-clip-replay .video-clip-status:empty{display:none}
/* Question/Answer prefixes wear the voice colors the quote blocks established:
   question blue, answer green. Names stay ink. */
.video-clip-replay .clip-voice-question{color:var(--brand-dark)}
.video-clip-replay .clip-voice-answer{color:var(--green)}
.video-clip-replay .btn{margin:0}
.video-current-moment .video-result-meta{margin-bottom:7px}
.video-current-moment h2{margin:0;font-size:clamp(1.25rem,2.2vw,1.5625rem);line-height:1.2}
.research-empty>strong{display:block;margin-bottom:6px;font-size:1.25rem}
.research-empty-actions{display:flex;justify-content:flex-end;margin-top:14px}
.viewer-return-action{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}
/* breadcrumb.js relocates the Go Back link into the sticky row, leaving this
   wrapper empty; without this rule its 14px margin survives as a phantom gap
   between the record bar and the record on all three viewers. */
.viewer-return-action:empty{display:none}
.viewer-return-action .btn{width:auto}
.records-background-intro{margin:0 0 24px;color:var(--muted);font-size:1.0625rem;line-height:1.58}
.written-comments-page #comments-by-date h2{margin:0 0 12px}

.video-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 9px;color:var(--muted);font-size:1rem;font-weight:700;line-height:1.35}
/* Card labels are metadata, not controls: no pill, no background, no border.
   The speaker or type label leads the meta line at full meta size, dark ink
   and heavy against the muted facts, so a name stands out through weight and
   contrast rather than through anything shaped like a control. */
.video-kind{display:inline-block;color:var(--ink);font-weight:850}
.video-kind+.video-facts::before{content:"\00b7\20"}
.video-facts{color:var(--muted);font-weight:700}
@media(max-width:900px){
 .video-record-card{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
 .video-search-section{padding:26px 0}
 .video-search-panel{padding:18px}
 .video-search-row{grid-template-columns:1fr}
 .video-search-row>.btn{width:100%}
 .video-search-results-section{padding:30px 0}
 .video-search-results-head{align-items:flex-start}
 .video-quote-result{padding:16px}
 .video-quote-result-top{align-items:flex-start;flex-direction:column}
 .video-quote-result-top .video-quote-result-meta{justify-content:flex-start}
 .video-quote-excerpt{font-size:1.0625rem}
 .video-library-heading{align-items:flex-start}
 .video-library-count{margin-bottom:10px}
 .video-record-summary{font-size:1.0625rem}
 .video-recording-list .video-record-card{padding:18px}
 .video-doorway{padding-top:15px}
 .video-record-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .video-record-actions .btn.small{width:100%;min-width:0;max-width:none}
}
@media(max-width:420px){
 .video-record-actions{grid-template-columns:minmax(0,1fr)}
}
/* Record-card content is an editorial stack, never a run-in sentence. */
.library-item > div:first-child > strong,
.records-room-doc > div:first-child > strong{
  display:block;
  margin:0 0 6px;
}
.library-item > div:first-child > span,
.records-room-doc > div:first-child > span{
  display:block;
}
.library-item > div:first-child > .meeting-meta,
.records-room-doc > div:first-child > .meeting-meta{
  margin:0 0 5px;
}
/* Video source disclosures. */
.video-source-note{max-width:50rem;margin:14px 0 0;padding:11px 12px;background:var(--mark-bg);border:1px solid var(--mark-line);border-radius:10px;color:var(--mark-text);font-size:0.875rem;font-weight:700;line-height:1.45}

.video-secondary-references{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.video-secondary-reference{display:inline-flex;align-items:center;color:var(--brand);font-size:0.875rem;font-weight:850;line-height:1.35}
@media(max-width:640px){
  body.video-page .video-title-row h1{font-size:1.75rem}
  .video-page .video-description{margin-top:8px;font-size:1.0625rem;line-height:1.46}
}
@media(max-width:360px){body.video-page .video-title-row h1{font-size:1.625rem}}
.image-lightbox[hidden]{display:none}
.image-lightbox{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  inset:0;
  z-index:10020;
  display:-webkit-flex;
  display:flex;
  display:grid;
  -webkit-align-items:stretch;
  align-items:stretch;
  -webkit-justify-content:center;
  justify-content:center;
  grid-template-rows:minmax(0,1fr);
  place-items:stretch center;
  padding:0 0 10px;
  padding:0 0 max(10px,env(safe-area-inset-bottom));
  background:var(--lightbox-scrim);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  color:var(--paper);
  opacity:0;
  transition:opacity .16s ease;
}
.image-lightbox.is-open{opacity:1}
.image-lightbox::after{
  content:"";
  position:fixed;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:70px;
  height:calc(70px + env(safe-area-inset-bottom));
  pointer-events:none;
  border-top:1px solid var(--lightbox-line);
  background:var(--lightbox-action-bar);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:var(--lightbox-action-shadow);
}
.image-lightbox-open{overflow:hidden}
.image-lightbox-stage{
  position:relative;
  inset:auto;
  grid-row:1;
  width:100vw;
  height:100%;
  min-height:0;
  overflow:auto;
  display:-webkit-flex;
  display:flex;
  display:grid;
  -webkit-flex:1 1 auto;
  flex:1 1 auto;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  place-items:center;
  padding:0;
  touch-action:pan-x pan-y pinch-zoom;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.image-lightbox-stage::-webkit-scrollbar{display:none}
.image-lightbox-stage img{
  display:block;
  width:auto;
  min-width:0;
  max-width:96vw;
  max-width:min(96vw,1800px);
  max-height:calc(100vh - 76px);
  max-height:calc(100dvh - 76px);
  height:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:var(--lightbox-image-shadow);
  transform:scale(.96);
  opacity:.75;
  transition:transform .18s ease,opacity .16s ease;
  touch-action:pan-x pan-y pinch-zoom;
}
.image-lightbox.is-zoomed .image-lightbox-stage,
.image-lightbox.is-zoomed .image-lightbox-stage img{
  touch-action:none;
}
.image-lightbox.is-open .image-lightbox-stage img{transform:none;opacity:1}
.image-lightbox-close{
  position:fixed;
  z-index:2;
  left:50%;
  bottom:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  justify-self:auto;
  transform:translateX(-50%);
  width:auto;
  min-width:104px;
  height:46px;
  min-height:46px;
  margin:0;
  padding:10px 22px;
  display:-webkit-flex;
  display:flex;
  display:grid;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  place-items:center;
  border:1px solid var(--lightbox-control-border);
  border-radius:999px;
  background:var(--brand);
  color:var(--paper);
  font:800 1rem/1 var(--font-ui);
  box-shadow:var(--lightbox-control-shadow);
}
.image-lightbox-close:hover,
.image-lightbox-close:focus-visible{
  background:var(--brand-dark);
  border-color:var(--lightbox-control-border-hover);
}
@media(max-width:640px){
  .image-lightbox-close{
    left:auto;
    right:12px;
    right:max(12px,env(safe-area-inset-right));
    transform:none;
  }
}
@media (hover:hover) and (pointer:fine){
  .density-row figure{cursor:default}
  .enlargeable-image{cursor:zoom-in}
  .image-lightbox-stage,.image-lightbox-stage img{cursor:grab}
  .image-lightbox-stage.is-panning,.image-lightbox-stage.is-panning img{cursor:grabbing}
  .image-lightbox-close{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){.image-lightbox,.image-lightbox-stage img{transition:none}.comment-count.count-changed,.people-result-count.count-changed{animation:none}}
/* Images open fitted inside the full-screen stage. A phone double-tap enlarges
   the image in place; drag-to-pan is enabled only while that zoom is active. */
.image-lightbox-canvas{
  min-width:100%;
  min-height:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
@media(max-width:760px),(hover:none),(pointer:coarse){
  .image-lightbox-stage{padding-left:0;padding-right:0}
  .image-lightbox-stage img{cursor:default}
}
/* Compact phone navigation. */
.nav-label-short{display:none}

/* Saved research: shared presentation; JavaScript owns state and markup only. */
.research-save{white-space:nowrap}
.btn.small.research-save{font-size:0.8125rem;padding:7px 13px;min-height:38px;min-width:max-content;flex:0 0 auto}
.video-save-actions{margin-top:14px}
.research-save[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.research-nav[hidden]{display:none}
.research-guide{max-width:820px;margin:0 auto 18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.research-guide h2{margin:0 0 8px;font-size:1.25rem}
.research-guide h3{margin:14px 0 6px;font-size:1rem}
.research-guide p{margin:0 0 8px}
.research-guide ul{margin:0;padding-left:20px}
.key-page-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
@keyframes research-soft-mute{from{opacity:1}to{opacity:.5}}
.research-item.is-pending-remove{background:var(--paper)}
.research-item.is-pending-remove>.research-result-meta,
.research-item.is-pending-remove>h2,
.research-item.is-pending-remove>p{animation:research-soft-mute .2s ease-out forwards;color:var(--muted)}
.research-item.is-pending-remove .research-item-actions a{pointer-events:none;opacity:.38}
.research-removing-status{align-self:center;color:var(--muted);font-size:0.875rem;font-weight:750;white-space:nowrap}
.research-remove-control{min-width:84px}
.research-item.is-pending-remove [data-undo]{opacity:1;background:var(--paper);color:var(--brand);border-color:var(--border-blue)}
.research-list{display:grid;gap:14px}
.research-item{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--research-item-shadow)}
.research-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;color:var(--muted);font-size:0.9375rem;font-weight:700}
.research-facts{color:var(--muted);font-weight:650}
.research-kind{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--brand);font-size:0.875rem;letter-spacing:.02em;text-transform:uppercase}
.research-item h2{margin:0 0 8px;font-size:1.375rem;line-height:1.2}
.research-item p{margin:0;color:var(--muted);line-height:1.5}
.research-item-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.research-remove-actions{display:flex;align-items:center;gap:8px}
.research-open-control{margin-left:auto}
.research-empty-top{margin-top:16px}.saved-research-section{border-top:0}.research-page-guide,.research-guide-rule{display:none}body.research-has-saves .research-page-guide{display:block}body.research-has-saves .research-guide-rule{display:block}body.research-has-saves .hero{padding-bottom:0}body.research-has-saves .saved-research-section{padding-top:0}
.category-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;max-width:44rem;margin:16px 0 0;padding-left:22px}
.category-index li{padding-left:2px;color:var(--muted)}
.category-index a{font-weight:800}
@media(max-width:640px){.category-index{grid-template-columns:1fr}}
#terms,#housing-builders,#real-estate-consultants,#regional-transportation,#state-agencies,#advocacy,#neighborhood-community{scroll-margin-top:84px}
.research-empty{padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);color:var(--ink)}
.research-page-guide>p+p{margin-top:12px}
body.text-page main.page-standard > .text-key-pages-section{padding:18px 0}
.text-key-page-disclosure{display:block;max-width:900px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.text-key-page-disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 2px;color:var(--brand-dark);font:800 1rem/1.3 var(--font-ui);cursor:pointer;list-style:none}
.text-key-page-disclosure summary::-webkit-details-marker{display:none}
.text-key-page-disclosure summary::after{content:"+";flex:0 0 auto;color:var(--brand);font-size:1.5rem;font-weight:500;line-height:1}
.text-key-page-disclosure[open] summary::after{content:"\2212"}
.text-key-page-list{display:grid;padding:0 0 10px}
.text-key-page-list button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:800 0.9375rem/1.35 var(--font-ui);text-align:left;cursor:pointer}
.text-key-page-list button span{color:var(--muted);font-weight:650}
.text-key-page-list button:hover{color:var(--brand-dark)}
.text-key-page-list button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .research-item.is-pending-remove>.research-result-meta,
  .research-item.is-pending-remove>h2,
  .research-item.is-pending-remove>p{animation:none;opacity:.5}
}.research-transfer-tools{margin-top:16px}
.research-transfer-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
.research-transfer-status{margin:16px 0 0;font-size:0.875rem;font-weight:700}
.research-transfer-status:empty{display:none}
.research-share-result{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px;padding:16px 20px;border:1px solid var(--border-blue);border-radius:10px;background:var(--paper)}
.research-share-result[hidden]{display:none}
.research-share-result .btn{order:1;flex:0 0 auto;white-space:nowrap}
.research-share-result .research-share-url{order:2;flex:1 1 100%;min-width:0;overflow-wrap:anywhere;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--muted);font-size:0.875rem;line-height:1.4;cursor:pointer;-webkit-user-select:all;user-select:all}
.research-share-result .research-share-msg{order:3;flex:1 1 100%;margin:0;text-align:left;font-size:0.875rem;font-weight:700;color:var(--ink)}
.research-share-result .btn.is-complete ~ .research-share-msg{color:var(--green)}
@media(max-width:520px){.research-share-result .btn{order:2;width:100%}.research-share-result .research-share-url{order:1;text-align:left}}

.compact-index-section{padding-top:22px}
.compact-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;margin:0 0 12px}
.compact-filter-bar .comment-count,
.compact-filter-bar .people-result-count{flex:0 0 auto;margin:0;font-size:1.0625rem;text-align:left;white-space:nowrap}
.topic-filter-select{display:block;min-width:0;margin:0}
.compact-filter-bar .topic-filter-select{flex:0 1 300px}
.topic-filter-select select{width:100%;min-height:44px;padding:8px 40px 8px 12px;border:1px solid var(--border-blue);border-radius:10px;background:var(--paper);color:var(--ink);font:700 1rem/1.3 var(--font-ui)}
.topic-filter-select select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.comments-counts-details{margin:0 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.comments-counts-details>summary{padding:11px 2px;color:var(--muted);font-size:0.9375rem;font-weight:800;line-height:1.4;cursor:pointer}
.comments-counts-body{padding:2px 0 14px}
.comments-counts-body p{margin:0;color:var(--ink);font-size:1rem;line-height:1.55}
.comments-counts-body .buttonrow{margin-top:12px}
.questions-group-heading{margin:0 0 14px;font-size:clamp(1.1875rem,2.4vw,1.4375rem);line-height:1.25;color:var(--ink)}
.questions-question-group+.questions-question-group{margin-top:44px;padding-top:38px;position:relative}
.questions-question-group+.questions-question-group::before{content:"";position:absolute;top:0;left:50%;width:100vw;border-top:1px solid var(--line);transform:translateX(-50%)}
main.saying-page{overflow-x:clip}
.questions-more{
  max-width:760px;
  margin:36px auto 0;
}
.questions-more>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:46px;
  padding:13px 16px;
  border:1px solid var(--border-blue);
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:1.0625rem;
  font-weight:800;
  cursor:pointer;
}
.questions-more>summary span{color:var(--muted);font-size:0.9375rem;font-weight:700}
.questions-more[open]>summary{margin-bottom:20px}
.saying-correction{
  margin:14px 0;
  padding:12px 14px;
  border-left:4px solid var(--mark-line);
  background:var(--green-soft);
  color:var(--ink);
  font-size:0.9375rem;
  line-height:1.55;
}
@media(max-width:640px){
  .compact-index-section{padding-top:18px}
  .compact-filter-bar{gap:10px}
  .compact-filter-bar .comment-count,
  .compact-filter-bar .people-result-count{font-size:0.9375rem}
  .compact-filter-bar .topic-filter-select{flex-basis:190px}
  .questions-question-group+.questions-question-group{margin-top:34px;padding-top:30px}
  .questions-more{margin-top:30px}
}

.homepage-action-row-compact{margin-top:10px}
@media(max-width:640px){
  .action-row-right .btn,.homepage-action-row .btn{width:100%;max-width:none}
}

/* Shared preview access shell. */
/* The card sits above true center: optical center reads as centered, and it
   leaves the weight of the gradient below the copy. Reserving space at the
   bottom lifts the centered card by half that amount. Short viewports drop
   the offset so the card cannot ride off the top edge. */
body.preview-access-page{min-height:100vh;display:grid;grid-template-rows:1fr auto;padding-bottom:20vh;background:radial-gradient(circle at top left,var(--paper) 0,var(--bg) 45%,var(--blue-soft) 100%)}
@media(max-height:640px){body.preview-access-page{padding-bottom:0}}
.preview-card{align-self:center;justify-self:center;width:min(580px,calc(100% - 40px));margin:24px;padding:clamp(24px,6vw,40px);border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--preview-card-shadow)}
.preview-card h1{margin:0 0 14px;font-size:clamp(1.75rem,7vw,2.4375rem);line-height:1.08}
.preview-card p{margin:0 0 14px;color:var(--muted);font-size:1.0625rem;line-height:1.58}
.preview-enter{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:22px;padding:13px 18px;border:1px solid var(--brand);border-radius:14px;background:var(--brand);color:var(--paper);font-family:var(--font-ui);font-size:1rem;font-weight:850;text-decoration:none}
.preview-card .preview-enter:hover,.preview-card .preview-enter:active{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--paper);text-decoration:none}
.preview-enter:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.hero .page-guide{
  max-width:100%;
  margin-top:16px;
  padding:20px 22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
  color:var(--ink);
}
.hero .page-guide p{margin:0;color:var(--ink);font-size:1.0625rem;line-height:1.55;}
.section .page-guide{
  max-width:var(--page-max);
  margin:0 auto 34px;
  padding:20px 22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
  color:var(--ink);
}
.section .page-guide > p{margin:0;color:var(--ink);font-size:1.0625rem;line-height:1.55}
@media(max-width:640px){
  .hero .page-guide{margin-top:12px;padding:18px;}
  .section .page-guide{margin-bottom:28px;padding:18px;}
}
/* Raised navigation on a lavender frame; the current page presses into the bar. */
.topbar{position:sticky;top:0;z-index:1000;background:var(--topbar-surface);border-bottom:1px solid var(--line-lav);box-shadow:var(--topbar-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.topbar .wrap{width:min(100% - 32px,720px);max-width:720px;min-height:68px;margin-inline:auto;padding:11px 0 13px;display:flex;align-items:center;justify-content:center}
.nav{width:100%;padding:3px 0 8px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{min-height:42px;padding:8px 11px;display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;border:1px solid var(--line-lav);border-radius:14px;background:var(--paper);color:var(--ink);font-size:0.875rem;font-weight:760;line-height:1.1;text-align:center;text-decoration:none;box-shadow:var(--nav-shadow);transform:translateY(-1px);transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease}
.nav a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.nav a:hover:not(.nav-action):not(.active){border-color:var(--border-blue);background:var(--paper);color:var(--brand-dark);box-shadow:var(--nav-hover-shadow);transform:translateY(-2px)}
.nav a:active:not(.active){background:var(--lav);box-shadow:var(--nav-press-shadow);transform:translateY(4px)}
.nav a.active{background:var(--line);border-color:var(--border-blue);color:var(--brand-dark);font-weight:850;box-shadow:var(--nav-active-shadow);transform:translateY(4px)}
.nav a.nav-action{background:var(--brand);border-color:var(--brand);color:var(--paper);box-shadow:var(--nav-action-shadow);transform:translateY(-1px)}
.nav a.nav-action:hover:not(.active){background:var(--brand-dark);border-color:var(--brand-dark);color:var(--paper);box-shadow:var(--nav-action-hover-shadow);transform:translateY(-2px)}
.nav a.nav-action:active:not(.active),.nav a.nav-action.active{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--paper);box-shadow:var(--nav-action-press-shadow);transform:translateY(4px)}
/* Canonical page hierarchy. Keep the full visible trail centered; viewer
   scripts substitute shorter labels on phones when space is limited. */
.breadcrumb-shell{position:sticky;top:var(--sticky-topbar-height);z-index:990;background:var(--breadcrumb-surface);border-bottom:1px solid var(--line);box-shadow:var(--breadcrumb-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.breadcrumb-shell .wrap{position:relative;width:min(100% - 32px,var(--max));min-height:60px;margin-inline:auto;display:flex;align-items:center;justify-content:center}
.breadcrumb-main{min-width:0;max-width:calc(100% - 220px);display:flex;align-items:center;justify-content:center;gap:12px}
.breadcrumb-shell .breadcrumb{flex:0 1 auto;min-width:0}
.breadcrumb{padding:10px 0;color:var(--muted);font-size:1rem;line-height:1.35}
.breadcrumb ol{min-width:0;display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.breadcrumb li{display:flex;align-items:center;min-width:0}
.breadcrumb li+li::before{content:"\203a";flex:0 0 auto;margin:0 7px;color:var(--faint);font-size:1rem;font-weight:800}
.breadcrumb li:last-child{flex:1 1 auto;min-width:0}
.breadcrumb a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--faint);text-decoration-thickness:1px;text-underline-offset:3px}
.breadcrumb a:not(.btn):hover{color:var(--brand-dark);text-decoration-color:currentColor}
.breadcrumb a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:3px}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700;white-space:normal;word-break:normal;overflow-wrap:normal}
.breadcrumb-return-slot{flex:0 0 auto;margin-left:auto}
.breadcrumb-return-slot:empty{display:none}
.viewer-breadcrumb-shell .breadcrumb-return-slot{display:flex;align-items:center;margin:0}
.viewer-breadcrumb-shell .breadcrumb-return-slot::before{
  content:"\2039";
  margin-right:7px;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:800;
  line-height:1;
}
.viewer-breadcrumb-shell .breadcrumb-return-slot::after{
  content:"|";
  margin-left:12px;
  color:var(--faint);
  font-size:0.8125rem;
  font-weight:650;
  line-height:1;
}
.viewer-breadcrumb-shell .breadcrumb-return-slot .btn{
  min-height:40px;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  font-size:0.9375rem;
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:var(--faint);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.breadcrumb-viewer-actions{position:absolute;right:0;top:50%;flex:0 0 auto;transform:translateY(-50%)}
.breadcrumb-viewer-actions:empty{display:none}
.breadcrumb-viewer-actions .viewer-return-action{margin:0}
.breadcrumb-viewer-actions .viewer-return-action .btn{min-height:40px}
@media(max-width:640px){
  .topbar .wrap{width:100%;min-height:64px;padding:10px 0 12px}
  .nav{box-sizing:border-box;justify-content:flex-start;gap:5px;padding:3px 10px 8px}
  .nav a{min-height:42px;padding:8px 8px;font-size:0.875rem}
  .breadcrumb-shell .wrap{width:min(100% - 28px,var(--max))}
  .breadcrumb-main{max-width:calc(100% - 150px)}
  .breadcrumb{padding:8px 0;font-size:0.875rem}
  .breadcrumb li a{min-height:44px;display:inline-flex;align-items:center}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-return-slot{width:auto;margin:0;padding:8px 0}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-return-slot .btn{min-height:44px}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-viewer-actions{margin-left:0;padding:8px 0}
  .viewer-breadcrumb-shell.has-viewer-return .viewer-return-action{justify-content:flex-end}
  .viewer-breadcrumb-shell.has-viewer-return .viewer-return-action .btn{min-height:44px}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb{
    position:static;
    flex:1 1 auto;
    width:auto;
    height:auto;
    margin:0;
    padding:8px 0;
    overflow:visible;
    clip:auto;
    white-space:normal;
    border:0;
  }
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-return-slot::after{display:inline}
  .viewer-breadcrumb-shell .breadcrumb li:last-child,
  .viewer-breadcrumb-shell .breadcrumb li:nth-last-child(2)::before{display:none}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb li a{
    min-height:40px;
    max-width:100%;
    padding:6px 0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    text-decoration:underline;
    text-decoration-color:var(--faint);
    text-decoration-thickness:1px;
    text-overflow:clip;
    text-underline-offset:3px;
    white-space:normal;
  }
}
@media(max-width:520px){
  .topbar .wrap{min-height:62px;padding:9px 0 11px}
  .nav{justify-content:center;overflow:visible;gap:3px;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  .nav a{padding:6px 7px}
  .nav-label-full{display:none}
  .nav-label-short{display:inline}
  /* Localhost-only Admin pill hides here so the public navigation can be
     tested at its real phone width. Restored 2026-08-11: the rule was in the
     documented contract but had dropped out of the stylesheet. */
  .nav a.nav-admin{display:none}
}
@media(max-width:420px){
  .viewer-breadcrumb-shell .wrap{min-height:0;flex-wrap:wrap;column-gap:10px;row-gap:0}
  .viewer-breadcrumb-shell .breadcrumb-main{width:100%;max-width:100%;padding:4px 0}
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-viewer-actions:not(:empty){
    position:static;
    flex:1 0 100%;
    width:100%;
    margin-left:0;
    padding:0 0 8px;
    transform:none;
  }
  .viewer-breadcrumb-shell.has-viewer-return .breadcrumb-viewer-actions .viewer-return-action{justify-content:flex-end}
}
@media(max-width:360px){
  .nav{gap:2px;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
  .nav a{padding-inline:5px;font-size:0.875rem}
}
/* Shared PDF/comment slide viewer header and controls. */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.pdf-slide-page .pdf-slide-hero{
  padding:26px 0 22px;
}
.pdf-slide-page .pdf-title-card{
  max-width:900px;
}
.pdf-title-row,
.text-title-row{
  display:block;
}
.pdf-title-copy,
.text-title-copy{
  flex:1 1 auto;
  min-width:0;
}
.pdf-save-slot,
.text-save-slot{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.pdf-save-slot:empty,
.text-save-slot:empty{
  display:none;
}
.pdf-save-slot .btn,
.text-save-slot .btn{
  width:auto;
}
.viewer-tertiary-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
  min-height:48px;
  margin:2px 0 0;
  padding:8px 0;
}
.viewer-tertiary-bar::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  border-top:1px solid var(--line);
  transform:translateX(-50%);
  pointer-events:none;
}
.viewer-tertiary-meta{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:0.875rem;
  font-weight:750;
  line-height:1.35;
}
.viewer-tertiary-actions{
  display:flex;
  flex:0 1 auto;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.viewer-tertiary-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  height:40px;
  min-height:40px;
  padding:7px 11px;
  font-size:0.8125rem;
  line-height:1.15;
  white-space:nowrap;
}
.viewer-tertiary-actions .copy-status{
  flex:0 0 100%;
  min-height:0;
  text-align:right;
}
.video-save-slot{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  margin-top:0;
}
/* A saved item turns green (like the Copy Link "Copied" state) and stops toggling
   off; un-save from My Research instead. */
.research-save.is-complete{background:var(--green-soft);border-color:var(--green-active);color:var(--green);-webkit-text-fill-color:var(--green);}
.research-save.is-complete:disabled{opacity:1;cursor:default;}
.pdf-slide-page #pdf-slides-title{
  max-width:860px;
  margin:0 0 7px;
  font-size:clamp(1.875rem,4.2vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.025em;
}

.pdf-slide-page .pdf-comment-org-line{
  max-width:720px;
  margin:2px 0 0;
  color:var(--muted);
  font-size:clamp(0.875rem,4vw,1.125rem);
  font-weight:750;
  line-height:1.25;
}
.pdf-slide-page .pdf-comment-meta,
.pdf-slide-page .pdf-document-meta{margin:0}
.pdf-slide-page .pdf-comment-meta .meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  color:var(--muted);
  font-size:0.9375rem;
  font-weight:700;
  line-height:1.35;
}
.pdf-slide-page .pdf-document-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:0.875rem;
  font-weight:700;
  line-height:1.35;
}
.pdf-slide-page .pdf-comment-meta .meta-row span,
.pdf-slide-page #pdf-document-meta-text{
  display:inline;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:0.9375rem;
  font-weight:700;
  line-height:1.35;
}
.pdf-slide-page .pdf-comment-meta .meta-row span:empty{
  display:none;
}
.pdf-slide-page .pdf-comment-meta .meta-row span:not(:last-child)::after{
  content:"\00a0\00b7\00a0";
  color:var(--faint);
  font-weight:800;
}
.pdf-slide-page .pdf-nav-block-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.pdf-slide-page .pdf-nav-block-bottom .slide-bottom-nav{
  justify-content:center;
}
.pdf-slide-page .pdf-slide-viewer-section{
  padding-top:12px;
}
.pdf-slide-page .slide-viewer{
  max-width:900px;
  margin:0 auto;
}
.pdf-slide-page .viewer-return-action{
  margin-top:18px;
}
.pdf-slide-page .viewer-return-action .research-save[aria-pressed="false"]{
  background:var(--paper);
  border-color:var(--border-blue);
  color:var(--brand);
}
.pdf-slide-page .pdf-record-guide-section{
  padding:32px 0 36px;
}
.pdf-slide-page .pdf-record-guide-section .research-guide{
  max-width:900px;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.pdf-slide-page .pdf-record-guide-section .research-guide h2{
  margin:0 0 10px;
  font-size:clamp(1.5rem,3vw,1.875rem);
}
.pdf-slide-page .pdf-record-guide-section .research-guide h3{
  margin:22px 0 8px;
  font-size:1.125rem;
}
.pdf-slide-page .pdf-record-guide-section .research-guide p,
.pdf-slide-page .pdf-record-guide-section .research-guide li{
  font-size:1.0625rem;
  line-height:1.55;
}
.pdf-slide-page .pdf-record-guide-section .research-guide ul{
  display:grid;
  gap:6px;
}
/* Key pages match the video Key Moments: one column of cards, a page-number
   pill on the left, the label on the right. */
.pdf-slide-page .pdf-record-guide-section .key-page-links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.pdf-slide-page .pdf-record-guide-section .key-page-card{
  min-height:58px;padding:10px 13px;display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.pdf-slide-page .pdf-record-guide-section .key-page-card:hover,
.pdf-slide-page .pdf-record-guide-section .key-page-card:focus-visible{border-color:var(--border-blue);background:var(--bg);text-decoration:none;}
.pdf-slide-page .pdf-record-guide-section .key-page-card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}
.pdf-slide-page .pdf-record-guide-section .key-page-card.is-current{border-color:var(--border-blue);background:var(--blue-soft);box-shadow:var(--record-current-shadow);}
.pdf-slide-page .pdf-record-guide-section .key-page-num{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 8px;border-radius:999px;background:var(--blue-soft);color:var(--brand);font-size:0.875rem;font-weight:850;line-height:1;white-space:nowrap;}
.pdf-slide-page .pdf-record-guide-section .key-page-card.is-current .key-page-num{background:var(--brand);color:var(--paper);}
.pdf-slide-page .pdf-record-guide-section .key-page-label{min-width:0;color:var(--ink);font-size:1rem;font-weight:800;line-height:1.3;}
@media(max-width:640px){
  .pdf-slide-page .wrap{
    width:min(100% - 28px,760px);
  }
  .pdf-slide-page .pdf-slide-hero{
    padding:14px 0 10px;
  }
  .pdf-slide-page #pdf-slides-title{
    font-size:clamp(1.75rem,8vw,2.25rem);
  }
  .pdf-title-copy,
  .text-title-copy{
    flex:1 1 100%;
  }
  .pdf-save-slot,
  .text-save-slot{
    flex:0 1 auto;
  }
  .viewer-tertiary-bar{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
    padding:9px 0;
  }
  .viewer-tertiary-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px;
  }
  .viewer-tertiary-actions > .btn,
  .viewer-tertiary-actions .pdf-save-slot > .btn,
  .viewer-tertiary-actions .text-save-slot > .btn,
  .viewer-tertiary-actions .video-save-slot > .btn{
    width:100%;
    min-width:0;
    white-space:normal;
  }
  .viewer-tertiary-actions .pdf-save-slot,
  .viewer-tertiary-actions .text-save-slot,
  .viewer-tertiary-actions .video-save-slot{
    display:contents;
  }
  /* The video viewer's bar holds a single action (Save Video). In the
     two-column phone grid it sat half-width in the left column; a lone
     action fills the row instead. */
  .video-page .viewer-tertiary-actions{
    grid-template-columns:minmax(0,1fr);
  }
  .viewer-tertiary-actions .copy-status{
    grid-column:1 / -1;
    text-align:right;
  }
  .pdf-slide-page .pdf-comment-meta .meta-row span,
  .pdf-slide-page #pdf-document-meta-text{
    font-size:0.9375rem;
  }
  .pdf-slide-page .viewer-return-action{
    gap:7px;
  }
  .pdf-slide-page .viewer-return-action .btn{
    flex:1 1 auto;
  }
  .video-page .video-player-section{padding:12px 0}
  .video-page .video-current-section{padding:12px 0 14px}
}

@media (hover:hover) and (pointer:fine){
  body.video-page .viewer-tertiary-bar{align-items:flex-start}
  body.video-page .viewer-tertiary-actions{gap:5px}
  body.video-page .viewer-tertiary-actions .btn{
    padding:5px 9px;
  }
}

/* Viewers share one compact header so the record itself lands above the fold.
   Titles use the curated short name,
body.video-page .video-title-row h1{
  font-size:clamp(1.5rem,3.2vw,2.125rem);
  line-height:1.14;
  margin:0 0 8px;
  max-width:100%;
}
body.pdf-slide-page main.page-standard > .hero,
body.pdf-slide-page .pdf-slide-hero,
body.text-page main.page-standard > .hero,
body.video-page main.page-standard > .hero{
  padding:18px 0 14px;
}

/* Rebuild confirmation: reuse the saved-state green so a finished rebuild is visible at a glance. */
.btn.is-complete,
.btn.secondary.is-complete{
  background:var(--green-soft);
  border-color:var(--green-active);
  color:var(--green);
}
.btn.is-complete:hover,
.btn.secondary.is-complete:hover{
  background:var(--green-soft);
  border-color:var(--green);
  color:var(--green);
}
.pdf-nav-block-bottom .slide-bottom-nav{width:100%}

/* Key Pages read like Key Moments: a stacked list of tappable record cards. */
.text-key-page-list{gap:8px}
.text-key-page-list button:hover{background:var(--lav);border-color:var(--border-blue)}
.text-key-page-list button.is-current{border-color:var(--brand);background:var(--blue-soft)}
.text-key-page-list button > span{color:var(--muted);font-weight:700;font-size:0.875rem}

/* Footer statements stack in two lavender bands on phones and share the
   darker bottom-band color in one compact row on wider screens. */
.footer-separator{display:none}
@media(min-width:900px){
  .footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 16px;
    background:var(--lav-2);
  }
  .footer > .wrap,
  .footer > .footer-band,
  .footer > .footer-band > .wrap{
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
  }
  .footer > .footer-band{
    background:transparent;
    border-top:0;
  }
  .footer p{
    max-width:none;
    margin:0;
  }
  .footer-separator{
    display:inline;
    color:var(--muted);
  }
}

/* Pointer-appropriate verb: touch devices read "Tap", mouse devices read
   "Click". display:none keeps the unused word out of the accessibility tree,
   and doing it in CSS avoids the word visibly changing after JS loads. */
.tap-only{display:inline}
.click-only{display:none}
@media (hover:hover) and (pointer:fine){
  .tap-only{display:none}
  .click-only{display:inline}
}