:root {
    --bg:     #f6f1e7;
    --card:   #fffdf8;
    --ink:    #2b2622;
    --muted:  #8a7f72;
    --line:   #e2d8c7;
    --accent: #a8552b;
    --up:     #3f7d44;
    --down:   #b3453a;
    --shadow: 0 1px 2px rgba(43, 38, 34, .07);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:     #1c1917;
        --card:   #26221f;
        --ink:    #ece5da;
        --muted:  #9a8f81;
        --line:   #3a342f;
        --accent: #d98b5f;
        --up:     #7fb883;
        --down:   #e0796c;
        --shadow: none;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.25rem; margin: 0; letter-spacing: .01em; }
h2 { font-size: .95rem; margin: 1.75rem 0 .5rem; color: var(--muted); font-weight: 600; }

a { color: var(--accent); }

/* --- chrome ----------------------------------------------------------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.who { display: flex; align-items: center; gap: .9rem; font-size: .875rem; color: var(--muted); }

main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* --- forms ------------------------------------------------------------ */
input[type=text], input[type=password] {
    font: inherit; color: inherit;
    padding: .55rem .7rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 7px;
    min-width: 0;
}
input:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button {
    font: inherit;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
button.danger { background: none; color: var(--down); border-color: var(--line); }

.suggest { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.suggest input { flex: 1; }

/* --- the board -------------------------------------------------------- */
.board { list-style: none; margin: 0; padding: 0; }

.row {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow);
    margin-bottom: .4rem;
}
/* A name this member has not reacted to at all. */
.row.is-new { border-left: 3px solid var(--accent); }

.vote { display: flex; gap: 2px; flex: none; }
.v {
    width: 2rem; height: 2rem; padding: 0;
    display: grid; place-items: center;
    background: none; color: var(--muted);
    border: 1px solid transparent; border-radius: 6px;
    font-size: .8rem; line-height: 1;
}
.v:hover { background: var(--bg); }
.v.up.on   { background: var(--up);   color: #fff; }
.v.down.on { background: var(--down); color: #fff; }
.v.skip.on { background: var(--line); color: var(--ink); }

.score {
    flex: none; width: 2.5rem; text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--muted);
}
.score.pos { color: var(--up); }
.score.neg { color: var(--down); }

.name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.tally  { flex: none; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.edit   { flex: none; font-size: .75rem; }
.locked { flex: none; font-size: .75rem; color: var(--muted); }

.rename { flex: 1; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rename input { flex: 1; }
.cancel { font-size: .8rem; }

/* --- misc ------------------------------------------------------------- */
.notice {
    padding: .6rem .8rem; margin: 0 0 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 7px;
    font-size: .875rem;
}
.notice.error { border-left-color: var(--down); }

.empty, .hint, .foot { color: var(--muted); font-size: .8125rem; }
.foot  { margin-top: 1.5rem; }
.empty { padding: 2rem 0; text-align: center; font-size: .9rem; }

.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .25rem 0; border-bottom: 1px solid var(--line); }

/* --- login / setup ---------------------------------------------------- */
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 1.25rem; }

.card {
    width: 100%; max-width: 20rem;
    padding: 1.75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.card.wide { max-width: 30rem; }
.card form { display: grid; gap: .75rem; margin: 1.25rem 0 0; }
.card label { display: grid; gap: .3rem; font-size: .8125rem; color: var(--muted); }

/* --- suite chrome ----------------------------------------------------- */
/* The topbar carries three groups now, so it wraps rather than squeezing. */
.topbar { flex-wrap: wrap; }

.brand { font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .01em; }

.tools { display: flex; gap: 1rem; font-size: .875rem; }
.tools a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.tools a:hover { color: var(--ink); }
.tools a.on { color: var(--ink); border-bottom-color: var(--accent); }

/* Most tools read best narrow; the month grid asks for room. */
main.page-rehearsals { max-width: 52rem; }

.page-title { font-size: 1.4rem; margin: 0 0 1.25rem; font-weight: 600; }

/* --- dashboard -------------------------------------------------------- */
.cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.card.tool { padding: 1.15rem 1.25rem; max-width: none; display: flex; flex-direction: column; }
.card.tool h2 { margin: 0 0 .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.lead { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.card.tool .hint { margin: .35rem 0 0; }
.more { display: inline-block; margin-top: .9rem; font-size: .8125rem; text-decoration: none; }
.card.tool .more { margin-top: auto; padding-top: .9rem; align-self: flex-start; }
.more:hover { text-decoration: underline; }

/* --- name vote, once it is settled ------------------------------------ */
.settled {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .9rem 1rem; margin-bottom: 1.5rem;
    background: var(--card);
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 9px;
}
.settled-label { font-size: .8125rem; color: var(--muted); }
.settled-name { font-size: 1.25rem; }

.row.is-winner { border-color: var(--accent); }

.settle { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.settle label { font-size: .8125rem; color: var(--muted); }
.settle select { font: inherit; color: inherit; padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: 7px; }

.inline { display: inline; }
button.link {
    background: none; border: none; padding: 0;
    color: var(--accent); font-size: .8125rem; text-decoration: underline; cursor: pointer;
}

/* --- rehearsal calendar ------------------------------------------------ */
.month-nav { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.month-nav .page-title { margin: 0; min-width: 9.5rem; }
.step {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; flex: none;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--card); color: var(--muted); text-decoration: none;
}
.step:hover { color: var(--ink); }
.month-nav .more { margin-top: 0; margin-left: auto; }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.wd { font-size: .7rem; color: var(--muted); text-align: center; padding-bottom: .2rem; }

.day {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    min-height: 3.6rem; padding: .35rem .2rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink); text-decoration: none;
}
a.day:hover { border-color: var(--accent); }
.day.is-out { background: none; border-color: transparent; }
.day.is-past { opacity: .5; }
.day.is-today .dnum { color: var(--accent); font-weight: 700; }
/* A settled rehearsal day, and the day the panel is showing, have to stay
   telling apart: a bar along the top for settled, an outline for selected. */
.day.is-confirmed { box-shadow: inset 0 3px 0 var(--accent); }
.day.is-selected { border-color: var(--accent); background: var(--bg); }

.dnum { font-size: .8rem; font-variant-numeric: tabular-nums; }

.dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--line);
}
.dot.yes   { background: var(--up); }
.dot.maybe { background: #d0a13c; }
.dot.no    { background: var(--down); }
.dot.none  { background: none; border: 1px solid var(--line); }

.legend { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
          margin: .9rem 0 0; font-size: .75rem; color: var(--muted); }
.legend .dot { margin-left: .5rem; }
.legend .dot:first-child { margin-left: 0; }

/* --- the day panel ----------------------------------------------------- */
.panel {
    margin-top: 1.5rem; padding: 1.15rem 1.25rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 9px;
}
.panel.is-empty { padding: .9rem 1.25rem; }
.panel .hint { margin: 0; }
.panel-day { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--ink); }

.who-said { list-style: none; margin: 0 0 1rem; padding: 0; }
.who-said li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .875rem; }
.who-name { flex: 1; min-width: 0; }
.who-state { color: var(--muted); font-size: .8125rem; }

.answer { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.a {
    background: none; color: var(--muted);
    border: 1px solid var(--line); border-radius: 7px;
    padding: .45rem .8rem; font-size: .8125rem;
}
.a:hover { color: var(--ink); }
.a.yes.on   { background: var(--up);   border-color: var(--up);   color: #fff; }
.a.maybe.on { background: #d0a13c;     border-color: #d0a13c;     color: #2b2622; }
.a.no.on    { background: var(--down); border-color: var(--down); color: #fff; }

.confirm { margin-top: .9rem; }

@media (max-width: 30rem) {
    .day { min-height: 3rem; }
    .month-nav .page-title { font-size: 1.15rem; min-width: 7.5rem; }
}

.panel.is-empty .panel-body { display: none; }
.panel:not(.is-empty) > .hint { display: none; }

.who-said.compact { margin: .5rem 0 0; }
.who-said.compact li { padding: .1rem 0; font-size: .8125rem; }