/* Chouette ! — Fiches à imprimer.
 *
 * Paper looks like paper in both skins, so nothing here reads a theme
 * variable: the colours are literal black-on-white and the sheet is sized in
 * millimetres. Loading this sheet changes nothing until a preview is open —
 * every screen rule is scoped to .paper-layer, and the print rules only fire
 * at the printer.
 */

/* ------------------------------------------------------------- overlay -- */
.paper-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #5c6470;
  color: #111;
}

/* The app keeps running underneath; it just must not scroll behind the sheet. */
html[data-paper="on"], html[data-paper="on"] body { overflow: hidden; }

.paper-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1c2128;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.paper-bar .btn { padding: 10px 16px; font-size: 0.95rem; box-shadow: none; }
.paper-bar .btn:active { transform: none; }

.paper-hint {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}

.paper-scroll {
  flex: 1;
  overflow: auto;
  padding: 22px 12px 60px;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------- sheet -- */
.paper-doc {
  max-width: 190mm;
  margin: 0 auto 22px;
  background: #fff;
  color: #111;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5pt;
  line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}

.paper-page { padding: 16mm 14mm; }

.paper-head { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
.paper-head h1 { margin: 0; font-size: 16pt; letter-spacing: -0.01em; }
.paper-sub { margin: 3px 0 0; font-size: 10pt; color: #444; }

.paper-fields {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 10pt;
  color: #333;
}
.paper-fields span { display: flex; align-items: flex-end; gap: 6px; flex: 1; }
.paper-fields i { flex: 1; border-bottom: 1px solid #999; height: 1.1em; }

.paper-instruction { margin: 0 0 12px; font-size: 10pt; font-style: italic; color: #333; }

/* ---------------------------------------------------------------- quiz -- */
.paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14mm;
  row-gap: 9px;
}

.paper-q {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.paper-q b { min-width: 1.6em; font-weight: 600; color: #555; font-size: 10pt; }
.paper-prompt { white-space: nowrap; }
.paper-blank { flex: 1; border-bottom: 1px solid #999; height: 1.15em; min-width: 18mm; }
.paper-answer { flex: 1; border-bottom: 1px dotted #bbb; color: #1a5c32; font-weight: 600; }

/* ------------------------------------------------------------ word list -- */
.paper-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.paper-table th {
  text-align: left;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  border-bottom: 1.5px solid #111;
  padding: 0 6px 4px;
}
.paper-table td { padding: 3.5px 6px; border-bottom: 1px solid #e2e2e2; }
.paper-table tr { break-inside: avoid; page-break-inside: avoid; }
.paper-table .fr { font-weight: 600; }
.paper-table td:nth-child(2) { border-right: 1px solid #ccc; padding-right: 10px; }

/* --------------------------------------------------------------- cards -- */
.paper-doc-cards .paper-page { padding: 10mm; }

.paper-side {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: 4mm;
}

.paper-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 30mm;
  gap: 0;
}

.paper-card {
  border: 1px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4mm;
  font-size: 13pt;
  font-weight: 600;
  hyphens: auto;
}
/* An unused cell keeps its place in the grid but prints nothing: every real
   card still has its own four cut lines. */
.paper-card.is-blank { border-color: transparent; }

/* --------------------------------------------------------- conjugation -- */
.paper-conjs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6mm;
}

.paper-conj {
  border-collapse: collapse;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
}
.paper-conj caption {
  text-align: left;
  font-weight: 700;
  font-size: 10.5pt;
  padding-bottom: 3px;
  border-bottom: 1.5px solid #111;
  margin-bottom: 3px;
}
.paper-conj caption i { font-weight: 400; font-size: 8.5pt; color: #666; }
.paper-conj th {
  text-align: left;
  font-weight: 400;
  color: #555;
  font-size: 9.5pt;
  width: 34%;
  padding: 2.5px 4px 2.5px 0;
  white-space: nowrap;
}
.paper-conj td { padding: 2.5px 0; font-size: 10pt; }
.paper-blank-cell { border-bottom: 1px solid #aaa; }
.paper-conj .paper-answer { border: 0; }

/* --------------------------------------------------------------- print -- */
@page { margin: 14mm; }

@media print {
  /* Nothing but the sheets. The app, the toolbar and any stray toast go away
     so the page count matches what the teacher asked for. */
  html[data-paper="on"] body > *:not(.paper-layer) { display: none !important; }

  /* The app sizes itself to the window with height:100%. Chromium paginates
     past it anyway, but releasing it is the usual precaution and costs
     nothing — and it only applies while a preview is open, so the app's own
     layout is never touched. */
  html[data-paper="on"], html[data-paper="on"] body {
    overflow: visible;
    background: #fff;
    height: auto;
    min-height: 0;
  }

  /* The colourful skin's background glows are fixed, so they would reprint on
     every single page. */
  html[data-paper="on"] body::before,
  html[data-paper="on"] body::after { display: none !important; }

  .paper-layer { position: static; display: block; background: none; }
  .paper-bar { display: none !important; }
  .paper-scroll { overflow: visible; padding: 0; }

  .paper-doc {
    max-width: none;
    margin: 0;
    box-shadow: none;
    font-size: 11pt;
  }
  /* The margin box already provides the border, so the sheet fills the page. */
  .paper-page { padding: 0; }

  /* Every sheet after the first starts on its own page — as does each side of
     the flashcards, which is what makes the double-sided print line up. */
  .paper-doc + .paper-doc,
  .paper-doc-cards .paper-page + .paper-page { break-before: page; page-break-before: always; }

  .paper-card { border-color: #999; }
  .paper-answer { color: #000; }
}