.usability-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--ink, #18323c);
  background: var(--white, #ffffff);
  box-shadow: 0 7px 20px rgba(16, 45, 58, .1);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.usability-toggle:hover { box-shadow: 0 11px 26px rgba(16, 45, 58, .15); }
.usability-toggle:focus-visible { outline: 3px solid rgba(234, 107, 85, .52); outline-offset: 3px; }
.usability-toggle > b { font-size: 17px !important; letter-spacing: -.05em; }
.usability-toggle [data-usability-label] { font-size: 16px !important; }

.public-usability-fab {
  position: fixed;
  z-index: 170;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  min-height: 48px;
  padding-inline: 15px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy, #102d3a);
  box-shadow: 0 14px 36px rgba(9, 12, 13, .24);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.public-usability-fab:hover {
  background: var(--earth-action, #c84b38);
  box-shadow: 0 17px 42px rgba(9, 12, 13, .3);
  transform: translateY(-2px);
}
.public-usability-fab img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
body:has(.public-cookie-banner:not([hidden])) .public-usability-fab { bottom: 132px; }

.usability-dialog {
  box-sizing: border-box;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: clamp(26px, 5vw, 42px);
  border: 0;
  border-radius: 30px;
  color: var(--ink, #18323c);
  background: var(--white, #ffffff);
  box-shadow: 0 36px 100px rgba(5, 19, 25, .36);
  overflow: auto;
  overscroll-behavior: contain;
}

.usability-dialog::backdrop { background: rgba(7, 20, 25, .68); backdrop-filter: blur(7px); }
.usability-dialog[open] { display: block; }
.usability-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: var(--ink, #18323c);
  background: rgba(24, 50, 60, .08);
  font-size: 24px !important;
  cursor: pointer;
}
.usability-badge {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #102d3a;
  font-size: 21px !important;
  font-weight: 950;
}
.usability-dialog h2 { margin: 18px 48px 9px 0; font-size: calc(clamp(30px, 5vw, 42px) - 2.6667px); line-height: 1.05; letter-spacing: -.045em; }
.usability-dialog > p { margin: 0; color: var(--muted, #68747a); font-size: 16px !important; line-height: 1.6 !important; }
.usability-choices { margin: 25px 0 18px; display: grid; gap: 10px; }
.usability-choice {
  width: 100%;
  min-height: 78px;
  padding: 13px 15px;
  border: 2px solid transparent;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
  color: var(--ink, #18323c);
  background: rgba(24, 50, 60, .065);
  text-align: left;
  cursor: pointer;
}
.usability-choice:hover { background: rgba(24, 50, 60, .11); }
.usability-choice.is-selected { border-color: currentColor; color: #fff; background: #102d3a; box-shadow: 0 13px 30px rgba(16, 45, 58, .2); }
.usability-choice strong,
.usability-choice span { grid-column: 1; }
.usability-choice.is-selected::after {
  content: '✓';
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 22px;
  font-weight: 950;
}
.usability-choice strong { font-size: 18px !important; }
.usability-choice span { color: var(--muted, #68747a); font-size: 16px !important; line-height: 1.45 !important; }
.usability-choice.is-selected span { color: rgba(255, 255, 255, .76); }
.usability-dialog > small { display: block; color: var(--muted, #68747a); font-size: 16px !important; line-height: 1.5 !important; }

html[data-readability="comfort"] { --muted: #4d5c62; --line: #b9c7cd; }
html[data-readability="clear"] { --muted: #3e4c52; --line: #93a3aa; }

@media screen {
  html[data-readability="comfort"] body,
  html[data-readability="comfort"] :where(body, body *):not(:where(h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, svg, svg *, [aria-hidden="true"], [aria-hidden="true"] *, script, style, link, meta)) {
    font-size: 18px !important;
  }
  html[data-readability="clear"] body,
  html[data-readability="clear"] :where(body, body *):not(:where(h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, svg, svg *, [aria-hidden="true"], [aria-hidden="true"] *, script, style, link, meta)) {
    font-size: 20px !important;
  }
  html[data-readability="comfort"] :where(p, li, label, a, button, input, select, textarea, small),
  html[data-readability="clear"] :where(p, li, label, a, button, input, select, textarea, small) {
    line-height: 1.65 !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
  html[data-readability="comfort"] :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary, [role="button"], [role="radio"]) { min-width: 50px; min-height: 50px; }
  html[data-readability="clear"] :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary, [role="button"], [role="radio"]) { min-width: 56px; min-height: 56px; }
  html[data-readability="comfort"] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) { min-height: 50px; }
  html[data-readability="clear"] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) { min-height: 56px; }
}

:root[data-theme="dark"] .usability-toggle:not(.public-usability-fab),
:root[data-theme="dark"] .usability-dialog { color: #f3f5f4; background: #172329; }
:root[data-theme="dark"] .public-usability-fab { color: #fff; background: #c84b38; }
:root[data-theme="dark"] .usability-close,
:root[data-theme="dark"] .usability-choice { color: #f3f5f4; background: #223138; }
:root[data-theme="dark"] .usability-choice.is-selected { color: #fff; background: #c84b38; }
:root[data-theme="dark"] .usability-choice.is-selected span { color: #fff; }

@media (max-width: 680px) {
  .auth-nav-actions .usability-toggle [data-usability-label],
  .top-actions .usability-toggle [data-usability-label],
  .go-head .usability-toggle [data-usability-label] { display: none; }
  .auth-nav-actions .usability-toggle,
  .top-actions .usability-toggle,
  .go-head .usability-toggle { width: 44px; padding: 0; }
  .public-usability-fab {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
  }
  .public-usability-fab [data-usability-label] { display: none; }
  body:has(.public-cookie-banner:not([hidden])) .public-usability-fab { bottom: 178px; }
}

@media (max-width: 420px) {
  .usability-dialog { width: calc(100% - 20px); padding: 25px 20px; border-radius: 24px; }
  .usability-dialog h2 { margin-right: 40px; font-size: calc(30px - 2.6667px); }
  .usability-choice { min-height: 74px; padding: 13px 14px; }
}

/*
 * Keep the marketing hero's quiet secondary action clear of the persistent
 * 48 px accessibility control on narrow screens. The primary CTA retains the
 * full line and remains the first obvious action.
 */
@media (max-width: 560px) {
  .mk-actions .mk-text-link {
    width: calc(100% - 60px);
    min-height: 48px;
    margin-left: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usability-dialog::backdrop { backdrop-filter: none; }
  .usability-toggle,
  .usability-choice,
  .usability-close { transition: none !important; }
}

@media (forced-colors: active) {
  .usability-toggle,
  .usability-close,
  .usability-choice,
  .usability-dialog {
    border: 1px solid ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .usability-choice.is-selected {
    border: 3px double Highlight;
  }
}

@media print { .usability-toggle, .usability-dialog { display: none !important; } }