/* Plum. Light by default; dark follows the system unless the viewer picked a theme
   (data-theme on <html>, set by the toggle in the header). */
:root {
  color-scheme: light;
  --bg: #f7f4f8;
  --surface: #ffffff;
  --text: #221a26;
  --muted: #6a5f6f;
  --border: #e6dfe8;
  --accent: #7a3f8f;
  --on-accent: #ffffff;
  --accent-soft: #efe2f3;
  --row-hover: #faf7fb;
  --bar-bg: #ece5ee;
  --chip: #f1ebf3;
  --open-bg: #efe3f3;
  --incoming: #2f5f8a;
  --incoming-bg: #e1ecf6;
  --owned: #2d6a3e;
  --owned-bg: #e2f1e5;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171219;
    --surface: #201a23;
    --text: #ece4ef;
    --muted: #a598ab;
    --border: #362d3a;
    --accent: #c58ad8;
    --on-accent: #171219;
    --accent-soft: #34233b;
    --row-hover: #27202a;
    --bar-bg: #362d3a;
    --chip: #2b232e;
    --open-bg: #2e2234;
    --incoming: #8cb8e0;
    --incoming-bg: #1f2c38;
    --owned: #8fd3a0;
    --owned-bg: #1c3122;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171219;
  --surface: #201a23;
  --text: #ece4ef;
  --muted: #a598ab;
  --border: #362d3a;
  --accent: #c58ad8;
  --on-accent: #171219;
  --accent-soft: #34233b;
  --row-hover: #27202a;
  --bar-bg: #362d3a;
  --chip: #2b232e;
  --open-bg: #2e2234;
  --incoming: #8cb8e0;
  --incoming-bg: #1f2c38;
  --owned: #8fd3a0;
  --owned-bg: #1c3122;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---- The frame: a top bar across, a rail of icons down the left, the page beside it ----
   Colours come from the --shell-* tokens (generated with the palettes, so a group's page wears its own). */
body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "top top" "rail main"; min-height: 100vh; }
body.no-rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
.topbar {
  grid-area: top; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 52px; padding: 0 16px 0 14px; background: var(--shell-bg); color: var(--shell-text); border-bottom: 1px solid var(--shell-line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--shell-text); font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--shell-active); font-size: 17px; }
.topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-who { color: var(--shell-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-link { color: var(--shell-text); font-size: 13px; font-weight: 600; border: 1px solid var(--shell-line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.topbar-link:hover { background: var(--shell-active); text-decoration: none; }
.topbar .theme-btn { background: var(--shell-active); color: var(--shell-text); border-color: var(--shell-line); }
.topbar .theme-btn:hover { color: var(--shell-text); border-color: var(--shell-muted); }
.topbar :focus-visible, .rail :focus-visible { outline: 2px solid var(--shell-text); outline-offset: 2px; }

.rail {
  grid-area: rail; position: sticky; top: 52px; height: calc(100vh - 52px); height: calc(100dvh - 52px); width: 88px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 8px;
  background: var(--shell-bg); border-right: 1px solid var(--shell-line);
}
.rail-main, .rail-foot, .rail-pins { display: flex; flex-direction: column; gap: 4px; }
.rail-pins { padding: 6px 0; margin: 2px 0; border-block: 1px solid var(--shell-line); }
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px;
  color: var(--shell-muted); font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2;
}
.rail-item:hover { background: var(--shell-line); color: var(--shell-text); text-decoration: none; }
.rail-item[aria-current="page"] { background: var(--shell-active); color: var(--shell-text); }
.rail-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-emoji { font-size: 21px; line-height: 22px; }
.rail-mono { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; }
.rail-pin { position: relative; }
.rail-unpin {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--shell-active); color: var(--shell-text); font-size: 14px; line-height: 1; opacity: 0;
}
.rail-pin:hover .rail-unpin, .rail-unpin:focus-visible { opacity: 1; }
/* The phone bar's Groups item and its menu (the pins stand in for it on wide screens) */
.rail-groups, .rail-menu { display: none; }
button.rail-item { font: inherit; font-size: 11px; font-weight: 600; border: 0; background: none; cursor: pointer; }

main { grid-area: main; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 24px 48px; min-width: 0; }
main.narrow { max-width: 860px; }

/* Page header: an icon tile, a breadcrumb, the title, and actions (Pin) on the right */
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); font-size: 24px;
}
.page-icon.mono { font-size: 20px; font-weight: 700; }
.page-head-text { flex: 1; min-width: 0; }
.crumb { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
:root[data-palette] h1 { color: var(--accent); }
.page-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.page-actions:empty { display: none; }
.pin-btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 8px;
}
.pin-btn svg { width: 18px; height: 18px; }
.pin-btn:hover { border-color: var(--accent); }
.pin-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.list-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* Tabs under a page header (Settings: Account, Groups, Admin) */
.tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
.tab {
  padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap;
  color: var(--muted); font-size: 14px; font-weight: 600;
}
.tab:hover { color: var(--accent); text-decoration: none; }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.tabs + #view > .panel:first-child { margin-top: 16px; }

/* Summary cards above a list */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 4px; }
.card-picks { grid-column: span 2; }
.card {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; text-align: left;
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.card p { margin: 0; }
.card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.card-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.card-sub { font-size: 12px; color: var(--muted); }
.card-btn { cursor: pointer; }
.card-btn:not(:disabled) .card-num { color: var(--incoming); }
.card-btn:not(:disabled):hover { border-color: var(--incoming); }
.card-btn:disabled { cursor: default; }
.card-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picks-mini { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 14px; }
.picks-mini li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.picks-mini .link-btn { margin: 0; font-size: 14px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-rating { font-size: 12px; font-weight: 700; color: var(--owned); font-variant-numeric: tabular-nums; }

/* BGG rating as a round badge in the table: 8 and up green, 7 to 8 the accent, below that grey */
.rating { display: inline-grid; place-items: center; min-width: 36px; height: 24px; padding: 0 6px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.rating.hi { background: var(--owned-bg); color: var(--owned); }
.rating.mid { background: var(--accent-soft); color: var(--accent); }
.rating.lo { background: var(--chip); color: var(--muted); }

.theme-btn {
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Phones: the rail becomes a bar along the bottom: My games, Groups, Settings, one row of equal widths
   (the rail's two groups step aside with display: contents). The pins stay hidden; Groups stands in. */
@media (max-width: 720px) {
  body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .topbar { height: 48px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .topbar-who { display: none; }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; width: auto; height: auto; overflow: visible;
    flex-direction: row; justify-content: stretch; gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--shell-line);
  }
  .rail-main, .rail-foot { display: contents; }
  .rail-pins, .rail-hide-sm { display: none; }
  .rail-item { flex: 1 1 0; min-width: 0; min-height: 52px; justify-content: center; padding: 6px 4px; }
  .rail-groups { display: flex; }
  /* On the Groups tab both Groups and Settings are current; the bar shows only Groups. */
  .rail:has(.rail-groups[aria-current]) .rail-core[aria-current] { background: none; color: var(--shell-muted); }
  .rail-menu {
    display: block; position: fixed; z-index: 31; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 16px)); max-height: 60dvh; overflow-y: auto; padding: 6px;
    background: var(--shell-bg); border: 1px solid var(--shell-line); border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  }
  .rail-menu-head { margin: 4px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--shell-muted); }
  .rail-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .rail-menu ul li:last-child { border-top: 1px solid var(--shell-line); padding-top: 2px; }
  .rail-menu-item {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px;
    color: var(--shell-text); font-size: 15px; font-weight: 600;
  }
  .rail-menu-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-menu-item:hover { background: var(--shell-line); text-decoration: none; }
  .rail-menu-item[aria-current="page"] { background: var(--shell-active); }
  .rail-menu-item svg, .rail-menu-item .rail-mono, .rail-menu-item .rail-emoji { flex: none; width: 24px; text-align: center; }
  body:not(.no-rail) main { padding-bottom: 88px; }
  /* iOS places a fixed bar against the layout viewport while the keyboard is open, so it floats over
     the list as you scroll (issue #34). It's behind the keyboard anyway: hide it while a text field
     has focus; it's back as soon as the keyboard closes (Done blurs the field). */
  body:has(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus, textarea:focus) :is(.rail, .rail-menu) {
    display: none;
  }
  main { padding: 16px 16px 40px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-picks { grid-column: 1 / -1; }
  .card-num { font-size: 22px; }
  h1 { font-size: 22px; }
}

/* Incoming games dialog */
/* Only the list scrolls: the dialog itself never does. */
.dlg {
  width: min(500px, calc(100vw - 32px)); max-height: min(85vh, 720px); max-height: min(85dvh, 720px); padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg::backdrop { background: rgba(23, 18, 25, 0.5); backdrop-filter: blur(2px); }
.dlg-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.dlg-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.dlg-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.dlg-close { border: 0; background: var(--chip); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 999px; flex: none; }
.dlg-close:hover { color: var(--accent); background: var(--accent-soft); }
.dlg-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inc-list {
  overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 14px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.inc-group h3 {
  margin: 14px 8px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--incoming);
}
.inc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inc-item {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: none; border: 0; border-radius: 10px; padding: 8px 10px;
}
.inc-item:hover { background: var(--accent-soft); }
.inc-item:hover .inc-title { color: var(--accent); }
.inc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.inc-item .thumb { width: 48px; height: 48px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border); }
.inc-body { display: block; min-width: 0; flex: 1; }
.inc-title { display: block; font-weight: 600; line-height: 1.3; }
.inc-meta { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* "Has it arrived?" dialog: one row per overdue game, Arrived or a new month */
.due-list {
  list-style: none; margin: 0; padding: 6px 12px; display: grid; gap: 4px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.due-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.due-item:last-child { border-bottom: 0; }
.due-item .inc-body { flex: 1 1 100%; }
.due-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.due-act input {
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
}
.due-act input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.due-done { font-size: 13px; color: var(--muted); }
.due-done:empty { display: none; }
.due-item.done .due-done { color: var(--owned); font-weight: 600; }
.due-foot { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.due-foot form { margin: 0; }
/* The import review dialog (review.js) */
.dlg-wide { width: min(640px, calc(100vw - 32px)); }
.rv-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.rv-group h3 {
  display: flex; align-items: baseline; gap: 8px; margin: 14px 8px 4px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.rv-n { font-weight: 400; }
.rv-all { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.rv-all .link-btn { margin: 0; font-size: 12px; }
.rv-note { margin: 0 8px 6px; font-size: 13px; color: var(--muted); }
.rv-guard { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text); font-size: 14px; }
.rv-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rv-item { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.rv-item:hover { background: var(--accent-soft); }
.rv-item input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rv-item .thumb { width: 40px; height: 40px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border); }
.rv-same { margin: 14px 8px 0; }
.rv-same summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.rv-same .rv-item { cursor: default; opacity: 0.65; padding-block: 3px; }
.rv-same .rv-item:hover { background: none; }
.rv-same .rv-item .thumb { width: 28px; height: 28px; }
.rv-problems li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.rv-why { color: var(--muted); }
.rv-error { margin: 8px 20px 0; }
.rv-foot { align-items: center; }
.rv-foot .grow { flex: 1; }
.rv-done { margin: 0; flex: 1; font-size: 14px; }

/* Settings → Import: spinners, and the review */
.import-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.import-type {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface);
}
.import-type:hover { border-color: var(--accent); }
.import-type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.import-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.it-title { font-weight: 600; }
.it-sub { font-size: 13px; color: var(--muted); }
.import-type:has(input:checked) .it-sub { color: var(--text); } /* muted on accent-soft isn't a checked pair */
.import-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.import-body > p:first-child { margin-top: 0; }
.inline-form > .error { flex-basis: 100%; margin: 0; }
.steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.steps .btn { margin-left: 6px; }
.token-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.token-new input {
  flex: 1; min-width: 220px; box-sizing: border-box; height: 36px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px;
}
.token-new .dim { flex-basis: 100%; margin: 0; }
#token-list:not(:empty) { margin-top: 12px; }
.spinner {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner.small { width: 12px; height: 12px; }
.recent-state { display: inline-flex; align-items: center; gap: 6px; }
.recent-unknown { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.review-group { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.review-group legend { padding: 0; font-weight: 600; }
.review-group > .dim { margin: 4px 0 0; }
.review-all { margin: 4px 0 0; font-size: 13px; }
.review-all .link-btn { margin: 0; }
.review-group .list .tick-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; cursor: pointer; }
.review-same { margin-top: 16px; }
.review-same .list { color: var(--muted); }
/* My games: games not in your BGG collection (daily sync on) */
.bgg-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.bgg-note .link-btn { margin: 0 0 0 4px; font-size: 14px; }
.inc-chev { flex: none; color: var(--muted); font-size: 20px; line-height: 1; }

/* Add game dialog: same rows as the incoming dialog, with an Add label on the right */
.add-search { display: flex; gap: 8px; padding: 14px 20px 0; }
.add-search input {
  flex: 1; min-width: 0; box-sizing: border-box; height: 38px; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px;
}
.add-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.add-search .btn { height: 38px; padding-block: 0; }
.add-as { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 20px 0; font-size: 14px; }
.add-as select, .add-as input {
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
}
.add-as select:focus, .add-as input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.add-status { margin: 8px 20px 0; min-height: 1.4em; font-size: 13px; color: var(--muted); }
.add-results {
  list-style: none; margin: 4px 0 0; padding: 0 12px 8px; display: grid; gap: 2px; align-content: start;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.add-results:empty { display: none; }
.add-item:disabled { cursor: default; }
.add-item:disabled:hover { background: none; }
.add-item:disabled:hover .inc-title { color: var(--text); }
.add-act { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); }
.add-item:disabled .add-act { color: var(--muted); font-weight: 400; }
/* Searching: tinted boxes where the content will be, with a light band sweeping across */
.sk {
  display: block; border-radius: 6px;
  background: linear-gradient(100deg, var(--chip) 30%, var(--accent-soft) 50%, var(--chip) 70%) var(--chip);
  background-size: 300% 100%; animation: sk-shimmer 1.4s ease-in-out infinite;
}
.add-skeleton .inc-item { cursor: default; }
.add-skeleton .inc-item:hover { background: none; }
.add-skeleton .thumb { box-shadow: none; }
.sk-title { height: 15px; width: 60%; margin: 2px 0 8px; }
.sk-meta { height: 12px; width: 85%; }
.sk-act { flex: none; width: 32px; height: 13px; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.add-foot { margin: 0; padding: 12px 20px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
tr.game:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Box art in a game's details */
.detail-top { display: flex; gap: 16px; align-items: flex-start; }
.detail-main { flex: 1; min-width: 0; }
.box-art { flex: none; display: block; width: 240px; max-width: 40%; }
.box-art img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: left top; border-radius: 8px; }
@media (max-width: 560px) {
  .detail-top { flex-direction: column; }
  .box-art { width: 200px; max-width: 100%; }
}


.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; white-space: nowrap; vertical-align: top; }
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
}
th[aria-sort="ascending"]::after { content: " ▲"; }
th[aria-sort="descending"]::after { content: " ▼"; }
td { border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tr.game, tr.xrow { cursor: pointer; }
/* A game with expansions spans two rows (the game, then its pills); they hover and open together.
   An open game doesn't hover at all, so its rows keep the open tint as one block (issue #41). */
tr.game:not(.open):hover, tr.game:not(.open):hover + tr.xrow,
tr.xrow:not(.open):hover, tr.game:not(.open):has(+ tr.xrow:hover) { background: var(--row-hover); }
tr.game.has-x td { border-bottom-color: transparent; padding-bottom: 4px; }
tr.xrow td { padding-top: 0; padding-left: 70px; }
/* An open game reads as a drawer: plum tint, plum bar down the left, details on a card. */
tr.game.open, tr.xrow.open, tr.details { background: var(--open-bg); }
/* Not transparent: a collapsed border shows the table's surface through, a pale line across the block. */
tr.game.open td, tr.xrow.open td { border-bottom-color: var(--open-bg); }
tr.game.open td:first-child, tr.xrow.open td, tr.details td { box-shadow: inset 4px 0 0 var(--accent); }
/* An inset shadow stops at the border, so the open rows' bottom borders left 1px gaps in the
   bar (issue #41). Removing the borders would move the rows by a pixel; a strip over each one bridges it. */
@media (min-width: 721px) {
  tr.game.open td:first-child, tr.xrow.open td { position: relative; }
  tr.game.open td:first-child::after, tr.xrow.open td::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 4px; height: 1px; background: var(--accent);
  }
}
tr.game.open strong { color: var(--accent); }
td.title { white-space: normal; min-width: 200px; }
.title-wrap { display: flex; gap: 12px; align-items: flex-start; }
.thumb { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; background: var(--chip); }
/* A game with expansion pills (wide screens): the box art hangs down beside the pills, so they sit right
   under the title (and links, when shown) instead of below the picture. Phones place the thumbnail their own way. */
@media (min-width: 721px) {
  tr.game.has-x td.title { position: relative; }
  tr.game.has-x .title-wrap { padding-left: 56px; }
  tr.game.has-x .title-wrap > .thumb { position: absolute; left: 14px; top: 10px; z-index: 1; }
}
.votes { font-size: 13px; }
.votes .players-range { flex-basis: 100%; font-size: 14px; font-variant-numeric: tabular-nums; } /* the count on its own line, the pills under it */
.vote { padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.vote.best { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.vote.good { background: var(--accent-soft); color: var(--accent); }
.vote.not { background: var(--chip); color: var(--muted); text-decoration: line-through; }
/* One expansions list: owned (green) and incoming (blue) first, then the ones BGG lists that we don't own (greyed). */
.expansions { margin-top: 12px; container-type: inline-size; }
.exp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.exp-head b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.exp-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.exp { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; min-width: 0; position: relative; }
.exp:has(.exp-act) { padding-right: 30px; }
/* Quick + / − (add to or remove from your games), in an expansion's top right corner. */
.exp-act {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; line-height: 1; font-weight: 600;
  color: currentColor; background: var(--surface); border: 1px solid currentColor; opacity: 0.85;
}
.exp-act:hover { opacity: 1; border-width: 2px; }
.exp-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-act:disabled { cursor: default; opacity: 0.6; }
.exp.owned .exp-act { color: var(--owned); }
.exp.incoming .exp-act { color: var(--incoming); }
.exp.missing .exp-act { color: var(--accent); }
/* Phones: the same small circle, with an invisible larger hit area for fingers. */
@media (max-width: 720px) { .exp-act { width: 24px; height: 24px; } .exp-act::after { content: ""; position: absolute; inset: -10px; } .exp:has(.exp-act) { padding-right: 34px; } }
.exp a { overflow-wrap: anywhere; }
.exp .why { font-size: 12px; }
.exp-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.exp.owned { background: var(--owned-bg); border-color: transparent; }
.exp.owned a, .exp.owned .exp-state { color: var(--owned); }
.exp.owned a { font-weight: 600; }
.exp.incoming { background: var(--incoming-bg); border-color: transparent; }
.exp.incoming a, .exp.incoming .exp-state { color: var(--incoming); }
.exp.missing { border-style: dashed; }
.exp.missing a { color: var(--muted); }
.exp.missing a:hover { color: var(--accent); }
.exp.missing .price:empty { display: none; }
.exp.missing .price a { color: var(--accent); font-weight: 600; }
.price-credit { margin-left: auto; font-size: 12px; color: var(--muted); }
.price-credit img { height: 14px; vertical-align: -2px; margin-right: 4px; }
/* The credit stays on the heading line when it fits there, else moves under the list (never wraps, never hidden). */
.price-credit.below { display: none; margin: 8px 0 0; text-align: right; }
@container (max-width: 28rem) {
  .exp-head .price-credit { display: none; }
  .price-credit.below { display: block; }
}
.exp-more { margin-top: 6px; }
.exp-more summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.exp-more .exp-list { margin-top: 8px; }
td.title strong { font-weight: 600; }
.year { color: var(--muted); font-size: 13px; margin-left: 4px; }
.links { font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
/* Expansion pills on each row: owned green, incoming blue, not owned greyed and dashed */
.xpills { display: flex; flex-wrap: wrap; gap: 4px; }
.xpill {
  font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.xpill.owned { background: var(--owned-bg); color: var(--owned); border-color: transparent; font-weight: 600; }
.xpill.incoming { background: var(--incoming-bg); color: var(--incoming); border-color: transparent; font-weight: 600; }
.xpill.missing { border-style: dashed; }
.xpill.more { background: var(--chip); color: var(--text); border-color: transparent; }
.exp-range { font-size: 12px; color: var(--muted); white-space: nowrap; }
.incoming-badge { display: inline-block; margin: 4px 6px 0 0; padding: 0 8px; border-radius: 6px; background: var(--incoming-bg); color: var(--incoming); font-size: 12px; font-weight: 600; }
tr.game.incoming strong { color: var(--muted); }
td.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }

.best { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.weight { display: flex; align-items: center; gap: 8px; }
.dl.complexity .bar { display: block; } /* the gauge stays in the details on phones, where the table hides it */
.bar { width: 50px; height: 6px; border-radius: 3px; background: var(--bar-bg); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }

tr.details td { white-space: normal; padding: 0 14px 14px 18px; border-bottom: 1px solid var(--border); }
/* The details never size the table's columns, so opening a game doesn't shift them: width 0 gives the
   card no say in the table's layout, and min-width 100% then fills the cell it's given. */
tr.details .detail-card { width: 0; min-width: 100%; box-sizing: border-box; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
/* One labelled line in a game's details: BGG, Player votes, Details, Links, Owners, the tags, Combines with. */
/* Label | values, so a wrapped line of values starts under the first value, not under the label. */
.dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 8px; align-items: baseline; margin-top: 8px; font-size: 14px; }
.detail-main > .dl:first-child { margin-top: 0; }
.dl > b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.dv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.dl.owners .dv, .dl.combines .dv { display: block; }
.dl.bgg .dv { align-items: center; gap: 8px; }
.dl.credits .dv { gap: 2px 16px; }
@media (max-width: 560px) { .dl { grid-template-columns: 92px minmax(0, 1fr); } } /* room for COMPLEXITY */
.dl i { font-style: normal; color: var(--muted); }
.dl.detail-links .sep { color: var(--muted); }
/* The tags always start at the left edge, under the box art, never beside it. */
.tags { margin-top: 12px; }
.tags > .dl:first-child { margin-top: 0; }
.dl.tag-group { margin-top: 6px; }
.chip { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; background: var(--chip); font-size: 13px; border: 0; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chip:hover { background: var(--accent-soft); color: var(--accent); }
.family .chip { color: var(--muted); cursor: default; }
.family .chip:hover { background: var(--chip); color: var(--muted); }

.like { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.like > b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.like ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.like li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.why { color: var(--muted); font-size: 13px; }
.open-game { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; font-weight: 600; text-align: left; }
.open-game:hover { text-decoration: underline; }
.note { color: var(--muted); font-size: 13px; margin-top: 6px; }

.combo { position: relative; width: 260px; max-width: 100%; }
.combo input { width: 100%; padding-right: 30px; text-transform: none; letter-spacing: 0; }
.combo .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.combo ul {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px; overflow-y: auto; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text);
}
.combo li { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.combo li[aria-selected="true"], .combo li:hover { background: var(--accent-soft); color: var(--accent); }
.combo li mark { background: none; color: inherit; font-weight: 700; }
.combo li small { display: block; color: var(--muted); font-size: 12px; }
.combo li.none { color: var(--muted); cursor: default; background: none; }

.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 2px; border-radius: 999px; background: var(--chip); font-size: 13px; }
.pchip button { border: 0; background: none; font: inherit; cursor: pointer; color: inherit; }
.pchip .mode { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--on-accent); background: var(--accent); }
.pchip.prefer .mode { background: var(--muted); }
.pchip.not .mode { background: var(--text); color: var(--bg); }
.pchip.not { text-decoration: line-through; text-decoration-color: var(--muted); }
.pchip .remove { color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; margin-top: 6px; }
.link-btn:hover { text-decoration: underline; }

.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
footer { margin-top: 20px; font-size: 13px; color: var(--muted); }

/* Smart box: one input for searching and asking */
.smart { position: relative; margin-top: 22px; }
.smart input {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 12px 40px;
}
.smart input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* One clear button everywhere (issue #37): the browser's own one for type="search" is hidden. */
.smart input { padding-right: 48px; }
.smart input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.smart-clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: 22px; line-height: 1; color: var(--muted);
}
.smart-clear:hover, .smart-clear:focus-visible { color: var(--accent); }
.smart-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.smart-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--muted); pointer-events: none; }
.smart-hint { min-height: 20px; margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.smart-hint b { color: var(--text); font-weight: 600; }

/* Chip bar: compact filter menus */
.chipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.cm { position: relative; display: inline-flex; }
.fchip {
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.fchip::after { content: " ▾"; color: var(--muted); font-size: 11px; }
.fchip.on { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.fchip:hover { border-color: var(--accent); }
.fchip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; border-radius: 999px 0 0 999px; padding-right: 8px; }
.fchip.on::after { content: ""; }
.fclear {
  font: inherit; font-size: 12px; cursor: pointer; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-left: 0; border-radius: 0 999px 999px 0; padding: 0 10px 0 6px;
}
.fclear:hover { background: var(--accent); color: var(--on-accent); }
.cm-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 180px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
.cm-pop.cm-wide { width: 300px; }
.cm-pop .combo { width: 100%; }
.cm-pop input {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.cm-pop input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pop-note { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.pop-label { margin: 6px 2px 4px; font-size: 12px; color: var(--muted); }
.pop-label:first-child { margin-top: 0; }
.opt-grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.opt-list { display: grid; gap: 2px; }
.opt {
  font: inherit; font-size: 14px; color: var(--text); background: none; cursor: pointer; text-align: left;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}
.opt-grid .opt { text-align: center; padding: 6px 0; border-color: var(--border); }
.opt small { color: var(--muted); font-size: 12px; margin-left: 6px; }
.opt:hover, .opt:focus-visible { background: var(--accent-soft); color: var(--accent); }
.opt.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.opt.sel small { color: inherit; }
.chipbar .pchips { margin: 0; }
.clear-all { margin: 0 0 0 4px; }

/* Suggestions strip: shown once a filter says what you're after */
.suggest { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.suggest-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.suggest-head h2 { margin: 0; font-size: 15px; }
.suggest-sub { color: var(--muted); font-size: 13px; }
.suggest-head .link-btn { margin: 0 0 0 auto; }
.suggest-list { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.suggest-list li { font-size: 14px; }
.suggest-list li::marker { color: var(--accent); font-weight: 700; }
.suggest-list .why { margin-left: 8px; }
.suggest-list li.note { list-style: none; margin-left: -22px; }

/* Phones: each game is a short row instead of table columns: the thumbnail, then the title and year,
   two muted lines of stats (players and best with · time, then complexity · rating: every Sort key,
   breaking in the same place on every row; .row-stats, from phoneStats()) in place of the cells, and
   the expansion pills on one line. The header is
   hidden (the Sort chip stands in), and the BGG / Rules / How-to links move into the details. The rows
   get explicit table roles in app.js, since display: block drops them in Safari. */
.cm-sort, .xpill.more-narrow, .row-stats { display: none; }
@media (max-width: 720px) {
  .col-hide-sm { display: none; }
  th, td { padding: 8px 10px; }
  .bar { display: none; }
  .table-wrap { overflow: hidden; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap thead, .table-wrap td.col-hide-sm { display: none; }
  .table-wrap td { padding: 0; border: 0; white-space: normal; }
  tr.game, tr.xrow, tr.details { border-bottom: 1px solid var(--border); }
  tbody tr:last-child { border-bottom: 0; }
  tr.game { position: relative; min-height: 64px; padding: 10px 12px 10px 64px; scroll-margin-top: 60px; } /* clear of the 52px top bar */
  tr.game.has-x, tr.game.open, tr.xrow.open { border-bottom-color: transparent; }
  tr.game.has-x { padding-bottom: 4px; }
  tr.game .thumb { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; }
  td.title { min-width: 0; }
  .title-wrap { display: block; }
  td.title strong { overflow-wrap: anywhere; }
  tr.game .links { display: none; }
  .table-wrap tr.game > td.num { display: none; }
  .row-stats { display: block; margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .row-stats > div { min-height: 20px; } /* an empty first line still holds its place */
  .row-stats > div + div { margin-top: 2px; }
  .row-stats .is-best { color: var(--accent); font-weight: 600; }
  .row-stats .rating { min-width: 32px; height: 20px; font-size: 12px; vertical-align: 1px; }
  tr.game .incoming-badge { margin: 2px 0 0; }
  tr.xrow td { padding: 0 12px 10px 64px; }
  tr.xrow .xpills { flex-wrap: nowrap; overflow: hidden; }
  tr.xrow .xpill { flex: 1 1 0; min-width: 0; max-width: max-content; } /* equal shares, short ones stay short */
  tr.xrow .xpill.more { flex: none; }
  /* An open game drops its expansion pills: the expansions are in the details below. */
  tr.xrow.open { display: none; }
  /* No border under an open game, so the bar runs on into the details unbroken (issue #41); 1px more
     padding keeps the row the same height. */
  tr.game.open, tr.game.open.has-x { border-bottom: 0; padding-bottom: 11px; }
}
@media (max-width: 480px) {
  tr.xrow .xpill:nth-child(3):not(.more), tr.xrow .xpill.more-wide { display: none; }
  tr.xrow .xpill.more-narrow { display: inline; }
}
@media (max-width: 720px) {
  /* The open game's plum bar runs down the row's edge, not the title's. */
  tr.game.open td:first-child, tr.xrow.open td, tr.details td { box-shadow: none; }
  tr.game.open, tr.xrow.open, tr.details { box-shadow: inset 4px 0 0 var(--accent); }
  tr.details td { padding: 0 8px 12px 12px; }
  .exp-list { grid-template-columns: 1fr; }
  .dl.detail-links a { display: inline-block; padding: 4px 0; }
  .cm-sort { display: inline-flex; }

  /* iOS zooms in on a focused field whose text is under 16px (and doesn't zoom back), so fields are 16px. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  /* Bigger tap targets (44px where it counts), from padding rather than bigger text. */
  .fchip, .fclear, .btn, .theme-btn, .topbar-link, .pin-btn { min-height: 40px; }
  .fchip, .btn, .pin-btn { padding-inline: 14px; }
  .theme-btn, .topbar-link { display: inline-flex; align-items: center; }
  .link-btn { min-height: 44px; padding: 0 4px; margin-top: 0; }
  .list li .link-btn { padding: 0 8px; }
  .chip { min-height: 28px; padding: 2px 10px; } /* compact, still over WCAG's 24px target with the gap */
  .opt { min-height: 44px; }
  /* Top picks keep the desktop's compact lines (not the 44px link-btn): 20px lines 24px apart, which
     still meets WCAG's minimum target spacing. */
  .picks-mini { gap: 4px; }
  .picks-mini .link-btn { min-height: 0; padding: 0; line-height: 20px; }
  .crumb a { display: inline-block; padding: 6px 0; }
  .inline-form .btn, .inline-form input:not([type="file"]), .inline-form select, .field input, .field select { height: 44px; }
  .copy-edit select, .copy-edit input, .add-as select, .add-as input, .due-act input { min-height: 44px; }
  .add-search input, .add-search .btn { height: 44px; }
  /* Settings on phones: a short breadcrumb, actions on their own line, people as stacked rows. */
  .crumb-full { display: none; }
  .crumb-short { display: inline-block; }
  .list li > .row-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 12px; }
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table tr { display: block; }
  .people-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .people-table tbody tr:last-child { border-bottom: 0; }
  table.plain.people-table td { display: inline; padding: 0; border: 0; }
  table.plain.people-table td:nth-child(-n+2) { display: block; }
  .people-table td:nth-child(2) { overflow-wrap: anywhere; color: var(--muted); }
  .people-table td:nth-child(3)::before { content: "Games "; }
  .people-table td:nth-child(4)::before { content: " · Groups "; }
  .people-table td:nth-child(5)::before { content: " · Seen "; }
  table.plain.people-table td.row-actions { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .people-table td.row-actions:empty { display: none; }
}

.single-owner .col-owner { display: none; }

/* Who's playing: a multi-select of the people on the page */
.opt.check::before { content: "☐ "; color: var(--muted); }
.opt.check.sel::before { content: "☑ "; color: inherit; }

/* Owners in a game's details, and editing your own copies */
.mine > b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
/* Notes and status: name | controls, one grid for every copy so their controls line up. The controls
   flow onto as many lines as the width needs, each line starting under the first; "Saving…" / "Saved"
   always gets its own line under them. */
.mine { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 8px 12px; }
.mine > b { grid-column: 1 / -1; }
.remove-game { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.remove-game > b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.remove-game p { margin: 6px 0 10px; font-size: 14px; }
.copy-edit { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; font-size: 14px; }
.copy-edit .copy-name { font-weight: 600; padding-top: 5px; overflow-wrap: anywhere; }
/* On a group page, read-only (issue #43): title | each owner's status and notes. */
.mine.read-only { font-size: 14px; row-gap: 12px; }
.mine.read-only .copy-name { font-weight: 600; overflow-wrap: anywhere; }
.copy-notes li.why { font-size: inherit; }
.copy-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.copy-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.copy-fields select { flex: none; }
.copy-fields input[name="expected"] { flex: 0 1 11rem; min-width: min(9.5rem, 100%); }
.copy-edit .copy-fields > input[name="notes"] { flex: 1 1 14rem; min-width: 0; }
.copy-fields .saved { flex-basis: 100%; }
/* Empty, it takes no room (its row gap cancelled) but stays rendered, so screen readers still hear it. */
.copy-fields .saved:empty { height: 0; margin-top: -6px; }
.copy-edit select, .copy-edit input {
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
}
.copy-edit select:focus, .copy-edit input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn {
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; padding: 5px 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.btn.quiet { background: var(--surface); color: var(--accent); }
/* Destructive actions (lib/confirm.js has the three tiers): outlined red where they start, filled red only
   for a confirm dialog's last button, red text for row actions. Labels always name the action. */
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn.danger.solid { background: var(--danger); color: var(--on-danger); }
.btn.danger.solid:hover:not(:disabled) { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.btn.danger:focus-visible, .link-btn.danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.link-btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.6; cursor: default; }
.saved { color: var(--owned); font-size: 13px; }
.saved { display: inline-flex; align-items: center; gap: 6px; }
.saved.error { color: var(--text); }
/* "Saving…": the spinner stands still for anyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) { .saved .spinner { animation: none; } }

/* Landing and management pages */
.group-list .group-tile { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.group-list .rail-emoji { font-size: 19px; }
.group-list .rail-mono { border: 0; width: auto; height: auto; font-size: 15px; font-weight: 700; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-top: 18px; }
.panel h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
/* A status panel (Recent imports), set apart from the panels you act in */
.panel-tint { background: var(--chip); border-color: transparent; }
.panel-tint h2 { font-size: 15px; }
.panel h3 { margin: 16px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.panel p { margin: 6px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
a.btn { display: inline-block; text-decoration: none; }
a.btn:hover { text-decoration: none; }
/* Group look: palette swatches and icon choices (radio buttons drawn as tiles). */
.choices { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choices legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.choices input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch, .icon-choice > span {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 6px; background: var(--surface);
}
.swatch .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.icon-choice > span { padding: 4px 8px; border-radius: 10px; font-size: 22px; line-height: 1.2; min-width: 44px; justify-content: center; }
.icon-choice.none > span { font-size: 14px; padding: 8px 12px; }
.swatch:has(input:checked), .icon-choice input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.swatch:has(input:focus-visible), .icon-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.other-icon { flex-basis: 100%; max-width: 260px; margin-top: 4px; }
#look-form .actions { margin-top: 14px; align-items: center; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.inline-form input, .inline-form select, .field input, .field select {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
}
.inline-form input[type="text"], .inline-form input[type="url"] { flex: 1; min-width: 200px; }
.inline-form input:focus, .inline-form select:focus, .field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field { display: grid; gap: 4px; font-size: 14px; }
.tick-row { display: flex; gap: 8px; align-items: baseline; margin: 12px 0; }
/* Controls and buttons one height, so a row lines up; with labels above the inputs, along the bottom. */
.inline-form input:not([type="file"]), .inline-form select, .field input, .field select, .inline-form .btn { box-sizing: border-box; height: 36px; }
.inline-form .btn { padding-block: 0; }
.inline-form:has(> .field) { align-items: flex-end; }
/* A file field drawn as a button (the input itself is visually hidden, so it still takes focus) */
.file-btn { display: inline-flex; align-items: center; }
.inline-form input[type="file"]:focus-visible + .file-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-name { font-size: 14px; overflow-wrap: anywhere; }
.file-name:empty { display: none; }
.crumb-short { display: none; }
.error { color: var(--danger); font-weight: 600; }
.ok { color: var(--owned); font-weight: 600; }
code { font-size: 13px; background: var(--chip); padding: 1px 5px; border-radius: 4px; }
.list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: 8px; }
.list li:hover { background: var(--row-hover); }
.list .grow { flex: 1; min-width: 0; }
.list .meta { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.link-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.link-box input { flex: 1; min-width: 220px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.progress { height: 8px; border-radius: 4px; background: var(--bar-bg); overflow: hidden; margin: 8px 0; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.counts b { font-size: 18px; margin-right: 4px; }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain th, table.plain td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: normal; cursor: default; }
table.plain th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.scroll-x { overflow-x: auto; }
.danger-zone { border-left: 4px solid var(--danger); }
/* The confirm dialog (lib/confirm.js) */
.confirm-dlg { width: min(440px, calc(100vw - 32px)); }
.confirm-main { padding: 14px 20px 6px; display: grid; gap: 12px; }
.confirm-main p { margin: 0; }
.confirm-main .field { font-size: 14px; }
.confirm-main input {
  box-sizing: border-box; width: 100%; height: 40px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 0 10px;
}
.confirm-main input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.confirm-dlg .due-foot { border-top: 0; flex-wrap: wrap; }

/* ---- group palettes (generated by scripts/palettes.js; don't edit by hand) ---- */
:root {
  --shell-bg: #331b3c;
  --shell-line: #482555;
  --shell-active: #582d67;
  --shell-text: #ffffff;
  --shell-muted: #dac7e1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell-bg: #160d19;
    --shell-line: #2b1d30;
    --shell-active: #3a2442;
    --shell-text: #efeaf1;
    --shell-muted: #bdadc2;
  }
}
:root[data-theme="dark"] {
  --shell-bg: #160d19;
  --shell-line: #2b1d30;
  --shell-active: #3a2442;
  --shell-text: #efeaf1;
  --shell-muted: #bdadc2;
}
:root[data-palette="teal"] {
  --bg: #f4f8f8;
  --surface: #ffffff;
  --text: #1a2625;
  --muted: #55605f;
  --border: #dfe8e8;
  --accent: #2b6767;
  --on-accent: #ffffff;
  --accent-soft: #e2f3f3;
  --row-hover: #f7fbfb;
  --bar-bg: #e5eeee;
  --chip: #ebf3f3;
  --open-bg: #e3f3f3;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
  --shell-bg: #1a3d3d;
  --shell-line: #245656;
  --shell-active: #2c6868;
  --shell-text: #ffffff;
  --shell-muted: #c7e1e1;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="teal"]:not([data-theme="light"]) {
    --bg: #121919;
    --surface: #1a2322;
    --text: #e4efef;
    --muted: #9eafae;
    --border: #2d3a39;
    --accent: #8ad7d8;
    --on-accent: #121919;
    --accent-soft: #233b3a;
    --row-hover: #202a2a;
    --bar-bg: #2d3a39;
    --chip: #232e2e;
    --open-bg: #223433;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
    --shell-bg: #0d1919;
    --shell-line: #1d3030;
    --shell-active: #244242;
    --shell-text: #eaf1f1;
    --shell-muted: #adc2c2;
  }
}
:root[data-palette="teal"][data-theme="dark"] {
  --bg: #121919;
  --surface: #1a2322;
  --text: #e4efef;
  --muted: #9eafae;
  --border: #2d3a39;
  --accent: #8ad7d8;
  --on-accent: #121919;
  --accent-soft: #233b3a;
  --row-hover: #202a2a;
  --bar-bg: #2d3a39;
  --chip: #232e2e;
  --open-bg: #223433;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
  --shell-bg: #0d1919;
  --shell-line: #1d3030;
  --shell-active: #244242;
  --shell-text: #eaf1f1;
  --shell-muted: #adc2c2;
}
:root[data-palette="forest"] {
  --bg: #f4f8f5;
  --surface: #ffffff;
  --text: #1b251d;
  --muted: #565f59;
  --border: #dfe8e2;
  --accent: #2f6941;
  --on-accent: #ffffff;
  --accent-soft: #e3f2e7;
  --row-hover: #f7fbf8;
  --bar-bg: #e5eee8;
  --chip: #ebf3ed;
  --open-bg: #e4f2e8;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
  --shell-bg: #1b3c25;
  --shell-line: #265534;
  --shell-active: #2e663f;
  --shell-text: #ffffff;
  --shell-muted: #c7e1cf;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="forest"]:not([data-theme="light"]) {
    --bg: #121914;
    --surface: #1a231c;
    --text: #e5eee7;
    --muted: #9cac9f;
    --border: #2e3930;
    --accent: #8ed4a1;
    --on-accent: #121914;
    --accent-soft: #243a29;
    --row-hover: #212922;
    --bar-bg: #2e3930;
    --chip: #242d26;
    --open-bg: #233326;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
    --shell-bg: #0d1911;
    --shell-line: #1d3023;
    --shell-active: #24422d;
    --shell-text: #eaf1ec;
    --shell-muted: #adc2b4;
  }
}
:root[data-palette="forest"][data-theme="dark"] {
  --bg: #121914;
  --surface: #1a231c;
  --text: #e5eee7;
  --muted: #9cac9f;
  --border: #2e3930;
  --accent: #8ed4a1;
  --on-accent: #121914;
  --accent-soft: #243a29;
  --row-hover: #212922;
  --bar-bg: #2e3930;
  --chip: #242d26;
  --open-bg: #233326;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
  --shell-bg: #0d1911;
  --shell-line: #1d3023;
  --shell-active: #24422d;
  --shell-text: #eaf1ec;
  --shell-muted: #adc2b4;
}
:root[data-palette="ocean"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2126;
  --muted: #555960;
  --border: #dfe3e8;
  --accent: #375b7f;
  --on-accent: #ffffff;
  --accent-soft: #e2eaf3;
  --row-hover: #f7f9fb;
  --bar-bg: #e5e9ee;
  --chip: #ebeff3;
  --open-bg: #e3ebf3;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
  --shell-bg: #1a2b3c;
  --shell-line: #253d55;
  --shell-active: #2d4a67;
  --shell-text: #ffffff;
  --shell-muted: #c7d4e1;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="ocean"]:not([data-theme="light"]) {
    --bg: #121619;
    --surface: #1a1f23;
    --text: #e4eaef;
    --muted: #9ba6ad;
    --border: #2d343a;
    --accent: #8ab0d8;
    --on-accent: #121619;
    --accent-soft: #23303b;
    --row-hover: #20252a;
    --bar-bg: #2d343a;
    --chip: #23292e;
    --open-bg: #222c34;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
    --shell-bg: #0d1319;
    --shell-line: #1d2630;
    --shell-active: #243342;
    --shell-text: #eaedf1;
    --shell-muted: #adb8c2;
  }
}
:root[data-palette="ocean"][data-theme="dark"] {
  --bg: #121619;
  --surface: #1a1f23;
  --text: #e4eaef;
  --muted: #9ba6ad;
  --border: #2d343a;
  --accent: #8ab0d8;
  --on-accent: #121619;
  --accent-soft: #23303b;
  --row-hover: #20252a;
  --bar-bg: #2d343a;
  --chip: #23292e;
  --open-bg: #222c34;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
  --shell-bg: #0d1319;
  --shell-line: #1d2630;
  --shell-active: #243342;
  --shell-text: #eaedf1;
  --shell-muted: #adb8c2;
}
:root[data-palette="indigo"] {
  --bg: #f4f4f8;
  --surface: #ffffff;
  --text: #1a1a26;
  --muted: #585763;
  --border: #e0dfe8;
  --accent: #463f8f;
  --on-accent: #ffffff;
  --accent-soft: #e4e2f3;
  --row-hover: #f7f7fb;
  --bar-bg: #e6e5ee;
  --chip: #ecebf3;
  --open-bg: #e5e3f3;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
  --shell-bg: #1d1b3c;
  --shell-line: #2a2555;
  --shell-active: #322d67;
  --shell-text: #ffffff;
  --shell-muted: #c9c7e1;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="indigo"]:not([data-theme="light"]) {
    --bg: #121219;
    --surface: #1a1a23;
    --text: #e5e4ef;
    --muted: #9c9bad;
    --border: #2d2d3a;
    --accent: #9e96db;
    --on-accent: #121219;
    --accent-soft: #24233b;
    --row-hover: #20202a;
    --bar-bg: #2d2d3a;
    --chip: #24232e;
    --open-bg: #222234;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
    --shell-bg: #0e0d19;
    --shell-line: #1e1d30;
    --shell-active: #262442;
    --shell-text: #eaeaf1;
    --shell-muted: #afadc2;
  }
}
:root[data-palette="indigo"][data-theme="dark"] {
  --bg: #121219;
  --surface: #1a1a23;
  --text: #e5e4ef;
  --muted: #9c9bad;
  --border: #2d2d3a;
  --accent: #9e96db;
  --on-accent: #121219;
  --accent-soft: #24233b;
  --row-hover: #20202a;
  --bar-bg: #2d2d3a;
  --chip: #24232e;
  --open-bg: #222234;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
  --shell-bg: #0e0d19;
  --shell-line: #1e1d30;
  --shell-active: #262442;
  --shell-text: #eaeaf1;
  --shell-muted: #afadc2;
}
:root[data-palette="rose"] {
  --bg: #f8f4f5;
  --surface: #ffffff;
  --text: #261a1f;
  --muted: #605559;
  --border: #e8dfe2;
  --accent: #8b3d58;
  --on-accent: #ffffff;
  --accent-soft: #f3e2e7;
  --row-hover: #fbf7f8;
  --bar-bg: #eee5e8;
  --chip: #f3ebee;
  --open-bg: #f3e3e8;
  --danger: #b3140d;
  --danger-bg: #fde9e6;
  --on-danger: #ffffff;
  --shell-bg: #3c1a26;
  --shell-line: #552536;
  --shell-active: #672d41;
  --shell-text: #ffffff;
  --shell-muted: #e1c7d0;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="rose"]:not([data-theme="light"]) {
    --bg: #191214;
    --surface: #231a1e;
    --text: #efe4e8;
    --muted: #ad9ba2;
    --border: #3a2d32;
    --accent: #d98ea6;
    --on-accent: #191214;
    --accent-soft: #3b232c;
    --row-hover: #2a2024;
    --bar-bg: #3a2d32;
    --chip: #2e2327;
    --open-bg: #342229;
    --danger: #ff8c78;
    --danger-bg: #401a14;
    --on-danger: #1a0e0e;
    --shell-bg: #190d11;
    --shell-line: #301d23;
    --shell-active: #42242e;
    --shell-text: #f1eaec;
    --shell-muted: #c2adb4;
  }
}
:root[data-palette="rose"][data-theme="dark"] {
  --bg: #191214;
  --surface: #231a1e;
  --text: #efe4e8;
  --muted: #ad9ba2;
  --border: #3a2d32;
  --accent: #d98ea6;
  --on-accent: #191214;
  --accent-soft: #3b232c;
  --row-hover: #2a2024;
  --bar-bg: #3a2d32;
  --chip: #2e2327;
  --open-bg: #342229;
  --danger: #ff8c78;
  --danger-bg: #401a14;
  --on-danger: #1a0e0e;
  --shell-bg: #190d11;
  --shell-line: #301d23;
  --shell-active: #42242e;
  --shell-text: #f1eaec;
  --shell-muted: #c2adb4;
}
:root[data-palette="copper"] {
  --bg: #f8f6f4;
  --surface: #ffffff;
  --text: #261e1a;
  --muted: #605955;
  --border: #e8e3df;
  --accent: #7b5235;
  --on-accent: #ffffff;
  --accent-soft: #f3e9e2;
  --row-hover: #fbf9f7;
  --bar-bg: #eee9e5;
  --chip: #f3eeeb;
  --open-bg: #f3e9e3;
  --danger: #a50f2d;
  --danger-bg: #fde8ec;
  --on-danger: #ffffff;
  --shell-bg: #3d281a;
  --shell-line: #563925;
  --shell-active: #67452d;
  --shell-text: #ffffff;
  --shell-muted: #e1d1c7;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="copper"]:not([data-theme="light"]) {
    --bg: #191412;
    --surface: #231d1a;
    --text: #efe8e4;
    --muted: #ada19b;
    --border: #3a312d;
    --accent: #d8a88a;
    --on-accent: #191412;
    --accent-soft: #3b2b23;
    --row-hover: #2a2320;
    --bar-bg: #3a312d;
    --chip: #2e2723;
    --open-bg: #342722;
    --danger: #ff8a9c;
    --danger-bg: #40141c;
    --on-danger: #1a0e0e;
    --shell-bg: #19120d;
    --shell-line: #30251d;
    --shell-active: #423024;
    --shell-text: #f1edea;
    --shell-muted: #c2b6ad;
  }
}
:root[data-palette="copper"][data-theme="dark"] {
  --bg: #191412;
  --surface: #231d1a;
  --text: #efe8e4;
  --muted: #ada19b;
  --border: #3a312d;
  --accent: #d8a88a;
  --on-accent: #191412;
  --accent-soft: #3b2b23;
  --row-hover: #2a2320;
  --bar-bg: #3a312d;
  --chip: #2e2723;
  --open-bg: #342722;
  --danger: #ff8a9c;
  --danger-bg: #40141c;
  --on-danger: #1a0e0e;
  --shell-bg: #19120d;
  --shell-line: #30251d;
  --shell-active: #423024;
  --shell-text: #f1edea;
  --shell-muted: #c2b6ad;
}
:root[data-palette="slate"] {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --text: #1e2022;
  --muted: #5b5b5e;
  --border: #e2e3e5;
  --accent: #515b69;
  --on-accent: #ffffff;
  --accent-soft: #e8eaed;
  --row-hover: #f8f9fa;
  --bar-bg: #e8e9eb;
  --chip: #eeeff0;
  --open-bg: #e8eaee;
  --danger: #b0241b;
  --danger-bg: #fcebe9;
  --on-danger: #ffffff;
  --shell-bg: #262a31;
  --shell-line: #353c45;
  --shell-active: #404853;
  --shell-text: #ffffff;
  --shell-muted: #ced3d9;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="slate"]:not([data-theme="light"]) {
    --bg: #141517;
    --surface: #1d1e20;
    --text: #e8e9eb;
    --muted: #a1a4a7;
    --border: #313336;
    --accent: #a3aebf;
    --on-accent: #141517;
    --accent-soft: #2b2f33;
    --row-hover: #232527;
    --bar-bg: #313336;
    --chip: #27282a;
    --open-bg: #282b2e;
    --danger: #ff9c90;
    --danger-bg: #3d1c1a;
    --on-danger: #1a0e0e;
    --shell-bg: #111316;
    --shell-line: #21252b;
    --shell-active: #2c323a;
    --shell-text: #eaedf1;
    --shell-muted: #adb6c2;
  }
}
:root[data-palette="slate"][data-theme="dark"] {
  --bg: #141517;
  --surface: #1d1e20;
  --text: #e8e9eb;
  --muted: #a1a4a7;
  --border: #313336;
  --accent: #a3aebf;
  --on-accent: #141517;
  --accent-soft: #2b2f33;
  --row-hover: #232527;
  --bar-bg: #313336;
  --chip: #27282a;
  --open-bg: #282b2e;
  --danger: #ff9c90;
  --danger-bg: #3d1c1a;
  --on-danger: #1a0e0e;
  --shell-bg: #111316;
  --shell-line: #21252b;
  --shell-active: #2c323a;
  --shell-text: #eaedf1;
  --shell-muted: #adb6c2;
}
/* ---- end of group palettes ---- */