/* Student schedule mini-site.

   Standalone by design: this file copies the tokens and table treatment from
   frontend/styles.css so the site reads as the same product, but shares no code
   with it. Linking styles.css here would hide the page entirely — see the
   comment in index.html.

   Tap targets are larger than the faculty site's: the audience is teenagers on
   phones, standing in a hallway between classes. */

:root {
    --gc-text: #212529;
    --gc-bg: #ffffff;
    --gc-muted: #6c757d;
    --gc-border: #c9ccd1;
    --gc-accent: #000000;
    --gc-accent-ink: #0b1e36;
    --gc-surface: #f5f6f7;
}

/* Sharp rectangles are the app's whole visual identity, and the project style
   guide is black and white only. */
* {
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--gc-text);
    background: var(--gc-surface);
    line-height: 1.4;
}

h1 {
    font-size: 1.3rem;
    margin: 20px 0 12px;
}

h2 {
    font-size: 1.15rem;
    margin: 0 0 4px;
}

:focus-visible {
    outline: 3px solid #9ec5fe;
    outline-offset: 1px;
}

.st-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ---- Header ---- */

.st-header {
    background: var(--gc-bg);
    border-bottom: 1px solid var(--gc-border);
}

.st-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.st-logo {
    max-width: 44px;
    height: auto;
}

.st-wordmark {
    font-weight: 600;
    color: var(--gc-accent-ink);
}

/* ---- Search ---- */

.st-form {
    display: flex;
    gap: 8px;
}

.st-input {
    flex: 1 1 auto;
    min-width: 0;
    /* 16px minimum, or iOS Safari zooms the page on focus. */
    font-size: 1rem;
    padding: 12px;
    border: 1px solid var(--gc-border);
    background: var(--gc-bg);
    color: var(--gc-text);
}

.st-input:focus {
    border-color: var(--gc-accent);
}

.st-btn {
    font-size: 1rem;
    font-family: inherit;
    padding: 12px 18px;
    min-height: 48px;
    border: 1px solid var(--gc-accent);
    background: var(--gc-bg);
    color: var(--gc-text);
    cursor: pointer;
}

.st-btn-primary {
    background: var(--gc-accent);
    color: #fff;
}

.st-btn-quiet {
    min-height: 0;
    padding: 6px 10px;
    font-size: 0.85rem;
    border-color: var(--gc-border);
    color: var(--gc-muted);
}

.st-hint,
.st-meta {
    margin: 6px 0 0;
    color: var(--gc-muted);
    font-size: 0.9rem;
}

.st-status {
    margin: 16px 0;
    color: var(--gc-muted);
}

.st-status.st-error {
    color: var(--gc-text);
    font-weight: 600;
}

/* ---- Live results ---- */

.st-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Reads as one control with the input above it: no gap, and the shared 1px
   borders collapsed away so the stack looks continuous. */
.st-results {
    gap: 0;
    margin-top: -1px;
}

.st-results li+li button {
    margin-top: -1px;
}

.st-list button {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 14px 12px;
    font-size: 1.05rem;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    background: var(--gc-bg);
    border: 1px solid var(--gc-border);
    color: var(--gc-text);
    cursor: pointer;
}

.st-list button:hover,
.st-list button:focus {
    background: var(--gc-surface);
    border-color: var(--gc-accent);
}

/* ---- Schedule ---- */

#st-schedule {
    margin-top: 24px;
    padding-top: 4px;
    border-top: 2px solid var(--gc-accent);
}

.st-sched-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.st-sched-head h2 {
    font-size: 1.3rem;
}

.st-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
    background: var(--gc-bg);
    border: 1px solid var(--gc-border);
}

.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.st-table thead th {
    background: #eef1f4;
    border-bottom: 1px solid var(--gc-border);
    text-align: left;
    padding: 8px;
    white-space: nowrap;
}

.st-table tbody td {
    border-top: 1px solid #eceff1;
    padding: 10px 8px;
    vertical-align: top;
}

.st-table tbody tr:nth-child(odd) td {
    background: #fafbfc;
}

.st-td-activity {
    font-weight: 600;
}

.st-td-days {
    color: var(--gc-muted);
    font-size: 0.85rem;
}

/* ---- Masterclasses ---- */

.st-masterclasses,
.st-concert {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--gc-border);
}

.st-tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 14px 0 0;
}

/* Negative margin collapses the shared 1px border between adjacent tabs, the
   same trick .btn + .btn uses in styles.css. */
.st-tabs button {
    flex: 1 1 auto;
    min-width: 64px;
    min-height: 48px;
    padding: 10px 8px;
    margin-left: -1px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--gc-bg);
    border: 1px solid var(--gc-border);
    color: var(--gc-text);
    cursor: pointer;
}

.st-tabs button:first-child {
    margin-left: 0;
}

.st-tabs button[aria-selected="true"] {
    background: var(--gc-accent);
    border-color: var(--gc-accent);
    color: #fff;
    font-weight: 600;
    position: relative;
}

.st-day-label {
    margin: 16px 0 10px;
    font-weight: 600;
}

.st-mc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-mc-list li {
    padding: 12px;
    background: var(--gc-bg);
    border: 1px solid var(--gc-border);
}

.st-mc-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.st-mc-meta {
    margin-top: 4px;
    color: var(--gc-muted);
    font-size: 0.9rem;
}

/* ---- Student Concert ---- */

/* Plain bulleted lines, no cards. Native markers rather than a ::before, so the
   list stays a normal block flow — a flex parent would suppress them. */
.st-concert-list {
    margin: 0;
    padding-left: 1.25em;
}

.st-concert-list li {
    margin-top: 6px;
}

.st-concert-list li:first-child {
    margin-top: 0;
}

/* Singers listed under their slot: dashes rather than bullets, so the nesting
   reads as detail on the line above instead of a second running order. */
.st-concert-singers {
    margin: 4px 0 0;
    padding-left: 1.1em;
    list-style-type: "– ";
    color: var(--gc-muted);
    font-size: 0.9rem;
}

.st-concert-singers li {
    margin-top: 2px;
}

/* ---- Phone: stack each row as a card, keeping a real <table> for screen readers ---- */

@media (max-width: 600px) {
    .st-table thead {
        position: absolute;
        left: -9999px;
    }

    .st-table,
    .st-table tbody,
    .st-table tr,
    .st-table td {
        display: block;
    }

    .st-table tr {
        border-top: 1px solid var(--gc-border);
        padding: 10px 0;
    }

    .st-table tbody tr:first-child {
        border-top: 0;
    }

    .st-table tbody tr:nth-child(odd) td {
        background: transparent;
    }

    .st-table tbody td {
        border: 0;
        padding: 3px 12px;
    }

    .st-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--gc-muted);
    }

    /* The activity leads the card, so it needs no label. */
    .st-table tbody td.st-td-activity::before {
        content: none;
    }

    .st-table tbody td.st-td-activity {
        font-size: 1.1rem;
        padding-bottom: 4px;
    }
}

@media print {

    .st-header,
    .st-form,
    .st-hint,
    .st-tabs,
    .st-btn-quiet {
        display: none;
    }

    body {
        background: #fff;
    }
}