/* File: src/css/accesscore/effects.css
   AccessCore page-affecting styles. Every rule is gated on a
   `html[data-ac-<name>]` attribute selector — no rules fire when
   the user has default prefs. No !important unless a page rule
   would otherwise win at higher specificity; each such use is
   noted in a trailing comment. */

:root {
  --ac-border-color: #1a202c;
  --ac-focus-color:  #f6ad55;
  --ac-focus-halo:   rgba(246, 173, 85, 0.35);
}

/* ------------------------------ */
/* Text size (100..200% in steps) */
/* ------------------------------ */
html[data-ac-font-scale="110"] { font-size: 110%; }
html[data-ac-font-scale="120"] { font-size: 120%; }
html[data-ac-font-scale="130"] { font-size: 130%; }
html[data-ac-font-scale="140"] { font-size: 140%; }
html[data-ac-font-scale="150"] { font-size: 150%; }
html[data-ac-font-scale="160"] { font-size: 160%; }
html[data-ac-font-scale="170"] { font-size: 170%; }
html[data-ac-font-scale="180"] { font-size: 180%; }
html[data-ac-font-scale="190"] { font-size: 190%; }
html[data-ac-font-scale="200"] { font-size: 200%; }

/* When ANY font-scale is engaged, override the aurora-global body/heading
   pixel sizes so the html % scale actually cascades. Use attribute-presence
   selector — matches any value 110..200. */
html[data-ac-font-scale] body {
  font-size: 1em !important;  /* was 15px in aurora-global — 1em picks up the html-level % scaling */
}
html[data-ac-font-scale] :where(h1) { font-size: 2em !important; }
html[data-ac-font-scale] :where(h2) { font-size: 1.5em !important; }
html[data-ac-font-scale] :where(h3) { font-size: 1.25em !important; }
html[data-ac-font-scale] :where(h4) { font-size: 1.1em !important; }
html[data-ac-font-scale] :where(h5) { font-size: 1em !important; }
html[data-ac-font-scale] :where(h6) { font-size: 0.9em !important; }

/* -------------- */
/* Line height   */
/* -------------- */
/* Expanded selector covers Metronome div-based content rows and cells
   in addition to semantic elements, so the slider has real visual effect
   on the finance dashboard and transaction views. */
html[data-ac-line-height="110"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 1.6 !important; }
html[data-ac-line-height="120"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 1.7 !important; }
html[data-ac-line-height="130"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 1.8 !important; }
html[data-ac-line-height="140"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 1.9 !important; }
html[data-ac-line-height="150"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.0 !important; }
html[data-ac-line-height="160"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.1 !important; }
html[data-ac-line-height="170"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.2 !important; }
html[data-ac-line-height="180"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.3 !important; }
html[data-ac-line-height="190"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.4 !important; }
html[data-ac-line-height="200"] :where(
  p, li, td, dd, dt,
  .tm-row, .tm-cell, .transaction-card, .transaction-description,
  .mm-tape-cell, .summary-card, .card-body,
  .accessibility-content, .accessibility-content div,
  main div
) { line-height: 2.5 !important; }

/* ---------------- */
/* Letter spacing  */
/* ---------------- */
html[data-ac-letter-spacing="4"]  :where(p, li, span, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { letter-spacing: 0.04em !important; }
html[data-ac-letter-spacing="8"]  :where(p, li, span, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { letter-spacing: 0.08em !important; }
html[data-ac-letter-spacing="12"] :where(p, li, span, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { letter-spacing: 0.12em !important; }
html[data-ac-letter-spacing="16"] :where(p, li, span, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { letter-spacing: 0.16em !important; }
html[data-ac-letter-spacing="20"] :where(p, li, span, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { letter-spacing: 0.20em !important; }

/* --------------- */
/* Word spacing   */
/* --------------- */
html[data-ac-word-spacing="10"] :where(p, li, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { word-spacing: 0.10em !important; }
html[data-ac-word-spacing="20"] :where(p, li, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { word-spacing: 0.20em !important; }
html[data-ac-word-spacing="30"] :where(p, li, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { word-spacing: 0.30em !important; }
html[data-ac-word-spacing="40"] :where(p, li, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { word-spacing: 0.40em !important; }
html[data-ac-word-spacing="50"] :where(p, li, td, th, .tm-row, .tm-cell, .transaction-card, .mm-tape-cell, main div) { word-spacing: 0.50em !important; }

/* ------------------- */
/* Paragraph spacing  */
/* ------------------- */
html[data-ac-paragraph="4"]  :where(p, .transaction-description, .accessibility-section p, main p) { margin-block: 0.4em !important; }
html[data-ac-paragraph="8"]  :where(p, .transaction-description, .accessibility-section p, main p) { margin-block: 0.8em !important; }
html[data-ac-paragraph="12"] :where(p, .transaction-description, .accessibility-section p, main p) { margin-block: 1.2em !important; }
html[data-ac-paragraph="16"] :where(p, .transaction-description, .accessibility-section p, main p) { margin-block: 1.6em !important; }
html[data-ac-paragraph="20"] :where(p, .transaction-description, .accessibility-section p, main p) { margin-block: 2.0em !important; }

/* ---------- */
/* Contrast  */
/* ---------- */
html[data-ac-contrast="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
html[data-ac-contrast="dark"] :where(a) { color: #93c5fd !important; }
html[data-ac-contrast="dark"] :where(
  .card, .modal-content, .txn-modal-content,
  .summary-card, .mm-tape, .mm-tape-cell,
  .delete-modal-content, .filter-panel,
  .finance-dashboard, .accessibility-page,
  .tm-page, .transaction-card, .tm-header, .tm-row,
  .transaction-view-container, .recurring-view-container,
  .aurora-card
) {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html[data-ac-contrast="light"] body {
  background: #fefce8 !important;
  color: #1a1a1a !important;
}
html[data-ac-contrast="light"] :where(a) { color: #075985 !important; }
html[data-ac-contrast="light"] :where(
  .card, .modal-content, .txn-modal-content,
  .summary-card, .mm-tape, .mm-tape-cell,
  .delete-modal-content, .filter-panel,
  .finance-dashboard, .accessibility-page,
  .tm-page, .transaction-card, .tm-header, .tm-row,
  .transaction-view-container, .recurring-view-container,
  .aurora-card
) {
  background: #fefce8 !important;
  color: #1a1a1a !important;
}

html[data-ac-contrast="high"] body {
  background: #000 !important;
  color: #fff !important;
}
html[data-ac-contrast="high"] :where(a) { color: #ffff00 !important; }
html[data-ac-contrast="high"] :where(button, [role="button"], input, select, textarea) {
  border: 2px solid #fff !important;
  background: #000 !important;
  color: #fff !important;
}
html[data-ac-contrast="high"] :where(
  .card, .modal-content, .txn-modal-content,
  .summary-card, .mm-tape, .mm-tape-cell,
  .delete-modal-content, .filter-panel,
  .finance-dashboard, .accessibility-page,
  .tm-page, .transaction-card, .tm-header, .tm-row,
  .transaction-view-container, .recurring-view-container,
  .aurora-card
) {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* --------- */
/* Borders  */
/* --------- */
html[data-ac-borders="on"] :where(button, [role="button"], input, select, textarea) {
  border: 2px solid var(--ac-border-color) !important; /* overpower page hairline */
}

/* ------- */
/* Motion */
/* ------- */
html[data-ac-motion="reduced"] *,
html[data-ac-motion="reduced"] *::before,
html[data-ac-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;              /* neutralize inline JS stagger delays */
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;             /* same reason, transition side */
  scroll-behavior: auto !important;
}

/* ------ */
/* Focus */
/* ------ */
html[data-ac-focus="enhanced"] :focus-visible {
  outline: 3px solid var(--ac-focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--ac-focus-halo) !important;
}

/* ----- */
/* Links */
/* ----- */
html[data-ac-links="highlight"] a:not(.ac-skip-underline) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ------------ */
/* Reading mode */
/* ------------ */
html[data-ac-reading="on"] body > :not(main):not(.accesscore-drawer):not(.accesscore-fab):not(script):not(style) {
  opacity: 0.35;
}
html[data-ac-reading="on"] main { background-image: none; }

/* ------------- */
/* Readable font */
/* ------------- */
html[data-ac-font="readable"] body,
html[data-ac-font="readable"] :where(p, li, td, th, input, textarea, button, select) {
  /* High-legibility stack: Tahoma (Windows, excellent Hebrew glyphs), Verdana
     (designed for on-screen legibility), Arial Hebrew (macOS), then platform
     system-ui fallback. This is intentionally visually distinct from the
     app's default 'Assistant' so users toggling the control get an obvious
     change, not a placebo. No "cure dyslexia" claim is made — just legibility. */
  font-family: 'Tahoma', 'Verdana', 'Arial Hebrew', 'Segoe UI', system-ui, sans-serif !important;
}