/* Autobus Complete: letter badge, category fields, review cards, score table */
.ab-wrap {
  width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-4);
}
.ab-note { text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }

.ab-top { display: flex; gap: var(--sp-4); align-items: center; }
.ab-letter {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.ab-letter-char { font-size: 64px; font-weight: 900; line-height: 1; color: #2a1800; }
.ab-side { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ab-timer { display: flex; align-items: center; gap: var(--sp-3); }
.ab-timer-num { min-width: 2.2em; font-size: var(--fs-2xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.ab-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--c-empty); overflow: hidden; }
.ab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-p1), var(--c-p0)); transition: width 240ms linear; }
.ab-totals { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--sp-3); border-radius: var(--r-full); background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-sm); }
.ab-chip i { width: 10px; height: 10px; border-radius: 50%; }
.ab-chip.p0 i { background: var(--c-p0); }
.ab-chip.p1 i { background: var(--c-p1); box-shadow: inset 0 0 0 3px var(--c-surface); }
.ab-chip.me { border-color: var(--c-accent); }

.ab-body { display: flex; flex-direction: column; gap: var(--sp-3); }

/* writing */
.ab-fields { display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-field {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 4px var(--sp-3) 4px 4px; border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.ab-field:focus-within { border-color: var(--c-border-focus); box-shadow: 0 0 0 3px rgba(91, 141, 238, 0.25); }
.ab-cat {
  flex: 0 0 74px; text-align: center; padding: 10px 0; border-radius: var(--r-md);
  font-weight: 700; font-size: var(--fs-sm); color: #101828;
}
.c0 .ab-cat { background: #fbbf24; } .c1 .ab-cat { background: #4ade80; } .c2 .ab-cat { background: #22d3ee; }
.c3 .ab-cat { background: #c4b5fd; } .c4 .ab-cat { background: #fb923c; }
.ab-field input {
  flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--c-text);
  font: inherit; font-size: 17px; /* 16px+ stops iOS zooming on focus */ outline: none;
}
.ab-field input:disabled { opacity: 0.6; }
.ab-progress { text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ab-banner {
  text-align: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); font-weight: 700;
  background: rgba(239, 83, 80, 0.15); border: 1px solid var(--c-danger);
}
.ab-banner[hidden] { display: none; }
.ab-finish, .ab-done { width: 100%; }

/* countdown */
.ab-count { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) 0; font-size: var(--fs-xl); font-weight: 700; }
.ab-count b { font-size: 88px; line-height: 1; text-shadow: 0 0 24px rgba(245, 158, 11, 0.7); }

/* review */
.ab-review { display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-card { padding: var(--sp-3); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.ab-card-title { font-weight: 700; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.c0 .ab-card-title { color: #fbbf24; } .c1 .ab-card-title { color: #4ade80; } .c2 .ab-card-title { color: #22d3ee; }
.c3 .ab-card-title { color: #c4b5fd; } .c4 .ab-card-title { color: #fb923c; }
.ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ab-word { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-empty); min-width: 0; }
.ab-word small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.ab-word b { font-size: 17px; overflow-wrap: anywhere; }
.ab-word em { font-style: normal; font-size: var(--fs-xs); color: var(--c-danger); min-height: 1.2em; }
.ab-word.bad b { text-decoration: line-through; text-decoration-color: var(--c-danger); opacity: 0.8; }
.ab-judge { display: flex; gap: 6px; margin-top: 2px; }
.ab-judge button {
  flex: 1; min-height: 40px; border-radius: var(--r-md); border: 1px solid var(--c-border);
  background: transparent; color: var(--c-text); font: inherit; font-weight: 700; cursor: pointer;
}
.ab-judge button.on.ab-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.ab-judge button.on.ab-no { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.ab-judge button:disabled { opacity: 0.45; cursor: default; }

/* scores */
.ab-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.ab-table th, .ab-table td { padding: 8px var(--sp-2); text-align: center; background: var(--c-surface); }
.ab-table thead th { background: transparent; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ab-table tbody th { text-align: right; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); }
.ab-table td:last-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.ab-table td { overflow-wrap: anywhere; }
.ab-table td b { display: inline-block; margin-inline-start: var(--sp-2); padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.ab-table td.bad { color: var(--c-text-muted); text-decoration: line-through; }
.ab-table td.bad b { text-decoration: none; }
.ab-table .sum td, .ab-table .sum th { font-weight: 700; }
.ab-table .total td b { background: var(--c-accent); color: #fff; }

@media (prefers-reduced-motion: reduce) { .ab-bar i { transition: none; } }

.ab-finish:disabled, .ab-done:disabled { opacity: 0.5; cursor: default; }
/* tall forms: start from the top and scroll on short phones instead of clipping */
.board-area:has(> .ab-wrap) { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }