/* ═════════════════════════════════════════════════════════════════════════
   MagicFinders — "Park Poster" design system
   Flat mid-century colour · Alfa Slab One display · Archivo UI · hard ink borders
   with offset block shadows · ticket-stub motifs.
   Source of truth: design_handoff_magicfinders_park_poster/README.md (tokens in base.html)
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Type (self-hosted; latin subset) ─── */
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/AlfaSlabOne-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/static/fonts/Archivo-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/static/fonts/ArchivoNarrow-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ─── Page ─── */
html { background-color: #F6EBD5; }
.pp-page { min-height: 100vh; background: #F6EBD5; color: #1E2A3A; -webkit-font-smoothing: antialiased; }
::selection { background: #F0B43C; color: #1E2A3A; }
[hidden] { display: none !important; }   /* author display rules must never resurrect a hidden element */

/* ─── Motion ─── */
@keyframes mf-spin { to { transform: rotate(360deg); } }
@keyframes mf-pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .35; transform: scale(.8);} }
@keyframes mf-rise { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
.pp-rise, .sb-rise { animation: mf-rise .4s ease both; }
.pp-pulse, .sb-pulse { animation: mf-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .pp-rise, .sb-rise, .pp-pulse, .sb-pulse, .pp-spinner, .sb-spinner, .pp-spinner-ink, .sb-spinner-ink { animation: none; }
}

/* ─── Nav ─── */
.pp-nav { padding: 6px 0 3px; border-bottom: 3px solid transparent; color: #1E2A3A; text-decoration: none; }
.pp-nav:hover { border-bottom-color: rgba(226,85,63,.45); }
.pp-nav.is-on { border-bottom-color: #E2553F; }

/* ─── Focus (one solid ring everywhere: 3px teal, 2px off the edge — 4.9:1 on paper, 5.8:1 on white) ─── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #1F6F78; outline-offset: 2px; }
.pp-input:focus, .pp-field:focus-within { outline: 3px solid #1F6F78; outline-offset: 2px; }
.pp-field:focus-within :is(.pp-value, .lp-stepper input):focus-visible { outline: none; }   /* the field box carries the ring, not the bare control inside it */
.pp-field:has(.lp-stepper button:focus-visible) { outline: none; }      /* …except stepper buttons, which ring individually (no :has → both ring; still visible) */
main:focus { outline: none; }                                             /* skip-link target: programmatic focus only */
.pp-seg > button:focus-visible { outline-offset: -3px; }                  /* .pp-seg clips overflow: draw the ring inside the segment */
.pp-seg > button.is-on:focus-visible { outline-color: #F6EBD5; }          /* paper ring on the ink segment (12.3:1) */

/* ─── Buttons ─── */
.pp-btn {            /* primary: tomato, 3px ink border, 4px block shadow, display face */
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    min-height: 52px; padding: 0 28px; border: 3px solid #1E2A3A; border-radius: 8px; background: #C9432F; color: #FFFFFF;
    font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 18px; line-height: 1.1; letter-spacing: 0; text-decoration: none; text-align: center; white-space: normal;
    box-shadow: 4px 4px 0 #1E2A3A; cursor: pointer; transition: background-color .12s ease, transform .06s ease, box-shadow .06s ease;
}
.pp-btn:focus-visible { box-shadow: 4px 4px 0 #1E2A3A; }   /* focus keeps the block shadow; the teal ring is the cue */
.pp-btn:hover { background: #B23A28; color: #FFFFFF; }
.pp-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1E2A3A; }
.pp-btn[disabled], .pp-btn.is-busy { opacity: .7; cursor: default; transform: none; }
.pp-btn-good { background: #26774A; } .pp-btn-good:hover { background: #1E5E3C; }
.pp-btn-ink {        /* dark utility button (nav sign-in, Open Mail app) */
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 0 18px;
    border: 2px solid #1E2A3A; border-radius: 8px; background: #1E2A3A; color: #F6EBD5; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
}
.pp-btn-ink:hover { background: #C9432F; border-color: #1E2A3A; color: #FFFFFF; }
.pp-btn-line {       /* secondary: 2px ink outline on white */
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 40px; padding: 0 14px;
    border: 2px solid #1E2A3A; border-radius: 6px; background: #FFFFFF; color: #1E2A3A; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.pp-btn-line:hover { background: #1E2A3A; color: #F6EBD5; }
.pp-btn-line.is-danger { color: #C9432F; border-color: #C9432F; } .pp-btn-line.is-danger:hover { background: #C9432F; color: #FFFFFF; }
.pp-link { color: #1F6F78; font-weight: 700; text-decoration: none; } .pp-link:hover { color: #C9432F; text-decoration: underline; text-underline-offset: 3px; }


/* small variants for dense operator screens */
.pp-btn.pp-btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; box-shadow: 3px 3px 0 #1E2A3A; }
.pp-input.pp-input-sm { padding: 9px 12px; font-size: 14px; font-weight: 600; }
textarea.pp-input { white-space: pre-wrap; }
.pp-badge.is-warn { background: #F0B43C; }

/* ─── Cards ─── */
.pp-card { background: #FFFFFF; border: 3px solid #1E2A3A; border-radius: 12px; box-shadow: 6px 6px 0 #1E2A3A; }
.pp-card-flat { background: #FFFFFF; border: 3px solid #1E2A3A; border-radius: 12px; }
.pp-card-lg { border-radius: 14px; box-shadow: 8px 8px 0 #1E2A3A; }
.pp-perf { border: 0; border-top: 3px dashed #1E2A3A; opacity: .25; }          /* light in-card divider; bleed with negative margins = card padding */

/* ─── Fields: 2px ink box, narrow teal label over a bold value ─── */
.pp-field { position: relative; display: block; box-sizing: border-box; min-width: 0; border: 2px solid #1E2A3A; border-radius: 8px; background: #FFFFFF; padding: 9px 12px 8px; text-align: left; }
.pp-field.is-disabled { background: #F3EBDA; }
.pp-field.is-error { border-color: #B0402D; }
.pp-label { display: block; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #1F6F78; margin-bottom: 3px; }
.pp-value {          /* the control inside a .pp-field */
    display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 0; margin: 0;
    font-family: Archivo, system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #1E2A3A; line-height: 1.35;
    white-space: nowrap; text-overflow: ellipsis;
}
.pp-value:not(input):not(textarea) { overflow: hidden; }   /* static values and pickers may ellipsize; typed text is never clipped */
.pp-value::placeholder { color: #6B7280; font-weight: 500; }
select.pp-value { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 18px;
    background-image: linear-gradient(45deg, transparent 50%, #1E2A3A 50%), linear-gradient(135deg, #1E2A3A 50%, transparent 50%);
    background-position: calc(100% - 7px) 55%, calc(100% - 2px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="date"].pp-value { min-width: 118px; }
input[type="date"].pp-value::-webkit-calendar-picker-indicator { opacity: .7; margin-left: 2px; }
.pp-hint { font-size: 12.5px; line-height: 1.45; color: #5B6472; }
.pp-input {          /* stand-alone input (sign-in email) */
    width: 100%; box-sizing: border-box; padding: 14px 14px; border: 2px solid #1E2A3A; border-radius: 8px; background: #FFFFFF;
    font-family: Archivo, system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #1E2A3A;
}
.pp-input::placeholder { color: #6B7280; font-weight: 500; }
.pp-input.is-error { border-color: #B0402D; }
.pp-error { color: #B0402D; font-size: 13px; font-weight: 700; }

/* ─── Step header: ink disc with a mustard numeral + display title ─── */
.pp-step { display: flex; align-items: center; gap: 12px; }
.pp-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #1E2A3A; color: #F0B43C; display: flex; align-items: center; justify-content: center; font-family: 'Alfa Slab One', serif; font-size: 15px; line-height: 1; }
.pp-step-t { font-family: 'Alfa Slab One', serif; font-size: 22px; line-height: 1.15; color: #1E2A3A; }

/* ─── Poster tiles (kind selector) ─── */
.pp-tile { display: block; box-sizing: border-box; text-align: left; border: 3px solid #1E2A3A; border-radius: 10px; background: #FFFFFF; color: #1E2A3A; padding: 18px 20px; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.pp-tile:hover { background: #FDF6E7; }
.pp-tile.is-on { background: #1E2A3A; color: #F0B43C; }
.pp-tile .pp-eyebrow { opacity: .75; }
.pp-tile.is-on .pp-eyebrow, .pp-tile.is-on .pp-tile-sub { color: #F0B43C; opacity: .9; }
.pp-tile-t { font-family: 'Alfa Slab One', serif; font-size: 26px; line-height: 1.1; margin: 6px 0 4px; }
.pp-tile-sub { font-size: 13.5px; color: #4A5566; }
.pp-eyebrow { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.pp-pill { display: inline-block; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; background: #C9432F; color: #FFFFFF; border-radius: 4px; padding: 6px 12px 5px; }

/* ─── Segmented control (2px ink; selected half = ink/paper) ─── */
.pp-seg { display: inline-flex; border: 2px solid #1E2A3A; border-radius: 6px; overflow: hidden; background: #FFFFFF; }
.pp-seg > button { border: 0; background: transparent; color: #1E2A3A; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; min-height: 32px; }
.pp-seg > button + button { border-left: 2px solid #1E2A3A; }
.pp-seg > button.is-on { background: #1E2A3A; color: #F6EBD5; }
.pp-seg.is-lg > button { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 9px 18px; min-height: 40px; }

/* ─── Chips + badges ─── */
.pp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 2px solid #1E2A3A; border-radius: 6px; background: #FFFFFF; color: #1E2A3A; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pp-chip.is-on { background: #1E2A3A; color: #F6EBD5; }
.pp-chip.is-muted { border-color: #5B6472; color: #5B6472; }
.pp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 2px solid #1E2A3A; border-radius: 5px; background: #FFFFFF; color: #1E2A3A; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pp-badge.is-open { background: #26774A; border-color: #26774A; color: #FFFFFF; }
.pp-badge.is-sent { background: #DDEFE2; border-color: #26774A; color: #1F5A38; }   /* an opening alert went out from this read: a lighter green beside the solid OK */
.pp-badge.is-paused { background: #E5E7EB; color: #4A5566; border-color: #4A5566; }
.pp-badge.is-error { background: #FBE3DE; color: #B0402D; border-color: #B0402D; }
.pp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #F0B43C; border: 2px solid #1E2A3A; box-sizing: border-box; flex: none; }
.pp-dot.is-open { background: #26774A; } .pp-dot.is-error { background: #C9432F; } .pp-dot.is-paused { background: #9CA3AF; } .pp-dot.is-plain { border: 0; }

/* ─── Ticket: coloured header, perforation with punched notches, white stub ─── */
.pp-ticket { position: relative; background: #FFFFFF; border: 3px solid #1E2A3A; border-radius: 12px; box-shadow: 6px 6px 0 #1E2A3A; }
.pp-ticket-hd { position: relative; padding: 20px 22px 18px; border-radius: 9px 9px 0 0; background: #F0B43C; color: #1E2A3A; }
.pp-ticket-hd.is-hotel { background: #1F6F78; color: #F6EBD5; }
.pp-ticket-hd.is-experience { background: #C9432F; color: #FFFFFF; }
.pp-ticket-hd.is-open { background: #26774A; color: #FFFFFF; }
.pp-ticket-hd.is-paused { background: #D6CDBD; color: #1E2A3A; opacity: .8; }
.pp-ticket-hd.is-plain { background: #EFE4CC; color: #1E2A3A; }      /* a plan that is simply free — not paused */
/* plan facts on the landing tickets (markup in landing.html #plans) */
.lp-plan-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.lp-plan-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #4A5566; }
.lp-plan-list li::before { content: "\2736" / ""; position: absolute; left: 0; top: 1px; color: #1F6F78; font-size: 12px; }
.lp-plan-list b { color: #1E2A3A; }
.pp-ticket-perf { position: relative; height: 0; border-top: 3px dashed #1E2A3A; }
.pp-ticket-perf::before, .pp-ticket-perf::after { content: ""; position: absolute; top: -13px; width: 22px; height: 22px; border-radius: 50%; background: #F6EBD5; border: 3px solid #1E2A3A; box-sizing: border-box; }
.pp-ticket-perf::before { left: -14px; } .pp-ticket-perf::after { right: -14px; }
.pp-ticket-stub { padding: 16px 22px 18px; }
.pp-ticket-name { font-family: 'Alfa Slab One', serif; font-size: 30px; line-height: 1.05; margin: 6px 0 4px; }
.pp-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding-bottom: 10px; border-bottom: 2px solid currentColor; margin-top: 12px; }
.pp-facts .k { font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: 1; }
.pp-facts .v { font-size: 14px; font-weight: 700; line-height: 1.25; }

/* ─── Tables (dense list card) ─── */
.pp-table { background: #FFFFFF; border: 3px solid #1E2A3A; border-radius: 12px; box-shadow: 6px 6px 0 #1E2A3A; overflow: hidden; }
.pp-th { background: #1E2A3A; color: #F6EBD5; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pp-tr { border-top: 2px solid #EFE4CC; }
.pp-tr.is-open { background: #E8F5EC; } .pp-tr.is-paused { background: #FBF6EA; opacity: .75; }


/* ─── Alert builder card (landing + New alert; markup in _builder_card.html) ─── */
.lp-card { position:relative; z-index:2; }
.lp-step1-h { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.lp-step1-h .pp-step { margin:0; }
.lp-parkseg button { min-height:38px; padding:7px 14px; font-size:12.5px; }
@media (max-width:520px) { .lp-parkseg { width:100%; } .lp-parkseg button { flex:1 1 0; min-height:36px; padding:6px 8px; font-size:12px; } }
.pp-field.is-locked { display:flex; flex-direction:column; justify-content:center; text-decoration:none; background:#FBF3E2; border-style:dashed; cursor:pointer; }
.pp-field.is-locked:hover, .pp-field.is-locked:focus-visible { border-color:#1F6F78; border-style:solid; background:#FFFDF7; }
.lp-locked-v { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin-top:2px; min-height:24px; overflow:hidden; }
.lp-locked-b { background:#F0B43C; white-space:nowrap; font-size:10.5px; padding:2px 7px; }
.lp-locked-t { font-size:13.5px; font-weight:700; color:#1F6F78; white-space:nowrap; }
@media (max-width:520px) { .lp-locked-t { font-size:12.5px; } }
.lp-datenote { background:#FDF6E7; border:2px solid #F0B43C; border-radius:8px; padding:8px 11px; color:#4A5566; font-size:13px; line-height:1.45; margin:2px 0 6px; }
.lp-datenote b { color:#1E2A3A; }
.lp-timerange { display:flex; align-items:center; gap:6px; }
.lp-timerange select.pp-value { flex:1 1 0; min-width:0; padding-right:14px; }
.lp-timerange.is-any select#f-time-to, .lp-timerange.is-any .lp-timesep { display:none; }
.lp-timesep { color:#5B6472; font-weight:700; }
.lp-details { display:grid; gap:10px; }
.lp-grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) 132px; gap:10px; }
.lp-grid-hotel2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
/* Room type · price cap split the row under the resort (no disclosure); phones stack them, room first */
.lp-ages { grid-column: 2; padding: 2px 4px 0; }
.lp-ages .pp-chip { min-height:40px; }
.lp-pricehint { grid-column: 2; padding: 0 2px; }     /* the cap's one-line explanation hangs under the cap, not across the room type */
/* The cap's $ sign appears inside the field once a number is typed — in the DOM it sits after the
   input (so :placeholder-shown can hide it while the field is empty) and flexes in front of it. */
.lp-pricein { display:flex; align-items:center; }
.lp-pricein .pp-value { flex:1 1 auto; min-width:0; order:1; }
.lp-pricein-d { font-family:Archivo, system-ui, sans-serif; font-size:16px; font-weight:700; color:#1E2A3A; line-height:1.35; padding-right:1px; }
.lp-pricein .pp-value:placeholder-shown + .lp-pricein-d { display:none; }
@media (max-width: 639px) { .lp-ages, .lp-f-room, .lp-f-price, .lp-pricehint { grid-column: 1 / -1; } }
.lp-below { display:block; }
.lp-step3-h { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.lp-step3-hint { display:none; }
.lp-emailin { display:flex; align-items:center; gap:12px; }
.lp-emailin .pp-value { flex:1 1 auto; min-width:0; }
.lp-helper { display:none; font-size:12.5px; color:#5B6472; white-space:nowrap; }
.lp-party-m { display:none; }
@media (max-width:520px) {           /* phones: date · time · guests on one line (guests becomes a compact picker) */
    .lp-grid2 { grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
    .lp-grid2 .lp-f-date, .lp-grid2 .lp-f-through { grid-column:span 3; } .lp-grid2 .lp-f-time { grid-column:span 4; } .lp-grid2 .lp-f-guests { grid-column:span 2; }
    .lp-grid2 .pp-field { padding-left:9px; padding-right:7px; }
    .lp-grid2 .lp-stepper { display:none; }
    .lp-grid2 .lp-party-m { display:block; }
    .lp-grid2 select.pp-value { padding-right:13px; background-position:calc(100% - 5px) 55%, 100% 55%; }
    input[type="date"].pp-value { min-width:0; }
}
/* Landing (desktop): the mock's single row of fields, hint inline with the step-3 title, helper inside the email field */
@media (min-width:1024px) {
    .lp-onerow .lp-details { grid-template-columns:minmax(0,1.45fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.2fr) 128px; align-items:stretch; }
    /* hotel on the landing: row 1 = hotel (full); row 2 = room type · price cap (50/50), the cap's hint under the cap; then check-in · check-out · adults · children */
    .lp-onerow .lp-details.is-hotel { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .lp-onerow .lp-details.is-hotel .lp-combo { grid-column:1 / -1; }
    .lp-onerow .lp-details.is-hotel .lp-f-room, .lp-onerow .lp-details.is-hotel .lp-f-price { grid-column:span 2; }
    .lp-onerow .lp-details.is-hotel .lp-pricehint { grid-column:3 / -1; }
    .lp-onerow .lp-details.is-hotel .lp-ages { grid-column:3 / -1; }
    .lp-onerow #row-dining, .lp-onerow #row-hotel { display:contents; }
    .lp-onerow .lp-below { grid-column:1 / -1; }
    .lp-onerow .lp-step3-hint { display:inline; }
    .lp-onerow .lp-helper { display:inline; }
    .lp-onerow .lp-help-m { display:none; }
    .lp-onerow .lp-card { padding:28px 30px 26px; }
    .lp-onerow .lp-tiles .pp-tile { padding:18px 20px; } .lp-onerow .lp-tiles .pp-tile-t { font-size:26px; margin:6px 0 4px; }
    .lp-onerow .lp-step-h .pp-step-t { font-size:22px; }
    .lp-onerow .lp-perf { margin:14px -30px; }
}
.lp-step-h { margin:0 0 10px; }
.lp-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.lp-perf { margin:14px -26px; }
.lp-popular { font-size:13px; color:#5B6472; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; }
.lp-popular button { font:inherit; font-weight:700; color:#1E2A3A; background:none; border:0; padding:6px 2px; min-height:32px; cursor:pointer; text-decoration:underline; text-decoration-color:#EFE4CC; text-underline-offset:3px; }
@media (hover:hover) { .lp-popular button:hover { color:#C9432F; } }   /* no sticky red after a tap on phones */
.lp-spec { font-size:13.5px; line-height:1.45; color:#4A5566; margin-top:2px; }
.lp-spec:empty { display:none; }
.lp-spec b { color:#1E2A3A; }
.lp-fine { font-size:12.5px; color:#5B6472; margin-top:6px; }
.lp-stepper { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.lp-stepper button { width:30px; height:30px; border:2px solid #1E2A3A; border-radius:6px; background:#fff; font-weight:800; font-size:16px; line-height:1; color:#1E2A3A; cursor:pointer; flex:none; margin:-4px 0; }
.lp-stepper button:hover { background:#1E2A3A; color:#F6EBD5; }
.lp-stepper input { width:100%; min-width:0; text-align:center; border:0; background:transparent; font:inherit; font-weight:700; font-size:16px; color:#1E2A3A; -moz-appearance:textfield; }
.lp-stepper input::-webkit-outer-spin-button, .lp-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.lp-combo { position:relative; }
.lp-list { position:absolute; left:-2px; right:-2px; top:calc(100% + 6px); z-index:30; background:#fff; border:3px solid #1E2A3A; border-radius:10px; box-shadow:4px 4px 0 #1E2A3A; max-height:min(52vh,420px); overflow:auto; padding:6px 0; }
.lp-list [role=option] { padding:9px 14px; cursor:pointer; min-height:44px; display:flex; flex-direction:column; justify-content:center; }
.lp-list [role=option] .n { font-weight:700; font-size:14.5px; color:#1E2A3A; line-height:1.25; }
.lp-list [role=option] .l { font-size:12px; color:#5B6472; }
.lp-list [role=option] .n .nd { font-weight:400; font-style:normal; font-size:12px; color:#5B6472; white-space:nowrap; }
.lp-list [role=option][aria-selected=true], .lp-list [role=option]:hover { background:#FDF6E7; }
.lp-list .g { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#1F6F78; padding:10px 14px 4px; }
.lp-list .empty { padding:12px 14px; font-size:13.5px; color:#4A5566; }
.lp-chiprow { display:flex; flex-wrap:wrap; gap:8px; }
.lp-chiprow .pp-chip { min-height:40px; }
.lp-err { color:#B0402D; font-size:13px; font-weight:700; margin-top:6px; }
.lp-err:empty { display:none; }
@media (max-width:1023px) {
    .lp-card { padding:12px 16px 16px; border-radius:14px; }
    .lp-perf { margin:8px -16px; }
    .lp-step-h { margin-bottom:8px; }
    .lp-step-h .pp-step-t { font-size:16px; letter-spacing:-.005em; }
    .lp-step-h .pp-step-n { display:none; }   /* step 2's header is hidden on phones (below), so numbered titles would count 1 → 3: titles stand alone instead */
    .lp-step-h.pp-step, .lp-step-h .pp-step { gap:6px; }
    .lp-step2-h { display:none; }             /* the in-field labels title the block on phones */
    .lp-tiles .pp-tile { padding:9px 6px; text-align:center; } .lp-tiles .pp-tile-t { font-size:15px; margin:0; }
    .lp-tiles .pp-eyebrow, .lp-tiles .pp-tile-sub { display:none; }
    .lp-popular { margin-top:4px; } .lp-popular button { min-height:28px; padding:3px 2px; }
    .lp-cta { width:100%; margin-top:10px; }
    .lp-emailrow { display:block; }
}
@media (max-width:379px) { .lp-popular { display:none; } }
@media (min-width:1024px) {
    .lp-card { padding:18px 26px 20px; border-radius:14px; }
    .lp-perf { margin:10px -26px; }
    .lp-tiles .pp-tile { padding:13px 16px 14px; } .lp-tiles .pp-tile-t { font-size:24px; margin:4px 0 2px; } .lp-tiles .pp-tile-sub { font-size:13px; line-height:1.35; }
    .lp-step-h .pp-step-t { font-size:21px; }
    .lp-cta { min-width:170px; }
    .lp-emailrow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; }
}

/* ─── Spinner ─── */
.pp-spinner, .sb-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #FFFFFF; border-radius: 50%; display: inline-block; animation: mf-spin .7s linear infinite; }
.pp-spinner-ink, .sb-spinner-ink { width: 16px; height: 16px; border: 2.5px solid rgba(30,42,58,.2); border-top-color: #1E2A3A; border-radius: 50%; display: inline-block; animation: mf-spin .7s linear infinite; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(30,42,58,.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(30,42,58,.5); }

@media (max-width: 640px) {
    .pp-card { box-shadow: 5px 5px 0 #1E2A3A; } .pp-card-lg { box-shadow: 5px 5px 0 #1E2A3A; }
    .pp-btn { box-shadow: 3px 3px 0 #1E2A3A; min-height: 50px; font-size: 17px; }
    .pp-ticket { box-shadow: 4px 4px 0 #1E2A3A; } .pp-table { box-shadow: 4px 4px 0 #1E2A3A; }
    .pp-step-t { font-size: 18px; } .pp-tile { padding: 10px 8px; text-align: center; } .pp-tile-t { font-size: 15px; margin: 0; }
    .pp-ticket-name { font-size: 24px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   LEGACY "Storybook" primitives — still used by pages not yet migrated on this
   branch. Delete this whole block when the last sb-* class is gone.
   ═════════════════════════════════════════════════════════════════════════ */
/* ─── Primitives ─── */
.sb-card { background: #FBF4E4; border: 1px solid #E0CFA6; border-radius: 16px; }
.sb-card-sm { background: #FBF4E4; border: 1px solid #E0CFA6; border-radius: 14px; }

.sb-input {
    width: 100%; box-sizing: border-box; padding: 14px 16px;
    border: 1px solid #DDCBA1; border-radius: 12px; background: #FFFCF5;
    font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; color: #3B2D1B; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sb-input:focus { border-color: #B0853A; box-shadow: 0 0 0 3px rgba(176,133,58,.13); }
.sb-input::placeholder { color: #B6A884; }
select.sb-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #B6A884 50%), linear-gradient(135deg, #B6A884 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.sb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; border-radius: 12px; padding: 12px 22px;
    background: #B0853A; color: #FBF4E4;
    font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14.5px;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sb-btn:hover { background: #946C28; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(120,96,40,.18); }
.sb-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.sb-btn-quiet {
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 10px; padding: 9px 16px;
    background: #FBF4E4; border: 1px solid #E0CFA6; color: #946C28;
    font-weight: 600; font-size: 12.5px; transition: border-color .15s ease, transform .15s ease;
}
.sb-btn-quiet:hover { border-color: #B0853A; transform: translateY(-1px); }
.sb-btn-good { background: #3F7A5F; color: #fff; }
.sb-btn-good:hover { background: #2F5E47; }

.sb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #946C28; }
.sb-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #946C28; }
.sb-section-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9C8868; }

/* ─── The search console ─── */
.sb-bar {
    display: flex; align-items: stretch; flex-wrap: wrap; background: #FBF4E4;
    border: 1px solid #DDCBA1; border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(120,96,40,.1);
}
/* Segments may never clip their text: each declares a floor it can't shrink
   past, and the bar wraps onto another row instead of cutting letters off. */
.sb-seg { padding: 12px 18px 10px; border-right: 1px solid #E8D9B6; border-bottom: 1px solid transparent; text-align: left; min-width: 0; flex: 1 1 auto; }
.sb-seg:last-of-type { border-right: 0; }
.sb-seg-park   { min-width: 150px; }
.sb-seg-name   { min-width: 220px; }
.sb-seg-date   { min-width: 178px; }   /* "07/10/2026" + the picker icon + air before the divider */
.sb-seg-count  { min-width: 96px; }
.sb-cta-wrap   { flex: 1 0 auto; }
.sb-cta-wrap .sb-btn { width: 100%; }
/* Multi-row consoles (the watch form): explicit rows, cells inside each. */
.sb-bar.sb-rows { flex-direction: column; flex-wrap: nowrap; }
.sb-row { display: flex; align-items: stretch; flex-wrap: wrap; }
.sb-row + .sb-row { border-top: 1px solid #E8D9B6; }   /* the divider belongs to the row below, so a hidden row takes it along */
.sb-row.hidden { display: none; }
.sb-row > .sb-seg { border-bottom: 0; }
.sb-seg-value {
    width: 100%; border: none; background: transparent; padding: 0; margin: 0; outline: none;
    font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #3B2D1B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Native date inputs draw their calendar icon at their right edge: keep it off
   the segment divider and vertically settled. */
input[type="date"].sb-seg-value { min-width: 122px; width: calc(100% - 10px); padding-right: 2px; }
input[type="date"].sb-seg-value::-webkit-calendar-picker-indicator { margin-left: 4px; opacity: .6; }

select.sb-seg-value { appearance: none; -webkit-appearance: none; cursor: pointer; }
.sb-seg-caret { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-seg-caret::after { content: '▾'; color: #B6A884; font-size: 11px; }
.sb-toggle { display: inline-flex; background: #F7EFD9; border: 1px solid #E0CFA6; border-radius: 12px; padding: 4px; }
.sb-toggle > button { padding: 9px 28px; border: none; cursor: pointer; border-radius: 9px; background: transparent; color: #7a6747; font-weight: 600; font-size: 14.5px; font-family: inherit; }
.sb-toggle > button.on { background: #B0853A; color: #FBF4E4; font-weight: 700; }
.sb-chip { padding: 6px 13px; border: 1px solid #E0CFA6; border-radius: 999px; font-size: 12.5px; color: #6F5C42; background: #FBF4E4; cursor: pointer; transition: border-color .15s ease; }
.sb-chip:hover { border-color: #B0853A; }

/* ─── Ornament: gradient rules + diamond ─── */
.sb-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 300px; margin: 0 auto; }
.sb-ornament > i:first-child { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #C9A85E); }
.sb-ornament > b { width: 6px; height: 6px; background: #B0853A; transform: rotate(45deg); flex: none; }
.sb-ornament > i:last-child { height: 1px; flex: 1; background: linear-gradient(90deg, #C9A85E, transparent); }

/* ─── Status badges ─── */
.sb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sb-badge-available { background: #DCEBD8; color: #3F7A5F; }
.sb-badge-watching { background: #F3E7C7; color: #7a6747; }
.sb-badge-pending { background: #F3E7C7; color: #946C28; }
.sb-badge-paused { background: #EFE6CF; color: #9C8868; }
.sb-badge-error { background: #F3E0DC; color: #A1564E; }

/* ─── Spinner ─── */
.sb-spinner-legacy-unused { width: 14px; height: 14px; border: 2px solid rgba(251,244,228,.4); border-top-color: #FBF4E4; border-radius: 50%; display: inline-block; animation: mf-spin .7s linear infinite; }
.sb-spinner-ink-legacy-unused { width: 16px; height: 16px; border: 2px solid rgba(176,133,58,.25); border-top-color: #B0853A; border-radius: 50%; display: inline-block; animation: mf-spin .7s linear infinite; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(176,133,58,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(176,133,58,.5); }

/* ─── Mobile: the search bar stacks ─── */
@media (max-width: 760px) {
    .sb-bar { flex-direction: column; flex-wrap: nowrap; }
    /* Rows dissolve on phones: every cell stacks and the button always lands last. */
    .sb-row { display: contents; }
    .sb-row.hidden { display: none; }
    .sb-rows .sb-cta-wrap { order: 9; }
    .sb-seg, .sb-seg-park, .sb-seg-name, .sb-seg-date, .sb-seg-count, .sb-row > .sb-seg { border-right: 0; border-bottom: 1px solid #E8D9B6; min-width: 0; width: 100%; }
    .sb-bar .sb-cta-wrap { padding: 10px; }
    .sb-bar .sb-cta-wrap .sb-btn { width: 100%; padding-top: 14px; padding-bottom: 14px; min-height: 48px; }
    .sb-toggle { width: 100%; }
    .sb-toggle > button { flex: 1; }
}

/* sortable table headers (My alerts → table) */
.al-sort { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:2px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; border-bottom:2px solid transparent; padding-bottom:1px; }
.al-sort:hover, .al-sort.is-on { border-bottom-color:#F0B43C; }
.al-sort:focus-visible { outline:3px solid #1F6F78; outline-offset:3px; border-radius:2px; }
.pp-th .al-sort:focus-visible { outline-color:#F6EBD5; }   /* on the ink header a paper ring (12.3:1); teal would only reach 2.5:1 */
.al-sort-ind { font-size:9px; line-height:1; opacity:.9; }

.pp-nav { white-space:nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Content pages (hubs, sold-out trackers, guides, catalog changes) — 2026-08-27 redesign.
   One shared vocabulary: .ct-band (teal poster band: crumbs, eyebrow, H1) with the answer card
   (.gd-answer, hard shadow) sitting on its seam; .ct-dateline; .gd article typography with a
   66ch prose measure and ink-ruled H2s; .ct-stats (one card, perforated cells, bar list);
   .ct-table (ink head, aligned meters, dashed "pending" marks, row-group sub-heads, button row
   action; stacks per row ≤600px); .gd-obs empty-state note; the closing CTA is the .pp-ticket.
   Colours: ink #1E2A3A, body #4A5566, muted floor #5B6472 (nothing lighter), teal #1F6F78,
   paper #F6EBD5, rule #EFE4CC; tomato only on .pp-btn.
   ════════════════════════════════════════════════════════════════════════════ */
.ct-band { background:#1F6F78; color:#F6EBD5; padding:26px 0 64px; border-bottom:3px solid #1E2A3A; }
.ct-band a:focus-visible { outline-color:#F6EBD5; }
.gd p.tk-blurb { margin:32px 0 12px; max-width:66ch; }
.ct-band .ct-in, .gd { max-width:860px; margin:0 auto; padding-left:16px; padding-right:16px; box-sizing:content-box; }
@media (min-width:640px) { .ct-band .ct-in, .gd { padding-left:32px; padding-right:32px; } }
.ct-band h1 { font-family:'Alfa Slab One',serif; font-weight:400; color:#F6EBD5; font-size:46px; line-height:1.03; letter-spacing:-.01em; margin:6px 0 0; max-width:24ch; text-wrap:balance; }
.ct-band .hb-eyebrow, .ct-band .ct-eyebrow { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#D5ECEA; margin-top:16px; }
.ct-band .gd-crumbs { color:#F6EBD5; font-size:13px; }
.ct-band .gd-crumbs a { color:#F6EBD5; font-weight:700; text-decoration:none; }
.ct-band .gd-crumbs a:hover { text-decoration:underline; text-underline-offset:3px; }
.ct-band .gd-crumbs li + li::before { color:#D5ECEA; }
.ct-band .ct-status { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:14px; color:#D5ECEA; }
.gd-crumbs { display:flex; flex-wrap:wrap; gap:4px 6px; font-size:12.5px; color:#5B6472; list-style:none; padding:0; margin:0; }
.gd-crumbs a { color:#1F6F78; font-weight:700; text-decoration:none; }
.gd-crumbs li + li::before { content:"›"; margin-right:6px; color:#5B6472; }

.gd { color:#4A5566; font-size:16px; line-height:1.65; padding-bottom:56px; }
.gd > p, .gd > ul, .gd > ol, .gd .ct-prose, .gd section > p, .gd section > ul { max-width:66ch; }
.gd p { margin:0 0 12px; }
.gd p a:not(.pp-btn):not(.pp-btn-line), .gd li a:not(.pp-btn):not(.pp-btn-line), .gd td a:not(.pp-btn-line), .gd .acts a:not(.pp-btn):not(.pp-btn-line) { color:#1F6F78; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#D5ECEA; }
.gd p a:not(.pp-btn):not(.pp-btn-line):hover, .gd li a:not(.pp-btn):not(.pp-btn-line):hover { text-decoration-color:#1F6F78; }
.gd h2 { font-family:'Alfa Slab One',serif; font-weight:400; font-size:28px; line-height:1.15; color:#1E2A3A; margin:56px 0 10px; padding-top:22px; border-top:3px solid #1E2A3A; text-wrap:balance; }
.gd h2.is-first, .gd > h2:first-of-type, .gd > section:first-of-type > h2, .gd .ct-dateline + h2 { border-top:0; padding-top:0; margin-top:40px; }
.gd h3 { font-weight:800; font-size:17px; line-height:1.3; color:#1E2A3A; margin:18px 0 4px; }
.gd .ct-lede { font-size:15px; color:#4A5566; max-width:66ch; margin:0 0 10px; }
.gd .ct-legend { font-size:14px; color:#5B6472; max-width:66ch; margin:8px 0 0; }
.gd .muted { color:#5B6472; font-size:13.5px; }

/* answer card on the band's seam */
.gd .gd-answer { position:relative; margin:-44px 0 0; background:#FFFFFF; border:3px solid #1E2A3A; border-radius:12px; box-shadow:6px 6px 0 #1E2A3A; padding:18px 22px 14px; display:grid; grid-template-columns:1fr; gap:14px 20px; align-items:end; }
@media (min-width:700px) { .gd .gd-answer.has-act { grid-template-columns:1fr auto; } }
.gd .gd-answer p { color:#1E2A3A; font-weight:600; font-size:17px; line-height:1.5; max-width:62ch; margin:0 0 8px; }
.gd .gd-answer p:last-child { margin-bottom:0; }
.gd .gd-answer .pp-label { margin-bottom:6px; }
.gd .gd-answer .ct-act { padding-bottom:4px; }
.gd .gd-answer .ct-act .pp-btn { white-space:nowrap; }
.gd .ct-dateline, .ct-dateline { margin:24px 0 0 !important; font-size:13px; line-height:1.5; color:#5B6472; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; max-width:none !important; }
.ct-dateline .nw { white-space:nowrap; }
.ct-dateline .ct-stamp { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#1E2A3A; display:inline-flex; align-items:center; gap:7px; }
.ct-dateline .sep { color:#5B6472; }

/* stat card: one bordered object, perforated cells, then a bar list */
.ct-stats { background:#FFFFFF; border:3px solid #1E2A3A; border-radius:12px; margin:14px 0 8px; overflow:hidden; }
.ct-stats .ct-cells { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.ct-stats .ct-cell { padding:14px 18px 12px; border-left:3px dashed rgba(30,42,58,.25); }
.ct-stats .ct-cell:first-child { border-left:0; }
.ct-stats .ct-cell b { display:block; font-family:'Alfa Slab One',serif; font-weight:400; font-size:28px; line-height:1.05; color:#1E2A3A; }
.ct-stats .ct-cell:first-child b { font-size:44px; }
.ct-stats .ct-cell span { display:block; font-size:13px; line-height:1.4; color:#5B6472; margin-top:4px; max-width:26ch; }
.ct-stats .ct-bands { border-top:3px dashed rgba(30,42,58,.25); padding:12px 18px 14px; }
.ct-stats .ct-bands .pp-label { margin-bottom:8px; }
.ct-stats .ct-bar { display:grid; grid-template-columns:200px 1fr 44px; gap:10px; align-items:center; font-size:14px; color:#1E2A3A; padding:3px 0; }
.ct-stats .ct-bar .trk { height:10px; background:#EFE4CC; border-radius:2px; overflow:hidden; }
.ct-stats .ct-bar .trk i { display:block; height:100%; background:#1F6F78; }
.ct-stats .ct-bar .pct { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.ct-stats .ct-note { font-size:13px; color:#5B6472; padding:0 18px 12px; margin:0; max-width:66ch; }

/* data table */
.ct-table { background:#FFFFFF; border:3px solid #1E2A3A; border-radius:12px; overflow:hidden; margin:12px 0 8px; }
.ct-table table { width:100%; border-collapse:collapse; font-size:15px; }
.ct-table thead th { background:#1E2A3A; color:#F6EBD5; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:left; padding:10px 14px; white-space:normal; line-height:1.25; }
.ct-table.tk td.name { width:auto; min-width:130px; }
.ct-table thead th.num { text-align:right; }
.ct-table td { padding:10px 14px; vertical-align:middle; border-top:2px solid #EFE4CC; color:#4A5566; }
.ct-table tbody tr:first-child td { border-top:0; }
.ct-table tbody + tbody tr:first-child td, .ct-table tbody + tbody tr:first-child th { border-top:2px solid #EFE4CC; }
.ct-table tbody tr:hover td { background:#FDF6E7; }
.ct-table td.num { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:#1E2A3A; white-space:nowrap; }
.ct-table td.act { text-align:right; width:1%; white-space:nowrap; }
.ct-table .vn { font-weight:800; color:#1E2A3A; }
.ct-table td.name { width:34%; min-width:220px; }
.ct-table .loc { display:block; font-size:12.5px; color:#5B6472; font-weight:400; margin-top:1px; }
.ct-table .hb-meter { display:inline-block; width:56px; height:8px; background:#EFE4CC; border-radius:2px; margin-right:8px; vertical-align:1px; overflow:hidden; }
.ct-table .hb-meter i { display:block; height:100%; background:#1F6F78; }
.ct-table .hb-na { display:inline-block; width:22px; border-bottom:2px dashed #5B6472; vertical-align:middle; }
.ct-table .hb-n { font-size:12.5px; color:#5B6472; font-weight:400; margin-left:6px; }
.ct-table td.hb-pending { font-size:13.5px; color:#5B6472; font-weight:400; text-align:left; }
.ct-table tr.hb-sub th { background:#F6EBD5; color:#1E2A3A; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; text-align:left; padding:9px 14px; border-top:2px solid #EFE4CC; }
.ct-table .pp-btn-line.hb-act { min-height:34px; padding:0 12px; font-size:12.5px; }
.ct-table .tk-so { color:#1E2A3A; font-weight:800; } .ct-table .tk-open { color:#1F6F78; font-weight:800; }

/* tracker status badge (pp-badge geometry), index rows, log */
.tk-pill { display:inline-block; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:5px; border:2px solid #1E2A3A; vertical-align:middle; line-height:1.2; }
.tk-pill.on { background:#1F6F78; color:#F6EBD5; } .tk-pill.off { background:#F0B43C; color:#1E2A3A; } .tk-pill.exp { background:transparent; color:#5B6472; border:2px dashed #5B6472; } .tk-pill.unseen { background:#E5E7EB; color:#4A5566; }
.ct-band .tk-pill.on { background:#F6EBD5; color:#1E2A3A; } .ct-band .tk-pill.exp { color:#D5ECEA; border-color:#D5ECEA; } .ct-band .tk-pill.unseen { background:transparent; color:#D5ECEA; border:2px dashed #D5ECEA; }
.tk-group { margin-top:26px; }
.tk-group .pp-card-flat { overflow:hidden; }
.tk-row { position:relative; display:grid; grid-template-columns:1fr 220px 18px; gap:4px 20px; align-items:center; padding:16px 20px; border-top:2px solid #EFE4CC; }
.tk-row:first-child { border-top:0; }
.tk-row:hover { background:#FDF6E7; }
.tk-row h3 { font-family:'Alfa Slab One',serif; font-weight:400; font-size:21px; line-height:1.15; color:#1E2A3A; margin:0; }
.tk-row h3 a { color:#1E2A3A; text-decoration:none; }
.tk-row h3 a::after { content:""; position:absolute; inset:0; }
.tk-row .tk-season { font-size:13.5px; color:#5B6472; margin-top:2px; }
.tk-row .tk-state { font-size:14px; color:#1E2A3A; font-weight:700; }
.tk-row .tk-state.is-quiet { color:#5B6472; font-weight:400; }
.tk-row .tk-go { font-size:22px; color:#1E2A3A; line-height:1; }
.tk-log { list-style:none; padding:0; margin:8px 0; max-width:none !important; }
.tk-log li { display:grid; grid-template-columns:150px 1fr; gap:4px 14px; padding:8px 0; border-top:1px solid rgba(30,42,58,.16); font-size:14.5px; line-height:1.5; }
.tk-log li:first-child { border-top:0; }
.tk-log .w { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#1E2A3A; padding-top:2px; }

/* empty-state note, related card, foot, ticket CTA spacing */
.gd .gd-obs { border:2px dashed #5B6472; border-radius:10px; padding:14px 18px; margin-top:12px; max-width:none; }
.gd .gd-obs .lbl { font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#1F6F78; margin-bottom:4px; }
.gd .gd-obs p, .gd .gd-obs .coming { color:#4A5566; font-size:14.5px; margin:0; max-width:66ch; }
.ct-related { display:grid; grid-template-columns:1fr; gap:18px 24px; padding:18px 22px; margin-top:40px; }
@media (min-width:640px) { .ct-related.two { grid-template-columns:1fr 1fr; } }
.ct-related ul { list-style:none; padding:0; margin:0; }
.ct-related li { margin:0 0 8px; font-size:15px; }
.gd .gd-foot { font-size:13px; color:#5B6472; border-top:2px solid #EFE4CC; padding-top:14px; margin-top:28px; max-width:66ch; }
.gd .pp-ticket.ct-cta { margin-top:56px; }
.gd .pp-ticket.ct-cta .pp-ticket-stub p { font-size:15px; color:#4A5566; max-width:60ch; }
.gd .pp-ticket.ct-cta .fine { font-size:13px; color:#5B6472; margin:10px 0 0; }

@media (max-width:640px) {
    .ct-band { padding:18px 0 52px; }
    .ct-band h1 { font-size:30px; line-height:1.06; }
    .gd .gd-answer { margin-top:-36px; box-shadow:5px 5px 0 #1E2A3A; padding:16px 16px 12px; }
    .gd .gd-answer p { font-size:16px; }
    .gd .gd-answer .ct-act .pp-btn { width:100%; }
    .gd h2 { font-size:23px; margin-top:40px; padding-top:16px; }
    .ct-stats .ct-cells { grid-template-columns:1fr 1fr; }
    .ct-stats .ct-cell:first-child { grid-column:1 / -1; border-left:0; border-bottom:3px dashed rgba(30,42,58,.25); }
    .ct-stats .ct-cell:nth-child(2) { border-left:0; }
    .ct-stats .ct-cell:last-child:nth-child(2) { grid-column:1 / -1; }
    .ct-stats .ct-bar { grid-template-columns:120px 1fr 40px; font-size:13px; }
    .tk-row { grid-template-columns:1fr 18px; padding:14px 16px; }
    .tk-row .tk-mid { grid-column:1 / 2; }
    .tk-log li { grid-template-columns:1fr; gap:0; }
}
/* ≤900px: tables stack per row — still a <table>, thead visually hidden (not display:none) */
@media (max-width:900px) {
    .ct-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .ct-table table, .ct-table tbody { display:block; }
    .ct-table tbody tr { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 14px; border-top:2px solid #EFE4CC; }
    .ct-table tbody tr:first-child { border-top:0; }
    .ct-table tbody tr:hover td { background:transparent; }
    .ct-table td { border:0 !important; padding:0; font-size:14px; }
    .ct-table td.name { grid-column:1; grid-row:1; min-width:0; width:auto; }
    .ct-table td.act { grid-column:2; grid-row:1; width:auto; align-self:start; }
    .ct-table td.act .hb-act { min-height:36px; }
    .ct-table td[data-th] { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:6px; text-align:right; font-weight:400; color:#4A5566; }
    .ct-table td[data-th].num { font-weight:700; color:#1E2A3A; }
    .ct-table td[data-th]::before { content:attr(data-th); font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#5B6472; flex:none; text-align:left; }
    .ct-table td.hb-pending, .ct-table td.hb-pending[data-th] { grid-column:1 / -1; padding-top:4px; display:block; text-align:left; }
    .ct-table td.hb-pending[data-th]::before { display:block; margin-bottom:2px; }
    .ct-table td.is-na-cell { display:none; }
    .ct-table tr.hb-sub { display:block; padding:0; }
    .ct-table tr.hb-sub th { display:block; border-top:2px solid #EFE4CC; }
}