/* Service shells reuse the approved UI tokens, elements and layouts. */
:root {
  --ink: var(--ui-text); --navy: var(--ui-surface-muted); --muted: var(--ui-text-secondary);
  --line: var(--ui-border); --canvas: var(--ui-page); --paper: var(--ui-surface);
  --lime: var(--ui-accent); --mint: var(--ui-success); --coral: var(--ui-warning);
  --surface-soft: var(--ui-surface); --surface-muted: var(--ui-surface-muted); --text-soft: var(--ui-text-secondary);
}
.ui-service { letter-spacing: normal; font-size: var(--ui-font-prose); }
.ui-service h1, .ui-service h2, .ui-service h3 { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.ui-service .section-shell { width: min(calc(100% - 48px), var(--ui-content-width)); margin-inline: auto; }
.ui-service pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-service :is(input, select, textarea) { font: inherit; }
.ui-service :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-width: 0; max-width: 100%; min-height: var(--ui-control-height); padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-input); box-shadow: none;
}
.ui-service :is(input, select, textarea):focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.ui-service :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-primary); }
.ui-service .ui-preview-header__inner { max-width: none; }
.ui-service .header-actions { display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-service .header-actions .ui-button { min-height: var(--ui-control-compact); padding-block: var(--ui-space-1); font-size: var(--ui-font-small); }
.navigation-chevron { display: none; }
.ui-service .ui-footer-grid > section { display: grid; align-content: start; gap: var(--ui-space-2); }
.ui-service .footer-brand-column { margin-bottom: var(--ui-space-8); }
.ui-service .footer-brand-column p { margin-top: var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--ui-font-small); }
.ui-service .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-4); margin-top: var(--ui-space-8); color: var(--ui-text-secondary); font-size: var(--ui-font-meta); }
.ui-service .private-preview-page { padding-block: var(--ui-space-12); }
.ui-service .private-preview-panel { margin-inline: auto; padding: var(--ui-space-8); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }
.ui-service .private-preview-panel h1 { font-size: var(--ui-font-page-max); letter-spacing: -.035em; line-height: 1.2; }
.ui-service-portal { font-size: var(--ui-font-body); }
.ui-service-portal .private-preview-page { width: 100%; padding: 0; }
.ui-service-portal .portal-shell { gap: 0; align-items: stretch; }
.ui-service-portal .portal-shell > .private-preview-panel { width: 100%; max-width: none; min-width: 0; margin: 0; padding: var(--ui-space-6); border: 0; border-radius: 0; background: var(--ui-page); box-shadow: none; }
.ui-service-portal .private-preview-panel > .eyebrow { margin-bottom: var(--ui-space-2); font-size: var(--ui-font-meta); }
.ui-service-portal .private-preview-panel > h1 { margin: 0 0 var(--ui-space-2); }
.ui-service-portal .private-preview-panel > p { font-size: var(--ui-font-body); line-height: 1.6; }
.ui-service-portal .private-preview-panel > :not(dialog) { max-width: var(--ui-content-width); margin-inline: auto; }
.ui-service .ui-sidebar-nav { margin: 0; }
.ui-service .ui-sidebar-account { margin-top: auto; }
.ui-service .ui-sidebar-account form button { width: 100%; justify-content: flex-start; font-size: var(--ui-font-small); }
.ui-service .dashboard-summary-grid { gap: var(--ui-space-4); margin-block: var(--ui-space-6); }
.ui-service .dashboard-summary-grid section { padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.ui-service .dashboard-summary-grid h2 { font-size: var(--ui-font-small); font-weight: 550; }
.ui-service .dashboard-summary-grid p { font-size: var(--ui-font-page-max); color: var(--ui-text); }
.ui-service .dashboard-overview-section { padding: var(--ui-space-6); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.ui-service .hero { min-height: 0; padding-block: var(--ui-space-16); gap: var(--ui-space-12); }
.ui-service .hero h1 { font-size: clamp(36px, 4.2vw, 56px); letter-spacing: -.045em; }
.ui-service .hero-console { transform: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); }
.ui-service .hero-description { color: var(--ui-text-secondary); }
.ui-service .hero-trial-note { margin: 14px 0 0; color: var(--ui-text-secondary); font-size: var(--ui-font-meta); }
.ui-service .intro, .ui-service .portal-section { padding-block: var(--ui-space-12); }
.ui-service :is(.intro h2, .portal-layout h2, .contact-section h2, .reference-head h2, .example-copy h2) { font-size: var(--ui-font-page-max); }
.ui-service .feature-grid { padding-bottom: var(--ui-space-12); gap: var(--ui-space-4); }
.ui-service .feature-card { min-height: 0; padding: var(--ui-space-6); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.ui-service .feature-card h3 { margin-top: var(--ui-space-6); }
.ui-service .feature-card p { max-width: none; }
.ui-service .documentation-hero { padding-block: var(--ui-space-12); }
.ui-service .documentation-hero h1 { font-size: clamp(30px, 4vw, 48px); }
.ui-service :is(.documentation-card, .documentation-note, .api-guide-summary article, .api-guide-toc, .api-endpoint-section, .release-note-entry) { border-radius: var(--ui-radius-md); box-shadow: none; }
.ui-service :is(.api-endpoint-section, .api-guide-toc) { scroll-margin-top: calc(var(--ui-header-height) + var(--ui-space-6)); }
.ui-service .api-guide-toc { top: calc(var(--ui-header-height) + var(--ui-space-4)); max-height: calc(100dvh - var(--ui-header-height) - var(--ui-space-8)); overflow-y: auto; }
.ui-service .ui-docs-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ui-space-6); padding-bottom: var(--ui-space-12); }
.ui-service .ui-docs-hub article { padding: var(--ui-space-6); }
.ui-service .ui-docs-hub h2 { font-size: var(--ui-font-heading); }
.ui-service .ui-docs-hub p { color: var(--ui-text-secondary); font-size: var(--ui-font-body); }
.ui-service .ui-playground-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6); margin-top: var(--ui-space-6); }
.ui-service .ui-playground-workspace > * { min-width: 0; }
.ui-service .playground-form { margin: 0; padding: var(--ui-space-4); background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: none; }
.ui-service .playground-operation-picker { grid-template-columns: 1fr; }
.ui-service .playground-operation-picker label { min-height: 0; padding: var(--ui-space-3); border-radius: var(--ui-radius-sm); }
.ui-service .playground-operation-picker label:has(input:checked) { border-color: var(--ui-primary); background: var(--ui-accent-soft); }
.ui-service .eyebrow i { background: var(--ui-primary); }
.ui-service .hero-console .status-dot { color: var(--ui-code-key); }
.ui-service .playground-input-grid { grid-template-columns: 1fr; }
.ui-service .playground-output-format { margin-top: 0; min-height: var(--ui-control-height); }
.ui-service .playground-submit-row { flex-wrap: wrap; }
.ui-service .playground-result { margin-top: 0; border-radius: var(--ui-radius-md); }
.ui-service .playground-result-body { min-height: 240px; max-height: 65vh; }
.ui-service .playground-meta { margin-top: 0; }
.ui-service .ui-result-empty { padding: var(--ui-space-8); color: var(--ui-text-secondary); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
@media (min-width: 1200px) { .ui-service .ui-playground-workspace { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
@media (max-width: 900px) {
  .ui-service .section-shell { width: min(calc(100% - 32px), var(--ui-content-width)); }
  .ui-service-portal .private-preview-page { width: 100%; }
  .ui-service-portal .portal-shell > .private-preview-panel { padding: var(--ui-space-6) var(--ui-space-4); }
  .ui-service .hero { grid-template-columns: 1fr; }
  .ui-service .ui-sidebar-account { margin-top: var(--ui-space-4); }
  .ui-service .ui-preview-actions { gap: 0; }
}
@media (max-width: 560px) {
  .ui-service .private-preview-panel { padding: var(--ui-space-4); }
  .ui-service .header-actions { gap: 0; }
  .ui-service .header-actions .ui-button { padding-inline: var(--ui-space-2); font-size: var(--ui-font-meta); }
  .ui-service .intro { grid-template-columns: 1fr; gap: var(--ui-space-4); }
  .ui-service .dashboard-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); }
}
