/* Optional handwriting lessons use the existing study-desk colours. */
.stroke-order-dialog {
  color: var(--ink, #102c2a);
  background: var(--paper, #fbf7ed);
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgb(22 37 34 / 22%);
  width: min(720px, calc(100% - 20px));
  max-width: calc(100% - 20px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}
.stroke-order-dialog::backdrop { background: rgb(16 44 42 / 48%); }
.stroke-order-dialog * { box-sizing: border-box; }
.stroke-order-dialog [hidden] { display: none !important; }
.stroke-order-dialog button, .stroke-order-dialog select, .stroke-order-dialog a {
  touch-action: manipulation;
}
.stroke-order-dialog button, .stroke-order-dialog select {
  min-height: 44px;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 8px;
  color: var(--ink, #102c2a);
  background: #fff;
  padding: 9px 12px;
  font: inherit;
  line-height: 1.3;
}
.stroke-order-dialog select { font-size: 16px; width: 100%; min-width: 0; }
.stroke-order-dialog button { cursor: pointer; }
.stroke-order-dialog button:disabled { opacity: .5; cursor: default; }
.stroke-order-dialog button[aria-pressed="true"], .stroke-order-dialog .stroke-primary {
  color: #fff;
  background: var(--teal, #0d514c);
  border-color: var(--teal, #0d514c);
}
.stroke-order-dialog :focus-visible { outline: 3px solid var(--teal, #0d514c); outline-offset: 3px; }
.stroke-order-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper, #fbf7ed);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line, #d6c7a7);
}
.stroke-order-header h2 { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.stroke-order-body { padding: 16px 18px 20px; display: grid; gap: 14px; }
.stroke-order-intro { color: var(--muted, #58706b); line-height: 1.55; margin: 0; }
.stroke-order-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 125px; gap: 12px; }
.stroke-order-field { display: grid; gap: 5px; font-size: .9rem; min-width: 0; }
.stroke-order-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stroke-order-workspace { display: grid; gap: 14px; }
.stroke-order-paper {
  width: min(100%, 350px);
  margin: auto;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 8px;
  background: #fffcf5;
  overflow: hidden;
}
.stroke-order-title { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 0; padding: 8px 12px 0; font-size: 1rem; }
.stroke-order-character { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.7rem; line-height: 1.4; }
.stroke-order-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; user-select: none; -webkit-user-select: none; }
.stroke-order-canvas.is-tracing { touch-action: none; cursor: crosshair; }
.stroke-order-canvas:not(.is-tracing) { touch-action: pan-y; }
.stroke-order-canvas .stroke-ghost { fill: none; stroke: #d8d0bc; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.stroke-order-canvas .stroke-current { stroke: #bca86f; }
.stroke-order-canvas .stroke-completed, .stroke-order-canvas .stroke-demonstration, .stroke-order-canvas .stroke-ink {
  fill: none; stroke: var(--teal, #0d514c); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
}
.stroke-order-canvas .stroke-ink { stroke: var(--rose, #9a4f48); stroke-width: 5; }
.stroke-order-canvas .stroke-dot-ink { fill: var(--rose, #9a4f48); }
.stroke-order-canvas .stroke-start { fill: #fff; stroke: var(--teal, #0d514c); stroke-width: 2; }
.stroke-order-canvas .stroke-number { fill: var(--teal, #0d514c); font: 700 13px Inter, sans-serif; text-anchor: middle; dominant-baseline: central; }
.stroke-order-canvas .stroke-arrow { fill: none; stroke: var(--teal, #0d514c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stroke-order-canvas .stroke-pen { fill: var(--gold, #c69a37); stroke: #fff; stroke-width: 2; }
.stroke-order-controls { display: grid; align-content: start; gap: 12px; min-width: 0; }
/* ── the reserved practice preview (JOB-20261015318) ──
   Reserved layout directly under the letter, never an overlay: it exists before the first
   stroke and keeps a stable size, so raising it can never move the letter, the controls or
   the dialog's own scroll position. It holds a real magnified crop of the live letter and the
   writer's own ink (see js/stroke-order.js) with a crosshair on the exact point. The frame is
   capped at the width the main writing screen uses, so the panel stays short. */
.stroke-order-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}
.stroke-order-preview > * { min-width: 0; }
.stroke-order-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.stroke-order-preview-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink, #102c2a);
}
.stroke-order-preview-state { font-size: .72rem; font-weight: 700; color: var(--teal, #0d514c); }
.stroke-order-preview[data-state="final"] .stroke-order-preview-state { color: #7a6a3f; }
.stroke-order-preview-frame {
  position: relative;
  width: 100%;
  max-width: 168px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid var(--ink, #102c2a);
  border-radius: 8px;
  background: #fffcf5;
}
.stroke-order-preview .writing-preview-surface { display: block; width: 100%; height: 100%; pointer-events: none; }
.stroke-order-preview-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px;
  text-align: center;
  font-size: .7rem;
  line-height: 1.3;
  color: var(--muted, #58706b);
  pointer-events: none;
}
.stroke-order-preview-empty[hidden] { display: none; }
.stroke-order-preview-note { margin: 0; font-size: .68rem; line-height: 1.3; color: var(--muted, #58706b); }
.stroke-order-progress { font-weight: 700; font-size: .95rem; }
.stroke-order-instruction { min-height: 3em; line-height: 1.5; }
.stroke-order-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stroke-order-buttons button { min-width: 0; }
.stroke-order-status { min-height: 3em; line-height: 1.5; color: var(--teal, #0d514c); }
.stroke-order-finished { border: 1px solid #b5d4c9; border-radius: 8px; background: #e8f2ec; padding: 12px; display: grid; gap: 10px; }
.stroke-order-help { border-top: 1px solid var(--line, #d6c7a7); padding-top: 12px; color: var(--muted, #58706b); line-height: 1.5; font-size: .86rem; }
.stroke-order-help summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink, #102c2a); }
.stroke-order-help p { margin: 0 0 10px; }
.stroke-order-help a { color: var(--teal, #0d514c); display: inline-block; min-height: 44px; padding: 10px 0; text-underline-offset: 3px; }
@media (min-width: 580px) {
  /* Wide: the letter and the preview side by side, with the lesson's own controls and
     explanations under both of them. The reserved panel is a real grid cell here, so it can
     never overlap the letter and raising it can never move the letter or the controls. */
  .stroke-order-workspace { grid-template-columns: minmax(0, 1.1fr) minmax(220px, 1fr); align-items: start; }
  .stroke-order-controls, .stroke-order-help { grid-column: 1 / -1; }
  .stroke-order-controls { padding-top: 8px; }
}
@media (max-width: 579px) {
  /* Narrow: the same reserved panel, COMPACT and ABOVE the active paper instead of beside it
     — and never over it. It becomes one short horizontal row, its label and live state on the
     left and a small real crop of the live letter on the right, so a phone can show the whole
     active pad, the crop and the state together without the panel pushing the writing area
     out of view. The panel is still a real grid cell created with the dialog before the first
     stroke, so its position can never move the letter, the controls or the dialog's scroll.
     The crop stays square because the preview surface has always composited a square crop;
     only its size changes (168px beside the paper, 88px above it), and the SVG's own geometry
     is untouched. */
  .stroke-order-preview {
    order: -1;                 /* a grid item, so this only reorders it before the paper */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 6px 8px;
  }
  .stroke-order-preview-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stroke-order-preview-note { grid-column: 1 / -1; }
  .stroke-order-preview-frame { width: 88px; max-width: 88px; height: 88px; margin: 0; }
}
@media (max-width: 360px) {
  .stroke-order-body, .stroke-order-header { padding-left: 12px; padding-right: 12px; }
  .stroke-order-toolbar { grid-template-columns: minmax(0, 1fr) 102px; gap: 8px; }
  .stroke-order-dialog button { padding-left: 8px; padding-right: 8px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* Short landscape (a phone on its side, or any dialog too short to stack anything above the
     paper): the reserved preview keeps its own column BESIDE the paper, and the paper's square is
     bounded by the room that is really left below the sticky header. That room is MEASURED from
     the live layout (js/stroke-order.js writes it to --stroke-order-paper-max); it is never a
     guessed constant. The <svg> keeps its own square box and its own viewBox, so a smaller paper
     is an exact scale of the same geometry — the guide, the writer's ink and the pointer mapping
     are untouched. Watch and the explanatory text still fall below and stay reachable through the
     dialog's own scroll. Nothing here applies to a portrait phone or to a normal tablet/desktop
     window, so the accepted portrait and wide layouts are unchanged. */
  .stroke-order-workspace { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .stroke-order-controls, .stroke-order-help { grid-column: 1 / -1; }
  .stroke-order-paper { width: min(100%, 350px, var(--stroke-order-paper-max, 350px)); }
  .stroke-order-preview { order: 0; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; padding: 8px; }
  .stroke-order-preview-head { flex-direction: row; align-items: baseline; gap: 6px; }
  .stroke-order-preview-note { grid-column: auto; }
  .stroke-order-preview-frame { width: 100%; max-width: 168px; height: auto; margin: 0 auto; }
}