/* Seventh Grade Math — shared tokens and components.
   Anything only one page uses stays inline in that page. */

:root{
  /* palette */
  --rink:#EDF4F8;
  --board:#10243A;
  --board-soft:#1D3B58;
  --ice:#8FC4E0;
  --edge:#2E6E9E;
  --gold:#C0862B;
  --good:#2F7A55;
  --paper:#FFFFFF;
  --line:#C8DCE8;

  /* type */
  --display:"Barlow Condensed","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Barlow","Avenir Next","Helvetica Neue",sans-serif;

  /* masthead, overridable per page */
  --board-pad-top:1.1rem;
  --board-pad-bottom:1.25rem;
  --mark-size:clamp(2rem,7vw,3.1rem);

  /* sorting cards, overridable per page.
     Keep a full row on ONE line at every width. The drag code measures a
     slot from the gap between the first two cards, so a card that wraps to
     a second row throws off every drop target. If a page adds cards, shrink
     these clamps rather than letting the rail wrap. */
  --rail-min-height:150px;
  --card-w:clamp(44px,11.2vw,88px);
  --card-h:clamp(64px,15.5vw,120px);
  --card-size:clamp(1.3rem,3.4vw,2.3rem);
  --card-tag-size:clamp(.45rem,1.15vw,.62rem);
  --card-tag-track:.08em;
  --card-lift:-14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior:none}
body{
  background:var(--rink);
  color:var(--board);
  font-family:var(--body);
  font-size:17px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding:0 0 3rem;
}

/* ---- masthead ---- */
.board{
  background:var(--board);
  color:var(--rink);
  border-bottom:6px solid var(--edge);
  padding:var(--board-pad-top) 0 var(--board-pad-bottom);
}
.board .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mark{
  font-family:var(--display);font-weight:700;
  font-size:var(--mark-size);
  letter-spacing:.01em;line-height:.95;margin:0;
}
.mark span{color:var(--ice)}

/* Back link. Every page except the hub carries one as the first child of
   .board .wrap; it takes its own flex line, so the title and the
   right-hand slot still sit on one baseline the way they always have.
   The 44px minimum is the tap target on an iPad. The negative margins pull
   that box back over the wrap's row gap so the bar grows by the link's own
   height and not much more. */
.board-nav{flex:0 0 100%;margin:-.55rem 0 -.35rem}
.backlink{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;
  margin-left:-.2rem;padding:0 .2rem;
  font-family:var(--body);font-size:.92rem;font-weight:600;
  letter-spacing:.02em;color:var(--ice);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.backlink::before{content:"\2190";font-size:1.1em;line-height:1}
.backlink:hover{color:#fff;text-decoration:underline}

/* ---- the sorting deck ---- */
.rail{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(4px,1.1vw,10px);
  align-items:center;
  justify-content:center;
  min-height:var(--rail-min-height);
  padding:.75rem 0;
  overflow:visible;
}
.card{
  position:relative;
  flex:0 0 auto;
  width:var(--card-w);
  height:var(--card-h);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:3px;
  box-shadow:0 2px 0 rgba(16,36,58,.09);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;
  font-size:var(--card-size);
  color:var(--board);
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
  will-change:transform;
}
.card::after{
  content:attr(data-tag);
  position:absolute;top:6px;left:0;right:0;text-align:center;
  font-family:var(--body);font-size:var(--card-tag-size);
  font-weight:600;letter-spacing:var(--card-tag-track);color:#8FA6B8;
}

/* drag states. The transition timings here are what the drag code waits on
   before it commits a reorder, so changing them means changing that too. */
.card.sliding{transition:transform .19s cubic-bezier(.2,.75,.3,1)}
.card.dragging{
  z-index:10;
  transition:none;
  cursor:grabbing;
  box-shadow:0 16px 28px rgba(16,36,58,.3);
  border-color:var(--edge);
}
.card.settling{transition:transform .17s cubic-bezier(.3,.8,.4,1)}
.card.picked{transform:translateY(var(--card-lift));box-shadow:0 10px 18px rgba(16,36,58,.22);border-color:var(--edge);transition:transform .13s ease}
.card.lit{border-color:var(--gold);box-shadow:inset 0 0 0 3px rgba(192,134,43,.28),0 2px 0 rgba(16,36,58,.09)}
.card.dim{opacity:.32;transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){
  .card,.card.sliding,.card.settling,.card.picked{transition:none!important}
}

/* ---- buttons ---- */
.actions{display:flex;gap:.6rem;margin:1.2rem 0 0;flex-wrap:wrap}
.btn{
  font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:.02em;
  padding:.6rem 1.2rem;border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border:1.5px solid var(--edge);
}
.btn.primary{background:var(--edge);color:#fff}
.btn.ghost{background:var(--paper);color:var(--edge)}
.btn:disabled{opacity:.35;cursor:default}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- tokens: the balance chip and the +N toast ----
   Both are built by shared/tokens.js. The chip sits at the right end of
   the back-link line; on a page with no back link the script makes a
   line just for it. */
.board-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.board-nav.chip-only{justify-content:flex-end}
.coin{
  display:inline-block;width:1.05em;height:1.05em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE7A8 0,#E9B84C 45%,#B77A1E 100%);
  box-shadow:inset 0 0 0 .13em rgba(120,75,10,.35),0 1px 0 rgba(0,0,0,.25);
  vertical-align:-.15em;flex:0 0 auto;
}
.coin-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:0 .8rem 0 .65rem;
  border:1.5px solid rgba(143,196,224,.45);border-radius:999px;
  font-family:var(--display);font-size:1.05rem;font-weight:600;letter-spacing:.03em;
  color:var(--rink);text-decoration:none;-webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums;
}
.coin-chip .coin{font-size:1.1rem}
.coin-chip .coin-n{font-weight:700;font-size:1.2rem;color:#FFE7A8}
.coin-chip .coin-word{font-family:var(--body);font-size:.82rem;font-weight:500;color:var(--ice);letter-spacing:.02em}
.coin-chip:hover,.coin-chip:focus-visible{border-color:var(--gold);background:rgba(192,134,43,.12)}
.coin-chip.bump{animation:coin-bump .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes coin-bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

.coin-toast{
  position:fixed;left:50%;bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:50;
  display:flex;align-items:center;gap:.55rem;
  max-width:calc(100vw - 2rem);padding:.55rem .95rem .55rem .75rem;
  background:var(--board);color:var(--rink);
  border:1.5px solid var(--gold);border-radius:999px;
  box-shadow:0 12px 28px rgba(16,36,58,.32);
  font-family:var(--display);font-size:1.1rem;letter-spacing:.02em;
  opacity:0;pointer-events:none;
  transform:translate(-50%,1.2rem) scale(.92);
  transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.3,1.3);
}
.coin-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.coin-toast .coin{font-size:1.25rem}
.coin-toast .plus{font-size:1.45rem;font-weight:700;color:#FFE7A8}
.coin-toast .why{font-family:var(--body);font-size:.92rem;font-weight:500}
.coin-toast .bal{font-family:var(--body);font-size:.88rem;color:var(--ice);padding-left:.4rem;border-left:1px solid rgba(143,196,224,.4)}
.coin-toast.quiet{border-color:rgba(143,196,224,.5);font-family:var(--body);font-size:.92rem;font-weight:500;padding:.6rem 1rem}
@media (prefers-reduced-motion:reduce){
  .coin-toast{transition:opacity .15s ease;transform:translate(-50%,0)}
  .coin-chip.bump{animation:none}
}

/* ---- fraction input (shared/fraction-input.js) ----
   Top box over bottom box with a real bar between, and a whole-number box
   to the left that the script shows only for mixed numbers. Every box is
   a 44px target; the whole box stretches to the height of the stack so
   the group reads as one number. */
.frac-input{display:inline-flex;align-items:stretch;gap:.5rem;vertical-align:middle}
.frac-input input{
  width:3.3rem;min-height:44px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  border:1.5px solid var(--edge);border-radius:3px;padding:.1rem .2rem;
  background:#FFFDF8;color:var(--board);font-variant-numeric:tabular-nums;
}
.frac-input .fi-whole{width:3.5rem;font-size:1.9rem}
.frac-input .fi-whole[hidden]{display:none}
.fi-stack{display:flex;flex-direction:column;align-items:stretch;gap:.3rem}
.fi-bar{height:3px;background:var(--board);border-radius:2px}
.frac-input.miss input{border-color:var(--gold);background:#FBF0DF}
.frac-input.slip input{border-color:var(--gold);background:#FFF8E8}
.frac-input.ok input{border-color:var(--good);background:#EEF7F1}
.frac-input.off input{opacity:.5}
@keyframes frac-shake{
  15%{transform:translateX(-3px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)} 100%{transform:translateX(0)}
}
.frac-input.shake{animation:frac-shake .38s ease-in-out}
@media (prefers-reduced-motion:reduce){ .frac-input.shake{animation:none} }