/* Racing Tracker — mobile-first */
:root {
  --bg: #f3efe6;
  --card: #fffdf8;
  --ink: #1a1a1a;
  --muted: #5c584f;
  --line: #d9d2c5;
  --accent: #1c3d2e;
  --accent-2: #2e6b4e;
  --danger: #8f1d1d;
  --warn: #8a5a00;
  --ok: #1d6b3a;
  --fail: #9b1c1c;
  --radius: 12px;
  --pad: 1rem;
  --tap: 44px;
  color-scheme: light;
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100dvh; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, .btn { min-height: var(--tap); border-radius: 10px; border: 0; padding: .55rem .9rem; background: var(--accent); color: #fff; font-weight: 600; }
button.secondary, .btn.secondary { background: #e8e2d6; color: var(--ink); }
button.danger { background: var(--danger); }
button:disabled { opacity: .55; }
input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
textarea { min-height: 4.5rem; resize: vertical; }
label { display: block; font-weight: 600; font-size: .9rem; margin: .65rem 0 .25rem; }
.wrap { max-width: 52rem; margin: 0 auto; padding: var(--pad); padding-bottom: 5.5rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: .75rem 0; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 10rem; }
.muted { color: var(--muted); font-size: .92rem; }
.banner { padding: .7rem .9rem; border-radius: 10px; margin: .6rem 0; }
.banner.warn { background: #fff3cc; color: #5c4300; }
.banner.ok { background: #e5f6ea; color: var(--ok); }
.banner.err { background: #fde8e8; color: var(--danger); }
.banner.info { background: #e8eef8; }
.header { display: flex; gap: .75rem; align-items: center; }
.logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); flex: 0 0 48px; }
h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.tabs, .subtabs { display: flex; gap: .35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .35rem 0; }
.tabs button, .subtabs button { flex: 1 0 auto; background: #e8e2d6; color: var(--ink); white-space: nowrap; }
.tabs button.on, .subtabs button.on { background: var(--accent); color: #fff; }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .7rem 0; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem; text-align: center; }
.metric b { display: block; font-size: 1.15rem; }
.item { border-top: 1px solid var(--line); padding: .85rem 0; }
.item:first-child { border-top: 0; padding-top: 0; }
.item h3 { margin: 0 0 .2rem; font-size: 1rem; }
.mark-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sticky-nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fffdf8; border-top: 1px solid var(--line); display: flex; z-index: 20; }
.sticky-nav button { flex: 1; border-radius: 0; background: transparent; color: var(--ink); font-size: .8rem; padding: .45rem .2rem; }
.sticky-nav button.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.hidden { display: none !important; }
.list-btn { display: block; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); margin: .4rem 0; }
.pass { color: var(--ok); }
.fail { color: var(--fail); }
.hint { font-size: .86rem; color: var(--muted); margin: .2rem 0 .5rem; }
.section-title { position: sticky; top: 0; background: var(--bg); padding: .4rem 0; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161513; --card: #22201c; --ink: #f3efe6; --muted: #b3aa9a; --line: #3a362f; --accent: #3d8f63; color-scheme: dark; }
  input, select, textarea, .metric, .list-btn, .sticky-nav { background: #1c1a17; color: var(--ink); }
  button.secondary, .tabs button, .subtabs button { background: #2a2722; color: var(--ink); }
}
@media print {
  .sticky-nav, .no-print, .tabs, .subtabs { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { break-inside: avoid; }
}

/* Mark grid: five official marks (—, ✓, P, X, 0) */
.mark-row { grid-template-columns: repeat(5, 1fr); }
.mark-row button.on { background: var(--accent); color: #fff; }
.mark-row button.on.pass { background: var(--ok); }
.mark-row button.on.fail { background: var(--fail); }
#panel-workshop .card:first-child { margin-top: 0; }
label input, label select, label textarea { margin-top: .25rem; }