/* Calm, readable overrides for SEN-friendly UI */
body {
  line-height: 1.6;
}
main {
  max-width: 72rem;
}
.prose-like p {
  line-height: 1.7;
}

/* Visible focus indicators for custom interactive elements (WCAG 2.4.7).
   Several rows and cards behave as links/buttons but don't get the browser
   default focus ring because the outline is reset by Tailwind preflight or
   by using non-semantic markup. Restore it for keyboard users. */
[role="link"]:focus-visible,
tr[data-href]:focus-visible,
.stage-node:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* EHCP review — inline highlight marks (issue #77).
   Colour each mark by status so parents can scan the plan at a glance, and
   give the wrapping anchor a visible focus ring for keyboard navigation. */
.mark-good {
  background: rgba(22, 163, 74, 0.25);
  color: inherit;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
}
.mark-concern {
  background: rgba(234, 179, 8, 0.3);
  color: inherit;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
}
.mark-missing {
  background: rgba(220, 38, 38, 0.25);
  color: inherit;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
}
.mark-link {
  text-decoration: none;
  color: inherit;
}
.mark-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.finding-jump:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}
/* Smooth anchor-scrolling for the scroll-linking between marks and
   findings. Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* EHCP flow chart modal scroll wrapper (issue #194).
   The full DAG is naturally wider than the modal even after
   ``useMaxWidth: false`` — Mermaid emits the SVG at its intrinsic
   pixel width. Without this rule the inner ``<pre class="mermaid">``
   stays at 100% of the wrapper (block-level default) and the SVG
   silently overflows the pre's box, getting clipped by the
   modal-box. Sizing the pre to its content makes the wrapper's
   ``overflow-auto`` see the real width and render a horizontal
   scrollbar so outcome labels are reachable.

   ``max-width: none`` is a defensive override: even with
   ``useMaxWidth: false`` some Mermaid releases still inject a
   ``max-width`` style on the SVG, which would re-clamp it to the
   wrapper width and clip everything again. */
.flowchart-scroll {
  /* Force a thin but visible scrollbar so the scroll affordance is
     obvious on touch devices that hide overlay scrollbars by default. */
  scrollbar-width: thin;
}
.flowchart-scroll > pre.mermaid {
  display: inline-block;
  vertical-align: top;
  width: max-content;
  min-width: 100%;
  margin: 0;
}
.flowchart-scroll > pre.mermaid > svg,
.flowchart-scroll svg[id^="mermaid"] {
  max-width: none !important;
  height: auto;
}

/* Inline legal-reference highlights (issue #132). Kept subtle so
   they don't dominate the email content. The hover tooltip is the
   browser-native title attribute — sufficient for v1. */
mark.legal-ref {
  background-color: oklch(95% 0.05 86);
  color: inherit;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
  cursor: help;
  border-bottom: 1px dotted currentColor;
}
mark.legal-ref-section_reference {
  background-color: oklch(94% 0.07 250);
}
mark.legal-ref-act_reference {
  background-color: oklch(95% 0.06 200);
}
mark.legal-ref-statutory_phrase {
  background-color: oklch(94% 0.05 86);
}

/* Long-form prose blocks (issue #302). The About / Participate /
   Privacy templates wrap their body in `<div class="prose ...">`,
   which is the Tailwind Typography plugin's class. The base layout
   only loads core Tailwind, so without these rules Tailwind's
   preflight strips h1..p of all default styling and the pages
   collapse to a wall of unformatted text with no headings or
   paragraph breaks. Mirror just enough of the plugin to make the
   markup readable; we deliberately skip the full plugin to keep the
   bundle small and the look consistent with the rest of daisyUI. */
.prose {
  color: inherit;
  max-width: 65ch;
}
.prose.max-w-none {
  max-width: none;
}
.prose p {
  line-height: 1.7;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose ul,
.prose ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.prose li > p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.prose a {
  color: var(--color-primary, oklch(45% 0.18 250));
  text-decoration: underline;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose strong {
  font-weight: 700;
}
.prose em {
  font-style: italic;
}
.prose blockquote {
  border-left: 4px solid currentColor;
  padding-left: 1rem;
  margin: 1rem 0;
  opacity: 0.85;
  font-style: italic;
}
.prose code {
  background-color: oklch(95% 0.01 250);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.prose hr {
  margin: 1.5rem 0;
  border-color: currentColor;
  opacity: 0.2;
}