/* style.css — public Thought Police pages. Palette + shell chrome come from
   tui.css/shell.css; this holds the canvas-filling content, card stream, post. */
/* canvas: fill from the left edge to the RHSB rail, below the fixed header. */
body{margin:0;max-width:none;padding:var(--hdr-h) 2rem 2rem;box-sizing:border-box}
@media(min-width:1280px){body{padding-right:calc(2rem + var(--rhsb-w))}}

/* topbar + subbar bleed to the column edges, past the body padding */
.topbar{margin:-2rem -2rem 0 -2rem}
.subbar{display:flex;align-items:center;gap:.9rem;background:var(--void);border-bottom:1px solid var(--smoke);padding:.4rem 1rem;font-size:.72rem;letter-spacing:.05em;flex-wrap:wrap;margin:0 -2rem 1.6rem -2rem}
.sb-label{color:var(--bone);opacity:.45;letter-spacing:.22em}
.sb-feed{color:var(--bone);text-decoration:none;white-space:nowrap}
.sb-feed::before{content:"\25CF";color:var(--ember);margin-right:.3em;font-size:.62em;vertical-align:middle}
.sb-mail{color:var(--bone);text-decoration:none;white-space:nowrap;margin-left:auto}
.sb-mail::before{content:"\2709";margin-right:.35em;opacity:.8}
.subbar a:hover{filter:brightness(1.4)}

/* header + dock chrome now live in shell.css (loaded on every page).
   Card lists fill the canvas; long-form prose keeps a readable measure, centered. */
.post{max-width:52rem;margin-inline:auto}

/* the post stream — lives inside a .frame titled "n8k99" (set in the template) */
.stream-frame{padding:.9rem 0 1.2rem}
main.stream{display:flex;flex-direction:column;gap:1px;background:var(--smoke)}
.card{display:flex;gap:1rem;align-items:center;background:var(--void);padding:.85rem 1rem;text-decoration:none}
.card:hover,.card.sel{background:var(--panel)}
.card.sel{box-shadow:inset 3px 0 var(--cyan)}
.card-art{flex:none;width:76px;height:76px;background-size:cover;background-position:center;background-color:var(--panel);border:1px solid var(--smoke)}
.card-body{display:flex;flex-direction:column;min-width:0;flex:1}
.card-source{color:var(--gold);font-size:.6rem;letter-spacing:.22em}
.card:hover .card-source::before,.card.sel .card-source::before{content:"\276F\00a0";color:var(--toxic)}
.card-title{color:var(--bone);font-size:1.02rem;margin:.2rem 0;line-height:1.35;overflow-wrap:anywhere}
.card:hover .card-title,.card.sel .card-title{color:var(--cyan)}
.card-date{color:var(--mute);font-size:.72rem}
.card .play{flex:none;width:44px;height:44px;border:1px solid var(--cyan);background:transparent;color:var(--cyan);cursor:pointer;font-size:.9rem;line-height:1}
.card .play:hover{background:var(--cyan);color:var(--void)}

/* podcast page — the same cards, laid out as a 3-wide gallery grid (hairline gaps over smoke, like the stream) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--smoke);border:1px solid var(--smoke)}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr}}

/* "view full archive" call-to-action below the capped home stream */
.archive-more{display:block;text-align:center;text-decoration:none;color:var(--gold);background:var(--void);border:1px solid var(--smoke);border-top:none;padding:.8rem;font-size:.7rem;letter-spacing:.18em}
.archive-more:hover{color:var(--cyan);box-shadow:inset 0 2px var(--cyan)}

/* the archive page — imageless log-line rows, fast at full corpus size */
main.archive{display:flex;flex-direction:column;gap:1px;background:var(--smoke)}
.arow{display:flex;gap:.9rem;align-items:baseline;background:var(--void);padding:.45rem 1rem;text-decoration:none}
.arow:hover,.arow.sel{background:var(--panel)}
.arow.sel{box-shadow:inset 3px 0 var(--cyan)}
.arow-date{flex:none;width:6.5rem;color:var(--mute);font-size:.72rem;font-variant-numeric:tabular-nums}
.arow-src{flex:none;width:5.5rem;color:var(--gold);font-size:.55rem;letter-spacing:.18em;overflow:hidden;white-space:nowrap}
.arow-title{color:var(--bone);font-size:.92rem;overflow-wrap:anywhere}
.arow:hover .arow-title,.arow.sel .arow-title{color:var(--cyan)}
.arow.podcast .arow-src{color:var(--magenta)}
@media (max-width:640px){
  .arow{flex-wrap:wrap;gap:.2rem .7rem;padding:.5rem .7rem}
  .arow-src{order:3;width:auto}
}

.post h1{color:var(--bone);border-left:3px solid var(--toxic);padding-left:.7rem;line-height:1.2}
.post .date{color:var(--mute);font-size:.8rem;margin-bottom:1.5rem}
.body p{margin:1rem 0}.body a{color:var(--cyan)}.body img{max-width:100%}
.body blockquote{border-left:2px solid var(--smoke);margin:1rem 0;padding-left:1rem;color:var(--mute)}
footer{margin-top:3rem;border-top:1px solid var(--smoke);padding-top:1rem;color:var(--mute);font-size:.8rem}

@media (max-width:640px){
  body{padding:var(--hdr-h) 1rem 1rem;font-size:15px}
  .topbar{margin:-1rem -1rem 0 -1rem}
  .subbar{margin:0 -1rem 1.1rem -1rem;gap:.55rem;font-size:.66rem;padding:.4rem .7rem}
  .tb-now{order:10;flex:1 1 100%}
  .sb-mail{margin-left:0}
  .card{gap:.7rem;padding:.7rem}
  .card-art{width:58px;height:58px}
  .card-source{font-size:.55rem}
  .card-title{font-size:.95rem}
  .card .play{width:38px;height:38px}
  .post h1{font-size:1.35rem}
  .body{overflow-wrap:break-word}
}

/* wikilinks — three states */
.wl { color: #00F5FF; text-decoration: none; border-bottom: 1px solid #00F5FF; }
.wl:hover { filter: brightness(1.35); }
.wl-wall { color: #FFB800; border-bottom: 1px dashed #FFB800; cursor: not-allowed; }
.wl-red { color: #FF2D95; border-bottom: 1px dotted #FF2D95; cursor: help; }

/* Admonitions / callouts — Obsidian ```ad-TYPE blocks, rendered as DPN callouts.
   A left accent bar + faint accent-tinted panel; the type picks the accent. */
.admonition { border: 1px solid var(--smoke); border-left: 3px solid var(--ad-accent, var(--cyan));
  background: color-mix(in oklab, var(--ad-accent, var(--cyan)) 7%, var(--void)); padding: .55rem .8rem; margin: 1rem 0; }
.admonition .ad-title { color: var(--ad-accent, var(--cyan)); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35rem; }
.admonition > :last-child { margin-bottom: 0; }
.ad-note, .ad-info, .ad-blue, .ad-todo { --ad-accent: var(--cyan); }
.ad-tip, .ad-hint, .ad-success, .ad-check, .ad-done, .ad-green { --ad-accent: var(--toxic); }
.ad-warning, .ad-caution, .ad-attention, .ad-question, .ad-help, .ad-faq, .ad-yellow { --ad-accent: var(--gold); }
.ad-danger, .ad-error, .ad-bug, .ad-failure, .ad-fail, .ad-missing { --ad-accent: var(--magenta); }
.ad-red, .ad-orange, .ad-important { --ad-accent: var(--ember); }
.ad-abstract, .ad-summary, .ad-tldr, .ad-quote, .ad-cite, .ad-example, .ad-violet, .ad-purple { --ad-accent: #9D00FF; }
.ad-white { --ad-accent: var(--bone); }
.ad-black { --ad-accent: var(--mute); }

/* Town Square ring band (M10 G03) — ← prev · 🎲 random · next →. A footer strip the same
   height as the header (the Town Square footer presentation; the live square + chat-above
   land here with M12). */
.ring { display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap;
	height:var(--hdr-h); margin-top:1.4rem; border-top:1px solid var(--smoke);
	background:var(--void); font:.78rem/1 ui-monospace,monospace; letter-spacing:.05em; }
.ring a { color:var(--cyan); text-decoration:none; padding:.25rem .55rem; border:1px solid var(--smoke); }
.ring a:hover { border-color:var(--cyan); color:var(--toxic); }
.ring .ring-r { color:var(--gold); }