/* The 27-card trick — page-specific styles. Shared classes and tokens come from site.css. */

/* Elements we toggle with [hidden] also carry display rules; make hidden win on this page. */
.stage [hidden] { display: none !important; }

.tw-formula { font-family: var(--font-math); font-size: 1.3rem; padding-left: var(--s2); }

/* ---------- Try: packet + three dealt columns ---------- */
.tw-status { gap: var(--s2) var(--s4); margin-top: var(--s1); align-items: flex-start; }
.tw-answers { display: flex; flex-wrap: wrap; gap: 6px; min-height: 1.9rem; align-items: center; padding-top: 4px; }
.tw-none { color: var(--structure); font-size: 0.95rem; }

.tw-table {
  --card-w: clamp(50px, 5.4vw, 70px);
  display: flex; flex-wrap: nowrap; gap: var(--s3); align-items: flex-start;
  margin: var(--s3) 0 var(--s2);
}
.tw-pile { display: grid; justify-items: center; gap: 8px; }
.tw-stack { border-radius: calc(var(--card-w) * 0.09); }
.tw-stack[data-n="0"] { outline: 1.5px dashed rgba(244, 239, 228, 0.22); outline-offset: -1.5px; }
.tw-stack:not([data-n="0"]):not([data-n="1"])::before {
  content: ""; position: absolute; inset: 0; transform: translate(3px, 4px); border-radius: inherit;
  background: var(--paper-shade); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.28);
}
.tw-stack-count { font-size: 0.85rem; color: var(--secondary-on-stage); white-space: nowrap; }

.tw-cols { display: flex; gap: 8px; }
.tw-col {
  appearance: none; background: none; color: inherit; font: inherit; margin: 0;
  display: grid; justify-items: center; gap: 8px; align-content: start;
  padding: 6px 6px 10px; border-radius: 12px; border: 1.5px dashed transparent;
  cursor: default; -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.tw-col:not(:disabled) { cursor: pointer; border-color: rgba(244, 239, 228, 0.24); }
.tw-col:not(:disabled) .pile-label { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .tw-col:not(:disabled):hover { border-color: var(--active); background: color-mix(in oklch, var(--active) 8%, transparent); }
}
.tw-col.is-reported { border-style: solid; border-color: var(--active); }
.tw-col.is-reported .pile-label { color: var(--active); }
.tw-col-cards {
  display: flex; flex-direction: column; width: var(--card-w);
  min-height: calc(var(--card-w) * (var(--card-ratio) + 4)); /* nine cards, each showing a half-width strip */
}
.tw-col-cards > .card + .card { margin-top: calc(var(--card-w) * -0.9); }
/* A covered card shows only its corner strip; hide the centre pip so no sliver peeks out. */
.tw-col-cards > .card:not(:last-child) .pip,
.tw-wcol-cards > .card:not(:last-child):not(.tw-chosen) .pip { visibility: hidden; }
/* Only the top card of a stack casts a shadow (stacked shadows would add up to a dark halo). */
.stage .tw-stack > .card:not(:last-child) .face { box-shadow: none; }

.tw-reveal { display: flex; gap: var(--s3); align-items: flex-start; }
.tw-spot { border-color: rgba(244, 239, 228, 0.3); }
.tw-dest-form { align-items: flex-end; }
.tw-msg:not(:empty) { margin-top: var(--s2); }
.tw-seed { margin-top: var(--s2); font-size: 0.88rem; }

/* ---------- Why: inspect one run ---------- */
.tw-why { display: grid; gap: var(--s4); }
@media (min-width: 960px) {
  .tw-why { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; }
}
.tw-why-main > * + * { margin-top: var(--s3); }
/* Single column: put the gather code right under the cards it steers. */
@media (max-width: 959px) {
  .tw-why { gap: var(--s3); }
  .tw-why-main, .tw-why-side { display: contents; }
  .tw-why .tw-why-main > *, .tw-why .tw-why-side > * { margin-top: 0; }
  .tw-why-controls { order: 1; }
  .tw-why-cap { order: 2; }
  .tw-wtable { order: 3; }
  .tw-why-side > .tw-panel { order: 4; }
  .tw-why-main > .tw-panel { order: 5; }
  .tw-funnel { order: 6; }
  .tw-funnel-cap { order: 7; margin-top: calc(var(--s3) * -0.5); }
  .tw-ledger { order: 8; }
  .tw-why-fields { order: 9; }
  .tw-field-msg { order: 10; }
}
.tw-why-side > * + * { margin-top: var(--s3); }
.tw-field-msg:not(:empty) { color: var(--counter); font-size: 0.95rem; max-width: 40ch; }
.tw-diagnosis:not(:empty), .tw-mine { margin-top: var(--s2); }
.tw-progress { color: var(--secondary-on-stage); font-size: 0.92rem; }
.tw-why-cap { min-height: 4.4em; }

.tw-wtable { --card-w: clamp(30px, 3.7vw, 44px); }
.tw-wpacket { display: grid; gap: 4px; }
.tw-block { display: grid; gap: 6px; padding: 6px 0 6px 10px; border-left: 3px solid rgba(244, 239, 228, 0.1); transition: border-color 200ms ease; }
.tw-block.is-active { border-left-color: var(--active); }
.tw-block-label { font-size: 0.8rem; color: var(--secondary-on-stage); letter-spacing: 0.02em; }
.tw-block.is-active .tw-block-label { color: var(--active); }
.tw-row { min-height: calc(var(--card-w) * var(--card-ratio)); flex-wrap: nowrap; }

.tw-wgrid { display: flex; gap: 10px; align-items: flex-start; }
.tw-gutter, .tw-wcol { display: grid; justify-items: center; gap: 8px; align-content: start; padding: 6px; }
.tw-wcol { border: 1.5px dashed transparent; border-radius: 10px; }
.tw-wcol.is-reported { border: 1.5px solid var(--active); }
.tw-wcol.is-reported .pile-label { color: var(--active); }
.tw-wcol-cards { display: flex; flex-direction: column; width: var(--card-w); min-height: calc(var(--card-w) * (var(--card-ratio) + 4)); }
.tw-wcol-cards > .card + .card { margin-top: calc(var(--card-w) * -0.9); }
.tw-wcol-cards > .tw-chosen { z-index: 3; }
.tw-gutter-nums { display: grid; grid-auto-rows: calc(var(--card-w) * 0.5); font-size: 0.75rem; color: var(--structure); font-variant-numeric: tabular-nums; }
.tw-gutter-nums > span { line-height: 1.4; }

.tw-panel { border-top: 1px solid rgba(244, 239, 228, 0.12); padding-top: var(--s2); display: grid; gap: 12px; }
.tw-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tw-panel-head .readout-value { font-size: 1.35rem; }
.tw-digits { display: flex; gap: 10px; align-items: flex-start; }
.tw-digit { display: grid; justify-items: center; gap: 4px; }
.tw-digit b {
  display: grid; place-items: center; width: 46px; height: 52px; border-radius: 8px;
  border: 1.5px solid rgba(244, 239, 228, 0.25);
  font: 400 1.75rem/1 var(--font-math); font-variant-numeric: tabular-nums; color: var(--paper);
  transition: border-color 200ms ease, color 200ms ease;
}
.tw-digit small { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.tw-digit.is-mine b { border-color: var(--invariant); color: var(--invariant); }
.tw-digit.is-col b { border-color: var(--active); color: var(--active); border-width: 2.5px; }
.tw-dropped {
  align-self: flex-start; height: 52px; display: grid; place-items: center; padding: 0 6px;
  font: 400 1.5rem/1 var(--font-math); color: var(--structure); text-decoration: line-through;
}
.tw-dropped::after { content: " dropped"; font: 600 0.7rem var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; margin-left: 4px; }
.tw-digit-sum { font-family: var(--font-math); color: var(--secondary-on-stage); font-size: 1.05rem; }
.swatch.tw-sw-active { border: 2px solid var(--active); }
.swatch.tw-sw-invariant { border: 2px solid var(--invariant); }

.tw-code { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tw-code-inline { flex-direction: row; flex-wrap: wrap; margin-top: var(--s2); }
.tw-ledger { max-height: none; }

/* The funnel diagram (inline SVG, always on the dark stage) */
.tw-funnel svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.tw-funnel .fn-head { fill: var(--secondary-on-stage); font: 600 12px var(--font-ui); letter-spacing: 0.04em; }
.tw-funnel .fn-head.is-later { fill: var(--structure); }
.tw-funnel .fn-axis { fill: var(--structure); font: 500 11px var(--font-ui); }
.tw-funnel .fn-block { stroke: rgba(244, 239, 228, 0.12); stroke-dasharray: 3 4; }
.tw-funnel .fn-edge { stroke: var(--structure); stroke-width: 1; opacity: 0.8; }
.tw-funnel .fn-dot { fill: var(--paper); }
.tw-funnel .fn-slot { fill: var(--structure); opacity: 0.6; }
.tw-funnel .fn-chosen { fill: none; stroke: var(--active); stroke-width: 2.4; stroke-linejoin: round; }
.tw-funnel .fn-chosen-dot { fill: var(--active); }
.tw-funnel .fn-target { fill: none; stroke: var(--invariant); stroke-width: 2.2; }
.tw-funnel .fn-target-label { fill: var(--invariant); font: 700 12px var(--font-ui); }
.tw-funnel .fn-landing { fill: none; stroke: var(--counter); stroke-width: 2.2; stroke-dasharray: 3 2; }
.tw-funnel .fn-landing-label { fill: var(--counter); font: 700 12px var(--font-ui); }
.tw-funnel-challenge:not(:empty) { margin-top: var(--s3); }
.tw-funnel-cap { font-size: 0.92rem; }

/* ---------- Challenge ---------- */
.tw-mode { margin-bottom: var(--s3); }
.tw-mode .segmented { flex-wrap: wrap; }
.tw-pane > * + * { margin-top: var(--s2); }
.tw-encode { display: grid; gap: 10px; margin: var(--s3) 0; }
.tw-encode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tw-encode-label { min-width: 5.5em; color: var(--secondary-on-stage); font-weight: 600; font-size: 0.95rem; }

/* ---------- Perform: lookup table ---------- */
.tw-lookup th, .tw-lookup td { padding: 4px 9px; }
.tw-lookup td.tw-lk-code { letter-spacing: 0.08em; font-weight: 600; padding-right: 18px; }

@media (max-width: 560px) {
  .tw-table { gap: var(--s2); }
  .tw-cols { gap: 4px; }
  .tw-col { padding: 6px 5px 10px; }
  .tw-wgrid { gap: 4px; }
  .tw-gutter, .tw-wcol { padding: 5px 4px; }
  .tw-block { padding-left: 7px; }
  .tw-why-cap { min-height: 7.3em; }
  .tw-digit b { width: 42px; height: 48px; }
  .tw-dropped { height: 48px; }
  .tw-lookup th, .tw-lookup td { padding: 4px 5px; }
  .tw-lookup td.tw-lk-code { letter-spacing: 0.02em; padding-right: 10px; }
}