/* ============================================================
   WRITE v4 — paper world (blue spine)
   Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
   Hallmark · genre: study practice · tone: studied paper craft
   · anchor: indigo 250 · macrostructure: desk > ruled working sheet > action rail
   · theme: studied-DNA (source: STUDY_PAPER_UI_DESIGN_SPEC)
   · contrast: pass (40–41) · mobile: pass (320 / 375 / 414 / 768)
   Overlay skin scoped to body.write-v4. It rides ON TOP of v3's
   styles.css (the functional layout is kept; only the material
   world is attached), the same "attach, don't restructure" rule
   used for the feature as a whole.
   Palette + traps: docs/20_SPECS/study/STUDY_PAPER_UI_DESIGN_SPEC.md
   ============================================================ */

@font-face {
  font-family: "Satisfy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/satisfy-regular.ttf") format("truetype");
}

html.write-v4-root {
  overflow-x: clip;
}

body.write-v4 {
  /* ---- ink: blue-black, continuous with v3's handwriting ink #172554 ---- */
  --pv-ink: #1c2438;
  --pv-muted: #566079;
  --pv-line: #c3ccd9;
  /* ---- pigment: meaning colours, SHARED with CARDS, never varied ---- */
  --pv-done: #3d6b2f;
  --pv-almost: #a5701f;
  --pv-again: #a33227;
  /* ---- accent: WRITE's identity spine = indigo. Primary button + seal wear it ---- */
  --pv-accent: #2f4f6b;
  --pv-accent-hi: #37587a;
  --pv-accent-lo: #26445f;
  --pv-wax: var(--pv-accent);
  /* ---- washi: the ONE shared neutral texture (colour comes from the tint under it) ---- */
  --pv-washi: url("/commons/img/textures/washi.jpg");
  /* chapter-tape tints on the blue spine (BASIC pale -> SPECIAL deep) */
  --pv-tape-basic: #e3e9ee; --pv-tape-basic-lo: #ccd8e0;
  --pv-tape-special: #b9c8d8; --pv-tape-special-lo: #9db0c6;
  /* practice sheet and control tokens */
  --pv-paper: oklch(97% 0.008 250);
  --pv-paper-deep: oklch(93% 0.012 250);
  --pv-paper-blue: oklch(95% 0.026 245);
  --pv-rule-soft: oklch(84% 0.022 250);
  --pv-rule-strong: oklch(64% 0.045 250);
  --pv-control-ink: oklch(28% 0.045 250);
  --pv-focus: oklch(74% 0.15 82);
  --pv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pv-dur-micro: 120ms;
  /* one family, weight-differentiated. No system-ui (breaks Vietnamese tone marks) */
  --pv-font: "Lora", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  font-family: var(--pv-font);
  color: var(--pv-ink);
  /* desk = the shared dark wood (same as CARDS; the family floor is common) */
  background:
    repeating-linear-gradient(93deg, #ffffff05 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #4a3c2d, #332619);
  min-height: 100dvh;
  overflow-x: clip;
}

/* The pen runs off the right edge; clip on #app so no real horizontal scroll,
   and safe-center so an overflow never makes the LEFT edge unreachable (§4.8/4.9). */
body.write-v4 #app {
  display: flex; align-items: flex-start; padding: 9px 7px; overflow-x: clip;
  justify-content: center;
  justify-content: safe center;
}

/* ---- stage: board + pen + content ---- */
body.write-v4 .pv-stage { position: relative; width: min(100%, 470px); min-height: calc(100dvh - 18px); }
/* Indigo desk blotter. NOT rotated (§4.1): the slant is px on the top/bottom
   edges via clip-path, height-independent. drop-shadow, not box-shadow (§4.2). */
body.write-v4 .pv-board {
  position: absolute; inset: -10px -4px -2px; z-index: 0;
  background:
    repeating-linear-gradient(0deg, #00000010 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #3f4a67, #333d59);
  clip-path: polygon(0 0, 100% 7px, 100% 100%, 0 calc(100% - 7px));
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.42)) drop-shadow(0 2px 0 rgba(0,0,0,.2));
}
body.write-v4 .pv-pen {
  position: absolute; z-index: 1; top: 40px; right: -60px; width: 196px;
  pointer-events: none; transform: rotate(32deg); filter: drop-shadow(0 7px 9px #00000033);
}
body.write-v4 .pv-shell {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  min-height: calc(100dvh - 18px);
}

/* ---- topbar sits directly on the blotter ---- */
body.write-v4 .cw-topbar {
  position: relative;
  z-index: 3;
  background: transparent; border: none; box-shadow: none;
  padding: 12px 22px 6px 14px; gap: 10px;
}
body.write-v4 .cw-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; text-decoration: none;
}
/* mode-reactive mark */
body.write-v4 .pv-mark { display: inline-flex; align-items: center; }
body.write-v4 .pv-mark__press { display: block; height: 30px; width: auto; filter: drop-shadow(0 2px 2px #0007); }
body.write-v4 .pv-mark__cursive {
  font-family: "Satisfy", cursive; font-size: 40px; line-height: .8; color: #e9edf5;
  text-shadow: 0 1px 1px #0007, 0 0 1px #0a1020; padding: 0 2px;
}
body.write-v4 .pv-brand__tag {
  padding-left: 2px;
  color: #c3ccdb;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.32);
}
body.write-v4 .cw-topbar__status {
  font-family: var(--pv-font); font-weight: 700; font-size: 13px;
  color: #c3ccdb; text-shadow: 0 1px 0 rgba(0,0,0,.3); background: none; border: none;
}
body.write-v4 .cw-top-control,
body.write-v4 .cw-icon-btn {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--pv-rule-soft); border-radius: 3px;
  background: linear-gradient(var(--pv-paper), var(--pv-paper-deep));
  color: var(--pv-control-ink);
  box-shadow: 0 2px 0 oklch(64% 0.025 250 / .55);
  transition: transform var(--pv-dur-micro) var(--pv-ease-out), background-color var(--pv-dur-micro) var(--pv-ease-out);
}
body.write-v4 .cw-login-control:disabled {
  opacity: .72; cursor: not-allowed;
  background: linear-gradient(oklch(91% 0.01 250), oklch(86% 0.012 250));
  color: oklch(43% 0.035 250);
}
body.write-v4 .cw-top-select { color: inherit; }
body.write-v4 .write-settings-menu {
  position: relative;
  flex: none;
}
body.write-v4 .write-settings-menu > summary {
  list-style: none;
}
body.write-v4 .write-settings-menu > summary::-webkit-details-marker {
  display: none;
}
body.write-v4 .write-settings-menu__toggle {
  justify-content: center;
}
body.write-v4 .write-settings-menu__toggle > svg {
  flex: none;
}
body.write-v4 .write-settings-menu__panel {
  position: absolute;
  z-index: 100;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: min(330px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
  border: 1px solid var(--pv-rule-strong);
  border-radius: 4px;
  background: linear-gradient(var(--pv-paper), var(--pv-paper-deep));
  color: var(--pv-control-ink);
  padding: 14px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--pv-ink) 28%, transparent);
}
body.write-v4 .write-settings-menu__head {
  display: grid;
  gap: 4px;
}
body.write-v4 .write-settings-menu__head strong {
  font-size: 17px;
}
body.write-v4 .write-settings-menu__head p,
body.write-v4 .write-settings-menu__note {
  margin: 0;
  color: var(--pv-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
body.write-v4 .write-settings-menu__choices {
  gap: 6px;
  margin-top: 0;
}
body.write-v4 .write-settings-menu__choices .cw-small-label {
  display: none;
}
body.write-v4 .write-settings-menu__choices .cw-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.write-v4 .write-settings-menu__choice {
  min-width: 0;
  min-height: 46px;
  justify-content: flex-start;
  border-width: 1px;
  background: var(--pv-paper);
  color: var(--pv-control-ink);
  padding-inline: 10px;
  white-space: nowrap;
}
body.write-v4 .write-settings-menu__choice[data-hint-policy="adaptive"] {
  grid-column: 1 / -1;
}
body.write-v4 .write-settings-menu__choice > svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  opacity: 0;
}
body.write-v4 .write-settings-menu__choice[data-active="true"] {
  border-color: var(--pv-accent);
  background: var(--pv-paper-blue);
  color: var(--pv-control-ink);
  box-shadow: inset 0 0 0 1px var(--pv-accent);
}
body.write-v4 .write-settings-menu__choice[data-active="true"] > svg {
  opacity: 1;
}
body.write-v4 :is(button, summary, select, a):focus-visible {
  outline: 3px solid var(--pv-focus);
  outline-offset: 3px;
}
body.write-v4 :is(.cw-btn, .cw-top-control, .cw-icon-btn, .write-hand-pad__tool) {
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  body.write-v4 :is(.cw-btn, .cw-top-control, .cw-icon-btn, .write-hand-pad__tool):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

/* letterpress-ish deboss for serif headings on the paper */
body.write-v4 .cw-title,
body.write-v4 .pv-word,
body.write-v4 .pv-mean { text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---- setup panel = the writing paper stack (ruled), sitting on the blotter ---- */
body.write-v4 .cw-panel {
  position: relative; margin: 8px 6px 22px; border: none; border-radius: 2px;
  background: linear-gradient(#fefefe, #f5f7fa);
  box-shadow: 0 3px 0 #e8ebf0, 0 6px 0 #dfe3ea, 0 9px 0 #d6dbe4, 0 12px 0 #cdd3de, 0 18px 26px rgba(0,0,0,.4);
  padding: 16px 15px 18px;
}
body.write-v4 .cw-subtitle { color: #4a5266; font-size: 14px; font-weight: 600; line-height: 1.5; margin: 2px 0 10px; }

/* ---- primary commit button = the indigo spine. Darkened so white text reads
   clearly (the lighter accent-hi washed the label out). ---- */
body.write-v4 .cw-btn--primary {
  border: none; color: #ffffff; font-weight: 800;
  background: linear-gradient(180deg, #2c4763, #182c40);
  box-shadow: 0 4px 0 #10202f, inset 0 1px 0 #ffffff33; text-shadow: 0 1px 3px #000000aa;
}

/* ---- mode picker cards = paper tiles; active gets the indigo edge ---- */
body.write-v4 .write-mode-btn {
  background: linear-gradient(#fffefb, #f4f6f9); border: 1px solid #d7dde6; border-radius: 6px;
  color: var(--pv-ink); box-shadow: 0 2px 0 #dfe3ea;
}
body.write-v4 .write-mode-btn[data-active="true"] {
  border-color: var(--pv-accent); box-shadow: inset 0 0 0 1px var(--pv-accent), 0 2px 0 #cdd3de;
  background: linear-gradient(#f2f6fb, #e6edf6);
}
body.write-v4 .write-mode-btn strong { color: var(--pv-accent-lo); }
/* door art: pick up the tool. Card is a vertical stack — tool on top, then the
   name, then the one-line description. Overrides v3's icon-beside-text layout. */
body.write-v4 .write-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.write-v4 .write-mode-btn {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 12px 10px 13px; min-height: 0;
}
body.write-v4 .write-mode-btn__door {
  width: auto; height: 58px; margin: 0 0 3px;
  filter: drop-shadow(0 3px 4px #00000045);
}
body.write-v4 .write-mode-btn[data-active="true"] .write-mode-btn__door { filter: drop-shadow(0 3px 6px #00000060); }
body.write-v4 .write-mode-btn strong { font-size: 15px; }
body.write-v4 .write-mode-btn span { font-size: 11.5px; color: var(--pv-muted); line-height: 1.4; }

/* ---- at-a-glance progress: CARDS' useful overview, translated into WRITE.
   The needle marks how much of the selected level has been practised in the
   CURRENT mode. The coloured arc keeps the quality split honest; unseen stays
   as the pale track. This is a clean memo card, not another ruled surface. ---- */
body.write-v4 .write-progress-meter {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--pv-line);
  border-radius: 4px;
  background: linear-gradient(145deg, var(--pv-paper), var(--pv-paper-deep));
  box-shadow: 0 2px 0 var(--pv-rule-soft), inset 0 1px 0 color-mix(in srgb, var(--pv-paper) 75%, transparent);
}
body.write-v4 .write-progress-meter__main {
  display: grid;
  grid-template-columns: minmax(112px, 142px) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--pv-rule-strong) 42%, transparent);
}
body.write-v4 .write-progress-gauge {
  width: 100%;
  max-width: 142px;
  line-height: 0;
}
body.write-v4 .write-progress-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
body.write-v4 .write-progress-gauge__track,
body.write-v4 .write-progress-gauge__band {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
}
body.write-v4 .write-progress-gauge__track { stroke: var(--pv-rule-soft); }
body.write-v4 .write-progress-gauge__band[data-status="ready"] { stroke: var(--pv-done); }
body.write-v4 .write-progress-gauge__band[data-status="almost"] { stroke: var(--pv-almost); }
body.write-v4 .write-progress-gauge__band[data-status="retry"] { stroke: var(--pv-again); }
body.write-v4 .write-progress-gauge__ticks line {
  stroke: var(--pv-muted);
  stroke-width: 2;
  opacity: .52;
}
body.write-v4 .write-progress-gauge__needle {
  stroke: var(--pv-ink);
  stroke-width: 4;
  stroke-linecap: round;
}
body.write-v4 .write-progress-gauge__pin {
  fill: var(--pv-ink);
  stroke: var(--pv-paper);
  stroke-width: 2;
}
body.write-v4 .write-progress-meter__read {
  min-width: 0;
  padding-bottom: 3px;
}
body.write-v4 .write-progress-meter__mode {
  color: var(--pv-accent-lo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
body.write-v4 .write-progress-meter__label {
  margin-top: 4px;
  color: var(--pv-muted);
  font-size: 11.5px;
  font-weight: 700;
}
body.write-v4 .write-progress-meter__big {
  color: var(--pv-ink);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body.write-v4 .write-progress-meter__sub {
  margin-top: 3px;
  color: var(--pv-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.write-v4 .write-progress-meter__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding-top: 12px;
}
body.write-v4 .write-progress-meter__status {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--pv-muted);
  font-size: 12px;
  font-weight: 700;
}
body.write-v4 .write-progress-meter__status > span:nth-child(2) {
  overflow-wrap: anywhere;
  line-height: 1.3;
}
body.write-v4 .write-progress-meter__status strong {
  color: var(--pv-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.write-v4 .write-progress-meter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pv-rule-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-ink) 12%, transparent);
}
body.write-v4 .write-progress-meter__status[data-status="ready"] .write-progress-meter__dot { background: var(--pv-done); }
body.write-v4 .write-progress-meter__status[data-status="almost"] .write-progress-meter__dot { background: var(--pv-almost); }
body.write-v4 .write-progress-meter__status[data-status="retry"] .write-progress-meter__dot { background: var(--pv-again); }

/* ---- practice: a working sheet, not the generic v3 card ---- */
body.write-v4 .write-practice-card {
  position: relative;
  width: min(100%, 680px);
  margin: 8px 6px 22px;
  padding: 14px 14px 0;
  border: none; border-radius: 2px;
  color: var(--pv-ink);
  background: var(--pv-paper);
  box-shadow:
    0 3px 0 oklch(91% 0.012 250),
    0 7px 0 oklch(86% 0.016 250),
    0 15px 24px oklch(16% 0.02 250 / .42);
}
body.write-v4 .write-session-meter {
  min-height: 28px;
  color: oklch(42% 0.035 250);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
body.write-v4 .write-session-meter__track {
  height: 5px; border-radius: 1px;
  background: var(--pv-rule-soft);
}
body.write-v4 .write-session-meter__track i {
  border-radius: inherit;
  background: var(--pv-accent);
}
body.write-v4 .write-session-meter > span:last-child {
  padding: 3px 7px;
  border: 1px solid var(--pv-rule-soft);
  background: var(--pv-paper-deep);
  color: var(--pv-control-ink);
  line-height: 1.2;
}
body.write-v4 .write-prompt {
  position: relative;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px 12px;
  border-bottom: none;
  text-align: center;
}
body.write-v4 .write-prompt__label {
  color: oklch(44% 0.035 250);
  font-size: 11px; letter-spacing: .1em;
}
body.write-v4 .write-prompt__text {
  max-width: 22ch;
  color: var(--pv-ink);
  font-size: clamp(25px, 7vw, 36px);
  font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 oklch(100% 0 0 / .7);
}
body.write-v4 .write-prompt .cw-card__meta {
  position: absolute; top: 6px; right: 0;
  margin: 0;
}
body.write-v4 .write-prompt .cw-chip {
  border: 1px solid var(--pv-rule-soft); border-radius: 1px;
  background: var(--pv-paper-deep);
  color: oklch(43% 0.04 250);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
body.write-v4 .write-mode-note {
  color: oklch(42% 0.025 250);
  font-size: 13px; font-weight: 600;
}
body.write-v4 .write-hint-card {
  position: relative;
  gap: 5px;
  border: 1px solid var(--pv-rule-soft); border-radius: 1px;
  background: var(--pv-paper-blue);
  color: var(--pv-ink);
  padding: 8px 11px;
  box-shadow: 0 2px 0 oklch(78% 0.022 250 / .55);
}
body.write-v4 .write-hint-card__title,
body.write-v4 .write-hint-card__row span {
  color: oklch(41% 0.045 250);
}
body.write-v4 .write-hint-card__row strong {
  color: var(--pv-ink);
  font-weight: 700;
}
body.write-v4 .write-word-stepper__word {
  border: 1px solid var(--pv-rule-soft); border-radius: 1px;
  background: var(--pv-paper);
  color: var(--pv-control-ink);
}
body.write-v4 .write-word-stepper__word[data-state="current"] {
  border-color: var(--pv-accent);
  background: var(--pv-paper-blue);
  color: var(--pv-accent-lo);
}
body.write-v4 .write-hand-pad__surface {
  border: 1px solid var(--pv-rule-strong); border-radius: 3px;
  background: var(--pv-paper);
  box-shadow: inset 0 1px 8px oklch(22% 0.02 250 / .08), 0 2px 0 oklch(82% 0.018 250);
}
body.write-v4 .write-hand-pad[data-guide-visible="true"] .write-hand-pad__guide {
  color: oklch(48% 0.1 270 / .22);
}
body.write-v4 .write-hand-pad__empty {
  color: oklch(45% 0.035 250 / .72);
  font-size: 14px;
}
body.write-v4 .write-hand-pad__toolbar {
  padding-block: 2px 0;
}
body.write-v4 .write-hand-pad__tool {
  min-height: 44px;
  border: 1px solid var(--pv-rule-soft); border-radius: 2px;
  background: linear-gradient(var(--pv-paper), var(--pv-paper-deep));
  color: var(--pv-control-ink);
  box-shadow: 0 2px 0 oklch(77% 0.02 250);
}
body.write-v4 .write-answer {
  border: 1px solid var(--pv-rule-strong); border-radius: 2px;
  background: var(--pv-paper-blue);
}
body.write-v4 .write-answer__word { color: var(--pv-accent-lo); }
body.write-v4 .write-feedback {
  border-width: 1px; border-radius: 2px;
}
body.write-v4 .write-strict-telex .gg-pseudo-input__box,
body.write-v4 .write-strict-telex .gg-telex-input__panel {
  border: 1px solid var(--pv-rule-strong); border-radius: 3px;
  background: var(--pv-paper-deep);
  color: var(--pv-ink);
  box-shadow: 0 2px 0 oklch(78% 0.02 250);
}
body.write-v4 .write-telex-cheat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--pv-rule-soft);
  border-radius: 2px;
  background: var(--pv-paper-blue);
  color: var(--pv-control-ink);
  font: 700 13px/1.2 var(--pv-font);
  letter-spacing: .02em;
  text-align: left;
  box-shadow: 0 2px 0 var(--pv-rule-soft);
  cursor: pointer;
}
body.write-v4 .write-telex-cheat-toggle:hover {
  background: color-mix(in srgb, var(--pv-paper-blue) 72%, var(--pv-paper));
}
body.write-v4 .write-telex-cheat-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--pv-rule-soft);
}
body.write-v4 .write-telex-cheat-toggle:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
body.write-v4 .write-telex-cheat-toggle__label {
  white-space: nowrap;
}
body.write-v4 .write-telex-cheat-toggle__indicator {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--pv-accent-lo);
  font-family: var(--pv-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
body.write-v4 .write-strict-telex .gg-telex-input__key {
  border: 1px solid var(--pv-rule-soft); border-radius: 3px;
  background: linear-gradient(var(--pv-paper), var(--pv-paper-deep));
  color: var(--pv-control-ink);
  box-shadow: 0 2px 0 oklch(72% 0.025 250);
}
body.write-v4 .write-strict-telex .gg-telex-input__key--highlighted-base,
body.write-v4 .write-strict-telex .gg-telex-input__key--highlighted-tone {
  border-color: var(--pv-accent);
  background: var(--pv-paper-blue);
  color: var(--pv-accent-lo);
}
body.write-v4 .write-action-dock {
  margin: 0 -14px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px dashed var(--pv-rule-strong);
  background: linear-gradient(oklch(97% 0.008 250 / .3), var(--pv-paper) 28%);
}
body.write-v4 .write-action-dock .cw-btn {
  min-height: 52px;
  border: 1px solid var(--pv-rule-strong); border-radius: 3px;
  background: linear-gradient(var(--pv-paper), var(--pv-paper-deep));
  color: var(--pv-control-ink);
  box-shadow: 0 3px 0 oklch(72% 0.025 250);
}
body.write-v4 .write-action-dock .cw-btn--primary {
  border: none;
  background: linear-gradient(180deg, #2c4763, #182c40);
  color: #ffffff;
  box-shadow: 0 4px 0 #10202f, inset 0 1px 0 #ffffff33;
}
body.write-v4 .write-action-dock .cw-btn:disabled {
  opacity: .56;
  cursor: not-allowed;
}

/* ---- result: wax seal impressed on the blotter (no white panel) ---- */
body.write-v4 .cw-result.pv-done {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 30px 18px 44px; text-align: center;
  background: transparent; border: none; box-shadow: none;
}
body.write-v4 .pv-seal {
  width: 146px; height: 146px;
  background: url("assets/wax_seal_g.png") center/contain no-repeat;
  filter: drop-shadow(0 10px 18px #00000055);
  animation: wv4-stamp .4s cubic-bezier(.2,1.25,.5,1) .1s both;
}
@keyframes wv4-stamp { 0%{transform:scale(1.7) rotate(-12deg);opacity:0} 55%{transform:scale(.92) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(-3deg);opacity:1} }
body.write-v4 .pv-done__title { font-size: 27px; font-weight: 700; color: #eef2f8; text-shadow: 0 1px 2px #0006; }
body.write-v4 .write-result-mode { color: #b7c0d6; font-size: 14px; font-weight: 600; }
body.write-v4 .cw-result-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: baseline;
  width: min(100%, 280px); padding: 8px 13px; border-radius: 4px;
  background: linear-gradient(#fbfcfe, #eef2f7); border: 1px solid #dbe1ea;
  box-shadow: 0 2px 0 #d3dae4; font-family: var(--pv-font); font-size: 14px; color: var(--pv-ink);
}
body.write-v4 .cw-result-row::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--row-mark);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
/* rows are children 4/5/6 (seal, title, mode-line precede them) */
body.write-v4 .cw-result-row:nth-child(4) { --row-mark: var(--pv-done); }
body.write-v4 .cw-result-row:nth-child(5) { --row-mark: var(--pv-almost); }
body.write-v4 .cw-result-row:nth-child(6) { --row-mark: var(--pv-again); }
body.write-v4 .cw-result-row strong { font-size: 17px; }

/* ---- rating buttons: washi tiles carrying the shared meaning colours + icon+label.
   WRITE already ships icon+label (its strength); we only attach the paper skin. ---- */
body.write-v4 .study-rating-btn {
  background: linear-gradient(180deg, var(--rc-hi, #eef1f6), var(--rc, #dfe4ec)), var(--pv-washi);
  background-size: cover, 150px; background-blend-mode: multiply, multiply;
  border: 1px solid var(--rc-edge, #cfd6e0); border-radius: 6px; color: var(--rc-ink, #37414f);
  box-shadow: inset 0 -8px 12px #00000012, 0 2px 0 #cdd3de;
}
body.write-v4 .study-rating-btn--wrong   { --rc:#e0a89c; --rc-hi:#f0cec6; --rc-edge:#c88a7e; --rc-ink:#7c1a16; }
body.write-v4 .study-rating-btn--almost  { --rc:#e6cf9a; --rc-hi:#f4e3bd; --rc-edge:#c9ab6a; --rc-ink:#6d4a12; }
body.write-v4 .study-rating-btn--correct { --rc:#bcd8a6; --rc-hi:#d8ecc9; --rc-edge:#8fb277; --rc-ink:#2a4c20; }
body.write-v4 .study-rating-btn__icon { color: currentColor; }

/* ---- setup accordions = masking-tape chapters on the paper ---- */
body.write-v4 .write-setup-details {
  margin-top: 16px; border: none; border-radius: 0; background: transparent; overflow: visible;
}
body.write-v4 .write-setup-details > summary {
  position: relative; min-height: 0; list-style: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0 6px 0 -34px; padding: 7px 15px 8px 40px;
  transform: rotate(-0.5deg); transform-origin: 0 50%;
  font-family: var(--pv-font); font-weight: 700; font-size: 16px; color: #2a3242;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  background: linear-gradient(180deg, var(--pv-tape-basic), var(--pv-tape-basic-lo)), var(--pv-washi);
  background-size: cover, 150px; background-blend-mode: multiply, multiply;
  filter: drop-shadow(0 2px 3px #00000030);
  clip-path: polygon(
    3px 1.6px, 22% 0.6px, 39% 1.5px, 55% 0.5px, 72% 1.4px, 89% 0.6px, calc(100% - 3px) 1.2px,
    100% 34%, calc(100% - 3px) 68%, 100% calc(100% - 1px),
    76% calc(100% - .6px), 52% calc(100% - 1.5px), 28% calc(100% - .8px), 3px calc(100% - 1.2px),
    0 66%, 3px 33%);
  cursor: pointer;
}
body.write-v4 .write-setup-summary__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
body.write-v4 .write-setup-summary__copy strong {
  font: inherit;
}
body.write-v4 .write-setup-summary__copy small {
  color: var(--pv-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
/* SPECIAL(課外練習) = a deeper shade of the same blue tape, so the set reads as one family */
body.write-v4 .write-extra-practice > summary,
body.write-v4 details.write-setup-details:last-of-type > summary {
  background: linear-gradient(180deg, var(--pv-tape-special), var(--pv-tape-special-lo)), var(--pv-washi);
  background-size: cover, 150px; background-blend-mode: multiply, multiply;
}
/* toggle indicator: a clean +/− instead of the stray "?" */
body.write-v4 .write-setup-details > summary::after {
  content: "＋"; margin-left: auto; font-weight: 700; color: var(--pv-accent-lo);
  font-family: var(--pv-font); opacity: .7;
}
body.write-v4 .write-setup-details[open] > summary::after { content: "−"; }
body.write-v4 .write-setup-details__body {
  border-top: none; padding: 14px 4px 6px; margin-top: 2px;
}

/* ---- level scope = washi index tabs (scoped to .pv-levels so the other
   choice chips in this feature are untouched — §4.4) ---- */
body.write-v4 .pv-levels .cw-small-label { margin-bottom: 6px; }
body.write-v4 .pv-levels .cw-choice-row { position: relative; display: flex; gap: 0; flex-wrap: nowrap; align-items: flex-start; }
body.write-v4 .pv-levels .cw-choice-chip {
  flex: 1 1 0; min-width: 52px; position: relative;
  border: none; border-radius: 0; cursor: pointer; margin-left: -7px;
  padding: 9px 5px 11px; color: #3a352c; font-family: var(--pv-font); font-weight: 700;
  font-size: 12.5px; line-height: 1.2; text-align: center; display: grid; gap: 1px; opacity: .9;
  --c: #d9cbb0; --ch: #e6dcc4;
  background: linear-gradient(180deg, var(--ch), var(--c)), var(--pv-washi);
  background-size: cover, 150px; background-blend-mode: multiply, multiply;
  box-shadow: inset 0 -12px 16px #00000026, inset 0 0 0 1px #00000014;
  clip-path: polygon(1px 5px, 15% 3px, 30% 5px, 45% 3px, 60% 4px, 75% 3px, 90% 5px, calc(100% - 1px) 4px,
    100% 30%, calc(100% - 1.5px) 64%, calc(100% - 1px) calc(100% - 1px),
    74% 100%, 48% calc(100% - 2px), 22% 100%, 1px calc(100% - 1px), 0 66%, 1.5px 33%);
}
body.write-v4 .pv-levels .cw-choice-chip:first-child { margin-left: 0; }
body.write-v4 .pv-levels .cw-choice-chip strong { font-size: 13px; }
body.write-v4 .pv-levels .cw-choice-chip span { font-family: var(--pv-font); font-size: 10px; font-weight: 700; opacity: .72; }
body.write-v4 .pv-levels .cw-choice-chip:nth-child(1) { --c:#9cc27f; --ch:#b7d79d; z-index: 6; }
body.write-v4 .pv-levels .cw-choice-chip:nth-child(2) { --c:#e0c057; --ch:#efd680; z-index: 5; }
body.write-v4 .pv-levels .cw-choice-chip:nth-child(3) { --c:#7fb0d6; --ch:#a6cbe7; z-index: 4; }
body.write-v4 .pv-levels .cw-choice-chip:nth-child(4) { --c:#c191c9; --ch:#d8b2de; z-index: 3; }
body.write-v4 .pv-levels .cw-choice-chip:nth-child(5) { --c:#e0977f; --ch:#efb7a4; z-index: 2; }
body.write-v4 .pv-levels .cw-choice-chip[data-active="true"] {
  opacity: 1; z-index: 12; padding-bottom: 15px;
  box-shadow: inset 0 -12px 16px #00000026, inset 0 0 0 2px #00000038;
}

@media (max-width: 720px) {
  body.write-v4 .cw-topbar {
    padding-inline: 10px 14px;
  }
  body.write-v4 .pv-mark__press { height: 26px; }
  body.write-v4 .pv-mark__cursive { font-size: 35px; }
  body.write-v4 .write-settings-menu__label { display: none; }
  body.write-v4 .write-settings-menu__toggle {
    width: 44px;
    padding-inline: 0;
  }
  body.write-v4 .write-practice-card {
    height: calc(100dvh - 118px);
    min-height: calc(100dvh - 118px);
    margin-inline: 2px;
    padding: 12px 11px 88px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.write-v4 .write-action-dock {
    position: fixed;
    right: auto;
    bottom: 0;
    left: 50%;
    width: min(calc(100vw - 28px), 656px);
    margin: 0;
    padding-inline: 11px;
    transform: translateX(-50%);
  }
}

@media (max-width: 360px) {
  body.write-v4 .cw-brand { gap: 1px; }
  body.write-v4 .pv-mark__press { height: 23px; }
  body.write-v4 .pv-mark__cursive { font-size: 31px; }
  body.write-v4 .write-progress-meter {
    padding-inline: 8px;
  }
  body.write-v4 .write-progress-meter__main {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
  }
  body.write-v4 .write-progress-meter__big { font-size: 24px; }
  body.write-v4 .write-practice-card {
    padding-inline: 9px;
  }
  body.write-v4 .write-action-dock {
    padding-inline: 9px;
  }
}

@media (max-width: 420px) {
  body.write-v4 .cw-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  body.write-v4 .cw-brand {
    justify-self: start;
    gap: 1px;
  }
  body.write-v4 .cw-topbar__actions {
    justify-self: end;
    flex-wrap: nowrap;
  }
  body.write-v4 .write-settings-menu {
    position: static;
  }
  body.write-v4 .write-settings-menu__panel {
    inset-block-start: calc(100% + 6px);
    inset-inline: 14px;
    width: auto;
  }
  body.write-v4 .cw-lang-control {
    width: 120px;
    gap: 4px;
    padding-inline: 7px;
  }
  body.write-v4 .cw-top-select { max-width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  body.write-v4 .pv-seal { animation: none; }
  body.write-v4 :is(.cw-btn, .cw-top-control, .cw-icon-btn, .write-hand-pad__tool) {
    transition-duration: 0ms;
  }
}