/* ==========================================================================
   Kindle UI Kit — Illustration
   1-bit drawing for a 1-bit panel. Tone is density, never lightness:
   there is no gray fill in this file, only dots, hatch, and paper.
   Depends on tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The sprite host
   Keep the <svg> in the DOM (not display:none) so its <pattern> defs resolve,
   and give it `color` so patterns drawn in currentColor follow the theme.
   -------------------------------------------------------------------------- */

.k-ill-defs {
  position: absolute; width: 0; height: 0; overflow: hidden;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   2. Drawing primitives
   -------------------------------------------------------------------------- */

.k-ill {
  display: block; color: var(--ink);
  fill: none; stroke: currentColor;
  stroke-width: var(--ill-w-base);
  stroke-linecap: butt;      /* cut ends — engraving, not marker pen */
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.k-ill * { vector-effect: non-scaling-stroke; }

.k-ill--xs { width: 20px;  height: 20px;  stroke-width: var(--ill-w-hair); }
.k-ill--sm { width: 32px;  height: 32px; }
.k-ill--md { width: 56px;  height: 56px; }
.k-ill--lg { width: 88px;  height: 88px;  stroke-width: var(--ill-w-bold); }
.k-ill--xl { width: 140px; height: 140px; stroke-width: var(--ill-w-bold); }

.k-ill--hair { stroke-width: var(--ill-w-hair); }
.k-ill--bold { stroke-width: var(--ill-w-bold); }

/* Spot — an illustration with breathing room, used inline with text */
.k-spot { display: inline-grid; place-items: center; padding: var(--s-2); }

/* --------------------------------------------------------------------------
   3. Tone swatches for HTML surfaces
   -------------------------------------------------------------------------- */

.k-tone-12 { background: var(--tone-12); }
.k-tone-25 { background: var(--tone-25); }
.k-tone-50 { background: var(--tone-50); }
.k-tone-75 { background: var(--tone-75) , var(--ink); }
.k-tone-hatch { background: var(--hatch); }
.k-tone-cross { background: var(--cross); }

/* --------------------------------------------------------------------------
   4. Plates — a figure as a book prints it: framed, numbered, captioned
   -------------------------------------------------------------------------- */

.k-plates { counter-reset: k-fig; }

.k-plate { counter-increment: k-fig; margin: 0; display: grid; gap: var(--s-3); }

.k-plate__frame {
  border: var(--hair) solid var(--rule-strong);
  background: var(--paper-raised);
  padding: var(--s-5);
  display: grid; place-items: center;
  position: relative;
}
/* the printer's corner ticks */
.k-plate__frame::before,
.k-plate__frame::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: var(--hair) solid var(--rule-strong);
}
.k-plate__frame::before { top: 5px;    left: 5px;  border-right: 0; border-bottom: 0; }
.k-plate__frame::after  { bottom: 5px; right: 5px; border-left: 0;  border-top: 0; }

.k-plate__caption {
  font-family: var(--font-serif); font-size: var(--t-sm);
  color: var(--ink-3); line-height: var(--lh-snug); text-align: left;
}
.k-plate__caption::before {
  content: "Fig. " counter(k-fig) " — ";
  font-family: var(--font-sans); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-4);
}
.k-plate--plain .k-plate__caption::before { content: none; }

/* Full-measure plate that interrupts a reading column */
.k-plate--wide { margin: var(--s-6) 0; }

/* --------------------------------------------------------------------------
   5. Photographic treatment — everything becomes 1-bit
   -------------------------------------------------------------------------- */

.k-halftone {
  filter: url(#kDither);
  display: block; width: 100%; height: auto;
}
:root[data-theme="dark"] .k-halftone { filter: url(#kDither) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-halftone { filter: url(#kDither) invert(1); }
}

/* Portrait — a dithered head in a hairline circle */
.k-portrait {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  border: var(--hair) solid var(--rule-strong);
  background: var(--paper-sunk); display: grid; place-items: center;
}
.k-portrait > * { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   6. Generated cover art — deterministic 1-bit plate per title
   -------------------------------------------------------------------------- */

.k-artcover {
  display: block; width: 100%; aspect-ratio: 2 / 3;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper);
  image-rendering: pixelated;
}

/* Book cover carrying generated art, with a printed title plate */
.k-cover--art { padding: 0; overflow: hidden; }
.k-cover--art .k-artcover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border: 0; border-radius: 0;
}
.k-cover__plate {
  position: relative; margin-top: auto;
  background: var(--paper); border-top: var(--hair) solid var(--ink);
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 5px);
  display: grid; gap: 2px;
}

/* --------------------------------------------------------------------------
   7. Ornaments & initials
   -------------------------------------------------------------------------- */

.k-fleuron {
  display: flex; align-items: center; gap: var(--s-4);
  color: var(--ink-4); margin: var(--s-6) 0;
}
.k-fleuron::before, .k-fleuron::after {
  content: ""; height: var(--hair); flex: 1; background: var(--rule);
}
.k-fleuron .k-ill { color: var(--ink-3); }

/* Illuminated initial — the drop cap as a printed block */
.k-initial {
  float: left; width: 3.1em; height: 3.1em; margin: 0.12em 0.5em 0 0;
  display: grid; place-items: center;
  border: var(--hair) solid var(--ink);
  background: var(--tone-12);
  font-family: var(--font-serif); font-size: 1em; line-height: 1;
  color: var(--ink);
}
.k-initial > span { font-size: 1.9em; }

/* --------------------------------------------------------------------------
   8. Rules of the language, enforced where CSS can
   -------------------------------------------------------------------------- */

.k-ill,
.k-plate__frame,
.k-artcover { box-shadow: none !important; }