/* ==========================================================================
   Seamark Studio — site styles
   Built from design_handoff_seamark_site. Tokens only; no literal colours.
   ========================================================================== */

::selection { background: var(--sand-300); color: var(--ink-900); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, canvas { max-width: 100%; }
body { overflow-x: hidden; }

.sm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marine-700); color: var(--shell-050);
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  padding: 12px 16px; text-decoration: none;
}
.sm-skip:focus { left: 0; }

.sm-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout classes set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

/* --- Without JavaScript --------------------------------------------------
   A script in the head marks the page .js. These rules only apply when it did
   not run: controls that need script are dropped, and anything script would
   have revealed is shown instead, so every page still reads in full. */
html:not(.js) [data-js-only] { display: none !important; }
html.js [data-no-js] { display: none !important; }
html:not(.js) .sm-panelstack { min-height: 0; }
html:not(.js) .sm-panel { display: block; }
html:not(.js) .sm-panel + .sm-panel { margin-top: var(--space-5); }

/* --- Layout ------------------------------------------------------------- */

.sm-wrap { max-width: var(--max-page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 900px) { .sm-wrap { padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); } }

.sm-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (min-width: 900px) { .sm-section { padding-top: var(--space-9); padding-bottom: var(--space-9); } }

.sm-sunk { background: var(--surface-sunk); }
.sm-navy { background: var(--marine-900); }
.sm-marine { background: var(--surface-inverse); }

/* Paper grain. One inline SVG, no request, sits under all content. */
.sm-grain { position: relative; }
.sm-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sm-grain > *:not(canvas) { position: relative; z-index: 1; }

.sm-band { position: relative; overflow: hidden; }
.sm-band > .sm-wrap,
.sm-band > .sm-band-rule { position: relative; z-index: 2; }
canvas.sm-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; opacity: 0.5; pointer-events: none;
}

/* Two-column split used across §-openers and content pairs. */
.sm-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-7); align-items: start;
}
.sm-split--end { align-items: end; }
.sm-split--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Section rule: 1.5px ink line, mono label left, § number right. */
.sm-rule {
  border-top: var(--stroke-medium) solid var(--ink-900);
  display: flex; justify-content: space-between; gap: var(--space-5);
  padding-top: var(--space-3); margin-bottom: var(--space-7);
}
.sm-rule .sm-meta:first-child { color: var(--ink-900); }
.sm-rule--inverse { border-top-color: var(--marine-600); }
.sm-rule--inverse .sm-meta:first-child { color: var(--shell-050); }
.sm-rule--inverse .sm-meta { color: var(--marine-300); }

/* Inverse type on navy and marine bands. */
.sm-inverse { color: var(--marine-200); }
.sm-inverse h1, .sm-inverse h2, .sm-inverse h3, .sm-inverse h4 { color: var(--shell-050); }
.sm-inverse p { color: var(--marine-200); }
.sm-inverse .sm-lead { color: var(--marine-200); }
.sm-inverse .sm-legal { color: var(--marine-300); }
.sm-inverse .sm-meta { color: var(--marine-300); }

/* --- Buttons ------------------------------------------------------------ */

.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 52px; padding: 0 26px;
  font-family: var(--font-meta); font-weight: var(--weight-regular);
  font-size: var(--step-meta); letter-spacing: var(--tracking-meta);
  text-transform: uppercase; line-height: 1.1; text-align: center;
  text-decoration: none; border-radius: var(--radius-0);
  border: var(--stroke-medium) solid transparent;
  cursor: pointer; transition: var(--transition-state);
}
.sm-btn:hover { text-decoration: none; }
.sm-btn[disabled], .sm-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.sm-btn--sm { min-height: 42px; padding: 0 16px; }

.sm-btn--primary {
  background: var(--btn-primary-bg); border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.sm-btn--primary:hover {
  background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

/* On navy: shell fill, marine text; hover fills sand. */
.sm-btn--shell {
  background: var(--shell-050); border-color: var(--shell-050); color: var(--marine-900);
}
.sm-btn--shell:hover { background: var(--sand-300); border-color: var(--sand-300); color: var(--marine-900); }

.sm-btn--secondary {
  background: transparent; border-color: var(--btn-secondary-border); color: var(--btn-secondary-fg);
}
.sm-btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); }

/* Mono standalone link with trailing arrow. */
.sm-arrow {
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink-900); text-decoration: none;
  border-bottom: var(--stroke-medium) solid var(--ink-900);
  padding-bottom: 4px; display: inline-block;
}
.sm-arrow:hover { color: var(--marine-700); border-color: var(--marine-700); text-decoration: none; }
.sm-inverse .sm-arrow { color: var(--shell-050); border-color: var(--shell-050); }
.sm-inverse .sm-arrow:hover { color: var(--sand-300); border-color: var(--sand-300); }

/* --- Header ------------------------------------------------------------- */

.sm-header {
  background: var(--surface-page);
  border-bottom: var(--stroke-hair) solid var(--rule-mid);
  position: sticky; top: 0; z-index: 30;
}
.sm-header__in {
  max-width: var(--max-page); margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
@media (min-width: 900px) { .sm-header__in { padding: var(--space-3) var(--gutter-lg); flex-wrap: nowrap; } }

.sm-wordmark { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.sm-wordmark svg { display: block; height: 30px; width: auto; }
.sm-wordmark:hover { text-decoration: none; }

.sm-nav { display: flex; align-items: center; gap: var(--space-5); flex: none; }
.sm-nav ul {
  display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.sm-nav ul::-webkit-scrollbar { display: none; }
.sm-nav li { white-space: nowrap; }
.sm-nav a {
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink-500); text-decoration: none;
  padding-bottom: 3px; border-bottom: var(--stroke-hair) solid transparent;
}
.sm-nav a:hover { color: var(--ink-900); text-decoration: none; }
.sm-nav a[aria-current] { color: var(--ink-900); border-bottom-color: var(--ink-900); }

@media (max-width: 899px) {
  .sm-nav { order: 3; width: 100%; }
  .sm-nav ul { width: 100%; }
  .sm-header .sm-btn { order: 2; }
}

/* --- Footer ------------------------------------------------------------- */

.sm-footer {
  background: var(--surface-inverse); color: var(--marine-200);
  padding: var(--space-9) 0 var(--space-5);
}
.sm-footer__in {
  max-width: var(--max-page); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: var(--space-8);
}
@media (min-width: 900px) { .sm-footer__in { padding: 0 var(--gutter-lg); } }

.sm-footer__top { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
@media (min-width: 760px) { .sm-footer__top { grid-template-columns: 1.2fr 1fr; } }

.sm-footer__statement {
  margin: 0; font-size: var(--step-lead); line-height: var(--leading-snug);
  color: var(--shell-050); max-width: 34ch;
}
.sm-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.sm-footer__col { display: grid; gap: var(--space-2); align-content: start; }
.sm-footer__col a { font-size: var(--step-small); color: var(--shell-050); text-decoration: none; }
.sm-footer__col a:hover { color: var(--sand-300); text-decoration: underline; }

.sm-footer__mark { border-top: var(--stroke-hair) solid var(--marine-600); padding-top: var(--space-4); }
.sm-footer__mark svg { display: block; height: 56px; width: auto; }

.sm-metarow {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  justify-content: space-between;
  border-top: var(--stroke-hair) solid var(--marine-600); padding-top: var(--space-3);
}
.sm-metarow > div { display: grid; gap: 3px; min-width: 0; }
.sm-metarow__value {
  font-family: var(--font-meta); font-size: 13px; letter-spacing: 0.04em;
  color: var(--shell-050); text-decoration: none;
}
.sm-metarow__value:hover { color: var(--sand-300); }

.sm-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between;
}
.sm-footer__legal a {
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--shell-050);
}
.sm-footer__legal span.sm-meta { color: var(--marine-300); }

/* --- Hero --------------------------------------------------------------- */

.sm-hero { position: relative; overflow: hidden; }
.sm-hero__in {
  position: relative; z-index: 2;
  max-width: var(--max-page); margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-7);
  display: grid; gap: var(--space-5);
}
@media (min-width: 900px) {
  .sm-hero__in { padding: 140px var(--gutter-lg) var(--space-8); }
}
.sm-hero__strip {
  position: relative; z-index: 2;
  border-top: var(--stroke-hair) solid var(--marine-600);
  max-width: var(--max-page); margin: 0 auto;
  padding: 14px var(--gutter) 20px;
  display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between;
  align-items: center;
}
@media (min-width: 900px) { .sm-hero__strip { padding: 14px var(--gutter-lg) 20px; } }

.sm-hero__h1 {
  font-size: clamp(36px, 5.6vw, 82px); line-height: var(--leading-poster);
  letter-spacing: var(--tracking-poster); font-weight: var(--weight-regular);
  color: var(--shell-050); margin: 0; max-width: 19ch;
}
.sm-hero__h1 em { color: var(--marine-300); font-style: italic; font-weight: var(--weight-regular); }

/* --- Figures ------------------------------------------------------------ */

.sm-figure { display: grid; gap: var(--space-2); border-top: var(--stroke-hair) solid var(--rule-hair); padding-top: var(--space-3); }
.sm-figure__n {
  font-family: var(--font-meta); font-size: var(--step-figure); line-height: 1;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.sm-figure__label { font-size: var(--step-small); font-weight: var(--weight-medium); color: var(--ink-900); line-height: var(--leading-snug); }

/* 3px callout — the only place a 3px rule is used. */
.sm-callout {
  border-left: var(--stroke-heavy) solid var(--rule-mid);
  padding: 4px 0 4px 20px; max-width: 66ch;
}
.sm-callout--marine { border-left-color: var(--marine-700); }
.sm-callout--inverse { border-left-color: var(--marine-600); }

/* --- Service cards ------------------------------------------------------ */

.sm-card {
  background: transparent;
  border-top: var(--stroke-medium) solid var(--ink-900);
  padding: var(--space-5) 0 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: var(--transition-state);
}
.sm-card:hover { border-top-color: var(--marine-700); }
.sm-card__head { display: flex; justify-content: space-between; gap: var(--space-4); }
.sm-card__head .sm-meta:last-child { color: var(--ink-900); }
.sm-card h3 { margin: 0; }
.sm-card p { margin: 0; color: var(--text-muted); max-width: none; }
.sm-card ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; }
.sm-card li {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2);
  font-size: var(--step-small); line-height: var(--leading-snug);
  color: var(--text-body); padding: 8px 0;
  border-top: var(--stroke-hair) solid var(--rule-hair);
}
.sm-card li .sm-meta { padding-top: 3px; }
.sm-card__foot { margin-top: auto; padding-top: var(--space-3); }

/* --- Status pips -------------------------------------------------------- */

.sm-pip {
  display: inline-block;
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  padding: 3px 8px 4px; white-space: nowrap;
  color: var(--ink-500); background: transparent;
  border: var(--stroke-hair) solid var(--rule-mid);
}
.sm-pip--found { color: var(--marine-600); background: var(--marine-100); border-color: var(--marine-300); }
.sm-pip--partial { color: var(--ink-900); background: var(--sand-100); border-color: var(--sand-300); }
.sm-pip--missing { color: var(--coral-600); background: var(--coral-100); border-color: var(--coral-600); }

/* --- Form fields -------------------------------------------------------- */

.sm-field { display: grid; gap: 4px; }
.sm-field label { display: flex; gap: 10px; align-items: baseline; }
.sm-field label .sm-meta:first-child { color: var(--ink-900); }
.sm-field__help { font-size: var(--step-legal); line-height: var(--leading-snug); color: var(--text-muted); margin: 2px 0 0; }
.sm-field input, .sm-field select, .sm-field textarea {
  width: 100%; min-height: 48px; padding: 10px 0;
  font-family: var(--font-core); font-size: 17px; line-height: var(--leading-snug);
  color: var(--ink-900); background: transparent;
  border: 0; border-bottom: var(--stroke-medium) solid var(--rule-mid);
  border-radius: var(--radius-0); transition: var(--transition-state);
}
.sm-field textarea { min-height: auto; resize: vertical; }
.sm-field select { appearance: none; cursor: pointer; }
.sm-field input:focus, .sm-field select:focus, .sm-field textarea:focus { border-bottom-color: var(--ink-900); }
.sm-field__msg {
  font-size: var(--step-legal); line-height: var(--leading-snug);
  margin-top: 4px; color: var(--text-error);
}
.sm-field[data-state="error"] input,
.sm-field[data-state="error"] select,
.sm-field[data-state="error"] textarea { border-bottom-color: var(--coral-600); }

/* --- Utility ------------------------------------------------------------ */

.sm-mono { font-family: var(--font-meta); }
.sm-hairline { border-top: var(--stroke-hair) solid var(--rule-hair); }
.sm-stack { display: grid; gap: var(--space-4); align-content: start; }
.sm-stack--tight { gap: var(--space-2); }
.sm-row { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; }
.sm-measure { max-width: var(--measure-prose); }

/* --- Document pages (privacy, terms) ------------------------------------ */

.sm-doc { max-width: var(--max-doc); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-9); }
.sm-doc h2 {
  font-size: var(--step-h3); line-height: var(--leading-heading);
  margin: 0 0 var(--space-4);
}
.sm-doc__rule {
  border-top: var(--stroke-medium) solid var(--ink-900);
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-top: var(--space-3); margin: 56px 0 var(--space-5);
}
.sm-doc__rule:first-of-type { margin-top: 0; }
.sm-doc__rule h2 { margin: 0; }
.sm-doc__rule .sm-meta { flex: 0 0 auto; }
.sm-doc ol, .sm-doc ul { padding-left: 0; list-style: none; margin: 0 0 var(--space-4); display: grid; }
.sm-doc ol li, .sm-doc ul li {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2);
  padding: var(--space-3) 0; border-top: var(--stroke-hair) solid var(--rule-hair);
}
.sm-doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  border-top: var(--stroke-hair) solid var(--rule-hair); padding-top: var(--space-3);
  margin-bottom: var(--space-7);
}
.sm-doc__meta > div { display: grid; gap: 3px; }
.sm-doc__meta .sm-meta + span {
  font-family: var(--font-meta); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-900);
}

/* --- Interactive set pieces --------------------------------------------- */

/* The 144 grid. */
.sm-grid144 {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.sm-cell {
  aspect-ratio: 1 / 1; border: var(--stroke-hair) solid var(--rule-mid);
  background: transparent; padding: 0; cursor: pointer;
  transition: var(--transition-state);
}
.sm-cell[data-r="named"] { background: var(--marine-700); border-color: var(--marine-700); }
.sm-cell[data-r="mentioned"] { background: var(--sand-300); border-color: var(--sand-300); }
.sm-cell:hover, .sm-cell:focus-visible { border-color: var(--ink-900); }

.sm-tabs { display: flex; flex-wrap: wrap; gap: 0; }
.sm-tab {
  font-family: var(--font-meta); font-size: var(--step-meta);
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  background: transparent; border: var(--stroke-hair) solid var(--rule-mid);
  border-right-width: 0; color: var(--ink-500);
  padding: 10px 14px; cursor: pointer; transition: var(--transition-state);
}
.sm-tab:last-child { border-right-width: var(--stroke-hair); }
.sm-tab[aria-pressed="true"], .sm-tab[aria-selected="true"] {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--shell-050);
}
.sm-tab:hover { color: var(--ink-900); }
.sm-tab[aria-pressed="true"]:hover, .sm-tab[aria-selected="true"]:hover { color: var(--shell-050); }

.sm-readout {
  border-top: var(--stroke-medium) solid var(--ink-900);
  padding-top: var(--space-3); display: grid; gap: var(--space-2);
  min-height: 92px;
}
.sm-readout__q { font-family: var(--font-meta); font-size: 13px; color: var(--ink-900); line-height: 1.5; }

.sm-engines { display: grid; }
.sm-engines > div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 10px 0; border-top: var(--stroke-hair) solid var(--rule-hair);
}

/* Range input, squared off. */
.sm-range { width: 100%; height: 32px; background: transparent; appearance: none; cursor: pointer; }
.sm-range::-webkit-slider-runnable-track { height: 1px; background: var(--rule-mid); }
.sm-range::-moz-range-track { height: 1px; background: var(--rule-mid); }
.sm-range::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 26px; margin-top: -13px;
  background: var(--ink-900); border: 0; border-radius: var(--radius-0);
}
.sm-range::-moz-range-thumb {
  width: 12px; height: 26px; background: var(--ink-900);
  border: 0; border-radius: var(--radius-0);
}

/* Step explorer rows (how it works). */
.sm-steprow {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--space-4);
  align-items: start; text-align: left;
  width: 100%; background: transparent; cursor: pointer;
  border: 0; border-top: var(--stroke-hair) solid var(--rule-hair);
  padding: var(--space-4) 0; transition: var(--transition-state);
  font: inherit; color: var(--text-body);
}
.sm-steprow:hover { border-top-color: var(--ink-900); }
.sm-steprow[aria-selected="true"] { border-top: var(--stroke-medium) solid var(--ink-900); }
.sm-steprow[aria-selected="true"] .sm-steprow__t { color: var(--ink-900); }
.sm-steprow__t { font-size: 21px; line-height: var(--leading-heading); color: var(--ink-700); }

.sm-panelstack { position: relative; min-height: 440px; }
.sm-panel { display: none; height: 100%; }
.sm-panel[data-active] { display: block; }

.sm-artefact {
  height: 100%; background: var(--shell-100);
  border: var(--stroke-medium) solid var(--ink-900);
  padding: var(--space-5) 26px; display: grid; gap: 14px;
}
.sm-artefact__head {
  display: flex; justify-content: space-between; gap: var(--space-4);
  border-bottom: var(--stroke-medium) solid var(--ink-900); padding-bottom: 10px;
}
.sm-artefact__foot {
  border-top: var(--stroke-hair) solid var(--rule-hair); padding-top: 10px;
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.sm-artefact__big { font-family: var(--font-meta); font-size: 44px; line-height: 1; color: var(--ink-900); }
/* The navy variant sits on a dark ground, so it keeps its own rules and border. */
.sm-artefact.sm-navy { background: var(--marine-900); border-color: var(--marine-600); }
.sm-artefact.sm-navy .sm-artefact__head { border-bottom-color: var(--marine-600); }
.sm-artefact.sm-navy .sm-artefact__foot { border-top-color: var(--marine-700); }

/* Quiz. */
.sm-check {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-4);
  align-items: start; text-align: left; width: 100%;
  background: transparent; border: 0;
  border-top: var(--stroke-hair) solid var(--rule-hair);
  padding: var(--space-4) 0; cursor: pointer; font: inherit; color: var(--text-body);
  transition: var(--transition-state);
}
.sm-check:hover { border-top-color: var(--ink-900); }
.sm-check__box {
  width: 18px; height: 18px; margin-top: 4px;
  border: var(--stroke-medium) solid var(--ink-900); background: transparent;
  transition: var(--transition-state);
}
.sm-check[aria-pressed="true"] .sm-check__box { background: var(--ink-900); }
.sm-check__t { font-size: 18px; line-height: 1.45; }

.sm-verdict { background: var(--sand-300); padding: var(--space-6); display: grid; gap: 14px; align-content: start; }
.sm-verdict * { color: var(--ink-900); }

/* Horizon splitter. */
.sm-horizon {
  position: relative; height: 432px; overflow: hidden;
  touch-action: none; user-select: none;
}
.sm-horizon__layer { position: absolute; inset: 0; padding: 30px 32px; display: grid; align-content: start; }
.sm-horizon__machine { background: var(--marine-900); }
.sm-horizon__human { background: var(--shell-100); }
.sm-horizon__layer > div {
  display: flex; align-items: center;
  border-bottom: var(--stroke-hair) solid var(--rule-hair);
}
.sm-horizon__machine > div {
  border-bottom-color: var(--marine-600);
  font-family: var(--font-meta); font-size: 12px; color: var(--marine-300);
  overflow-wrap: anywhere;
}
.sm-horizon__human > div { font-size: 17px; color: var(--ink-700); }
.sm-horizon__handle {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: var(--stroke-medium) solid var(--sand-300);
  cursor: ns-resize;
}
.sm-horizon__chip {
  position: absolute; left: 12px; top: -10px;
  background: var(--sand-300); color: var(--ink-900);
  font-family: var(--font-meta); font-size: 10px;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  padding: 3px 8px;
}

/* Prompt demo. */
.sm-prompt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: var(--font-meta); font-size: 15px; color: var(--shell-050);
  border-bottom: var(--stroke-medium) solid var(--marine-600); padding-bottom: var(--space-3);
}
.sm-prompt input {
  font-family: var(--font-meta); font-size: 15px; color: var(--sand-300);
  background: transparent; border: 0; border-bottom: var(--stroke-hair) solid var(--marine-600);
  padding: 2px 4px; min-width: 12ch; flex: 0 1 12ch;
}
/* The trade holds longer text than the suburb, so it needs the wider box. */
.sm-prompt input[data-demo-trade] { min-width: 24ch; flex-basis: 24ch; }
.sm-prompt input::placeholder { color: var(--marine-300); }

/* Drift chart. */
.sm-chart { width: 100%; height: 320px; display: block; }
.sm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sm-legend button {
  display: grid; gap: 4px; text-align: left; font: inherit;
  background: transparent; border: 0;
  border-top: var(--stroke-hair) solid var(--rule-hair);
  padding: var(--space-3) var(--space-3) var(--space-3) 0; cursor: pointer;
  transition: var(--transition-state);
}
.sm-legend button:hover, .sm-legend button[aria-pressed="true"] { border-top: var(--stroke-medium) solid var(--ink-900); }
.sm-legend__label { font-size: 16px; color: var(--ink-900); }

/* Cursor follower — pointer-fine enhancement only, added by JS. */
.sm-cursor {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px;
  border: var(--stroke-hair) solid var(--marine-600);
  pointer-events: none; z-index: 9999; opacity: 0;
  transition: width var(--duration-fast) linear, height var(--duration-fast) linear,
              background-color var(--duration-fast) linear, opacity var(--duration-fast) linear;
  will-change: transform;
}
.sm-cursor.is-live { opacity: 1; }
.sm-cursor.is-wide { width: 26px; height: 26px; margin: -8px 0 0 -8px; background: var(--marine-600); opacity: 0.25; }
body.sm-cursor-on { cursor: none; }
body.sm-cursor-on a, body.sm-cursor-on button { cursor: none; }
body.sm-cursor-on input,
body.sm-cursor-on textarea,
body.sm-cursor-on select { cursor: text; }
@media (prefers-reduced-motion: reduce) { .sm-cursor { display: none; } body.sm-cursor-on { cursor: auto; } }

/* --- Print -------------------------------------------------------------- */

@media print {
  .sm-header, .sm-footer, .sm-cursor, canvas { display: none !important; }
  .sm-navy, .sm-marine { background: #fff !important; }
  .sm-inverse, .sm-inverse h1, .sm-inverse h2, .sm-inverse p, .sm-inverse .sm-meta { color: #131A22 !important; }
}