/*
 * Element resets and the shared utility classes, on the AutomationEdge design-system tokens (styles/ds/).
 * ds/base.css already sets box-sizing, the body face, ink and background, tabular figures, the heading roles,
 * links and sentence case, and ds/chrome.css the focus outline, selection colour and slim scrollbars; this file
 * adds only what the app needs on top. The utility class names are used by the pages: keep them.
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-width: 320px;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
/* Inter draws "=>" and similar pairs as arrow ligatures, which misquotes rule syntax: code shows the characters typed */
code, kbd, pre, samp { font-family: var(--font-mono); font-variant-ligatures: no-contextual; }
strong, b { font-weight: var(--weight-semibold); }
details > summary { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-6) 0; }

/* Focus: the DS outline (ds/chrome.css) for the keyboard only; the programmatic focus targets (a page or step
   heading after navigation, the content region after "Skip to main content") show none. */
:focus:not(:focus-visible) { outline: none; }
main[tabindex="-1"]:focus, :is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

.icon { flex: none; }

/* ---- utilities ---- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-muted); }

.mono { font-family: var(--font-mono); font-variant-ligatures: no-contextual; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.nowrap { white-space: nowrap; }
.text-warning { color: var(--status-warning-fg); font-weight: var(--weight-semibold); }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.badge-row { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.plain-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }

/* An inline link inside running text: underlined, so it does not rely on colour alone. */
.link { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--text-link-hover); }

/* Inline code (commands, paths, rule text): the DS mono role (Inter, tabular figures) on a quiet chip; a step off
   the card in light, lifted (not sunk into a hole) in dark. */
.code {
  padding: 0 var(--s-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  background: var(--surface-active); color: var(--text-strong);
  font-family: var(--font-mono); font-size: 0.93em; font-variant-ligatures: no-contextual; white-space: nowrap;
}
.code.break { white-space: normal; }
.code-wrap { white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
/* A key: the DS SearchRow / CommandPalette kbd chip. */
.kbd {
  display: inline-block; padding: 1px var(--s-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  background: var(--surface-card); color: var(--text-muted);
  font: var(--type-caption); font-size: var(--text-2xs); line-height: 1.3; font-variant-ligatures: no-contextual;
}