/* ══════════════════════════════════════════════════════════════════════════════
   plainews shared theme — site chrome CSS loaded on every subpage
   Used by: archive.html, brief.html, community.html
   NOT loaded by index.html (has its own CSS in <style>)
   Contains: header, float search, footer, bias colors, matrix chrome overrides
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Accessibility ── */
.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; }
.sr-only-focusable:focus { position: fixed; top: 0; left: 0; z-index: 9999; width: auto; height: auto; padding: 8px 16px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: #bb0000; color: #fff; font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; text-decoration: none; }
*:focus-visible { outline: 2px solid #bb0000 !important; outline-offset: 2px; }
html.matrix-mode *:focus-visible { outline-color: #00ff41 !important; }

/* ── Header ── */
#hdr{background:#bb0000;color:#fff;padding:7px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-sizing:border-box}
#hdr h1{font-size:36px;font-weight:bold;letter-spacing:-2px;line-height:1;margin:0;font-family:'Courier New',monospace}
#hdr h1 a{color:inherit;text-decoration:none}
#hdr .tagline{font-size:10px;opacity:.82;font-family:'Courier New',monospace}
#hdr .hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ── Float search bar ── */
#float-search{position:fixed;top:0;left:0;right:0;z-index:900;background:#bb0000;padding:5px 12px;display:none;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.25);animation:pnSlide .2s ease}
@keyframes pnSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
#float-search .float-logo{font-size:18px;font-weight:bold;letter-spacing:-1.5px;color:#fff;font-family:'Courier New',monospace}
#float-search .float-logo a{color:inherit;text-decoration:none}
#float-search .float-ad-slot{flex:1;font-size:10px;color:rgba(255,255,255,.65);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Courier New',monospace}
#float-search .float-search-group{display:flex;align-items:center;gap:6px;margin-left:auto}
#float-search-input{width:200px;font-family:'Courier New',monospace;font-size:12px;padding:4px 8px;border:none;background:rgba(255,255,255,.15);color:#fff;outline:none}
#float-search-input::placeholder{color:rgba(255,255,255,.55)}
#float-search-input:focus{background:rgba(255,255,255,.25)}
#float-search .float-btn{font-family:'Courier New',monospace;font-size:11px;font-weight:bold;padding:4px 12px;background:#fff;color:#bb0000;border:none;cursor:pointer}
#float-search .float-btn:hover{background:#ffe0e0}

/* ── Footer ── */
#pn-ftr{margin-top:32px;padding:18px 20px 20px;border-top:2px solid #bb0000;background:#f0ece4;font-family:'Courier New',Courier,monospace;font-size:11px;color:#555;text-align:center;transition:background .3s,border-color .3s,color .3s}
#pn-ftr .pf-brand{display:block;font-size:16px;font-weight:bold;letter-spacing:-.5px;color:#bb0000;margin-bottom:10px;transition:color .3s}
#pn-ftr .pf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 12px;margin-bottom:10px;font-size:11px}
#pn-ftr .pf-nav a{color:#555;text-decoration:none;transition:color .2s}
#pn-ftr .pf-nav a:hover{color:#bb0000}
#pn-ftr .pf-nav .pf-sponsors{color:#cc4444}
#pn-ftr .pf-nav span{color:#ccc}
#pn-ftr .pf-sources{font-size:10px;color:#888;margin-bottom:10px;line-height:1.9}
#pn-ftr .pf-bias{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;align-items:center;font-size:10px;border-top:1px dotted #d8d0c8;padding-top:8px;margin-bottom:6px}
#pn-ftr .pf-bias .pf-bias-lbl{color:#888}
#pn-ftr .b-l{color:#1144aa;font-weight:bold}
#pn-ftr .b-cl{color:#2266bb;font-weight:bold}
#pn-ftr .b-c{color:#1a7a1a;font-weight:bold}
#pn-ftr .b-cr{color:#bb4400;font-weight:bold}
#pn-ftr .b-r{color:#aa1111;font-weight:bold}
#pn-ftr .b-u{color:#888;font-weight:bold}
#pn-ftr .pf-copy{font-size:10px;color:#aaa;margin-top:4px}
#pn-ftr .pf-copy a{color:#aaa;text-decoration:none}
#pn-ftr .pf-copy a:hover{color:#888}

/* ── Matrix mode — chrome overrides (header, float, footer, body) ── */
html.matrix-mode body{background:#000!important;color:#00cc33}
html.matrix-mode a{color:#00cc33}
html.matrix-mode a:visited{color:#007700}
html.matrix-mode #hdr{background:#000!important;border-bottom:1px solid #002200;box-shadow:0 0 20px rgba(0,255,65,.06)}
html.matrix-mode #hdr h1 a{color:#00ff41!important;text-shadow:0 0 10px #00ff41,0 0 24px #00cc33}
html.matrix-mode #hdr a{color:#004400}
html.matrix-mode #hdr .tagline{color:#003300}
html.matrix-mode #float-search{background:#000!important}
html.matrix-mode #float-search .float-logo a{color:#00ff41!important}
html.matrix-mode #float-search .float-btn{background:#002200!important;color:#00ff41!important;border:1px solid #004400}
html.matrix-mode #float-search-input{background:rgba(0,255,65,.08)!important;color:#00ff41!important}
html.matrix-mode #pn-ftr{background:#000!important;border-top-color:#001800!important;color:#003300!important}
html.matrix-mode #pn-ftr a{color:#004400!important}
html.matrix-mode #pn-ftr a:hover{color:#00ff41!important}
html.matrix-mode #pn-ftr .pf-brand{color:#00ff41!important}
html.matrix-mode #pn-ftr .pf-bias .b-l,html.matrix-mode #pn-ftr .pf-bias .b-cl{color:#0066ff!important}
html.matrix-mode #pn-ftr .pf-bias .b-c{color:#00ff41!important}
html.matrix-mode #pn-ftr .pf-bias .b-cr,html.matrix-mode #pn-ftr .pf-bias .b-r{color:#ff4444!important}
html.matrix-mode input,html.matrix-mode select{background:#000!important;color:#00ff41!important;border-color:#002200!important}
html.matrix-mode button:not(.pill-btn){background:#000!important;color:#00cc33!important;border-color:#002200!important}

/* ── Mobile responsive ── */
@supports (padding-top: env(safe-area-inset-top)) {
  #hdr { padding-top: calc(6px + env(safe-area-inset-top)); }
  #float-search { padding-top: env(safe-area-inset-top); }
  #pn-ftr { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

@media(max-width:600px){
  #hdr{padding:6px 10px;gap:8px}
  #hdr h1{font-size:24px}
  #hdr .tagline{display:none}
  /* 16px minimum prevents iOS Safari auto-zoom on input focus */
  #float-search-input{width:120px!important;font-size:16px}
  #pn-ftr .pf-nav{gap:4px 8px}
  /* WCAG 2.5.8: 44px minimum touch target on mobile */
  #pn-ftr .pf-nav a{padding:6px 8px;min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  #pn-ftr .pf-nav span{padding:0 2px}
}

/* ── Motion sensitivity — disable animations for users who prefer it ── */
@media (prefers-reduced-motion: reduce) {
  /* Float search bar slide-in animation */
  #float-search { animation: none; }
  /* Footer colour transitions */
  #pn-ftr,
  #pn-ftr .pf-brand,
  #pn-ftr .pf-nav a,
  #pn-ftr .pf-copy a { transition: none; }
}