/*
  The template editor's own sheet (WO-5.2) — eighth instance of the convention src/shell.css sets:
  one file per screen, styling only its own class names, with its own `@media (pointer: coarse)`
  block at the end. Order matters — it is linked after the shell, because a per-screen sheet has to
  be able to override the shell and never the other way round.

  LIFTED FROM design/mockups/proposed-phase5.css, drawn 2026-08-28, §§ TEMPLATE LIST · EDITOR ·
  PALETTE · PREVIEW, in that order and with those banners. Not re-derived: the values, the colours
  and the arguments are the drawing's, which is design/mockups/PROTOCOL.md rule 2 and the scar
  behind it — `proposed-phase6.css` § CALENDAR was re-derived by the very work order it was drawn
  for, and not one of its twenty-eight class names reached the sheet its banner promised.

  THE FIFTH SECTION IS NOT HERE. § UNRESOLVED — `.mf-token` and the block strip — went into
  src/shell.css instead, because WO-5.3's send flow renders a resolved draft too and the rule they
  both answer to ("an unresolved merge field never renders blank") is one sentence that gets one
  treatment in the sheet they both already load. That is the posture § LOG SHEET took, and the
  drawing says so in its own banner.

  IT WEARS `.panel`, `.panel-header`, `.panel-title*`, `.class-action-btn` and `.empty-state` from
  src/shell.css AS SHIPPED and restyles none of them — two stylesheets never style one class.

  TWO DEPARTURES FROM THE DRAWING, BOTH NAMED HERE RATHER THAN LEFT TO BE NOTICED:

  · `.tpl-student-pick` DID NOT ARRIVE. The drawing gives the preview's student a pill with a `▾` on
    it, which is a menu this app has no component for; what shipped is a `<select>` wearing
    `.tpl-select` — the idiom src/events.js already uses to choose a student, and the one iPadOS
    hands a thumb-sized wheel. The drawn rule stays drawn, with a note at its own line.
  · THE THIRD COLUMN IS PREVIEW OVER PALETTE. The drawing's markup puts the palette first and its
    390px caption puts the preview first; both cannot be true, and the caption is the argument —
    "the palette is a reference a teacher consults, the preview is the thing she is watching while
    she types." So the preview is above the palette at every width, and the stacking order at 390px
    is the drawn one: list · editor · preview · palette.
*/

/* Every tappable class this sheet adds, in one grouped selector — design/style-guide.md §6. */
.tpl-tone-btn, .tpl-item, .tpl-new, .tpl-chip, .tpl-select, .tpl-input, .tpl-body,
.tpl-preview-refresh {
  touch-action: manipulation;
}
.tpl-tone-btn, .tpl-item, .tpl-new, .tpl-chip, .tpl-preview-refresh {
  user-select: none;
  -webkit-user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   § TEMPLATE LIST
   ══════════════════════════════════════════════════════════════════════════════ */

/*
  THREE COLUMNS AT DESK WIDTH, and the order is the order of the work: pick the template, write it,
  watch it resolve. The preview is not a modal you open and dismiss — WO-5.2's Deliverables ask for
  it so that "a broken field is caught at authoring time rather than at send time", and a preview
  behind a button is a preview a teacher stops opening by the third template.

  THE PLACEMENT IS EXPLICIT RATHER THAN LEFT TO AUTO-FLOW. Four children into three columns places
  the fourth under the first, which would put the palette beneath the list; naming the cells is what
  makes the third column preview-over-palette at every width above 1100px.
*/
.tpl-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.tpl-list { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; }
.tpl-editor { grid-column: 2; grid-row: 1 / span 2; }
.tpl-preview { grid-column: 3; grid-row: 1; }
.tpl-palette { grid-column: 3; grid-row: 2; }

.tpl-wrap { padding: 0 20px 20px; }

/* The two row hosts inside the list column, and the chip host inside the palette. They exist
   because the column itself is the flex container that owns the 10px rhythm, and rows painted into
   a plain <div> would lose it — the head, the empty line, *New template* and the starter head are
   siblings of the rows rather than of each other. */
.tpl-list-rows { display: flex; flex-direction: column; gap: 10px; }
.tpl-palette-chips { display: flex; flex-direction: column; gap: 8px; }

.tpl-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tpl-list-head h3 { font-size: 13px; font-weight: 700; color: #1a1a2e; }

/*
  THE TONE SWITCH, AND IT IS A FILTER RATHER THAN A MODE. Concern and praise templates are two lists
  in one place; the switch narrows which you are looking at. `All` is first and is the state every
  arrival lands in, because the question "which of my templates says this" does not know its own
  tone yet.
*/
.tpl-tone-switch {
  display: inline-flex; gap: 4px; padding: 3px;
  background: #f3f4f6; border-radius: 8px;
}
.tpl-tone-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #6b7a8d;
}
.tpl-tone-btn.active { background: #fff; color: #1a1a2e; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.tpl-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid #e0e4ea; border-radius: 10px;
  padding: 10px 12px;
}
.tpl-item:hover { border-color: #b0bcf0; }
.tpl-item.active { border-color: #5b6fcc; background: #eef2ff; }
.tpl-item-name { font-size: 13px; font-weight: 700; color: #1a1a2e; display: block; }
.tpl-item-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11px; color: #8a9bb0;
}

/*
  THE TONE DOT is a state word compound-qualified by this sheet's own class, which is the posture
  src/attendance.css takes with `.attendance-state.taken`. Green is praise and amber is concern, and
  neither is red: a concern template is a conversation, not an alarm, and the colour it wears in a
  list of the teacher's own writing should not say otherwise.
*/
.tpl-tone-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tpl-tone-dot.concern { background: #e67e22; }
.tpl-tone-dot.praise  { background: #27ae60; }

.tpl-audience {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: #6b7a8d; background: #f3f4f6; border-radius: 4px; padding: 2px 6px;
}

.tpl-new {
  border: 1.5px dashed #d0d8e4; background: transparent; cursor: pointer;
  border-radius: 10px; padding: 10px 12px;
  font-size: 12px; font-weight: 700; color: #6b7a8d;
}
.tpl-new:hover { border-color: #5b6fcc; color: #5b6fcc; }

/*
  THE EIGHT THE APP SHIPS WITH, under the teacher's own and behind a head that says what they are.
  They are offered and never loaded (the owner, 2026-08-28), so what separates them from her own
  work has to be readable at a glance rather than only in the row's aria-label — hence a head with a
  rule over it and a quieter line of type, on rows that are otherwise identical to hers.
*/
.tpl-group-head {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid #e0e4ea;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: #8a9bb0;
}
.tpl-group-note { font-size: 11px; color: #8a9bb0; line-height: 1.5; margin-top: -4px; }
.tpl-list-empty { font-size: 11px; color: #8a9bb0; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════════
   § EDITOR
   ══════════════════════════════════════════════════════════════════════════════ */

.tpl-editor { display: flex; flex-direction: column; gap: 12px; }

.tpl-meta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tpl-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.tpl-field-wide { flex: 2 1 200px; }
.tpl-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: #8a9bb0;
}
.tpl-input, .tpl-select {
  border: 1.5px solid #e0e4ea; border-radius: 8px; background: #fff;
  padding: 8px 10px; font-size: 13px; color: #1a1a2e; font-family: inherit;
  width: 100%; min-width: 0;
}
/* The focus ring is src/shell.css's `:focus-visible` outline and is NOT overridden here — the app
   has one global ring, it is never removed, and bare `:focus` is never styled beyond this. The tint
   is `.scores-input:focus`'s, copied rather than re-derived. */
.tpl-input:focus, .tpl-select:focus { border-color: #5b6fcc; background: #eef2ff; }

/*
  THE BODY IS A PLAIN TEXTAREA AND THE TOKENS IN IT ARE NOT HIGHLIGHTED. Colouring them would have
  been one line of CSS and a `contenteditable` in the build — this app has none, and the first one
  arrives with its own selection, paste and undo problems on an iPad. The preview is where a token
  stops being text, which is also where a teacher can see whether it was the right one.
*/
.tpl-body {
  border: 1.5px solid #e0e4ea; border-radius: 8px; background: #fff;
  padding: 12px; font-family: inherit; font-size: 13px; line-height: 1.7;
  color: #1a1a2e; min-height: 260px; width: 100%; resize: vertical;
}
.tpl-body:focus { border-color: #5b6fcc; }

/* What the editor is about to do, and what it has just done. Two lines rather than one: the first
   is a standing fact about the state (new, started from a shipped template, editing a saved one)
   and the second is the answer to the last thing that was pressed. A single line would have the
   state overwriting the answer. */
.tpl-editor-state { font-size: 11px; color: #8a9bb0; line-height: 1.6; }
.tpl-status {
  font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: 8px;
  background: #eafaf1; color: #27ae60;
}
.tpl-status.error { background: #fdeaea; color: #c0392b; }

.tpl-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   § PALETTE
   ══════════════════════════════════════════════════════════════════════════════ */

/*
  THE PALETTE IS A DISCLOSURE CONTROL AND IS DRAWN AS ONE. WO-5.2's Deliverables call it
  "documentation of the refusal list, by omission", and CLAUDE.md § Accommodations is the standard it
  has to meet. Omission alone is a weak way to document a rule nobody has been told exists, so the
  head says it in words: these sixteen are the whole of what a message can say, and nothing on the
  supports block is among them. That sentence is the palette's, not a tooltip's, and it is in
  index.html because it is the part a teacher actually reads.
*/
.tpl-palette { display: flex; flex-direction: column; gap: 10px; }

.tpl-palette-head h3 { font-size: 13px; font-weight: 700; color: #1a1a2e; }
.tpl-palette-note { font-size: 11px; color: #8a9bb0; line-height: 1.6; margin-top: 4px; }

/*
  THE FENCE. Amber rather than red, and stated as a property of the app rather than as a warning to
  the teacher: she is not being cautioned against doing something, she is being told the door does
  not exist.
*/
.tpl-palette-fence {
  border: 1.5px solid #f0dfa8; background: #fff8e6; border-radius: 8px;
  padding: 10px 12px; font-size: 11px; line-height: 1.6; color: #8a6d1a;
}
.tpl-palette-fence strong { color: #8a6d1a; font-weight: 700; }

.tpl-chip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid #e0e4ea; border-radius: 8px; background: #fff;
  padding: 7px 10px;
}
.tpl-chip:hover { border-color: #5b6fcc; background: #eef2ff; }
.tpl-chip code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 11px; color: #5b6fcc; font-weight: 700;
}
.tpl-chip-about { display: block; font-size: 11px; color: #8a9bb0; margin-top: 2px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════════
   § PREVIEW
   ══════════════════════════════════════════════════════════════════════════════ */

.tpl-preview { display: flex; flex-direction: column; gap: 10px; }
.tpl-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-preview-head h3 { font-size: 13px; font-weight: 700; color: #1a1a2e; }

/*
  THE PREVIEW RESOLVES AGAINST A REAL STUDENT, WHICH IS THE POINT AND ALSO THE RISK. A template that
  reads perfectly against the first student on the roster can be blocked for the fourth, so the
  student is a CONTROL rather than a caption.

  The drawing gives that control a pill with a `▾`; what ships is a `<select>` wearing `.tpl-select`
  — see this file's header. The row below is the pair: the picker and the drawn *Another student*
  button beside it, which steps to the next student rather than opening anything.
*/
.tpl-preview-student { display: flex; align-items: center; gap: 8px; }
.tpl-preview-student .tpl-select { flex: 1 1 auto; }

.tpl-preview-refresh {
  border: none; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #5b6fcc; padding: 4px 6px;
}

.tpl-draft {
  border: 1.5px solid #e0e4ea; border-radius: 10px; background: #f8f9fb;
  padding: 12px 14px;
}
.tpl-draft-subject {
  font-size: 12px; font-weight: 700; color: #1a1a2e;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #e0e4ea;
}
.tpl-draft-body { font-size: 12px; line-height: 1.8; color: #1a1a2e; white-space: pre-wrap; }

/*
  THE TWO STATES THE PREVIEW HAS THAT ARE NOT A DRAFT, and they are two rather than one because
  they are different facts. One is a document with nobody on a roster yet; the other is the
  projector being on, which is this screen's one refusal — the preview goes and the list, the editor
  and the palette stay, because a template names nobody and a resolved draft names a child.
  src/templates-view.js argues that departure from src/signals-view.js at its own header.
*/
.tpl-preview-note {
  border: 1.5px dashed #d0d8e4; border-radius: 10px; background: #f8f9fb;
  padding: 12px 14px; font-size: 12px; line-height: 1.6; color: #6b7a8d;
}
.tpl-preview-note strong { display: block; color: #1a1a2e; font-size: 13px; margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════════════════
   § RESPONSIVE — the three columns become one, and the order changes
   ══════════════════════════════════════════════════════════════════════════════ */

/*
  ON A PHONE THE PREVIEW GOES ABOVE THE PALETTE, not below it. The palette is a reference a teacher
  consults; the preview is the thing she is watching while she types. Re-mentions names declared
  above and introduces none of its own.
*/
@media (max-width: 1100px) {
  .tpl-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .tpl-list { grid-column: 1; grid-row: 1; }
  .tpl-editor { grid-column: 2; grid-row: 1; }
  .tpl-preview { grid-column: 1 / -1; grid-row: 2; }
  .tpl-palette { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 700px) {
  .tpl-layout { grid-template-columns: minmax(0, 1fr); }
  .tpl-list { grid-column: 1; grid-row: 1; }
  .tpl-editor { grid-column: 1; grid-row: 2; }
  .tpl-preview { grid-column: 1; grid-row: 3; }
  .tpl-palette { grid-column: 1; grid-row: 4; }
  .tpl-body { min-height: 200px; }
}

/* The touch pass. Every control this sheet adds, at the 44px floor, in the same pass that added it
   — there is no later touch-up. Nothing here departs from 44: the one control in the app that does
   (the 28px month chip in src/calendar-view.css) is the owner's own ruling at its own point of
   departure and is not a precedent a new control may cite. */
@media (pointer: coarse) {
  .tpl-tone-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  .tpl-item { min-height: 56px; }
  .tpl-new { min-height: 44px; }
  .tpl-chip { min-height: 44px; }
  .tpl-preview-refresh { min-height: 44px; display: inline-flex; align-items: center; }
  .tpl-input { min-height: 44px; }
  /* The native picker iOS opens is already thumb-sized; what this owes is a target to open it. */
  .tpl-select { min-height: 44px; }
  /* Not a target itself — it is the row that holds the picker and the *Another student* button —
     and named here for the reason `.panel-title-row` is in src/shell.css: the gap between 44px
     targets is part of the touch pass. */
  .tpl-preview-student { gap: 10px; }
  .tpl-editor-actions { gap: 10px; }
}