/* Interface chrome around the worksheet preview. Not part of the printed
   page — everything here is hidden by .no-print in print.css. */

:root {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f2f1ea;
  color: #1a1a1a;
}

.app-shell {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}

.app-sidebar {
  flex: 0 0 240px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  /* The sidebar is its own scroll container, pinned to the viewport, so
     the Print/Export block below can stick to its bottom edge instead of
     scrolling out of reach once the Text settings panel is open
     (workstream I5). */
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.sidebar-actions {
  position: sticky;
  bottom: -12px; /* the sidebar's own padding; stick flush to its edge */
  margin: 12px -12px -12px;
  padding: 8px 12px 12px;
  background: #ffffff;
  border-top: 1px solid #ddd;
  /* On a 768 px school laptop, a long fit line and a few notices made this
     block cover most of the settings above it. It never takes more than
     half the screen; past that the notices scroll inside it. */
  max-height: 50vh;
  overflow-y: auto;
  box-sizing: border-box;
  /* Only ever a second scrollbar inside the sidebar's own: keep it slight. */
  scrollbar-width: thin;
}

.app-sidebar label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.app-sidebar select,
.app-sidebar input[type='text'],
.app-sidebar input[type='file'] {
  display: block;
  width: 100%;
  padding: 6px;
  font-size: 13px;
  margin-bottom: 4px;
  box-sizing: border-box;
}

/* The sidebar's display: block rules above would otherwise beat the
   hidden attribute (e.g. the title picker, shown only when a theme/level
   cell has more than one text). */
.app-sidebar [hidden] {
  display: none;
}

.app-sidebar button {
  display: block;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}

.app-sidebar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.candidate-count {
  font-size: 12px;
  color: #555;
}

.settings-panel {
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

.settings-panel summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.settings-panel input[type='number'],
.settings-panel input[type='text'] {
  display: block;
  width: 100%;
  padding: 5px;
  font-size: 13px;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.settings-panel label {
  margin-top: 8px;
}

.storage-status {
  font-size: 12px;
  color: #8a1c14;
  margin-top: 6px;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 400 !important;
  cursor: pointer;
}

.panel-heading {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

#packet-list {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  font-size: 12px;
}

#packet-list li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

#packet-list li .packet-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#packet-list li.packet-empty {
  border-bottom: none;
  color: #555;
  font-style: italic;
}

#packet-list li button {
  width: auto;
  margin: 0;
  padding: 2px 6px;
  font-size: 12px;
}

.fit-indicator {
  margin-top: 12px;
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
  background: #eef4ea;
  color: #205020;
}

.fit-indicator.is-overflow {
  background: #fbe9e7;
  color: #8a1c14;
}

/* 'extends' (more than one page) is information, not an error — a red
   is-overflow style would wrongly suggest something is broken (upgrade
   blueprint v3, workstream A). */
.fit-indicator.is-extends {
  background: #fef3e2;
  color: #8a5a00;
}

/* Advisory notices (worksheet/advice.js): information, never an error. */
.fit-notices {
  margin: 6px 0 0;
  padding: 6px 8px 6px 24px;
  border-radius: 4px;
  font-size: 13px;
  background: #eef2f8;
  color: #1f3a5f;
}

.fit-notices[hidden] {
  display: none;
}

/* Grayscale preview (view only): an approximation of a mono printer —
   CSS grayscale() and a printer driver don't convert identically. */
#preview.is-grayscale {
  filter: grayscale(1);
}

.preview-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#own-text-panel textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  font: inherit;
  font-size: 13px;
  margin-bottom: 4px;
}

#btn-own-delete[hidden] {
  display: none;
}

#copy-target-row[hidden],
#answers-row[hidden] {
  display: none !important;
}

/* Above the sheet while the teacher picks words (gap-fill): screen only,
   outside #preview and #print-surface, so it is never on paper. */
.preview-hint {
  position: sticky;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 210mm;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  background: #fef9c3;
  color: #713f12;
}

.preview-hint[hidden] {
  display: none;
}

.cloze-controls {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #d6d3d1;
  border-radius: 4px;
}

.cloze-controls[hidden] {
  display: none;
}

.cloze-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.cloze-row label {
  margin: 0;
  white-space: nowrap;
}

.cloze-row input {
  width: 3.5em;
  flex: none;
  margin: 0;
}

.cloze-row button {
  flex: 1;
}

.cloze-status {
  font-size: 12px;
  margin-top: 6px;
  color: #44403c;
}

.cloze-status.is-refused {
  color: #8a1c14;
}

/* Words are clickable only while picking gaps; the focus ring is for the
   keyboard path (arrow keys + Enter/Space). */
#preview.is-picking .ws-sentence [data-w] {
  cursor: pointer;
}

#preview.is-picking .ws-sentence [data-w]:hover {
  background: rgba(37, 99, 235, 0.12);
}

#preview.is-picking .ws-sentence [data-w]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* Screen-only simulation of the printed A4 sheet; print.css removes this
   padding because @page already reserves the 20mm margin. */
.page-frame {
  width: 210mm;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 20mm;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  /* Scaled down to fit the available width on smaller screens
     (main.js sets --preview-scale from a ResizeObserver; workstream I6).
     `zoom` rather than `transform` so the layout box shrinks with the
     content — no phantom scroll area. Safe because nothing is ever
     measured in #preview: layout/measure.js uses its own unscaled
     off-screen surface (blueprint v2 §8.4), and print.css hides this
     element entirely. Browsers without CSS zoom just show it unscaled. */
  zoom: var(--preview-scale, 1);
}

/* Off-screen twin of the preview, rendered so print.css has a ready DOM to
   reveal — kept out of the screen viewport without display:none. */
#print-surface {
  position: fixed;
  top: 0;
  left: -10000px;
}