/* Black Card styling for the shared renderers' markup (src/lib/public-reading.ts):
   .public-reading, .public-stream, .public-kicker, .public-source-media. The markup is production's;
   only the presentation changes. --c is the layer color set by the page. */
.layer-page{padding-block:72px 120px}
.public-reading{max-width:1360px}
.layer-page>.public-reading{margin-inline:auto}
.public-reading>h1{font:300 clamp(36px,4.8vw,72px)/1.02 var(--f);letter-spacing:-.045em;margin:0 0 22px;max-width:19ch;text-wrap:balance}
.public-reading>h1::before{content:"";display:block;width:40px;height:3px;background:var(--c);margin-bottom:28px}
.public-reading>p{color:var(--mu);max-width:62ch;margin:0 0 12px}
.public-reading>p strong{color:var(--ink);font-weight:500}
.public-reading a{color:var(--ink);text-decoration-color:var(--c);text-underline-offset:3px}
.public-reading a:hover{color:var(--c)}
.public-reading>p[role="status"],.public-reading>p:has(>strong:first-child){font:400 12px/1.5 var(--fm);letter-spacing:.06em}
.public-notice{border:1px solid var(--ru);background:var(--raise);padding:12px 14px}
.public-stream{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:920px}
.public-stream>li,.public-stream article{min-width:0}
.public-stream article>*{min-width:0;overflow-wrap:anywhere}
.public-stream>li>article,.public-stream>li>section{background:var(--raise);border:1px solid var(--ru);border-top:2px solid var(--c);padding:22px 22px 18px;display:grid;gap:12px}
.public-kicker{font:400 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin:0}
.public-stream h2{font:500 clamp(19px,1.7vw,23px)/1.25 var(--f);letter-spacing:-.015em;margin:0;text-wrap:pretty}
.public-stream h2 a{text-decoration:none}
.public-stream h2 a:hover{color:var(--c)}
.public-stream article>p{margin:0;font-size:15.5px;line-height:1.6;white-space:pre-line;max-width:74ch}
.public-stream article>p:not(.public-kicker):nth-of-type(n+3){color:var(--mu);font-size:14px}
.public-stream article>p strong{color:var(--ink);font-weight:500}
.public-stream article>p:last-child{font:400 11.5px/1.5 var(--fm);letter-spacing:.04em}
.public-source-media{margin:4px 0;max-width:560px}
.public-source-media img,.public-source-media video{max-width:100%;height:auto;display:block;border:1px solid var(--ru)}
.public-source-media iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--ru)}
.public-source-media audio{max-width:100%}
.public-source-media figcaption{font:400 11px/1.5 var(--fm);letter-spacing:.04em;color:var(--mu);margin-top:8px}
.public-source-card>a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--ru);text-decoration:none;font-size:14px}
.public-source-card-publisher{font-weight:500}
.public-source-card-meta{color:var(--mu);font:400 11px/1.4 var(--fm);letter-spacing:.06em}
.public-reading>p:last-child a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;margin-top:28px;border:1px solid var(--ru);font:500 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
@media (max-width:560px){.layer-page{padding-block:48px 90px}.public-stream>li>article{padding:18px 16px 14px}}
/* Color at the scale the home page uses it. Every layer page opens on a wash that leads with its
   own layer's fill (--cf) and runs through the other three; the heading carries the four-color bar.
   A question page has its own boxed band (questions.css), so it takes no wash. */
.layer-page{--on-fill:#0B0B0C;background:linear-gradient(180deg,transparent 0,var(--bg) 520px),linear-gradient(100deg,color-mix(in srgb,var(--cf) 50%,transparent) 0 22%,color-mix(in srgb,var(--f-iris) 38%,transparent) 48%,color-mix(in srgb,var(--f-cobalt) 36%,transparent) 68%,color-mix(in srgb,var(--f-ember) 32%,transparent) 84%,color-mix(in srgb,var(--f-straw) 44%,transparent))}
.layer-page{background-size:100% 520px;background-repeat:no-repeat}
.layer-page:has(.question-opening){background:none}
.public-reading>h1::before{width:112px;height:6px;background:linear-gradient(90deg,var(--f-ember) 0 25%,var(--f-iris) 25% 50%,var(--f-cobalt) 50% 75%,var(--f-straw) 75%)}
/* Stream: the list's own links become chips, each reading a tinted card with a solid bar. */
.public-reading:has(>.public-stream)>p>a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;margin:2px 2px 2px 0;text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--cf) 26%,transparent)}
.public-reading:has(>.public-stream)>p>a:nth-of-type(4n+2){--cf:var(--f-iris)}
.public-reading:has(>.public-stream)>p>a:nth-of-type(4n+3){--cf:var(--f-cobalt)}
.public-reading:has(>.public-stream)>p>a:nth-of-type(4n+4){--cf:var(--f-straw)}
.public-reading:has(>.public-stream)>p>a:hover{background:var(--cf);color:var(--on-fill)}
.public-stream>li>article,.public-stream>li>section{border:0;border-left:6px solid var(--cf);background:color-mix(in srgb,var(--cf) 9%,var(--raise))}
.public-stream .public-kicker{color:var(--c)}
.public-stream .public-kicker::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cf);margin-right:10px}
.public-source-card>a{border:0;background:color-mix(in srgb,var(--cf) 22%,var(--raise))}
.public-source-card>a:hover{background:var(--cf);color:var(--on-fill)}
.public-source-card>a:hover .public-source-card-meta{color:var(--on-fill)}
.public-reading>p:last-child a{border-color:var(--cf);background:var(--cf);color:var(--on-fill)}
/* Inline term and name context: a native popover, so it needs no script. Shared by readings, questions and Perspectives. */
.public-mention{display:inline;padding:0;border:0;border-bottom:1px dotted currentColor;background:none;color:inherit;font:inherit;line-height:inherit;cursor:help;text-align:inherit}
.public-mention:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.public-mention-popover{max-width:min(320px,calc(100vw - 32px));margin:auto;padding:14px 16px;border:1px solid var(--ru);border-radius:0;background:var(--raise);color:var(--ink);font-size:15px;line-height:1.45;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.public-mention-popover::backdrop{background:rgba(0,0,0,.3)}
.public-mention-popover strong{display:block;margin-bottom:5px}
.public-mention-popover p{margin:0 0 8px}
/* A reading on its own page (readingHtml): one column, the summary first, then its sections. */
.public-reading>article{max-width:76ch;min-width:0}
.public-reading>article>*{min-width:0;overflow-wrap:anywhere}
.public-reading>article>.public-kicker{color:var(--c);margin:0 0 18px}
.public-reading>article>.public-kicker::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cf);margin-right:10px}
.public-reading>article>h1{font:300 clamp(32px,4.2vw,56px)/1.06 var(--f);letter-spacing:-.04em;margin:0 0 20px;text-wrap:balance}
.public-reading>article>h1::before{content:"";display:block;width:112px;height:6px;margin-bottom:26px;background:linear-gradient(90deg,var(--f-ember) 0 25%,var(--f-iris) 25% 50%,var(--f-cobalt) 50% 75%,var(--f-straw) 75%)}
.public-formats{font:400 12px/1.6 var(--fm);letter-spacing:.05em;color:var(--mu);margin:0 0 28px}
.public-summary{font-size:clamp(18px,1.6vw,21px);line-height:1.55;margin:0 0 14px;white-space:pre-line}
.public-attribution{color:var(--mu);font-size:14px;margin:0 0 24px}
.public-reading>article p{margin:0 0 12px}
.public-reading>article ul{margin:8px 0 12px;padding-left:20px}
.public-reading>article li{margin:8px 0;line-height:1.6}
/* Sections are monochrome. A reading's sections include its limits and each evidence relationship, and evidence
   roles never take a layer color; nothing in the markup tells those sections from the rest, so none is colored.
   The one exception is the original source, which is named by its own class and takes the Stream color. */
.public-reading>article>section{--cf:var(--ink);margin-top:36px;padding-top:22px;border-top:1px solid var(--ru)}
.public-reading>article>section.public-original-source{--cf:var(--f-ember);border-top:3px solid var(--cf)}
.public-reading>article h2{font:500 clamp(20px,1.8vw,24px)/1.25 var(--f);letter-spacing:-.02em;margin:0 0 12px}
.public-reading>article>section>h2::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.5em;background:var(--cf)}
.public-reading>article h3{font:500 17px/1.3 var(--f);margin:18px 0 8px}
.public-reading>article blockquote{margin:14px 0;padding:14px 18px;border-left:4px solid var(--ink);background:var(--raise);font-size:16px;line-height:1.6}
.public-source-details{border:1px solid var(--ru);background:var(--raise);padding:0 18px;margin:12px 0 0}
.public-source-details>summary{min-height:44px;padding:11px 0;cursor:pointer;font-weight:500}
.public-source-details[open]>summary{border-bottom:1px solid var(--ru);margin-bottom:14px}
.public-references li p{font-size:14px;color:var(--mu);margin:4px 0}
.public-listen{margin:8px 0 24px}
.em-stale-copy{margin:0;padding:12px 20px;background:var(--f-straw);color:#0B0B0C;font-size:14px}
/* A published reading whose additional source check reached no verdict says so beside its summary. */
.public-stream .public-audit-note{font:400 11.5px/1.5 var(--fm);letter-spacing:.04em;color:var(--ink);border-left:3px solid var(--ink);padding-left:10px}