/* newsfeed — three-pane console.
 *
 * Colour carries meaning twice over, never once: followed topics are blue and
 * muted ones red, and both also carry a word ("muted", "saved") or a shape.
 * Green is never used for state anywhere in this file — a green/red pair is
 * the one distinction the reader of this app cannot make, so a figure encoded
 * that way would carry no information at all.
 *
 * Themes: the bare :root block is the complete light palette. The dark block
 * is guarded so an explicit light choice beats a dark OS, and repeated under
 * [data-theme] so the toggle wins in both directions. Nothing takes a colour
 * from anywhere but these tokens.
 */

:root{
  --ground:#EFF1F4;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --ink:#10151F;
  --ink-2:#4C5665;
  --ink-3:#79838F;
  --rule:#D6DAE1;
  --rule-2:#E5E8ED;
  --blue:#1B4FD8;
  --blue-soft:#E7EDFC;
  --on-blue:#FFFFFF;
  --red:#C0362C;
  --red-soft:#FBEAE8;

  --f-news:"Archivo Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1219; --surface:#161C26; --surface-2:#1C232E;
    --ink:#E8ECF2; --ink-2:#A8B2BF; --ink-3:#7C8695;
    --rule:#2A3340; --rule-2:#222A35;
    --blue:#58A6FF; --blue-soft:#17273F; --on-blue:#0E1219;
    --red:#FF7B6B; --red-soft:#331C1B;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1219; --surface:#161C26; --surface-2:#1C232E;
  --ink:#E8ECF2; --ink-2:#A8B2BF; --ink-3:#7C8695;
  --rule:#2A3340; --rule-2:#222A35;
  --blue:#58A6FF; --blue-soft:#17273F; --on-blue:#0E1219;
  --red:#FF7B6B; --red-soft:#331C1B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-news);
  font-size:14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:212px 1fr 1.12fr;height:100vh;
  background:var(--surface)}

/* ---------- rail ---------- */
.rail{border-right:1px solid var(--rule-2);background:var(--surface-2);
  padding:0 0 16px;overflow-y:auto}
.brand{display:flex;align-items:baseline;gap:8px;padding:14px}
.brand-name{font-weight:700;font-size:15px;letter-spacing:-.02em}
.brand-link{margin-left:auto;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.brand-link:hover{color:var(--blue)}

.group{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:14px 14px 6px}
.item{display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:13.5px;
  color:var(--ink-2)}
.item:hover{background:var(--rule-2);color:var(--ink)}
.item .n{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.item.on{background:var(--blue-soft);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--blue)}
.item.muted,.item.muted .n{color:var(--red)}
.item.muted.on{background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}
.item.empty{color:var(--ink-3);font-style:italic}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.dot.follow{background:var(--blue)}
.dot.mute{background:var(--red)}

/* ---------- list ---------- */
.list{border-right:1px solid var(--rule-2);display:flex;flex-direction:column;
  min-height:0}
.list-head{display:flex;align-items:baseline;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--rule-2);flex:none}
.list-head h1{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.list-head .sub{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;
  color:var(--ink-3)}

.mutebar{display:flex;align-items:center;gap:9px;padding:8px 16px;flex:none;
  background:var(--red-soft);border-bottom:1px solid var(--rule-2);
  font-size:12.5px;color:var(--red)}
.mutebar:hover{filter:brightness(.97)}
.mutebar .tri{font-size:10px}
.mutebar strong{font-family:var(--f-mono);font-weight:600;
  font-variant-numeric:tabular-nums}
.mutebar .btn{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;
  border-radius:3px;padding:2px 8px}

.rows{overflow-y:auto;flex:1;min-height:0}
.row{display:block;padding:11px 16px;border-bottom:1px solid var(--rule-2)}
.row:hover{background:var(--surface-2)}
.row h2{font-size:15.5px;line-height:1.28;font-weight:600;margin:0 0 5px;
  letter-spacing:-.005em;text-wrap:balance}
.row.is-read h2{font-weight:400;color:var(--ink-2)}
.meta{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.meta .src{color:var(--ink-2);font-weight:500}
.meta .flag{color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.meta .muted-flag{color:var(--red)}
.row.cur{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.row.is-muted{background:var(--red-soft)}
.row.is-muted.cur{box-shadow:inset 3px 0 0 var(--red)}
.nothing{padding:26px 16px;color:var(--ink-3);font-family:var(--f-body);font-size:15px}
.nothing code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2)}

.keys{display:flex;gap:14px;flex-wrap:wrap;padding:8px 16px;flex:none;
  border-top:1px solid var(--rule-2);font-family:var(--f-mono);font-size:10px;
  color:var(--ink-3)}
kbd{font-family:var(--f-mono);border:1px solid var(--rule);border-radius:2px;
  padding:0 4px;color:var(--ink-2);margin-right:2px}

/* ---------- reader ---------- */
.reader{padding:22px 30px 60px;overflow-y:auto;min-height:0}
.kicker{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.kicker .muted-note{color:var(--red);margin-left:8px}
.reader h1{font-size:27px;line-height:1.14;font-weight:700;margin:0 0 10px;
  letter-spacing:-.02em;text-wrap:balance;max-width:22ch}
.byline{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 0 16px;border-bottom:1px solid var(--rule-2);margin-bottom:16px}
.actions form{margin:0}
.actions button,.actions .out{font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:3px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  cursor:pointer}
.actions button:hover,.actions .out:hover{border-color:var(--blue);color:var(--blue)}
.actions .danger{color:var(--red)}
.actions .danger:hover{border-color:var(--red);color:var(--red)}
.actions .out{border-color:var(--blue);color:var(--blue)}
.reader p{font-family:var(--f-body);font-size:15.5px;line-height:1.62;
  margin:0 0 13px;max-width:62ch}
.reader .note{font-size:13.5px;color:var(--ink-3);font-style:italic}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;padding:3px 7px;
  border-radius:3px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--rule-2)}
.tag.follow{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.tag.mute{background:var(--red-soft);color:var(--red);border-color:transparent}
.idle{color:var(--ink-2)}
.idle h1{color:var(--ink)}
.idle p{max-width:44ch}

/* ---------- login ---------- */
.centred{display:flex;align-items:center;justify-content:center;height:100vh;
  background:var(--ground)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  padding:28px;width:320px;display:flex;flex-direction:column;gap:8px}
.card h1{font-size:20px;margin:0 0 10px;letter-spacing:-.02em}
.card label{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.card input{font:inherit;padding:7px 9px;border:1px solid var(--rule);border-radius:4px;
  background:var(--surface-2);color:var(--ink)}
.card button{margin-top:12px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:9px;border-radius:4px;
  border:0;background:var(--blue);color:var(--on-blue);cursor:pointer}
.card .error{color:var(--red);font-size:13px;margin:0}

/* ---------- topics page ---------- */
.page{max-width:820px;margin:0 auto;padding:34px 24px 80px}
.page-head{display:flex;align-items:baseline;gap:16px}
.page-head h1{font-size:24px;margin:0;letter-spacing:-.02em}
.back{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--blue);
  letter-spacing:.06em;text-transform:uppercase}
.lead{font-family:var(--f-body);font-size:15px;line-height:1.6;color:var(--ink-2);
  max-width:66ch}
.newtopic{display:flex;gap:8px;margin:20px 0 28px}
.newtopic input{flex:1}
.page input,.page select{font:inherit;padding:6px 9px;border:1px solid var(--rule);
  border-radius:4px;background:var(--surface);color:var(--ink)}
.page button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 11px;border-radius:4px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  cursor:pointer}
.page button:hover{border-color:var(--blue);color:var(--blue)}
.page .danger{color:var(--red)}
.page .danger:hover{border-color:var(--red);color:var(--red)}
.page button.link{border:0;background:none;padding:2px 4px;text-transform:lowercase;
  letter-spacing:0}

.topic{background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  padding:16px 18px;margin-bottom:14px}
.topic.is-muted{border-left:3px solid var(--red)}
.topic.is-followed{border-left:3px solid var(--blue)}
.topic header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.topic header h2{font-size:17px;margin:0;letter-spacing:-.015em}
.topic .stance{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.topic header form{margin:0 0 0 auto}
.topic header form + form{margin-left:8px}
.rules{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:4px}
.rules li{display:flex;align-items:center;gap:10px;font-size:13px;
  padding:4px 0;border-bottom:1px dotted var(--rule-2)}
.rules .kind{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);width:104px;flex:none}
.rules code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}
.rules form{margin-left:auto}
.rules .empty{color:var(--ink-3);font-style:italic}
.newrule{display:flex;gap:8px}
.newrule input{flex:1}

/* Below a laptop the rail and reader stop earning their columns. */
@media (max-width:960px){
  .app{grid-template-columns:1fr;height:auto}
  .rail{border-right:0;border-bottom:1px solid var(--rule-2)}
  .list{border-right:0;height:auto}
  .rows{overflow:visible}
  .reader{border-top:1px solid var(--rule-2)}
}