/* Phone first: the code entry happens standing at a table at a card show.
   Colours and type come from the design system (ds/boom.css, loaded first). */
:root { --card: var(--s1); --bad: var(--pass); --warn: var(--warm); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--ui); }
/* Standalone mode has no browser chrome, so the header sits under the notch unless we
   pad for it. env() is 0 in a normal tab, so this is safe everywhere. */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; border-bottom: 1px solid var(--line);
  padding: calc(.85rem + env(safe-area-inset-top)) 1rem .85rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}
.brand { color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: .02em; }
.bar nav { display: flex; align-items: center; gap: 1rem; }
.bar a { color: var(--muted); text-decoration: none; }
.bar a:hover { color: var(--ink); }
.bar a.brand { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
main {
  max-width: 60rem; margin: 0 auto;
  padding: 1rem calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left));
}
footer {
  color: var(--muted); font-size: .8rem; text-align: center;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;
}
.card.narrow { max-width: 25rem; margin: 3rem auto; }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
label { display: block; margin: .9rem 0 .35rem; color: var(--muted); font-size: .85rem; }
input {
  width: 100%; padding: .8rem; font-size: 1rem; color: var(--ink);
  background: var(--s2); border: 1px solid var(--line-2); border-radius: 12px;   /* a field, visible on its card (Batch I) */
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Big and spaced out: typing six digits one-handed shouldn't need care. */
input.code { font-size: 1.9rem; letter-spacing: .35em; text-align: center; padding: .7rem; }
button {
  margin-top: 1rem; width: 100%; padding: .85rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--accent-fill); border: 0; border-radius: 12px; cursor: pointer;
}
button.link {
  width: auto; margin: 0; padding: 0; background: none; color: var(--muted);
  font-weight: 400; text-decoration: underline;
}
button.link:hover { color: var(--ink); }
.secondary { margin-top: .75rem; text-align: center; }
a.button { display: inline-block; margin-top: 1rem; padding: .7rem 1.1rem; color: #fff;
  background: var(--accent-fill); border-radius: 12px; text-decoration: none; font-weight: 600; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--bad); border-left: 3px solid var(--bad); padding-left: .7rem; }
.warn { color: var(--warn); border-left: 3px solid var(--warn); padding-left: .7rem; }
.notice { color: var(--accent); border-left: 3px solid var(--accent); padding-left: .7rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; }
table.kv th { width: 11rem; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
@media (max-width: 30rem) { main { padding: .75rem; } .card { padding: 1rem; } }

/* One-handed at a show table: every tap target clears the 44px Apple/WCAG minimum, and
   nothing important sits in the top corners where a thumb cannot reach. */
button, a.button, input { min-height: 44px; }
.bar nav a, button.link { min-height: 44px; display: inline-flex; align-items: center; }
/* iOS zooms the page if an input is under 16px. Never shrink these. */
input, button { font-size: max(1rem, 16px); }

button.link[disabled] { color: var(--muted); text-decoration: none; cursor: default; opacity: .7; }

/* Home: last capture per source. Red past 30 hours, amber when GitHub can't say. */
.captures { width: 100%; border-collapse: collapse; }
.captures th { text-align: left; font-weight: 500; padding: .5rem .5rem .5rem 0; vertical-align: top; }
.captures td { padding: .5rem 0; }
.captures .small { font-size: .8rem; margin-top: .15rem; }
.capture-ok .dot { color: #6fdc8c; }
.capture-stale, .capture-stale .dot { color: var(--bad); font-weight: 600; }
.capture-unknown .dot { color: var(--warn); }

/* ---------------------------------------------------------------- Quick Log (4b) */
.ql-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ql-actions .bigbtn:first-of-type { grid-column: 1 / -1; }
.bigbtn {
  display: block; width: 100%; min-height: 56px; margin-top: .6rem; padding: .95rem;
  font-size: 1.1rem; font-weight: 650; text-align: center; color: #fff;
  background: var(--accent-fill); border: 0; border-radius: 12px; cursor: pointer;
}
.bigbtn.alt { background: #2a3140; color: var(--ink); }
.ql-status { min-height: 1.5rem; margin-top: .75rem; }
.ql-status.ok, .ok { color: #8fe3a6; }
.ql-status.warn, .warn { color: var(--warn); }
.ql-status.bad, .bad { color: var(--bad); }
.ql-preview { width: 100%; max-height: 40vh; object-fit: contain; margin-top: .75rem; border-radius: 8px; }
.ql-row { display: flex; gap: .6rem; align-items: flex-end; }
.ql-row > * { flex: 1; }
.ql-row button { margin-top: 0; width: auto; flex: 0 0 auto; padding: .8rem 1.1rem; }
.picks { display: grid; gap: .6rem; }
.pick {
  display: flex; gap: .75rem; align-items: center; width: 100%; margin: 0; padding: .6rem;
  text-align: left; color: var(--ink); background: #14171e; border: 2px solid var(--line);
  border-radius: 10px; font-weight: 400; min-height: 64px;
}
.pick.selected { border-color: var(--accent); }
.pick img, .pick .ph { width: 64px; height: 89px; object-fit: contain; flex: 0 0 64px; border-radius: 4px; }
.pick .ph { display: grid; place-items: center; background: #222733; color: var(--muted); font-size: .7rem; }
.pick-text { display: grid; gap: .15rem; }
.tag { display: inline-block; font-size: .75rem; padding: .05rem .4rem; border-radius: 6px; background: #2a3140; }
.cue { color: var(--warn); font-size: .9rem; font-weight: 600; }
.badge { color: #8fe3a6; font-style: normal; font-size: .8rem; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg label { margin: 0; flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: block; min-height: 44px; padding: .65rem .8rem; text-align: center; color: var(--ink);
  background: #14171e; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem;
}
.seg input:checked + span { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); font-weight: 650; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.seg label.off span { opacity: .4; }
select { width: 100%; padding: .8rem; font-size: 1rem; color: var(--ink); background: #14171e;
  border: 1px solid var(--line); border-radius: 8px; }
.small { font-size: .82rem; }
.ql-price { margin-top: 1rem; display: grid; gap: .6rem; }
.ql-comp .big { font-size: 1.6rem; font-weight: 700; }
.ql-box { padding: .75rem; border-radius: 10px; border: 1px solid var(--line); background: #14171e; }
.ql-box.green { border-color: #3fa66b; } .ql-box.yellow { border-color: #c9a227; }
.ql-box.orange { border-color: #e07b29; } .ql-box.red { border-color: #d64545; }
.ql-box.boom { border-color: #9b6bff; }
.ql-box .verdict { margin: .35rem 0; }
.ql-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ql-table td { padding: .35rem .25rem; border-bottom: 1px solid var(--line); }
.ql-table .num { text-align: right; white-space: nowrap; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* G.4: the desktop launch page (until Batch H's Home) - one hairline list */
.home-links { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 40rem; }
.home-links a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .75rem .5rem;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.home-links a::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); }
.home-links a:hover, .home-links a:focus-visible { background: var(--line); }
.home-links span { color: var(--muted); font-size: .9rem; }

/* the wordmark "Boom.TCG" on the sign-in pages (Batch J): ".TCG" ~60% cap height, accent tint */
.wordmark .s-word b { font-weight: 800; }
.wordmark .s-word i { font-style: normal; font-weight: 600; font-size: .62em; letter-spacing: .02em; color: var(--accent, #66adff); margin-left: 1px; }