/* os-life.ca - the feed. THE APP'S OWN TOKENS, copied from ui/index.html so the
   website and the app are one product (his ask, 2026-09-20: "i want the dark theme
   on the website to be the same as the dark theme on the app... with the gradient
   blue background instead of the black"). Dark is the default: the bare :root is
   the dark palette and the toggle stamps data-theme="light". The accent is the light
   blue inside the infinity logo (#23BFF8, measured), his call 2026-09-20 over the green.
   Phone first: one column, 16px gutters. */
:root{
  --bg:#171A17; --surface:#1F231F; --surface2:#272C26;
  --ink:#E7E5DC; --ink-soft:#9AA093; --line:#343A33;
  --accent:#23BFF8; --accent-ink:#07223A; --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);
  /* the deep-blue wash behind the whole app - the same three stops */
  --grad1:#080B16; --grad2:#101830; --grad3:#1B2850;
  --bgveil:rgba(11,13,24,0.42);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F3EE; --surface:#FFFFFF; --surface2:#ECEAE1;
  --ink:#242821; --ink-soft:#6B7064; --line:#DCD9CD;
  --accent:#0E7FBF; --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);
  --grad1:#EEF2F9; --grad2:#E4EAF5; --grad3:#D8E1F2;
  --bgveil:rgba(244,243,238,0.91);
  color-scheme:light;
}
*{ box-sizing:border-box; }
/* the background goes on BODY ONLY. Give html a background too and the browser
   stops propagating body's to the canvas, body paints its own box, and the
   z-index:-1 gradient below hides behind it - which is exactly how the site
   shipped black instead of blue for one deploy (2026-09-20). */
html{ margin:0; }
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; }
/* the app's background, not a flat colour (his ask) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(165deg, var(--grad1) 0%, var(--grad2) 45%, var(--grad3) 100%);
}
a{ color:inherit; }

.top{ border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
/* THE BADGE IS FLUSH LEFT, like the app's absolutely-placed one (2026-09-20: it
   was centred with the rest of the header, so on a wide window it floated right
   of centre - "move the blue circle to the LEFT side"). The header row is full
   width and starts at the window edge; only `main` stays a centred column. */
.top .in{ width:100%; max-width:none; margin:0; padding:10px 20px 14px 14px;
  display:flex; align-items:flex-start; gap:26px; }
.headtext{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:12px;
  padding-top:26px; }
.ver{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:2px 8px; align-self:flex-start; }
.ver:empty{ display:none; }
.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); align-self:flex-start; }
.themebtn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.tag{ margin:0; color:var(--ink); font-size:16px; max-width:46ch; text-wrap:balance; font-weight:500; }
/* TOP RIGHT (2026-09-20, his ask): the silhouette and the dark/light toggle sit in
   the corner of the screen, the way they do in the app - margin-left:auto pushes
   them past the tagline to the far edge of the header row. */
.top .headbtns{ margin-left:auto; flex:0 0 auto; align-self:flex-start; padding-top:4px; }
@media (max-width: 700px){
  .top .in{ flex-direction:column; align-items:center; gap:10px; padding-top:12px; }
  .headtext{ padding-top:0; align-items:center; text-align:center; }
  .top .headbtns{ margin-left:0; align-self:center; padding-top:0; }
}

main{ flex:1; width:100%; max-width:960px; 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; }
.foot .in{ max-width:960px; margin:0 auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }