/* Components (DESIGN.md). Surface stylesheets lay these out; they do not restyle them. */

/* Icon ------------------------------------------------------------------------------------ */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.icon-sm {
  width: 16px;
  height: 16px;
}
.icon-lg {
  width: 24px;
  height: 24px;
}

/* Button ---------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.btn:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn .icon {
  width: 16px;
  height: 16px;
}
.btn-primary {
  border-color: var(--action);
  background: var(--action);
  color: var(--on-action);
}
.btn-primary:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
}
.btn-tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}
.btn-tertiary:hover {
  background: var(--surface-hover);
}
.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}
.btn-quiet:hover {
  background: var(--surface-hover);
}
.btn-danger {
  border-color: var(--danger-action);
  background: var(--danger-action);
  color: var(--on-action);
}
.btn-danger:hover {
  border-color: var(--danger-action-hover);
  background: var(--danger-action-hover);
}
.btn-danger-text {
  border-color: transparent;
  background: transparent;
  color: var(--danger-text);
}
.btn-danger-text:hover {
  background: var(--danger-bg);
}
.btn-sm {
  min-height: var(--control-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-caption);
}
.btn-lg {
  min-height: var(--control-lg);
  padding: 0 var(--space-6);
  font-size: var(--text-body);
}
.btn-block {
  width: 100%;
}
.btn-icon {
  width: var(--control-md);
  padding: 0;
}
.btn-icon.btn-sm {
  width: var(--control-sm);
}
.btn-icon .icon {
  width: 18px;
  height: 18px;
}
.btn[aria-busy='true'] {
  cursor: progress;
}
.btn[aria-busy='true']::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Link ------------------------------------------------------------------------------------ */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  font-weight: var(--weight-strong);
}
.link .icon {
  width: 16px;
  height: 16px;
}

/* Form controls ----------------------------------------------------------------------------- */
:where(
  input:not([type='checkbox'], [type='radio'], [type='range'], [type='hidden']),
  select,
  textarea
) {
  width: 100%;
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-body);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-out);
}
:where(textarea) {
  min-height: 96px;
  resize: vertical;
}
:where(select) {
  appearance: none;
  padding-right: var(--space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
:where(input, select, textarea)[aria-invalid='true'] {
  border-color: var(--danger-text);
}
:where(input, select, textarea):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
:where(input[readonly], textarea[readonly]) {
  background: var(--surface-subtle);
}
:where(input[type='checkbox'], input[type='radio']) {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--action);
}
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.field + .field,
.field + .btn,
.field + .btn-row,
.field + .check,
.check + .btn,
.check + .btn-row,
.check + .check {
  margin-top: var(--space-4);
}
.field > label,
.label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
  line-height: 1.4;
  color: var(--text);
}
.label .optional,
.field > label .optional {
  font-weight: var(--weight-ui);
  color: var(--text-muted);
}
.hint {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--text-muted);
}
.hint a,
.check a {
  text-decoration: underline;
}
.error-text {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--danger-text);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}
.check input {
  margin-top: 2px;
}
.input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.input-group:focus-within {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}
.input-group > input,
.input-group > select {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.input-group > input:focus-visible,
.input-group > select:focus-visible {
  outline: 0;
}
.input-group > :first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-group > :last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}
.input-group > select.input-addon {
  width: auto;
  max-width: 55%;
  color: var(--text);
  text-overflow: ellipsis;
}
.input-with-icon {
  position: relative;
}
.input-with-icon > .icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.input-with-icon > input {
  padding-left: var(--space-10);
}
.password-field {
  position: relative;
}
.password-field > input {
  padding-right: var(--space-12);
}
.password-field > .btn {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  translate: 0 -50%;
}

/* Radio cards ------------------------------------------------------------------------------- */
.choice-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.choice-list legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}
.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}
.choice:hover {
  background: var(--surface-hover);
}
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-selected);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.choice input {
  margin-top: 3px;
}
.choice strong {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
  color: var(--text);
}
.choice span {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* Titles and details (addresses, workspace names) wrap inside the card. */
.choice > span {
  min-width: 0;
}
.choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Segmented control ------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
}
.segmented button,
.segmented label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--control-sm) - 4px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented [aria-pressed='true'],
.segmented [aria-selected='true'],
.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
}

/* Tabs ------------------------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs [role='tab'],
.tabs a {
  position: relative;
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tabs [aria-selected='true'],
.tabs [aria-current='page'] {
  color: var(--text);
}
.tabs [aria-selected='true']::after,
.tabs [aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* Badge ----------------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-full);
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
  line-height: 1;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.badge-plain::before {
  display: none;
}
.badge-info {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}
.badge-success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.badge-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}
.badge-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* Callout --------------------------------------------------------------------------------- */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  background: var(--neutral-bg);
  color: var(--text);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}
.callout > .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--neutral-text);
}
.callout-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.callout-body strong {
  font-weight: var(--weight-strong);
}
.callout-body a {
  text-decoration: underline;
}
.callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.callout-info {
  border-color: var(--info-border);
  background: var(--info-bg);
}
.callout-info > .icon {
  color: var(--info-text);
}
.callout-success {
  border-color: var(--success-border);
  background: var(--success-bg);
}
.callout-success > .icon {
  color: var(--success-text);
}
.callout-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}
.callout-warning > .icon {
  color: var(--warning-text);
}
.callout-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}
.callout-danger > .icon {
  color: var(--danger-text);
}

/* Card ------------------------------------------------------------------------------------ */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.card-pad {
  padding: var(--space-4);
}
@media (min-width: 600px) {
  .card-pad {
    padding: var(--space-6);
  }
}
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.card-header h2,
.card-header h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}
.divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

/* Table and list rows ------------------------------------------------------------------------- */
.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.table {
  width: 100%;
  font-size: var(--text-body-sm);
  line-height: 1.45;
}
.table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
  text-align: left;
  white-space: nowrap;
}
.table td {
  height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover {
  background: var(--surface-hover);
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .actions-cell {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.cell-primary {
  display: block;
  font-weight: var(--weight-strong);
  color: var(--text);
}
.cell-secondary {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.truncate {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

/* Empty state ----------------------------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.empty-state .empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--surface-selected);
  color: var(--accent);
}
.empty-state .empty-icon .icon {
  width: 26px;
  height: 26px;
}
.empty-state h2,
.empty-state h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}
.empty-state p {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.empty-state .btn-row {
  justify-content: center;
  margin-top: var(--space-2);
}

/* Skeleton ------------------------------------------------------------------------------- */
.skeleton {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-subtle) 0%,
    var(--surface-hover) 50%,
    var(--surface-subtle) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* Toast ----------------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(560px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-night);
  color: var(--text-on-night);
  box-shadow: var(--shadow-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-ui);
  translate: -50% 0;
  animation: toast-in var(--duration-base) var(--ease-out);
}
.toast[data-tone='danger'] .icon {
  color: var(--danger-on-night);
}
.toast .icon {
  color: var(--accent-on-night);
}
/* Inside an open dialog (see toast() in ui.js) the toast sits at the top, clear of the actions. */
dialog > .toast {
  top: var(--space-4);
  bottom: auto;
}
@keyframes toast-in {
  from {
    opacity: 0;
    translate: -50% 8px;
  }
}

/* Dialog and sheet -------------------------------------------------------------------------- */
dialog.dialog {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  max-height: min(88vh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
dialog.dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in var(--duration-slow) var(--ease-out);
}
dialog.dialog::backdrop {
  background: var(--scrim);
}
.dialog-sm {
  width: min(440px, calc(100vw - 2 * var(--space-4)));
}
dialog.dialog-lg {
  width: min(720px, calc(100vw - 2 * var(--space-4)));
}
dialog.dialog-xl {
  width: min(1040px, calc(100vw - 2 * var(--space-4)));
}
.dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}
.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) 0;
}
.dialog-header h2 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.dialog-header p {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.dialog-header .btn-icon {
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0;
}
.dialog-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  font-size: var(--text-body-sm);
}
.dialog-body > p + p {
  margin-top: var(--space-3);
}
.dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}
@media (max-width: 599px) {
  dialog.dialog,
  dialog.dialog-sm,
  dialog.dialog-lg,
  dialog.dialog-xl {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
  }
  dialog.dialog[open] {
    animation-name: sheet-in;
  }
  .dialog-footer {
    flex-direction: column-reverse;
  }
  .dialog-footer .btn {
    width: 100%;
  }
}
@keyframes sheet-in {
  from {
    translate: 0 24px;
    opacity: 0;
  }
}

/* Menu / popover ---------------------------------------------------------------------------- */
.menu-anchor {
  position: relative;
}
.menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 220px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: dialog-in var(--duration-base) var(--ease-out);
}
.menu-left {
  left: 0;
  right: auto;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--surface-hover);
  text-decoration: none;
  outline: 0;
}
.menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.menu-item-danger,
.menu-item-danger .icon {
  color: var(--danger-text);
}
.menu-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
}
.menu-separator {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border);
}
.menu-meta {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.menu-meta strong {
  display: block;
  color: var(--text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}

/* Code block and copy field ------------------------------------------------------------------- */
.code-block {
  overflow: hidden;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  color: var(--code-text);
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--code-border);
  color: var(--code-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
}
.code-block-header .btn {
  border-color: transparent;
  background: transparent;
  color: var(--code-text);
}
.code-block-header .btn:hover {
  background: var(--code-hover);
}
.code-block pre,
.code-block textarea {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}
.code-block textarea {
  display: block;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--code-text);
  resize: none;
}
.code-block pre.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copy-field {
  display: flex;
  min-width: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.copy-field > input,
.copy-field > code {
  flex: 1;
  min-width: 0;
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.6;
  overflow-x: auto;
  white-space: nowrap;
}
.copy-field > .btn {
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
}
.copy-field > .btn:hover {
  background: var(--surface-hover);
}

/* Stat, progress, avatar, kbd ---------------------------------------------------------------- */
.stat {
  display: grid;
  gap: var(--space-1);
}
.stat-label {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-ui);
}
.stat-value {
  font-size: var(--text-title-1);
  font-weight: var(--weight-title);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action);
}
.progress[data-tone='warning'] > span {
  background: var(--warning-border);
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--avatar-bg, var(--surface-selected));
  color: var(--avatar-text, var(--info-text));
  font-size: var(--text-micro);
  font-weight: var(--weight-title);
  letter-spacing: 0.02em;
}
.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: var(--text-body-sm);
}
.avatar-square {
  border-radius: var(--radius-md);
}
.avatar[data-tint='1'] {
  --avatar-bg: var(--info-bg);
  --avatar-text: var(--info-text);
}
.avatar[data-tint='2'] {
  --avatar-bg: var(--success-bg);
  --avatar-text: var(--success-text);
}
.avatar[data-tint='3'] {
  --avatar-bg: var(--warning-bg);
  --avatar-text: var(--warning-text);
}
.avatar[data-tint='4'] {
  --avatar-bg: var(--danger-bg);
  --avatar-text: var(--danger-text);
}
.avatar[data-tint='5'] {
  --avatar-bg: var(--neutral-bg);
  --avatar-text: var(--neutral-text);
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--text-micro);
}

/* Chips (active filters) ---------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover {
  background: var(--surface-hover);
}
.chip[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--surface-selected);
  color: var(--text);
}
.chip .count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.chip .icon {
  width: 14px;
  height: 14px;
}

/* Page header and breadcrumb ------------------------------------------------------------------ */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-header h1 {
  font-size: var(--text-title-1);
  font-weight: var(--weight-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.page-header p {
  margin-top: var(--space-1);
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-ui);
}
.breadcrumb a {
  color: var(--text-muted);
}
.breadcrumb .icon {
  width: 14px;
  height: 14px;
}

/* Section groups (settings-style) -------------------------------------------------------------- */
.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.section + .section {
  margin-top: var(--space-10);
}
.section-title {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}
.section-description {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.description-list {
  display: grid;
  margin: 0;
}
.description-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm);
}
.description-list > div:last-child {
  border-bottom: 0;
}
.description-list dt {
  color: var(--text-muted);
}
.description-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  .description-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* Shared by the public site and the console ----------------------------------------------- */
/* Secondary button on --surface-night bands (hero, closing call to action). */
.btn-on-night {
  border-color: var(--border-night);
  background: transparent;
  color: var(--text-on-night);
}
.btn-on-night:hover {
  background: var(--surface-night-raised);
}
/* A card that is one link: title, optional description and an action label. */
.link-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.link-card:hover {
  border-color: var(--border-control);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.link-card h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}
.link-card p {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.link-card .text-link {
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
}
/* Badges filled from configuration disappear when the value is empty. */
.badge:empty {
  display: none;
}