/* Deliberately minimal. Theme comes later, with the couple. Tokens exist only
   so that restyling is a token swap rather than a rewrite. */
:root {
  --ink: #222; --muted: #666; --ground: #fff; --line: #ddd; --bad: #a12;
  --gap: 1rem;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #eee; --muted: #999; --ground: #151515; --line: #333; --bad: #f88; }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: var(--gap); background: var(--ground); color: var(--ink);
  font: 16px/1.5 system-ui, sans-serif;
}
main { max-width: 60rem; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 0.5rem; }
label { display: block; margin: 0.5rem 0; }
input { display: block; width: 100%; max-width: 22rem; padding: 0.5rem; margin-top: 0.25rem;
        border: 1px solid var(--line); background: var(--ground); color: var(--ink); }
button { padding: 0.5rem 1rem; margin-top: 0.5rem; cursor: pointer; }
table { border-collapse: collapse; margin-top: var(--gap); }
th, td { text-align: left; padding: 0.35rem 1rem 0.35rem 0; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); }
#error { color: var(--bad); min-height: 1.5em; }
#why { color: var(--muted); }
textarea, select { display: block; width: 100%; max-width: 34rem; padding: 0.5rem;
  margin-top: 0.25rem; border: 1px solid var(--line); background: var(--ground);
  color: var(--ink); font: inherit; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }
small { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
#danger { border: 1px solid var(--bad); padding: var(--gap); }
#wipeMsg, #cfgMsg { color: var(--muted); min-height: 1.5em; }
ul { padding-left: 1.2rem; }
li { margin: 0.25rem 0; }
li label { display: inline; margin: 0; }
details { margin: 1rem 0; }
.warn { border-left: 3px solid var(--bad); padding-left: 0.75rem; }
input[type=checkbox] { display: inline; width: auto; margin-right: 0.35rem; }
input[type=file] { max-width: 100%; }
.actions, .after { margin: 0.25rem 0 0.75rem; }
.after span { color: var(--muted); margin-right: 0.5rem; }
#quick { border: 1px solid var(--line); padding: 0.75rem 1rem; margin-bottom: 1rem; }
#quick summary { cursor: pointer; }
#quick form { margin-top: 0.75rem; }
.counts { display: flex; gap: 1rem; }
.counts label { flex: 1 1 6rem; }
#quickMsg { margin-top: 0.75rem; }
#quickMsg p { margin: 0.25rem 0; }
.banner { border: 1px solid var(--line); border-left: 3px solid var(--ink);
          padding: 0.6rem 0.9rem; margin: 0 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.chip { margin: 0; padding: 0.35rem 0.7rem; border: 1px solid var(--line);
        background: var(--ground); color: var(--muted); border-radius: 100px; }
.chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.done { color: var(--muted); padding: 1rem 0; }
.langBtn { float: inline-end; margin: 0 0 0.5rem; padding: 0.3rem 0.7rem; }
[dir=rtl] input, [dir=rtl] select { text-align: right; }

/* Guest list. The header stays put and only the rows move, so you never lose
   which column you are reading half way down the list. Sticky cells drop their
   border when they detach, hence the shadow. */
.tablewrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line);
             margin: 0.5rem 0 1rem; }
.tablewrap table { margin: 0; width: 100%; }
.tablewrap th { position: sticky; top: 0; z-index: 1; background: var(--ground);
                border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.tablewrap th, .tablewrap td { padding: 0.45rem 0.7rem; white-space: nowrap;
                               vertical-align: top; }
.tablewrap td.status { white-space: normal; min-width: 11rem; color: var(--muted); }
.tablewrap td.done { white-space: normal; }
.tablewrap button { margin: 0; }
.editrow td { white-space: normal; background: color-mix(in srgb, var(--ink) 4%, var(--ground)); }
.editrow .counts { max-width: 22rem; }
.headcount { width: 100%; max-width: 28rem; }
.headcount td { text-align: right; font-variant-numeric: tabular-nums; }
.headcount th { font-weight: 400; color: var(--ink); }
.headcount thead th { font-weight: 600; color: var(--muted); text-align: right; }
.headcount thead th:first-child { text-align: left; }
.headcount tfoot th, .headcount tfoot td { font-weight: 600; border-bottom: 0; }
.tablewrap th { padding: 0; }
.tablewrap th.plain { padding: 0.45rem 0.7rem; font-weight: 600; color: var(--muted); }

/* The name column stays put when the table scrolls sideways, so a row read at
   the far right is still attached to a person. The header row and this column
   cross at the top-left cell, which therefore has to out-rank both. */
.tablewrap th:first-child, .tablewrap td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--ground);
  box-shadow: inset -1px 0 0 var(--line);
}
/* box-shadow does not accumulate across rules, so the corner — which is both a
   header and the frozen column — has to restate both edges itself. */
.tablewrap thead th:first-child {
  z-index: 3;
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}
.tablewrap thead th { z-index: 2; }
/* The edit panel is one full-width cell; pinning it would pin the whole form. */
.editrow td:first-child { position: static; box-shadow: none; }
.rowactions { white-space: nowrap; }
.rowactions button { margin-inline-end: 0.3rem; }
button.copy { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
              padding: 0.25rem 0.5rem; }

/* Theme switcher. Fixed to the bottom because comparing means scrolling to the
   same place in two themes, and a control that scrolls away turns that into a
   hunt. Preview only — it never ships to a guest. */
#themePicker {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center; gap: 0.35rem;
  padding: 0.5rem; background: var(--ground);
  box-shadow: 0 -1px 0 var(--line);
}
#themePicker button {
  margin: 0; padding: 0.4rem 0.8rem; border: 1px solid var(--line);
  border-radius: 100px; background: var(--ground); color: var(--muted);
  font: inherit; font-size: 0.85rem;
}
#themePicker button[aria-current] {
  background: var(--ink); color: var(--ground); border-color: var(--ink);
}
/* So the switcher never covers the last thing on the page. */
body:has(#themePicker) { padding-bottom: 4rem; }
button.sort { display: block; width: 100%; margin: 0; padding: 0.45rem 0.7rem;
              border: 0; background: none; color: var(--muted); font: inherit;
              font-weight: 600; text-align: left; white-space: nowrap; }
button.sort.on { color: var(--ink); }