/* Layout and components (colours come from theme.css). Phone first. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--color-bg); color: var(--color-text); line-height: 1.5; font-size: 1.05rem; }
a { color: var(--color-primary); }
.site-header { background: var(--color-primary); color: #fff; }
.site-header .bar { max-width: 60rem; margin: 0 auto; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.brand img { height: 2rem; }
.brand small { font-weight: 400; opacity: .85; font-size: .9rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; color: #fff; text-decoration: none; padding: .5rem .75rem; border-radius: .4rem; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--color-primary-dark); }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .6rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
.muted { color: var(--color-muted); }
.btn { display: inline-block; min-height: 2.75rem; padding: .6rem 1.2rem; border: 0; border-radius: .5rem; background: var(--color-primary); color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--color-primary-dark); }
.btn.secondary { background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-primary); }
.msg { padding: .75rem 1rem; border-radius: .5rem; margin-bottom: 1rem; border: 1px solid; }
.msg.ok { color: var(--color-ok); border-color: var(--color-ok); background: #eef8f2; }
.msg.error { color: var(--color-error); border-color: var(--color-error); background: #fcefee; }
label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=text], input[type=email], input[type=time], select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; font: inherit; border: 1px solid var(--color-border); border-radius: .5rem; }
table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); }
.site-footer { max-width: 60rem; margin: 0 auto; padding: 1rem; color: var(--color-muted); font-size: .9rem; }
@media (min-width: 40rem) { .site-header .bar { flex-wrap: nowrap; } .nav { margin-left: auto; } }

/* Rows (admins, people), forms in a line, pills, answers */
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.narrow { max-width: 26rem; }
.btn.danger { background: var(--color-surface); color: var(--color-error); border: 1px solid var(--color-error); }
.btn.block { display: block; width: 100%; min-height: 3rem; font-weight: 700; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 0; border-top: 1px solid var(--color-border); }
.row:first-child { border-top: 0; }
.row-info { min-width: 0; flex: 1 1 14rem; display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.row-name { font-weight: 600; overflow-wrap: anywhere; }
.row-mail { color: var(--color-muted); overflow-wrap: anywhere; }
.row-actions, .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.row form, .actions form { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; width: 100%; }
.inline-form .field { flex: 1 1 14rem; min-width: 0; }
.field label { margin-top: 0; }
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-row .field { flex: 1 1 11rem; min-width: 0; }
.section { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.pill.you { background: #e6efe9; color: var(--color-ok); margin-left: .4rem; }
.pill.yes { background: #dcfce7; color: #14532d; }
.pill.no { background: #fee2e2; color: #7f1d1d; }
.pill.none { background: #fef3c7; color: #78350f; }
.pill.note { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); font-weight: 400; }
.week-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.week-title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.week-title small { display: block; font-weight: 400; font-size: .9rem; color: var(--color-muted); }
.week-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn[aria-disabled="true"] { color: var(--color-muted); border-color: var(--color-border); background: var(--color-bg); cursor: default; }
.groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.group h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1rem; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .35rem 0; border-top: 1px solid var(--color-border); }
.answers td, .answers th { vertical-align: middle; }
.answers tfoot th, .answers tfoot td { font-weight: 600; font-size: .9rem; }
.plain-set { border: 0; margin: 0 0 .75rem; padding: 0; }
.day-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .4rem 0; border-top: 1px solid var(--color-border); }
.day-name { width: 7rem; font-weight: 600; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin: 0; font-weight: 400; }
label.inline input, .choice input { width: 1.2rem; height: 1.2rem; margin: 0; }
.answer { max-width: 40rem; margin-left: auto; margin-right: auto; }
.who { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; }
.callout { padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: .5rem; background: var(--color-bg); }
.days { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin: 0; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: .5rem; min-width: 0; }
.day legend { display: none; }
.answer .day-name { width: auto; }
.day-name span { display: block; font-weight: 400; color: var(--color-muted); font-size: .9rem; }
.choices { display: flex; gap: .5rem; }
.choice { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 5.5rem; min-height: 2.75rem; margin: 0; padding: 0 .9rem; border: 1px solid var(--color-muted); border-radius: .5rem; background: var(--color-surface); cursor: pointer; }
.choice:has(input:checked) { background: var(--color-ok); border-color: var(--color-ok); color: #fff; }
@media (max-width: 760px) {
  .groups { grid-template-columns: 1fr; }
  .answers thead { position: absolute; left: -9999px; }
  .answers, .answers tbody, .answers tfoot, .answers tr, .answers th, .answers td { display: block; width: 100%; }
  .answers tbody tr { padding: .6rem 0; border-top: 1px solid var(--color-border); }
  .answers th, .answers td { border-bottom: 0; padding: .25rem 0; }
  .answers td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
  .answers td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--color-muted); }
  .actions .btn { flex: 1 1 8rem; }
}
@media (max-width: 480px) {
  .day { flex-direction: column; align-items: stretch; }
  .choices { width: 100%; }
  .choice { flex: 1; }
  .inline-form .btn, .row-actions .btn, .row > form .btn { width: 100%; }
  .row-actions, .row > form { width: 100%; }
}