/* =============================================================================
   iNotice Poetry — styles
   =============================================================================

   Palette is taken from the teacher's A3 worksheet so the screen and the paper
   look like the same object:

     ink        #17365D   headings
     ink-soft   #263746   body text
     muted      #617180   labels, hints
     paper      #FFFEFA   background
     lens 1     #4F81BD   Ideas & progression
     lens 2     #76923C   Sounds & patterns
     lens 3     #C0504D   Word pictures & figurative language
     lens 4     #8064A2   Typography & visual arrangement

   That order — Ideas, Sounds, Word Pictures, Typography — is the order of the
   columns on the paper worksheet, which is what the class is citing from.

   Lens colours are NOT hard-coded here. They arrive as the CSS custom property
   --c (and its tint --t) set from js/lenses.js. Change a lens colour there and
   it changes everywhere. The one exception is .mapcell, noted at that rule.

   THIS IS A PROJECTED TOOL. Two constraints run through everything below:
     1. The poem is sized from --poem-size, which the teacher changes live and
        which is persisted. Nothing on the poem may use a fixed px font size.
     2. It is driven by a finger on a touchscreen board as often as by a mouse,
        so controls are >= 44px, and nothing important is revealed on hover.

   Fonts are system stacks on purpose: no webfont request, so the app loads on a
   slow or filtered school network with nothing to block.
   ========================================================================== */

:root {
  --ink: #17365D;
  --ink-soft: #263746;
  --muted: #617180;
  --line: #D8DFE7;
  --line-soft: #EAEFF4;
  --paper: #FFFEFA;
  --panel: #FFFFFF;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  --serif: Cambria, Georgia, "Times New Roman", serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(23, 54, 93, .06), 0 8px 24px rgba(23, 54, 93, .08);

  /* Set from js/app.js applyScale(). The fallbacks here only matter for the
     instant before the module runs. */
  --poem-size: 22px;
  --stripe: 3px;
  --stripe-step: 6px;
  --tok-pad: 26px;
}

* { box-sizing: border-box; }

/* Several components below set `display`, which would otherwise beat the
   browser's own `[hidden] { display: none }`. Screens are toggled with the
   hidden attribute, so this rule has to win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; }
p { margin: 0; }

kbd {
  font: inherit;
  font-size: .85em;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------ app bar ---- */

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Poem-only mode buys back the vertical space. Esc or F brings it back. */
body.is-focus .app-bar { display: none; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand__mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  display: grid;
  place-items: center;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__text strong { color: var(--ink); font-size: 17px; letter-spacing: .01em; }
.brand__tagline {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-bar__actions { display: flex; gap: 8px; flex: none; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: #F4F7FB; border-color: #BFCBD8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: #21467A; border-color: #21467A; }

.btn--ghost { background: transparent; }
.btn--danger { color: #A23A37; border-color: #E9CFCE; background: #FCF3F2; }
.btn--danger:hover { background: #F8E5E4; border-color: #DDB4B2; }
.btn--sm { font-size: 13px; padding: 7px 11px; }

/* ============================================================ SCREEN 1 === */

.screen { padding: 0 24px 64px; }

.start {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.start h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.015em; }

.lede { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 46ch; }

.method-card {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.method-card__title {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: .04em;
}
.method-card__help { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.method-card--keys { background: #F8FAFC; }

.keylist { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.keylist li { font-size: 13.5px; color: var(--ink-soft); }
.keylist kbd { margin-right: 3px; }

.example { margin-top: 16px; display: grid; gap: 8px; }
.example__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.example__row--see { background: #F1F6FB; border: 1px solid #D6E4F2; }
.example__row--think { background: #F6F6F4; border: 1px dashed #D3D8DC; color: var(--muted); }
.example__tag {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
}
.example__row--think .example__tag { color: var(--muted); }
.example__text em { color: var(--muted); font-style: italic; }

/* -- the form side -- */

.start__form { padding-top: 8px; }

.resume {
  padding: 14px 16px;
  border: 1px solid #C9DCEF;
  background: #F1F6FB;
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.resume__text { font-size: 14px; color: var(--ink); }
.resume__actions { display: flex; gap: 8px; margin-top: 10px; }

.field-row { display: flex; gap: 12px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.field__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
input[type="text"], textarea {
  font: inherit;
  color: var(--ink-soft);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  width: 100%;
}
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: #7FA5CC;
  box-shadow: 0 0 0 3px rgba(79, 129, 189, .15);
}

.dropzone {
  border: 2px dashed #C6D2DE;
  border-radius: 14px;
  background: #fff;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over {
  border-color: var(--ink);
  background: #F5F9FD;
  outline: none;
}
.dropzone__icon { width: 34px; height: 34px; color: #8FA3B8; }
.dropzone__title { font-weight: 600; color: var(--ink); margin-top: 6px; font-size: 15px; }
.dropzone__hint { color: var(--muted); font-size: 13px; margin-top: 3px; }
.link { color: #2A6099; text-decoration: underline; text-underline-offset: 2px; }

.or { text-align: center; color: var(--muted); font-size: 12.5px; margin: 14px 0; }

.paste summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 0;
}
.paste__hint { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.paste textarea { font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.paste .btn { margin-top: 10px; }

.privacy {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
}
.privacy::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 12px; height: 12px;
  border: 1.5px solid #9AAABA;
  border-radius: 3px 3px 4px 4px;
  border-top-width: 5px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.open-saved { margin-top: 14px; }

.error {
  margin-top: 14px;
  padding: 10px 12px;
  background: #FCF3F2;
  border: 1px solid #E9CFCE;
  border-radius: 8px;
  color: #8F312E;
  font-size: 13.5px;
}
.busy { margin-top: 12px; color: var(--muted); font-size: 13.5px; }

/* ============================================================ SCREEN 2 === */

.check { max-width: 1080px; margin: 0 auto; padding-top: 36px; }
.check__head h2 { font-size: 25px; }
.check__head .lede { margin-top: 10px; max-width: 70ch; }

.check__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
.check__editor textarea {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.7;
  min-height: 420px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  margin-top: 6px;
}

.preview {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
}
/* Flagging where the poem starts. Every preview row is a button; the flag text
   on the right is what tells you so, since there is no hover on a touchscreen. */
.startline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.startline__note { font-size: 12.5px; color: var(--muted); flex: 1 1 240px; }

.preview__row {
  font: inherit;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 32px;
  text-align: left;
  padding: 1px 6px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 5px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.preview__row:hover { background: #F1F6FB; }
.preview__row:focus-visible { outline: 2px solid var(--ink); }
.preview__num {
  flex: none;
  width: 2.2em;
  text-align: right;
  color: #9FB0C1;
  font-family: var(--sans);
  font-size: 11.5px;
  padding-top: .38em;
}
.preview__text { white-space: pre-wrap; flex: 1 1 auto; min-width: 0; }
.preview__gap { height: .9em; }

/* The flag reads "start here" on poem lines and "not counted" on front matter,
   so the row says what tapping it will do before you tap it. */
.preview__flag {
  flex: none;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A9B7C5;
  opacity: 0;
  transition: opacity .12s;
}
.preview__row:hover .preview__flag,
.preview__row:focus-visible .preview__flag { opacity: 1; }

.preview__row--front { color: #93A2B1; }
.preview__row--front .preview__text { font-style: italic; }
.preview__row--front .preview__flag { opacity: 1; color: #B6C2CE; }

/* Line 1 of the poem proper, marked so the boundary is obvious at a glance. */
.preview__row.is-first { border-left-color: var(--ink); background: #F1F6FB; }
.preview__row.is-first .preview__flag { opacity: 1; color: var(--ink); }
.preview__summary {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.check__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ======================================================== SCREEN 3 — BOARD */

/* Bottom room for the site's floating Menu button, so it never sits on top of
   the poem. It is hidden outright in poem-only mode (see index.html). */
.screen--board { padding: 0 24px 80px; }

/* ------------------------------------------------------------- the deck --- */

/* Sticks under the app bar and stays reachable all lesson. Two rows: the pens,
   which are the whole interaction, and everything else. */
.deck {
  position: sticky;
  top: 55px;
  z-index: 30;
  max-width: 1700px;
  margin: 0 auto;
  background: var(--paper);
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--line-soft);
}
body.is-focus .deck { top: 0; }

.deck__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deck__row--secondary { margin-top: 8px; }
.deck__spacer { flex: 1 1 auto; min-width: 0; }
.deck__sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }

.deck__label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.deck__undo { min-height: 44px; }

/* -- the pens: the one control that matters, sized to be hit without looking */

.pens { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }

.pen {
  font: inherit;
  flex: 1 1 200px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  --c: var(--muted);
  --t: #F4F6F8;
}
.pen:hover { border-color: var(--c); }
.pen:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The active pen is filled, not outlined — from six metres away an outline and
   a non-outline look the same. */
.pen.is-on { border-color: var(--c); background: var(--c); }
.pen.is-on .pen__title { color: #fff; }
.pen.is-on .pen__count { color: rgba(255, 255, 255, .85); }
.pen.is-on .pen__n { background: #fff; color: var(--c); }

.pen__n {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--c);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.pen__body { display: flex; flex-direction: column; min-width: 0; }
.pen__title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pen__count { font-size: 11.5px; color: var(--muted); }

/* -- segmented controls: show filter, instruments, text size -- */

.segs { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.seg {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  min-width: 44px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  --c: var(--ink);
}
.seg:hover { border-color: #A9BACB; background: #F5F9FD; }
.seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg.is-on { background: var(--c); border-color: var(--c); color: #fff; }
.segs--size .seg { font-family: var(--serif); }

/* ------------------------------------------------------------- the cue ---- */

/* The active level's own words, verbatim from the paper worksheet. This is the
   line the teacher reads out and the wording the students are assessed against,
   so it is projected at full size rather than hidden in a sidebar. */
.cue {
  max-width: 1700px;
  margin: 12px auto 0;
  border-left: 5px solid var(--c);
  background: var(--t);
  border-radius: 0 10px 10px 0;
  padding: 12px 18px;
  --c: var(--muted);
  --t: #F4F6F8;
}
.cue__head { display: flex; align-items: center; gap: 10px; }
.cue__n {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--c);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cue__titles { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cue__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.cue__sub { font-size: 13.5px; color: var(--muted); }
.cue__row { margin-top: 6px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.cue__row--stem { font-family: var(--serif); font-style: italic; color: var(--muted); }
.cue__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--c);
  margin-right: 4px;
}

/* -------------------------------------------------- instrument output ---- */

.instrument-output { max-width: 1700px; margin: 14px auto 0; display: grid; gap: 12px; }

.ipanel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px 16px;
}
.ipanel__title { font-size: 15px; }
.ipanel__help { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ipanel__empty { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.ipanel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  min-height: 32px;
}

.repeats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.repeat {
  font: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #F8FAFC;
  cursor: pointer;
}
.repeat:hover { border-color: var(--ink); background: #EEF4FA; }
.repeat__word { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.repeat__count { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.echoes { display: grid; gap: 6px; margin-top: 12px; }
.echo { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.echo__letter {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: #F5F8EF;
  border: 1px solid #D7E3C4;
  color: #4F6327;
  font-size: 12px;
  font-weight: 700;
}
.echo__words { font-family: var(--serif); color: var(--ink); }
.echo__lines { color: var(--muted); font-size: 12.5px; }

.stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 12px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat__value { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ workspace --- */

.workspace {
  max-width: 1700px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}
body.is-focus .workspace { grid-template-columns: minmax(0, 1fr); }
body.is-focus .collect-col { display: none; }

/* --------------------------------------------------------------- poem ---- */

.poem-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 28px 30px 40px;
  box-shadow: var(--shadow);
}

.poem {
  font-family: var(--serif);
  font-size: var(--poem-size);
  line-height: 2.6;
  color: var(--ink-soft);
  /* Vertical drags still scroll the page; horizontal drags along a line are
     ours, which is exactly the gesture used to select a run of words. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pline { display: flex; align-items: baseline; gap: 0; }
.pline--blank { height: 1.1em; }

/* Title, byline, credits: on the board because the class needs them, but
   visibly not part of the numbered poem. */
.pline--front { color: var(--muted); font-style: italic; line-height: 1.7; }
.pline--front .pline__text { padding-left: 0; }

.pline__num {
  flex: none;
  width: 2.4em;
  min-height: 1.6em;
  text-align: right;
  padding-right: .6em;
  font-family: var(--sans);
  font-size: .58em;
  color: #A9B7C5;
  background: none;
  border: 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pline__num:hover { color: var(--ink); text-decoration: underline; }
.pline__num:focus-visible { outline: 2px solid var(--ink); border-radius: 4px; }

/* The four-lens margin map: coverage at a glance, one cell per level.
   These colours are the one place lens colours are duplicated — the cells are
   generated before any mark exists, so they cannot take a --c set from JS. If
   you change a colour in lenses.js, change it here too. */
.pline__map {
  flex: none;
  display: inline-flex;
  gap: 2px;
  margin-right: 12px;
  align-self: center;
}
.mapcell {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #E6EBF0;
  transition: background .15s;
}
.mapcell[data-lens="1"].is-on { background: #4F81BD; }  /* 1 Ideas         */
.mapcell[data-lens="2"].is-on { background: #76923C; }  /* 2 Sounds        */
.mapcell[data-lens="3"].is-on { background: #C0504D; }  /* 3 Word Pictures */
.mapcell[data-lens="4"].is-on { background: #8064A2; }  /* 4 Typography    */

.pline__echo {
  flex: none;
  width: 1.6em;
  font-family: var(--sans);
  font-size: .5em;
  font-weight: 700;
  color: #6E8A3C;
  text-align: center;
}

.pline__text { white-space: pre-wrap; }
.pline__text.runs-on::after {
  content: "→";
  color: #C4CED8;
  font-size: .6em;
  margin-left: .5em;
}

/* The bottom padding is what gives the stacked stripes somewhere to live (see
   paintAnnotations in app.js — stripes are background layers pinned to the
   bottom of this padded box). Both come from --tok-pad / --stripe-step, which
   applyScale() derives from the text size, so blowing the poem up for the back
   of the room scales the marks with it. Keep them in step. */
.tok {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px var(--tok-pad);
  background-repeat: no-repeat;
  transition: background-color .1s;
}
.tok:hover { background-color: #EDF3F9; }
/* --c is the level's full-strength colour, set inline by paintAnnotations().
   A washed block of that colour reads from the back of a room; the worksheet's
   own pale tints do not, which is why they are not used here. */
.tok--ann { background-color: color-mix(in srgb, var(--c) 18%, transparent); }
.tok--focus { background-color: #FFF3C4; }
.tok--sel { background-color: #CFE2F5; }
/* Repeats are marked with a text-decoration rather than a box, because .tok
   carries bottom padding to make room for the stripes — any box or outline
   would be drawn around that padding and float below the word. */
.tok--repeat {
  text-decoration: underline dotted #C9A227;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}
.punct {
  color: #C0504D;
  font-weight: 700;
  background: #FCF3F2;
  border-radius: 2px;
  padding: 0 1px;
}

/* --------------------------------------------------------- shape view ---- */

/* The silhouette is the poem with its ink hidden, not a chart drawn beside it.
   Every measurement therefore comes free and is exactly right: real rendered
   line widths in the poem's own typeface, real indents, real stanza gaps, and
   the line numbers still lined up with the lines they belong to.

   background-clip: content-box is what keeps an indented line's indent EMPTY —
   the indent is padding on .pline__text, and without this the bar would be
   painted across it and every line would start flush left, losing the one thing
   level 4 most wants you to see. */
.poem.is-shape .pline__text {
  color: transparent;
  background-color: #C7D3E0;
  background-clip: content-box;
  border-radius: 5px;
}
/* Words keep their level colour through the silhouette, so the class can see
   WHERE on the shape the marks fell. Stronger than the usual wash because it is
   sitting on grey rather than paper. The stripes go: they read as noise once
   the letters they sat under are invisible. */
.poem.is-shape .tok {
  color: transparent;
  padding-bottom: .18em;
  background-image: none !important;
}
.poem.is-shape .tok--ann { background-color: color-mix(in srgb, var(--c) 65%, transparent); }
.poem.is-shape .tok--repeat { text-decoration: none; }
.poem.is-shape .punct { background: none; color: transparent; }
.poem.is-shape .pline--front { visibility: hidden; }

/* ------------------------------------------------------------- the rail --- */

/* The record of what has been marked. Stays beside the poem as the page moves,
   rather than scrolling off the top.

   .cards below IS a scroll container, which is the one exception to the
   no-inner-scroll rule — and it only earns that because NOTHING requires the
   teacher to scroll it. The app keeps the card for whatever part of the poem is
   on screen in view (see trackCurrentCard in app.js), and if the list is longer
   than the rail, the ▲▼ buttons on the rail head move it by tap. If you remove
   either of those, take the overflow off too. */
.collect-col {
  position: sticky;
  top: var(--rail-top, 150px);
  max-height: calc(100vh - var(--rail-top, 150px) - 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collect__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.collect__title { font-size: 15px; }
.collect__check { font-size: 12.5px; color: var(--muted); text-align: right; }
.cov__part.is-good { color: #4F6327; font-weight: 700; }

/* Only shown when the list is taller than the rail — otherwise there is nothing
   to move and the buttons are just noise beside the heading. */
.rail-pager { display: none; gap: 4px; flex: none; }
.collect-col.has-overflow .rail-pager { display: flex; }
.rail-pager__btn {
  width: 34px; height: 34px;
  font-size: 12px;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.rail-pager__btn:hover { background: #F4F7FB; border-color: #A9BACB; }
.rail-pager__btn:disabled { opacity: .3; cursor: default; }

.cards {
  display: grid;
  gap: 9px;
  align-content: start;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 3px;
  scroll-behavior: auto;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.empty__title { font-weight: 600; color: var(--ink); font-size: 14px; }
.empty__text { color: var(--muted); font-size: 12.5px; margin-top: 5px; }

.card {
  position: relative;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c);
  border-radius: 4px 8px 8px 4px;
  background: #fff;
  padding: 10px 12px 11px;
  cursor: pointer;
  transition: box-shadow .12s;
  --c: var(--muted);
  --t: #F4F6F8;
}
.card:hover { box-shadow: var(--shadow); }
.card.is-open { box-shadow: var(--shadow); border-color: var(--c); }

/* The mark belonging to the part of the poem currently on screen. Lifted off
   the page so the eye lands on it without the others being dimmed away — the
   full record still has to be readable from the back of the room. */
.card.is-current {
  border-color: var(--c);
  box-shadow: 0 0 0 2px var(--c), var(--shadow);
}

.card__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.card__lens { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--c); text-transform: uppercase; }
.card__loc { font-size: 11px; color: var(--muted); flex: none; }

.card__exact {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--t);
  white-space: pre-wrap;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--t);
  color: var(--ink-soft);
  border: 1px solid rgba(0, 0, 0, .05);
}
.card__note { font-size: 12.5px; color: var(--ink-soft); margin-top: 7px; white-space: pre-wrap; }
.card__sketch {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

/* Always visible, never hover-revealed — there is no hover on a touchscreen. */
.card__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.card__more, .card__done {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.card__more:hover { color: var(--ink); border-color: var(--ink); }

/* Filled, because it is the one thing on the card with a consequence for what
   the next tap on the poem will do. */
.card__done { background: var(--c); border-color: var(--c); color: #fff; }
.card__done:hover { filter: brightness(1.08); }

.card__building { font-size: 11px; color: var(--muted); font-style: italic; }
/* A group still taking words looks unfinished on purpose. */
.card.is-building { border-style: dashed; border-left-style: solid; }

.card__detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.card__labels { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font: inherit;
  font-size: 12px;
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--c); }
.chip.is-on { background: var(--c); border-color: var(--c); color: #fff; }

.card__remove { margin-top: 10px; width: 100%; }

/* ---------------------------------------------------------------- THINK --- */

/* A cue, not a field. There is no keyboard at the board, so the answer is said
   to the room rather than typed. See renderThink() in app.js. */
.think {
  flex: none;
  border: 1px dashed #D3D8DC;
  border-radius: var(--radius);
  background: #F8F8F6;
  padding: 11px 13px;
}
.think__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.think__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.think__hint { font-size: 12px; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- pager --- */

/* The MaxHub's only input is a tap, so these are the sole way to move a poem
   that is taller than the screen. Sized and placed to be hit while standing at
   a board, and out of the way of the poem column. */
.pager {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pager__btn {
  width: 60px;
  height: 60px;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(23, 54, 93, .16);
}
.pager__btn:hover { background: #fff; border-color: #A9BACB; }
.pager__btn:active { transform: translateY(1px); }
.pager__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ------------------------------------------------------ keyboard help ---- */

.keyhelp {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(23, 54, 93, .35);
  display: grid;
  place-items: center;
  padding: 20px;
}
.keyhelp__box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(23, 54, 93, .3);
  padding: 22px 26px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.keyhelp__title { font-size: 18px; }
.keyhelp__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  margin: 14px 0 0;
  align-items: baseline;
}
.keyhelp__list dt { white-space: nowrap; }
.keyhelp__list dt kbd + kbd { margin-left: 3px; }
.keyhelp__list dd { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.keyhelp__or { color: var(--muted); font-size: 12px; }
.keyhelp__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted);
}
.keyhelp .btn { margin-top: 14px; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1280px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
  .pen__count { display: none; }
}

@media (max-width: 1024px) {
  .start { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .check__grid { grid-template-columns: 1fr; }
  .check__editor textarea { min-height: 300px; }
  /* Tablet and touchscreen board: the poem gets the full width and the rail
     drops below it, rather than being squeezed into an unusable column. Once it
     is below the poem there is nothing to stick to and nothing to follow, so it
     goes back to being an ordinary block that grows with the page. */
  .workspace { grid-template-columns: 1fr; }
  .pen { flex-basis: 45%; }
  .collect-col { position: static; max-height: none; }
  .cards { overflow-y: visible; }
  .collect-col.has-overflow .rail-pager { display: none; }
}

@media (max-width: 700px) {
  .screen { padding: 0 14px 48px; }
  .screen--board { padding: 0 14px 80px; }
  .field-row { flex-direction: column; }
  .poem-wrap { padding: 20px 14px 28px; }
  .pen { flex-basis: 100%; min-height: 52px; }
  .deck__sep { display: none; }
  .deck__spacer { flex-basis: 100%; height: 0; }
  .collect-col { top: auto; }

  /* The bar cannot fit a brand and four buttons on one line at this width —
     without wrapping, the buttons are drawn on top of the title. */
  .app-bar { padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; }
  .app-bar__actions { flex: 1 1 100%; flex-wrap: wrap; }
  .brand__tagline { display: none; }

  /* A sticky deck this tall would leave no room for the poem it controls, so
     below this width it scrolls away like ordinary content. */
  .deck { position: static; }
}

/* ================================================================ PRINT === */

/* On screen the print sheet does not exist. When printing, everything else is
   hidden and only the sheet is laid out — deliberately close to the paper A3
   so the modelled copy can be handed out and filed with the worksheets. */

.print-sheet { display: none; }

@media print {
  @page { size: A3 landscape; margin: 12mm; }

  body { background: #fff; }
  .app-bar, main, .keyhelp, .pager { display: none !important; }

  .print-sheet {
    display: block;
    font-size: 9.5pt;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .psheet__head { border-bottom: 1.5pt solid #17365D; padding-bottom: 5pt; margin-bottom: 9pt; }
  .psheet__title { font-size: 17pt; color: #17365D; }
  .psheet__meta { font-size: 9pt; color: #333; margin-top: 3pt; }
  .psheet__field { margin-right: 12mm; }
  .psheet__method { font-size: 8.5pt; font-weight: 700; letter-spacing: .06em; color: #17365D; margin-top: 4pt; }

  .psheet__poem {
    font-family: Cambria, Georgia, serif;
    font-size: 10pt;
    line-height: 2;
    column-count: 2;
    column-gap: 16mm;
    padding-bottom: 8pt;
    margin-bottom: 9pt;
    border-bottom: .5pt solid #AAB7C3;
  }
  .psheet__line { display: flex; align-items: baseline; break-inside: avoid; }
  .psheet__num { flex: none; width: 2.4em; text-align: right; padding-right: .6em; font-family: Calibri, Arial, sans-serif; font-size: 7pt; color: #8A98A6; }
  .psheet__text { white-space: pre-wrap; }
  .psheet__blank { height: .8em; }
  .psheet__line--front { color: #617180; font-style: italic; }
  .ptok { background-repeat: no-repeat; padding-bottom: 7px; }

  .psheet__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; }
  .pcol { break-inside: avoid; border-top: 2pt solid var(--c); padding-top: 4pt; }
  .pcol__head { display: flex; align-items: baseline; gap: 5pt; }
  .pcol__n { color: var(--c); font-size: 12pt; font-weight: 700; }
  .pcol__title { font-size: 9.5pt; color: #17365D; }
  .pcol__sub { font-size: 7.5pt; color: #617180; font-style: italic; margin-top: 1pt; }
  .pcol__empty { color: #AAB7C3; margin-top: 5pt; }

  .pitem { margin-top: 6pt; padding: 4pt 5pt; background: var(--t); border-radius: 3pt; break-inside: avoid; }
  .pitem__exact { font-family: Cambria, Georgia, serif; font-size: 9pt; color: #17365D; }
  .pitem__loc { font-size: 7pt; color: #617180; margin-top: 1pt; }
  .pitem__labels { font-size: 7.5pt; color: var(--c); margin-top: 2pt; }
  .pitem__note { font-size: 8pt; color: #263746; margin-top: 2pt; }
  .pitem__sketch { max-width: 100%; margin-top: 3pt; border: .5pt solid #ccc; }

  .psheet__check {
    margin-top: 9pt;
    padding-top: 5pt;
    border-top: .5pt solid #AAB7C3;
    font-size: 8pt;
    letter-spacing: .04em;
    color: #17365D;
  }
  .psheet__think { margin-top: 8pt; padding: 5pt 6pt; border: .5pt dashed #999; border-radius: 3pt; }
}