/* marginalia v0.2 (mockup kit) — every value from ~/reddit-persona/DESIGN.md; no hex outside :root (shoot.cjs checks) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&display=swap");
:root{--bg:#f6f7f8;--sf:#fff;--box:#fafafa;--box-bd:#e1e3e5;--band:#cee3f8;--rule:#5f99cf;--tab-bd:#9dbbd6;--band-tx:#3a5470;
  --tx:#1a1a1b;--tx-2:#444;--tx-3:#555;--mu:#6f6f6f;--dim:#767676;--rank:#c6c6c6;--ln:#336699;--visited:#551a8b;
  --or:#ff4500;--or-tx:#c63a00;--pw:#9494ff;--pw-tx:#6f6fdc;--pw-bg:#f1f1ff;--lime:#aeef0f;--bar-bg:#eceff1;--bar-cap:#ddd;
  --paper:#fffbeb;--paper-rule:#d9d2b0;--note-tx:#2a2a2a;--sig:#66665e;--ok:#2e7d32;--warn-bg:#fff1ea;--warn-bd:#ffd2bd;
  --rule-2:#bbb;--field-bd:#b0b0b0;--btn:#f3f3f3;--btn-hover:#e9e9e9;
  --ui:Verdana,"DejaVu Sans",Geneva,sans-serif;--hand:"Fraunces",Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx)}
body{font:13px/1.4 var(--ui)}
a{color:var(--ln);text-decoration:none}
.screen{container-type:inline-size;min-height:100%}

/* band */
.top{background:var(--band);border-bottom:1px solid var(--rule);height:38px;display:flex;align-items:stretch;padding:0 16px;gap:16px}
.wm{font-family:var(--hand);font-weight:600;font-size:17px;letter-spacing:-.01em;font-variation-settings:"opsz" 30;align-self:center}
.wm span{font:10px var(--ui);color:var(--band-tx);margin-left:8px}
.tabs{display:flex;align-items:flex-end;font-size:11px;font-weight:700;text-transform:lowercase}
.tabs a{padding:6px 8px 5px;margin-bottom:-1px;color:var(--ln)}
.tabs a+a{border-left:1px solid var(--tab-bd)}
.tabs .cur{background:var(--sf);border:1px solid var(--rule);border-bottom:1px solid var(--sf);color:var(--or);border-radius:3px 3px 0 0}
.tabs .cur+a{border-left:0}
.who{margin-left:auto;font-size:10px;color:var(--band-tx);align-self:center;white-space:nowrap}
.who .u{margin-right:8px}

/* page */
.page{padding:14px 18px 22px;max-width:960px}
.ttl{font-family:var(--hand);font-weight:600;font-size:22px;margin:0 0 4px;font-variation-settings:"opsz" 40;line-height:1.2}
.sub{font-size:10px;color:var(--mu);margin-bottom:14px}
.sub b{color:var(--tx-2)}
.line{font-size:11px;padding:6px 10px;margin:0 0 12px;background:var(--warn-bg);color:var(--or-tx);border:1px solid var(--warn-bd)}
.line a{color:var(--or);font-weight:700;margin-left:8px}
.foot{font-size:10px;color:var(--mu);margin-top:14px;border-top:1px solid var(--box-bd);padding-top:8px;display:flex;gap:18px;flex-wrap:wrap}
.foot b{color:var(--tx-2)}
p{margin:0 0 8px;max-width:62ch}

/* listing */
.lst{max-width:760px}
.row{display:grid;grid-template-columns:22px 40px minmax(0,1fr) 64px;gap:8px;padding:6px 0;align-items:start}
.rk{font-size:14px;color:var(--rank);text-align:right;padding-top:1px}
.vt{text-align:center;font-size:12px;font-weight:700;color:var(--tx-2)}
.vt b{display:block;color:var(--or);font-size:10px;line-height:1}
.vt b.d{color:var(--pw)}
.t{font-size:14px;color:var(--ln)}
.t.v{color:var(--visited)}
.m{font-size:10px;color:var(--mu);margin-top:2px}
.m .why{color:var(--tx-3)}
.ln{height:4px;background:var(--bar-bg);margin-top:6px;width:90px}
.ln i{display:block;height:100%;background:var(--lime)}
.ln.cap{background:repeating-linear-gradient(90deg,var(--bar-cap) 0 3px,transparent 3px 6px)}
.lbl{font-size:10px;color:var(--mu);padding-top:2px}
.more{font-size:11px;margin-top:8px}
.empty{padding:28px 0 8px;font-size:12px;color:var(--tx-3)}

/* thread */
.rl{font-size:10px;color:var(--mu);margin-bottom:10px}
.post{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px}
.post .vt{padding-top:3px}
.post h2{font:400 16px/1.25 var(--ui);color:var(--ln);margin:0 0 3px}
.body{background:var(--box);border:1px solid var(--box-bd);padding:6px 10px;margin-top:6px}
.body p{max-width:none;margin:0 0 6px}
.lk{font-size:10px;color:var(--mu);font-weight:700;margin-top:4px}
.lk span{margin-right:8px}
.c{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;margin-top:10px}
.c .vt{font-size:11px;padding-top:2px}
.c .m strong{font-weight:700;color:var(--ln)}
.c p{margin:2px 0 3px;max-width:none}
.nest{margin-left:12px;border-left:1px dotted var(--rule-2);padding-left:10px}

/* the note */
.note{margin-top:8px;background:var(--paper);border-left:3px solid var(--lime);padding:10px 14px;font:italic 400 15px/1.5 var(--hand);font-variation-settings:"opsz" 14;color:var(--note-tx);animation:note-in .15s ease}
@keyframes note-in{from{opacity:0}to{opacity:1}}
.note p{max-width:none;margin:0 0 6px}
.note textarea{width:100%;background:transparent;border:0;border-bottom:1px dashed var(--paper-rule);padding:0 0 6px;font:inherit;color:inherit;resize:none;min-height:150px;display:block}
.note textarea:focus{outline:2px solid var(--lime);outline-offset:4px}
.sig{font-size:12px;color:var(--sig);margin-top:6px}
.stamps{display:flex;gap:10px;align-items:center;margin-top:10px;font:11px var(--ui);flex-wrap:wrap}
.stamp{font:inherit;font-weight:700;letter-spacing:.08em;padding:5px 10px;border:2px solid var(--or);color:var(--or-tx);background:var(--sf);transform:rotate(-1.2deg);cursor:pointer;text-transform:uppercase;border-radius:0}
.stamp:hover{background:var(--warn-bg)}
.stamp:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.stamp.no{border-color:var(--pw);color:var(--pw-tx);transform:rotate(.8deg)}
.stamp.no:hover{background:var(--pw-bg)}
.stamp.no:focus-visible{outline-color:var(--pw)}
.stamps a,.stamps select{font:10px var(--ui);color:var(--mu);margin-left:4px}
.stamps select{border:0;background:transparent;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.posted{display:flex;gap:8px;align-items:center;margin-top:10px;font:11px var(--ui);flex-wrap:wrap}
.posted input{font:11px var(--ui);border:1px solid var(--field-bd);padding:4px 6px;width:260px;max-width:100%}
.posted a{font-size:10px;color:var(--mu)}
.posted .next{color:var(--ln);font-weight:700}

/* forms, buttons, tables */
label{display:block;font-size:10px;color:var(--mu);margin:0 0 3px}
input[type=password],input[type=text]{font:13px var(--ui);border:1px solid var(--field-bd);padding:5px 7px;width:280px;max-width:100%;background:var(--sf)}
.btn{font:700 11px var(--ui);border:1px solid var(--field-bd);background:var(--btn);color:var(--tx);padding:5px 12px;border-radius:3px;cursor:pointer}
.btn:hover{background:var(--btn-hover)}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.field{margin:0 0 12px}
table{border-collapse:collapse;font-size:11px;width:100%}
th{text-align:left;font-weight:700;color:var(--mu);padding:0 10px 5px 0;border-bottom:1px solid var(--box-bd);font-size:10px}
td{padding:6px 10px 6px 0;border-bottom:1px solid var(--box-bd);vertical-align:top}
td.n{text-align:right;font-variant-numeric:tabular-nums}
td.mu{color:var(--mu)}
.st{font-weight:700;letter-spacing:.04em}
.st.ok{color:var(--ok)}.st.no{color:var(--pw-tx)}.st.dim{color:var(--dim)}
.nolink{color:var(--dim)}
.bigs{display:flex;gap:36px;margin:8px 0 16px}
.big{font-size:26px;font-weight:700}
.big span{font-size:10px;color:var(--mu);font-weight:400;margin-left:6px}
.tblwrap{overflow-x:auto}
ul.plain{margin:0;padding-left:16px;font-size:12px}
.connected{font-size:12px}

/* phone */
@container (max-width:520px){
  .top{padding:0 10px;gap:8px}
  .who .u,.wm span{display:none}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .page{padding:10px 10px 18px}
  .row{grid-template-columns:34px minmax(0,1fr)}
  .rk{display:none}
  .lbl{grid-column:2}
  .foot{gap:10px}
  .stamps .stamp{flex:1 1 auto;text-align:center;min-height:44px}
  .stamps a,.posted a,.lk span,.more a,.foot a{display:inline-block;padding:12px 8px;margin:0}
  .bigs{gap:20px}
  input[type=password],input[type=text]{width:100%}
  table{min-width:520px}
}
@media (prefers-reduced-motion:reduce){.note{animation:none}}