/* Direction C "Libreta": the order is a note; the margin answers. Prefix py-, screen prefix py-lib-. */
.py-screen.py-lib {
  --py-page-bg: light-dark(oklch(0.99 0.003 230), oklch(0.235 0.02 250));
  --py-grid:    light-dark(oklch(0.88 0.03 230), oklch(0.33 0.03 240));
  --py-graphite:light-dark(oklch(0.34 0.012 260), oklch(0.90 0.01 250));
  --py-margin:  light-dark(oklch(0.64 0.16 15), oklch(0.68 0.14 15));
  --py-check:   light-dark(oklch(0.50 0.11 165), oklch(0.80 0.11 165));
  --py-ask:     light-dark(oklch(0.56 0.13 70), oklch(0.83 0.12 80));
  --py-line: 2rem; /* one written line = two squares of the grid */
  background: var(--py-desk);
}

.py-screen.py-lib .py-lib-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--py-2) var(--py-5); }
.py-screen.py-lib .py-lib-title { --py-casl: 1; font-size: var(--py-s-3); font-weight: 750; letter-spacing: -0.01em; }
.py-screen.py-lib .py-lib-pager { display: inline-flex; align-items: center; gap: var(--py-2); margin-inline-start: auto; }
.py-screen.py-lib .py-lib-pager b { --py-casl: 1; font-weight: 650; }

/* The notebook spread: the note on squared paper, the margin with its marks */
.py-screen.py-lib .py-lib-spread {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
  background: var(--py-page-bg);
  border-radius: 4px 4px 4px 4px;
  box-shadow: var(--py-shadow-sheet);
  overflow: clip;
}
.py-screen.py-lib .py-lib-note {
  position: relative;
  padding: var(--py-5) var(--py-5) var(--py-6);
  background-image:
    linear-gradient(var(--py-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--py-grid) 1px, transparent 1px);
  background-size: 1rem 1rem;
  background-position: 0 calc(var(--py-5) - 1px);
}
.py-screen.py-lib .py-lib-note label { /* in flow, 1rem per line and 1rem below, so the written lines stay on the grid */
  display: block; inline-size: fit-content; margin: 0 0 1rem auto;
  font-size: var(--py-s--1); line-height: 1rem; color: var(--py-ink-soft); background: var(--py-page-bg);
}
.py-screen.py-lib .py-lib-text {
  --py-casl: 1;
  display: block; inline-size: 100%;
  min-block-size: calc(var(--py-line) * 12);
  field-sizing: content;
  border: 0; outline-offset: 6px; resize: none; overflow: hidden;
  background: transparent;
  font-size: 1.3rem; font-weight: 520; line-height: var(--py-line);
  color: var(--py-graphite);
  white-space: pre; /* no wrapping: each line keeps its row in the margin */
  caret-color: var(--py-margin);
}

.py-screen.py-lib .py-lib-margin {
  border-inline-start: 2px solid var(--py-margin);
  box-shadow: inset 3px 0 0 color-mix(in oklch, var(--py-margin) 35%, transparent);
  padding: var(--py-5) var(--py-4) var(--py-5) var(--py-5);
  display: grid; align-content: start; gap: var(--py-5);
}
.py-screen.py-lib .py-lib-marks { list-style: none; margin: 0; padding: 0; }
.py-screen.py-lib .py-lib-marks li {
  block-size: var(--py-line); display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--py-2);
  font-size: var(--py-s--1); white-space: nowrap;
}
.py-screen.py-lib .py-lib-marks li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.py-screen.py-lib .py-lib-mark { --py-casl: 1; font-size: 1.25rem; font-weight: 800; line-height: 1; text-align: center; }
.py-screen.py-lib .py-lib-marks .py-is-ok .py-lib-mark { color: var(--py-check); }
.py-screen.py-lib .py-lib-marks .py-is-ask .py-lib-mark { color: var(--py-ask); }
.py-screen.py-lib .py-lib-marks .py-is-no .py-lib-mark { color: var(--py-margin); }
.py-screen.py-lib .py-lib-marks .py-is-ask { background: color-mix(in oklch, var(--py-ask) 12%, transparent); border-radius: 3px; }
.py-screen.py-lib .py-lib-marks b { font-weight: 650; }
.py-screen.py-lib .py-lib-marks .py-num { font-weight: 650; }
.py-screen.py-lib .py-lib-sub { color: var(--py-ink-soft); }
.py-screen.py-lib .py-lib-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-2); padding: var(--py-2) var(--py-3); border-radius: var(--py-r-ctl); background: color-mix(in oklch, var(--py-ask) 12%, var(--py-page-bg)); font-size: var(--py-s--1); }

.py-screen.py-lib .py-lib-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-1) var(--py-3); align-items: baseline; border-top: 2px solid var(--py-graphite); padding-top: var(--py-3); }
.py-screen.py-lib .py-lib-total dt { color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-lib .py-lib-total dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.py-screen.py-lib .py-lib-big { font-family: var(--py-f-display); font-stretch: 68%; font-weight: 750; font-size: var(--py-s-5); line-height: 0.95; }
.py-screen.py-lib .py-lib-legend { display: flex; flex-wrap: wrap; gap: var(--py-1) var(--py-4); font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-lib .py-lib-legend span b { --py-casl: 1; font-size: 1.1em; }
.py-screen.py-lib .py-lib-legend .py-is-ok { color: var(--py-check); } .py-screen.py-lib .py-lib-legend .py-is-ask { color: var(--py-ask); } .py-screen.py-lib .py-lib-legend .py-is-no { color: var(--py-margin); }
.py-screen.py-lib .py-lib-actions { display: grid; gap: var(--py-2); }
.py-screen.py-lib .py-lib-actions .py-btn--ink { min-height: 3.25rem; font-size: var(--py-s-1); }

@media (max-width: 60rem) {
  .py-screen.py-lib .py-lib-spread { grid-template-columns: minmax(0, 1fr); }
  .py-screen.py-lib .py-lib-margin { border-inline-start: 0; border-top: 2px solid var(--py-margin); box-shadow: none; }
}
@media (max-width: 47.99rem) {
  .py-screen.py-lib .py-lib-note { padding: var(--py-5) var(--py-3) var(--py-4); }
  .py-screen.py-lib .py-lib-text { font-size: 1.1rem; min-block-size: calc(var(--py-line) * 8); }
  .py-screen.py-lib .py-lib-margin { padding: var(--py-4) var(--py-3); }
  .py-screen.py-lib .py-lib-pager { margin-inline-start: 0; }
}

/* ---------- What the product draws beyond the design ---------- */

/* The marks start on the note's first line. The note and the margin share the spread's two
   rows (subgrid): the first holds the note's instruction, however many lines it wraps to, and
   the second the written lines and, beside them, the marks, then what the margin holds under
   them. Below 60 rem the margin goes under the note, its marks in the note's order. */
.py-screen.py-lib .py-lib-spread { grid-template-rows: auto minmax(0, 1fr); }
.py-screen.py-lib .py-lib-note,
.py-screen.py-lib .py-lib-margin { grid-row: span 2; display: grid; grid-template-rows: subgrid; align-content: start; }
.py-screen.py-lib .py-lib-margin { gap: 0; }
.py-screen.py-lib .py-lib-side { grid-row: 2; display: grid; align-content: start; gap: var(--py-5); }
.py-screen.py-lib .py-lib-read { display: grid; align-content: start; gap: var(--py-4); }
@media (max-width: 60rem) {
  .py-screen.py-lib .py-lib-spread { grid-template-rows: none; }
  .py-screen.py-lib .py-lib-note,
  .py-screen.py-lib .py-lib-margin { grid-row: auto; grid-template-rows: none; }
  .py-screen.py-lib .py-lib-side { grid-row: auto; }
  .py-screen.py-lib .py-lib-marks .py-lib-blank { display: none; }
}

/* A line not understood says why on its row, in up to two lines of the row's height. */
.py-screen.py-lib .py-lib-marks .py-is-no > span:nth-child(2) { white-space: normal; line-height: 1rem; max-block-size: var(--py-line); }

/* The two modes, as capture's head draws them. */
.py-screen.py-lib .py-cap-modes { display: inline-flex; border: 1.5px solid var(--py-rule); border-radius: var(--py-r-ctl); padding: 2px; gap: 2px; }
.py-screen.py-lib .py-cap-modes a { padding: 0.3em 0.8em; border-radius: 3px; text-decoration: none; font-size: var(--py-s--1); font-weight: 600; color: var(--py-ink-soft); }
.py-screen.py-lib .py-cap-modes a[aria-current="page"] { background: var(--py-ink); color: var(--py-paper); }
.py-screen.py-lib .py-cap-modes a:not([aria-current]):hover { background: var(--py-paper-2); color: var(--py-ink); }

/* The notice of the order saved, above the spread; *Leer*, for a page without scripts, quiet
   under *Guardar pedido*. */
.py-screen.py-lib .py-lib-aviso:has(> *) { margin-block: var(--py-4); }
.py-screen.py-lib .py-lib-leer { justify-self: start; }

/* The keys are written in the sheet's own type, never the browser's monospace, and their hints
   show only where there is a keyboard. Saving says it at once. */
.py-screen.py-lib kbd { font-family: inherit; }
@media not (pointer: fine) {
  .py-screen.py-lib .py-kbd { display: none; }
}
.py-screen.py-lib .py-btn[aria-busy="true"] { cursor: progress; }