/* Accessibility layer, loaded after every other stylesheet (review 2026-09-28; docs/review/FINDINGS.md F-37, F-38, F-44). WCAG 2.1 AA: text at least 4.5:1,
   focus rings and control borders at least 3:1 (1.4.11), a 12px floor for readable text, and reflow down to 320px.
   The shades are the identity's own ink and iris; ratios are recorded in docs/review/ACCESSIBILITY.md. */

@media (max-width: 900px) {
  html:has(.topbar) {
    /* The wrapped language/appearance controls expand the sticky phone header. */
    scroll-padding-top: 140px;
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.command-search input:focus-visible {
  outline: 2px solid var(--iris-700);
  outline-offset: 2px;
}
/* The sidebar, toast, connector hero and callback header stay dark in the light theme, where the iris-700 ring
   measured 2.32:1; these surfaces use the on-dark ring instead (WEB-01). */
:is(.sidebar, .toast, .connector-hero, .callback-top)
  :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
.toast:focus-visible {
  outline-color: var(--focus-on-inverse);
}
input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  border-color: var(--line-strong);
}
.page-heading p,
.page-footer,
.command-trigger,
.command-trigger kbd,
.initial-loading,
.report-section-label small,
.native-settings,
.custom-metric-heading p,
.forgot-link,
.auth-switch,
.auth-legal {
  color: var(--muted);
}
.auth-switch a {
  color: var(--iris-700);
}
.page-footer,
.command-trigger kbd,
.forgot-link,
.auth-legal {
  font-size: 12px;
}
.auth-form .form-note {
  color: var(--muted);
  font-size: 12px !important;
}
.status {
  color: var(--text-soft);
}
input[type='checkbox'],
input[type='radio'] {
  min-width: 18px;
  min-height: 18px;
}
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}
.workspace-form .button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
code {
  overflow-wrap: anywhere;
}
@media (max-width: 850px) {
  .sidebar {
    box-shadow: none;
  }
  .menu-open .sidebar {
    box-shadow: 15px 0 50px var(--shadow-strong);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.page-error {
  max-width: 640px;
  margin: 40px auto;
}
.page-error h1 {
  font-size: 26px;
}
.page-error h1:focus {
  outline: none;
}
.metric-formula {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.report-table-wrap:focus-visible {
  outline: 2px solid var(--iris-700);
  outline-offset: 2px;
}
.breadcrumb span,
#menu-toggle,
.report-heading .eyebrow,
.report-heading p {
  color: var(--muted);
}
.auth-story > .eyebrow,
.auth-story > p {
  color: var(--text-secondary-strong);
}
.auth-story .auth-tagline em {
  color: var(--iris-700);
}
.feature-card p {
  color: var(--text-secondary-strong);
}
.panel-header {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .recipe-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.recipe-fields > label {
  min-width: 0;
}
.recipe-fields select {
  width: 100%;
}
#recipe-form {
  grid-template-columns: minmax(0, 1fr);
}
#recipe-form > * {
  min-width: 0;
}
/* Report table (batch 9): IDs, currency and time zone were #9b8ba9 (3.15:1) and source details #8f7aa2 (3.84:1), both at 10px. */
.report-table td small,
.report-table tbody th small,
.report-table td details,
.report-table tbody th details {
  color: var(--muted);
  font-size: 12px;
}
.report-table thead th {
  font-size: 12px;
}
/* Batch 19: the last text below 4.5:1 (docs/review/ACCESSIBILITY.md). The same hues, darkened until they reach 4.6:1 on
   their own backgrounds; the platform initials keep their brand hue. Text at 10px or less moves to the 12px floor. */
.workspace-metrics span,
.campaign-steps small,
.workspace-copy {
  color: var(--text-secondary);
}
.metric-pills span {
  color: var(--text-secondary);
}
.quick-actions small {
  color: var(--text-secondary);
  font-size: 12px;
}
.quick-actions > a > i {
  font-style: normal;
}
.report-platform summary small {
  color: var(--text-secondary);
  font-size: 12px;
}
/* The section number of an opened report option sits on its #fcfafe summary, where #816c9c measured 4.44:1 (RPT-07's
   rendered case opens it); #7b6696 is the same hue at 4.84:1 there and 5.02:1 on white. */
.report-section-label > span {
  color: var(--text-accent);
}
.account-monogram {
  color: var(--text-accent);
}
.client-cloud span {
  color: var(--text-secondary);
}
.evidence-tags span {
  color: var(--text-secondary);
  font-size: 12px;
}
.how-steps li > span {
  color: var(--text-secondary);
}
.platform-google {
  color: var(--platform-google);
}
.platform-meta {
  color: var(--platform-meta);
}
.platform-snapchat {
  color: var(--platform-snapchat);
}
.platform-microsoft {
  color: var(--platform-microsoft);
}

/* Text people and platforms write, such as campaign names and ad copy, keeps its own direction: Arabic or Hebrew reads
   right to left inside the English interface, English left to right, and numbers follow the page (F-47). */
input:not([type]),
input[type='text'],
input[type='search'],
textarea,
td,
tbody th {
  unicode-bidi: plaintext;
}

/* Controls that stand on their own are at least 24px tall (WCAG 2.2, 2.5.8): plain disclosure summaries, text links,
   the native-metrics summary and selects without their own sizing. Links inside sentences are exempt and unchanged. */
details:not([class]) > summary {
  padding-block: 3px;
}
.workspace-details > summary {
  min-block-size: 32px;
  padding-block: 4px;
}
.native-settings summary {
  min-height: 24px;
  align-items: center;
}
.text-link,
select {
  min-height: 24px;
}

/* Owned browser contrast checks (batch 178): retain the illustration while making its captions readable. */
.stage-caption,
.floating-chip small,
.mini-plan-label {
  color: var(--muted);
  font-size: 12px;
}
.stage-window-bottom {
  color: var(--text-on-inverse-secondary);
  font-size: 12px;
}
.mini-plan b {
  color: var(--iris-700);
  font-size: 12px;
}
.owner-settings-link {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Populated report-pagination text measured 3.41:1; retain the shared component with readable identity ink. */
.report-pagination {
  color: var(--muted);
  font-size: 12px;
}

/* Owner/reviewer captions need contrast against the full card gradient, including its darker end. */
.auth-form-card .owner-entry .eyebrow {
  color: var(--text-secondary-strong);
  font-size: 12px;
}