/* Accessibility fixes (A11Y-UX review, 30 Oct 2026). Loaded last so it wins.
   V1's palette only: OfficeMax orange stays for fills behind large text, borders,
   icons and the brand mark; a darker orange carries small text and buttons. */
:root { --acc-orange-text: #C2410C; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* H1/H2 (2.2.2): Pause animations on Home stops the Log an idea pulse and the
   repeating step pops. Reduced motion stops the pulse too: this rule comes
   after the 30 Oct 'stronger pulse' rule that used to override it. */
.accel-anim-paused .pb-pulse::before, .accel-anim-paused .pb-pulse::after { animation: none !important; opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .pb-pulse::before, .pb-pulse::after { animation: none !important; opacity: 0 !important; }
}
.pb-anim-toggle { font: inherit; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); background: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 5px 10px; cursor: pointer; min-height: 24px; }
.pb-anim-toggle:hover { background: rgba(255,255,255,.12); }
.pb-anim-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pb-anim-toggle[aria-pressed="true"] { background: rgba(255,255,255,.16); }

/* H3 (1.4.1): RAG shows a letter as well as a colour. Navy on green and amber,
   white on red, all 5:1 or better. */
.rag-dot.rag-g, .rag-dot.rag-a, .rag-dot.rag-r { font-size: 9px; font-weight: 900; line-height: 1; color: #1E2A3A; }
.rag-dot.rag-r { color: #fff; }
.pb-rag-btn .pb-rag-i { width: 15px !important; height: 15px !important; display: inline-grid !important; place-items: center;
  font-style: normal; font-size: 9px; font-weight: 900; color: #1E2A3A; }
.pb-rag-btn .pb-rag-i-r { color: #fff; }
.pb-rag-btn .pb-rag-w { font-weight: 600; font-size: 11px; }

/* H5 (2.1.1): the upload buttons are focusable labels; show where focus is. */
label.pb-filebtn:focus-visible { outline: 3px solid var(--acc-orange-text); outline-offset: 2px; }

/* SQ-02: background failures show a clear message (AccelA11y.fail) */
.pb-toast.pb-toast-err { background: #B3181D; max-width: min(560px, calc(100% - 32px)); text-align: center; }

/* M6 / SQ-03: grouped fields on Log an idea look like the other labels */
fieldset.pb-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.pb-fieldset > legend, .form-group > .pb-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; padding: 0; }

/* ===== H7 / SQ-04 (1.4.3 Contrast AA). V1's palette, darkened only where text
   sits on it. #F26522 stays for borders, icons, large text and the brand mark. ===== */
:root, [data-theme="light"] { --text-secondary: #4A4F57; --text-muted: #50565E; }   /* 5.1:1 even on the #C8CCD2 page */
.breadcrumbs .bc-link, .breadcrumbs .bc-sep { color: #3F454D; }
/* orange fills behind small white text: buttons, active range, Move stage */
.btn-primary, .pd-move-stage, .range-btn.active, .pb-filters .range-btn.active { background: var(--acc-orange-text); border-color: var(--acc-orange-text); color: #fff; }
.btn-primary:hover, .pd-move-stage:hover { background: #A63A0B; filter: none; }
/* orange small text */
.empty-state a, .range-btn:hover, .bp-header .cell.today-head, .cell.proj-name:focus,
.ah-guide summary:hover, .ba-love { color: var(--acc-orange-text); }
.ba-love { border-color: var(--acc-orange-text); }
.ba-love.on { background: var(--acc-orange-text); border-color: var(--acc-orange-text); color: #fff; }
.ag-matrix .y { color: #087A35; }
.edit-mode-indicator { background: #08803A; }
/* theme bands and pills take their text colour from AccelA11y.ink() (navy or white) */
.phase-row .cell { text-shadow: none; }

/* ===== H8: dark mode. Cards that keep a white background get dark text back,
   and muted text is raised to 5:1 on the dark panels. ===== */
[data-theme="dark"] { --text-muted: #9AA1AC; --text-secondary: #B4BAC3; --acc-orange-text: #FF8A4C; --bg-muted: #2F3540; --border-subtle: #3A414C; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .pd-move-stage, [data-theme="dark"] .range-btn.active,
[data-theme="dark"] .pb-filters .range-btn.active, [data-theme="dark"] .ba-love.on { background: #C2410C; border-color: #C2410C; color: #fff; }
[data-theme="dark"] .breadcrumbs .bc-link, [data-theme="dark"] .breadcrumbs .bc-sep { color: #B4BAC3; }
/* small text that was below 4.5:1 (axe, 30 Oct) */
.accel-sm .sm-plain, .pb-soon, .range-toolbar .range-label, .range-label { color: var(--text-muted); }
.pb-ai { opacity: 1; color: var(--text-muted); }
.pb-faded { opacity: 1; } .pb-faded > * { color: var(--text-muted); }
.pb-like { color: var(--acc-orange-text); border-color: var(--acc-orange-text); }
.pb-like.on { background: var(--acc-orange-text); color: #fff; }
.accel-sm .sm-chip.on { background: #08803A; border-color: #08803A; }
.fh-pill-open { background: var(--acc-orange-text) !important; }
.ag-matrix .n { color: #6B7280; }
.summary-count { color: var(--text-muted); }

/* ===== H8 dark mode, screen by screen (axe, 30 Oct) ===== */
[data-theme="dark"] .fh-card { background: var(--bg-panel); border-color: var(--border-light); }
[data-theme="dark"] .range-toolbar { background: var(--bg-surface-alt); border-bottom-color: var(--border-light); }
[data-theme="dark"] .ag-strip .st { background: var(--bg-surface-alt); color: var(--text-primary); }
[data-theme="dark"] .ah-node, [data-theme="dark"] .ah-node b { color: var(--text-primary); }
[data-theme="dark"] .sr-chip { color: var(--text-primary); }
[data-theme="dark"] .sr-streak { color: #FFC27A; }
[data-theme="dark"] th { color: var(--text-secondary); }
[data-theme="dark"] .pb-linkbtn, [data-theme="dark"] .ba-docs a, [data-theme="dark"] .ba-docs a svg { color: #8EC5FF; }
[data-theme="dark"] .pb-due-ok { color: #7EE2A8; } [data-theme="dark"] .pb-due-soon { color: #FFC27A; }
[data-theme="dark"] .fh-pill-open { background: #C2410C !important; color: #fff; }
/* legacy inline colours set for a white page */
[data-theme="dark"] [style*="color:#5E6570"], [data-theme="dark"] [style*="color: rgb(94, 101, 112)"],
[data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color:#1a1a1a"] { color: #B4BAC3 !important; }
[data-theme="dark"] [style*="color:#007C88"], [data-theme="dark"] [style*="color:#1E4D7B"] { color: #7FD6DF !important; }
[data-theme="dark"] [style*="color:#087A35"] { color: #7EE2A8 !important; }
[data-theme="dark"] [style*="color:#C2410C"], [data-theme="dark"] [style*="color: rgb(194, 65, 12)"] { color: #FF8A4C !important; }
[data-theme="dark"] [style*="background:#f8f9fb"], [data-theme="dark"] [style*="background:#fafafa"], [data-theme="dark"] [style*="background:#fff;"],
[data-theme="dark"] [style*="background:#f4f6f8"], [data-theme="dark"] [style*="background:#eee"] { background: var(--bg-surface-alt) !important; }
[data-theme="dark"] .ah-az-row, [data-theme="dark"] .ah-az-row b, [data-theme="dark"] .ag-card, [data-theme="dark"] .ag-card b,
[data-theme="dark"] .ag-rel span, [data-theme="dark"] .ag-term { color: var(--text-primary); }
[data-theme="dark"] .ag-matrix .y { color: #7EE2A8; } [data-theme="dark"] .ag-matrix .t { color: #FFC27A; } [data-theme="dark"] .ag-matrix .n { color: #9AA1AC; }
[data-theme="dark"] .ah-chip { background: var(--bg-muted); color: var(--text-primary); }
[data-theme="dark"] .drag-grip { color: #9AA1AC !important; }
[data-theme="dark"] .pb-pill.s1 { color: #1E4D7B; } [data-theme="dark"] .pb-pill.s2 { color: #8F3E12; } [data-theme="dark"] .pb-pill.s3 { color: #0B7F37; }
[data-theme="dark"] table th { color: var(--text-secondary) !important; }
[data-theme="dark"] .ag-tbc li, [data-theme="dark"] .ag-open li, [data-theme="dark"] [style*="color:#6a4a00"], [data-theme="dark"] .ag-card .ag-open { color: #FFC27A; }
[data-theme="dark"] [style*="background:#f4f5f7"] { background: var(--bg-surface-alt) !important; }
[data-theme="dark"] [style*="background:#fafbfc"] { background: var(--bg-surface-alt) !important; }
[data-theme="dark"] thead, [data-theme="dark"] thead tr, [data-theme="dark"] thead th { background: var(--bg-surface-alt) !important; }
[data-theme="dark"] .fh-desc, [data-theme="dark"] .fh-meta { color: var(--text-secondary); }
.pb-pill.off { color: #50565E; }
[data-theme="dark"] .dp-btn { color: var(--text-secondary); background: var(--bg-surface-alt); border-color: var(--border-light); }
[data-theme="dark"] [style*="color:#B3181D"], [data-theme="dark"] .dp-btn.danger { color: #FF8F8F !important; }
[data-theme="dark"] [style*="background:#f0f0f0"], [data-theme="dark"] [style*="background:#eee;"] { background: var(--bg-surface-alt) !important; }

/* M3: skip link (shows when focused) */
.accel-skip { position: absolute; left: 16px; top: -60px; z-index: 11000; background: #1E2A3A; color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; }
.accel-skip:focus { top: 12px; outline: 3px solid #F26522; outline-offset: 2px; }
main.content:focus { outline: none; }
.content h1[tabindex="-1"]:focus { outline: none; }

/* M1 (1.4.10 Reflow): below 1,100px the top bar and sub-bar wrap instead of scrolling sideways */
@media (max-width: 1100px) {
  .topbar, body.pb-narrow .topbar { flex-wrap: wrap; padding: 4px 12px; row-gap: 0; }
  .topbar-left, .topbar-right, #topbar-user, .topbar-tabs { flex-wrap: wrap; }
  .topbar-left { min-width: 0; }
  .topbar-right { margin-left: auto; }
  .topbar-sep { display: none; }
  .topbar-tab, .topbar-link { padding: 10px 8px; }
  .subnav, body.pb-narrow .subnav { flex-wrap: wrap; }
  .subnav-legend, .subnav-gap { display: none; }
  .viewas-wrap { margin-right: 4px; }
}
@media (max-width: 520px) {
  #topbar-username { display: none; }
  .topbar-brand { padding-right: 8px; }
}
@media (max-width: 1100px) { .topbar { position: relative; } }
/* M1 at 320px: wrap the My ideas line, the idea cards and the range buttons */
@media (max-width: 600px) {
  .pb-il-head { flex-wrap: wrap; }
  .pb-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .pb-card { min-width: 0; } .pb-card-foot { flex-wrap: wrap; }
  .range-toolbar { flex-wrap: wrap; row-gap: 6px; }
}

/* M7: the idea card's title is its button */
.pb-card-open { all: unset; cursor: pointer; display: inline; font: inherit; color: inherit; }
.pb-card-open:focus-visible { outline: 3px solid var(--acc-orange-text); outline-offset: 2px; border-radius: 4px; }
.pb-card:focus-within { border-color: var(--acc-orange-text); }

/* M8 (2.4.7): a visible focus ring everywhere it was only a border colour change */
.pb-rag-btn:focus-visible, .pb-idea-line:focus-visible, .pb-bcard:focus-visible, .pb-list-row:focus-visible,
.pb-door:focus-visible, .ag-term:focus-visible, .sr-chip:focus-visible, .sm-chip:focus-visible, .pb-like:focus-visible,
.ba-gp-item:focus-visible, .ah-node:focus-visible, .ah-az-row:focus-visible, .proj-name:focus-visible {
  outline: 3px solid var(--acc-orange-text) !important; outline-offset: 2px; }

/* M9 (2.5.8): small targets get at least a 24 x 24px hit area */
.pb-rag-btn, .pb-like.sm, .ba-bell-item, .dp-btn, .pb-linkbtn, .sm-person button, .ag-term[role="link"] { min-height: 24px; }
.pb-rag-btn { min-width: 24px; padding: 3px 6px; }
.pb-like.sm { padding: 3px 9px; }
.sm-person button, .accel-sm .sm-person button { min-width: 24px; }
#content button[onclick^="editComment"], #content button[onclick^="deleteComment"], #content button[onclick^="editStatus"],
#content button[onclick^="deleteStatus"], #content button[onclick^="removeRASCI"], #content button[onclick^="removeSteer"] { min-width: 24px; min-height: 24px; }
[data-term="mark-as"].ag-term { display: inline-block; min-height: 24px; line-height: 24px; }

/* U7: these blocks inherited a 20px size; they are body text */
.ah-block > p, .ah-block > ol, .ah-block > ul, .ap-sync p { font-size: 13px; line-height: 1.5; }
.ah-block > p.ah-small { font-size: 12px; }
/* dark mode: links and glossary terms stand out from the text round them */
[data-theme="dark"] .content a:not(.btn), [data-theme="dark"] .content a:not(.btn):visited { color: #8EC5FF; }
[data-theme="dark"] .ag-term[role="link"]:not(.pb-pill) { text-decoration: underline dotted rgba(255,255,255,.6); text-underline-offset: 3px; }
[data-theme="dark"] [style*="color:#0078d4"], [data-theme="dark"] [style*="color:#0078D4"] { color: #8EC5FF !important; }