@latchprotocol/widgets 0.1.0

package/dist/styles.css

@@ -0,0 +1,895 @@
+/* Generated from src/styles/css.ts by scripts/emit-css.mjs. Do not edit. */
+.latch-widget {
+  /* Palette */
+  --latch-bg: #ffffff;
+  --latch-bg-elevated: #f6f7f9;
+  --latch-bg-sunken: #eceef2;
+  --latch-border: #dfe3e8;
+  --latch-border-strong: #c4cad3;
+  --latch-text: #10131a;
+  --latch-text-muted: #5c6472;
+  --latch-text-inverted: #ffffff;
+  --latch-accent: #3b5bdb;
+  --latch-accent-hover: #2f49b2;
+  --latch-accent-text: #ffffff;
+  --latch-success: #157347;
+  --latch-warning: #9a6700;
+  --latch-warning-bg: #fff8e1;
+  --latch-danger: #b42318;
+  --latch-danger-bg: #fef3f2;
+  --latch-focus: #3b5bdb;
+  /* The compact swap's Buy side: the CVD-safe "up" colour, with a dark label (6:1). */
+  --latch-buy: #1f9e89;
+  --latch-buy-hover: #23b39b;
+  --latch-buy-text: #04060c;
+
+  /* Shape and type */
+  --latch-radius: 14px;
+  --latch-radius-sm: 9px;
+  --latch-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --latch-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --latch-font-size: 14px;
+  --latch-font-size-sm: 12px;
+  --latch-font-size-lg: 22px;
+  --latch-gap: 12px;
+  --latch-padding: 16px;
+  --latch-control-height: 44px;
+  --latch-shadow: 0 1px 2px rgba(16, 19, 26, 0.06), 0 8px 24px rgba(16, 19, 26, 0.06);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--latch-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 480px;
+  padding: var(--latch-padding);
+  background: var(--latch-bg);
+  color: var(--latch-text);
+  border: 1px solid var(--latch-border);
+  border-radius: var(--latch-radius);
+  box-shadow: var(--latch-shadow);
+  font-family: var(--latch-font);
+  font-size: var(--latch-font-size);
+  line-height: 1.45;
+}
+
+.latch-widget *,
+.latch-widget *::before,
+.latch-widget *::after {
+  box-sizing: inherit;
+}
+
+/* Text takes the WIDGET's ink, not the host page's. A host rule such as
+   \`h2 { color: var(--ink) }\` otherwise beats inheritance: a dark-themed widget
+   on a light page drew its title in the page's near-black on the widget's
+   near-black (1.1:1, axe, the locker embed 2026-09-26). Specificity (0,1,0)
+   beats any element selector; every widget class rule below comes later and
+   still sets its own colour. A host's own content in a slot is left alone. */
+.latch-widget :where(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, li, th, td, figcaption, caption):where(:not(.latch-slot *)) {
+  color: inherit;
+}
+
+.latch-widget[data-latch-theme="dark"] {
+  --latch-bg: #14161b;
+  --latch-bg-elevated: #1c1f26;
+  --latch-bg-sunken: #23262f;
+  --latch-border: #2b2f38;
+  --latch-border-strong: #3d4350;
+  --latch-text: #f2f4f8;
+  --latch-text-muted: #98a1b1;
+  --latch-text-inverted: #14161b;
+  --latch-accent: #6b8afd;
+  --latch-accent-hover: #849dff;
+  --latch-accent-text: #0b0d12;
+  --latch-success: #4ade80;
+  --latch-warning: #fbbf5c;
+  --latch-warning-bg: #33280f;
+  --latch-danger: #ff8a80;
+  --latch-danger-bg: #3a1a17;
+  --latch-focus: #849dff;
+  --latch-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+  .latch-widget[data-latch-theme="system"] {
+    --latch-bg: #14161b;
+    --latch-bg-elevated: #1c1f26;
+    --latch-bg-sunken: #23262f;
+    --latch-border: #2b2f38;
+    --latch-border-strong: #3d4350;
+    --latch-text: #f2f4f8;
+    --latch-text-muted: #98a1b1;
+    --latch-text-inverted: #14161b;
+    --latch-accent: #6b8afd;
+    --latch-accent-hover: #849dff;
+    --latch-accent-text: #0b0d12;
+    --latch-success: #4ade80;
+    --latch-warning: #fbbf5c;
+    --latch-warning-bg: #33280f;
+    --latch-danger: #ff8a80;
+    --latch-danger-bg: #3a1a17;
+    --latch-focus: #849dff;
+    --latch-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+}
+
+.latch-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.latch-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.latch-subtitle {
+  margin: 0;
+  color: var(--latch-text-muted);
+  font-size: var(--latch-font-size-sm);
+}
+
+.latch-mock-banner {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border: 1px solid var(--latch-warning);
+  border-radius: var(--latch-radius-sm);
+  background: var(--latch-warning-bg);
+  color: var(--latch-warning);
+  font-size: var(--latch-font-size-sm);
+  font-weight: 600;
+}
+
+.latch-mock-banner span {
+  font-weight: 500;
+}
+
+.latch-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  background: var(--latch-bg-elevated);
+  border: 1px solid var(--latch-border);
+  border-radius: var(--latch-radius-sm);
+}
+
+.latch-field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.latch-label {
+  display: block;
+  color: var(--latch-text-muted);
+  font-size: var(--latch-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.latch-amount-input {
+  flex: 1 1 120px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--latch-text);
+  font-family: var(--latch-font);
+  font-size: var(--latch-font-size-lg);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.latch-amount-input::placeholder {
+  color: var(--latch-text-muted);
+  font-weight: 500;
+}
+
+.latch-amount-input:focus-visible,
+.latch-select:focus-visible,
+.latch-button:focus-visible,
+.latch-icon-button:focus-visible,
+.latch-slider:focus-visible,
+.latch-chip:focus-visible {
+  outline: 2px solid var(--latch-focus);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.latch-select {
+  flex: 0 1 auto;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 8px;
+  background: var(--latch-bg);
+  color: var(--latch-text);
+  border: 1px solid var(--latch-border-strong);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: var(--latch-font-size);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.latch-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--latch-text-muted);
+  font-size: var(--latch-font-size-sm);
+}
+
+.latch-meta-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.latch-switch-row {
+  display: flex;
+  justify-content: center;
+  margin: -6px 0;
+}
+
+.latch-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: var(--latch-bg);
+  color: var(--latch-text);
+  border: 1px solid var(--latch-border-strong);
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.latch-icon-button:hover {
+  background: var(--latch-bg-sunken);
+}
+
+.latch-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  background: var(--latch-bg-sunken);
+  border-radius: var(--latch-radius-sm);
+  font-size: var(--latch-font-size-sm);
+}
+
+.latch-summary dl {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+}
+
+.latch-summary-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.latch-summary-row dt {
+  color: var(--latch-text-muted);
+  min-width: 0;
+}
+
+.latch-summary-row dd {
+  margin: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.latch-summary-row[data-latch-emphasis="fee"] dd {
+  color: var(--latch-accent);
+  font-weight: 650;
+}
+
+.latch-summary-row[data-latch-severity="high"] dd,
+.latch-summary-row[data-latch-severity="severe"] dd {
+  color: var(--latch-danger);
+  font-weight: 650;
+}
+
+.latch-route {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--latch-font-size-sm);
+  color: var(--latch-text-muted);
+}
+
+.latch-route-token {
+  padding: 2px 8px;
+  background: var(--latch-bg);
+  border: 1px solid var(--latch-border);
+  border-radius: 999px;
+  color: var(--latch-text);
+  font-weight: 600;
+}
+
+.latch-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--latch-control-height);
+  padding: 0 16px;
+  background: var(--latch-accent);
+  color: var(--latch-accent-text);
+  border: 1px solid transparent;
+  border-radius: var(--latch-radius-sm);
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.latch-button:hover:not(:disabled) {
+  background: var(--latch-accent-hover);
+}
+
+.latch-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.latch-button[data-latch-variant="secondary"] {
+  background: var(--latch-bg-elevated);
+  color: var(--latch-text);
+  border-color: var(--latch-border-strong);
+}
+
+.latch-button[data-latch-variant="danger"] {
+  background: var(--latch-danger);
+  color: var(--latch-text-inverted);
+}
+
+.latch-status {
+  min-height: 18px;
+  margin: 0;
+  font-size: var(--latch-font-size-sm);
+  color: var(--latch-text-muted);
+}
+
+.latch-status[data-latch-tone="error"] {
+  color: var(--latch-danger);
+}
+
+.latch-status[data-latch-tone="success"] {
+  color: var(--latch-success);
+}
+
+.latch-error {
+  padding: 10px 12px;
+  background: var(--latch-danger-bg);
+  border: 1px solid var(--latch-danger);
+  border-radius: var(--latch-radius-sm);
+  color: var(--latch-danger);
+  font-size: var(--latch-font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+.latch-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 3px;
+  background: var(--latch-bg-sunken);
+  border-radius: 999px;
+}
+
+.latch-chip {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 7px 10px;
+  background: transparent;
+  color: var(--latch-text-muted);
+  border: 0;
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: var(--latch-font-size-sm);
+  font-weight: 650;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.latch-chip[aria-selected="true"],
+.latch-chip[aria-pressed="true"] {
+  background: var(--latch-bg);
+  color: var(--latch-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.latch-progress {
+  height: 8px;
+  background: var(--latch-bg-sunken);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.latch-progress-fill {
+  height: 100%;
+  background: var(--latch-accent);
+  border-radius: 999px;
+  transition: width 200ms ease;
+}
+
+.latch-slider {
+  width: 100%;
+  accent-color: var(--latch-accent);
+}
+
+.latch-range-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.latch-range-grid input {
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  padding: 0 10px;
+  background: var(--latch-bg);
+  color: var(--latch-text);
+  border: 1px solid var(--latch-border-strong);
+  border-radius: var(--latch-radius-sm);
+  font-family: var(--latch-font-mono);
+  font-size: var(--latch-font-size);
+}
+
+.latch-curve {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--latch-radius-sm);
+  background: var(--latch-bg-sunken);
+}
+
+.latch-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.latch-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--latch-text-muted);
+  font-size: 11px;
+}
+
+.latch-footer a {
+  color: inherit;
+}
+
+.latch-launch-legs {
+  display: grid;
+  gap: 16px;
+}
+
+.latch-empty {
+  margin: 0;
+  color: var(--latch-text-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+@media (max-width: 380px) {
+  .latch-widget {
+    --latch-padding: 12px;
+    --latch-font-size-lg: 20px;
+  }
+
+  .latch-range-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .latch-progress-fill {
+    transition: none;
+  }
+}
+
+/* ============================================================================
+   Swap surface (SwapWidget): panels, big inputs, token buttons, dialog,
+   popover, CTA, details. Every colour is a --latch-* token above.
+   ============================================================================ */
+
+.latch-swap { max-width: 480px; }
+.latch-swap__form { display: flex; flex-direction: column; gap: 4px; }
+
+.latch-panel {
+  background: var(--latch-bg-elevated);
+  border: 1px solid transparent;
+  border-radius: var(--latch-radius);
+  padding: 14px 16px 12px;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.latch-panel:focus-within { border-color: var(--latch-border-strong); background: var(--latch-bg); }
+/* The amount field draws no outline of its own (it is the panel's big number), so the PANEL carries
+   the keyboard focus ring; the border-strong change alone was invisible on a dark theme (WCAG 2.4.7). */
+.latch-panel:has(.latch-big-input:focus-visible) { border-color: var(--latch-focus); box-shadow: 0 0 0 1px var(--latch-focus); }
+.latch-panel__top { display: flex; justify-content: space-between; align-items: center; min-height: 18px; }
+.latch-panel__balance { font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); display: inline-flex; gap: 8px; align-items: center; }
+/* Quick amounts under "You pay": real fractions of the balance just read, one row of equal chips. */
+.latch-portions { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; margin-top: 12px; }
+.latch-portion {
+  font: inherit; font-size: var(--latch-font-size-sm); font-weight: 600; min-height: 36px; padding: 0 8px; border-radius: var(--latch-radius-sm);
+  border: 1px solid var(--latch-border); background: var(--latch-bg); color: var(--latch-text); cursor: pointer;
+  transition: border-color 120ms, color 120ms;
+}
+.latch-portion:hover { border-color: var(--latch-accent); color: var(--latch-accent); }
+.latch-portion:focus-visible { outline: 2px solid var(--latch-focus); outline-offset: 2px; }
+
+/* The compact variant's Buy / Sell pill, in the header where the title was. */
+.latch-sides {
+  flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; min-width: 0;
+  border: 1px solid var(--latch-border); border-radius: 999px; background: var(--latch-bg-sunken);
+}
+.latch-sides__btn {
+  min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--latch-text);
+  font: inherit; font-weight: 600; cursor: pointer; transition: background 120ms, color 120ms;
+}
+.latch-sides__btn:hover { background: var(--latch-bg-elevated); }
+.latch-sides__btn:focus-visible { outline: 2px solid var(--latch-focus); outline-offset: 2px; }
+.latch-sides__btn[data-latch-side="buy"][aria-pressed="true"] { background: var(--latch-buy); color: var(--latch-buy-text); }
+.latch-sides__btn[data-latch-side="sell"][aria-pressed="true"] { background: var(--latch-accent); color: var(--latch-accent-text); }
+.latch-swap .latch-header:has(.latch-sides) { align-items: center; flex-wrap: nowrap; }
+
+/* The compact variant's lines, always visible above the button, one fee per line. */
+.latch-lines { margin: 8px 0 0; padding: 4px 4px 0; display: grid; gap: 8px; }
+.latch-lines .latch-details__row { font-size: 13px; }
+.latch-lines output { font: inherit; transition: opacity 150ms; }
+.latch-lines output.is-refreshing { opacity: 0.55; }
+.latch-swap__form[data-latch-variant="compact"][data-latch-swap-side="buy"] .latch-cta { background: var(--latch-buy); color: var(--latch-buy-text); }
+.latch-swap__form[data-latch-variant="compact"][data-latch-swap-side="buy"] .latch-cta:hover:not(:disabled) { background: var(--latch-buy-hover); }
+.latch-panel__main { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
+.latch-big-input {
+  flex: 1 1 auto; min-width: 0; width: 100%;
+  font-family: var(--latch-font); font-size: 32px; font-weight: 500; letter-spacing: -0.01em;
+  background: transparent; border: 0; color: var(--latch-text); padding: 4px 0; outline: none;
+}
+.latch-big-input::placeholder, .latch-big-input__placeholder { color: var(--latch-text-muted); opacity: 0.7; }
+.latch-big-input--out { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms; }
+.latch-big-input--out.is-refreshing { opacity: 0.55; }
+.latch-panel__error { margin: 6px 0 0; font-size: var(--latch-font-size-sm); color: var(--latch-danger); }
+.latch-panel__note { margin: 6px 0 0; font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); }
+
+.latch-token-button {
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 10px 6px 6px; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer;
+  background: var(--latch-bg); color: var(--latch-text); border: 1px solid var(--latch-border);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: border-color 120ms, transform 80ms;
+}
+.latch-token-button:hover { border-color: var(--latch-border-strong); }
+.latch-token-button:active { transform: scale(0.98); }
+.latch-token-button__chevron { color: var(--latch-text-muted); font-size: 12px; }
+.latch-token-button--locked { cursor: default; box-shadow: none; background: var(--latch-bg-sunken); }
+.latch-token-button--locked:hover { border-color: var(--latch-border); }
+.latch-slot { display: block; }
+.latch-slot--header { margin-top: -4px; }
+.latch-token-logo { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--latch-bg-sunken); }
+.latch-token-logo--initials {
+  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
+  color: #fff; letter-spacing: 0.01em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  background: linear-gradient(140deg, hsl(var(--latch-mono-hue, 215) 62% 52%), hsl(calc(var(--latch-mono-hue, 215) + 28) 58% 34%));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.latch-flip { display: flex; justify-content: center; height: 0; position: relative; z-index: 1; }
+.latch-flip__button {
+  position: relative; top: -16px; width: 36px; height: 36px; border-radius: 12px; cursor: pointer;
+  background: var(--latch-bg); border: 4px solid var(--latch-bg); color: var(--latch-text);
+  box-shadow: 0 0 0 1px var(--latch-border); font-size: 16px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center; transition: transform 160ms ease, background 120ms;
+}
+.latch-flip__button:hover { background: var(--latch-bg-sunken); transform: rotate(180deg); }
+
+.latch-cta {
+  margin-top: 8px; width: 100%; height: 52px; border: 0; border-radius: var(--latch-radius);
+  background: var(--latch-accent); color: var(--latch-accent-text); font: inherit; font-size: 17px; font-weight: 700;
+  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
+  transition: background 120ms, transform 80ms, opacity 120ms;
+}
+.latch-cta:hover:not(:disabled) { background: var(--latch-accent-hover); }
+.latch-cta:active:not(:disabled) { transform: scale(0.995); }
+.latch-cta:disabled { background: var(--latch-bg-sunken); color: var(--latch-text-muted); cursor: not-allowed; }
+.latch-cta[data-latch-busy="true"] { opacity: 0.85; cursor: progress; }
+.latch-spinner {
+  width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
+  animation: latch-spin 0.8s linear infinite;
+}
+@keyframes latch-spin { to { transform: rotate(360deg); } }
+
+.latch-ack {
+  display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 10px 12px;
+  border-radius: var(--latch-radius-sm); background: var(--latch-warning-bg); color: var(--latch-text); font-size: var(--latch-font-size-sm);
+}
+.latch-ack input { margin-top: 2px; }
+
+.latch-details { margin-top: 8px; border: 1px solid var(--latch-border); border-radius: var(--latch-radius-sm); overflow: hidden; }
+.latch-details__toggle {
+  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
+  padding: 10px 12px; background: transparent; border: 0; font: inherit; color: var(--latch-text); cursor: pointer; text-align: left;
+}
+.latch-details__toggle:hover { background: var(--latch-bg-elevated); }
+.latch-details__rate { font-weight: 600; cursor: pointer; }
+.latch-details__hint { display: inline-flex; gap: 10px; align-items: center; color: var(--latch-text-muted); font-size: var(--latch-font-size-sm); }
+.latch-details__list { margin: 0; padding: 4px 12px 10px; display: grid; gap: 6px; border-top: 1px solid var(--latch-border); }
+.latch-details__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--latch-font-size-sm); }
+.latch-details__row dt { color: var(--latch-text-muted); }
+.latch-details__row dd { margin: 0; text-align: right; color: var(--latch-text); overflow-wrap: anywhere; }
+[data-latch-severity="high"] { color: var(--latch-danger) !important; }
+[data-latch-severity="medium"] { color: var(--latch-warning) !important; }
+
+.latch-settings-trigger { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; border-radius: 999px; }
+.latch-settings-trigger__value { font-size: var(--latch-font-size-sm); font-weight: 600; }
+
+/* Overlays. Portalled into .latch-widget, so they inherit the tokens. */
+.latch-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); animation: latch-fade 120ms ease; z-index: 50; }
+.latch-dialog {
+  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 51;
+  width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px));
+  display: flex; flex-direction: column; gap: 10px;
+  background: var(--latch-bg); color: var(--latch-text); border: 1px solid var(--latch-border);
+  border-radius: var(--latch-radius); box-shadow: var(--latch-shadow); padding: 14px 14px 8px;
+  font-family: var(--latch-font); font-size: var(--latch-font-size); animation: latch-pop 140ms ease;
+}
+@keyframes latch-fade { from { opacity: 0; } }
+@keyframes latch-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } }
+.latch-dialog__head { display: flex; justify-content: space-between; align-items: center; }
+.latch-dialog__title { margin: 0; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
+.latch-dialog__count {
+  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
+  color: var(--latch-text-muted); background: var(--latch-bg-elevated); border: 1px solid var(--latch-border);
+}
+.latch-search-wrap { position: relative; display: flex; align-items: center; }
+.latch-search-wrap__icon { position: absolute; left: 14px; color: var(--latch-text-muted); pointer-events: none; }
+.latch-search-wrap__clear {
+  position: absolute; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; cursor: pointer;
+  background: var(--latch-bg-sunken); color: var(--latch-text-muted); font-size: 16px; line-height: 1;
+}
+.latch-search-wrap__clear:hover { color: var(--latch-text); }
+.latch-search {
+  width: 100%; font: inherit; font-size: 16px; padding: 12px 40px; border-radius: 999px;
+  border: 1px solid var(--latch-border); background: var(--latch-bg-elevated); color: var(--latch-text); outline: none;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+.latch-search:focus { border-color: var(--latch-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--latch-accent) 22%, transparent); }
+.latch-common { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
+.latch-chip--token {
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px;
+  border-radius: 999px; border: 1px solid var(--latch-border); background: var(--latch-bg-elevated); color: var(--latch-text);
+  font-weight: 600; transition: border-color 120ms, background 120ms;
+}
+.latch-chip--token:hover { border-color: color-mix(in srgb, var(--latch-accent) 55%, var(--latch-border)); }
+.latch-chip--token[aria-pressed="true"] { border-color: var(--latch-accent); background: color-mix(in srgb, var(--latch-accent) 14%, var(--latch-bg-elevated)); }
+.latch-token-list { list-style: none; margin: 0 -14px; padding: 6px 8px 8px; overflow-y: auto; border-top: 1px solid var(--latch-border); }
+.latch-token-row {
+  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 56px; background: transparent; border: 0;
+  border-radius: 12px; font: inherit; color: var(--latch-text); cursor: pointer; text-align: left; transition: background 100ms;
+}
+.latch-token-row:hover:not(:disabled), .latch-token-row:focus-visible { background: var(--latch-bg-elevated); outline: none; }
+.latch-token-row:focus-visible { box-shadow: inset 0 0 0 2px var(--latch-accent); }
+.latch-token-row[aria-selected="true"] { background: color-mix(in srgb, var(--latch-accent) 10%, transparent); }
+.latch-token-row:disabled { opacity: 0.4; cursor: not-allowed; }
+.latch-token-row--note { color: var(--latch-text-muted); font-size: var(--latch-font-size-sm); cursor: default; min-height: 0; }
+.latch-token-row--empty { justify-content: center; text-align: center; padding: 28px 16px; }
+.latch-token-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.latch-token-row__symbol { font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; flex-wrap: wrap; }
+.latch-token-row__name { font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.latch-token-row__balance { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; color: var(--latch-text); font-weight: 600; }
+.latch-token-row__balance-sym { font-size: 11px; font-weight: 500; color: var(--latch-text-muted); }
+.latch-token-row__check { color: var(--latch-accent); font-weight: 700; font-size: 15px; margin-left: 4px; }
+@media (prefers-reduced-motion: reduce) {
+  .latch-token-row, .latch-chip--token, .latch-search { transition: none; }
+}
+.latch-token-row--unlisted { background: color-mix(in srgb, var(--latch-warning) 8%, transparent); }
+.latch-token-row__badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
+.latch-badge {
+  display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.01em;
+  border: 1px solid var(--latch-border); background: var(--latch-bg-elevated); color: var(--latch-text-muted); white-space: nowrap;
+}
+.latch-badge[data-latch-tone="info"] { color: var(--latch-accent); border-color: color-mix(in srgb, var(--latch-accent) 35%, transparent); }
+.latch-badge[data-latch-tone="warn"] { color: var(--latch-warning); border-color: color-mix(in srgb, var(--latch-warning) 45%, transparent); }
+.latch-token-group { list-style: none; }
+.latch-token-group__label {
+  display: block; padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--latch-text-muted); border-top: 1px solid var(--latch-border);
+}
+.latch-token-group:first-child .latch-token-group__label { border-top: 0; }
+.latch-token-group__list { list-style: none; margin: 0; padding: 0; }
+
+.latch-popover {
+  z-index: 51; width: min(320px, calc(100vw - 32px)); background: var(--latch-bg); color: var(--latch-text);
+  border: 1px solid var(--latch-border); border-radius: var(--latch-radius); box-shadow: var(--latch-shadow); padding: 12px;
+  display: flex; flex-direction: column; gap: 8px; font-family: var(--latch-font); font-size: var(--latch-font-size); animation: latch-fade 120ms ease;
+}
+.latch-popover__row { display: flex; justify-content: space-between; align-items: center; }
+.latch-popover__value { font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); }
+.latch-custom-slippage { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
+.latch-custom-slippage input {
+  width: 56px; font: inherit; font-size: var(--latch-font-size-sm); padding: 6px 8px; border-radius: 999px;
+  border: 1px solid var(--latch-border); background: var(--latch-bg); color: var(--latch-text); text-align: right; outline: none;
+}
+.latch-custom-slippage input:focus { border-color: var(--latch-accent); }
+.latch-note { margin: 0; font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); }
+.latch-note--warn { color: var(--latch-warning); }
+.latch-footer--brand { justify-content: center; color: var(--latch-text-muted); font-size: 11px; }
+.latch-footer a { color: var(--latch-accent); text-decoration: none; }
+
+/* ============================================================================
+   Locks (LocksBadge, LocksPanel): the locked share and a countdown. Every
+   colour is a --latch-* token above.
+   ============================================================================ */
+.latch-locks { gap: 6px; }
+.latch-locks--badge { display: inline-flex; flex-direction: column; width: auto; max-width: 100%; padding: 10px 14px; box-shadow: none; border-radius: var(--latch-radius-sm); }
+.latch-locks--panel { max-width: none; }
+.latch-locks__headline { margin: 0; display: flex; align-items: baseline; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
+.latch-locks__headline--muted { color: var(--latch-text-muted); font-weight: 500; }
+.latch-locks__headline--error { color: var(--latch-danger); font-weight: 500; }
+.latch-locks__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--latch-text-muted); transform: translateY(-1px); }
+.latch-locks__dot--locked { background: var(--latch-success); }
+.latch-locks__dot--open { background: var(--latch-warning); }
+.latch-locks__dot--none { background: var(--latch-border-strong); }
+.latch-locks__countdown { margin: 0; font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); overflow-wrap: anywhere; }
+.latch-locks__timer { font-family: var(--latch-font-mono); font-variant-numeric: tabular-nums; color: var(--latch-text); }
+.latch-locks__link { font-size: var(--latch-font-size-sm); color: var(--latch-accent); text-decoration: none; font-weight: 600; }
+.latch-locks__link:hover { text-decoration: underline; }
+.latch-locks__link:focus-visible { outline: 2px solid var(--latch-focus); outline-offset: 2px; border-radius: 4px; }
+.latch-locks__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
+.latch-locks__item { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--latch-border); border-radius: var(--latch-radius-sm); background: var(--latch-bg-elevated); min-width: 0; }
+.latch-locks__item[data-status="withdrawn"], .latch-locks__item[data-status="claimed"] { opacity: 0.72; }
+.latch-locks__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.latch-locks__status { flex: 0 0 auto; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
+.latch-locks__status--locked, .latch-locks__status--cliff, .latch-locks__status--vesting { color: var(--latch-success); }
+.latch-locks__status--unlockable, .latch-locks__status--vested { color: var(--latch-warning); }
+.latch-locks__status--withdrawn, .latch-locks__status--claimed { color: var(--latch-text-muted); }
+.latch-locks__status--permanent { color: var(--latch-accent, var(--latch-success)); }
+.latch-locks__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; font-size: var(--latch-font-size-sm); }
+.latch-locks__facts div { min-width: 0; }
+.latch-locks__facts dt { color: var(--latch-text-muted); }
+.latch-locks__facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+
+/* Lock charts (lockCharts.tsx): a locked-share bar that grows in, and a release
+   schedule that draws on. Motion off under prefers-reduced-motion. */
+.latch-sharebar { display: grid; gap: 6px; min-width: 0; }
+.latch-locks--badge .latch-sharebar { min-width: 180px; }
+.latch-sharebar__track { height: 8px; border-radius: 999px; overflow: hidden; background: var(--latch-bg-sunken); }
+.latch-sharebar__grow { display: flex; height: 100%; transform-origin: left center; animation: latch-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
+.latch-sharebar__part { flex: 0 0 auto; height: 100%; }
+.latch-sharebar__part + .latch-sharebar__part { box-shadow: inset 2px 0 0 var(--latch-bg); }
+.latch-sharebar__part--permanent, .latch-sharebar__part--lp { background: var(--latch-success); }
+.latch-sharebar__part--time, .latch-sharebar__part--unvested { background: var(--latch-accent); }
+.latch-sharebar__part--vested { background: var(--latch-accent); opacity: 0.45; }
+.latch-sharebar__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--latch-text-muted); font-variant-numeric: tabular-nums; }
+.latch-sharebar__key li { display: inline-flex; align-items: center; gap: 5px; }
+.latch-sharebar__sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
+.latch-spark { margin: 2px 0 0; display: grid; gap: 4px; }
+.latch-spark__svg { display: block; width: 100%; height: 44px; overflow: visible; cursor: crosshair; border-radius: 4px; }
+.latch-spark__svg:focus-visible { outline: 2px solid var(--latch-focus); outline-offset: 2px; }
+.latch-spark__base { stroke: var(--latch-border); stroke-width: 1; }
+.latch-spark__line { stroke: var(--latch-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2000; animation: latch-draw 1.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
+.latch-spark__now { stroke: var(--latch-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
+.latch-spark__cross { stroke: var(--latch-accent); stroke-width: 1; opacity: 0.6; }
+.latch-spark__cap { font-size: 11px; color: var(--latch-text-muted); overflow-wrap: anywhere; }
+.latch-locks .latch-progress-fill, .latch-locker .latch-progress-fill { transform-origin: left center; animation: latch-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
+@keyframes latch-grow { from { transform: scaleX(0.02); } to { transform: scaleX(1); } }
+@keyframes latch-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .latch-sharebar__grow, .latch-spark__line, .latch-locks .latch-progress-fill, .latch-locker .latch-progress-fill { animation: none; transform: none; stroke-dashoffset: 0; }
+}
+
+/* ============================================================================
+   Token trust (TokenTrustPanel): labelled rows, each with its source.
+   ============================================================================ */
+.latch-trust { max-width: none; gap: 8px; }
+.latch-trust__list { margin: 0; display: grid; gap: 0; }
+.latch-trust__row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--latch-border); min-width: 0; }
+.latch-trust__row:first-child { border-top: 0; }
+@media (max-width: 520px) { .latch-trust__row { grid-template-columns: 1fr; } }
+.latch-trust__label { color: var(--latch-text-muted); font-size: var(--latch-font-size-sm); font-weight: 600; }
+.latch-trust__value { margin: 0; min-width: 0; display: grid; gap: 3px; }
+.latch-trust__headline { margin: 0; display: flex; align-items: baseline; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
+.latch-trust__detail { margin: 0; font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); overflow-wrap: anywhere; }
+.latch-trust__source { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--latch-font-mono); font-size: 11px; color: var(--latch-text-muted); overflow-wrap: anywhere; }
+.latch-trust__source a { color: inherit; text-decoration: underline; text-decoration-color: var(--latch-border-strong); }
+.latch-trust__source a:hover { color: var(--latch-accent); }
+.latch-trust__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--latch-border-strong); transform: translateY(-1px); }
+.latch-trust__dot--locked { background: var(--latch-success); }
+.latch-trust__dot--neutral { background: var(--latch-text-muted); }
+.latch-trust__dot--caution { background: var(--latch-warning); }
+.latch-trust__dot--flagged, .latch-trust__dot--error { background: var(--latch-danger); }
+.latch-trust__row[data-tone="flagged"] .latch-trust__headline, .latch-trust__row[data-tone="error"] .latch-trust__headline { color: var(--latch-danger); }
+.latch-trust__subhead { margin: 6px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--latch-text-muted); }
+.latch-trust__pool { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--latch-border); border-radius: var(--latch-radius-sm); background: var(--latch-bg-elevated); min-width: 0; }
+.latch-trust__pool-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
+.latch-trust__pool-head code { font-family: var(--latch-font-mono); font-size: 11px; color: var(--latch-text-muted); }
+.latch-trust__found { margin: 0; font-size: 11px; color: var(--latch-text-muted); }
+.latch-trust__link { font-size: var(--latch-font-size-sm); color: var(--latch-accent); text-decoration: none; font-weight: 600; margin-left: auto; }
+.latch-trust__link:hover { text-decoration: underline; }
+.latch-trust__state { margin: 0; color: var(--latch-text-muted); }
+.latch-trust__state--error { color: var(--latch-danger); }
+.latch-trust__retry { font: inherit; background: none; border: 0; padding: 0; color: var(--latch-accent); cursor: pointer; text-decoration: underline; }
+
+/* ============================================================================
+   Locker (LockerWidget): lock a position, lock or vest tokens, manage locks.
+   ============================================================================ */
+.latch-locker { gap: 10px; }
+.latch-locker__tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--latch-bg-sunken); }
+.latch-locker__tab { flex: 1; font: inherit; font-size: var(--latch-font-size-sm); font-weight: 600; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--latch-text-muted); cursor: pointer; }
+.latch-locker__tab[aria-selected="true"] { background: var(--latch-bg); color: var(--latch-text); box-shadow: var(--latch-shadow); }
+.latch-locker__field { display: grid; gap: 4px; font-size: var(--latch-font-size-sm); }
+.latch-locker__field > span { color: var(--latch-text-muted); font-weight: 600; }
+.latch-locker__input { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--latch-radius-sm); border: 1px solid var(--latch-border); background: var(--latch-bg-elevated); color: var(--latch-text); outline: none; min-width: 0; }
+.latch-locker__input:focus { border-color: var(--latch-accent); }
+.latch-locker__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+@media (max-width: 420px) { .latch-locker__row2 { grid-template-columns: 1fr; } }
+.latch-locker__issues { margin: 0; padding-left: 18px; color: var(--latch-danger); font-size: var(--latch-font-size-sm); }
+.latch-locker__fee { margin: 0; padding: 8px 10px; border-radius: var(--latch-radius-sm); background: var(--latch-bg-elevated); font-size: var(--latch-font-size-sm); display: grid; gap: 2px; }
+.latch-locker__fee strong { font-variant-numeric: tabular-nums; }
+.latch-locker__steps { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--latch-font-size-sm); color: var(--latch-text-muted); }
+.latch-locker__steps li[data-state="done"] { color: var(--latch-success); }
+.latch-locker__steps li[data-state="active"] { color: var(--latch-text); font-weight: 600; }
+.latch-locker__status { margin: 0; font-size: var(--latch-font-size-sm); overflow-wrap: anywhere; }
+.latch-locker__status[data-kind="error"] { color: var(--latch-danger); }
+.latch-locker__status[data-kind="success"] { color: var(--latch-success); }
+.latch-locker__actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.latch-locker__btn { font: inherit; font-size: var(--latch-font-size-sm); font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--latch-border-strong); background: var(--latch-bg); color: var(--latch-text); cursor: pointer; }
+.latch-locker__btn:hover:not(:disabled) { border-color: var(--latch-accent); color: var(--latch-accent); }
+.latch-locker__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.latch-locker__choice { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--latch-font-size-sm); }
+.latch-locker__choice label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
+
+/* ============================================================================
+   The Latch mark (brand kit masters/latch-mark.svg, loaded as shipped, never
+   redrawn). 24 px wide is the kit's minimum; the margin is its clear space
+   (the height of the hook's eye at this size).
+   ============================================================================ */
+.latch-brand { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: var(--latch-text-muted); }
+.latch-brand__mark { flex: 0 0 auto; width: 24px; height: auto; margin: 4px; display: block; }
+.latch-brand__spacer { flex: 1; }
+
+
+/* ============================================================================
+   Touch (pointer: coarse): 44px targets, and inputs at 16px so iOS Safari does
+   not zoom the host page when a field is focused.
+   ============================================================================ */
+@media (pointer: coarse) {
+  .latch-widget input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+  .latch-widget select,
+  .latch-widget textarea,
+  .latch-locker input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+  .latch-locker select { font-size: max(16px, 1em); }
+  .latch-portion, .latch-chip, .latch-select, .latch-settings-trigger, .latch-icon-button,
+  .latch-locker__tab, .latch-locker__input, .latch-locker__btn, .latch-button, .latch-token-button { min-height: 44px; }
+  .latch-locker__choice label { min-height: 44px; }
+}