/* ==========================================================================
   TYSB brand stylesheet.
   Palette: black ground, red chrome primary, lime/chartreuse accent
   (scope §1 brand). Bold italic motorsport type via Barlow Condensed.
   Mobile-first; the trackside dashboard is the primary use case.
   ========================================================================== */

:root {
    --tysb-black:       #0a0a0a;
    --tysb-black-soft:  #141414;
    --tysb-ink:         #f5f5f4;
    --tysb-ink-muted:   #a3a3a0;
    --tysb-red:         #e10b1c;        /* red chrome — primary */
    --tysb-red-deep:    #8a0510;
    --tysb-lime:        #c4ff2e;        /* lime/chartreuse — accent */
    --tysb-lime-deep:   #8fbf12;
    --tysb-rule:        #232323;

    --font-display:     'Barlow Condensed', system-ui, -apple-system, sans-serif;
    --font-body:        'Inter', system-ui, -apple-system, sans-serif;

    --layout-max:       1100px;
    --gutter:           1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--tysb-black);
    color: var(--tysb-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--tysb-red); text-decoration: none; }
a:hover { color: var(--tysb-lime); }

.visually-hidden {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px; overflow: hidden;
}

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

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem var(--gutter);
    max-width: var(--layout-max);
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.brand-logo {
    display: block;
    height: clamp(2.25rem, 4.5vw, 3rem);
    width: auto;
    /* Logo has its own black ground; let it sit flush on the page bg. */
}

.site-nav a {
    color: var(--tysb-ink-muted);
    font-weight: 500;
    margin-left: 1.25rem;
    font-size: 0.95rem;
}
.site-nav a:hover { color: var(--tysb-ink); }
.site-nav a.cta {
    color: var(--tysb-black);
    background: var(--tysb-lime);
    padding: 0.45em 0.9em;
    border-radius: 0.2em;
    font-weight: 700;
}
.site-nav a.cta:hover { background: var(--tysb-ink); }
.site-nav-who {
    color: var(--tysb-ink-muted);
    font-size: 0.95rem;
    margin-left: 1.25rem;
    font-style: italic;
}

/* --- Hero ------------------------------------------------------------- */

.hero {
    border-top: 1px solid var(--tysb-rule);
    border-bottom: 1px solid var(--tysb-rule);
    background:
        radial-gradient(60% 60% at 20% 0%, rgba(225,11,28,0.18) 0%, transparent 60%),
        radial-gradient(50% 50% at 90% 100%, rgba(196,255,46,0.10) 0%, transparent 60%),
        var(--tysb-black);
}

.hero-inner {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 4rem var(--gutter) 5rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: var(--tysb-lime);
    margin: 0 0 1rem;
    font-weight: 600;
}

.headline {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 0.95;
    margin: 0 0 1.5rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.headline em {
    font-style: italic;
    color: var(--tysb-red);
    font-weight: 900;
}

.lede {
    font-size: 1.15rem;
    max-width: 38em;
    color: var(--tysb-ink-muted);
    margin: 0 0 2.5rem;
}

.hero-cta {
    display: inline-block;
    background: var(--tysb-red);
    color: var(--tysb-ink);
    padding: 0.85em 1.6em;
    border-radius: 0.25em;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 0 var(--tysb-red-deep);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.hero-cta:hover {
    color: var(--tysb-ink);
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 var(--tysb-red-deep);
}

/* --- Sections --------------------------------------------------------- */

main > section {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 4rem var(--gutter);
}
main > section.hero { max-width: none; padding: 0; }

h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin: 0 0 2rem;
    letter-spacing: 0.01em;
}

/* --- Features --------------------------------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.feature {
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.4em;
    padding: 1.5rem;
}
.feature h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    color: var(--tysb-lime);
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}
.feature p { margin: 0; color: var(--tysb-ink-muted); }

/* --- How -------------------------------------------------------------- */

.how-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: how;
    display: grid;
    gap: 1rem;
}
.how-steps li {
    counter-increment: how;
    padding-left: 3rem;
    position: relative;
    color: var(--tysb-ink-muted);
}
.how-steps li::before {
    content: counter(how);
    position: absolute;
    left: 0; top: -0.1em;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 2rem;
    color: var(--tysb-red);
    line-height: 1;
}
.how-steps li strong { color: var(--tysb-ink); }

/* --- Login form ------------------------------------------------------- */

.login {
    border-top: 1px solid var(--tysb-rule);
}
.login-lede {
    color: var(--tysb-ink-muted);
    max-width: 32em;
    margin: 0 0 1.5rem;
}
.login-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 32em;
}
.login-form input[type="text"] {
    flex: 1 1 18em;
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.25em;
    padding: 0.85em 1em;
    font-size: 1rem;
    font-family: var(--font-body);
}
.login-form input[type="text"]:focus {
    outline: 2px solid var(--tysb-lime);
    outline-offset: 1px;
    border-color: var(--tysb-lime);
}
.login-form button {
    background: var(--tysb-lime);
    color: var(--tysb-black);
    border: 0;
    border-radius: 0.25em;
    padding: 0.85em 1.4em;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.login-form button:hover { background: var(--tysb-red); color: var(--tysb-ink); }

.team-start-form {
    display: grid;
    gap: 0.5rem;
    max-width: 32em;
    margin: 0 0 1.5rem;
}
.team-start-form label {
    color: var(--tysb-ink-muted);
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.75rem;
}
.team-start-form label .muted {
    font-weight: 400;
    font-size: 0.85rem;
}
.team-start-form input[type="text"],
.team-start-form textarea {
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.25em;
    padding: 0.85em 1em;
    font-size: 1rem;
    font-family: var(--font-body);
    width: 100%;
}
.team-start-form textarea {
    resize: vertical;
    min-height: 5em;
    line-height: 1.5;
}
.team-start-form input[type="text"]:focus,
.team-start-form textarea:focus {
    outline: 2px solid var(--tysb-lime);
    outline-offset: 1px;
    border-color: var(--tysb-lime);
}
.team-start-form button {
    margin-top: 1rem;
    background: var(--tysb-lime);
    color: var(--tysb-black);
    border: 0;
    border-radius: 0.25em;
    padding: 0.85em 1.4em;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    justify-self: start;
}
.team-start-form button:hover { background: var(--tysb-red); color: var(--tysb-ink); }

.team-start-form select {
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.25em;
    padding: 0.85em 1em;
    font-size: 1rem;
    font-family: var(--font-body);
    width: 100%;
}
.team-start-form select:focus {
    outline: 2px solid var(--tysb-lime);
    outline-offset: 1px;
    border-color: var(--tysb-lime);
}

.flag-group {
    border: 1px solid var(--tysb-rule);
    border-radius: 0.25em;
    padding: 0.75em 1em;
    margin-top: 0.75rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.flag-group legend {
    color: var(--tysb-ink-muted);
    font-size: 0.9rem;
    padding: 0 0.4em;
}
.flag-group .flag {
    color: var(--tysb-ink);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0 !important;
    cursor: pointer;
}
.flag-group .flag input[type="checkbox"] {
    accent-color: var(--tysb-lime);
    width: 1.1em;
    height: 1.1em;
}

.member-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border: 1px solid var(--tysb-rule);
    border-radius: 0.4em;
    background: var(--tysb-black-soft);
    overflow: hidden;
    max-width: 32em;
}
.member-list li {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--tysb-rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.member-list li:last-child { border-bottom: 0; }
.member-who { color: var(--tysb-ink); font-weight: 500; }
.member-meta {
    color: var(--tysb-ink-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.team-home-actions {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
}
.team-home-actions li { margin: 0; }

.event-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4em 1.2em;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.4em;
    max-width: 38em;
}
.event-meta dt {
    color: var(--tysb-ink-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.event-meta dd {
    margin: 0;
    color: var(--tysb-ink);
}

.clerk-notes {
    background: var(--tysb-black-soft);
    border-left: 4px solid var(--tysb-red);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border-radius: 0.25em;
    max-width: 38em;
}
.clerk-notes h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: var(--tysb-lime);
}
.clerk-notes h3 .muted {
    font-style: normal;
    text-transform: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    margin-left: 0.5em;
}
.clerk-notes p { margin: 0; color: var(--tysb-ink); }

.setup-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 2rem;
    align-items: start;
    margin: 0 0 1.5rem;
}
@media (max-width: 640px) {
    .setup-grid { grid-template-columns: 1fr; }
}
.setup-qr svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    background: #fff;
    padding: 0.5rem;
    border-radius: 0.3em;
    display: block;
}
.setup-qr p.muted { margin-top: 0.75rem; font-size: 0.85rem; word-break: break-all; }
.setup-qr code {
    background: var(--tysb-black-soft);
    padding: 0.15em 0.4em;
    border-radius: 0.2em;
    color: var(--tysb-lime);
    font-size: 0.9rem;
}

.copy-master-btn {
    background: var(--tysb-lime);
    color: var(--tysb-black);
    border: 0;
    border-radius: 0.25em;
    padding: 0.4em 0.8em;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.copy-master-btn:hover { background: var(--tysb-red); color: var(--tysb-ink); }

.event-fieldset {
    border: 1px solid var(--tysb-rule);
    border-radius: 0.4em;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1rem 0;
    background: rgba(20,20,20,0.4);
}
.event-fieldset legend {
    color: var(--tysb-lime);
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    padding: 0 0.5em;
}
.event-fieldset label:first-of-type { margin-top: 0; }

.flash {
    background: rgba(196,255,46,0.12);
    border: 1px solid var(--tysb-lime);
    color: var(--tysb-ink);
    padding: 0.75em 1em;
    border-radius: 0.25em;
    margin: 0 0 1.5rem;
    max-width: 38em;
    font-size: 0.95rem;
}

.settings-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.clear-btn {
    background: transparent;
    color: var(--tysb-ink-muted);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.25em;
    padding: 0.4em 0.8em;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.clear-btn:hover { color: var(--tysb-red); border-color: var(--tysb-red); }

.vars-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    gap: 0.4rem;
}
.vars-list li { font-size: 0.9rem; }
.vars-list code {
    background: var(--tysb-black-soft);
    color: var(--tysb-lime);
    padding: 0.1em 0.4em;
    border-radius: 0.2em;
    margin-right: 0.5em;
}

.comms-input {
    width: 100%;
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.25em;
    padding: 0.75em 1em;
    font-size: 1rem;
    font-family: var(--font-body);
    margin-bottom: 0.5rem;
}

.quill-host {
    background: #fafafa;
    color: #0a0a0a;
    border-radius: 0.25em;
    min-height: 280px;
}
.quill-host .ql-toolbar { background: #f0f0f0; border-radius: 0.25em 0.25em 0 0; }
.quill-host .ql-container { font-family: Inter, sans-serif; font-size: 15px; min-height: 240px; }

.sms-textarea {
    width: 100%;
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.25em;
    padding: 0.75em 1em;
    font-size: 1rem;
    font-family: var(--font-body);
    resize: vertical;
}

.preview-frame {
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--tysb-rule);
    border-radius: 0.25em;
    background: #0a0a0a;
}

.layout-list, .layout-summary {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.5rem;
    max-width: 38em;
}
.layout-list li {
    border: 1px solid var(--tysb-rule);
    border-radius: 0.4em;
    background: var(--tysb-black-soft);
    overflow: hidden;
}
.layout-list li summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
}
.layout-list li summary::-webkit-details-marker { display: none; }
.layout-list li details[open] summary { border-bottom: 1px solid var(--tysb-rule); }
.layout-list li details > .team-start-form,
.layout-list li details > p {
    padding: 0.85rem 1.1rem;
    margin: 0;
}
.layout-summary li {
    padding: 0.75rem 1rem;
    border: 1px solid var(--tysb-rule);
    border-radius: 0.3em;
    background: var(--tysb-black-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
}
.layout-name {
    font-weight: 600;
    color: var(--tysb-ink);
    font-size: 1.05rem;
}
.layout-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1em 0.5em;
    border-radius: 0.25em;
    font-weight: 700;
}
/* ---- Checklists ----------------------------------------------- */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--tysb-rule);
}
.checklist-item:last-child { border-bottom: 0; }
.checklist-item.checked .checklist-label {
    text-decoration: line-through;
    color: var(--tysb-muted);
}
.checklist-tick {
    background: none;
    border: 0;
    color: var(--tysb-red);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1em 0.3em;
}
.checklist-tick:hover { color: var(--tysb-lime); }
.checklist-label {
    flex: 1;
    line-height: 1.4;
}
.checklist-add {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.checklist-add input[type="text"] { flex: 1; }
.checklist-preview {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.checklist-preview li {
    font-size: 0.95rem;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.checklist-edit > summary { list-style: none; }
.checklist-edit > summary::-webkit-details-marker { display: none; }
.checklist-edit { vertical-align: middle; }

/* ---- Live dashboard ------------------------------------------- */

.dash-section {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 1rem var(--gutter) 4rem;
}
.dash-heading {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin: 0 0 1rem;
}

.dash-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.75rem;
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.5em;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
}
@media (max-width: 560px) {
    .dash-hero { grid-template-columns: 1fr; }
}
.dash-hero-now p { margin: 0; }
.dash-now-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--tysb-lime);
    font-weight: 700;
}
.dash-now-driver {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    color: var(--tysb-ink);
    line-height: 1;
    margin: 0.25rem 0 0.5rem !important;
}
.dash-now-driver.dash-empty { color: var(--tysb-ink-muted); }
.dash-now-meta { color: var(--tysb-ink-muted); font-size: 0.95rem; }

.dash-hero-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.dash-tile {
    background: var(--tysb-black);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.35em;
    padding: 0.6rem 0.5rem;
    text-align: center;
}
.dash-tile p { margin: 0; }
.dash-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tysb-ink-muted);
}
.dash-tile-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--tysb-ink);
    margin-top: 0.15rem;
}

.dash-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 1rem;
}
@media (max-width: 560px) {
    .dash-actions { grid-template-columns: 1fr; }
}
.dash-card {
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.5em;
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dash-card h3 {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--tysb-lime);
    letter-spacing: 0.02em;
}
.dash-card label {
    color: var(--tysb-ink-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.dash-card input,
.dash-card select {
    background: var(--tysb-black);
    border: 1px solid var(--tysb-rule);
    color: var(--tysb-ink);
    border-radius: 0.3em;
    padding: 0.7em 0.9em;
    font-size: 1.1rem;
    font-family: var(--font-body);
}
.dash-card input:focus,
.dash-card select:focus {
    outline: 2px solid var(--tysb-lime);
    border-color: var(--tysb-lime);
}
.dash-btn {
    margin-top: 0.85rem;
    border: 0;
    border-radius: 0.3em;
    padding: 0.95em 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    min-height: 3rem; /* fat-finger trackside */
}
.dash-btn-primary {
    background: var(--tysb-lime);
    color: var(--tysb-black);
}
.dash-btn-primary:hover { background: var(--tysb-red); color: var(--tysb-ink); }
.dash-btn-secondary {
    background: var(--tysb-red);
    color: var(--tysb-ink);
}
.dash-btn-secondary:hover { background: var(--tysb-red-deep); }

.dash-details {
    background: var(--tysb-black-soft);
    border: 1px solid var(--tysb-rule);
    border-radius: 0.5em;
    margin: 0 0 0.75rem;
    padding: 0;
}
.dash-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
}
.dash-details > summary::-webkit-details-marker { display: none; }
.dash-details > summary h3 {
    margin: 0;
    display: inline;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--tysb-ink);
    letter-spacing: 0.02em;
}
.dash-details[open] > summary { border-bottom: 1px solid var(--tysb-rule); }
.dash-details > ul,
.dash-details > p { padding: 0.5rem 1.1rem 1rem; margin: 0; }

.dash-records {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.dash-records li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--tysb-rule);
}
.dash-records li:last-child { border-bottom: 0; }
.record-primary { color: var(--tysb-ink); font-weight: 600; }
.record-meta { color: var(--tysb-ink-muted); font-size: 0.9rem; }
.record-flag {
    font-size: 0.7rem;
    padding: 0.05em 0.4em;
    border-radius: 0.2em;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.record-flag.yellow { background: #ffcd29; color: #000; }
.record-flag.red    { background: var(--tysb-red); color: var(--tysb-ink); }
.record-flag.sc     { background: var(--tysb-ink-muted); color: var(--tysb-black); }

.layout-km {
    font-size: 0.85rem;
    color: var(--tysb-ink-muted);
    font-family: ui-monospace, monospace;
    padding: 0.1em 0.5em;
    border: 1px solid var(--tysb-rule);
    border-radius: 0.25em;
}
.layout-status.live      { background: var(--tysb-lime); color: var(--tysb-black); }
.layout-status.ended     { background: var(--tysb-rule); color: var(--tysb-ink-muted); }
.layout-status.scheduled { background: rgba(225,11,28,0.15); color: var(--tysb-red); }
.layout-status.open      { background: var(--tysb-black); color: var(--tysb-ink-muted); border: 1px solid var(--tysb-rule); }
.layout-status.session   { background: var(--tysb-lime); color: var(--tysb-black); }
.layout-status.admin     { background: rgba(225,11,28,0.15); color: var(--tysb-red); }
.layout-status.note      { background: var(--tysb-rule); color: var(--tysb-ink-muted); }
.layout-times {
    font-size: 0.9rem;
    color: var(--tysb-ink-muted);
}

.sms-preview {
    background: var(--tysb-black-soft);
    color: var(--tysb-lime);
    padding: 1em;
    border-radius: 0.25em;
    font-family: ui-monospace, monospace;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.form-error {
    color: var(--tysb-red);
    background: rgba(225,11,28,0.08);
    border: 1px solid rgba(225,11,28,0.3);
    padding: 0.75em 1em;
    border-radius: 0.25em;
    margin: 0 0 1rem;
    max-width: 32em;
}

.login-confirm h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 1rem;
}
.login-confirm code {
    background: var(--tysb-black-soft);
    padding: 0.1em 0.4em;
    border-radius: 0.2em;
    color: var(--tysb-lime);
}
.muted { color: var(--tysb-ink-muted); font-size: 0.95rem; }

/* --- Footer ----------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--tysb-rule);
    padding: 2rem var(--gutter);
    max-width: var(--layout-max);
    margin: 0 auto;
    font-size: 0.875rem;
    color: var(--tysb-ink-muted);
}
.disclaimer { margin: 0 0 0.5rem; font-style: italic; }
.footer-meta { margin: 0; }