/* /start - the guided first run.
 *
 * The page takes the whole viewport: a fixed layer over the shell, three rows
 * deep (rail, one card, controls). Everything is built from the shell.css
 * custom properties, so the papyrus light theme needs no overrides of its own:
 * --bg, --card, --line, --ink, --dim, --faint, --red, --fill and --up all flip
 * under [data-theme="light"]. The two places a token cannot do the job, a
 * tinted "done" row and the passed answer, use colour-mix on those same tokens.
 *
 * Motion is small and optional: the only animations are the points chip and the
 * card change, and both are switched off under prefers-reduced-motion and under
 * html.mz-low (the cheap-device flag set in the head of every page).
 */

.onbf {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg); color: var(--ink); font-family: var(--ui);
  overscroll-behavior: contain;
}
.onbf::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 82% -12%, var(--red-a), transparent 64%),
    radial-gradient(640px 520px at -8% 108%, var(--red-a), transparent 62%);
}

/* ── the rail ───────────────────────────────────────────────────────────── */
.onbf__top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.onbf__brand { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 0 0 auto; min-height: 40px; color: var(--ink); text-decoration: none; }
.onbf__brand b { font: 600 13px/1 var(--ui); letter-spacing: .14em; }
.onbf__brand span { font: 400 10.5px/1 var(--ui); color: var(--faint); letter-spacing: .04em; }

.onbf__rail { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; align-items: center; cursor: pointer; }
.onbf__rail i {
  flex: 1 1 0; min-width: 6px; height: 5px; border-radius: 999px; display: block;
  background: var(--raise); border: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.onbf__rail i.is-past { background: var(--fill); border-color: var(--fill); }
.onbf__rail i.is-at { background: var(--red); border-color: var(--red); }

.onbf__pts {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
}
.onbf__pts svg { width: 14px; height: 14px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linejoin: round; }
.onbf__pts b { font: 600 13.5px/1 var(--num); font-variant-numeric: tabular-nums; }
.onbf__pts span { font: 400 11px/1 var(--ui); color: var(--faint); }
.onbf__pts.is-up { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-a); }
.onbf__gain {
  position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  font: 600 12.5px/1 var(--num); color: var(--red); pointer-events: none;
  animation: onbGain 1.3s var(--ease) forwards;
}
@keyframes onbGain {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  22% { opacity: 1; transform: translate(-50%, -8px); }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}

.onbf__x {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--dim); font: 500 12.5px/1 var(--ui); text-decoration: none;
}
.onbf__x:hover { border-color: var(--red); color: var(--ink); }
.onbf__x kbd { font: 500 10px/1 var(--num); color: var(--faint); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 5px; }

/* ── the stage ──────────────────────────────────────────────────────────── */
.onbf__stage {
  position: relative; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 26px 22px 30px; display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.onbf__stage::-webkit-scrollbar { width: 8px }
.onbf__stage::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px }

.onbc {
  width: 100%; max-width: 780px; margin: auto; outline: none;
  display: flex; flex-direction: column; gap: 10px;
  animation: onbIn .34s var(--ease) both;
}
@keyframes onbIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.onbc__n {
  font: 500 10.5px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.onbc h2 { font: 600 clamp(22px, 4.6vw, 31px)/1.12 var(--ui); letter-spacing: -.03em; color: var(--ink); }
.onbc__sub { font: 400 13px/1.55 var(--ui); color: var(--faint); margin-top: -4px; }
.onbc__line { font: 400 14.5px/1.7 var(--ui); color: var(--dim); max-width: 64ch; }

.onbc__note { font: 400 12.3px/1.7 var(--ui); color: var(--faint); max-width: 74ch; }
.scroll.pg .onbc__note a, .onbc__note a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

.onbc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 2px; }
.onbchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font: 600 11.5px/1.3 var(--ui);
  border: 1px solid var(--line-2); background: var(--card); color: var(--dim);
}
.onbchip em { font-style: normal; font-weight: 400; color: var(--faint); }
.onbchip--done { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: var(--up-a); }
.onbchip--todo { color: var(--red); border-color: var(--red-b); background: var(--red-a); }
.onbchip--blocked { color: var(--faint); }

.onbpts {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font: 600 11.5px/1.3 var(--num);
  border: 1px dashed var(--line-2); color: var(--dim);
}
.onbpts em { font: 400 10.5px/1.3 var(--ui); font-style: normal; color: var(--faint); }
.onbpts.is-paid { border-style: solid; border-color: color-mix(in srgb, var(--up) 45%, transparent); color: var(--up); background: var(--up-a); }
.onbpts.is-paid em { color: color-mix(in srgb, var(--up) 70%, var(--faint)); }

/* ── the three rules that close an account ──────────────────────────────── */
.onbr { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 4px; }
.onbr__c {
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px 15px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.onbr__k { font: 500 10.5px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.onbr__c > b { font: 600 25px/1.15 var(--num); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.onbr__c p { font: 400 12.3px/1.65 var(--ui); color: var(--dim); }

/* ── the check ──────────────────────────────────────────────────────────── */
.onbq {
  border: 1px solid var(--line-2); border-radius: 20px; padding: 16px 16px 18px;
  background: var(--card); display: flex; flex-direction: column; gap: 14px; margin-top: 6px;
}
.onbq__lede { font: 400 12.8px/1.6 var(--ui); color: var(--faint); }
.onbq__f { border: 0; display: flex; flex-direction: column; gap: 8px; }
.onbq__f legend { padding: 0; font: 500 14px/1.55 var(--ui); color: var(--ink); }
.onbq__h { font: 400 12px/1.55 var(--ui); color: var(--faint); }
.onbq__opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.onbq__o {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 13px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--card-2);
  cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease);
}
.onbq__o:hover { border-color: var(--red); }
.onbq__o input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--fill); cursor: pointer; }
.onbq__o span { font: 600 15px/1.2 var(--num); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.onbq__o:has(input:checked) { border-color: var(--red); background: var(--red-a); }
.onbq__o:has(input:disabled) { cursor: default; opacity: .75; }
.onbq__f.is-wrong .onbq__opts { outline: 1px solid var(--red-b); outline-offset: 5px; border-radius: 14px; }
.onbq__fb { font: 400 12.4px/1.6 var(--ui); }
.onbq__fb.is-right { color: var(--up); }
.onbq__fb.is-wrong { color: var(--red); }
.onbq__msg { font: 500 12.8px/1.6 var(--ui); color: var(--dim); }
.onbq__msg.is-right { color: var(--up); }
.onbq__msg.is-wrong { color: var(--red); }
.onbq--done { border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-a); gap: 8px; }
.onbq--done b { font: 600 14px/1.5 var(--ui); color: var(--up); }
.onbq--done p { font: 400 12.8px/1.7 var(--ui); color: var(--dim); }

/* ── progress pips, the signed-out schedule, the end card ───────────────── */
.onbpips { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.onbpips i { width: 26px; height: 6px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); }
.onbpips i.on { background: var(--up); border-color: var(--up); }
.onbpips span { font: 500 11.5px/1 var(--num); color: var(--faint); margin-left: 4px; }

.onbs { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.onbs__r {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.onbs__r i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font: 600 12px/1 var(--num); font-style: normal; background: var(--raise); color: var(--faint);
}
.onbs__r b { flex: 1 1 auto; min-width: 0; font: 500 13.5px/1.45 var(--ui); color: var(--ink); }
.onbs__p { flex: 0 0 auto; font: 600 12.5px/1 var(--num); color: var(--red); }

.onbe {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; margin-top: 4px;
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--card);
}
.onbe > span { font: 500 10.5px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.onbe > b { font: 600 34px/1.1 var(--num); letter-spacing: -.03em; color: var(--ink); }
.onbe > em { font: 400 12px/1.5 var(--ui); font-style: normal; color: var(--faint); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.onbc__acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.onbb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--dim);
  font: 600 13px/1 var(--ui); text-decoration: none; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.onbb:hover { border-color: var(--red); color: var(--ink); }
.onbb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onbb kbd { font: 500 10px/1 var(--num); color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; padding: 3px 5px; }
.scroll.pg .onbb--primary, .onbb--primary { background: var(--fill); border-color: var(--fill); color: #fff; }
.onbb--primary:hover { background: var(--fill-2); border-color: var(--fill-2); color: #fff; }
.onbb--ghost { background: transparent; }
.onbb[disabled] { opacity: .4; cursor: default; }
.onbb[disabled]:hover { border-color: var(--line-2); color: var(--dim); }
.scroll.pg .onbb, .scroll.pg .onbb:hover { text-decoration: none; }
.scroll.pg .onbb--go { color: var(--ink); }

/* ── the controls ───────────────────────────────────────────────────────── */
.onbf__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 22px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.onbf__count { font: 500 12px/1 var(--num); color: var(--faint); margin: 0 auto; }
.onbf__truth { flex: 1 1 100%; order: 9; font: 400 11.5px/1.6 var(--ui); color: var(--faint); }

.onbf__moved {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 11px 22px;
  border-bottom: 1px solid var(--red-b); background: var(--red-a);
  font: 400 12.8px/1.6 var(--ui); color: var(--dim);
}
.onbf__moved .onbb { min-height: 36px; padding: 8px 14px; margin-left: auto; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .onbf__top { padding: 11px 14px; gap: 9px; flex-wrap: wrap; }
  .onbf__rail { order: 9; flex: 1 1 100%; }
  .onbf__x kbd { display: none; }
  .onbf__stage { padding: 20px 14px 26px; }
  .onbf__foot { padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); }
  .onbf__count { order: -1; flex: 1 1 100%; margin: 0; text-align: left; }
  .onbb { padding: 10px 15px; }
  .onbf__moved { padding: 10px 14px; }
  .onbf__moved .onbb { margin-left: 0; }
}
@media (max-width: 430px) {
  .onbq { padding: 13px 13px 15px; }
  .onbq__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onbq__o { padding: 10px; gap: 8px; }
  .onbq__o span { font-size: 14px; }
  .onbr__c { padding: 12px 13px 13px; }
  .onbc__acts .onbb { flex: 1 1 100%; }
  .onbe > b { font-size: 29px; }
}

/* ── less motion, cheap devices ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .onbc, .onbf__gain { animation: none; }
  .onbf__rail i, .onbb, .onbq__o { transition: none; }
}
html.mz-low .onbc, html.mz-low .onbf__gain { animation: none; }
html.mz-low .onbf::before { background: none; }
html.mz-low .onbf__pts.is-up { box-shadow: none; }

/* ── 24 Sep: rules as three figures, a one-line pass, and the chat launcher kept off the footer ── */
.onbr__c { gap: 6px; padding: 18px 18px 17px; }
.onbr__c > b { font: 600 32px/1.1 var(--num); letter-spacing: -.03em; margin-top: 4px; }
.onbr__pc { font: 600 12px/1.3 var(--ui); font-style: normal; color: var(--red); }
.onbr__c p { font: 400 12.8px/1.55 var(--ui); color: var(--dim); margin-top: 4px; }
.onbc__note b { font-weight: 600; color: var(--dim); }
.onbq--done { flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; }
.onbq--done svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--up); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.onbq--done b { font: 600 14px/1.4 var(--ui); color: var(--up); }
.onbq--done span { font: 400 13.5px/1.4 var(--ui); color: var(--dim); }
body:has(#onbFlow) .mzc-launch { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
body:has(#onbFlow) .mzc { bottom: calc(198px + env(safe-area-inset-bottom, 0px)); }
/* the key hint on a filled button: translucent on the red, readable in light and dark (the global kbd paints a cream chip) */
.onbb kbd { background: rgba(255, 255, 255, .16); border-bottom-width: 1px; }
.onbb--primary kbd { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* checkpoints and completion (24 Sep) */
.onbf__rail i { height: 7px; }
.onbf__rail i.is-done { background: var(--green, #2fbf71); border-color: var(--green, #2fbf71); }
.onbf__rail i.is-at { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.onbf__rail i.is-at.is-done { background: var(--green, #2fbf71); border-color: var(--red); }
.onbf__railn { flex: none; font: 600 12px/1 var(--num, inherit); color: var(--dim); margin-left: 8px; }
.onbck { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; gap: 6px; }
.onbck a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; }
.onbck a:hover { border-color: var(--red); }
.onbck i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font: 600 12px/1 var(--num, inherit); font-style: normal; color: var(--dim); }
.onbck .is-done a { color: var(--dim); }
.onbck .is-done i { background: var(--green, #2fbf71); border-color: var(--green, #2fbf71); color: #fff; }
.onbseal { width: 112px; height: 112px; margin: 0 0 18px; display: grid; place-content: center; text-align: center; border: 4px solid var(--red); border-radius: 18px; color: var(--red); transform: rotate(-7deg); animation: onbseal .7s cubic-bezier(.2,1.4,.4,1) both .15s; }
.onbseal b { font: 700 38px/1 "Noto Sans JP", serif; letter-spacing: .04em; }
.onbseal small { margin-top: 6px; font: 700 10px/1 var(--ui, inherit); letter-spacing: .2em; text-transform: uppercase; }
@keyframes onbseal { from { opacity: 0; transform: rotate(-7deg) scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .onbseal { animation: none; } }