/* Schema Architect (computer-science/schema-architect.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the question bar, then the database on the left and the
   design (or its SQL) 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 (as in Normal Form or Not?). */

.score-chip:empty{display:none}

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

/* the given tables: names and fields only */
.schema-grid{display:flex;flex-wrap:wrap;gap:10px}
.table-card{border:1px solid var(--line-strong);border-radius:5px;background:var(--paper);min-width:150px;max-width:300px;flex:1 1 150px;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}
.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);overflow-wrap:anywhere}
.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 design: a card per table, a row per field (name, type, key, foreign key) */
.sa-tables{display:flex;flex-direction:column;gap:10px}
.sa-table{border:1px solid var(--line-strong);border-radius:5px;background:var(--paper);overflow:hidden}
.sa-table .tname{font:700 12.5px/1.2 var(--font-mono);letter-spacing:.02em;background:var(--accent-deep);color:var(--on-accent);padding:6px 10px}
.sa-row{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(150px,1.3fr) auto minmax(140px,1.4fr);grid-template-areas:"name type key fk" "why why why why";gap:6px 10px;align-items:center;padding:6px 10px;border-top:1px solid var(--line)}
.sa-field{grid-area:name}
.sa-type{grid-area:type}
.pk-btn{grid-area:key}
.sa-fk{grid-area:fk}
.sa-row:first-of-type{border-top:0}
.sa-field{font:600 13px/1.25 var(--font-mono);color:var(--ink);overflow-wrap:anywhere}
.sa-field.is-pk{text-decoration:underline;text-underline-offset:3px}
.sa-type{display:flex;gap:6px;align-items:center}
.sa-row select,.sa-row input{font:13px/1.2 var(--font-mono);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:4px;padding:5px 6px;min-width:0}
.sa-row select{flex:1;width:100%}
.sa-row input{width:4.2em}
.sa-row select:focus-visible,.sa-row input:focus-visible,.pk-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pk-btn{font:700 11px/1 var(--font-mono);letter-spacing:.04em;padding:6px 8px;border-radius:4px;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;white-space:nowrap}
.pk-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sa-row.ok{background:var(--ok-tint)}
.sa-row.bad{background:var(--bad-tint)}
.sa-row .why{grid-area:why;font-size:13px;line-height:1.45;color:var(--ink-soft);margin:0}
.sa-row.bad .why::before{content:"✗ ";color:var(--bad);font-weight:700}
.sa-row.ok .why::before{content:"✓ ";color:var(--ok);font-weight:700}
.sa-row:disabled,.sa-locked .sa-row select,.sa-locked .sa-row input,.sa-locked .pk-btn{pointer-events:none}

/* the result: a summary, then the model answer */
.sa-result{border-top:1px solid var(--line);padding-top:12px;margin-top:12px;animation:cq-in .35s ease both}
.sa-result h3{margin:0 0 8px;font:700 15px/1.2 var(--font-display);color:var(--ink)}
.verdict-banner{padding:9px 12px;border-radius:5px;font-weight:700;font-size:14px;margin-bottom:10px}
.verdict-banner.good{background:var(--ok-tint);color:var(--ok)}
.verdict-banner.bad{background:var(--bad-tint);color:var(--bad)}
.verdict-banner.shown{background:var(--hint-tint);color:var(--ink)}
.score-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.score-tile{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:8px 10px}
.score-tile .n{font:700 17px/1.1 var(--font-mono);color:var(--ink)}
.score-tile .lbl{font-size:12px;color:var(--muted);margin-top:3px}
pre.ddl{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);font:13px/1.55 var(--font-mono);color:var(--ink);white-space:pre;overflow-x:auto}
pre.ddl .kw{color:var(--accent-deep);font-weight:700}
pre.ddl .tn{color:var(--accent-b-deep);font-weight:700}
pre.ddl .ph{color:var(--muted);font-style:italic}
pre.ddl .cm{color:var(--muted)}
.erd-wrap{margin-top:12px}

.sa-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;flex:none}
.sa-summary{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.sa-summary strong{color:var(--ink);font-family:var(--font-mono)}


/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:1100px){
  .sa-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"name name key" "type fk fk" "why why why"}
}
@media (max-width:900px),(max-height:620px){
  .sa-work{grid-template-columns:1fr;flex:none}
  .sa-scroll{overflow:visible}
}
@media (max-width:560px){
  .sa-work>.panel{padding:10px 12px}
  .sa-summary{margin-left:0;flex-basis:100%}
  .table-card{flex-basis:130px;min-width:130px}
  .score-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}