/* Versed Teach — /worksheets. Loaded after teach.css, which supplies the colours, the buttons,
   the inputs and the toast; everything here is either the maker's own controls or the printed
   sheet. The sheet is built to look like paper on screen so that what a teacher sees is what
   comes out of the printer, and the print rules below are the ones that actually matter. */

/* ---------- the maker ---------- */
.ws-lead { max-width: 60ch; }
.ws-ways { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ws-ways button { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); color: var(--muted); font-weight: 700; font-size: .85rem; }
.ws-ways button:hover { color: var(--text); border-color: var(--violet); }
.ws-ways button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.ws-way { margin-bottom: .25rem; }
.ws-drop { display: block; width: 100%; text-align: left; padding: 1rem; border: 2px dashed var(--line); border-radius: 14px; background: var(--bg2); color: var(--muted); }
.ws-drop:hover { border-color: var(--lime); color: var(--text); }
.ws-drop b { display: block; color: var(--text); font-family: var(--display); margin-bottom: .2rem; }
.ws-file { display: none; }
.ws-shot { display: block; max-height: 140px; width: auto; border-radius: 10px; border: 1px solid var(--line); margin-top: .6rem; }
.ws-kinds { margin-top: 1rem; }
.ws-kinds .field { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ws-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.ws-chips button { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); color: var(--muted); font-weight: 700; font-size: .85rem; }
.ws-chips button:hover { color: var(--text); border-color: var(--violet); }
.ws-chips button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.ws-chips .ws-mix { margin-right: .35rem; }
.ws-opts { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 1rem; }
.ws-opts label.field { margin-top: 0; }
.ws-checks { display: grid; gap: .5rem; margin: 1rem 0; }
.ws-checks label { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted); font-size: .92rem; cursor: pointer; }
.ws-checks input { margin-top: .25rem; accent-color: var(--lime); width: 18px; height: 18px; flex: none; }
.ws-go { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.ws-left { color: var(--dim); font-size: .82rem; }
.ws-say { color: var(--muted); font-size: .85rem; margin-top: .9rem; max-width: 62ch; }
.ws-err { color: var(--red); font-weight: 600; margin-top: .75rem; }
.ws-wait { color: var(--lime); font-weight: 700; margin-top: .75rem; }
.ws-signin { border-color: var(--pink); }

/* ---------- what comes back, on screen ---------- */
.ws-acts { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 1rem; }
.ws-tip { color: var(--dim); font-size: .8rem; margin: 0 0 1rem; }
.ws-sheet {
  background: #fff; color: #111; border-radius: 10px; padding: 2rem 2.2rem;
  margin: 0 auto 1.5rem; max-width: 820px; box-shadow: var(--shadow);
  font-family: var(--body); line-height: 1.5;
}
.ws-sheet h2 { font-family: var(--display); font-size: 1.35rem; color: #111; margin-bottom: .5rem; }
.ws-fill { display: flex; gap: 1.5rem; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: .5rem; margin-bottom: .35rem; color: #111; font-size: .9rem; }
.ws-fill span { flex: 1 1 30%; white-space: nowrap; }
.ws-fill i { display: inline-block; border-bottom: 1px solid #777; min-width: 5.5rem; font-style: normal; }
.ws-said { color: #333; font-size: .92rem; margin: .6rem 0 1.2rem; }
.ws-qs { list-style: none; counter-reset: q; }
.ws-qs > li { counter-increment: q; position: relative; padding-left: 2rem; margin-bottom: 1.1rem; break-inside: avoid; }
.ws-qs > li::before { content: counter(q) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: #111; }
.ws-q { color: #111; }
.ws-choices { list-style: none; margin: .45rem 0 0; display: grid; gap: .3rem; }
.ws-choices li { display: flex; gap: .5rem; color: #111; }
.ws-choices .ws-letter { font-weight: 700; flex: none; }
.ws-tf { margin-top: .4rem; color: #111; letter-spacing: .06em; }
.ws-rules { margin-top: .5rem; }
.ws-rules div { border-bottom: 1px solid #aaa; height: 1.7rem; }
.ws-box { margin-top: .5rem; border: 1px solid #aaa; border-radius: 4px; }
.ws-key { border-top: 3px solid #111; }
.ws-key .ws-qs > li { margin-bottom: .6rem; }
.ws-ans { color: #111; font-weight: 600; white-space: pre-wrap; }
.ws-note { color: #444; font-size: .86rem; font-style: italic; margin-top: .2rem; }
.ws-echo { display: block; color: #555; font-size: .86rem; margin-bottom: .1rem; }
[contenteditable="true"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 3px; }
[contenteditable="true"]:empty::before { content: attr(data-say); color: #999; }

@media (max-width: 640px) {
  .ws-sheet { padding: 1.25rem 1rem; border-radius: 8px; }
  .ws-fill span { flex: 1 1 100%; }
  .ws-acts .btn { flex: 1 1 auto; }
}

/* ---------- on paper ---------- */
/* teach.css prints the class grid landscape; a worksheet is a portrait page. This file is loaded
   after it, so this @page wins. Nothing else on the page survives: the maker, the header, the
   footer and the strip are all .no-print or hidden by teach.css already. */
@media print {
  @page { size: portrait; margin: 14mm 13mm; }
  .ws-acts, .ws-tip, .no-print, #vbar { display: none !important; }
  body { padding-top: 0 !important; }
  .wrap { max-width: none; padding: 0; }
  .ws-sheet {
    background: #fff !important; color: #000 !important; box-shadow: none; border-radius: 0;
    padding: 0; margin: 0; max-width: none; font-size: 11pt; line-height: 1.45;
  }
  .ws-sheet h2 { font-size: 15pt; color: #000 !important; }
  .ws-fill, .ws-q, .ws-choices li, .ws-tf, .ws-ans { color: #000 !important; }
  .ws-fill { border-bottom-color: #000; font-size: 10pt; }
  .ws-said { color: #222 !important; font-size: 10pt; }
  .ws-qs > li { margin-bottom: 6mm; }
  .ws-rules div { height: 8mm; border-bottom: 1px solid #999; }
  .ws-box { border: 1px solid #999; }
  .ws-key { break-before: page; page-break-before: always; border-top: 0; margin-top: 0; }
  .ws-key .ws-qs > li { margin-bottom: 3mm; }
  .ws-note { color: #333 !important; }
  .ws-echo { color: #444 !important; }
  [contenteditable="true"] { outline: 0 !important; }
}