/* Shared accessibility and theme adaptations for the supplied product designs. */
:root { --surface: var(--sf, var(--gr, #fff)); --accent-soft: var(--tool-accent-soft, #f0edf3); }
.helpdesk { --accent-soft: var(--cm); }
[hidden] { display: none !important; }
main { display: block; }
.skip { position: absolute; top: -100px; left: 24px; padding: 12px 20px; z-index: 3; background: var(--surface); color: var(--ink); }
.skip:focus { top: 12px; }
a, button, input, summary { touch-action: manipulation; }
a.logo, footer a { min-height: 44px; display: inline-flex; align-items: center; }
nav .l a { min-height: 44px; min-width: 44px; text-align: center; }
.btn { justify-content: center; transition: transform 160ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
nav .l a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
button:disabled { cursor: default; }
summary { gap: 16px; padding-block: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { flex-shrink: 0; }
section, .faq { scroll-margin-top: 24px; }
.track .fr { transform: rotate(-.8deg); box-shadow: 0 24px 48px -28px #7b526430; }
.track .bl:hover, .track .cd:hover { border-color: var(--rose); }
.track .cap p + p { margin-top: 4px; }
.track #selection-detail { color: var(--ink); font-weight: 500; }
.track .bd, .track .cal, .track .pn, .helpdesk .tk { min-width: 0; }
.track .r > *, .helpdesk .row > * { min-width: 0; overflow-wrap: anywhere; }
.track .r .tag { display: inline-block; }
.helpdesk .sl output { color: var(--ink); min-width: 90px; text-align: right; font-weight: 600; }
.helpdesk .m { overflow-wrap: anywhere; }
.helpdesk .seg button:hover { color: var(--blue); }
.helpdesk .stage .tk { box-shadow: 0 24px 48px -28px #10286b26; }
.helpdesk .top .q { cursor: default; }
/* A static full-page illustration stays useful without JavaScript. */
.helpdesk .thr .x { display: block; }
@media (max-width: 1050px) {
  .track .bd { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  nav { padding-block: 12px; }
  nav .l { order: 3; width: 100%; display: flex; justify-content: space-between; gap: 8px; }
  nav .l a { margin: 0; font-size: 13px; }
  .track .fr { transform: none; }
  .helpdesk .end, .track .end { padding: 32px 24px; }
  .helpdesk .stage::before { display: none; }
}
@media (max-width: 580px) {
  .w { padding-inline: 20px; }
  .track .bd { gap: 8px; padding: 12px; }
  .track .cd { padding: 8px; font-size: 12px; overflow-wrap: anywhere; }
  .track .cd .k { font-size: 10px; }
  .track .cg { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .track .cg > .d, .track .cg > .h, .track .cg > [aria-hidden] { display: none; }
  .track .col { position: static; border: 0; display: flex; align-items: stretch; gap: 8px; }
  .track .col::before { content: attr(data-label); font: 12px/1.5 'Geist Mono', monospace; color: var(--mute); width: 32px; flex-shrink: 0; padding-top: 8px; }
  .track .col:empty::after { content: 'No example entries'; font-size: 12px; color: var(--mute); padding: 8px; }
  .track .bl { position: static; height: auto; flex: 1; min-height: 52px; padding: 8px; }
  .track .r { grid-template-columns: 56px minmax(0,1fr) auto; gap: 8px; padding: 12px; font-size: 13px; }
  .track .r .k, .track .r .n { font-size: 10px; }
  .track .r .tag { font-size: 10px; }
  .track .r:has(.n) { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .track .sec, .track .faq { gap: 24px; }
  .track section { padding-top: 64px; }
  .track .sec { padding-bottom: 64px; }
  .track .faq { padding-block: 64px; }
  .helpdesk section { padding-block: 64px; }
  .helpdesk .stage { padding: 12px; }
  .helpdesk .hd, .helpdesk .req, .helpdesk .thr { padding: 16px; }
  .helpdesk .top { padding: 12px 16px; }
  .helpdesk .top .q { display: none; }
  .helpdesk .seg button { padding-inline: 10px; }
  .helpdesk .st { gap: 16px; }
  .helpdesk .row { flex-direction: column; gap: 4px; }
  .helpdesk .sl { gap: 8px; }
  .helpdesk .sl label { width: 100%; }
  .helpdesk .sl input { min-width: 0; }
  .helpdesk .m { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}