/* ===========================================================================
   E-ink display modes
   ===========================================================================

   Scoped entirely under html[data-display^="eink"], so a normal LCD never
   pays for any of this. Two variants:

     eink        greyscale, for a monochrome panel
     eink-color  muted palette, for a colour panel (Kaleido and friends)

   What actually matters on electrophoretic displays, and why each rule is
   here:

   * NO SHADOWS. A soft drop shadow is a dither pattern on e-ink — it reads as
     dirt, and it ghosts. Cards get a real border instead, which is what the
     shadows were standing in for anyway.

   * NO TRANSITIONS OR ANIMATIONS. A panel refresh is 100-800ms. Anything that
     animates either isn't seen or smears, and every intermediate frame is a
     full-panel flash on some controllers. The star flight, the progress-ring
     sweep, the celebration and the press-scale all stop moving; state still
     changes, it just arrives in one step.

   * CONTRAST, NOT COLOUR, CARRIES MEANING. Colour e-ink is heavily
     desaturated and mono has none at all, so anything that used a hue to say
     something needs a second channel. The per-member calendar colours are the
     real case: six tints that are identical in greyscale. They get six spaced
     grey levels *and* six distinct left-border treatments, so they stay
     tellable apart either way.

   * NO PALE GREYS ON WHITE. --ink-soft at #6b6b6b is comfortable on an LCD
     and close to invisible on e-paper under room light. Everything moves
     darker.

   Icons: e-ink mode forces the `simple` (single-colour, stroke) set — see
   web/js/display.js. The playful set's fills are large flat areas of colour,
   which is exactly what an e-ink panel is worst at.
   ======================================================================== */

/* ---------- shared by both variants ---------- */

html[data-display^="eink"] {
  /* Backgrounds go to paper white; there is no advantage to off-white here
     and it costs contrast. */
  --cream: #ffffff;
  --paper: #f4f4f4;
  --sunshine: #ececec;
  --blue-pale: #ededed;
  --blue-tint: #ededed;
  --lavender: #ededed;

  --ink: #000000;
  --ink-soft: #3d3d3d;

  --radius-card: 6px;
  --radius-btn: 5px;
  --shadow-soft: none;
}

/* Kill every shadow, everywhere, including the inline ones the workbook
   editor sets on its canvas. */
html[data-display^="eink"] *,
html[data-display^="eink"] *::before,
html[data-display^="eink"] *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Stop all motion. prefers-reduced-motion covers users who asked; this covers
   a display that physically cannot show it. */
html[data-display^="eink"] *,
html[data-display^="eink"] *::before,
html[data-display^="eink"] *::after {
  transition: none !important;
  animation: none !important;
}
html[data-display^="eink"] .kid-row:active,
html[data-display^="eink"] .btn:active,
html[data-display^="eink"] .work-btn:active,
html[data-display^="eink"] .cal-profile-btn:active {
  transform: none !important;
}
/* The flying star and the celebration overlay are pure motion — on e-ink they
   are a full-panel flash for no information. */
html[data-display^="eink"] .star-fly { display: none !important; }

/* Borders do the work shadows used to. */
html[data-display^="eink"] .card,
html[data-display^="eink"] .kid-row,
html[data-display^="eink"] .cal-pill,
html[data-display^="eink"] .assignment-pill,
html[data-display^="eink"] .cal-day-cell,
html[data-display^="eink"] .modal {
  border: 1px solid #000;
}
html[data-display^="eink"] .kid-row { border-width: 2px; }

/* Type: slightly heavier, because e-paper renders thin strokes lighter than a
   backlit panel does. */
html[data-display^="eink"] body { font-weight: 500; }
html[data-display^="eink"] .kid-row { font-weight: 600; }

/* Controls need a visible edge, not a tint. */
html[data-display^="eink"] .btn,
html[data-display^="eink"] .work-btn,
html[data-display^="eink"] .chip {
  border: 1.5px solid #000;
  background: #fff;
  color: #000;
}
html[data-display^="eink"] .btn-coral,
html[data-display^="eink"] .btn-blue,
html[data-display^="eink"] .work-btn-primary,
html[data-display^="eink"] .chip.active {
  background: #000;
  color: #fff;
}
html[data-display^="eink"] .btn[disabled],
html[data-display^="eink"] .work-btn[disabled] {
  opacity: 1;
  border-style: dashed;
  color: #767676;
}
/* Selected tool / width / fit in the editor, and the current page tab. */
html[data-display^="eink"] .work-btn.btn-coral,
html[data-display^="eink"] .work-btn.is-current {
  background: #000;
  color: #fff;
  border-color: #000;
}

html[data-display^="eink"] input,
html[data-display^="eink"] select,
html[data-display^="eink"] textarea {
  border: 1.5px solid #000;
  color: #000;
  background: #fff;
}
html[data-display^="eink"] :focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px;
}

/* Done rows: opacity .55 turns to mush. Strike-through plus a hatched
   background says "finished" without relying on tone. */
html[data-display^="eink"] .kid-row.done {
  opacity: 1;
  color: #4a4a4a;
  border-style: dashed;
  background: repeating-linear-gradient(
    45deg, #fff, #fff 5px, #f0f0f0 5px, #f0f0f0 10px);
}
html[data-display^="eink"] .kid-row.done .check {
  background: #000;
  border-color: #000;
  color: #fff;
}
html[data-display^="eink"] .kid-row.pending {
  background: #fff;
  border-style: double;
  border-width: 4px;
}

/* The kid header is a saturated colour band; on e-ink it becomes a bordered
   white panel so the child's name stays black-on-white. */
html[data-display^="eink"] .kid-header {
  background: #fff;
  color: #000;
  border-bottom: 3px solid #000;
}
html[data-display^="eink"] .kid-header h2,
html[data-display^="eink"] .kid-date { color: #000; }
html[data-display^="eink"] body.kid-mode { background: #fff; }
html[data-display^="eink"] .kid-progress .ring-track { stroke: #c8c8c8; }
html[data-display^="eink"] .kid-progress .ring-fill { stroke: #000; }
html[data-display^="eink"] .kid-progress .ring-label { fill: #000; }
html[data-display^="eink"] .icon-star { color: #000; }
html[data-display^="eink"] .kid-tabbar { border-top: 2px solid #000; }
html[data-display^="eink"] .kid-tabbar a { color: #4a4a4a; }
html[data-display^="eink"] .kid-tabbar a.active {
  color: #000;
  background: #ededed;
  border-top: 4px solid #000;
}
html[data-display^="eink"] .badge {
  background: #fff;
  color: #000;
  border: 1.5px solid #000;
}
html[data-display^="eink"] .kid-alldone {
  background: #fff;
  border: 3px double #000;
}

/* The parent sidebar is a solid navy slab — fine, it's one large area and it
   anchors the layout. Keep it, but make the active item unmistakable without
   coral. */
html[data-display^="eink"] .sidebar { background: #000; }
html[data-display^="eink"] .sidebar a { color: #e8e8e8; }
html[data-display^="eink"] .sidebar a.active {
  background: #fff;
  color: #000;
  font-weight: 800;
}

/* ---------- monochrome only ---------- */

/* Every hue collapses to black; the palette tokens still exist so nothing
   references a missing variable. */
html[data-display="eink"] {
  --blue: #000; --blue-dark: #000; --coral: #000; --coral-dark: #000;
  --coral-light: #4a4a4a; --star: #000; --gold: #000; --sky: #000;
  --aqua: #555; --teal: #000; --mint: #666; --lime: #555;
  --navy: #000; --lavender-purple: #555;
}

/* The per-member calendar colours are DATA — six tints that are the same grey
   otherwise. Six spaced levels plus six border treatments keeps them
   distinguishable on a panel with no hue at all. */
html[data-display="eink"] [data-color="coral"]    { --tint: #ffffff; --strong: #000; }
html[data-display="eink"] [data-color="sky"]      { --tint: #ededed; --strong: #000; }
html[data-display="eink"] [data-color="mint"]     { --tint: #dcdcdc; --strong: #000; }
html[data-display="eink"] [data-color="gold"]     { --tint: #cacaca; --strong: #000; }
html[data-display="eink"] [data-color="lavender"] { --tint: #b8b8b8; --strong: #000; }
html[data-display="eink"] [data-color="teal"]     { --tint: #a6a6a6; --strong: #000; }

html[data-display="eink"] .cal-pill[data-color],
html[data-display="eink"] .kid-row[data-color] { border-left-width: 6px; }
html[data-display="eink"] .cal-pill[data-color="coral"]    { border-left-style: solid; }
html[data-display="eink"] .cal-pill[data-color="sky"]      { border-left-style: dashed; }
html[data-display="eink"] .cal-pill[data-color="mint"]     { border-left-style: dotted; }
html[data-display="eink"] .cal-pill[data-color="gold"]     { border-left-style: double; border-left-width: 7px; }
html[data-display="eink"] .cal-pill[data-color="lavender"] { border-left-style: groove; }
html[data-display="eink"] .cal-pill[data-color="teal"]     { border-left-style: ridge; }

/* Student colour chips in the filter row need the same second channel. */
html[data-display="eink"] .cal-filters .chip { border: 1.5px solid #000; }
html[data-display="eink"] .cal-filters .chip.active { background: #000; color: #fff; }

/* ---------- colour e-ink ---------- */

/* Kaleido-class panels show colour at roughly a quarter of the saturation of
   an LCD and at lower resolution than their greyscale layer. Feeding them
   already-muted, dark-enough hues gives a predictable result instead of a
   muddy one; text stays black regardless. */
html[data-display="eink-color"] {
  --blue: #1f5878;      --blue-dark: #14425c;  --blue-pale: #dfe9ee;
  --coral: #b34a38;     --coral-dark: #8f3627; --coral-light: #c9776a;
  --star: #a8801f;      --gold: #a8801f;       --sunshine: #f0e8d4;
  --sky: #3d7f9c;       --aqua: #4e8a92;       --teal: #276b71;
  --mint: #5e9b80;      --lime: #6f9a5e;
  --navy: #10333f;      --lavender-purple: #6f5c94; --lavender: #e6e0ee;
}
html[data-display="eink-color"] .kid-header {
  background: #fff;
  border-bottom: 3px solid var(--navy);
}
html[data-display="eink-color"] .kid-header h2,
html[data-display="eink-color"] .kid-date { color: var(--navy); }
html[data-display="eink-color"] .kid-progress .ring-fill { stroke: var(--navy); }
html[data-display="eink-color"] .kid-progress .ring-label { fill: var(--navy); }
html[data-display="eink-color"] .icon-star { color: var(--star); }
html[data-display="eink-color"] .btn-coral,
html[data-display="eink-color"] .work-btn-primary { background: var(--coral); color: #fff; }
html[data-display="eink-color"] .btn-blue { background: var(--blue); color: #fff; }
html[data-display="eink-color"] .kid-tabbar a.active {
  color: var(--coral-dark);
  background: var(--sunshine);
  border-top: 4px solid var(--coral-dark);
}

/* ---------- the workbook editor ----------
   The reason someone puts Hearthside on an e-ink panel at all is writing on
   it, so this screen has to be right. */
html[data-display^="eink"] .work-editor { background: #fff; }
html[data-display^="eink"] .work-topbar {
  background: #fff;
  color: #000;
  border-bottom: 3px solid #000;
}
html[data-display^="eink"] .work-btn-onnavy {
  color: #000;
  border-color: #000;
  background: #fff;
}
html[data-display^="eink"] .work-toolbar { border-bottom: 2px solid #000; }
html[data-display^="eink"] #pdf-canvas { border: 1px solid #000; }
/* A colour swatch is meaningless on a mono panel; keep them visible and
   selectable (a parent may be reviewing on a colour screen later) but mark the
   active one with a border rather than relying on the fill. */
html[data-display="eink"] .work-color { border-color: #767676; }
html[data-display="eink"] .work-color[data-color="#062935"] { border-color: #000; }