/* ═══════════════════════════════════════════════════════════════════════════
   Synapse UI — component stylesheet
   design/unified-experience/03-ui-system/components.md

   Light DOM, `sy-` prefixed (DD-41). No shadow DOM: products set
   style-src 'self' and several forbid inline styles, so a shadow root would
   need either an inline <style> (blocked) or adopted stylesheets (uneven
   across the portfolio's oldest bundles). Light DOM also lets a product's own
   tokens cascade in, which is what "endorsed brands" requires.

   Every colour here comes from the SEMANTIC layer in tokens.css. If you find
   yourself typing a hex value in this file, the token is missing.
   ═══════════════════════════════════════════════════════════════════════════ */

.sy-root {
  font-family: var(--sy-face);
  font-size: var(--sy-t-base);
  line-height: var(--sy-lh);
  color: var(--sy-text);
  background: var(--sy-surface);
}

.sy-root h1, .sy-root h2, .sy-root h3 {
  font-family: var(--sy-face-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.sy-root h1 { font-size: var(--sy-t-xl); }
.sy-root h2 { font-size: var(--sy-t-l); }
.sy-root h3 { font-size: var(--sy-t-m); }

/* Links are underlined, always. Colour is never the only signal (WCAG 1.4.1). */
.sy-root a { color: var(--sy-text-link); text-decoration: underline; }

/* One focus style, portfolio-wide. */
.sy-root :focus-visible {
  outline: none;
  box-shadow: var(--sy-focus-ring);
  border-radius: var(--radius-sm);
}

.sy-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Three weights. Exactly one primary is visible per screen region, which
   sy-action-footer enforces structurally rather than by review (standard
   §2.3). The text button is NOT de-emphasised below the contrast floor —
   making "no" hard to see is a dark pattern, and declining a consent has to
   stay as reachable as granting it. */
.sy-btn {
  font: inherit;
  font-weight: 600;
  min-height: var(--sy-target);
  padding: var(--sy-s2) var(--sy-s4);
  border-radius: var(--radius-sm);
  border: var(--sy-line-width) solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sy-s2);
  text-decoration: none;
}
.sy-btn-primary   { background: var(--sy-text); color: var(--sy-surface-raised); }
.sy-btn-secondary { background: var(--sy-surface-raised); color: var(--sy-text); border-color: var(--sy-line); }
.sy-btn-text      { background: none; color: var(--sy-text); text-decoration: underline; padding-inline: var(--sy-s2); }
.sy-btn-danger    { background: var(--sy-status-overdue); color: var(--sy-status-overdue-on); }
.sy-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Status ───────────────────────────────────────────────────────────────
   Icon + label + colour. Three signals, and the label is never empty. */
.sy-status { display: inline-flex; align-items: center; gap: var(--sy-s2); font-size: var(--sy-t-s); font-weight: 600; }
.sy-status-dot {
  width: 1.1em; height: 1.1em; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85em; line-height: 1;
}
.sy-status-ok      .sy-status-dot { background: var(--sy-status-ok);      color: var(--sy-status-ok-on); }
.sy-status-due     .sy-status-dot { background: var(--sy-status-due);     color: var(--sy-status-due-on); }
.sy-status-overdue .sy-status-dot { background: var(--sy-status-overdue); color: var(--sy-status-overdue-on); }
.sy-status-alert   .sy-status-dot { background: var(--sy-status-alert);   color: var(--sy-status-alert-on); border-radius: var(--sy-s1); }
.sy-status-none    .sy-status-dot { background: var(--sy-status-none);    color: var(--sy-status-none-on); }
.sy-status-overdue, .sy-status-alert { color: var(--sy-text-danger); }

/* ── Portfolio bar ───────────────────────────────────────────────────────
   Normal flow, never fixed, so it cannot cover a product's own chrome. */
sy-portfolio-bar { display: block; }
.sy-bar {
  background: var(--sy-surface-inverse);
  color: var(--sy-text-on-inverse);
  padding: var(--sy-s2) var(--sy-s4);
  padding-top: calc(var(--sy-s2) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: var(--sy-s3); flex-wrap: wrap;
  font-size: var(--sy-t-s);
  position: relative; z-index: 2147483000;
}
.sy-bar a, .sy-bar button { color: inherit; }
.sy-bar-spacer { flex: 1 1 auto; }
.sy-bar-item {
  background: none; border: none; font: inherit; font-weight: 600;
  padding: var(--sy-s1) var(--sy-s2); cursor: pointer;
  min-height: 28px; display: inline-flex; align-items: center; gap: var(--sy-s1);
}
.sy-bar-count {
  background: var(--sy-status-due); color: var(--sy-status-due-on);
  border-radius: 999px; padding: 0 var(--sy-s2); font-weight: 700; min-width: 1.6em; text-align: center;
}
.sy-bar-subject { opacity: 0.85; overflow-wrap: anywhere; }
@media (max-width: 519px) {
  .sy-bar { font-size: var(--sy-t-xs); }
  .sy-bar-spacer { flex-basis: 100%; height: 0; }
}

/* ── Session banner ─────────────────────────────────────────────────────── */
.sy-session {
  display: flex; align-items: center; gap: var(--sy-s3); flex-wrap: wrap;
  background: var(--sy-status-due); color: var(--sy-status-due-on);
  padding: var(--sy-s3) var(--sy-s4);
  border-radius: var(--radius-sm);
}

/* ── Cards ───────────────────────────────────────────────────────────────
   A card never changes height after it loads: the loading frame is sized from
   the slot's declared maximum (3 lines + 2 actions), so arrival is a content
   swap, not a reflow. */
sy-today-card { display: block; }
.sy-card {
  background: var(--sy-surface-raised);
  border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius);
  padding: var(--sy-s4);
  box-shadow: var(--sy-shadow);
  display: flex; flex-direction: column; gap: var(--sy-s2);
  min-height: 9.5rem;
  transition: opacity var(--sy-motion-fast) linear;
}
.sy-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sy-s3); }
.sy-card-title { font-weight: 700; }
.sy-card-product { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); white-space: nowrap; }
.sy-card-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sy-s1); }
.sy-card-lines li { font-size: var(--sy-t-s); }
.sy-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sy-s3); flex-wrap: wrap; }
.sy-card-asof { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-card-actions { display: flex; gap: var(--sy-s2); flex-wrap: wrap; }
.sy-card[data-state="loading"] { opacity: 0.7; }
.sy-card[data-state="unreachable"],
.sy-card[data-state="denied"] { background: var(--sy-surface-recessed); }

.sy-card-grid {
  display: grid; gap: var(--sy-s4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sy-card-grid { grid-template-columns: 1fr 1fr; } }

/* ── Metric tile ────────────────────────────────────────────────────────── */
.sy-metric { display: flex; flex-direction: column; gap: var(--sy-s1); }
.sy-metric-label { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-metric-value { font-size: var(--sy-t-m); font-weight: 700; }
.sy-metric-unit  { font-size: var(--sy-t-s); font-weight: 400; color: var(--sy-text-quiet); }
.sy-trend-good { color: var(--sy-status-ok); }
.sy-trend-bad  { color: var(--sy-text-danger); }
.sy-trend-neutral { color: var(--sy-text-quiet); }

/* ── Timeline and documents ─────────────────────────────────────────────── */
.sy-timeline-item {
  display: flex; gap: var(--sy-s3); padding: var(--sy-s3) 0;
  border-bottom: var(--sy-line-width) solid var(--sy-line);
}
.sy-timeline-date { flex: 0 0 7rem; font-size: var(--sy-t-s); color: var(--sy-text-quiet); }
.sy-doc {
  display: flex; flex-direction: column; gap: var(--sy-s1);
  padding: var(--sy-s3); border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius-sm); background: var(--sy-surface-raised);
}
.sy-doc-what { font-weight: 600; }
.sy-doc-meta { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-doc-shared { font-size: var(--sy-t-xs); color: var(--sy-text-danger); }

/* ── Inbox and tasks ────────────────────────────────────────────────────── */
.sy-inbox { display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-inbox-strip {
  background: var(--sy-surface-raised);
  border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius);
  padding: var(--sy-s4);
}
.sy-inbox-head { display: flex; align-items: center; gap: var(--sy-s2); margin-bottom: var(--sy-s3); }
.sy-inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-task {
  display: flex; align-items: center; gap: var(--sy-s3); flex-wrap: wrap;
  padding: var(--sy-s2) 0;
}
.sy-task-body { flex: 1 1 14rem; min-width: 0; }
.sy-task-title { font-weight: 600; }
.sy-task-meta { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-task[data-state="done"] .sy-task-title { text-decoration: line-through; color: var(--sy-text-quiet); }
.sy-inbox-empty { color: var(--sy-text-quiet); }

/* ── Trust surfaces ─────────────────────────────────────────────────────── */
.sy-panel {
  background: var(--sy-surface-raised);
  border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius); padding: var(--sy-s4);
  display: flex; flex-direction: column; gap: var(--sy-s4);
}
.sy-panel h3 { font-size: var(--sy-t-s); text-transform: none; color: var(--sy-text-quiet); font-family: var(--sy-face); }
.sy-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-person { display: flex; gap: var(--sy-s3); align-items: baseline; flex-wrap: wrap; }
.sy-person-name { font-weight: 600; flex: 0 0 auto; }
.sy-person-role { font-size: var(--sy-t-s); color: var(--sy-text-quiet); flex: 1 1 auto; }

.sy-ceremony { display: flex; flex-direction: column; gap: var(--sy-s5); max-width: 42rem; }
.sy-ceremony section { display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-ceremony h3 { font-size: var(--sy-t-s); color: var(--sy-text-quiet); font-family: var(--sy-face); }
.sy-ceremony-version { font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-ceremony-effects { border-collapse: collapse; width: 100%; }
.sy-ceremony-effects th { text-align: left; font-weight: 600; padding: var(--sy-s2) var(--sy-s3) var(--sy-s2) 0; vertical-align: top; white-space: nowrap; }
.sy-ceremony-effects td { padding: var(--sy-s2) 0; }

.sy-chip {
  display: inline-flex; align-items: center; gap: var(--sy-s1);
  font-size: var(--sy-t-xs); font-weight: 600;
  padding: var(--sy-s1) var(--sy-s2); border-radius: 999px;
  border: var(--sy-line-width) solid var(--sy-line);
}
.sy-chip[data-state="active"]   { border-color: var(--sy-status-ok); color: var(--sy-status-ok); }
.sy-chip[data-state="expiring"] { border-color: var(--sy-status-due); color: var(--sy-text); background: var(--sy-status-due); }
.sy-chip[data-state="ended"]    { color: var(--sy-text-quiet); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.sy-steps { display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-steps ol { display: flex; flex-wrap: wrap; gap: var(--sy-s2); list-style: none; margin: 0; padding: 0; }
.sy-step {
  padding: var(--sy-s1) var(--sy-s3); border-radius: var(--radius-sm);
  background: var(--sy-surface-recessed); color: var(--sy-text-quiet); font-size: var(--sy-t-s);
}
.sy-step[data-state="done"]    { background: var(--sy-status-ok); color: var(--sy-status-ok-on); }
.sy-step[data-state="current"] { background: var(--sy-text); color: var(--sy-surface-raised); font-weight: 700; }
.sy-steps-resumable { font-size: var(--sy-t-s); color: var(--sy-text-quiet); }

.sy-field { display: flex; flex-direction: column; gap: var(--sy-s1); margin-bottom: var(--sy-s4); }
.sy-field label { font-weight: 600; }
.sy-field-hint { font-size: var(--sy-t-s); color: var(--sy-text-quiet); }
.sy-field input, .sy-field select, .sy-field textarea {
  font: inherit; min-height: var(--sy-target);
  padding: var(--sy-s2) var(--sy-s3);
  border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius-sm);
  background: var(--sy-surface-raised); color: var(--sy-text);
  width: 100%; box-sizing: border-box;
}
.sy-field[data-state="invalid"] input,
.sy-field[data-state="invalid"] select,
.sy-field[data-state="invalid"] textarea { border-color: var(--sy-status-overdue); border-width: 2px; }
.sy-field-error { color: var(--sy-text-danger); font-size: var(--sy-t-s); font-weight: 600; }
.sy-field-fix   { color: var(--sy-text); font-size: var(--sy-t-s); }

.sy-action-footer {
  display: flex; align-items: center; gap: var(--sy-s3); flex-wrap: wrap;
  padding-top: var(--sy-s4);
  border-top: var(--sy-line-width) solid var(--sy-line);
}
/* Ordering and alignment, now that the buttons are direct children of the
   footer rather than moved into wrappers (see synapse-ui.js). The primary
   comes first in source order and the secondaries push to the right. */
.sy-action-footer > [slot="primary"] { order: 1; }
.sy-action-footer > [slot="secondary"] { order: 2; }
.sy-action-footer > [slot="secondary"]:nth-of-type(1 of [slot="secondary"]) { margin-left: auto; }
.sy-action-footer .sy-secondary { margin-left: auto; display: flex; gap: var(--sy-s3); align-items: center; }
@media (max-width: 519px) {
  .sy-action-footer[data-sticky] {
    position: sticky; bottom: 0; background: var(--sy-surface);
    padding-bottom: calc(var(--sy-s3) + env(safe-area-inset-bottom, 0px));
  }
  .sy-action-footer .sy-secondary { margin-left: 0; }
  .sy-action-footer > [slot="secondary"] { margin-left: 0; }
}

.sy-qc { display: flex; flex-direction: column; gap: var(--sy-s2); }
.sy-qc-options { display: flex; flex-direction: column; gap: var(--sy-s2); }

/* ── Data ───────────────────────────────────────────────────────────────── */
.sy-table-scroll { overflow-x: auto; }
.sy-table { border-collapse: collapse; width: 100%; font-size: var(--sy-t-s); }
.sy-table caption { text-align: left; font-weight: 600; padding-bottom: var(--sy-s2); }
.sy-table th, .sy-table td {
  text-align: left; padding: var(--sy-s2) var(--sy-s3);
  border-bottom: var(--sy-line-width) solid var(--sy-line);
}
.sy-table thead th { background: var(--sy-surface-recessed); font-weight: 700; }
.sy-table th button { background: none; border: none; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.sy-pager { display: flex; align-items: center; gap: var(--sy-s3); padding-top: var(--sy-s3); flex-wrap: wrap; }
.sy-pager-count { font-size: var(--sy-t-s); color: var(--sy-text-quiet); }

.sy-coverage { display: flex; flex-direction: column; gap: var(--sy-s1); }
.sy-coverage-track { display: flex; height: 18px; border-radius: var(--radius-sm); overflow: hidden; border: var(--sy-line-width) solid var(--sy-line); }
.sy-coverage-seg[data-level="high"] { background: var(--sy-status-ok); }
.sy-coverage-seg[data-level="partial"] { background: var(--sy-status-due); }
.sy-coverage-seg[data-level="low"] { background: var(--sy-surface-recessed); }
.sy-coverage-labels { display: flex; justify-content: space-between; font-size: var(--sy-t-xs); color: var(--sy-text-quiet); }
.sy-coverage-note { font-size: var(--sy-t-xs); color: var(--sy-text); font-weight: 600; }

.sy-sparkline { display: flex; align-items: center; gap: var(--sy-s3); }
.sy-sparkline svg { display: block; }
.sy-sparkline-value { font-weight: 700; }

.sy-suppression {
  padding: var(--sy-s3); border: var(--sy-line-width) dashed var(--sy-line);
  border-radius: var(--radius-sm); color: var(--sy-text-quiet); font-size: var(--sy-t-s);
}

.sy-drc { display: flex; flex-direction: column; gap: var(--sy-s3); }
.sy-drc-target { display: flex; flex-direction: column; gap: var(--sy-s2); padding-bottom: var(--sy-s3); border-bottom: var(--sy-line-width) solid var(--sy-line); }
.sy-drc-choices { display: flex; gap: var(--sy-s2); flex-wrap: wrap; }
.sy-drc-choice { display: inline-flex; align-items: center; gap: var(--sy-s2); min-height: var(--sy-target); padding: var(--sy-s2) var(--sy-s3); border: var(--sy-line-width) solid var(--sy-line); border-radius: var(--radius-sm); cursor: pointer; }
.sy-drc-choice input { margin: 0; }
.sy-drc-saved { font-size: var(--sy-t-xs); color: var(--sy-status-ok); font-weight: 600; }

/* ── Feedback ───────────────────────────────────────────────────────────── */
.sy-region {
  padding: var(--sy-s3) var(--sy-s4); border-radius: var(--radius-sm);
  border-left: 4px solid var(--sy-line); background: var(--sy-surface-recessed);
}
.sy-region[data-tone="success"] { border-left-color: var(--sy-status-ok); }
.sy-region[data-tone="warning"] { border-left-color: var(--sy-status-due); }
.sy-region[data-tone="danger"]  { border-left-color: var(--sy-status-overdue); }
/* Present for the screen reader, invisible to everyone else, until it has
   something to announce. See the note in synapse-ui.js. */
.sy-region[data-empty] { padding: 0; border-left: none; background: none; }

.sy-progress { display: flex; flex-direction: column; gap: var(--sy-s1); font-size: var(--sy-t-s); }
.sy-progress-track { height: 10px; border-radius: 999px; background: var(--sy-surface-recessed); overflow: hidden; }
.sy-progress-fill { height: 100%; background: var(--sy-status-ok); }

.sy-offline {
  background: var(--sy-surface-inverse); color: var(--sy-text-on-inverse);
  padding: var(--sy-s3) var(--sy-s4); border-radius: var(--radius-sm); font-size: var(--sy-t-s);
}

.sy-sandbox {
  background: var(--sy-surface-recessed);
  border: 2px dashed var(--sy-status-due);
  padding: var(--sy-s3) var(--sy-s4); border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.sy-page { max-width: var(--sy-maxw); margin: 0 auto; padding: var(--sy-s5) var(--sy-s4); }
.sy-stack { display: flex; flex-direction: column; gap: var(--sy-s4); }
.sy-attention { display: flex; flex-direction: column; gap: var(--sy-s3); }
.sy-secondary-links { display: flex; gap: var(--sy-s4); flex-wrap: wrap; font-size: var(--sy-t-s); }

/* ── Tabs ─────────────────────────────────────────────────────────────────
   Five, fixed order, never reordered. A tab the persona may not open is
   rendered disabled with a reason, not removed — the person should be able to
   tell the thing exists and why they cannot open it. */
.sy-tabs { display: flex; gap: var(--sy-s1); overflow-x: auto; border-bottom: var(--sy-line-width) solid var(--sy-line); }
.sy-tab {
  font: inherit; background: none; border: none; cursor: pointer;
  padding: var(--sy-s3) var(--sy-s4); white-space: nowrap;
  border-bottom: 3px solid transparent; color: var(--sy-text-quiet);
}
.sy-tab[aria-selected="true"] { color: var(--sy-text); font-weight: 700; border-bottom-color: var(--sy-text); }
.sy-tab[aria-disabled="true"] { color: var(--sy-text-quiet); cursor: not-allowed; }

/* ── Print ────────────────────────────────────────────────────────────────
   A compliance artefact that prints without its caveats is a misleading
   artefact, so the as-of line and the unreachable rows print with it. */
@media print {
  .sy-bar, .sy-session, .sy-offline, .sy-action-footer, .sy-pager { display: none !important; }
  .sy-card, .sy-panel { box-shadow: none; border-color: var(--sy-text-quiet); break-inside: avoid; }
  .sy-root a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .sy-card-asof, .sy-print-caveat { display: block !important; }
}

/* sy-confirm (2026-09-27) — an inline confirmation, never a modal (DD-03).
   Recessed so it reads as part of the thing it is about; the confirm button
   is the ordinary primary, not rust (DD-45). */
.sy-confirm {
  display: block;
  margin-top: var(--sy-s3);
  padding: var(--sy-s4);
  background: var(--sy-surface-recessed);
  border: var(--sy-line-width) solid var(--sy-line);
  border-radius: var(--radius-sm);
}
.sy-confirm-message, .sy-confirm-instruction { margin: 0 0 var(--sy-s3); }
.sy-confirm-label { display: block; font-weight: 600; margin-bottom: var(--sy-s1); }
.sy-confirm-input {
  font: inherit; width: 100%; box-sizing: border-box; min-height: var(--sy-target);
  padding: var(--sy-s2) var(--sy-s3); margin-bottom: var(--sy-s3);
  background: var(--sy-surface-raised); color: var(--sy-text);
  border: var(--sy-line-width) solid var(--sy-line); border-radius: var(--radius-sm);
}
.sy-confirm-input:focus-visible { outline: none; box-shadow: var(--sy-focus-ring); }
.sy-confirm-actions { display: flex; gap: var(--sy-s3); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASS H — the page itself, on the brand (2026-09-27).

   Until now every rule in this file was scoped to an sy- element and a
   surface class set custom properties only, so each product's own
   `body { font-family: …; background: … }` decided what a person saw:
   6 of 19 walked screens were on-brand, three families of heading face and
   four grounds (PRODUCT_TARGET_STATE_PLAN_2026-09-27 §3 L1).

   `sy-page` on <body> opts the page in. Specificity is chosen, not accidental:
     body.sy-page          (0,1,1) beats a product's `body {}` (0,0,1), in any
                            load order — so products need not reorder links;
     body.sy-page h1..h3   (0,1,2) beats `.card h2` (0,1,1) — headings are
                            Fraunces everywhere (DD-46);
     unstyled links only   via :where(), so a product's own `a.btn` keeps its
                            colour and only a bare <a> gets the brand link.
   Product ACCENTS (a sidebar colour, a badge) are untouched: an endorsed
   brand overrides the brand layer, never these semantic ones (tokens.md §1).
   ═══════════════════════════════════════════════════════════════════════════ */
body.sy-page {
  font-family: var(--sy-face);
  background: var(--sy-surface);
  color: var(--sy-text);
  line-height: var(--sy-lh);
}
body.sy-page h1, body.sy-page h2, body.sy-page h3 {
  font-family: var(--sy-face-heading);
}
/* Form controls do not inherit the face unless told to. */
body.sy-page button, body.sy-page input, body.sy-page select, body.sy-page textarea {
  font-family: inherit;
}
:where(body.sy-page) a:not([class]) {
  color: var(--sy-text-link);
  text-decoration: underline;
}

/* SynapseUI.askText / askChoice panels and SynapseUI.notify near-regions
   (2026-09-28) — the inline replacements for prompt() and alert(). */
.sy-ask select.sy-confirm-input { background: var(--sy-surface-raised); }
.sy-ask textarea.sy-confirm-input { resize: vertical; min-height: 4.5em; }
.sy-ask-error { color: var(--sy-text-danger); margin: var(--sy-s1) 0 var(--sy-s3); font-weight: 600; }
.sy-ask-error:empty { display: none; }
.sy-ask .sy-confirm-input[aria-invalid="true"] { border-color: var(--sy-text-danger); }
sy-status-region.sy-notify-near { display: block; margin-top: var(--sy-s2); }