/* os-life.ca - the feed. Same tokens as the app, so a branch opened from here
   feels like the same product. Phone first: one column, 16px gutters.
   DARK BY DEFAULT (his call, 2026-09-20): the bare :root is the dark palette and the
   toggle stamps data-theme="light" when someone wants the light one. */
:root{
  --bg:#171A17; --surface:#1F231F; --surface2:#272C26;
  --ink:#E7E5DC; --ink-soft:#9AA093; --line:#343A33;
  --accent:#79B99C; --accent-ink:#14221B; --danger:#D57A6B;
  --g-1:#6FB0BD; --g-2:#C58BA5; --g-3:#ADB37A; --g-4:#93A3C4; --g-5:#C99A64;
  --g-6:#8FB0CC; --g-7:#B58AC0; --g-8:#6DBB92; --g-9:#D08B60; --g-10:#C0A25C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F3EE; --surface:#FFFFFF; --surface2:#ECEAE1;
  --ink:#242821; --ink-soft:#6B7064; --line:#DCD9CD;
  --accent:#2F5D4C; --accent-ink:#FFFFFF; --danger:#A33D2E;
  --g-1:#2F6B77; --g-2:#925A72; --g-3:#6E7345; --g-4:#55627D; --g-5:#8A5A2F;
  --g-6:#4E6E8E; --g-7:#7B4B94; --g-8:#2F7D5B; --g-9:#A8542F; --g-10:#8A6D2F;
  --shadow:0 1px 2px rgba(36,40,33,.06),0 4px 14px rgba(36,40,33,.05);
  color-scheme:light;
}
*{ box-sizing:border-box; }
html, body{ margin:0; background:var(--bg); color:var(--ink); }
body{ font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column; }
a{ color:inherit; }

.top{ border-bottom:1px solid var(--line); background:var(--surface); }
.top .in{ width:100%; max-width:820px; margin:0 auto; padding:26px 16px 22px; }
.top #acct{ margin-top:14px; }
.brandrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.wordmark .logo{ width:34px; height:34px; border-radius:50%; display:block; }
.themebtn{ font:inherit; font-size:18px; line-height:1; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); }
.themebtn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.wordmark h1{ font-family:"Zilla Slab",serif; font-weight:600; font-size:28px; margin:0; letter-spacing:-.01em; }
.tag{ margin:10px 0 0; color:var(--ink-soft); font-size:15.5px; max-width:56ch; text-wrap:balance; }

main{ flex:1; width:100%; max-width:820px; margin:0 auto; padding:18px 16px 44px; }
.lead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:6px 0 14px; }
.lead h2{ font-family:"Zilla Slab",serif; font-weight:600; font-size:17px; margin:0; }
.lead .count{ color:var(--ink-soft); font-size:13px; font-family:"IBM Plex Mono",monospace; }

.branch{ display:block; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--c, var(--accent));
  border-radius:12px; padding:16px 18px; margin:12px 0; box-shadow:var(--shadow);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.branch:hover{ border-color:color-mix(in srgb, var(--c, var(--accent)) 55%, var(--line));
  box-shadow:0 8px 24px color-mix(in srgb, var(--c, var(--accent)) 16%, transparent), var(--shadow); }
.branch .open{ display:block; text-decoration:none; color:inherit; }
.branch .votebar{ margin-top:12px; }
.branch h3{ font-family:"Zilla Slab",serif; font-weight:600; font-size:21px; margin:0 0 6px;
  line-height:1.25; text-wrap:balance; overflow-wrap:anywhere; }
.byline{ color:var(--ink-soft); font-size:13.5px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.byline .who{ color:var(--ink); font-weight:500; }
.byline .dot{ opacity:.5; }
.counts{ display:flex; gap:14px; margin-top:10px; color:var(--ink-soft); font-size:13.5px;
  font-variant-numeric:tabular-nums; }
.counts b{ color:var(--ink); font-weight:600; }

.empty{ color:var(--ink-soft); background:var(--surface); border:1px dashed var(--line);
  border-radius:12px; padding:26px 20px; text-align:center; }
.loading{ color:var(--ink-soft); }
.foot{ border-top:1px solid var(--line); color:var(--ink-soft); font-size:13px;
  text-align:center; padding:18px 16px 30px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }