/* duroob components. Load after tokens.css.
   Every color, type style, space, radius, shadow and opacity is a token.
   Containment edges (card, table) use border; control edges (input, select,
   checkbox, radio) use border-control, which is firmer so the control is findable.
   Literal values are limited to edge widths (1px, 1.5px, 2px), the 32px page
   pill, 16px glyphs and the 5px checkbox corner
   (too small a box to carry radius-control without reading as a circle).
   .is-hover / .is-pressed / .is-focus mirror the live states for documentation. */

/* ---------- Focus, shared ---------- */
.dr-btn:focus, .dr-page:focus, .dr-tab:focus, .dr-card--interactive:focus,
.dr-check input:focus, .dr-radio input:focus { outline: none; }

/* ---------- Button ---------- */
.dr-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4);
  border: 1.5px solid transparent; border-radius: var(--radius-control);
  font: var(--text-body); font-weight: 600; white-space: nowrap; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dr-btn svg { width: 16px; height: 16px; flex: none; }
.dr-btn--primary { background: var(--accent-primary); color: var(--on-accent-primary); }
.dr-btn--primary:hover, .dr-btn--primary.is-hover { background: var(--accent-primary-hover); }
.dr-btn--primary:active, .dr-btn--primary.is-pressed { background: var(--accent-primary-pressed); }
.dr-btn--secondary { background: transparent; border-color: var(--accent-secondary); color: var(--ink); }
.dr-btn--secondary:hover, .dr-btn--secondary.is-hover { background: var(--accent-tint); border-color: var(--accent-secondary-hover); }
.dr-btn--secondary:active, .dr-btn--secondary.is-pressed { background: var(--accent-tint-pressed); border-color: var(--accent-secondary-pressed); }
.dr-btn:focus-visible, .dr-btn.is-focus { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); }
.dr-btn:disabled, .dr-btn[aria-disabled="true"], .dr-btn.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }

/* ---------- Badge ---------- */
.dr-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-surface);
  font: var(--text-caption); white-space: nowrap;
}
.dr-badge--neutral { background: var(--divider); color: var(--ink-secondary); }
.dr-badge--accent { background: var(--accent-tint); color: var(--ink); }
.dr-badge--success { background: var(--success-tint); color: var(--success-text); }
.dr-badge--error { background: var(--error-tint); color: var(--error-text); }

/* ---------- Alert ---------- */
.dr-alert {
  box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-surface);
  font: var(--text-body); color: var(--ink);
}
.dr-alert__icon { flex: none; width: 16px; height: 20px; display: grid; place-items: center; }
.dr-alert__icon svg { width: 16px; height: 16px; }
.dr-alert__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.dr-alert__title { font-weight: 600; }
.dr-alert__text { margin: 0; }
.dr-alert--neutral { background: var(--divider); }
.dr-alert--neutral .dr-alert__icon { color: var(--ink-secondary); }
.dr-alert--info { background: var(--accent-tint); }
.dr-alert--info .dr-alert__icon { color: var(--accent-primary); }
.dr-alert--success { background: var(--success-tint); color: var(--success-text); }
.dr-alert--success .dr-alert__icon { color: var(--success-icon); }
.dr-alert--error { background: var(--error-tint); color: var(--error-text); }
.dr-alert--error .dr-alert__icon { color: var(--error-icon); }

/* ---------- Card ---------- */
.dr-card {
  /* The line does the work, not a fill. A card carrying both a surface fill
     and a border is delineated twice: it reads as a block rather than a
     panel, and anything outlined sitting on it (a compact Secondary button)
     ends up as an outline on a tint, which is what made these look heavy. */
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-surface);
}
.dr-card__meta { font: var(--text-caption); color: var(--ink-secondary); }
.dr-card__title { font: var(--text-h3); margin: 0; }
.dr-card__body { font: var(--text-body); color: var(--ink-secondary); margin: 0; }
.dr-card--interactive { cursor: pointer; text-decoration: none; }
.dr-card--interactive:hover, .dr-card--interactive.is-hover {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 0.5px var(--accent-secondary), var(--shadow-card-hover);
}
.dr-card--interactive:focus-visible, .dr-card--interactive.is-focus { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); }

/* ---------- Checkbox and Radio ---------- */
.dr-check, .dr-radio {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--text-body); color: var(--ink); cursor: pointer;
}
.dr-check input, .dr-radio input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  box-sizing: border-box; width: 16px; height: 16px;
  display: grid; place-content: center;
  background: var(--bg); border: 1.5px solid var(--border-control); cursor: pointer;
}
.dr-check input { border-radius: 5px; }
.dr-radio input { border-radius: var(--radius-full); }
.dr-check input::before {
  content: ""; width: 10px; height: 10px; background: var(--on-accent-primary); transform: scale(0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dr-radio input::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent-primary); transform: scale(0); }
/* Checkbox and Radio carry three states only: not selected, selected, disabled.
   A binary control has no hover or pressed vocabulary; the fill flip is the whole
   signal. Focus is kept because it is the keyboard affordance, not a visual state. */
.dr-check input:checked { background: var(--accent-primary); border-color: var(--accent-primary); }
.dr-radio input:checked { border-color: var(--accent-primary); }
.dr-check input:checked::before, .dr-radio input:checked::before { transform: scale(1); }
.dr-check input:focus-visible, .dr-check.is-focus input, .dr-radio input:focus-visible, .dr-radio.is-focus input {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}
.dr-check:has(input:disabled), .dr-radio:has(input:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.dr-check input:disabled, .dr-radio input:disabled { cursor: not-allowed; }

/* ---------- Field shell: Input and Select ---------- */
.dr-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dr-field__label { font: var(--text-caption); color: var(--ink); }
.dr-field__help { font: var(--text-caption); color: var(--ink-secondary); min-height: 16px; }
.dr-input {
  box-sizing: border-box; width: 100%; height: var(--control-h); margin: 0; padding: 0 var(--space-4);
  font: var(--text-body); color: var(--ink); background: var(--bg);
  border: 1px solid var(--border-control); border-radius: var(--radius-control); outline: none;
}
.dr-input::placeholder { color: var(--ink-disabled); opacity: 1; }
.dr-input:hover, .dr-input.is-hover { border-color: var(--accent-secondary); }
.dr-input:focus, .dr-input.is-focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-tint); }
.dr-field.is-error .dr-input { border-color: var(--error-icon); }
.dr-field.is-error .dr-field__help { color: var(--error-text); }
.dr-field.is-success .dr-input { border-color: var(--success-icon); }
.dr-field.is-success .dr-field__help { color: var(--success-text); }
.dr-input:disabled { color: var(--ink-disabled); border-color: var(--divider); box-shadow: none; cursor: not-allowed; }
.dr-field:has(.dr-input:disabled) .dr-field__label { color: var(--ink-disabled); }

.dr-select { position: relative; display: block; }
.dr-select .dr-input { -webkit-appearance: none; appearance: none; padding-right: calc(var(--space-4) + 16px + var(--space-2)); cursor: pointer; }
.dr-select .dr-input:invalid { color: var(--ink-disabled); }
.dr-select__chevron {
  position: absolute; right: var(--space-4); top: 50%; width: 16px; height: 16px;
  margin-top: -8px; color: var(--ink-secondary); pointer-events: none;
}
.dr-select:has(.dr-input:disabled) .dr-select__chevron { color: var(--ink-disabled); }

/* ---------- Modal ---------- */
.dr-scrim {
  /* A scrim with no stacking order is not a scrim: any positioned element
     with a z-index paints straight through it. The account menu (z-index 30)
     was floating undimmed over the settings sheet because of this. */
  box-sizing: border-box; position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: var(--space-6); background: var(--overlay-scrim);
}
.dr-modal {
  box-sizing: border-box; width: min(100%, 440px); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-surface); box-shadow: var(--shadow-3);
}
.dr-modal__title { font: var(--text-h3); margin: 0; }
.dr-modal__body { font: var(--text-body); color: var(--ink-secondary); margin: 0; }
.dr-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }

/* ---------- Pagination ---------- */
.dr-pagination { display: flex; align-items: center; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.dr-page {
  box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 var(--space-2);
  display: inline-grid; place-items: center; margin: 0;
  background: transparent; border: 0; border-radius: var(--radius-full);
  font: var(--text-body); font-weight: 500; color: var(--ink-secondary);
  text-decoration: none; cursor: pointer;
}
.dr-page svg { width: 16px; height: 16px; }
.dr-page:hover, .dr-page.is-hover { color: var(--ink); }
.dr-page[aria-current="page"] { background: var(--accent-primary); color: var(--on-accent-primary); font-weight: 600; }
.dr-page[aria-current="page"]:hover { background: var(--accent-primary-hover); }
.dr-page:focus-visible, .dr-page.is-focus { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); }
.dr-page:disabled, .dr-page[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
.dr-pagination__gap { min-width: 32px; text-align: center; color: var(--ink-secondary); }

/* ---------- Tabs ---------- */
.dr-tabs { display: flex; gap: var(--space-4); border-bottom: 1.5px solid var(--divider); }
.dr-tab {
  display: inline-flex; flex-direction: column; align-items: center; margin: 0 0 -1.5px;
  padding: 0 var(--space-1) var(--space-3); background: none; border: 0; border-radius: 0;
  font: var(--text-body); font-weight: 500; color: var(--ink-secondary); cursor: pointer;
}
.dr-tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.dr-tab:hover, .dr-tab.is-hover { color: var(--ink); }
.dr-tab[aria-selected="true"] { font-weight: 600; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-primary); }
.dr-tab:focus-visible, .dr-tab.is-focus { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); border-radius: var(--radius-control); }
.dr-tab[aria-selected="true"]:focus-visible, .dr-tab[aria-selected="true"].is-focus {
  box-shadow: inset 0 -2px 0 var(--accent-primary), 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

/* ---------- Table ---------- */
.dr-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--radius-surface); overflow: hidden;
  font: var(--text-body); color: var(--ink);
}
.dr-table th {
  font: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-secondary); text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.dr-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.dr-table tbody tr + tr td { border-top: 1px solid var(--divider); }
.dr-table .dr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pill ---------- */
.dr-pill {
  /* The dot carries the state and the label only names it, so the label stays
     ink-secondary in all three states. The pill hugs its text (26px) rather
     than standing at a control height, because nobody operates it. */
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--border-control); background: transparent;
  font: var(--text-caption); color: var(--ink-secondary); white-space: nowrap;
}
.dr-pill__dot { flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--ink-disabled); }
.dr-pill--gap .dr-pill__dot { background: var(--error-icon); }
.dr-pill--ok { border-color: var(--accent-secondary); }
.dr-pill--ok .dr-pill__dot { background: var(--success-icon); }

/* ---------- Tag ---------- */
/* Quiet by default. Tag wore three accent tokens at once (accent-primary on
   accent-tint inside an accent-secondary edge), which made a machine label the
   loudest thing in an answer and put source metadata above the figures it
   qualifies. The mono face is what says "produced rather than written", as
   this component's own spec argues, so the accent was carrying no information
   the type was not already carrying. */
.dr-tag {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-surface); border: 1px solid var(--border);
  background: var(--surface); font: var(--text-mono-sm); color: var(--ink-secondary);
  white-space: nowrap;
}

/* ---------- Viewport ---------- */
.dr-viewport {
  border-radius: var(--radius-surface); overflow: hidden; padding: 7px; padding-top: 0;
  background: var(--purple-950); border: 1px solid var(--purple-800);
  box-shadow: var(--shadow-3);
}
.dr-viewport__bar { display: flex; align-items: center; gap: var(--space-3); height: 30px; padding: 0 var(--space-2); }
.dr-viewport__dots { display: flex; gap: 5px; }
.dr-viewport__dots i { width: 6px; height: 6px; border-radius: 1px; background: var(--purple-700); }
.dr-viewport__addr { font: var(--text-mono-sm); color: var(--purple-300); }
.dr-viewport__grip { margin-left: auto; width: 24px; height: 1px; background: var(--purple-700); }
.dr-viewport__stage { border-radius: 2px; background: var(--bg); color: var(--ink); padding: var(--space-6); }

/* ---------- SectionHead ---------- */
.dr-sechead { margin: 0 0 var(--space-8); }
.dr-sechead__rule { height: 1px; background: var(--divider); margin-bottom: var(--space-8); }
.dr-sechead__in { display: grid; gap: var(--space-4); align-items: start; }
.dr-sechead__title { margin: 0; max-width: 15ch; text-wrap: balance; font: var(--text-h1); color: var(--ink); }
.dr-sechead__standfirst { margin: 0; max-width: 54ch; font: var(--text-body-large); color: var(--ink-secondary); }
@media (min-width: 900px) {
  .dr-sechead__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8) var(--space-16); }
  .dr-sechead__standfirst { padding-top: var(--space-1); }
}

/* ---------- LedgerRow ---------- */
.dr-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.dr-row {
  display: grid; gap: var(--space-2) var(--space-6);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--border);
}
.dr-row__n { font: var(--text-mono); color: var(--accent-primary); }
.dr-row__glyph { width: 56px; height: 56px; display: block; color: var(--accent-primary); }
.dr-row__glyph svg { display: block; width: 100%; height: 100%; }
.dr-row__glyph :is(path, circle, line, rect, polyline) { fill: none; stroke: currentColor; stroke-width: 1.15; }
.dr-row__title { margin: 0; font: var(--text-h3); color: var(--ink); }
.dr-row__body { margin: 0; max-width: 62ch; font: var(--text-body); color: var(--ink-secondary); }
.dr-row--inverted {
  background: var(--purple-1000); border-bottom-color: transparent; padding: var(--space-6) var(--space-8);
}
.dr-row--inverted .dr-row__title { color: var(--neutral-50); }
.dr-row--inverted .dr-row__body { color: var(--purple-200); }
.dr-row--inverted .dr-row__n, .dr-row--inverted .dr-row__glyph { color: var(--purple-300); }
@media (min-width: 900px) {
  .dr-row { grid-template-columns: 3rem 3.5rem 13rem minmax(0, 1fr); align-items: start; padding-block: var(--space-8); }
  .dr-row__glyph, .dr-row__title { align-self: center; }
  .dr-row--inverted { padding-inline: var(--space-8); }
}