/* Masume: product layer over the orientxlabs site kit (/kit/). DESIGN.md has the reasons.
   Only the accent pair is set here; every other color comes from the kit tokens. */
:root {
  --accent-light: #B3321F;   /* the red of the new stroke on the sheet; 6.19:1 on --paper */
  --accent-dark: #EE5B3F;    /* vermilion kept in dark mode (not salmon): 5.51:1 on #101316, button text #07100F 5.69:1 */
  --sheet: #FFFFFF;          /* printed paper: stays white in dark mode */
  --sheet-ink: #16191D;
  --sheet-line: #C9CED3;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.mark { color: var(--accent); }
.brand span { font-size: var(--step-1); letter-spacing: 0; }

/* Intro + the one bold element: a row of practice squares (masu) with real KanjiVG step diagrams */
.intro { padding-block: var(--space-12) var(--space-8); border-bottom: 1px solid var(--line); }
.intro__grid { display: grid; gap: var(--space-8); align-items: end; }
@media (min-width: 1100px) { .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } }
.intro__text > * + * { margin-top: var(--space-4); }
.intro h1 { max-width: 16ch; }
@media (max-width: 767px) { .intro { padding-block: var(--space-8) var(--space-6); } }

.strokes { margin: 0; }
.strokes__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  background: var(--sheet); border: 2px solid var(--sheet-ink); }
@media (min-width: 1100px) { .strokes .strokes__row { max-width: 34rem; } }
/* Dark mode: the decorative strips are dimmed paper so they do not outshine the form and the preview (the preview stays white) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strokes__row { background: #D3D8DD; border-color: #8C949C; } :root:not([data-theme="light"]) .masu { border-left-color: #8C949C; } }
:root[data-theme="dark"] .strokes__row { background: #D3D8DD; border-color: #8C949C; }
/* earlier strokes are #c4c4c4 on the printed sheet (pale on white); on the dimmed dark-mode paper they need more weight */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strokes__row path[stroke="#c4c4c4"] { stroke: #8C949C; } }
:root[data-theme="dark"] .strokes__row path[stroke="#c4c4c4"] { stroke: #8C949C; }
:root[data-theme="dark"] .masu { border-left-color: #8C949C; }
.masu { position: relative; aspect-ratio: 1; border-left: 1px solid var(--sheet-ink); }
.masu:first-child { border-left: 0; }
.masu::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--sheet-line), var(--sheet-line)) center / 100% 1px no-repeat,
              linear-gradient(var(--sheet-line), var(--sheet-line)) center / 1px 100% no-repeat; opacity: .9; }
.masu svg { position: relative; display: block; width: 100%; height: 100%; padding: 8%; }
.strokes figcaption { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--step--1); max-width: 34rem; }
.strokes--small .strokes__row { max-width: calc(var(--n) * 3.25rem); border-width: 1.5px; }
.strokes--small figcaption { margin-top: var(--space-2); }

/* Masu: the practice square (heavy rule, dashed cross guides) reused as the UI's own marks */
.step, .output__k { position: relative; display: inline-grid; place-items: center; flex: none; border: 2px solid var(--ink); font-weight: 700;
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat; }

/* Work area: list on the left, printout on the right */
.work { display: grid; gap: var(--space-8); padding-block: var(--space-8) var(--space-12); }
@media (min-width: 1100px) { .work { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--space-12); align-items: start; } }
.work__list { margin: 0; }
.work__h { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step-1); margin-bottom: var(--space-6); }
.step { width: 34px; height: 34px; font-size: var(--step-0); }
.step::after { content: none; }
.field > legend { font-weight: 600; }
/* Groups inside the form: a rule above, a heading one step up from field labels, the same 24px rhythm everywhere */
.group { border-top: 1px solid var(--line); padding-top: var(--space-6); }
.group__h, .field > legend.group__h { font-size: 1.125rem; font-weight: 700; line-height: var(--lh-tight); }
.group__hint { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
fieldset.field > .field { margin-bottom: 0; }
fieldset.field > .field + .field { margin-top: var(--space-4); }
fieldset.group { margin-bottom: var(--space-6); }
.textarea { min-height: 9.5rem; resize: vertical; line-height: 1.7; }

.outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--control-border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .outputs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.output { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-3); font: inherit; font-weight: 600; line-height: 1.25; white-space: nowrap; color: var(--ink); background: var(--paper);
  border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); cursor: pointer; }
.output:hover { background: var(--surface); }
.output__k { width: 28px; height: 28px; border-width: 1.5px; font-size: 16px; font-weight: 600; line-height: 1; }
.output[aria-pressed="true"] .output__k { border-color: var(--accent); color: var(--accent); }
.output[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 -4px 0 var(--accent); }
.output:focus-visible { outline-offset: -3px; }
@media (max-width: 639px) { .output:nth-child(odd) { border-left: 0; } .output:nth-child(-n+2) { border-top: 0; } }
@media (min-width: 640px) { .output:first-child { border-left: 0; } .output { border-top: 0; } }

#notes:not(:empty) { margin-top: var(--space-4); border: 1px solid var(--line); border-left: 4px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
#notes p + p { margin-top: var(--space-2); }
.addread { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.addread__word { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.addread label { font-weight: 600; }
.addread .pick { font: inherit; min-height: 40px; min-width: 44px; padding: 4px 12px; color: var(--ink); background: var(--control-bg); border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; }
.addread .pick:hover { border-color: var(--ink); }
.addread .pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.addread input { font: inherit; min-height: 40px; padding: 4px 10px; max-width: 9em; color: var(--ink); background: var(--control-bg); border: 1px solid var(--control-border); border-radius: var(--radius); }
.work__out .actions { margin-top: var(--space-4); }
#preview { display: block; width: 100%; height: 60vh; margin-top: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: #DDE1E5; }
.preview-note { margin-top: var(--space-4); }

/* Header and footer */
.nav a, .nav a[aria-current="page"] { font-weight: 600; }
.site-footer { position: relative; padding-top: calc(var(--space-12) + 20px); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, transparent 0 19px, var(--line) 19px 20px); }
.site-footer__grid { align-items: start; }
.site-footer__grid > p, .site-footer__grid > p + p { margin: 0; }

/* Reading pages */
.doc-head { max-width: var(--measure); display: grid; gap: var(--space-6); margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.doc-head h1 { margin: 0; }
.doc-links { margin: 0; padding-left: 1.2em; }
.doc-links li + li { margin-top: var(--space-1); }
.prose > .doc-links { margin-top: var(--space-3); }
.doc-page { padding-block: var(--space-12); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-1); margin-top: var(--space-8); }
.prose h2 + p { margin-top: var(--space-3); }
@media (max-width: 767px) { .doc-page { padding-block: var(--space-8); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }