/* The free tools (/tools/): the dice checker, Should I double? and the race and shot calculator,
   on top of styles.css. Each tool is a panel of the app's sand under the page's opening lines:
   its questions, then its answer, which the tool's script fills in. Controls follow the app's:
   a segmented choice like iOS's, fields on the ivory of a card, the amber button with its edge.
   After changing this file run tools/site/stamp-assets.sh. */
:root {
  --field: #fffdf8;
  --field-edge: rgba(28, 21, 14, 0.18);
  --track: rgba(28, 21, 14, 0.07);
  --good: #2f5b3e;
  --bad: #9d4334;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- the panel */
.tool {
  margin: 2rem calc(-1 * var(--inset)) 0;
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-radius: 24px;
  background: var(--sheet);
}
.tool form { display: grid; gap: 1.25rem; margin: 0; }
.tool fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool [hidden] { display: none !important; }

/* A question: its label (or legend) above, a short hint under it. */
.q { display: grid; gap: 0.45rem; min-width: 0; }
.q > label, .q > legend, .q-label {
  padding: 0;
  color: var(--ink);
  font: 600 0.9375rem/1.3 var(--round);
}
.q .hint { margin: 0; color: var(--ink-3); font-size: 0.875rem; line-height: 1.45; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem; }

.tool input[type="text"], .tool input[type="number"], .tool textarea {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  font: 1rem/1.4 var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.tool textarea { min-height: 5.5rem; resize: vertical; }
.tool .hex { font: 0.9375rem/1.45 var(--mono); letter-spacing: 0.01em; }
.tool input:focus-visible, .tool textarea:focus-visible, .tool button:focus-visible {
  outline: 2px solid var(--amber-edge);
  outline-offset: 2px;
}
.tool [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.tool .field-error { margin: 0; color: var(--bad); font-size: 0.875rem; }

/* A number with − and + either side, for pip counts. */
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0.4rem; align-items: center; }
.stepper input { text-align: center; font: 600 1.25rem/1 var(--round); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  font: 600 1.375rem/1 var(--round);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step:active { background: var(--sand); }

/* ---------- a segmented choice: radio buttons in a track, the chosen one raised, as iOS draws
   it. The radios stay in the page (hidden from sight only), so arrows and VoiceOver work. */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 13px;
  background: var(--track);
}
.seg label { position: relative; flex: 1 1 auto; min-width: 2.75rem; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  color: var(--ink-2);
  font: 600 0.9375rem/1.2 var(--round);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.seg input:checked + span { background: var(--field); color: var(--ink); box-shadow: 0 1px 2px rgba(40, 25, 10, 0.16), 0 0 0 0.5px rgba(40, 25, 10, 0.08); }
.seg input:focus-visible + span { outline: 2px solid var(--amber-edge); outline-offset: 1px; }
.seg input:disabled + span { opacity: 0.4; }
@media (hover: hover) { .seg input:not(:checked, :disabled):hover + span { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .seg span { transition: none; } }

/* A checkbox line. */
.check { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding-top: 0.6rem; color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--amber-edge); }

/* Buttons: the amber one submits; a quiet one beside it fills in an example. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.tool button.btn { border: 0; cursor: pointer; }
.link-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--amber-text);
  font: 500 0.9375rem/1.3 var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
@media (hover: hover) { .link-btn:hover { color: var(--ink); } }

/* Shown until the tool's script runs (and if it never does). */
.needs-js { margin: 0; padding: 0.8rem 1rem; border-radius: 14px; background: var(--field); color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- the answer */
.answer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.answer:empty { display: none; }
.answer > :first-child { margin-top: 0; }
.answer p { margin: 0.6rem 0 0; color: var(--ink-2); }
.answer h3 { margin: 1.75rem 0 0.5rem; font: 600 1.0625rem/1.3 var(--round); color: var(--ink); }
.answer .table { margin-top: 0; }

/* A verdict line: a mark (✓ or ✗) and words, never the colour alone. */
.verdict { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0.75rem 0 0; color: var(--ink); font: 600 1.0625rem/1.4 var(--round); }
.verdict::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.05rem;
  border-radius: 50%;
  font: 700 0.9375rem/1 var(--text);
}
.verdict.ok::before { content: "✓"; background: var(--good); color: #fff; }
.verdict.no::before { content: "✕"; background: var(--bad); color: #fff; }
.verdict.info::before { content: "i"; background: var(--track); color: var(--ink); font-family: var(--round); }
.verdict + .sub { margin: 0.2rem 0 0 2.3rem; color: var(--ink-2); font: 400 0.9375rem/1.5 var(--text); }

/* A big number with its words. */
.figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0; }
.figure b { font: 700 clamp(2.75rem, 10vw, 3.75rem)/1 var(--round); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.figure span { color: var(--ink-2); font-size: 1.0625rem; }

/* A small die (dice checker, shots): the pips of its face (data-face) drawn by CSS. */
.die {
  display: inline-grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border: 1px solid #b3a27f;
  border-radius: 0.35rem;
  background: linear-gradient(145deg, #fffdf8, #efe5d1);
  vertical-align: middle;
}
.die i { width: 0.27rem; height: 0.27rem; margin: auto; border-radius: 50%; background: var(--ink); }
.die i.off { visibility: hidden; }
.dice { display: inline-flex; gap: 0.25rem; vertical-align: middle; }

/* The table of rolls (dice checker). */
.rolls { width: 100%; margin-top: 0; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rolls th, .rolls td { padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.rolls th:last-child, .rolls td:last-child { padding-right: 0; }
.rolls thead th { font: 600 0.8125rem/1.3 var(--round); color: var(--amber-text); }
.rolls td { color: var(--ink-2); }
.rolls .roll { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 600; }
.rolls .tie td { color: var(--ink-3); }
.rolls .miss td { background: rgba(157, 67, 52, 0.08); }
.rolls .miss .seen { color: var(--bad); font-weight: 600; }
.rolls .hit-mark { color: var(--good); font-weight: 700; }
.more { margin-top: 1rem; }

/* Codes that wrap anywhere (keys, fingerprints). */
.code { font: 0.875rem/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* ---------- a scale of winning chances, 0 to 100%, in zones (Should I double?) */
.scale { margin: 1.25rem 0 0; }
.scale .q-label { margin-bottom: 0.5rem; }
.scale-bar { display: flex; height: 2.75rem; border-radius: 12px; overflow: hidden; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-edge); }
.scale-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 0.35rem;
  overflow: hidden;
  color: var(--ink);
  font: 600 0.8125rem/1.15 var(--round);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The zones, in the bar and in its key. */
.z-wait { background: var(--field); color: var(--ink-2); }
.z-take, .z-keep { background: #f7d29a; }
.z-pass { background: var(--amber); color: var(--amber-label); }
.z-play { background: #c98425; color: var(--amber-label); }
.z-drop { background: #e9dcc4; color: var(--ink-2); }
.doc .scale-key { display: grid; gap: 0.35rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.scale-key li { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.scale-key i { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 3px; translate: 0 0.1rem; box-shadow: inset 0 0 0 1px var(--field-edge); }
.scale-key b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- the points between your checker and theirs (shots) */
.doc .strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem 0.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .strip { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.strip li { margin: 0; }
.pt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 5.25rem;
  padding: 0 0 0.3rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  font: 600 0.8125rem/1 var(--round);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The point itself: a triangle of the board's colours, light and dark in turn. */
.pt::before {
  content: "";
  position: absolute;
  inset: 0 12% 1.5rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #d2c09b;
}
.strip li:nth-child(even) .pt::before { background: #c9a58f; }
.pt .pc { position: absolute; top: 0.2rem; left: 50%; display: grid; gap: 1px; translate: -50% 0; }
.pt .pc i { width: 1.35rem; height: 1.35rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.28); }
.pt[data-state="theirs"] .pc i { background: radial-gradient(circle at 38% 30%, #5a4232, #24170e); }
.pt[data-state="block"] .pc i { background: radial-gradient(circle at 38% 30%, #fffdf8, #dacbae); }
.pt[data-state="theirs"], .pt[data-state="block"] { color: var(--ink); }
.pt:focus-visible { outline: 2px solid var(--amber-edge); outline-offset: 1px; }
@media (hover: hover) { .pt:hover { background: var(--track); } }
.strip-you { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; color: var(--ink); font: 600 0.9375rem/1.3 var(--round); }
.strip-you i { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fffdf8, #dacbae); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.28); }
.doc .strip-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.6rem 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: 0.875rem; }
.strip-legend li { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.strip-legend i { width: 0.9rem; height: 0.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28); }
.strip-legend .l-theirs { background: #3a2a1e; }
.strip-legend .l-block { background: #f3ebdb; }

/* The 36 rolls, those that hit marked (shots). */
.grid36 { border-collapse: separate; border-spacing: 3px; margin: 0.75rem 0 0 -3px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.grid36 th { width: 2.4rem; color: var(--ink-3); font: 600 0.75rem/1 var(--round); text-align: center; }
.grid36 td {
  width: 2.4rem;
  height: 2.1rem;
  border-radius: 7px;
  background: var(--field);
  color: var(--ink-3);
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--field-edge);
}
.grid36 td.corner { background: none; box-shadow: none; }
.grid36 td.hit { background: var(--amber); color: var(--amber-label); font-weight: 700; box-shadow: none; }
@media (max-width: 22rem) { .grid36 th, .grid36 td { width: 2.05rem; } }

/* ---------- the tools hub (/tools/) */
.doc .tool-list { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tool-list li { margin: 0; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.tool-list h2 { margin: 0; font: 600 1.25rem/1.3 var(--round); }
.doc .tool-list h2 a { color: var(--ink); text-decoration: none; }
.doc .tool-list h2 a:hover { color: var(--amber-text); }
.tool-list p { margin: 0.35rem 0 0; }

/* ---------- code to copy (the recipe in Python) */
.doc pre {
  margin: 1rem calc(-1 * var(--inset)) 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border-radius: 16px;
  background: var(--night);
  color: var(--night-text);
  font: 0.8125rem/1.6 var(--mono);
  tab-size: 4;
}
.doc pre code { padding: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; }

/* ---------- the answers in tables, for every page with or without its script */
.doc .grid-table { margin-top: 1.25rem; font-variant-numeric: tabular-nums; }
.doc .grid-table caption { padding: 0 0 0.4rem; color: var(--ink); font: 600 0.9375rem/1.35 var(--round); text-align: left; }
.doc .grid-table th, .doc .grid-table td { padding-right: 0.75rem; text-align: center; white-space: nowrap; }
.doc .grid-table th:first-child { text-align: left; }
.doc .grid-table thead th:first-child { color: var(--ink-3); font-weight: 500; }
.doc .shots-table td:last-child { text-align: left; white-space: normal; }

/* The verdict the answer focuses for VoiceOver shows no ring: the answer is already in view. */
.verdict:focus { outline: none; }

/* ---------- the board (position analyzer), drawn by position.js */
.board { display: block; width: 100%; height: auto; margin: 0 0 1rem; border-radius: 14px; }