/* Existing public-site controls shared with the dashboard. */

/* Secondary buttons share the landing header's outline and interaction rules. */
.db-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius-control); background:transparent; color:var(--ink); font-weight:700; text-decoration:none; transition:background-color .15s ease,color .15s ease; }
.db-button:disabled { opacity:.5; cursor:not-allowed; }

/* Shared destructive actions, including table buttons and confirmation dialogs. */
.db-button.danger, .db-button.danger-solid {
  background:var(--danger-soft);
  color:var(--danger);
  border-color:color-mix(in srgb,currentColor 25%,var(--line));
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.db-button.danger:not(:disabled):hover, .db-button.danger-solid:not(:disabled):hover {
  background:color-mix(in srgb,var(--danger) 8%,var(--danger-soft));
  border-color:color-mix(in srgb,currentColor 40%,var(--line));
}
.db-button.danger:not(:disabled):active, .db-button.danger-solid:not(:disabled):active {
  background:color-mix(in srgb,var(--danger) 16%,var(--danger-soft));
  border-color:color-mix(in srgb,currentColor 55%,var(--line));
  box-shadow:none;
  translate:none;
  transition-duration:.15s;
}

dialog input:not([type=checkbox]),dialog select, .field input, .ui-select-native { width: 100%; margin-top: 8px; padding: 11px; min-height: var(--control-height); font-size: var(--font-body); background: var(--white); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--radius-control); }
/* Keep field focus within the existing border, without the detached outer ring. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
textarea:focus, select:focus, .plan-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}
input[aria-invalid=true]:focus { border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); }
dialog .check input, .check-field input, .bot-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); }
.solid-button, .db-button.primary { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--action); border-radius: var(--radius-control); background: var(--action); color: var(--on-action); font-weight: 700; }
.solid-button:not(:disabled):hover, .db-button.primary:not(:disabled):hover { background: var(--action-hover); border-color: var(--action-hover); }
.solid-button:not(:disabled):active, .db-button.primary:not(:disabled):active { background:var(--action-pressed); border-color:var(--action-pressed); box-shadow:var(--pressed-shadow); }
.code-panel { --focus: light-dark(var(--light-mint), var(--dark-accent)); background: var(--dark); color: light-dark(var(--light-surface), var(--dark-text)); border: 1px solid light-dark(var(--light-line-inverse), var(--dark-line)); border-radius: var(--radius-control); min-width: 0; margin: 22px 0; overflow: hidden; }
.code-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 12px 8px 20px; border-bottom: 1px solid light-dark(var(--light-line-inverse), var(--dark-line)); font-size: 13px; color: light-dark(var(--light-mint), var(--dark-text-muted)); }
.copy-code { min-height: 44px; padding: 7px 13px; background: transparent; color: light-dark(var(--light-surface), var(--dark-text)); border: 1px solid light-dark(var(--light-control-border), var(--dark-control-border)); border-radius: var(--radius-control); font-size: 14px; font-weight: 600; }
.copy-code:hover { background: light-dark(var(--light-line-inverse), var(--dark-line)); }
.copy-code:not(:disabled):active { background: light-dark(var(--light-dark), var(--dark-soft)); box-shadow: var(--pressed-shadow); }
.code-panel pre { max-height: 480px; margin: 0; padding: 20px; overflow: auto; font: var(--font-support)/1.75 var(--font-mono); white-space: pre; scrollbar-color: light-dark(var(--light-control-border), var(--dark-text-muted)) light-dark(var(--light-dark), var(--dark-canvas)); }
.code-panel pre:focus-visible { outline-offset: -3px; }
.code-panel code { padding: 0; font: inherit; color: inherit; background: none; border-radius: 0; white-space: pre; }
.code-panel code a { color: light-dark(var(--light-mint), var(--dark-accent)); }
.plan-picker { position: relative; margin-top: 8px; }
.plan-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 12px 14px; font: 600 var(--font-body)/1.5 var(--font-ui); text-align: left; color: var(--ink); background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-control); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.plan-picker-trigger:hover, .plan-picker-trigger[aria-expanded="true"] { border-color: var(--action); }
.plan-picker-trigger:focus-visible { outline-offset: 2px; }
.plan-picker svg { flex: 0 0 auto; width: 20px; height: 20px; stroke: var(--action); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-picker-trigger svg { transition: transform .15s ease; }
.plan-picker-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.plan-picker-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5; max-height: min(260px, 60svh); overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: 0 8px 24px light-dark(var(--light-shadow), var(--dark-shadow)); }
.plan-picker[data-placement="above"] .plan-picker-options { top: auto; bottom: calc(100% + 8px); }
.plan-picker-options [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 10px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.5; border-radius: 2px; cursor: pointer; }
.plan-picker-options [aria-selected="true"] { color: var(--action); font-weight: 600; }
.plan-picker-options .is-active { background: var(--soft); }
.plan-picker-options svg { visibility: hidden; }
.plan-picker-options [aria-selected="true"] svg { visibility: visible; }
.page-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--soft); color: var(--action); }
.page-icon svg { width: 24px; height: 24px; fill:none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Layout around the existing controls may differ by screen. */
.field input { margin-top:0; }
.field label { margin-bottom:0; font-weight:400; }
.check-field { gap:12px; font-size:var(--font-support); }
.field-error { font-size:var(--font-support); }
.db-code { margin:0; }
.code-toolbar .copy-code { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; line-height:1.4; }
.code-toolbar .copy-code svg { width:18px; height:18px; }
.ui-select-native[hidden] { display:none!important; }
.plan-picker { min-width:0; }
.plan-picker-trigger>span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.plan-picker-options [aria-disabled=true] { opacity:.5; cursor:not-allowed; }
@media(max-width:760px) {
 .code-panel pre { padding:16px; max-height:400px; }
}


/* One action size across landing, public pages and dashboard, regardless of fill. */
.db-button, .hero-cta, .report-cta, .solid-button, .pricing .button,
dialog .actions button, .case-lead p>a:has(strong), .case-copy p>a:has(strong) {
  min-height:var(--button-height);
  padding:var(--button-padding-block) var(--button-padding-inline);
  gap:var(--button-gap);
  font-family:var(--font-ui);
  font-size:var(--font-body);
  line-height:1.3;
}
/* Header/table/copy actions use the existing compact landing control size. */
.identity .db-button, .model-meta .db-button, .db-table .db-button,
.db-button.small-button, .copy-code {
  min-height:var(--button-compact-height);
  padding:10px 14px;
  gap:14px;
  font-size:var(--font-button);
  line-height:1.4;
}
.identity .db-button, .model-meta .db-button, .db-table .db-button,
.db-button.small-button { font-weight:500; }
.key-types .db-button { width:100%; }
.plan-option>.db-button { margin-top:auto; }
@media(max-width:760px) {
  .modal-footer .db-button { width:100%; }
}