/* Tellfeather (placeholder) - large type, high contrast, for users 70+ */
[hidden]{display:none!important}
*{box-sizing:border-box}
:root{--fg:#1a1a1a;--muted:#555;--line:#888;--bg:#fff;--soft:#f4f4f4;--accent:#1f3a5f;--hl:#ffe08a}
html{font-size:20px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.5}
a{color:var(--accent)}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--line);padding:.6rem 1.2rem;background:#f2f2f2}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem}
.logo .mark{width:1.5rem;height:1.5rem;border:2px solid #555;background:repeating-linear-gradient(45deg,#ddd 0 4px,#fff 4px 8px)}
.ph-tag{font-size:.55rem;font-weight:600;border:1px dashed #666;padding:1px 5px;text-transform:uppercase;letter-spacing:.5px;color:#555;background:#fff}
nav{display:flex;gap:1.2rem}
nav a{color:#444;text-decoration:none;padding:.2rem .1rem}
nav a.on{border-bottom:3px solid #333;color:#111;font-weight:700}
nav a.disabled{color:#999;pointer-events:none}
.devstrip{background:#e6e6e6;border-bottom:1px solid #999;padding:.3rem 1.2rem;font-size:.7rem;color:#333}
.devstrip.demo{position:sticky;top:0;z-index:50;background:#7a1f00;color:#fff;font-size:1rem;font-weight:700;text-align:center;padding:.5rem 1rem;border-bottom:3px solid #000}
main{max-width:1180px;margin:0 auto;padding:1.2rem}
h1{font-size:1.6rem;margin:0 0 .3rem}
h2{font-size:1.2rem;margin:0 0 .6rem}
.sub{color:var(--muted);margin:0 0 1rem;font-size:.85rem}
.box{border:2px solid var(--line);padding:1rem;margin-bottom:1rem;background:#fff}
.box.strong{border:3px solid #333}
.box.soft{border:1px solid #bbb;background:var(--soft)}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.small{font-size:.8rem;color:var(--muted)}
.muted{color:var(--muted)}
button,.btn{font:inherit;font-size:1rem;font-weight:700;border:2px solid #333;background:#fff;color:#111;padding:.55rem 1.1rem;cursor:pointer;border-radius:4px;min-height:2.6rem;text-decoration:none;display:inline-block}
button.primary,.btn.primary{background:#333;color:#fff}
button.small{font-size:.8rem;padding:.3rem .7rem;min-height:2rem;border-width:1px}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:4px solid #1f6feb;outline-offset:2px}
.prompt-text{font-size:1.45rem;font-weight:700;margin:.4rem 0 .6rem;line-height:1.35}
.rec-dot{width:4rem;height:4rem;border:3px solid #333;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.rec-dot.live{background:#b3261e;color:#fff;border-color:#b3261e}
.rec-dot.paused{background:#ddd}
.timer{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.meter{display:flex;gap:3px;height:1.2rem;margin-top:.3rem}
.meter div{flex:1;background:#ddd;border:1px solid #999}
.meter div.on{background:#444}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.check input{width:1.4rem;height:1.4rem;margin-top:.2rem}
.status{padding:.6rem .8rem;border:2px dashed #888;background:var(--soft);font-size:.9rem}
.status.ok{border-style:solid;border-color:#2e6b2e;background:#eef7ee}
.status.err{border-style:solid;border-color:#b3261e;background:#fdeeee}
.transcript{font-size:1.15rem;line-height:1.8}
.seg{padding:.3rem .4rem;margin:.2rem 0;border-left:4px solid transparent}
.seg.active{border-left-color:#333;background:#fafafa}
.seg .ts{font-size:.7rem;color:#666;font-variant-numeric:tabular-nums;margin-right:.4rem;cursor:pointer;text-decoration:underline}
.seg[contenteditable=true]{outline:2px dashed #1f3a5f;background:#fffdf3}
.w{cursor:pointer;border-radius:3px;padding:0 1px}
.w.now{background:var(--hl);box-shadow:0 0 0 2px var(--hl)}
audio{width:100%}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{border:1px solid #bbb;padding:.4rem .5rem;text-align:left;vertical-align:top}
th{background:#e8e8e8}
.tag{display:inline-block;border:1px solid #888;padding:0 .4rem;font-size:.7rem;background:#eee;margin-right:.3rem}
footer{border-top:2px solid #999;background:#f2f2f2;padding:.7rem 1.2rem;font-size:.7rem;color:#555;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- M2 additions (no inline styles anywhere: CSP style-src 'self') ---- */
.hidden-nav{display:none}
.mt{margin-top:.8rem}.mt-s{margin-top:.4rem}.mb{margin-bottom:.8rem}
.grow{flex:1}
.stack{display:flex;flex-direction:column;gap:.6rem}
.narrow{max-width:640px}
.field{display:flex;flex-direction:column;gap:.2rem;margin:.5rem 0}
.field label{font-size:.8rem;font-weight:700;color:#333}
input[type=text],input[type=email],input[type=date],select{font:inherit;font-size:1rem;padding:.5rem .6rem;border:2px solid #888;border-radius:4px;min-height:2.6rem}
.stepper{display:flex;gap:4px;margin:0 0 1rem;flex-wrap:wrap}
.stepper div{flex:1;min-width:7rem;border:1px solid #999;padding:.35rem .5rem;font-size:.7rem;background:#f4f4f4;color:#666}
.stepper .done{background:#ddd;color:#333}
.stepper .cur{background:#333;color:#fff;font-weight:700}
.doc{max-height:22rem;overflow:auto;border:1px solid #bbb;background:#fafafa;padding:.6rem .9rem;font-size:.85rem}
.doc h3{font-size:1rem;margin:.4rem 0}.doc h4{font-size:.9rem;margin:.6rem 0 .2rem}
.doc blockquote{border-left:4px solid #666;margin:.4rem 0;padding:.2rem .6rem;background:#f0f0f0}
.doc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;font-size:.75rem;border-bottom:1px solid #ddd}
.choice{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid #ddd;padding:.5rem 0}
.choice:last-child{border-bottom:0}
.choice input[type=checkbox],.choice input[type=radio]{width:1.4rem;height:1.4rem}
.sig{border:3px solid #333;padding:.8rem;background:#fff}
.signed{border-color:#2e6b2e;background:#eef7ee}
.pill{display:inline-block;border:1px solid #888;border-radius:999px;padding:0 .6rem;font-size:.7rem;background:#eee}
.pill.ok{border-color:#2e6b2e;background:#eef7ee}.pill.off{border-color:#b3261e;background:#fdeeee}
.listener-row{display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:.5rem;align-items:center}
.box.warn{border-color:#b3261e;background:#fdeeee}
.right{text-align:right}
.inline-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.notice-strong{border:3px solid #333;padding:.8rem 1rem;margin:.8rem 0}
a.disabled{pointer-events:none;opacity:.45}
.now-version{font-weight:700}
/* M4: large text (saved per device) and reflow at 320 px */
html[data-text="125"]{font-size:25px}
html[data-text="150"]{font-size:30px}
html[data-text="200"]{font-size:40px}
body{overflow-wrap:anywhere}
.topbar{flex-wrap:wrap;gap:.5rem}
.textsize select{font:inherit;font-size:.8rem;min-height:1.6rem}
.readaloud{min-height:1.6rem;padding:.2rem .6rem;font-size:.8rem}
.attribution{margin-top:.5rem}
:focus-visible{outline:3px solid #1f3a5f;outline-offset:2px}
input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}
img,audio,video,select,input,textarea{max-width:100%}
@media (max-width:700px){
  nav{flex-wrap:wrap;gap:.6rem}
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;left:-9999px}
  tr{border-bottom:1px solid #bbb;padding:.3rem 0}
  main{padding:.6rem}
}
.chip{display:inline-block;border:1px solid #33506b;border-radius:999px;padding:.1rem .7rem;background:#eaf1f8;color:#1b2d40;font-weight:600}
.chipnum{display:inline-block;min-width:1.5rem;text-align:center;border-radius:999px;background:#1b2d40;color:#fff;font-size:.8rem;margin-right:.4rem}
.chipref{font-size:.8rem;margin-left:.15rem}
.clip .play{margin:.3rem 0}
.sentence{margin:.3rem 0}
.presence{border:0;padding:0;margin:0 0 .5rem}.presence legend{font-weight:600;margin-bottom:.3rem}