/*
  N/A Design System — spice kit
  https://github.com/Niiranen-Advisory/na-design-system

  Small, optional pieces of N/A identity for pages, apps and single-file
  tools. Load AFTER tokens.css (and after a palette file if the brand has
  one). Every colour is read from the --na-color-* tokens with a fallback,
  so the file also works standalone with the default N/A look.

    <link rel="stylesheet" href="tokens.css">
    <link rel="stylesheet" href="spice.css">

  What is in here (rules for use: SPICE.md):
    .na-window   title bar + body + button row, with a hatched offset
    .na-hatch    hatched fill for strips, chart keys and bars
    .na-cut      split field on the slash, for mastheads and dividers
    .na-glyph    quiet tone-on-tone glyph behind a section

  The hatch uses hard-stop repeating-linear-gradient lines. That is a line
  pattern, not a tonal gradient, and it stays inside the "flat" rule.
*/

:root {
  /* The brand slash. Every diagonal in the system leans by this angle. */
  --na-slash-angle: 20deg;
  /* Hatch stripes lean at the slash angle: 90deg (vertical stripes) + 20deg. */
  --na-hatch-angle: 110deg;
  --na-hatch-pitch: 9px;
  --na-hatch-weight: 3px;
  --na-hatch-offset: 16px;
  /* --na-hatch-color is deliberately not set here. It defaults to the accent
     at the point of use, so a scoped brand picks up its own accent. A brand
     may set it: the Licensing Guide palette tints it toward the ground so
     the button on top stays the loudest thing. */
}

/* ---------------------------------------------------------------- hatch */

.na-hatch {
  background-image: repeating-linear-gradient(
    var(--na-hatch-angle),
    var(--na-hatch-color, var(--na-color-accent, #7a2e1c)) 0 var(--na-hatch-weight),
    transparent var(--na-hatch-weight) var(--na-hatch-pitch)
  );
}
.na-hatch--ink {
  --na-hatch-color: var(--na-color-ink, #1a1a18);
}

/* Legend swatch for charts: pair with a solid ink swatch and an accent one
   so series differ by fill type, not by extra hues. */
.na-hatch-key {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  border: var(--na-border-width-strong, 2px) solid var(--na-color-ink, #1a1a18);
}

/* --------------------------------------------------------------- window */

/*
  A window frame with a hatched offset behind it. Use for posts, dialogs,
  empty and error states, and one authored call to action.

  The border and background live on ::after, ABOVE the hatch on ::before.
  A negative-z pseudo-element paints over its parent's own border, so the
  frame must not rely on the element's border. The element keeps a
  transparent border purely to hold the layout size.
*/
.na-window {
  position: relative;
  isolation: isolate;
  border: var(--na-border-width-strong, 2px) solid transparent;
  color: var(--na-color-ink, #1a1a18);
  font-family: var(--na-font-text, Georgia, serif);
}
.na-window::before,
.na-window::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--na-border-width-strong, 2px) * -1);
  border: var(--na-border-width-strong, 2px) solid var(--na-color-ink, #1a1a18);
}
.na-window::before {
  transform: translate(var(--na-hatch-offset), var(--na-hatch-offset));
  background-image: repeating-linear-gradient(
    var(--na-hatch-angle),
    var(--na-hatch-color, var(--na-color-accent, #7a2e1c)) 0 var(--na-hatch-weight),
    transparent var(--na-hatch-weight) var(--na-hatch-pitch)
  );
}
.na-window::after {
  background: var(--na-color-bg, #fff);
}
.na-window--flip::before {
  transform: translate(calc(var(--na-hatch-offset) * -1), var(--na-hatch-offset));
}

.na-window__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 2.4rem;
  padding-left: 0.9rem;
  background: var(--na-color-bg-raised, #eeeeeb);
  border-bottom: var(--na-border-width-strong, 2px) solid var(--na-color-ink, #1a1a18);
}
.na-window__title {
  align-self: center;
  margin: 0;
  font: 500 0.82rem/1.2 var(--na-font-mono, monospace);
  color: var(--na-color-ink-muted, #55534d);
}
/* Decorative chrome. Mark it aria-hidden="true": it does nothing. */
.na-window__controls {
  display: flex;
}
.na-window__controls > * {
  display: grid;
  place-items: center;
  width: 2.4rem;
  border-left: var(--na-border-width-strong, 2px) solid var(--na-color-ink, #1a1a18);
  font: 500 0.95rem/1 var(--na-font-mono, monospace);
  color: var(--na-color-ink, #1a1a18);
}

.na-window__body {
  padding: var(--na-space-md, 1.6rem) var(--na-space-md, 1.6rem) var(--na-space-md, 1.6rem);
}
.na-window__body > * { margin: 0; }
.na-window__body > * + * { margin-top: 0.9rem; }

.na-window__message {
  font: 400 var(--na-text-lg, 1.2rem)/1.45 var(--na-font-text, Georgia, serif);
}
.na-window__quote {
  font: 400 var(--na-text-xl, 1.6rem)/1.16 var(--na-font-display, Georgia, serif);
  color: var(--na-color-heading, var(--na-color-ink, #1a1a18));
}
.na-window__figure {
  font: 400 clamp(3.4rem, 2.6rem + 4vw, 5.5rem)/0.95 var(--na-font-display, Georgia, serif);
  color: var(--na-color-heading, var(--na-color-ink, #1a1a18));
}
.na-window__figure {
  white-space: nowrap;
}
.na-window__figure small {
  display: block;
  margin-top: 0.45rem;
  font: 600 1.1rem/1.2 var(--na-font-mono, monospace);
  color: var(--na-color-accent, #7a2e1c);
}

.na-window__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 var(--na-space-md, 1.6rem) var(--na-space-sm, 1.2rem);
}
.na-window__button {
  font: 600 0.95rem/1.2 var(--na-font-ui, system-ui, sans-serif);
  padding: 0.55rem 1.1rem;
  border: var(--na-border-width-strong, 2px) solid var(--na-color-ink, #1a1a18);
  border-radius: var(--na-radius, 0);
  background: var(--na-color-bg, #fff);
  color: var(--na-color-ink, #1a1a18);
  text-decoration: none;
  cursor: pointer;
}
.na-window__button--primary {
  background: var(--na-color-accent, #7a2e1c);
  border-color: var(--na-color-accent, #7a2e1c);
  color: var(--na-color-accent-ink, #fff);
}
.na-window__button:focus-visible {
  outline: 2px solid var(--na-color-accent, #7a2e1c);
  outline-offset: 3px;
}

/* A small inline note: same frame, tighter. */
.na-window--note { --na-hatch-offset: 6px; }
.na-window--note .na-window__body { padding: 0.9rem 1.1rem; }
.na-window--note .na-window__message { font-size: var(--na-text-base, 1rem); }

/* ------------------------------------------------------------------ cut */

/*
  A field split on the brand slash. The first child sits on the dark side,
  the last child on the page side. Set the split with --na-cut-pos and the
  height with --na-cut-height. Keep the two children to a short line each.
*/
.na-cut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--na-space-md, 1.5rem);
  min-height: var(--na-cut-height, 18rem);
  padding: var(--na-space-md, 1.5rem);
  color: var(--na-color-ink, #1a1a18);
  font: 500 0.9rem/1.3 var(--na-font-mono, monospace);
}
.na-cut::before,
.na-cut::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: -1px;
}
.na-cut::before {
  left: -60%;
  width: calc(var(--na-cut-pos, 58%) + 60%);
  background: var(--na-cut-ink, var(--na-color-plate-bg, #0b0b0b));
  transform: skewX(calc(var(--na-slash-angle) * -1));
  transform-origin: 100% 50%;
}
.na-cut::after {
  left: calc(var(--na-cut-pos, 58%) - var(--na-cut-bar, 1.75rem) / 2);
  width: var(--na-cut-bar, 1.75rem);
  background: var(--na-cut-accent, var(--na-color-plate-accent, var(--na-color-accent, #7a2e1c)));
  transform: skewX(calc(var(--na-slash-angle) * -1));
}
.na-cut > :first-child {
  color: var(--na-color-plate-ink, #fff);
}
.na-cut > :last-child {
  text-align: right;
}

/* ---------------------------------------------------------------- glyph */

/*
  A glyph at watermark strength behind a section. Use data-glyph for a
  typeset mark, or a --null / --neq modifier for the two drawn ones, whose
  slash is the brand slash. Decorative only: never put meaning in it.
*/
.na-glyph {
  --_wm: var(--na-glyph-color, color-mix(in srgb, var(--na-color-ink, #1a1a18) 9%, var(--na-color-bg, #fff)));
  --_size: var(--na-glyph-size, clamp(10rem, 32vw, 24rem));
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.na-glyph::before {
  content: attr(data-glyph);
  position: absolute;
  z-index: -1;
  right: var(--na-glyph-x, 2%);
  top: 50%;
  transform: translateY(-50%);
  font: 400 var(--_size)/1 var(--na-font-display, Georgia, serif);
  color: var(--_wm);
  pointer-events: none;
  user-select: none;
}
.na-glyph--null::before,
.na-glyph--neq::before {
  content: "";
  width: var(--_size);
  height: var(--_size);
  background: var(--_wm);
  -webkit-mask: var(--_mask) center / contain no-repeat;
  mask: var(--_mask) center / contain no-repeat;
}
.na-glyph--null {
  --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='22'%3E%3Ccircle cx='120' cy='120' r='92'/%3E%3Cline x1='52' y1='214' x2='188' y2='26'/%3E%3C/svg%3E");
}
.na-glyph--neq {
  --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='22'%3E%3Cline x1='40' y1='92' x2='200' y2='92'/%3E%3Cline x1='40' y1='150' x2='200' y2='150'/%3E%3Cline x1='86' y1='214' x2='154' y2='26'/%3E%3C/svg%3E");
}
.na-glyph--accent {
  --na-glyph-color: color-mix(in srgb, var(--na-color-accent, #7a2e1c) 16%, var(--na-color-bg, #fff));
}
.na-glyph--left::before {
  right: auto;
  left: var(--na-glyph-x, 2%);
}
@media (prefers-reduced-motion: reduce) {
  .na-window, .na-cut, .na-glyph { transition: none; }
}