:root {
  --navy: #001F48;
  --navy-2: #0a2c5c;
  --cyan: #0D9ED9;
  --cyan-2: #1FAAE1;
  --blue: #01559e;
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #0f1c2e;
  --ink-2: #4a5a70;
  --ink-3: #8593a6;
  --line: #e3e9f1;
  --danger: #ce0058;
  --danger-bg: #fde8f1;
  --amber: #b7791f;
  --amber-bg: #fdf3e1;
  --ok: #0f9d6b;
  --ok-bg: #e4f7ef;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 31, 72, .06), 0 6px 20px rgba(0, 31, 72, .06);
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dot { color: var(--ink-3); margin: 0 .35em; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 31, 72, .25);
}
.brand { min-width: 0; }
.brand-title { font-weight: 800; font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 12px; color: #9fc7e8; letter-spacing: .02em; }
.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.top-btn {
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff;
  font-weight: 600; font-size: 14px; transition: background .15s;
}
.top-btn:hover, .top-btn:focus-visible { background: rgba(255,255,255,.18); }
.top-btn.is-active { background: var(--cyan); border-color: var(--cyan); }
.lane-badge {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 6px;
  border: 0; border-radius: 12px; background: var(--cyan); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.lane-badge-label { font-size: 12px; font-weight: 600; opacity: .9; }
.lane-badge-num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: #fff; color: var(--navy); font-weight: 800; font-size: 17px; font-family: var(--mono);
}

/* ---------- Layout ---------- */
main { max-width: 560px; margin: 0 auto; padding: 14px 14px calc(28px + var(--safe-b)); }
.view { animation: fade .22s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.loading { text-align: center; padding: 60px 0; color: var(--ink-2); }
.view-title { font-size: 24px; font-weight: 800; margin: 12px 0 4px; color: var(--navy); }
.view-hint { margin: 0 0 18px; color: var(--ink-2); }
.source-note { margin-top: 22px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.source-note a { color: var(--blue); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Lane grid ---------- */
.lane-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lane-btn {
  position: relative; aspect-ratio: 1 / 1.05; border: 2px solid transparent; border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .12s, border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.lane-btn::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 12px, #fff 12px 18px, var(--danger) 18px 30px, #fff 30px 36px);
  opacity: .55;
}
.lane-btn:active { transform: scale(.97); }
.lane-btn:hover { border-color: var(--cyan-2); }
.lane-btn.is-current { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(13,158,217,.18), var(--shadow); }
.lane-num { font-size: 46px; font-weight: 800; color: var(--navy); font-family: var(--mono); line-height: 1; }
.lane-count { font-size: 13px; color: var(--ink-2); }
.lane-done { font-size: 12px; color: var(--ok); font-weight: 700; }

/* ---------- Queue bar ---------- */
.queue-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.queue-meta { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.queue-meta b { color: var(--navy); }
.jump select {
  min-height: 40px; max-width: 210px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--navy); font-weight: 600;
}
.progress { height: 4px; background: #e2e9f2; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); transition: width .3s; }

/* ---------- Heat card ---------- */
.heat-card { padding: 16px 16px 14px; margin-bottom: 12px; border-top: 4px solid var(--blue); }
.heat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.event-label { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.event-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: #eaf4fb; color: var(--blue); font-size: 13px; font-weight: 700;
}
.chip-heat { background: var(--blue); color: #fff; }
.chip-muted { background: #eef1f5; color: var(--ink-2); font-weight: 600; }
.saved-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok); font-weight: 700; font-size: 13px; white-space: nowrap;
  animation: pop .25s ease-out;
}
.saved-badge svg { width: 16px; height: 16px; stroke-width: 3; }
.saved-badge.is-dirty { background: var(--amber-bg); color: var(--amber); }
.saved-badge.is-dsq { background: var(--danger-bg); color: var(--danger); }
.saved-badge.is-dns { background: #eef1f5; color: var(--ink-2); }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
.swimmer {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.swimmer-lane {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 22px; font-family: var(--mono);
}
.swimmer-info { flex: 1; min-width: 0; }
.swimmer-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.swimmer-meta { color: var(--ink-2); font-size: 15px; margin-top: 2px; }
.seed { font-family: var(--mono); font-size: 15px; color: var(--blue); font-weight: 700; direction: ltr; flex: none; }

/* ---------- Entry ---------- */
.entry-card { padding: 16px; margin-bottom: 12px; transition: opacity .2s; }
.time-wrap { margin-bottom: 14px; }
.time-display {
  display: flex; justify-content: center; align-items: baseline; gap: 2px;
  padding: 14px 8px 10px; border-radius: 14px; background: #f3f7fc; border: 2px solid transparent;
  font-family: var(--mono); font-size: clamp(36px, 11vw, 52px); font-weight: 700; color: var(--navy);
  transition: border-color .15s, background .15s;
}
.time-display.is-focused { border-color: var(--cyan); background: #fff; }
.time-display.is-invalid { border-color: var(--danger); }
.time-display.is-disabled { color: #b8c3d1; background: #f1f3f6; }
.seg {
  display: inline-flex; border: 0; background: none; padding: 2px 3px; border-radius: 8px; line-height: 1.1;
  font: inherit; color: inherit; min-height: 44px; align-items: center;
}
.seg:hover:not(:disabled) { background: #e7f3fb; }
.seg:disabled { cursor: default; }
.sep { color: var(--ink-3); padding: 0 1px; }
.digit { position: relative; display: inline-block; width: .62em; text-align: center; }
.digit.is-empty { color: #c2ccd8; }
.time-display.is-disabled .digit { color: inherit; }
.digit.is-cursor::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 4px; border-radius: 2px;
  background: var(--cyan); animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.time-legend {
  display: grid; grid-template-columns: 2fr 2fr 2fr 1.2fr; gap: 4px; text-align: center;
  font-size: 11px; color: var(--ink-3); margin-top: 6px; padding: 0 10%;
}
.status-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.field-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.field-label em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.status-select, .reason-field input {
  min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 16px;
}
.status-select { font-weight: 700; color: var(--navy); }
.status-select:focus, .reason-field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(13,158,217,.15); }
.status-select.is-DSQ { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.status-select.is-DNS { border-color: #c9a35f; color: var(--amber); background: var(--amber-bg); }
.reason-field { flex: 2 1 220px; animation: fade .2s ease-out; }
.reason-field input { border-color: #f2b9d0; }
.status-note {
  margin: -2px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.status-note.is-DSQ { background: var(--danger-bg); color: var(--danger); }
.status-note.is-DNS { background: var(--amber-bg); color: var(--amber); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button {
  min-height: 58px; border-radius: 14px; border: 0; background: #eef3f9; color: var(--navy);
  font-size: 26px; font-weight: 700; font-family: var(--mono);
  display: grid; place-items: center; transition: background .1s, transform .08s;
  touch-action: manipulation; user-select: none;
}
.keypad button:active:not(:disabled) { background: #d4e8f6; transform: scale(.97); }
.keypad button.k-aux { font-family: inherit; font-size: 16px; color: var(--ink-2); background: #f4f6f9; }
.keypad button svg { width: 26px; height: 26px; }
.keypad button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Actions ---------- */
.actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; }
.actions-sheet { grid-template-columns: 1fr; margin-top: 12px; }
.btn {
  min-height: 54px; border-radius: 14px; border: 0; font-weight: 800; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: filter .15s, transform .08s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--cyan); color: #fff; box-shadow: 0 4px 14px rgba(13,158,217,.35); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary.is-saved { background: var(--ok); box-shadow: 0 4px 14px rgba(15,157,107,.3); }
.btn-ghost { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.sub-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); min-height: 44px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui { width: 40px; height: 24px; border-radius: 12px; background: #cfd8e3; position: relative; transition: background .15s; flex: none; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-ui { background: var(--cyan); }
.toggle input:checked + .toggle-ui::after { transform: translateX(-16px); }
.toggle input:focus-visible + .toggle-ui { outline: 2px solid var(--cyan); outline-offset: 2px; }
.link-btn { border: 0; background: none; color: var(--danger); font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 4px; }

/* ---------- Heat sheet ---------- */
.sheet-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sheet-title { flex: 1; text-align: center; }
.sheet-title .event-sub { justify-content: center; }
.icon-btn {
  width: 48px; height: 48px; flex: none; border-radius: 14px; border: 0; background: #fff; color: var(--navy);
  box-shadow: var(--shadow); display: grid; place-items: center;
}
.icon-btn:disabled { opacity: .35; }
.sheet-card { overflow: hidden; }
.sheet { width: 100%; border-collapse: collapse; font-size: 15px; }
.sheet th { background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 8px; text-align: right; }
.sheet td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet td.c-lane { width: 52px; text-align: center; }
.sheet .lane-pill {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: #eef3f9; color: var(--navy); font-weight: 800; font-family: var(--mono);
}
.sheet td.c-name { font-weight: 700; }
.sheet td.c-times { min-width: 88px; max-width: 120px; }
.sheet td.c-year { color: var(--ink-2); }
.sheet td.c-club { color: var(--ink-2); font-size: 14px; }
.sheet td.c-empty { color: var(--ink-3); font-style: italic; }
.sheet tr.is-mine td { background: #e6f5fc; }
.sheet tr.is-mine .lane-pill { background: var(--cyan); color: #fff; }
.sheet .time-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sheet .t-seed {
  font-family: var(--mono); color: var(--ink-3); direction: ltr; font-size: 12px; font-weight: 600;
}
.sheet .t-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 13px; font-weight: 800; direction: ltr; line-height: 1.2;
  max-width: 100%;
}
.sheet .t-pill .t-cap {
  font-family: var(--sans, 'Assistant', system-ui, sans-serif); font-size: 10px; font-weight: 800;
  letter-spacing: .02em; direction: rtl;
}
.sheet .t-official { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.sheet .t-official.is-dq, .sheet .t-official.is-dns, .sheet .t-official.is-dnf {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
}
.sheet .t-official.is-dns { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.sheet .t-judge {
  background: #e0f2fe; color: #075985; border: 1px dashed #7dd3fc;
}
.sheet .t-judge.is-saved { background: #f1f5f9; color: #334155; border-style: solid; border-color: #cbd5e1; }
.sheet .t-judge.is-dq { color: var(--danger); }
.sheet .t-judge.is-dns { color: var(--amber); }
.sheet .t-place {
  font-family: var(--sans, 'Assistant', system-ui, sans-serif); font-size: 11px; font-weight: 800;
  color: #166534; direction: rtl;
}
@media (max-width: 420px) {
  .col-club, .sheet td.c-club, .results-table .col-club { display: none; }
  .sheet td.c-name .club-inline { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; }
  .top-btn { padding: 0 8px; font-size: 12.5px; }
  .lane-badge-label { display: none; }
  .brand-title { font-size: 15px; }
  .sheet td.c-times { min-width: 78px; }
  .results-table .c-src { display: none; }
}
@media (min-width: 421px) { .club-inline { display: none; } }

/* ---------- Results page ---------- */
.results-head { margin-bottom: 8px; }
.results-title { margin-bottom: 2px; }
.results-pick {
  display: block; margin: 10px 0 12px;
}
.results-pick select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001F48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat left 14px center / 18px;
  font: inherit; font-weight: 700; font-size: 16px; color: var(--navy);
  box-shadow: 0 1px 0 rgba(0,31,72,.04);
}
.age-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.age-chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.age-chip.is-active {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.results-banner {
  margin-bottom: 10px; padding: 10px 14px; border-radius: 12px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
  font-weight: 700; font-size: 14px;
}
.results-card { overflow: hidden; padding: 0; }
.results-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.results-table th {
  background: var(--blue); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 8px; text-align: right;
}
.results-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.results-table tr:last-child td { border-bottom: 0; }
.results-table .c-place {
  width: 44px; text-align: center; font-family: var(--mono); font-weight: 800; color: var(--navy);
}
.results-table .c-time {
  font-family: var(--mono); direction: ltr; text-align: right; font-weight: 800; white-space: nowrap;
}
.results-table .c-year { color: var(--ink-2); width: 52px; }
.results-table .c-src { width: 72px; }
.results-table .name-cell { font-weight: 700; }
.results-table .name-cell .club-inline { display: none; }
.results-table .src-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
}
.results-table .src-official { background: #dcfce7; color: #166534; }
.results-table .src-submitted { background: #e0f2fe; color: #075985; }
.results-table tr.is-dq .c-time, .results-table tr.is-dns .c-time { font-family: inherit; direction: rtl; }
.results-table tr.is-dq { color: var(--danger); }
.results-table tr.is-dns { color: var(--amber); }
.results-empty {
  padding: 28px 16px; text-align: center; color: var(--ink-3); font-weight: 600;
}

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; inset: auto 0 calc(18px + var(--safe-b)) 0; display: flex; justify-content: center; pointer-events: none; z-index: 50; }
.toast {
  padding: 12px 18px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0,31,72,.3); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; max-width: 90vw;
}
.toast.is-show { opacity: 1; transform: none; }
.toast.is-error { background: var(--danger); }
.toast.is-ok { background: var(--ok); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* sticky bottom action bar on judge view (keeps שמור / הבא in thumb reach) */
#view-judge .actions {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 -14px; padding: 10px 14px calc(10px + var(--safe-b));
  background: linear-gradient(180deg, rgba(244,247,251,0), var(--bg) 22%);
  pointer-events: none;
}
#view-judge .sub-actions { margin-top: 4px; }
.toast-wrap { bottom: calc(92px + var(--safe-b)); }
@media (max-height: 760px) {
  .keypad button { min-height: 50px; }
  .time-display { padding: 10px 8px 6px; }
  .heat-card { padding: 12px 14px; }
  .swimmer { margin-top: 10px; padding-top: 10px; }
}
.seg { flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px 4px; }
.seg-digits { display: inline-flex; }
.seg-cap { font-family: "Assistant", sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1; }
.time-display { align-items: flex-start; }
.sep { line-height: 1.1; padding-top: 2px; }

/* ---------- v2: manual mode + submit ---------- */
.queue-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--blue); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.pill-btn svg { width: 16px; height: 16px; }
.pill-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.jump select { max-width: 170px; }
.manual-card { padding: 16px; margin-bottom: 12px; border-top: 4px solid var(--cyan); animation: fade .2s ease-out; }
.manual-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.manual-grid .field-wide { grid-column: 1 / -1; }
.manual-grid input, .manual-grid select {
  min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; width: 100%; min-width: 0;
}
.manual-grid input:focus, .manual-grid select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(13,158,217,.15); }
.manual-grid input.is-invalid { border-color: var(--danger); background: var(--danger-bg); }
.manual-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.manual-list:empty { display: none; }
.manual-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: #f3f7fc; }
.manual-list li b { font-weight: 700; }
.manual-list li span { color: var(--ink-2); white-space: nowrap; font-family: var(--mono); direction: ltr; }
.saved-badge.is-sent { background: #e3f1fb; color: var(--blue); }
.actions-judge { grid-template-columns: 72px 1fr 1.5fr 72px; gap: 8px; }
.btn-nav { flex-direction: column; gap: 0; font-size: 12px; font-weight: 700; padding: 0; }
.btn-nav svg { width: 22px; height: 22px; }
.btn-secondary { background: #fff; color: var(--blue); border: 2px solid #cfe3f3; font-size: 16px; }
.btn-secondary.is-saved { border-color: var(--ok); color: var(--ok); }
.btn-primary { gap: 8px; }
.btn-primary.is-sent { background: var(--blue); box-shadow: 0 4px 14px rgba(1,85,158,.3); }
.banner {
  position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); inset-inline: 0; margin: 0 auto; width: max-content; max-width: 92vw;
  display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; z-index: 40;
  background: var(--ok); color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(15,157,107,.35);
  animation: drop .3s ease-out;
}
.banner svg { width: 22px; height: 22px; stroke-width: 3; }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.queue-meta { white-space: normal; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; }
.queue-meta .dot { display: none; }
.queue-tools { flex: none; }
main { overflow-x: clip; }

/* ---------- v2: live timer (default) ↔ keypad ---------- */
.entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.entry-mode-label { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.mode-btn { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: #f3f7fc; }
.mode-opt { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 9px; color: var(--ink-3); transition: background .15s, color .15s; }
.mode-opt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-btn[data-mode="timer"] .mode-opt[data-opt="timer"], .mode-btn[data-mode="keypad"] .mode-opt[data-opt="keypad"] { background: var(--navy); color: #fff; }
.timer-panel[hidden], .keypad[hidden], .time-wrap[hidden] { display: none !important; }
.timer-display {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 800; text-align: center;
  font-size: clamp(44px, 14vw, 64px); letter-spacing: 1px; line-height: 1.1; padding: 14px 6px; border-radius: 14px;
  background: #f3f7fc; color: var(--navy); border: 2px solid var(--line);
}
.timer-display.is-running { border-color: var(--cyan); color: var(--blue); background: #eaf6fc; }
.timer-display.is-disabled { color: var(--ink-3); opacity: .55; }
.timer-display.is-invalid { border-color: var(--danger); background: var(--danger-bg); }
.timer-controls { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 12px; }
.btn-timer { min-height: 72px; font-size: 22px; font-weight: 800; color: #fff; background: var(--ok); border: 0; border-radius: 16px; gap: 10px; box-shadow: 0 4px 14px rgba(15,157,107,.3); }
.btn-timer svg { width: 26px; height: 26px; fill: currentColor; }
.btn-timer .ic-stop { display: none; }
.btn-timer[data-state="running"] { background: var(--danger); box-shadow: 0 4px 14px rgba(206,0,88,.3); }
.btn-timer[data-state="running"] .ic-stop { display: inline; }
.btn-timer[data-state="running"] .ic-play { display: none; }
.btn-timer:disabled, .btn-timer-reset:disabled { opacity: .45; box-shadow: none; }
.btn-timer-reset { min-height: 72px; font-size: 18px; font-weight: 700; }
.banner { pointer-events: none; }  /* never block taps on the queue bar under it */

/* v3: reliable single tap, no double-tap zoom */
html, body { touch-action: manipulation; }
body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; }
button, .btn, .icon-btn, .top-btn, .pill-btn, .lane-btn, .lane-badge, .mode-btn, .link-btn, .toggle, a, label {
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
#view-judge .actions > * { pointer-events: auto; }
#btnPrev, #btnNext { min-height: 56px; }

/* v3: hundredths — 11-char time (00:00:32.25) must fit, never clip */
.time-display { font-size: clamp(26px, 8.6vw, 48px); gap: 0; padding-left: 4px; padding-right: 4px; overflow: hidden; }
.seg { padding: 2px 2px 4px; }
.digit { width: .6em; }
.timer-display { font-size: clamp(30px, 10.5vw, 56px); letter-spacing: 0; white-space: nowrap; overflow: hidden; padding: 14px 4px; }

/* ===================== v4 ===================== */
/* ---------- day tabs ---------- */
.day-tabs {
  display: flex; gap: 8px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px; scroll-snap-type: x proximity;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex: 1 0 auto; min-width: 92px; min-height: 52px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 10px;
  border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); line-height: 1.15;
  transition: background .15s, border-color .15s, color .15s;
}
.day-tab-main { font-weight: 800; font-size: 15px; }
.day-tab-sub { font-size: 12px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.day-tab-note { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.day-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(0,31,72,.2); }
.day-tab.is-active .day-tab-sub, .day-tab.is-active .day-tab-note { color: #9fd8f3; }
.day-tab.is-empty { opacity: .55; border-style: dashed; cursor: not-allowed; }
.day-tab-all { flex: 0 0 auto; min-width: 72px; }
#view-lane .day-tabs { margin-bottom: 16px; }

/* ---------- jump button ---------- */
.jump-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 210px; padding: 0 10px 0 8px;
  border-radius: 12px; border: 1.5px solid #cfe3f3; background: #fff; color: var(--navy); font-weight: 700; font-size: 14px;
}
.jump-btn svg { width: 18px; height: 18px; color: var(--cyan); }
.jump-btn .caret { width: 16px; height: 16px; color: var(--ink-3); }
.jump-btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-btn:active { background: #eaf6fc; }

/* ---------- jump sheet ---------- */
.jsheet-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 20, 48, .45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.jsheet {
  width: 100%; max-width: 560px; max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
  background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,31,72,.3);
  display: flex; flex-direction: column; padding: 6px 14px calc(12px + var(--safe-b)); animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.jsheet-grip { width: 44px; height: 5px; border-radius: 3px; background: #cdd7e3; margin: 4px auto 6px; }
.jsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jsheet-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy); }
.jsheet-close { width: 44px; height: 44px; }
.jsearch {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 0 12px;
  min-height: 52px; border-radius: 14px; background: #fff; border: 2px solid var(--line);
}
.jsearch:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(13,158,217,.15); }
.jsearch > svg { color: var(--cyan); }
.jsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 17px; min-height: 48px; -webkit-appearance: none; appearance: none; }
.jsearch input::-webkit-search-cancel-button { display: none; }
.jsearch-clear { border: 0; background: #eef1f5; color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.jsearch-clear svg { width: 16px; height: 16px; }
.jlist { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 8px; padding-bottom: 6px; }
.jsec {
  position: sticky; top: 0; z-index: 1; padding: 8px 4px 4px; font-size: 13px; font-weight: 800; color: var(--blue);
  background: var(--bg); letter-spacing: .02em;
}
.jrow {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main badge" "sub badge"; align-items: center; column-gap: 10px;
  width: 100%; min-height: 64px; padding: 10px 14px; text-align: start; border-radius: 14px;
  border: 1.5px solid transparent; background: #fff; box-shadow: var(--shadow); color: var(--ink);
}
.jrow:active { transform: scale(.99); background: #f3f9fd; }
.jrow-main { grid-area: main; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.jrow-stroke { font-size: 18px; font-weight: 800; color: var(--navy); }
.jrow-cat { font-size: 15px; font-weight: 700; color: var(--blue); }
.jrow-sub { grid-area: sub; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.jrow-badge {
  grid-area: badge; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: #eef3f9; color: var(--ink-2); font-size: 13px; font-weight: 800; font-family: var(--mono);
}
.jrow.is-done .jrow-badge { background: var(--ok-bg); color: var(--ok); }
.jrow.is-current { border-color: var(--cyan); background: #eaf6fc; }
.jrow.is-current .jrow-badge { background: var(--cyan); color: #fff; font-family: inherit; }
.jempty { text-align: center; color: var(--ink-3); padding: 24px 0; font-weight: 600; }

/* ---------- heat card v4: name-first hierarchy ---------- */
.heat-card { padding: 14px 14px 12px; border-top: 0; position: relative; overflow: hidden; }
.heat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.hc-swimmer { display: flex; align-items: center; gap: 12px; }
.hc-lane {
  flex: none; width: 60px; height: 64px; border-radius: 14px; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(13,158,217,.8);
}
.hc-lane-cap { font-size: 11px; font-weight: 700; color: #9fd8f3; margin-bottom: 3px; }
.hc-lane-num { font-size: 32px; font-weight: 800; font-family: var(--mono); }
.hc-who { flex: 1; min-width: 0; }
.heat-card .swimmer-name {
  font-size: clamp(24px, 7.4vw, 30px); font-weight: 800; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere;
}
.hc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; }
.hc-club { font-size: 17px; font-weight: 700; color: var(--blue); }
.hc-year { font-size: 16px; color: var(--ink-2); white-space: nowrap; }
.hc-year b { font-family: var(--mono); color: var(--ink); font-size: 17px; }
.hc-cap { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.hc-team { margin-top: 4px; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.hc-event {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px;
  border-radius: 12px; background: #eaf4fb;
}
.hc-event-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.hc-stroke { font-size: 20px; font-weight: 800; color: var(--navy); }
.hc-cat { font-size: 17px; font-weight: 700; color: var(--blue); }
.hc-facts { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; margin: 10px 0 0; }
.hc-fact { margin: 0; padding: 8px 10px; border-radius: 12px; background: #f4f7fb; border: 1px solid var(--line); min-width: 0; }
.hc-fact dt { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.hc-fact dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: var(--navy); font-family: var(--mono); text-align: right; white-space: nowrap; }
.hc-fact-heat { background: var(--blue); border-color: var(--blue); }
.hc-fact-heat dt { color: #bfe2f7; }
.hc-fact-heat dd { color: #fff; }
.hc-fact .seed { font-size: 17px; color: var(--ink-2); font-weight: 700; }
.hc-fact .seed:not(.is-nt) { color: var(--blue); }
.hc-foot { margin-top: 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.hc-foot [hidden] + .dot { display: none; }
.heat-card .saved-badge { flex: none; }
@media (max-width: 360px) {
  .hc-facts { grid-template-columns: 1fr 1fr; }
  .hc-facts .hc-fact:last-child { grid-column: 1 / -1; }
  .hc-lane { width: 52px; height: 58px; }
}
@media (max-height: 760px) {
  .heat-card { padding: 12px 12px 10px; }
  .hc-event { margin-top: 10px; padding: 8px 10px; }
  .hc-fact { padding: 6px 10px; }
}

/* ---------- entry head tools + focus button ---------- */
.entry-head-tools { display: inline-flex; align-items: center; gap: 8px; }
.focus-btn {
  width: 44px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #f3f7fc; color: var(--navy);
  display: grid; place-items: center;
}
.focus-btn svg { width: 22px; height: 22px; }
.focus-btn .ic-compress { display: none; }
.focus-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.focus-btn[aria-pressed="true"] .ic-compress { display: block; }
.focus-btn[aria-pressed="true"] .ic-expand { display: none; }
.focus-strip { display: none; }

/* ---------- scroll lock ---------- */
html.is-locked, body.is-locked { overflow: hidden; overscroll-behavior: none; }
body.is-locked { position: fixed; inset-inline: 0; width: 100%; }

/* ---------- focus (fullscreen) mode ---------- */
body.is-focus .topbar,
body.is-focus #dayTabs,
body.is-focus .queue-bar,
body.is-focus #heatCard,
body.is-focus #manualCard,
body.is-focus .sub-actions { display: none !important; }
body.is-focus { background: var(--bg); }
body.is-focus main { max-width: none; padding: 0; overflow: hidden; }
body.is-focus #view-judge {
  position: fixed; inset: 0; z-index: 30; animation: none;
  display: flex; flex-direction: column; gap: 8px; height: 100dvh;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  max-width: 600px; margin: 0 auto; overflow: hidden; touch-action: manipulation;
}
body.is-focus .progress { flex: none; margin: 0; }
body.is-focus .entry-card { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; padding: 12px; }
body.is-focus .focus-strip {
  display: flex; align-items: center; gap: 10px; flex: none; margin: -2px 0 10px; padding: 0 0 10px; border-bottom: 1px dashed var(--line);
}
.fs-lane {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: 20px;
}
.fs-text { min-width: 0; flex: 1; }
.fs-name { font-size: 20px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-sub { font-size: 13px; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-focus .entry-head { flex: none; }
body.is-focus .status-row, body.is-focus .status-note, body.is-focus .time-wrap { flex: none; }
body.is-focus .status-row { margin-bottom: 8px; }
body.is-focus .timer-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
body.is-focus .timer-display { flex: 1 1 auto; display: grid; place-items: center; font-size: clamp(40px, 13vw, 76px); min-height: 90px; }
body.is-focus .timer-controls { flex: 1 1 auto; margin-top: 0; max-height: 220px; }
body.is-focus .btn-timer, body.is-focus .btn-timer-reset { min-height: 0; height: 100%; font-size: 26px; }
body.is-focus .keypad { flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr; }
body.is-focus .keypad button { min-height: 0; font-size: 30px; }
body.is-focus #view-judge .actions {
  position: static; flex: none; margin: 0 -12px; padding: 8px 12px calc(10px + var(--safe-b));
  background: var(--bg);
}
body.is-focus .toast-wrap { bottom: calc(86px + var(--safe-b)); }
body.is-focus .banner { top: calc(12px + env(safe-area-inset-top, 0px)); }
@media (max-height: 640px) {
  body.is-focus .focus-strip { margin-bottom: 6px; padding-bottom: 6px; }
  body.is-focus .fs-name { font-size: 17px; }
  body.is-focus .status-row .field-label { display: none; }
}

/* Meet operations share the deck client's light theme and touch targets. */
.topbar { flex-wrap: wrap; }
.global-nav, .top-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.global-nav .top-btn { display: inline-flex; align-items: center; text-decoration: none; }
.top-actions { width: 100%; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: 13px; overflow-wrap: anywhere; }
.breadcrumbs a, .resource-link, .sheet a, .results-table a, .entry-facts a { color: var(--blue); text-underline-offset: 3px; }
.breadcrumbs span::before { content: "/"; margin-inline-end: 6px; color: var(--ink-3); }
.portal-card { padding: 18px; margin: 12px 0; min-width: 0; }
.portal-card h2 { margin: 0 0 12px; font-size: 20px; color: var(--navy); }
.portal-card p { margin: 8px 0; line-height: 1.5; overflow-wrap: anywhere; }
.portal-form { display: grid; gap: 12px; }
.portal-form input, .portal-form select, .portal-form textarea, .note-details input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
.portal-form textarea { min-height: 130px; font-family: var(--mono); font-size: 13px; }
.portal-form .field { flex: auto; }
.portal-form .check-field { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.portal-form .check-field input { width: 20px; min-height: 20px; margin-top: 3px; flex: none; }
.portal-form .btn { padding: 10px 16px; }
.form-error { color: var(--danger); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
form[data-delete-meet] button[type="submit"], #resetTestDataForm button[type="submit"] {
  background: var(--danger); box-shadow: none;
}
.notice { background: #eaf4fb; padding: 12px; border-radius: 12px; color: var(--navy); line-height: 1.5; overflow-wrap: anywhere; }
.notice.warning { background: var(--amber-bg); color: #825416; }
.resource-list { display: grid; gap: 10px; padding: 0; list-style: none; margin: 12px 0; }
.resource-link { display: block; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; line-height: 1.4; }
.resource-link:hover { border-color: var(--cyan); }
.resource-link small { display: block; color: var(--ink-2); margin-top: 5px; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.resource-actions .btn { padding: 8px 14px; font-size: 15px; }
.metadata { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; line-height: 1.5; }
.metadata dt { color: var(--ink-2); }
.metadata dd { margin: 0; overflow-wrap: anywhere; }
.qr-panel { text-align: center; }
.qr-panel img { width: min(100%, 320px); height: auto; display: block; margin: 10px auto; }
.qr-panel a { display: block; direction: ltr; overflow-wrap: anywhere; color: var(--blue); }
.qr-panel .notice { text-align: start; }
.lane-management { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lane-management .btn { width: 100%; font-size: 15px; padding: 8px; }
.lane-management .lane-manage-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lane-management p { font-size: 13px; min-height: 20px; color: var(--ink-2); }
.entry-facts { margin-bottom: 12px; display: grid; gap: 8px; font-size: 14px; }
.entry-facts:empty { display: none; }
.entry-facts details { padding: 10px; background: #fff; border-radius: 10px; }
.entry-facts summary { cursor: pointer; min-height: 32px; }
.search-matches { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.search-match { border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: start; padding: 10px; min-height: 48px; }
.search-match small { display: block; color: var(--ink-2); }
#btnReserveSpecial { margin-top: 12px; width: 100%; font-size: 14px; min-height: 44px; }
.manual-grid input:read-only { background: #f3f7fc; color: var(--ink-2); }
.note-details { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.note-details summary { min-height: 32px; cursor: pointer; }
.note-details input { margin-top: 6px; }
.status-select.is-DNF, .status-note.is-DNF { color: var(--amber); background: var(--amber-bg); }
.status-select.is-EXH, .status-note.is-EXH { color: var(--blue); background: #eaf4fb; }
.outside-results { border-top: 2px solid var(--line); margin-top: 28px; padding-top: 12px; }
.outside-results h2 { font-size: 22px; color: var(--navy); }
.outside-results h3 { font-size: 17px; }
.result-comment { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; }
.audit-row { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
body.is-focus .breadcrumbs, body.is-focus .entry-facts { display: none !important; }
body.is-focus .note-details { margin-bottom: 4px; }
@media (max-width: 420px) {
  .brand { width: 100%; }
  .global-nav { margin-top: 2px; }
  .metadata { gap: 6px 10px; font-size: 14px; }
  .portal-card { padding: 14px; }
}