/* The common parts: the page, buttons, fields, chips, dots, empty and
   loading states. Every value from tokens. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-chrome);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-ui);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

.dr-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.dr-icon { display: inline-flex; flex: none; }
.dr-icon svg { display: block; }

/* ── buttons ── */
.dr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-control);
  background: var(--color-popover);
  color: var(--color-text);
  font-size: var(--text-body);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dr-button:hover { background: var(--color-popover-hover); border-color: var(--color-text-dimmer); }
.dr-button:disabled { color: var(--color-text-dimmer); background: transparent; border-color: var(--color-popover-border); }
.dr-button-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-chrome); }
.dr-button-primary:hover { background: var(--color-accent); border-color: var(--color-text); }
.dr-button-primary .bt-duo-tint { --duo-tint: var(--color-chrome); }
.dr-button-quiet { border-color: transparent; background: transparent; color: var(--color-text-dim); padding: 0 var(--space-2); }
.dr-button-quiet:hover { color: var(--color-text); background: var(--color-popover-hover); border-color: transparent; }
.dr-button-danger { background: transparent; color: var(--color-danger); border-color: var(--color-popover-border); }
.dr-button-danger:hover { border-color: var(--color-danger); background: transparent; }
.dr-button-danger[data-armed='true'] { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-chrome); }
.dr-button-danger[data-armed='true'] .bt-duo-tint { --duo-tint: var(--color-chrome); }

.dr-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-control);
  color: var(--color-text-dimmer);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.dr-icon-button:hover { color: var(--color-text); background: var(--color-popover-hover); }
.dr-icon-button[aria-pressed='true'] { color: var(--color-text-dim); }

.dr-link { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-text-dimmer); text-underline-offset: var(--space-1); }
.dr-link:hover { text-decoration-color: var(--color-text); }

.dr-kbd {
  font-family: var(--font-num);
  font-size: var(--text-label);
  color: var(--color-text-dimmer);
}

/* ── fields ── */
.dr-input {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-control);
  background: var(--color-page);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.dr-input::placeholder { color: var(--color-text-dimmer); }
.dr-input:hover { border-color: var(--color-text-dimmer); }
.dr-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.dr-textarea { height: auto; min-height: calc(3 * var(--lh-body) + var(--space-2)); padding: var(--space-1) var(--space-2); resize: vertical; font-family: var(--font-sans); line-height: var(--lh-body); }
.dr-input-number { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.dr-field { position: relative; display: flex; align-items: center; }
.dr-field > .dr-icon { position: absolute; left: var(--space-2); color: var(--color-text-dimmer); pointer-events: none; }
.dr-field > .dr-input { padding-left: var(--space-8); }

.dr-select { position: relative; display: flex; align-items: center; }
.dr-select select { appearance: none; padding-right: var(--space-6); }
.dr-select > .dr-icon { position: absolute; right: var(--space-2); color: var(--color-text-dimmer); pointer-events: none; }

/* ── chips and dots ── */
.dr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--chip-h);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-dim);
  font-size: var(--text-small);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
button.dr-chip:hover { color: var(--color-text); background: var(--color-popover-hover); }
.dr-chip[aria-pressed='true'] { color: var(--color-text); background: var(--color-popover-active); border-color: transparent; }
.dr-chip-quiet { border-color: transparent; background: var(--color-popover-hover); }
.dr-chip-remove { display: inline-flex; margin-right: calc(-1 * var(--space-1)); color: var(--color-text-dimmer); border-radius: var(--radius-pill); }
.dr-chip-remove:hover { color: var(--color-text); }

.dr-dot {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--dot-color, var(--color-text-dimmer));
}
.dr-dot[data-empty='true'] { background: transparent; box-shadow: inset 0 0 0 1px var(--color-popover-border); }

/* ── empty, loading, notes ── */
.dr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-16) var(--space-4);
  text-align: center;
}
.dr-empty-icon { color: var(--color-text-dimmer); }
.dr-empty-icon svg { width: var(--space-8); height: var(--space-8); }
.dr-empty-title { margin: 0; font-size: var(--text-name); color: var(--color-text); }
.dr-empty-hint { margin: 0; color: var(--color-text-dim); }
.dr-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

.dr-skeleton { display: block; background: var(--color-popover-hover); border-radius: var(--radius-control); }
.dr-skeleton-line { height: var(--space-3); width: 70%; }
.dr-skeleton-short { width: 40%; }

.dr-note { margin: 0; color: var(--color-text-dim); font-size: var(--text-small); }

.dr-placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: var(--palette-w); margin: var(--space-24) auto; padding: 0 var(--space-4); }

.dr-root { height: 100%; }
/* The lifted copy of a card being dragged. */
.dr-card-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; scale: 1.04; box-shadow: var(--shadow-popover); }
.dr-card[data-dragging='true'] { opacity: 0.22; }
.dr-grid[data-reorder='on'] { -webkit-touch-callout: none; user-select: none; }