/* Focused interaction and sample-interface roles. Loaded after the page styles. */
:root {
  --interaction-ink: oklch(42.42% 0.1414 290.9);
  --preview-muted: oklch(47.68% 0.0511 308.7);
  --preview-label-size: 12px;
}

/* Illustrative labels still explain what the visitor is looking at. */
.hero-caption,
.workspace-top .demo-badge,
.workspace-top .mini-brand small,
.workspace-support p,
.workspace-heading .quiet-tag,
.workspace-bottom,
.workspace-hint,
.step-count{
  font-size: var(--preview-label-size);
  color: var(--preview-muted);
  line-height: 1.65;
}
.hero-caption { margin-inline: 16px; }
.workspace-top { gap: 16px; flex-wrap: wrap; }
.workspace-top .mini-brand { font-size: 14px; }
.workspace-top .demo-badge { white-space: normal; }
.workspace-heading { gap: 14px; flex-wrap: wrap; }
.workspace-heading p,
.workspace-content .subscription-banner p,
.workspace-content .subscription-row small,
.workspace-content .subscription-row .pill,
.workspace-content .bar-chart span,
.workspace-content .bar-chart b {
  font-size: var(--preview-label-size);
}
.workspace-navigation > button,
.order-filters button {
  min-height: 44px;
  font-size: 13px;
}
.workspace-navigation > button i,
.order-filters button span {
  font-size: 11px;
  line-height: 1.5;
}
.workspace-navigation > button[aria-selected=true] {
  color: var(--interaction-ink);
  font-weight: 750;
}
.workspace-navigation > button[aria-selected=true] span { text-decoration: underline; text-underline-offset: 4px; }
.orders-th { font-size: var(--preview-label-size); }
.order-row { min-height: 68px; }
.order-row > strong,
.order-row > span:nth-child(2),
.order-row .pill {
  font-size: var(--preview-label-size);
}
.order-row .pill { white-space: normal; line-height: 1.5; padding: 5px 7px; }
.workspace-content .subscription-row { font-size: 14px; gap: 12px; }
.workspace-content .chart-header { font-size: 14px; flex-wrap: wrap; gap: 10px; }
.workspace-bottom { gap: 12px; flex-wrap: wrap; }
#close-order { min-width: 44px; min-height: 44px; }
.order-detail { padding-inline-end: 54px; font-size: 14px; }

/* These labels sit outside aria-hidden ornament and communicate product context. */
.analytics-art .scene-heading,
.analytics-art .scene-heading small,
.analytics-art-foot {
  font-size: var(--preview-label-size);
  color: var(--preview-muted);
}

.faq-search-field button {
  color: var(--interaction-ink);
  min-width: 52px;
  min-height: 44px;
  font-size: 14px;
}
.faq-category-nav a:hover,
.faq-category-nav a[aria-current=true] { color: var(--interaction-ink); }
.faq-category-nav a[aria-current=true] { font-weight: 750; text-decoration: underline; text-underline-offset: 5px; }
#faq-topic {
  width: 100%;
  min-height: 48px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
#faq-query,
#contact-form input,
#contact-form select,
#contact-form textarea { caret-color: var(--interaction-ink); }
#faq-reset { min-height: 44px; }
#faq-result-count { font-size: 14px; }
#contact-unavailable a { min-height: 44px; }
#contact-form [aria-invalid=true] { border-width: 2px; }

/* Keyboard use must reveal any container before its entry animation finishes. */
.js [data-reveal]:focus-within { opacity: 1; transform: none; transition:none!important; }
.workspace :focus-visible,
.faq-search :focus-visible,
#faq-topic:focus-visible,
#contact-form :focus-visible {
  outline: 3px solid var(--interaction-ink);
  outline-offset: 4px;
}
@media (max-width: 639px) {
  .workspace-top { gap: 8px; }
  .workspace-top .mini-brand { font-size: 13px; }
  .workspace-navigation > button { font-size: 12px; padding-inline: 9px; gap: 6px; }
  .workspace-navigation > button svg { width: 16px; }
  .workspace-content { padding-inline: 14px; }
  .order-filters { gap: 12px; }
  .order-filters button { font-size: 12px; }
  .order-row, .orders-th { grid-template-columns: .95fr .9fr 1.2fr; gap: 8px; }
  .order-row .pill { padding-inline: 4px; }
}
@media (forced-colors: active) {
  .workspace-navigation > button,
  .order-filters button,
  .order-row,
  .faq-search-field,
  #faq-topic,
  .stage-options > label { border: 1px solid CanvasText; }
  .workspace-navigation > button[aria-selected=true],
  .order-filters button[aria-pressed=true],
  .faq-category-nav a[aria-current=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  .pill { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight !important; }
  .field-error { color: CanvasText; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-content [role=tabpanel],
  .js [data-reveal]:focus-within { animation: none; transition:none!important; }
}

/* Three readable, equally reachable views on narrow phones. */
@media(max-width:480px) {
  .workspace-navigation { display: grid; grid-template-columns: .85fr 1.25fr 1fr; gap: 4px; padding: 10px 8px; overflow: visible; }
  .workspace-navigation>button { flex-direction: column; justify-content: center; gap: 7px; min-height: 65px; padding: 9px 4px; font-size: 12px; white-space: normal; }
  .workspace-navigation>button i { display: none; }
  .workspace-navigation .workspace-support { display: none; }
}

/* A selected sample order exposes distinct commercial and care states. */
.order-detail {
  margin-top: 20px;
  padding: 22px;
  background: var(--iris-light);
  border-radius: 12px;
  animation: none;
}
#order-detail-title {
  display: block;
  padding-inline-end: 36px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
#order-detail-copy { margin-top: 16px; font-size: 14px; line-height: 1.75; color: var(--preview-muted); }
.order-detail dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 20px 0 0; padding: 0; }
.order-detail dl > div { min-width: 0; }
.order-detail dt { font-size: 12px; line-height: 1.5; color: var(--preview-muted); }
.order-detail dd { margin: 6px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
#order-result-count { font-size: 12px; line-height: 1.6; color: var(--preview-muted); margin-block: 12px; min-height: 20px; }
.order-row[aria-expanded=true] { background: var(--iris-light); }
.order-row[aria-expanded=true] > strong { text-decoration: underline; text-underline-offset: 4px; }

/* Existing min-height holds the workspace steady; entry never animates geometry. */
.js [data-workspace] [role=tabpanel]:not([hidden]) { animation: workspace-view-in 180ms cubic-bezier(.22,1,.36,1) both; }
@keyframes workspace-view-in {
  from { opacity: .72; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 639px) {
  .order-detail { padding: 20px 16px; }
  .order-detail dl { grid-template-columns: 1fr; gap: 14px; }
  .order-detail dl > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; align-items: baseline; }
  .order-detail dd { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-workspace] [role=tabpanel]:not([hidden]) { animation: none; }
}
.reduce-motion [data-workspace] [role=tabpanel]:not([hidden]) { animation: none; }
@media (forced-colors: active) {
  .order-row[aria-expanded=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  .order-detail { border: 1px solid CanvasText; }
}

/* Every workspace view uses the same readable secondary-text role. */
.workspace-content .subscription-row small,
.workspace-content .chart-header,
.workspace-content .bar-chart span,
.workspace-content .bar-chart b { color: var(--muted); }
.workspace-content .subscription-banner .pill { font-size: 12px; }