/* wwwroot/css/track-hearing.css — Public › Track Hearing (/track-hearing)
   Same language as the Locations page; uses the site tokens from style.css. */
.trh-page {
    --t-navy: var(--navy-900, #0f1f3a);
    --t-gold: var(--gold-500, #c9a55a);
    --t-gold-dark: var(--gold-700, #8a6a28);
    --t-metal: var(--gold-metal, linear-gradient(135deg, #f0dca6 0%, #d2b067 28%, #b08d43 52%, #e3c682 78%, #c9a55a 100%));
    --t-ivory: var(--ivory, #fbf9f4);
    --t-line: #e7e2d5;
    --t-muted: #5f6b7d;
    --t-green: #2e7a52;
    --t-display: var(--font-display, 'Cormorant Garamond', Georgia, serif);
}

.trh-header { padding-bottom: 7rem; }
.trh-stats { flex-wrap: nowrap; }
.trh-stats > div { padding-right: 1.4rem; margin-right: 1.4rem; }
.trh-stats dt { font-variant-numeric: tabular-nums; }
.trh-stats dd { white-space: nowrap; }

/* ── finder card (overlaps the header, like Locations' search) ── */
.trh-finder-section { margin-top: -5rem; padding: 0 !important; position: relative; z-index: 2; }   /* site "section" padding would cancel the overlap */
.trh-finder { background: #fff; border: 1px solid var(--t-line); border-radius: 22px; padding: 1.8rem; box-shadow: 0 30px 60px -30px rgba(15,31,58,.45), 0 2px 6px rgba(15,31,58,.06); }
.trh-finder .form-label { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-bottom: .35rem; }
.trh-finder .form-select, .trh-finder .form-control { border-radius: 12px; border: 1.5px solid var(--t-line); background-color: var(--t-ivory); font-size: 1rem; }
.trh-finder .form-select:focus, .trh-finder .form-control:focus { border-color: var(--t-gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(201,165,90,.18); }

.trh-label { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; font-family: var(--t-display); font-size: 1.45rem; font-weight: 700; color: var(--t-navy); }
.trh-label > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--t-metal); color: #0a1426; font-family: inherit; font-size: .95rem; font-weight: 800; }

.trh-locked { opacity: .45; pointer-events: none; transition: opacity .2s; }
.trh-locked.is-open { opacity: 1; pointer-events: auto; }

.trh-live { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; padding: .65rem .9rem; border-radius: 12px; background: #f4f7fb; border: 1px solid #e3e9f2; font-size: .92rem; }
.trh-live-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #e6f6ed; color: var(--t-green); }
.trh-live-tag.is-off { background: #eef0f4; color: var(--t-muted); }
.trh-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ecf7a; display: inline-block; animation: trhPulse 1.8s infinite; }
.trh-live-tag.is-off .trh-dot { background: #9aa3b2; animation: none; }
@keyframes trhPulse { 0% { box-shadow: 0 0 0 0 rgba(62,207,122,.6); } 70% { box-shadow: 0 0 0 8px rgba(62,207,122,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,122,0); } }

/* disclaimer */
.trh-notice { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.4rem; padding: .9rem 1.1rem; border-radius: 14px; background: #fffaf0; border: 1px solid rgba(201,165,90,.55); border-left: 5px solid var(--t-gold); color: #5b4512; font-size: .9rem; line-height: 1.55; }
.trh-notice > i { color: var(--t-gold-dark); font-size: 1.15rem; margin-top: .1rem; }
.trh-notice b { color: #3f2f08; }
.trh-result-note { display: flex; gap: .5rem; margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 12px; background: #fffaf0; border: 1px dashed rgba(201,165,90,.6); color: #5b4512; font-size: .84rem; line-height: 1.5; }
.trh-result-note > i { color: var(--t-gold-dark); margin-top: .1rem; }
.trh-result-note a { color: var(--t-navy); font-weight: 800; text-decoration: underline; text-decoration-color: var(--t-gold); white-space: nowrap; }

/* mode tabs */
.trh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.2rem; }
.trh-tab { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1.5px solid var(--t-line); border-radius: 14px; background: #fff; text-align: left; color: var(--t-navy); transition: all .15s; }
.trh-tab > i { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--t-ivory); color: var(--t-gold-dark); font-size: 1.1rem; }
.trh-tab b { display: block; font-size: 1rem; }
.trh-tab small { display: block; color: var(--t-muted); font-size: .8rem; }
.trh-tab:hover { border-color: var(--t-gold); }
.trh-tab.is-active { border-color: var(--t-navy); background: var(--t-navy); color: #fff; box-shadow: 0 12px 24px -16px rgba(15,31,58,.8); }
.trh-tab.is-active > i { background: var(--t-metal); color: #0a1426; }
.trh-tab.is-active small { color: rgba(255,255,255,.7); }

.trh-or { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--t-muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.trh-or::before, .trh-or::after { content: ""; flex: 1; height: 1px; background: var(--t-line); }
.trh-error { margin: 1rem 0 0; padding: .6rem .9rem; border-radius: 10px; background: #fff1f0; color: #9b1c14; font-weight: 600; font-size: .92rem; }

/* ── results ── */
.trh-results { padding: 2.5rem 0 3.5rem; }
.trh-loading { text-align: center; padding: 2.5rem; color: var(--t-muted); font-weight: 600; }
.trh-empty { text-align: center; padding: 3rem 1.5rem; background: #fff; border: 1px dashed var(--t-line); border-radius: 20px; }
.trh-empty .ep-icon { margin: 0 auto 1rem; }
.trh-empty h3 { color: var(--t-navy); }

.trh-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trh-how > div { padding: 1.4rem; background: #fff; border: 1px solid var(--t-line); border-radius: 18px; }
.trh-how .ep-icon { margin: 0 0 .8rem; }
.trh-how h3 { font-size: 1.35rem; color: var(--t-navy); margin-bottom: .3rem; }
.trh-how p { color: var(--t-muted); margin: 0; font-size: .92rem; }

.trh-disclaimer { display: flex; gap: .5rem; margin: 1.5rem 0 0; color: var(--t-muted); font-size: .84rem; line-height: 1.55; }
.trh-disclaimer i { color: var(--t-gold-dark); margin-top: .1rem; }

/* schedule */
.trh-sched { background: #fff; border: 1px solid var(--t-line); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(15,31,58,.35); }
.trh-sched-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; background: var(--navy-metal, linear-gradient(160deg, #1d3560 0%, #0f1f3a 55%, #0a1426 100%)); color: rgba(255,255,255,.8); }
.trh-sched-court { display: flex; align-items: center; gap: 1rem; }
.trh-court-badge { min-width: 64px; height: 64px; padding: 0 .6rem; display: grid; place-items: center; border-radius: 16px; background: var(--t-metal); color: #0a1426; font-family: var(--t-display); font-size: 1.9rem; font-weight: 700; }
.trh-sched-court h2 { margin: 0; color: #fff; font-size: 1.7rem; }
.trh-sched-court p { margin: .1rem 0 0; font-size: .9rem; }
.trh-daynav { display: flex; align-items: center; gap: .4rem; }
.trh-daynav button { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; height: 40px; padding: 0 .8rem; font-weight: 700; font-size: .85rem; }
.trh-daynav button:disabled { opacity: .35; }
.trh-daynav .trh-day-pill { padding: .5rem .9rem; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; white-space: nowrap; }

.trh-sched-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--t-line); }
.trh-sched-stats > div { padding: 1rem 1.4rem; border-right: 1px solid var(--t-line); }
.trh-sched-stats > div:last-child { border-right: 0; }
.trh-sched-stats span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.trh-sched-stats b { font-family: var(--t-display); font-size: 1.7rem; color: var(--t-navy); }

.trh-now { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 1.6rem 0; padding: .9rem 1.1rem; border-radius: 14px; background: linear-gradient(90deg, #e6f6ed, #f3fbf6); border: 1px solid rgba(46,122,82,.3); color: #1f5a3b; font-weight: 700; }

.trh-daybar { margin: 1.3rem 1.6rem .2rem; }
.trh-daybar-track { position: relative; height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, #f3f1ea 0, #f3f1ea calc(100% / var(--hours) - 1px), #e7e2d5 calc(100% / var(--hours) - 1px), #e7e2d5 calc(100% / var(--hours))); }
.trh-daybar-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: var(--t-navy); min-width: 3px; }
.trh-daybar-seg.is-now { background: var(--t-green); }
.trh-daybar-seg:hover { background: var(--t-gold); }
.trh-daybar-hours { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .72rem; color: var(--t-muted); font-variant-numeric: tabular-nums; }

.trh-list { padding: .6rem 1.6rem 1.4rem; }
.trh-item { display: grid; grid-template-columns: 150px 1fr auto; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid #f0ede4; }
.trh-item:last-child { border-bottom: 0; }
.trh-item.is-now { background: linear-gradient(90deg, rgba(46,122,82,.06), transparent); margin: 0 -1.6rem; padding: 1rem 1.6rem; }
.trh-time b { display: block; font-size: 1.05rem; color: var(--t-navy); font-variant-numeric: tabular-nums; }
.trh-time span { font-size: .84rem; color: var(--t-muted); }
.trh-mins { display: inline-block; margin-top: .3rem; padding: .15rem .6rem; border-radius: 999px; background: #fbf3df; color: var(--t-gold-dark); font-size: .78rem; font-weight: 800; }
.trh-mins.is-now { background: #e6f6ed; color: var(--t-green); }
.trh-case b { color: var(--t-navy); font-size: 1.02rem; }
.trh-case .trh-title { font-weight: 600; margin-top: .1rem; }
.trh-sub { font-size: .82rem; color: var(--t-muted); }
.trh-serial { text-align: right; }
.trh-serial b { display: inline-grid; place-items: center; min-width: 46px; height: 32px; padding: 0 .5rem; border-radius: 9px; background: var(--t-ivory); border: 1px solid var(--t-line); color: var(--t-navy); font-weight: 800; }
.trh-serial div { margin-top: .3rem; font-size: .78rem; color: var(--t-muted); max-width: 170px; }

.trh-gap { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; color: #8b95a7; font-size: .84rem; font-style: italic; }
.trh-gap::before, .trh-gap::after { content: ""; flex: 1; border-top: 1px dashed #d9d4c7; }

/* case results */
.trh-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.trh-summary > div { padding: 1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--t-line); }
.trh-summary span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.trh-summary b { font-family: var(--t-display); font-size: 1.9rem; color: var(--t-navy); }

.trh-casecard { background: #fff; border: 1px solid var(--t-line); border-radius: 20px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 16px 40px -30px rgba(15,31,58,.35); }
.trh-casecard-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.3rem 1.5rem; border-bottom: 1px dashed var(--t-line); }
.trh-caseno { font-family: var(--t-display); font-size: 1.7rem; font-weight: 700; color: var(--t-navy); line-height: 1.1; }
.trh-casecard-stats { display: flex; gap: .5rem; align-self: flex-start; }
.trh-casecard-stats > div { min-width: 84px; padding: .5rem .7rem; border-radius: 12px; background: var(--t-ivory); text-align: center; }
.trh-casecard-stats span { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.trh-casecard-stats b { font-size: 1.15rem; color: var(--t-navy); }
.trh-days { padding: .4rem 1.5rem 1.2rem; }
.trh-day { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #f0ede4; }
.trh-day:last-child { border-bottom: 0; }
.trh-day-date b { display: block; color: var(--t-navy); }
.trh-day-date span { font-size: .8rem; color: var(--t-muted); }
.trh-slot { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .35rem 0; }
.trh-courtchip { display: inline-grid; place-items: center; min-width: 38px; height: 30px; padding: 0 .5rem; border-radius: 8px; background: var(--t-navy); color: #e6cf94; font-weight: 800; font-size: .85rem; border: 0; }
button.trh-courtchip:hover { background: var(--t-gold); color: #0a1426; }
.trh-slot .trh-t { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
    .trh-stats { flex-wrap: wrap; row-gap: 1rem; }
    .trh-how, .trh-summary { grid-template-columns: 1fr; }
    .trh-sched-stats { grid-template-columns: repeat(2, 1fr); }
    .trh-sched-stats > div:nth-child(2) { border-right: 0; }
    .trh-sched-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--t-line); }
}
@media (max-width: 767.98px) {
    .trh-finder { padding: 1.2rem; }
    .trh-tabs { grid-template-columns: 1fr; }
    .trh-item { grid-template-columns: 1fr; gap: .4rem; }
    .trh-serial { text-align: left; }
    .trh-day { grid-template-columns: 1fr; gap: .3rem; }
    .trh-casecard-stats { width: 100%; }
    .trh-casecard-stats > div { flex: 1; }
}