/* Inline stroke-order guide for the writing section (js/writing-stroke-guide.js).
   The panel is one more reserved cell of .writing-side in app.css: beside the paper on a wide
   screen, a compact row inside the pinned strip above the paper on a narrow one. It is never
   positioned over the sheet and it never receives a pointer event from it, so writing and the
   scroll rail behave exactly as before. Colours match stroke-order.css. */
.writing-stroke-guide {
  display: grid;
  /* On a narrow screen .writing-side is a two-column grid (preview, help) and this panel is the
     third row, so it must span both columns instead of being squeezed into the preview column. */
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #102c2a);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
}
.writing-stroke-guide[hidden] { display: none !important; }
.writing-stroke-guide * { box-sizing: border-box; }
.writing-stroke-guide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.writing-stroke-guide-label {
  flex: 0 0 auto;
  color: var(--muted, #58706b);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.writing-stroke-guide-state {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.writing-stroke-guide-hide {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #102c2a);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.writing-stroke-guide-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}
.writing-stroke-guide[data-state="letter"] .writing-stroke-guide-frame {
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.writing-stroke-guide-svg { display: block; width: 100%; height: 100%; }
.writing-stroke-guide[data-state="empty"] .writing-stroke-guide-svg { display: none; }
.writing-stroke-guide[data-state="empty"] .writing-stroke-guide-instruction { display: none; }
.writing-stroke-guide-empty {
  margin: 0;
  color: var(--muted, #58706b);
  line-height: 1.45;
}
.writing-stroke-guide[data-state="letter"] .writing-stroke-guide-empty { display: none; }
.writing-stroke-guide-instruction {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.writing-stroke-guide-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.writing-stroke-guide-controls select,
.writing-stroke-guide-controls button {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line, #d6c7a7);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #102c2a);
  font: inherit;
  touch-action: manipulation;
}
.writing-stroke-guide-controls select { width: 100%; min-width: 0; font-size: 16px; }
.writing-stroke-guide-controls button { cursor: pointer; }
.writing-stroke-guide-controls button:disabled { opacity: .5; cursor: default; }
.writing-stroke-guide :focus-visible { outline: 3px solid var(--teal, #0d514c); outline-offset: 2px; }
.writing-stroke-guide-note {
  margin: 0;
  color: var(--muted, #58706b);
  font-size: .78rem;
  line-height: 1.4;
}

/* The drawing itself, in the study-desk palette of stroke-order.css. */
.writing-stroke-guide .wsg-ghost {
  fill: none;
  stroke: #d8d0bc;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.writing-stroke-guide .wsg-ghost.wsg-active { stroke: #bca86f; }
.writing-stroke-guide .wsg-done,
.writing-stroke-guide .wsg-current {
  fill: none;
  stroke: var(--teal, #0d514c);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.writing-stroke-guide .wsg-start { fill: #fff; stroke: var(--teal, #0d514c); stroke-width: 2; }
.writing-stroke-guide .wsg-number {
  fill: var(--teal, #0d514c);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.writing-stroke-guide .wsg-arrow {
  fill: none;
  stroke: var(--teal, #0d514c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.writing-stroke-guide .wsg-pen { fill: var(--gold, #c69a37); stroke: #fff; stroke-width: 2; }

/* The live region sits outside the panel so hiding the panel cannot cut a message short. */
.writing-stroke-guide-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Narrow screens: the strip is pinned above the sheet, so its height is taken straight out of
   the writing window (--writing-paper-window, measured by setupWritingViewportScroll). The
   guide therefore becomes one compact row: an 84px drawing beside its caption. The long
   caveat is only shown when something really was skipped, and then across the full width. */
@media (max-width: 1099.98px) {
  .writing-stroke-guide {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "frame head"
      "frame instruction"
      "frame controls";
    gap: 4px 10px;
    padding: 6px 8px;
    align-items: center;
    box-sizing: border-box;
    max-height: min(220px, 28dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .writing-stroke-guide-head {
    grid-area: head;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label hide" "state state";
    align-items: center;
    gap: 2px 4px;
  }
  .writing-stroke-guide-label { grid-area: label; }
  .writing-stroke-guide-state { grid-area: state; font-size: .78rem; line-height: 1.2; overflow-wrap: normal; }
  .writing-stroke-guide-hide { grid-area: hide; }
  .writing-stroke-guide-frame {
    grid-area: frame;
    width: 84px;
    max-width: 84px;
  }
  .writing-stroke-guide[data-state="letter"] .writing-stroke-guide-frame { max-width: 84px; }
  .writing-stroke-guide-instruction { grid-area: instruction; font-size: .8rem; }
  .writing-stroke-guide-controls { grid-area: controls; }
  .writing-stroke-guide-controls select,
  .writing-stroke-guide-controls button { min-height: 32px; padding: 4px 6px; font-size: .82rem; }
  .writing-stroke-guide-controls select { font-size: 16px; }
  .writing-stroke-guide-label { font-size: .72rem; }
  .writing-stroke-guide-hide { min-height: 32px; }
  .writing-stroke-guide-note { display: none; font-size: .74rem; }
  .writing-stroke-guide[data-skipped="true"] .writing-stroke-guide-note {
    display: block;
    grid-column: 1 / -1;
  }
  .writing-stroke-guide[data-state="empty"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "frame"
      "controls";
  }
  .writing-stroke-guide[data-state="empty"] .writing-stroke-guide-instruction { display: none; }
  .writing-stroke-guide[data-state="empty"] .writing-stroke-guide-frame {
    grid-area: frame;
    width: auto;
    max-width: none;
  }
}