:root {
    --bg: #f4f7f8;
    --panel: #ffffff;
    --ink: #172126;
    --muted: #64747c;
    --line: #dbe4e7;
    --primary: #0a3a8a;
    --primary-dark: #06286b;
    --accent: #ffc72c;
    --danger: #b42318;
    --soft: #e8eef9;
    --blocked: #fff3df;
    --shadow: 0 18px 50px rgba(23, 33, 38, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

.topbar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-height: 56px;
    padding: 0 24px;
    color: #fff;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 2px 8px rgba(10, 58, 138, .18);
}

.brand {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
}

.nav a + a::before {
    content: "|";
    color: rgba(255, 255, 255, .45);
    padding-right: 10px;
    font-weight: 600;
}

.nav a:hover {
    color: var(--accent);
    background: transparent;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 64px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: 36px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 72%, #111827 100%);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(10, 58, 138, .25);
}

.hero h1 {
    max-width: 760px;
    margin: 4px 0 12px;
    font-size: clamp(30px, 5vw, 56px);
    line-height: 1.02;
    letter-spacing: 0;
}

.hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 17px;
}

.eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: #d9e8ff;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0;
}

.stats article,
.panel,
.login-panel,
.install-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.stats article {
    padding: 22px;
}

.stats strong {
    display: block;
    color: var(--primary-dark);
    font-size: 34px;
}

.stats span {
    color: var(--muted);
    font-weight: 700;
}

.panel {
    margin-bottom: 18px;
    padding: 24px;
}

.panel h1,
.panel h2,
.login-panel h1,
.install-card h1 {
    margin: 0 0 16px;
    line-height: 1.15;
    letter-spacing: 0;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.grid.two {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.form-grid,
.inline-form,
.filters {
    display: grid;
    gap: 14px;
}

.inline-form {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}

.filters {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    color: var(--ink);
}

.check-row input {
    width: 18px;
    min-height: 18px;
}

.hint {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* One control height for the whole module: 22px of line + 18px of padding +
   2px of border = 42px, for fields and both kinds of button alike.
   `font: inherit` alone was not enough — it picked up 16px in a bare
   container and 13px inside a <label>, so the same <select> came out 46px in
   one row and 42px in the next. The size is pinned here instead. */
input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    line-height: 22px;
    background: #fbfdfd;
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* Chrome builds date and time fields with their own picker icon, which has a
   taller line box of its own and pushed them 2px past everything else. An
   explicit height pins them to the same 42px as every other control. */
input[type="date"],
input[type="time"] {
    height: 42px;
}

/* The native dropdown arrow sits hard against the border and is drawn
   differently in every browser. Draw our own instead, so it lines up with the
   control's own padding and matches the muted text colour. */
select {
    padding-right: 36px;
    background-color: #fbfdfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364747c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
    -webkit-appearance: none;
    appearance: none;
}

/* Multi-row selects keep the native control: one arrow floating beside a list
   of options would make no sense. */
select[multiple],
select[size]:not([size="1"]) {
    padding-right: 12px;
    background-image: none;
    -webkit-appearance: auto;
    appearance: auto;
}

.student-picker-search {
    border-color: rgba(10, 58, 138, .35);
    background: #ffffff;
}

.student-conflict-notice {
    padding: 10px 12px;
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

textarea {
    resize: vertical;
}

hr {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
}

/* Every control in this module is 42px tall — inputs, selects, check rows and
   both kinds of button — so a row of them lines up whatever it is made of.
   `font: inherit` matters as much as the height: without it a <button> falls
   back to the browser's own 13px system font while an <a> inherits Inter at
   16px, which is why the same class used to render two different sizes. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 22px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.button.primary {
    color: #fff;
    background: var(--primary);
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.ghost {
    color: var(--primary-dark);
    background: var(--soft);
    border-color: #cfe5df;
}

.mini-form {
    margin: 0;
}

.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    color: var(--danger);
    font: inherit;
    font-size: 14px;
    line-height: 22px;
    font-weight: 800;
    background: #fff0ed;
    border: 1px solid #ffd1c9;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.editor-form {
    max-width: 560px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.notice {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-weight: 700;
    border-radius: 8px;
}

.notice.success {
    color: var(--primary-dark);
    background: var(--soft);
}

.notice.error {
    color: var(--danger);
    background: #fff0ed;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    background: var(--soft);
    border-radius: 999px;
}

.event-list {
    display: grid;
    gap: 12px;
}

.event-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* Direct children only: the dates inside the day summary stay inline. */
.event-card > div > strong,
.event-card > div > span {
    display: block;
}

.event-card span {
    color: var(--muted);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.slot-grid span {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 800;
    background: #f7fafb;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.schedule-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 18px;
}

.schedule-list {
    display: grid;
    gap: 10px;
}

.schedule-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    background: #f8fbfb;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.schedule-row time {
    color: var(--primary-dark);
    font-weight: 900;
}

.schedule-row time span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.schedule-row strong,
.schedule-row p {
    margin: 0;
}

.schedule-row p {
    color: var(--muted);
}

.schedule-row.blocked {
    background: var(--blocked);
    border-color: #f3c886;
}

.schedule-row.appointment {
    background: #edf7fb;
    border-color: #b9dceb;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.overview-card .schedule-days {
    grid-template-columns: 1fr;
    gap: 10px;
}

.overview-card .panel.schedule-day {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
}

.overview-card .schedule-row {
    min-height: 54px;
    grid-template-columns: 78px minmax(0, 1fr);
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.mini-stats span {
    padding: 8px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    background: var(--soft);
    border-radius: 8px;
}

.login-panel,
.install-card {
    width: min(520px, calc(100% - 32px));
    margin: 64px auto;
    padding: 28px;
}

.install-page {
    background:
        linear-gradient(rgba(244, 247, 248, .9), rgba(244, 247, 248, .9)),
        url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1600&q=80") center/cover fixed;
}

/* Public parent sign-up (signup.php). Phone-first: parents fill this in on the
   couch with the paper slip in hand, so targets are large and the page is one
   column at every width. */

.signup-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.signup-footer {
    margin-top: auto;
    padding: 18px 20px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.signup-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 20px;
    color: #fff;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.signup-topbar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.signup-topbar-text strong {
    font-size: 15px;
    font-weight: 800;
}

.signup-topbar-text small {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    font-weight: 700;
}

.signup-page {
    width: min(640px, calc(100% - 32px));
    margin: 28px auto 64px;
}

.signup-card {
    padding: 26px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.signup-card h1 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.15;
}

.signup-eyebrow {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.signup-lead {
    margin: 0 0 20px;
    color: var(--muted);
}

.signup-note {
    margin: 0 0 20px;
    padding: 12px 14px;
    font-weight: 700;
    background: var(--soft);
    border-radius: 8px;
}

.signup-form {
    display: grid;
    gap: 18px;
}

/* Narrowing a long staff list. Only rendered when there are enough names to
   make scrolling a chore, so most families never see it. */
.teacher-search {
    margin: 0 0 14px;
}

.teacher-search label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
}

.teacher-search input {
    width: 100%;
    /* Comfortably tappable, and big enough that iOS does not zoom the page
       when the field takes focus — that needs 16px or more. */
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
}

.teacher-search-none {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.teacher-search-none[hidden] {
    display: none;
}

/* A filtered-out card must actually go: .teacher-card is display:flex, which
   would otherwise win over the hidden attribute. */
.teacher-card[hidden] {
    display: none;
}

/* The teacher list a family picks from. Big tap targets, and the classroom
   under the name because that is how parents know which Mrs. S they want. */
.teacher-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.teacher-card {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 4px;
    min-height: 104px;
    padding: 16px 40px 16px 18px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* suite.css underlines every link on hover, which turned the whole card into
   underlined text. Beat it on specificity rather than leaning on !important. */
a.teacher-card,
a.teacher-card:hover,
a.teacher-card:focus,
a.teacher-card:focus-visible {
    color: var(--ink);
    text-decoration: none;
}

a.teacher-card:hover,
a.teacher-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(10, 58, 138, .12);
    transform: translateY(-2px);
}

a.teacher-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* The affordance that says "this opens" — nudges along on hover. */
.teacher-card::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 18px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    border-radius: 1px;
    transform: rotate(45deg);
    transition: border-color .15s, transform .15s;
}

a.teacher-card:hover::after,
a.teacher-card:focus-visible::after {
    border-color: var(--primary);
    transform: rotate(45deg) translate(2px, -2px);
}

.teacher-card strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}

.teacher-card small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* The count reads as a status chip rather than a third line of prose. */
.teacher-card em {
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 10px;
    color: var(--primary-dark);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    background: var(--soft);
    border-radius: 999px;
}

.teacher-card.full {
    background: #fbfcfc;
    border-style: dashed;
}

.teacher-card.full strong,
.teacher-card.full small {
    color: var(--muted);
}

.teacher-card.full em {
    color: var(--muted);
    background: #f1f4f5;
}

.teacher-card.full::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .teacher-card,
    .teacher-card::after {
        transition: none;
    }
    a.teacher-card:hover,
    a.teacher-card:focus-visible {
        transform: none;
    }
}

/* A field no person ever sees, so anything typed in it came from a bot. */
.signup-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.signup-field {
    display: grid;
    gap: 6px;
    font-weight: 800;
}

.signup-field em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.signup-field input,
.signup-field textarea {
    width: 100%;
    padding: 12px;
    font: inherit;
    line-height: 24px;
    /* 16px is not a style choice. Under 16px, iOS Safari zooms the page in when
       the field is focused and does not zoom back out, so a parent who taps
       "Student's name" is left pinching a page that no longer fits. The caption
       above stays at the inherited 13px; only the typed value grows. */
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.signup-submit {
    min-height: 52px;
    font-size: 16px;
}

.slot-picker {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
}

.slot-picker legend {
    padding: 0;
    font-size: 15px;
    font-weight: 900;
}

.signup-day h2 {
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: 15px;
}

.slot-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}

.slot-option {
    display: block;
    position: relative;
    cursor: pointer;
}

/* The radio itself is covered by its label, so keep it reachable by keyboard
   and screen readers rather than display:none. It is stretched over the whole
   chip rather than shrunk to 1px: when a parent submits without picking a
   time, the browser anchors its "Please select one of these options" bubble to
   this element, and a 1px box put that bubble out in the page margin pointing
   at nothing. Full-size and transparent, the bubble lands on the first time. */
.slot-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.slot-option span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    text-align: center;
    background: #f7fafb;
    border: 2px solid var(--line);
    border-radius: 8px;
}

.slot-option strong {
    font-size: 16px;
    font-weight: 900;
}

.slot-option small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.slot-option input:checked + span {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary-dark);
}

.slot-option input:checked + span small {
    color: rgba(255, 255, 255, .85);
}

.slot-option input:focus-visible + span {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.signup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Teacher side: the sign-up list as a day-by-day agenda. A grid of columns
   squeezed every name and time onto two lines; reading down one day at a time
   is how a teacher actually uses this, on screen and on paper. */

.agenda-day {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    color: var(--primary-dark);
    font-size: 16px;
    border-bottom: 1px solid var(--line);
}

.agenda-day:first-of-type {
    margin-top: 6px;
}

.agenda-day span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* Wider time column than the shared .schedule-row default: "3:50 PM" was
   wrapping onto two lines. */
.agenda-list .schedule-row {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    min-height: 0;
    padding: 14px 16px;
}

.agenda-detail strong {
    display: block;
    font-size: 17px;
    line-height: 1.3;
}

.agenda-detail p {
    margin: 2px 0 0;
}

.agenda-contact::before {
    content: "·";
    padding: 0 6px;
}

/* Specific enough to win over .schedule-row p, which is muted: a note from a
   family is the one line here the teacher must not skim past. */
.schedule-row .agenda-note {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.agenda-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

/* Two teachers at one table: the office panel, and the line a paired teacher
   sees at the top of their own sign-ups page. */

.pair-banner {
    margin: 8px 0 0;
    padding: 10px 12px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    background: var(--soft);
    border-radius: 8px;
}

.pair-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.pair-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8fbfb;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pair-row-main {
    display: grid;
    gap: 2px;
}

.pair-row-main span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* Everyone at the table, each with their own way out. */
.pair-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pair-member {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    font-size: 12px;
    font-weight: 800;
    background: #f1f5f7;
    border: 1px solid #dbe4e8;
    border-radius: 999px;
}

.pair-member.is-lead {
    padding-right: 10px;
    color: var(--primary-dark);
    background: var(--soft);
    border-color: transparent;
}

.pair-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 14px;
    background: var(--soft);
    border-radius: 8px;
}

.pair-form select {
    width: 100%;
}

.pair-go {
    display: flex;
    align-items: flex-end;
}

.pair-go .button {
    width: 100%;
}

/* Who can open the master list: one chip per teacher, each with its own way
   out. Same shapes as the pairs panel above so the two read as one family. */
.sped-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sped-chip {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 6px 6px 6px 12px;
    background: #f1f5f7;
    border: 1px solid #dbe4e8;
    border-radius: 999px;
}

.sped-chip > span {
    display: grid;
    gap: 1px;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
}

.sped-chip small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
}

.sped-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 14px;
    background: var(--soft);
    border-radius: 8px;
}

.sped-form select {
    width: 100%;
}

.sped-go {
    display: flex;
    align-items: flex-end;
}

.sped-go .button {
    width: 100%;
}

.event-school-fixed {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 12px;
    font-weight: 800;
    background: var(--soft);
    border-radius: 8px;
}

.event-school-fixed em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.agenda-when {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* Reschedule and Cancel on a booked row. Both open as a small panel that
   floats over the page rather than sitting inside the row: a disclosure that
   pushes the row wider makes the whole agenda jump around every time a teacher
   opens one. Out of flow, the row never changes size at all. */

.agenda-tools {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.agenda-tool summary {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 10px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    background: var(--soft);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.agenda-tool summary::-webkit-details-marker {
    display: none;
}

.agenda-tool summary:hover {
    border-color: var(--primary);
}

.agenda-tool summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.agenda-tool[open] summary {
    border-color: var(--primary);
}

.agenda-tool-cancel summary {
    color: var(--danger);
    background: #fff0ed;
}

.agenda-tool-cancel summary:hover,
.agenda-tool-cancel[open] summary {
    border-color: #ffd1c9;
}

/* The panel hangs off the actions column and overlaps whatever is below it. */
.agenda-tool-body {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: grid;
    gap: 8px;
    width: 300px;
    max-width: calc(100vw - 48px);
    margin-top: 6px;
    padding: 12px;
    text-align: left;
    white-space: normal;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(23, 33, 38, .16);
}

/* Time and the button on one line — this is a two-second job, not a form. */
.agenda-move-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.agenda-move-row select {
    width: 100%;
    min-height: 36px;
}

.agenda-tool-body .button,
.agenda-tool-body .link-button,
.agenda-tool-body select {
    min-height: 36px;
    height: auto;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 22px;
    white-space: nowrap;
}

.agenda-tool-body select {
    padding: 6px 10px;
}

.agenda-tool-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

@media print {
    .agenda-tools {
        display: none;
    }
}

/* Office side: the front-desk master list. Built to be printed and carried, so
   it stays dense and the time column only repeats when the time changes. */

.master-day + .master-day {
    margin-top: 18px;
}

.master-table {
    width: 100%;
    border-collapse: collapse;
}

.master-table th {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.master-table th,
.master-table td {
    padding: 8px 12px;
    vertical-align: baseline;
}

.master-table td:first-child {
    white-space: nowrap;
}

/* A hairline wherever the clock moves on, so a group of families arriving
   together reads as one band. */
.master-table tbody tr.master-newtime td {
    border-top: 1px solid var(--line);
}

/* Office side: the window each evening runs in, set once per day. */

.day-window-intro {
    margin: 0 0 18px;
}

/* Same card shape as a teacher's day, so the two pages feel related. */
.day-window {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.day-window + .day-window {
    margin-top: 18px;
}

.day-window .builder-day-head {
    padding: 10px 16px;
}

.day-window-new {
    background: #fbfcfd;
    border-style: dashed;
}

.day-window-new .builder-day-head {
    background: transparent;
    border-bottom: 1px dashed var(--line);
}

.day-window-new .builder-day-head h3 {
    color: var(--muted);
}

/* The event form: two columns on a full-width panel rather than a tall
   skinny column beside empty space. */
.event-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

.event-form > label,
.event-form .event-form-wide {
    display: grid;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
}

.event-form .event-form-wide,
.event-form .event-form-go {
    grid-column: 1 / -1;
}

.event-form em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.event-form-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-top: 4px;
}

.event-form-go .button {
    margin-left: auto;
}

.event-form-go .check-row + .check-row {
    margin-right: 4px;
}

/* Each evening on the create form, boxed so the two don't blur together. */
.event-day-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 10px 12px;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.event-day-set legend {
    padding: 0 6px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
}

.event-day-set label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
}

/* The event list: one row per event, with its evenings underneath. */
.event-card-main {
    display: grid;
    flex: 1 1 320px;
    gap: 3px;
    min-width: 0;
}

.event-card-main strong {
    font-size: 16px;
}

.event-card-days {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.event-card-days strong {
    color: var(--primary-dark);
    font-size: 13px;
}

.event-card.editing {
    background: var(--soft);
    border-color: var(--primary);
}

@media (max-width: 760px) {
    .event-form {
        grid-template-columns: 1fr;
    }

    .event-form-go .button {
        width: 100%;
        margin-left: 0;
    }
}

.day-window-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 14px 16px;
}

.day-window-form label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
}

.day-window-form input[type="time"] {
    font: inherit;
    font-weight: 700;
}

.day-window-form .button {
    margin-left: auto;
}

@media (max-width: 760px) {
    .day-window-form .button {
        width: 100%;
        margin-left: 0;
    }
}

/* Teacher side: the one-line status strip that replaced the old link card.
   A teacher needs the counts and one sentence, not a share widget. */

.status-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.status-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-counts span {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    background: var(--soft);
    border-radius: 999px;
}

.status-counts strong {
    font-size: 18px;
    font-weight: 900;
}

.status-note {
    flex: 1 1 260px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.status-admin {
    margin-left: auto;
}

/* Teacher side: adding a family who phoned. Out in the open, with room for
   each field — this is typed while someone is on the other end of a call. */

.add-family-intro {
    margin: 0 0 16px;
}

.add-family-form {
    display: grid;
    grid-template-columns: 140px repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}

.add-family-form label {
    display: grid;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
}

.add-family-form label em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.add-family-form .af-notes {
    grid-column: 1 / -1;
}

.add-family-form .af-go {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 2px;
}

.add-family-form .af-go .button {
    min-width: 170px;
}

@media (max-width: 760px) {
    .add-family-form {
        grid-template-columns: 1fr;
    }

    .add-family-form .af-notes,
    .add-family-form .af-go {
        grid-column: auto;
    }

    .add-family-form .af-go .button {
        width: 100%;
    }

    .status-admin {
        margin-left: 0;
    }
}

/* Teacher side: building your own blocks. One row of plain-language controls
   per day, with the times you already have shown as chips above it. */

.builder-intro {
    margin-top: 0;
}

/* Each evening is its own card with a tinted header, so two days read as two
   things rather than one long column of hairlines. */
.builder-day {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.builder-day + .builder-day {
    margin-top: 26px;
}

.builder-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 11px 16px;
    background: var(--soft);
    border-bottom: 1px solid #cfdcf2;
}

.builder-day-head h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 16px;
    line-height: 1.2;
}

.builder-day-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.builder-day-head .pill {
    background: #fff;
}

.builder-day-body {
    padding: 14px 16px 12px;
}

/* These are redirect targets after adding or removing a time, so leave a
   little room above rather than landing flush against the viewport edge. */
.builder-day,
.agenda-panel {
    scroll-margin-top: 24px;
}

.slot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

/* Dense on purpose: an evening is twenty of these, and the end time is the
   same arithmetic every time, so it lives in the tooltip. */
.slot-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: 12px;
    white-space: nowrap;
    background: #f1f5f7;
    border: 1px solid #dbe4e8;
    border-radius: 6px;
}

.slot-chip strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.slot-chip em {
    max-width: 120px;
    overflow: hidden;
    padding-left: 6px;
    color: var(--primary-dark);
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    border-left: 1px solid #9cc4e0;
}

/* Taken times should be obvious at a glance against the open ones. */
.slot-chip.booked {
    color: var(--primary-dark);
    background: #dcebf7;
    border-color: #9cc4e0;
}

/* This used to be a bare grey glyph on a grey chip with no background and no
   border, and teachers read it as punctuation rather than a button — more
   than one got as far as asking where the X was while looking straight at it.
   A white disc with an edge says "press me"; the old one did not. */
.slot-chip-remove {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 1px;
    padding: 0;
    color: #44565e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: #fff;
    border: 1px solid #c4d2d8;
    border-radius: 999px;
    cursor: pointer;
}

.slot-chip-remove:hover,
.slot-chip-remove:focus-visible {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.slot-chip-remove:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}

/* The same little button, shown inline in the sentence that explains it. */
.slot-chip-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #44565e;
    font-size: 13px;
    line-height: 1;
    vertical-align: -4px;
    background: #fff;
    border: 1px solid #c4d2d8;
    border-radius: 999px;
}

/* Two pickers, a count and a button — one line, not a panel. */
.builder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 18px;
    padding: 12px 14px;
    background: #f3f7f9;
    border: 1px solid #dde7ec;
    border-radius: 8px;
}

.builder-form label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
}

.builder-form input[type="time"],
.builder-form select {
    font: inherit;
    font-weight: 700;
}

.builder-go {
    display: flex;
    flex: 1 1 340px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.builder-preview {
    color: var(--primary-dark);
    font-weight: 800;
}

/* Only the button is pushed to the edge; the count and the checkbox stay
   next to the pickers they describe. */
.builder-go .button {
    margin-left: auto;
}

/* Beats `.builder-form label { display: grid }` above, which would otherwise
   stack this checkbox over its own label. */
.builder-go .check-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 0;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.builder-go .check-row input {
    flex: 0 0 auto;
}

.builder-extra {
    margin-top: 10px;
}

.builder-extra summary {
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.builder-extra .inline-form {
    margin-top: 12px;
}

/* Office side: the banner saying the parent page is live right now. */
.signup-live {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-weight: 700;
    background: var(--soft);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.link-button.is-live {
    color: var(--danger);
}

.signup-summary {
    display: grid;
    gap: 0;
    margin: 0 0 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.signup-summary > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
}

.signup-summary > div + div {
    border-top: 1px solid var(--line);
}

.signup-summary dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.signup-summary dd {
    margin: 0;
    font-weight: 800;
}

@media (max-width: 760px) {
    .topbar,
    .panel-title,
    .event-card {
        align-items: stretch;
        flex-direction: column;
    }

    .hero,
    .grid.two,
    .stats,
    .filters {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 26px;
    }

    .schedule-row,
    .agenda-list .schedule-row {
        grid-template-columns: 1fr;
    }

    .agenda-actions {
        align-items: flex-start;
        text-align: left;
    }
}

/* ----- Which school? ---------------------------------------------------
   The first thing a family sees when both buildings are taking sign-ups.
   Deliberately bigger than a teacher card: two choices, thumb-sized, with
   nothing else on the page competing with them. A family at a school where
   only one building is open never sees this. */

.building-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 4px 0 6px;
}

.building-card {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 20px 24px 18px;
    color: var(--ink);
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* suite.css underlines links on hover; beat it on specificity, same as the
   teacher cards above. */
a.building-card,
a.building-card:hover,
a.building-card:focus,
a.building-card:focus-visible {
    color: var(--ink);
    text-decoration: none;
}

a.building-card:hover,
a.building-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 10px 26px rgba(10, 58, 138, .14);
    transform: translateY(-2px);
}

a.building-card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.building-card strong {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}

.building-card small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.building-card em {
    align-self: flex-start;
    margin-top: auto;
    padding: 5px 12px;
    color: var(--primary-dark);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    background: var(--soft);
    border-radius: 999px;
}

/* The way across for a family with a child in each building. Quiet, because
   most families only need the one school. */
.building-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.building-switch span {
    color: var(--muted);
    font-weight: 700;
}

.building-switch a {
    color: var(--primary);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .building-card {
        transition: none;
    }
    a.building-card:hover,
    a.building-card:focus-visible {
        transform: none;
    }
}

/* ----- Office side: building a whole building's schedules ---------------
   Jr./Sr. High only. Three answers — how long, what gap, who — then one
   button, so it reads straight down with nothing to hunt for. */

.build-intro {
    margin: 0 0 16px;
}

.build-form {
    display: grid;
    gap: 16px;
}

.build-lengths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 18px;
    max-width: 560px;
}

.build-lengths label {
    display: grid;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
}

.teacher-tick {
    margin: 0;
    padding: 14px 16px 16px;
    background: #fbfcfd;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.teacher-tick legend {
    padding: 0 6px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
}

/* Filter, the two bulk buttons, and the running count on one line where
   there is room, stacked where there is not. */
.teacher-tick-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.teacher-tick-filter {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 7px 12px;
}

.teacher-tick-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-tick-item[hidden] {
    display: none;
}

.teacher-tick-bulk {
    display: flex;
    gap: 10px;
}

/* .link-button is the module's destructive pill (Archive, Delete, Close
   sign-ups). Selecting everyone destroys nothing, so these read as quiet
   secondary buttons instead. */
.teacher-tick-bulk .link-button {
    min-height: 34px;
    padding: 4px 14px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 800;
    background: var(--soft);
    border: 1px solid transparent;
    border-radius: 999px;
}

.teacher-tick-bulk .link-button:hover {
    border-color: var(--primary);
}

.teacher-tick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 8px;
}

/* The whole row is the hit target — nobody should have to aim at a 13px box.
   Flex, not grid: the create form's rows carry only a name while the event
   page's also carry a state line, and a box spanning a row that isn't there
   left every row double height. */
.teacher-tick-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.teacher-tick-item:hover {
    border-color: var(--primary);
}

.teacher-tick-item input {
    flex: none;
    /* The module sizes every input for a finger: `input, select, textarea`
       sets min-height: 42px, which beats a plain height and left each tick
       box 42px tall in a 40px row. */
    min-height: 0;
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.teacher-tick-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.teacher-tick-name {
    font-size: 14px;
    font-weight: 800;
}

.teacher-tick-name small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.teacher-tick-state {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* Already built reads as settled, not as something waiting to be done. */
.teacher-tick-item.has-times {
    background: #f6faf7;
}

.teacher-tick-item.has-times .teacher-tick-state {
    color: #2f6b4f;
}

.build-go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.build-go .button {
    margin-left: auto;
}

.build-roster {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.build-roster h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

/* A long staff list needs a ceiling, or the button you are reaching for ends
   up a screen and a half below the thing you are reading. */
.teacher-tick-grid {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding: 2px;
}

/* The tick list on the create form spans both columns of the event form's own
   grid. That grid has an explicit two-track template, so 1 / -1 is well
   defined against it. */
.event-form .event-build-set {
    grid-column: 1 / -1;
}

/* This panel deliberately does NOT carry .event-day-set. That class is built
   for a row of time inputs — a grid of auto-fit 124px tracks, and
   `.event-day-set label { display: grid }` — and both are wrong here: a child
   cannot reliably span a full row of an auto-fit track list, and the label
   rule stacked every checkbox above its own name. It borrows the frame and
   nothing else. */
.event-build-set {
    display: block;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.event-build-set legend {
    padding: 0 6px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
}

.event-build-set em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.event-build-set[hidden] {
    display: none;
}

.event-build-set .build-lengths {
    margin-bottom: 12px;
}

.event-build-set .teacher-tick-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

@media (max-width: 720px) {
    .build-go .button {
        width: 100%;
        margin-left: 0;
    }

    /* Two selects stop sitting comfortably side by side well before this. */
    .build-lengths {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----- The parent pages on a phone --------------------------------------
   Most families open this on the phone the text message arrived on, so this
   is the layout that matters most. One column, full-width targets, and no
   horizontal scroll at any width. */

/* Desktop and laptop. The card was built phone-first and stayed a 640px ribbon
   on a 16" screen with the rest of the window empty. Widen it a little, sit the
   two short name fields side by side so the form is not a long stack, and stop
   the submit button spanning the full width like a banner. Everything below
   1000px is untouched. */

@media (min-width: 1000px) {
    .signup-page {
        width: min(820px, calc(100% - 48px));
        margin: 40px auto 72px;
    }

    .signup-card {
        padding: 34px 38px;
    }

    .signup-card h1 {
        font-size: 30px;
    }

    .signup-form {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    /* Student's name and who is coming pair up. Everything after them — the
       optional contact, the notes box, the times and the button — runs the
       full width. */
    .signup-form > label:nth-of-type(n + 3),
    .signup-form > .slot-picker,
    .signup-form > .signup-submit {
        grid-column: 1 / -1;
    }

    .signup-submit {
        justify-self: start;
        min-width: 320px;
        padding: 0 32px;
    }
}

@media (max-width: 560px) {
    .signup-page {
        width: calc(100% - 32px);
        margin: 18px auto 48px;
    }

    .signup-card {
        padding: 20px 18px;
    }

    .signup-card h1 {
        font-size: 22px;
    }

    /* Both pickers go to a single column well before the grid would, so a
       card is never a cramped half-width target. The times stay two-up:
       they are short, and one column of thirty of them is a long scroll. */
    .teacher-picker,
    .building-picker {
        grid-template-columns: minmax(0, 1fr);
    }

    .slot-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-card {
        min-height: 0;
    }

    .building-card {
        min-height: 0;
        padding: 18px;
    }

    /* A row of ghost buttons becomes a stack of full-width ones — easier to
       hit, and it stops "Pick a different teacher" wrapping mid-phrase. */
    .signup-actions {
        flex-direction: column;
    }

    .signup-actions .button {
        width: 100%;
        text-align: center;
    }

    .signup-summary > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .building-switch {
        flex-direction: column;
        gap: 4px;
    }
}

@media print {
    body {
        background: #fff;
    }

    .topbar,
    .signup-topbar,
    .signup-actions,
    .signup-footer,
    .no-print,
    .notice {
        display: none !important;
    }

    .shell,
    .signup-page {
        width: 100%;
        margin: 0;
    }

    .panel,
    .signup-card {
        box-shadow: none;
        break-inside: avoid;
    }

    /* A printed agenda: keep each conference whole, and keep a day heading
       with at least the first conference under it. */
    .agenda-list .schedule-row {
        padding: 8px 10px;
        background: #fff;
        break-inside: avoid;
    }

    .agenda-day {
        break-after: avoid;
    }

    /* A full evening of conferences is longer than a page, so these panels
       have to be allowed to flow onto the next. */
    .panel.agenda-panel,
    .panel.master-day {
        break-inside: auto;
    }

    /* The front-desk list: tighter, and the column headings repeat on every
       page so a second sheet still reads on its own. */
    .master-table {
        font-size: 10pt;
    }

    .master-table thead {
        display: table-header-group;
    }

    .master-table th,
    .master-table td {
        padding: 4px 8px;
    }

    .master-table tr {
        break-inside: avoid;
    }

    .master-day .agenda-day {
        break-after: avoid;
    }
}