/* Accessibility (see assets/js/ext/a11y.js): focus rings, the skip link, reduced motion, and colour tokens that
   meet WCAG 2.2 AA contrast (4.5:1 for text, 3:1 for icons and outlines) in light and dark. */

/* ---- colour tokens ---- */
:root {
  --fg-muted: rgba(55, 53, 47, .78);   /* was .6 (3.6:1 on white); now 5.9:1 on white, 4.7:1 on the selected sidebar row */
  --fg-faint: rgba(55, 53, 47, .56);   /* icons and hints: 3.2:1 */
  --accent: #1b74d1;                    /* white text on it 4.7:1 (was 3.9:1); as text on white 4.7:1 */
  --accent-text: #1b74d1;
  --danger: #c62f2f;                    /* 5.2:1 on white (was 4.0:1) */
  --focus: #1b74d1;
  --c-gray: #6f6e69; --c-brown: #8a5a45; --c-orange: #b25a00; --c-yellow: #8f6400; --c-green: #3a7353;
  --c-blue: #2b6e95; --c-purple: #7d52a0; --c-pink: #ad3a76; --c-red: #c13b36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg-muted: rgba(255, 255, 255, .62); --fg-faint: rgba(255, 255, 255, .42);
    --accent: #1b74d1; --accent-text: #6aaef0; --danger: #f07171; --focus: #6aaef0;
  }
}
:root[data-theme="dark"] {
  --fg-muted: rgba(255, 255, 255, .62); --fg-faint: rgba(255, 255, 255, .42);
  --accent: #1b74d1; --accent-text: #6aaef0; --danger: #f07171; --focus: #6aaef0;
}
.linkish, .tbtn.on, .auth-box a, .share-note a, .backlink, .cell-link { color: var(--accent-text); }
/* small text that used the faint colour (kept for icons and placeholders) */
.sb-hint, .sb-section-title, .menu-head, .mi-hint, .new-row, .ghost, .cell-empty, .menu-empty, .sb-empty, .tree-arrow, .db-tab, .th-icon { color: var(--fg-muted); }

/* inline code: 4.6:1 on its tint (was 3.0:1) */
.content code, .card code { color: #c4332f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .content code, :root:not([data-theme="light"]) .card code { color: #ff8a80; } }
:root[data-theme="dark"] .content code, :root[data-theme="dark"] .card code { color: #ff8a80; }

/* ---- screen-reader-only text and the skip link ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 8px; top: -60px; z-index: 1000; background: var(--bg-elev); color: var(--fg); border: 2px solid var(--focus); border-radius: 6px; padding: 8px 14px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow); }
.skip-link:focus { top: 8px; }

/* ---- visible focus (keyboard use; the app keeps its quiet look for the mouse) ---- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kbd .input:focus, .kbd .menu-filter:focus, .kbd .search-input:focus, .kbd .db-search:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.kbd .menu .item:focus, .kbd .menu .item.active:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.kbd #sidebar .tree-item:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.kbd .tbl [role=gridcell]:focus, .kbd .tbl [role=columnheader]:focus { outline: 2px solid var(--focus); outline-offset: -2px; position: relative; z-index: 1; }
.kbd .inline-toolbar button:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
/* the caret shows where you are in text; a bar beside the block shows which block has it */
.kbd .editor .block:focus-within > .body { box-shadow: -3px 0 0 0 color-mix(in srgb, var(--focus) 55%, transparent); }
.editor .content.main:focus-visible, .page-title:focus-visible, .comments-drawer textarea:focus-visible { outline: none; }
.kbd .page-title:focus { box-shadow: 0 2px 0 0 color-mix(in srgb, var(--focus) 55%, transparent); }
.kbd .editor:focus-visible { outline: 2px dashed color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 4px; }
/* things that only appeared on hover appear on focus too */
.kbd .page-controls:focus-within, .kbd .code-wrap:focus-within .code-head, .kbd .tree-item:focus .tree-actions { opacity: 1; }
.kbd .tree-item:focus .tree-actions { display: flex; }

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* the table's "new row" cell fills its row */
.a11y-newrow-cell { display: block; }