/* See It, Say It: shared tokens and components for the handoff mockups.
   Direction: Blocky Lobby styling (A) + Reason Cards (C). */

@font-face { font-family: 'Lilita One'; src: url('fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-600-normal.woff2') format('woff2'); font-weight: 600; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-800-normal.woff2') format('woff2'); font-weight: 800; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-900-normal.woff2') format('woff2'); font-weight: 900; }

:root {
  /* ground + surfaces */
  --sky: #4AA8F0;
  --sky-deep: #1F5FAF;
  --panel: #FFFFFF;
  --bevel: #B9CCE0;
  --chip: #E6EDF4;
  --plate: #EEF3F8;
  --plate-line: #DCE5EE;
  /* ink */
  --ink: #14213D;
  --ink-2: #4A5A75;
  --ink-3: #5D6E89;
  /* action */
  --go: #2EBD59;
  --go-deep: #1E8F40;
  --sun: #FFC935;
  --sun-deep: #B37A00;
  --sun-soft: #FFF1C2;
  /* reason categories (card band color; never used for mastery) */
  --cat-given: #8A97A8;      /* ink text */
  --cat-def: #2F6FDB;        /* white text */
  --cat-prop: #12A594;       /* ink text */
  --cat-post: #6D3FD9;       /* white text */
  --cat-thm: #FF8A3D;        /* ink text */
  /* mastery finishes */
  --gold-1: #F2C94C;
  --gold-2: #C8961E;
  --gold-ink: #6B4A00;
  /* shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --bevel-sm: 4px;
  --bevel-md: 5px;
  --bevel-lg: 7px;
  --font-ui: 'Nunito', 'DejaVu Sans', 'Noto Sans Math', system-ui, sans-serif;
  --font-display: 'Lilita One', 'Nunito', 'DejaVu Sans', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--sky); }
button { font-family: inherit; cursor: pointer; color: inherit; }
.display { font-family: var(--font-display); letter-spacing: 0.5px; font-weight: 400; }

/* ---------- surfaces ---------- */
.panel { background: var(--panel); border-radius: var(--r-lg); border-bottom: var(--bevel-lg) solid var(--bevel); }
.pill { background: var(--panel); border-radius: var(--r-md); border-bottom: var(--bevel-sm) solid var(--bevel); }
.plate {
  position: relative; border-radius: 16px; overflow: hidden;
  background-color: var(--plate);
  background-image: linear-gradient(var(--plate-line) 2px, transparent 2px), linear-gradient(90deg, var(--plate-line) 2px, transparent 2px);
  background-size: 32px 32px;
}

/* ---------- buttons: the bevel IS the press affordance ---------- */
.btn {
  border: 0; border-radius: var(--r-md); font-weight: 800; min-height: 44px;
  border-bottom: var(--bevel-md) solid var(--bevel); background: var(--chip); color: var(--ink);
  transition: transform 80ms ease, border-bottom-width 80ms ease;
}
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn:focus-visible, .rcard:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.btn--go { background: var(--go); border-bottom-color: var(--go-deep); color: #FFFFFF; }
.btn--sun { background: var(--sun); border-bottom-color: var(--sun-deep); color: var(--ink); }
.btn--ink { background: var(--ink); border-bottom-color: #000000; color: #FFFFFF; }
.btn--ghost { background: var(--panel); border: 2px dashed #8193AD; border-bottom: 2px dashed #8193AD; }

/* ---------- math chips ---------- */
.mchip { display: inline-block; background: var(--sun-soft); border: 2px solid var(--sun-deep); border-radius: var(--r-sm); padding: 2px 10px; font-weight: 900; }

/* ---------- step rows ---------- */
.step { display: flex; align-items: center; gap: 10px; border-radius: var(--r-md); padding: 8px 12px; min-height: 44px; }
.step--done { background: #EAF8EF; }
.step--todo { border: 3px dashed var(--bevel); color: var(--ink-3); }
.step__n { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-sm); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.step--done .step__n { background: var(--go); color: #FFFFFF; }
.step__s { font-weight: 900; font-size: 18px; flex-grow: 1; }
.step__tag { font-weight: 800; font-size: 13px; border-radius: 8px; padding: 4px 8px; }

/* ---------- reason cards ---------- */
.rcard {
  --cat: var(--cat-given); --cat-text: var(--ink); --glow: rgba(138,151,168,.55);
  position: relative; isolation: isolate; overflow: hidden; text-align: left; padding: 0;
  display: flex; flex-direction: column; background: var(--panel); color: var(--ink);
  border: 3px solid var(--ink); border-bottom-width: 7px; border-radius: 16px;
}
.rcard > * { position: relative; z-index: 2; }
.rcard__band { background: var(--cat); color: var(--cat-text); font-weight: 900; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rcard__name { font-weight: 900; font-size: 17px; line-height: 1.15; padding: 10px 10px 0; }
.rcard__art { margin: auto 10px 6px; height: 64px; display: flex; align-items: center; justify-content: center; }
.rcard__foot { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; font-weight: 800; font-size: 11px; color: var(--ink-2); }
.rcard__bar { flex-grow: 1; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.rcard__bar > i { display: block; height: 100%; background: var(--go); border-radius: 3px; }
.tier { font-weight: 900; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-radius: 6px; padding: 2px 6px; background: rgba(255,255,255,.9); color: var(--ink); }

/* small card: used as quick picks inside the active step */
.rcard--sm { min-height: 76px; border-bottom-width: 5px; border-radius: 14px; }
.rcard--sm .rcard__band { font-size: 10px; padding: 4px 8px; }
.rcard--sm .rcard__name { font-size: 15px; padding: 6px 8px 8px; }
.rcard.is-picked { outline: 4px solid var(--ink); outline-offset: 2px; transform: translateY(-4px); }

.cat-given { --cat: var(--cat-given); --cat-text: var(--ink); --glow: rgba(138,151,168,.6); }
.cat-def   { --cat: var(--cat-def);   --cat-text: #FFFFFF;    --glow: rgba(47,111,219,.55); }
.cat-prop  { --cat: var(--cat-prop);  --cat-text: var(--ink); --glow: rgba(18,165,148,.55); }
.cat-post  { --cat: var(--cat-post);  --cat-text: #FFFFFF;    --glow: rgba(109,63,217,.55); }
.cat-thm   { --cat: var(--cat-thm);   --cat-text: var(--ink); --glow: rgba(255,138,61,.6); }

/* locked silhouette */
.rcard--locked { background: #DCE4EE; border-style: dashed; color: var(--ink-3); }
.rcard--locked .rcard__band { background: #B9C6D6; color: var(--ink); }

/* ---------- mastery finishes ----------
   Tier 1 Shine: a light sweep every few seconds.
   Tier 2 Glow: shine + soft breathing glow in the card's category color.
   Tier 3 Gold: gold foil frame + warm sweep + twinkles.
   Tier 4 Prismatic: animated rainbow foil frame + holographic sheen + tilt on hover. */

.t-shine::after, .t-glow::after, .t-gold::after, .t-prism::after {
  content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 46%, rgba(190,210,235,.55) 50%, transparent 54%);
  transform: translateX(-55%); animation: ssi-sweep 3.6s ease-in-out infinite;
}
@keyframes ssi-sweep { 0%, 50% { transform: translateX(-55%); } 100% { transform: translateX(55%); } }

.t-glow { box-shadow: 0 0 0 3px var(--cat), 0 0 22px 6px var(--glow); animation: ssi-breathe 2.6s ease-in-out infinite; }
@keyframes ssi-breathe { 0%, 100% { box-shadow: 0 0 0 3px var(--cat), 0 0 14px 2px var(--glow); } 50% { box-shadow: 0 0 0 3px var(--cat), 0 0 26px 8px var(--glow); } }

.t-gold {
  border-color: var(--gold-ink);
  background: linear-gradient(165deg, #FFF8DF 0%, #FFFFFF 38%, #FFF3CC 100%);
  box-shadow: inset 0 0 0 3px var(--gold-1), inset 0 0 0 5px #FFFBEA, 0 0 18px 2px rgba(242,201,76,.55);
}
.t-gold::after { background: linear-gradient(115deg, transparent 42%, rgba(255,214,90,.75) 50%, transparent 58%); animation-duration: 3s; }
.t-gold .tier { background: var(--gold-1); color: var(--gold-ink); }

@property --ssi-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.t-prism {
  border-color: transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(from var(--ssi-a), #FF5C8A, #FFC935, #3DDC97, #3BA4F5, #9B5DE5, #FF5C8A) border-box;
  animation: ssi-spin 4s linear infinite;
  box-shadow: 0 0 20px 3px rgba(155,93,229,.35);
}
@keyframes ssi-spin { to { --ssi-a: 360deg; } }
.t-prism::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,92,138,.35) 0%, rgba(255,201,53,.35) 6%, rgba(61,220,151,.35) 12%, rgba(59,164,245,.35) 18%, rgba(155,93,229,.35) 24%, rgba(255,92,138,.35) 30%);
  background-size: 300% 300%; animation: ssi-holo 6s linear infinite; mix-blend-mode: multiply;
}
@keyframes ssi-holo { to { background-position: 300% 0; } }
.t-prism::after { background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.9) 50%, transparent 56%); }
.t-prism .tier { background: linear-gradient(90deg, #FF5C8A, #FFC935, #3DDC97, #3BA4F5, #9B5DE5); color: var(--ink); }
.t-prism:hover { transform: perspective(600px) rotateX(6deg) rotateY(-8deg); }

/* twinkles for gold + prismatic (decorative spans) */
.spark { position: absolute; z-index: 3; width: 12px; height: 12px; pointer-events: none; animation: ssi-twinkle 2.2s ease-in-out infinite; }
.spark::before { content: ""; position: absolute; inset: 0; background: #FFFFFF; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255,200,60,.9)); }
@keyframes ssi-twinkle { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }

/* "needs polish": recent accuracy fell below the tier's bar. Finish stays, motion pauses. */
.is-dull::after, .is-dull::before, .is-dull { animation-play-state: paused !important; }
.is-dull { filter: saturate(.35); }

@media (prefers-reduced-motion: reduce) {
  .t-shine::after, .t-glow::after, .t-gold::after, .t-prism::after { animation: none; transform: translateX(0); opacity: .35; }
  .t-glow, .t-prism, .t-prism::before, .spark { animation: none; }
  .spark { opacity: 1; transform: none; }
  .t-prism:hover { transform: none; }
}

/* ---------- CU2 (W8, FIX-BRIEF-CALCULUS-1 CU-8 to CU-10): the tag apart from the sentence, the Reading color, the shortest proof whole ---------- */
:root { --cat-read: #F27BA8; }   /* ink text */
.cat-read { --cat: var(--cat-read); --cat-text: var(--ink); --glow: rgba(242,123,168,.6); }

/* CU-8: a reason tag is a small label of its own (the category word) and then the sentence; never one run of words */
.step__tag.sisi-tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.step__tag.sisi-tag .sisi-tag__cat { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--cat, var(--bevel)); color: var(--cat-text, var(--ink)); font-size: 10px; font-weight: 900; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }
.step__tag.sisi-tag .sisi-tag__name { font-weight: 800; }
.step__tag.sisi-tag .sisi-tag__abbr { margin-left: 0; }

/* CU-10: the shortest proof takes the height its rows need; when the column is shorter than that it scrolls, with a bar you can see */
#shortest[data-open="true"] { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
#shortest .sisi-shortest__cols { align-items: start; }
#shortest::-webkit-scrollbar { width: 12px; }
#shortest::-webkit-scrollbar-track { background: var(--chip); border-radius: 8px; }
#shortest::-webkit-scrollbar-thumb { background: var(--bevel); border: 2px solid var(--chip); border-radius: 8px; }
.calc-exam__from { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
#exam-panel .calc-exam__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 2px; }
#exam-panel .calc-exam__head h3 { margin: 0; }
#exam-panel .calc-exam__actions { display: flex; align-items: center; gap: 8px; margin: 0; }
#exam-panel .calc-exam__actions .btn { min-height: 36px; height: 36px; padding: 0 12px; font-size: 13px; }
#exam-panel .calc-exam__s { margin: 4px 0; }
/* CU-10: in the shortest-proof columns a row is the number and the sentence on one line and its reason tag on the line under, across the row */
.sisi-shortest__col .step { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.sisi-shortest__col .step .sisi-step__body { display: contents; }
.sisi-shortest__col .step .step__tag { grid-column: 1 / -1; justify-self: start; }

/* CU2 (CX2 request): the empty entry row on a short Say it panel (the definitions path at 1366 by 768) is compact, so its whole box shows above "Add a step first." */
#steps > li.sisi-step--active:has(> .sisi-step__body > .sisi-step__empty) { padding: 4px 10px; border-bottom-width: 3px; min-height: 0; }
.sisi-step__empty { font-size: 14px; font-weight: 700; line-height: 1.2; }
#say-panel #steps { gap: 6px; }