/* Normal Form or Not (computer-science/normal-form-or-not.php). The page chrome is the one-screen layout
   in /css/resource.css; the answer options use its challenge styles (.cq-opt). On a laptop or desktop:
   the question bar, then the database on the left and the answer on the right, filling what's left
   (each scrolls inside its panel). On smaller screens they stack and the page scrolls. Theme tokens
   only, except the E-R diagram, which is a fixed dark "blueprint" in both themes. */


/* the database on the left, the answer on the right */
.nf-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.nf-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.nf-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.source-tag{background:var(--panel-2);margin-bottom:6px}
.nf-scenario{margin:2px 0 12px;color:var(--ink-soft);font-size:14.5px;line-height:1.55;max-width:80ch}

/* tables as cards: the name, then the attributes (keys underlined, foreign keys tagged) */
.schema-grid,.stage-tables{display:flex;flex-wrap:wrap;gap:10px}
.table-card{border:1px solid var(--line-strong);border-radius:5px;background:var(--paper);min-width:170px;max-width:320px;flex:1 1 170px;overflow:hidden}
.table-card .tname{font:700 12.5px/1.2 var(--font-mono);letter-spacing:.02em;background:var(--accent-deep);color:var(--on-accent);padding:6px 10px;overflow-wrap:anywhere}
.table-card ul{list-style:none;margin:0;padding:7px 10px 9px;font:12.5px/1.35 var(--font-mono)}
.table-card li{padding:2px 0;color:var(--ink-soft);display:flex;align-items:baseline;gap:6px;overflow-wrap:anywhere}
.table-card .attr-pk{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fk-tag{font:700 9px/1.2 var(--font-body);color:var(--accent-deep);background:var(--accent-tint);border-radius:3px;padding:1px 4px;letter-spacing:.03em}
.sample-wrap{margin-top:12px}
.stage-scroll{overflow-x:auto}
table.sample{border-collapse:collapse;width:100%;font:12.5px/1.3 var(--font-mono)}
table.sample th,table.sample td{border:1px solid var(--line);padding:5px 8px;text-align:left;white-space:nowrap}
table.sample th{background:var(--accent-tint);color:var(--accent-deep);font:700 10.5px/1.2 var(--font-display);text-transform:none;letter-spacing:.02em}
.cap{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45}

/* the answer: the parts, one after another */
.nf-answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.nf-pips{display:flex;gap:5px}
.nf-pips i{width:22px;height:6px;border-radius:3px;background:var(--line-strong)}
.nf-pips i.now{background:var(--accent)}
.nf-pips i.first{background:var(--ok)}
.nf-pips i.later{background:var(--ok-tint);box-shadow:inset 0 0 0 1px var(--ok)}
.nf-part{margin-bottom:14px}
.nf-part-q{margin:0 0 10px;font:600 clamp(16px,1.35vw,19px)/1.4 var(--font-display);color:var(--ink);text-wrap:pretty}
.nf-part-q .n{display:block;font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nf-part .cq-opts{grid-template-columns:1fr;gap:8px}
.nf-part .cq-opt{font-size:14.5px;padding:10px 14px}
.nf-part .cq-opt u{text-underline-offset:2px}
.nf-part.done .cq-opt:not(.right){display:none}
.nf-part .cq-working{margin-top:8px}
.nf-part .cq-working ol{font-size:14px}
.nf-part .cq-working.shown{border-left-color:var(--hint)}
.nf-part .cq-working.shown h4{color:var(--hint)}
.nf-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;flex:none}
.nf-summary{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.nf-summary strong{color:var(--ink);font-family:var(--font-mono)}

/* the worked answer */
.nf-worked{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;animation:cq-in .35s ease both}
.nf-worked h3{margin:0 0 10px;font:700 15px/1.2 var(--font-display);color:var(--ink)}
.verdict-banner{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:5px;font-weight:700;font-size:14px;margin-bottom:10px}
.verdict-banner.is-3nf{background:var(--ok-tint);color:var(--ok)}
.verdict-banner.not-3nf{background:var(--bad-tint);color:var(--bad)}
.checklist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.checklist li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft)}
.checklist .mark{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:1.5px solid var(--line-strong);color:var(--muted)}
.checklist .mark.yes{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.checklist .mark.no{background:var(--bad-tint);border-color:var(--bad);color:var(--bad)}
.checklist .mark.na{background:var(--panel-2)}
.reveal-body p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 10px;max-width:78ch}
.reveal-body p strong{color:var(--ink)}
.nf-note{font-size:12.5px;color:var(--muted);font-style:italic;margin:6px 0 10px}

/* the walkthrough: a button per step, the tables, then what the step did */
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.step-btn{font:700 12.5px/1 var(--font-body);border-radius:999px;padding:7px 13px 7px 7px;cursor:pointer;border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}
.step-btn .step-num{width:19px;height:19px;border-radius:50%;background:var(--line-strong);color:var(--panel);font:700 10.5px/1 var(--font-mono);display:flex;align-items:center;justify-content:center;flex:none}
.step-btn.active{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-tint)}
.step-btn.active .step-num{background:var(--accent);color:var(--on-accent)}
.step-btn.done{border-color:var(--ok);color:var(--ok)}
.step-btn.done .step-num{background:var(--ok);color:var(--on-viz)}
.step-btn:disabled{opacity:.45;cursor:not-allowed}
.step-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.step-btn.playing{animation:stepPulse 1s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-tint)}50%{box-shadow:0 0 0 6px var(--accent-tint)}}
.stage-stage{min-height:40px}
.new-table-card{animation:cardIn .45s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
li.field-flag{animation:flagPulse .65s ease-in-out 3;border-radius:3px}
@keyframes flagPulse{0%,100%{background:transparent;box-shadow:none}50%{background:var(--bad-tint);box-shadow:0 0 0 2px var(--bad) inset}}
li.field-flag-ok{animation:flagPulseOk .6s ease-in-out 2;border-radius:3px}
@keyframes flagPulseOk{0%,100%{background:transparent;box-shadow:none}50%{background:var(--ok-tint);box-shadow:0 0 0 2px var(--ok) inset}}
td.col-flag{background:var(--accent-tint)}
td.col-flag-on{animation:cellPulse .65s ease-in-out 3}
@keyframes cellPulse{0%,100%{background:var(--accent-tint);box-shadow:none}50%{background:var(--bad-tint);box-shadow:0 0 0 2px var(--bad) inset}}
tr.row-in{animation:rowIn .35s ease both}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field-ghost{position:fixed;z-index:200;font:700 11.5px/1 var(--font-mono);background:var(--accent);color:var(--on-accent);padding:4px 9px;border-radius:4px;pointer-events:none;display:flex;align-items:center;box-shadow:0 8px 22px -8px color-mix(in srgb, var(--screen-bg) 45%, transparent);transition:left .65s cubic-bezier(.3,.8,.3,1),top .65s cubic-bezier(.3,.8,.3,1),opacity .3s ease}
.stage-note-area{margin-top:12px}
.stage-head-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.stage-badge{font:700 10.5px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-radius:3px;padding:3px 8px}
.stage-note-area h4{font:700 14px/1.3 var(--font-body);margin:0;color:var(--ink)}
.stage-note-area p{font-size:14px;color:var(--ink-soft);margin:0 0 8px;max-width:78ch;line-height:1.6}
.erd-wrap{margin-top:14px}
.erd-wrap.erd-in{animation:cardIn .45s ease both}


/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:900px),(max-height:620px){
  .nf-work{grid-template-columns:1fr;flex:none}
  .nf-scroll{overflow:visible}
}
@media (max-width:560px){
  .nf-work>.panel{padding:10px 12px}
  .nf-summary{margin-left:0;flex-basis:100%}
  .table-card{flex-basis:140px;min-width:140px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}