/* ==========================================================================
   InstaSeer — "Aperture" design system
   The shared layer behind every surface: the landing page, the guide/blog
   content site, the marketing pages, and the report workspace.

   Loaded BEFORE each surface's own sheet, so surface sheets always win.
   Every token is namespaced --ds-* on purpose: styles.css already owns
   --ink / --green / --paper, and same-named tokens would collide in the
   cascade rather than compose.

   Palette rule of record: violet, sun, coral and sky are marketing accents.
   The report workspace uses ink, cream, green, deep green and lime only.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/spacegrotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/spacegrotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* Ground */
  --ds-ink: #0e1110;
  --ds-ink-2: #171b19;
  --ds-ink-3: #212724;
  --ds-cream: #f4f0e2;
  --ds-cream-2: #e7e1cd;

  /* Brand */
  --ds-green: #17b877;
  --ds-green-deep: #0c4531;
  --ds-lime: #c8f24e;

  /* Marketing accents — not permitted in the report workspace */
  --ds-violet: #8584ff;
  --ds-sun: #ffc61e;
  --ds-coral: #ff6d38;
  --ds-sky: #4c8dff;

  /* Type */
  --ds-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ds-font-ui: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ds-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display face is set as one bundle so headings stay consistent everywhere */
  --ds-display-wght: 900;
  --ds-display-wdth: 106;
  --ds-display-leading: 0.92;
  --ds-display-tracking: -0.035em;

  /* Form */
  --ds-radius-xl: 34px;
  --ds-radius-lg: 26px;
  --ds-radius-md: 16px;
  --ds-radius-sm: 10px;
  --ds-frame-w: clamp(8px, 0.9vw, 14px);

  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --ds-shadow: 0 18px 44px rgba(14, 17, 16, 0.16);
  --ds-shadow-tight: 0 8px 22px rgba(14, 17, 16, 0.12);
}

/* --------------------------------------------------------------------------
   Glyph kit "Aperture"
   The <symbol> sprite is injected once per page by the server and is never
   painted itself; every icon is a <use> that inherits currentColor.
   -------------------------------------------------------------------------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ds-glyph {
  width: 1em;
  height: 1em;
  flex: none;
  display: block;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Shared primitives. Surface sheets style their own component classes, but
   these three carry the system's signature and are identical everywhere.
   -------------------------------------------------------------------------- */

/* Display type. Applied by surface sheets via composition, not inheritance. */
.ds-display {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-display-wght);
  font-variation-settings: "wdth" var(--ds-display-wdth), "wght" var(--ds-display-wght);
  line-height: var(--ds-display-leading);
  letter-spacing: var(--ds-display-tracking);
  text-wrap: balance;
  margin: 0;
}

/* Numbered chapter tag: solid pentagon + outlined pill. The number is only
   used where the content is genuinely a sequence. */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds-tag b {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: currentColor;
  padding: 6px 16px 6px 12px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
/* The label is emphasis, not a control: solid plate, no keyline. A border
   here read as a ghost button. */
.ds-tag span {
  font-size: 12.5px;
  font-weight: 600;
  border: 0;
  border-radius: 2px;
  padding: 5px 15px;
  background: var(--ds-tag-fill, var(--ds-lime));
  color: var(--ds-tag-ink, var(--ds-ink));
}

/* Ribbon tag: squared start, swallowtail end. Labels a deliverable. */
.ds-ribbon {
  display: inline-block;
  background: var(--ds-ink);
  color: var(--ds-cream);
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 21px 6px 13px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}

/* Mono eyebrow */
.ds-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Highlighter blocks — the emphasis primitive
   --------------------------------------------------------------------------
   THE RULE: a border means the thing is interactive. Emphasis is carried by a
   solid fill and nothing else. Every non-button label (tags, chips, stamps,
   badges) is a plate: flat colour, no keyline, radius <= 2px. Multi-line runs
   clone the box so each visual line gets its own plate.
   -------------------------------------------------------------------------- */
.ds-hl {
  display: inline-block;
  padding: 2px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--ds-lime);
  color: var(--ds-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ds-hl--lime { background: var(--ds-lime); color: var(--ds-ink); }
.ds-hl--sun { background: var(--ds-sun); color: var(--ds-ink); }
.ds-hl--violet { background: var(--ds-violet); color: var(--ds-ink); }
/* Coral takes ink, not cream: ink clears ~7:1 on #ff6d38, cream only ~2.8:1. */
.ds-hl--coral { background: var(--ds-coral); color: var(--ds-ink); }
.ds-hl--green { background: var(--ds-green); color: var(--ds-ink); }
.ds-hl--ink { background: var(--ds-ink); color: var(--ds-cream); }

/* Micro-plate: the borderless replacement for mono meta chips and stamps. */
.ds-hl--mono {
  padding: 4px 10px;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Stacked highlight lines: each line is its own plate, staggered horizontally
   so the block reads as struck copy rather than a list of buttons. */
.ds-hl-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-hl-stack > * { margin: 0; }
.ds-hl-stack > :nth-child(2) { margin-left: 24px; }
.ds-hl-stack > :nth-child(3) { margin-left: 12px; }
.ds-hl-stack > :nth-child(4) { margin-left: 36px; }

/* Tight stagger for small (chapter-tag scale) stacks, where the full offset
   reads as misalignment rather than rhythm. */
.ds-hl-stack--tight > :nth-child(2) { margin-left: 14px; }
.ds-hl-stack--tight > :nth-child(3) { margin-left: 7px; }
.ds-hl-stack--tight > :nth-child(4) { margin-left: 21px; }


/* --------------------------------------------------------------------------
   Press kit — the "Two-Plate / Press Sheet" primitives
   --------------------------------------------------------------------------
   The shared language shipped first on the hero medallions and the report
   workspace: flat fills, 1.5px ink keylines, hard-offset OPAQUE plates
   (a translucent plate composites to near-black and reads as a drop shadow),
   ink-bar headings, struck stamps, mono label cells. These primitives are
   defined once here because every page loads this sheet; the per-surface
   sheets (styles.css, seo-pages.css) compose them and add page layers.
   Rules: no blur, no gradients as fills, no pill buttons, radius <= 14px.
   -------------------------------------------------------------------------- */

/* Plated button: flat ink, mono uppercase, hard plate that collapses on press.
   --plate defaults to brand green; set it inline or in a page layer. */
.ds-plated {
  --plate: var(--ds-green);
  display: inline-block;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ds-ink);
  color: var(--ds-cream);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--plate);
  transition: transform 180ms var(--ds-ease), box-shadow 180ms var(--ds-ease);
}

.ds-plated:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--plate); }
.ds-plated:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--plate); }

.ds-plated--lime { background: var(--ds-lime); color: var(--ds-ink); --plate: var(--ds-ink); }

.ds-plated--ghost {
  background: var(--ds-cream);
  color: var(--ds-ink);
  border: 1.5px solid var(--ds-ink);
  --plate: var(--ds-green-deep);
}

/* Two-Plate card: flat fill + keyline + opaque tint plate. Pages set --plate
   (and background) per card; the mint pairing is the workspace default. */
.ds-card {
  --plate: #a8e3c9;
  border: 1.5px solid var(--ds-ink);
  border-radius: 12px;
  overflow: hidden;
  background: #e4f7ee;
  box-shadow: 6px 6px 0 0 var(--plate);
}

/* Panel: white sheet with an ink-bar heading. The heading is a bar, never
   text floating over a border. */
.ds-panel {
  border: 1.5px solid var(--ds-ink);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 8px 8px 0 0 var(--ds-green);
}

.ds-panel-head {
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--ds-ink);
  color: var(--ds-cream);
}

.ds-panel-head b {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ds-panel-head span {
  font-family: var(--ds-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 240, 226, 0.55);
}

/* Struck stamp: rubber-stamped plate — rotated, solid-filled, mono. Borderless
   because a stamp is emphasis, never a control. Defaults to a deep-green plate
   with cream type; set --ds-stamp-fill/--ds-stamp-ink for other grounds.
   --ds-stamp-edge is kept as a legacy alias for the fill. */
.ds-stamp {
  display: inline-block;
  padding: 4px 10px;
  border: 0;
  border-radius: 2px;
  color: var(--ds-stamp-ink, var(--ds-cream));
  background: var(--ds-stamp-fill, var(--ds-stamp-edge, var(--ds-green-deep)));
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

/* Ink label cell: fused to the left edge of a control group. The group owns
   the single keyline; whatever sits beside the cell is borderless. */
.ds-cellgroup {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--ds-ink);
  border-radius: 8px;
  background: #fff;
}

.ds-cell {
  display: flex;
  align-items: center;
  padding: 0 11px;
  background: var(--ds-ink);
  color: var(--ds-cream);
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-cellgroup > input,
.ds-cellgroup > select,
.ds-cellgroup > textarea {
  border: 0;
  border-radius: 0;
  background: #fff;
  font: inherit;
  padding: 8px 11px;
  min-width: 0;
}

.ds-cellgroup > input:focus-visible,
.ds-cellgroup > select:focus-visible,
.ds-cellgroup > textarea:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: -2px;
}

/* Mono meta plate: the rectangular replacement for pill meta-chips. Borderless
   — page layers re-add a keyline when the chip is genuinely a link. */
.ds-chip {
  display: inline-block;
  padding: 5px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--ds-chip-fill, var(--ds-cream-2));
  color: var(--ds-chip-ink, var(--ds-ink));
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Ledger rows: data separated by rules, not card gaps. First cell may be a
   .ds-ledger-idx ink index. */
.ds-ledger { border-top: 1.5px solid var(--ds-ink); }

.ds-ledger-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(14, 17, 16, 0.16);
}

.ds-ledger-row.is-major { border-bottom: 1.5px solid var(--ds-ink); }

.ds-ledger-idx {
  min-width: 30px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-ink);
  color: var(--ds-cream);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Accessibility baseline
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-display,
  [class*="ds-"] {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Shared locale selector. Both marketing and guide footers render this exact
   component, so the visual and touch-target behavior stays consistent. */
.site-footer .site-lang-switcher,
.seo-footer .site-lang-switcher {
  flex: 1 0 100%;
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
  padding-block-start: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
}

.site-lang-switcher-label {
  padding-block: 7px;
  color: rgba(244, 240, 226, 0.54);
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-lang-switcher-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-lang-switcher-options::-webkit-scrollbar { display: none; }

.site-footer .site-lang-switcher-options a,
.site-footer .site-lang-switcher-options span,
.seo-footer .site-lang-switcher-options a,
.seo-footer .site-lang-switcher-options span {
  /* v2 rule 9: 44px minimum tap target. The rail scrolls, so the extra
     height costs nothing horizontally. */
  min-height: var(--ds-tap, 44px);
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: rgba(244, 240, 226, 0.68);
  background: rgba(244, 240, 226, 0.06);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: background 160ms var(--ds-ease), border-color 160ms var(--ds-ease), color 160ms var(--ds-ease);
}

.site-footer .site-lang-switcher-options a:hover,
.seo-footer .site-lang-switcher-options a:hover {
  background: rgba(244, 240, 226, 0.11);
  color: var(--ds-lime);
}

.site-lang-switcher-options span[aria-current="true"] {
  background: var(--ds-lime);
  color: var(--ds-ink);
}

@media (max-width: 640px) {
  .site-footer .site-lang-switcher,
  .seo-footer .site-lang-switcher {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .site-footer .site-lang-switcher-options a,
  .site-footer .site-lang-switcher-options span,
  .seo-footer .site-lang-switcher-options a,
  .seo-footer .site-lang-switcher-options span {
    min-height: var(--ds-tap, 44px);
    padding: 9px 11px;
  }
}


/* ==========================================================================
   V2 FOUNDATION — the shared layer lifted out of the /stage/* mockups
   --------------------------------------------------------------------------
   Phases 1-3 proved a system at /stage/*. This block is that system's
   *contract*, expressed as tokens so every production surface (styles.css for
   the app + marketing pages, seo-pages.css for the guide/blog content site)
   inherits it without any page rewriting its own content.

   The rules, and why they are not negotiable:

   1. NEVER light (white / grey / cream) text on mid green or on lime.
      Ink on --ds-green measures 7.37:1. Cream on the same green measures
      2.26:1. Cream is legal on --ds-green-deep ONLY, where it is 8.9:1.
      => Anything sitting on emerald or lime takes --ds-on-green (= ink).

   2. Emerald is a BACKGROUND colour. Emerald as a FOREGROUND on a light page
      is 2.26:1. Use --ds-green-deep when green must be the ink.

   3. Emerald carries primary actions. Lime is reserved for small highlights,
      counters, checks and current-state chips.

   4. Hover LIFTS (--ds-green-hover, #1cc582), it never darkens. A darkened
      hover was tuned for a light label; with an ink label it moves contrast
      the wrong way. Ink on the lifted green is 8.46:1.

   5. Disabled is explicit colour, never `opacity: .5` — that composited to
      2.30:1. Use --ds-disabled-ink / --ds-disabled-bg / --ds-disabled-line.

   6. Focus rings must clear 3:1 against what they sit on. An emerald ring is
      2.26:1 and is illegal. --ds-focus (deep green) is the default;
      --ds-focus-light (lime) is the override for dark plates.

   7. NO ALPHA FOR TEXT. A "dimmed" foreground is a solid colour picked for
      its ground: composited alpha is what produced almost every sub-AA run
      found on production. Use the --ds-dim-on-* family.

   8. Border = interactive, never on inline emphasis. Sentence-case buttons,
      12px control radii, soft elevation, numerals with no leading zeroes.

   9. 44px minimum tap target for any standalone control. (Anchors that sit
      inside a running sentence are exempt — WCAG 2.2 exempts inline links,
      and padding them out breaks the prose line box.)

  10. prefers-reduced-motion must ALSO neutralise `html { scroll-behavior }`,
      which sits outside every component selector and so survives the usual
      `* { transition-duration: .01ms }` sweep.
   ========================================================================== */

:root {
  /* --- 1, 3, 4: green as a ground ------------------------------------- */
  /* The one legal foreground for anything painted on emerald or on lime. */
  --ds-on-green: var(--ds-ink);
  /* Hover lifts. Ink on this measures 8.46:1 (vs 7.37:1 at rest). */
  --ds-green-hover: #1cc582;
  /* Green when it has to be the INK rather than the ground (rule 2). */
  --ds-green-ink: var(--ds-green-deep);

  /* --- 6: focus ------------------------------------------------------- */
  /* Deep green: 9.6:1 on cream, 11.0:1 on white, 4.3:1 on emerald,
     8.5:1 on lime — clears the 3:1 non-text minimum on every ground here. */
  --ds-focus: var(--ds-green-deep);
  /* Dark-plate override. Lime on ink is 14.7:1. */
  --ds-focus-light: var(--ds-lime);
  --ds-focus-width: 3px;
  --ds-focus-offset: 3px;

  /* --- 5: disabled ---------------------------------------------------- */
  --ds-disabled-ink: #4c534e;   /* 5.11:1 on --ds-disabled-bg */
  --ds-disabled-bg: #ccd1cd;
  --ds-disabled-line: #bfc5c0;

  /* --- 7: solid dimmed foregrounds, one per ground --------------------- */
  /* Every value below is >= 4.5:1 against the ground it is named for, so a
     13px caption is as safe as a headline. Measured, not guessed. */
  --ds-dim-on-light: #4e564f;   /* 6.65 cream · 7.59 white · 5.80 folder */
  --ds-dim-on-ink: #b3afa2;     /* 8.65 on --ds-ink */
  --ds-dim-on-deep: #c5c1b3;    /* 6.10 on --ds-green-deep */
  --ds-dim-on-green: #0d2b1f;   /* 5.90 on --ds-green · 6.77 on hover */
  --ds-dim-on-lime: #2b3316;    /* 10.24 on --ds-lime */
  --ds-dim-on-violet: #1e1b4d;  /* 5.11 on --ds-violet */
  --ds-dim-on-coral: #2c1508;   /* 6.16 on --ds-coral */
  --ds-dim-on-sun: #33290a;     /* 9.13 on --ds-sun */

  /* --- 8, 9: form ----------------------------------------------------- */
  --ds-radius-control: 12px;
  --ds-tap: 44px;
  --ds-lift-1: 0 1px 2px rgba(14, 17, 16, 0.06), 0 8px 20px rgba(14, 17, 16, 0.07);
  --ds-lift-2: 0 2px 4px rgba(14, 17, 16, 0.08), 0 16px 34px rgba(14, 17, 16, 0.12);
}

/* Rule 10. Deliberately top-level and !important: `html` is not matched by any
   component sweep, and both surface sheets set `scroll-behavior: smooth` on it
   at a specificity this cannot otherwise beat from a shared sheet. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Rule 6 applied to the one focusable primitive this sheet owns. */
.ds-cellgroup > input:focus-visible,
.ds-cellgroup > select:focus-visible,
.ds-cellgroup > textarea:focus-visible {
  outline: 2px solid var(--ds-focus);
}

/* Rule 1, as a primitive the page sheets and the following page-cutover work
   can compose instead of re-deriving. Anything given an emerald or lime ground
   must also take the ink foreground; these two do both at once. */
.ds-on-green { color: var(--ds-on-green); background: var(--ds-green); }
.ds-on-green--hover:hover { background: var(--ds-green-hover); }
.ds-on-lime { color: var(--ds-on-green); background: var(--ds-lime); }

/* Rule 9. Opt-in, because raising min-height on an inline link breaks prose. */
.ds-tap-target {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
}