/* TrackStack — Subsonic 6.1 dark look (reference: docs/reference/subsonic-6.1/). Phase 3 subset. */
:root {
  /* Dark is the default (Subsonic 6.1). Personal settings: Dark, Light, or Match my device. */
  --chrome: #000; --chrome-text: #ddd; --chrome-dim: #ccc; --chrome-strong: #fff;
  --pane: #333; --pane-2: #3a3a3a; --row-alt: #000; --th: #000; --raised: #2a2a2a; --raised-2: #222; --dialog: #1b1b1b;
  --line: #555; --line-2: #333; --text: #e8e8e8; --soft: #ddd; --meta: #bbb; --muted: #9a9a9a; --strong: #fff;
  --accent: #e8590c; --accent-hover: #ff7a2e; --on-accent: #fff;
  --card: #fff; --card-text: #333; --card-muted: #aaa; --noart: #666; --ring: #ddd; --shadow: rgba(0,0,0,.4);
  --btn: #fff; --btn-text: #000; --input: #fff; --input-text: #000; --input-line: #aaa;
  --flash: #5a3a20; --error: #ff6b6b; --backdrop: rgba(0,0,0,.6);
  color-scheme: dark;
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
  --chrome: #ececec; --chrome-text: #333; --chrome-dim: #444; --chrome-strong: #000;
  --pane: #fff; --pane-2: #f3f3f3; --row-alt: #fff; --th: #e2e2e2; --raised: #f1f1f1; --raised-2: #e6e6e6; --dialog: #fff;
  --line: #c8c8c8; --line-2: #dcdcdc; --text: #222; --soft: #333; --meta: #555; --muted: #666; --strong: #000;
  --accent: #c2410c; --accent-hover: #e8590c; --on-accent: #fff;
  --card: #fff; --card-text: #222; --card-muted: #6b6b6b; --noart: #999; --ring: #c8c8c8; --shadow: rgba(0,0,0,.18);
  --btn: #e2e2e2; --btn-text: #111; --input: #fff; --input-text: #000; --input-line: #999;
  --flash: #ffe0c7; --error: #c92a2a; --backdrop: rgba(0,0,0,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
  --chrome: #ececec; --chrome-text: #333; --chrome-dim: #444; --chrome-strong: #000;
  --pane: #fff; --pane-2: #f3f3f3; --row-alt: #fff; --th: #e2e2e2; --raised: #f1f1f1; --raised-2: #e6e6e6; --dialog: #fff;
  --line: #c8c8c8; --line-2: #dcdcdc; --text: #222; --soft: #333; --meta: #555; --muted: #666; --strong: #000;
  --accent: #c2410c; --accent-hover: #e8590c; --on-accent: #fff;
  --card: #fff; --card-text: #222; --card-muted: #6b6b6b; --noart: #999; --ring: #c8c8c8; --shadow: rgba(0,0,0,.18);
  --btn: #e2e2e2; --btn-text: #111; --input: #fff; --input-text: #000; --input-line: #999;
  --flash: #ffe0c7; --error: #c92a2a; --backdrop: rgba(0,0,0,.35);
  color-scheme: light;
  }
}
* { box-sizing: border-box; }
/* Type (2026-11-03, Nathan on a 1440p display: "the fonts are very small"): the system UI font
   at normal weight, 16px, growing on wide screens. Layout sizes are in rem so they grow with it. */
html { font-size: 16px; }
@media (min-width: 1700px) { html { font-size: 17px; } }
@media (min-width: 2300px) { html { font-size: 19px; } }
html, body { margin: 0; background: var(--pane); color: var(--text); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--text); }
a:hover { color: var(--accent); }
button, input { font: inherit; }
button { background: var(--btn); color: var(--btn-text); border: 0; border-radius: 6px; padding: .4em .95em; font-weight: 500; cursor: pointer; }
button:hover { background: var(--accent); color: var(--on-accent); }
input { background: var(--input); color: var(--input-text); border: 1px solid var(--input-line); border-radius: 6px; padding: .4em .6em; }
code { background: var(--raised-2); padding: .1em .35em; border-radius: 2px; font-family: ui-monospace, Menlo, monospace; }
.wrap { word-break: break-all; }
.error { color: var(--error); }
.hint { color: var(--muted); font-size: .9em; }
.secret code { font-size: 1.15em; color: var(--strong); }

.logo { display: inline-block; width: 1.6em; height: 1.6em; margin-right: .45em; vertical-align: -.35em;
  border-radius: 50%; background: radial-gradient(circle, #222 0 18%, var(--accent) 19% 25%, #111 26% 100%); box-shadow: 0 0 0 2px #444; }
.brand { font-size: 1.45em; font-weight: 600; letter-spacing: -.01em; color: var(--chrome-strong); text-decoration: none; white-space: nowrap; }

/* Login */
body.auth { min-height: 100vh; display: grid; place-items: center; background: var(--chrome); }
.auth-box { width: min(24rem, 92vw); padding: 2rem; background: var(--dialog); border-radius: 12px; }
.auth-box .brand { display: block; margin-bottom: 1.25rem; text-align: center; }
.auth-box label { display: block; margin: .75rem 0; color: var(--muted); }
.auth-box input { display: block; width: 100%; margin-top: .25rem; }
.auth-box button { width: 100%; margin-top: .5rem; padding: .55em; background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Pages */
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .55rem 1rem; background: var(--chrome); }
.tabs a { color: var(--chrome-text); margin-right: 1.25rem; text-decoration: none; text-transform: uppercase; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding-bottom: .3rem; }
.tabs a.on { border-bottom: 2px solid var(--accent); }
.logout { margin-left: auto; }
.logout button { background: none; color: var(--text); padding: 0; }
.logout button:hover { color: var(--accent); background: none; }
.content { padding: 1rem 1.5rem 3rem; max-width: 70rem; }
h1 { font-weight: 600; font-size: 1.75rem; letter-spacing: -.01em; margin: .5rem 0 1rem; }
h2 { font-weight: 600; font-size: 1.2rem; margin: 2rem 0 .5rem; }
table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; font-size: .95rem; }
th { text-align: left; background: var(--th); text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .6rem .7rem; }
td { padding: .5rem .7rem; }
tbody tr:nth-child(odd) { background: var(--pane-2); }
tbody tr:nth-child(even) { background: var(--row-alt); }
form.inline { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
form.inline label { display: flex; flex-direction: column; gap: .2rem; color: var(--muted); font-size: .9rem; }

/* Library health */
.content.wide { max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.chips a { text-decoration: none; background: var(--raised-2); padding: .25rem .6rem; border-radius: 1rem; font-size: .85rem; }
.chips a span { color: var(--muted); margin-left: .25rem; }
.chips a.on { background: var(--accent); color: var(--on-accent); }
.chips a.on span { color: var(--on-accent); }
.todo { color: var(--accent); }
.hfolder { margin: 1.5rem 0; }
.hfolder h2 { margin: 0 0 .1rem; font-size: 1.05rem; }
.hfolder h2 a { text-decoration: none; }
.nas { margin: 0 0 .4rem; font-size: .85rem; }
.nas code { user-select: all; }
button.small { padding: .15em .6em; font-size: .8rem; }
.pager { display: flex; gap: 1.5rem; align-items: center; margin: 2rem 0; }
.hfolder table { table-layout: fixed; }
.hfolder th:nth-child(1) { width: 15%; } .hfolder th:nth-child(2) { width: 26%; }
.hfolder th:nth-child(3) { width: 25%; } .hfolder th:nth-child(4) { width: 27%; } .hfolder th:nth-child(5) { width: 7%; }
.hfolder td { overflow-wrap: anywhere; vertical-align: top; }

form.stack { display: flex; flex-direction: column; gap: .8rem; max-width: 28rem; }
form.stack label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); }
form.stack label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
form.stack button { align-self: flex-start; }
select { font: inherit; padding: .35rem .5rem; background: var(--input); color: var(--input-text); border: 1px solid var(--input-line); border-radius: 6px; }
.useracts { display: flex; gap: .3rem; flex-wrap: wrap; }
.useracts form { margin: 0; }
button[disabled] { opacity: .45; cursor: not-allowed; }
.libgrant { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: center; margin: 0; }
.libgrant label.check { display: flex; gap: .3rem; align-items: center; font-size: .85rem; }
table.shares td { vertical-align: middle; }
table.shares tr.dead td { color: var(--muted); }
input.sharelink { width: 100%; min-width: 16rem; font-size: .8rem; }