/* layout: docs (same language as the Yotland docs). Sidebar (topics + sites) and one article at a time, both as glass
   panes over our own wallpaper, so the page shows what the extension does. Pastel accent, squarer corners. */
:root {
  --bg: #eeecea; --fg: #1d1d1f; --muted: #5f5f66; --faint: #a3a3aa; --line: rgba(0, 0, 0, .09);
  --accent: #4a76a8; --sel: rgba(0, 0, 0, .07);
  --pane: rgba(255, 255, 255, .62); --rim: rgba(255, 255, 255, .7); --sheen: rgba(255, 255, 255, .55);
  --live: #5f9e6e; --partial: #c0784f; --planned: #a3a3aa; --bad: #b5000f;
  --wall: url("wall-light.webp");
  --f-ui: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --r: 6px; --r-panel: 8px; --r-small: 3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121214; --fg: #f2f2f4; --muted: #a6a6ad; --faint: #6a6a72; --line: rgba(255, 255, 255, .1);
    --accent: #8fb1d9; --sel: rgba(255, 255, 255, .09);
    --pane: rgba(22, 22, 26, .6); --rim: rgba(255, 255, 255, .09); --sheen: rgba(255, 255, 255, .1);
    --live: #93c79c; --partial: #d9a07c; --bad: #ff9e98; --wall: url("wall-dark.webp"); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121214; --fg: #f2f2f4; --muted: #a6a6ad; --faint: #6a6a72; --line: rgba(255, 255, 255, .1);
  --accent: #8fb1d9; --sel: rgba(255, 255, 255, .09);
  --pane: rgba(22, 22, 26, .6); --rim: rgba(255, 255, 255, .09); --sheen: rgba(255, 255, 255, .1);
  --live: #93c79c; --partial: #d9a07c; --bad: #ff9e98; --wall: url("wall-dark.webp"); color-scheme: dark;
}

* { box-sizing: border-box }
body {
  margin: 0; padding-inline: 16px; color: var(--fg); font: 400 15px/1.62 var(--f-ui); -webkit-font-smoothing: antialiased;
  background: var(--bg) var(--wall) center / cover fixed;
}
a { color: var(--accent); text-underline-offset: 3px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-small) }
code { font-family: var(--f-mono); font-size: .84em; background: var(--line); padding: .08em .35em; border-radius: var(--r-small) }
pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--line); border-radius: var(--r) }
pre code { background: none; padding: 0; font-size: 13px }

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; max-width: 1180px; margin-inline: auto; padding-block: 14px }
.pane {
  background: var(--pane); border: 1px solid var(--rim); border-radius: var(--r-panel);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--sheen), 0 8px 24px -20px rgba(0, 0, 0, .28);
}

nav { scrollbar-width: none; position: sticky; top: calc(14px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 28px); overflow-y: auto; padding: 18px 8px 14px }
.brand { padding: 0 10px 10px; display: grid; gap: 3px }
.brand b { font-size: 19px; font-weight: 500; letter-spacing: -.01em }
.brand small { font-size: 12px; color: var(--muted); line-height: 1.4 }
.group { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 3px }
.group .grouplink { display: inline; padding: 0; color: inherit; font: inherit; background: none }
nav a { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: var(--r-small); color: var(--fg); text-decoration: none; font-size: 14px }
nav a:hover { background: var(--sel) }
nav a[aria-current] { background: var(--sel); font-weight: 500 }
.brand a { display: inline; padding: 0; color: var(--accent); font-size: inherit }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--live) }
.dot.partial { background: var(--partial) }
.dot.planned { background: transparent; box-shadow: inset 0 0 0 1.5px var(--planned) }
.legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 10px 0; font-size: 11px; color: var(--muted) }
.legend > span { display: inline-flex; align-items: center; gap: 5px }

main { min-width: 0; padding: 40px clamp(20px, 4vw, 56px) 36px; min-height: calc(100vh - 28px) }
article { display: grid; gap: 15px; max-width: 760px; scroll-margin-top: 100vh }   /* #id jump lands at the page top */
article:not(.on) { display: none }
h1 { font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance }
h2 { font-size: 16.5px; font-weight: 500; margin: 16px 0 0 }
p { margin: 0; max-width: 68ch }
.sub { color: var(--muted); font-size: 16.5px }
.status { font: 500 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; color: var(--muted) }
ul, ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px }
li::marker { color: var(--faint) }
figure { margin: 4px 0 0 }
figure img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line) }
figure img { cursor: zoom-in }
#lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: none;
  display: none; place-items: center; align-content: center; gap: 10px; cursor: zoom-out }
#lightbox[open] { display: grid }
#lightbox::backdrop { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) }
#lightbox img { max-width: 100%; max-height: calc(100vh - 64px); object-fit: contain; border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: e-resize; user-select: none }
#lightbox p { color: #f2f2f4; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums }
#lightbox button { position: fixed; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font: 300 30px/1 var(--f-ui); display: grid; place-items: center }
#lightbox button:hover { background: rgba(255, 255, 255, .24) }
#lightbox button[value="-1"] { left: 16px; top: 50% } #lightbox button[value="1"] { right: 16px; top: 50% }
#lightbox button[value="close"] { right: 16px; top: 16px; font-size: 26px }
figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px }
.tile figcaption { font-size: 12px }
.tbl { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums }
th, td { text-align: left; padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap }
td .dot { margin-right: 7px }
th { font: 500 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
/* gallery: toolbar (search · status chips · glass mode · sort · view), then cards or the table */
article.wide { max-width: none }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar input, .bar select, .seg { font: inherit; font-size: 13.5px; color: var(--fg); background: var(--sel); border: 1px solid var(--line);
  border-radius: var(--r); height: 34px }
.bar input { flex: 1 1 200px; min-width: 0; padding: 0 12px }
.bar select { padding: 0 8px; cursor: pointer }
.seg { display: inline-flex; padding: 2px; gap: 2px }
.seg button { font: inherit; color: var(--muted); background: none; border: 0; border-radius: var(--r-small); padding: 0 10px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.seg button:hover { color: var(--fg) }
.seg button[aria-pressed="true"] { background: var(--pane); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12) }
.seg[data-key="status"] button[aria-pressed="false"] .dot { opacity: .35 }
.count { font-size: 12.5px }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px 14px }
.card { margin: 0; min-width: 0 }
.card img, .noimg { aspect-ratio: 16 / 10; object-fit: cover; object-position: top }
.noimg { border-radius: var(--r); border: 1px dashed var(--line); display: grid; place-items: center; font-size: 12px; color: var(--faint) }
.card figcaption { display: grid; gap: 1px; margin-top: 7px }
.card figcaption a { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); font-size: 14px; font-weight: 500; text-decoration: none }
.card figcaption a:hover { color: var(--accent) }
.card small { font-size: 12px; color: var(--muted); padding-left: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
[hidden] { display: none !important }
.back { font-size: 13px; text-decoration: none; justify-self: start }
.back::before { content: "← " }
nav a .dim { margin-left: auto; font-size: 12px }

.ok { color: var(--live) } .warn { color: var(--partial) } .bad { color: var(--bad) } .dim { color: var(--faint) }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr }
  nav { position: static; max-height: none; order: 2 }
  main { padding: 26px 18px }
  h1 { font-size: 28px }
}
@media (prefers-reduced-transparency: reduce) { .pane { background: var(--bg); backdrop-filter: none } }