/* src/components/jr/ink/ink.css — the SJ Ink surface.
   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ Ink surface.dc.html. Every
   value below is measured off her file; her geometry is carried inline there, so the port
   moves each declaration into a class of the same shape and the pixels stay identical.

   THE JS MIRRORS THIS CSS EXACTLY. ink.js's geom() computes rows as equal flex slices of the
   host and cells as equal flex slices of a row, and reads the guide lines at 8% / 46% / 82%.
   If a number here moves, the same number moves there, or the ink lands off the line.

   WHAT IS DELIBERATELY DIFFERENT FROM HER FILE:
     - sj-ink-in keeps her 3px lift and loses her fade (plan ruling 3, CLAUDE.md's hidden-tab
       rule). A mark that appears under a letter must not depend on an opacity animation.
     - sj-ink-caret keeps its fade, and is named in tools/audit/rules_audit.mjs. A caret that
       does not blink is not a caret, blinking IS disappearing, and nothing depends on it: it
       is aria-hidden decoration inside a band that is already coloured. */

.jr-ink {
  --jr-ink-mark: #13251f;
  --jr-ink-body: #4a5a52;
  --jr-ink-soft: #6b7b72;
  --jr-ink-hair: #e3eae4;
  --jr-ink-green: #15803d;
  --jr-ink-peri: #6c4fe0;
  --jr-ink-peri-ink: #5638c4;
  --jr-ink-peri-tint: #efebfe;
  --jr-ink-paper: #e4dcc6;
  --jr-ink-paper-deep: #cfc5a9;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  font-family: var(--sj-font);
  color: var(--jr-ink-mark);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* When a host wants the surface in flow rather than filling a positioned box. */
.jr-ink-flow { position: relative; inset: auto; width: 100%; height: 100%; }

/* The UA's own `[hidden] { display: none }` loses to any author `display:` on the same
   element, and both the pen pill and the hint are flex. Without this the pen pill showed as an
   empty lilac blob before a stylus had ever touched the glass, and the hint would have stayed
   under a child's own handwriting. */
.jr-ink [hidden] { display: none !important; }

.jr-ink-rows { position: absolute; inset: 0; display: flex; flex-direction: column; }
.jr-ink-row { position: relative; flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- the ruling */
/* Her three-line guide: a hairline top line, a dashed middle line, a solid baseline. */
.jr-ink-top { position: absolute; left: 0; right: 0; top: 8%; height: 1px; background: var(--jr-ink-paper); display: block; }
.jr-ink-mid { position: absolute; left: 0; right: 0; top: 46%; height: 0; border-top: 2px dashed var(--jr-ink-paper); display: block; }
.jr-ink-base { position: absolute; left: 0; right: 0; top: 82%; height: 2px; background: var(--jr-ink-paper-deep); display: block; }

/* ---------------------------------------------------------------- the active row */
.jr-ink-active {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  bottom: 14%;
  background: var(--jr-ink-peri-tint);
  border-bottom: 3px solid var(--jr-ink-peri);
  border-radius: 8px 8px 0 0;
  display: block;
}

.jr-ink-caret {
  position: absolute;
  left: 10px;
  top: 34%;
  bottom: 22%;
  width: 3px;
  border-radius: 2px;
  background: var(--jr-ink-peri);
  animation: sj-ink-caret 1.1s step-end infinite;
  display: block;
}

.jr-ink-here {
  position: absolute;
  right: 12px;
  top: 52%;
  font-family: var(--sj-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--jr-ink-peri-ink);
}

.jr-ink-label {
  position: absolute;
  left: 0;
  top: 38%;
  width: 34px;
  text-align: right;
  font-family: var(--sj-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--jr-ink-soft);
}

/* ---------------------------------------------------------------- marks under free ink */
.jr-ink-spots { position: absolute; inset: 0; }
.jr-ink-spot { position: absolute; top: 0; bottom: 0; display: block; }

.jr-ink-spot-wrong {
  position: absolute;
  left: -6%;
  right: -6%;
  top: 2%;
  bottom: 6%;
  border: 2px dashed var(--jr-ink-soft);
  border-radius: 14px;
  background: rgba(247, 248, 246, .5);
  display: block;
  animation: sj-ink-in .22s ease-out both;
}

.jr-ink-spot-ok {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 86%;
  height: 4px;
  border-radius: 3px;
  background: var(--jr-ink-green);
  display: block;
  animation: sj-ink-in .22s ease-out both;
}

/* ---------------------------------------------------------------- letter boxes */
.jr-ink-cells { position: absolute; inset: 0; display: flex; }
.jr-ink-cell { position: relative; flex: 1; min-width: 0; }

.jr-ink-divider { position: absolute; left: 0; top: 14%; bottom: 8%; width: 1px; background: #f0eada; display: block; }

.jr-ink-cell-wrong {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 2%;
  bottom: 6%;
  border: 2px dashed var(--jr-ink-soft);
  border-radius: 16px;
  background: rgba(247, 248, 246, .55);
  display: block;
  animation: sj-ink-in .22s ease-out both;
}

.jr-ink-cell-ok {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 84%;
  height: 5px;
  border-radius: 3px;
  background: var(--jr-ink-green);
  display: block;
  animation: sj-ink-in .22s ease-out both;
}

.jr-ink-cell-missing {
  position: absolute;
  left: 34%;
  right: 34%;
  top: 80%;
  height: 0;
  border-top: 3px dotted var(--jr-ink-soft);
  display: block;
}

/* ---------------------------------------------------------------- the canvas */
.jr-ink-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ---------------------------------------------------------------- the tools */
.jr-ink-tools {
  position: absolute;
  right: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 4;
}

.jr-ink-tools-top { top: 10px; bottom: auto; }
.jr-ink-tools-bottom { top: auto; bottom: 2px; }

.jr-ink-pen {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 100px;
  background: var(--jr-ink-peri-tint);
  border: 1px solid #d8cffa;
  font-family: var(--sj-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--jr-ink-peri-ink);
}

/* Her tool is a 44px square. That is under the 64px child floor and is named in the auditor:
   these two are the corrections a child makes to their OWN marks, not the answer, and both sit
   inside the writing area where a bigger target would cover the line they are writing on. */
.jr-ink-tool {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--jr-ink-hair);
  box-shadow: 0 2px 8px rgba(22, 50, 35, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jr-ink-body);
  cursor: pointer;
  padding: 0;
}

.jr-ink-tool:hover { background: #f7faf7; color: var(--jr-ink-mark); }
.jr-ink-tool:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- the hint */
.jr-ink-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.jr-ink-hint-text {
  font-family: var(--sj-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--jr-ink-soft);
}

/* ---------------------------------------------------------------- animation */
/* TRANSFORM-ONLY: her sjInkIn began at opacity 0 and the fade is dropped. */
@keyframes sj-ink-in {
  from { transform: translateY(3px); }
  to { transform: none; }
}

/* The one opacity keyframe on this surface, named in tools/audit/rules_audit.mjs. */
@keyframes sj-ink-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}