/* ==========================================================================
   Tabtooch — layout: utility bar, masthead, rubric nav, drawer, page frame,
   section rhythm and footer. The masthead replaces the usual logo-menu-CTA
   top bar: wordmark and rubrics are stacked like a newspaper front page.
   ========================================================================== */

/* ---------------------------------------------------------- utility bar -- */

.utility {
    background: var(--deep);
    color: var(--deep-fg-soft);
    font-size: var(--t-xs);
    border-bottom: 1px solid var(--deep-line);
}

.utility__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-2);
    min-height: 2.25rem;
}

.utility__age {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--deep);
    background: var(--deep-fg);
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
}

.utility__msg {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.utility__msg > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.utility__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    margin-left: auto;
}

/* The help and self-exclusion links are the ones a person in trouble reaches
   for, so they carry a 24px target rather than the bare line height. */
.utility a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--deep-fg);
    text-decoration-color: color-mix(in srgb, var(--deep-fg) 40%, transparent);
    white-space: nowrap;
}

.utility a:hover {
    color: #fff;
}

.utility__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* -------------------------------------------------------------- masthead - */

.masthead {
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
}

.masthead__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    padding-block: var(--s-4);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--fg);
}

.wordmark:hover {
    color: var(--brand);
}

.wordmark__mark {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.wordmark__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.55rem, 1.25rem + 1.5vw, 2.3rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.wordmark__text b {
    font-weight: 600;
    font-style: italic;
    color: var(--brand);
}

.masthead__aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
}

.masthead__clock {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--fg-soft);
    text-align: right;
    line-height: 1.35;
}

.masthead__clock b {
    display: block;
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--fg);
}

.masthead__actions {
    display: none;
    gap: var(--s-2);
}

/* Bet slip, from the top of the page.
   The docket itself sits at the foot of the window, where it is easy to scroll
   past without registering. This is the same control at eye level: present on
   every screen size, carrying the live count, and picking up the brand fill the
   moment there is something in the slip. */
.slip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--speed) var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.slip-btn:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.slip-btn__icon {
    font-size: 1.2em;
    color: var(--brand);
}

/* Below the breakpoint the label is hidden from sight but kept in the
   accessibility tree, so the control is never announced as a bare "0". */
.slip-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.slip-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding-inline: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--fg-soft);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
}

/* Something in the slip: the control stops being a quiet outline. */
.slip-btn.is-active {
    color: var(--on-brand);
    background: var(--brand-fill);
    border-color: var(--brand-fill);
}

.slip-btn.is-active .slip-btn__icon {
    color: var(--on-brand);
}

.slip-btn.is-active .slip-btn__count {
    color: var(--brand-fill);
    background: #fff;
    border-color: #fff;
}

.drawer__link--slip {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    cursor: pointer;
}

.drawer__link--slip .slip-btn__count {
    margin-left: auto;
}

.drawer__link--slip.is-active {
    color: var(--brand);
}

.drawer__link--slip.is-active .slip-btn__count {
    color: var(--on-brand);
    background: var(--brand-fill);
    border-color: var(--brand-fill);
}

/* Narrow phones: the masthead carries the wordmark, this control and the menu
   on one line, so the icon-only state is tightened to keep the row inside the
   viewport at 360px. */
@media (max-width: 399px) {
    .masthead__aside {
        gap: var(--s-2);
    }

    .slip-btn {
        gap: 0.3rem;
        padding-inline: 0.45rem;
        letter-spacing: 0;
    }

    .slip-btn__count {
        min-width: 1.25rem;
        padding-inline: 0.2rem;
    }
}

@media (min-width: 400px) {
    .slip-btn__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}

.drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.drawer-toggle .icon {
    font-size: 1.15em;
}

.drawer-toggle:hover {
    border-color: var(--fg);
}

@media (min-width: 600px) {
    .masthead__clock {
        display: block;
    }
}

@media (min-width: 860px) {
    .masthead__actions {
        display: flex;
    }

    .drawer-toggle {
        display: none;
    }
}

/* ------------------------------------------------------------- rubric nav */

.rubrics {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
    border-top: 1px solid var(--line-strong);
    border-bottom: 3px double var(--line-strong);
    transition: box-shadow var(--speed) var(--ease);
}

.rubrics.is-stuck {
    box-shadow: var(--shadow-2);
}

.rubrics__inner {
    display: flex;
    align-items: stretch;
    gap: var(--s-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rubrics__inner::-webkit-scrollbar {
    display: none;
}

.rubric {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.85rem;
    color: var(--fg-2);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.rubric::after {
    content: "";
    position: absolute;
    inset-inline: 0.5rem;
    bottom: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--speed) var(--ease);
}

.rubric:hover,
.rubric:focus-visible {
    color: var(--brand);
}

.rubric:hover::after,
.rubric[aria-current="page"]::after {
    transform: scaleX(1);
}

.rubric[aria-current="page"] {
    color: var(--fg);
}

.rubrics__spacer {
    flex: 1;
}

/* The masthead already carries the call to action at the top of the page. This
   one belongs to the rubric bar once that bar has stuck and the masthead has
   scrolled away, so the two are never on screen together.
   The space is reserved rather than collapsed, so nothing shifts when it
   appears; visibility keeps it out of the tab order until then. */
.rubrics__cta {
    flex: none;
    display: none;
    align-items: center;
    align-self: center;
    margin-left: var(--s-2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--speed) var(--ease),
                transform var(--speed) var(--ease),
                visibility var(--speed);
}

@media (min-width: 860px) {
    .rubrics__cta {
        display: inline-flex;
    }

    .rubrics.is-stuck .rubrics__cta {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- drawer - */

.scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(6, 3, 10, 0.72);
    backdrop-filter: blur(2px);
    animation: fade-in var(--speed) var(--ease);
}

.drawer {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 100;
    width: min(21rem, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line-strong);
    box-shadow: 4px 0 40px -14px rgba(0, 0, 0, 0.75);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform var(--speed-slow) var(--ease);
}

.drawer.is-open {
    transform: none;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 3px double var(--line-strong);
}

.drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    color: var(--fg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.drawer__close:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.drawer__group {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}

.drawer__group:last-child {
    border-bottom: 0;
}

.drawer__label {
    display: block;
    margin-bottom: var(--s-2);
}

.drawer__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    color: var(--fg);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
}

.drawer__link:last-child {
    border-bottom: 0;
}

.drawer__link .icon {
    font-size: 1.15em;
    color: var(--brand);
}

.drawer__link:hover {
    color: var(--brand);
}

.drawer__link[aria-current="page"] {
    color: var(--brand);
    font-weight: 600;
}

.drawer__actions {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5) var(--s-6);
}

@media (min-width: 860px) {
    .drawer,
    .scrim {
        display: none;
    }
}

/* ------------------------------------------------------------ page frame - */

.main {
    display: block;
    padding-bottom: var(--s-8);
}

/* Editorial section: number sits in the left margin column on desktop. */
.section {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    padding-block: var(--s-6);
}

.section--tight {
    padding-block: var(--s-5);
}

.section--flush {
    padding-top: 0;
}

.section__head {
    display: grid;
    grid-template-columns: var(--margin-col) 1fr;
    align-items: end;
    gap: 0 var(--s-4);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 3px double var(--line-strong);
}

/* Signature: numbered sections, mono, in the margin. */
.section__number {
    grid-column: 1;
    align-self: start;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brand);
    padding-top: 0.35rem;
}

.section__number::after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    margin-top: 0.4rem;
    background: var(--line-strong);
}

.section__titles {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
}

.section__title {
    font-size: var(--t-xl);
}

.section__lead {
    grid-column: 2;
    max-width: 62ch;
    margin-top: var(--s-2);
    color: var(--fg-soft);
}

.section__body {
    display: grid;
    grid-template-columns: var(--margin-col) 1fr;
    gap: 0 var(--s-4);
}

.section__body > * {
    grid-column: 2;
}

@media (max-width: 1079px) {
    .section__number {
        grid-column: 1 / -1;
        margin-bottom: var(--s-1);
    }

    .section__number::after {
        display: none;
    }

    .section__titles,
    .section__lead,
    .section__body > * {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- footer - */

.site-footer {
    background: var(--deep);
    color: var(--deep-fg-soft);
    border-top: 4px solid var(--brand);
    padding-block: var(--s-7) var(--s-6);
    font-size: var(--t-sm);
    line-height: 1.7;
}

.site-footer a {
    color: var(--deep-fg);
    text-decoration-color: color-mix(in srgb, var(--deep-fg) 30%, transparent);
}

.site-footer a:hover {
    color: #fff;
    text-decoration-color: currentColor;
}

.footer__masthead {
    display: grid;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 3px double var(--deep-line);
}

.footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
}

.footer__brand .wordmark {
    color: var(--deep-fg);
}

.footer__brand .wordmark:hover {
    color: #fff;
}

.footer__brand .wordmark__text b {
    color: var(--brand);
}

.footer__domain {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    color: var(--deep-fg-soft);
    border-left: 1px solid var(--deep-line);
    padding-left: var(--s-4);
}

.footer__blurb {
    max-width: 68ch;
    color: var(--deep-fg-soft);
}

/* Three columns maximum — wide data lives in its own full-width band. */
.footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5) var(--s-6);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
}

@media (min-width: 560px) {
    .footer__nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .footer__nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer__col h2 {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-fg);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--deep-line);
}

.footer__col ul {
    display: grid;
    gap: 0.1rem;
}

.footer__col a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.footer__col a:hover {
    border-bottom-color: var(--brand);
}

.footer__link-btn {
    color: var(--deep-fg);
    text-align: left;
    border-bottom: 1px solid transparent;
}

.footer__link-btn:hover {
    color: #fff;
    border-bottom-color: var(--brand);
}

/* WCAG 2.2 target size: standalone footer controls need a 24px hit area,
   which the 13px type does not give on its own. */
.footer__col a,
.footer__link-btn,
.footer__licence dd a,
.badge-row a {
    display: inline-block;
    min-height: 24px;
    padding-block: 0.28rem;
}

/* Licence data: full-width band, auto-fit columns, never a narrow column. */
.footer__licence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s-4) var(--s-6);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
}

.footer__licence dt {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep-fg-soft);
    margin-bottom: 0.2rem;
}

.footer__licence dd {
    margin: 0;
    color: var(--deep-fg);
    line-height: 1.5;
}

.footer__licence dd .mono {
    font-size: var(--t-sm);
}

.footer__legal {
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--deep-line);
    max-width: 92ch;
}

.footer__legal p + p {
    margin-top: var(--s-4);
}

.footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    padding-top: var(--s-5);
    font-size: var(--t-xs);
}

/* ------------------------------------------------------------- animation - */

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

/* Scroll reveal: opt-in, and switched off entirely for reduced motion. */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--speed-slow) var(--ease),
                transform var(--speed-slow) var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}