/* =========================================================================
   Merima Pašalić — EMDR psihoterapija · components and layout

   Consumes tokens only. No literal colour, size, or spacing value below this
   line — `java tools/checks.java` asserts it. The exemptions are rule widths
   (0, 1px, 2px), the two radii, and the print block, none of which are spacing
   or colour.

   ---------------------------------------------------------------------------
   COMPONENT MODEL — semantic HTML, named composition elements, zero JavaScript
   ---------------------------------------------------------------------------
   Two rules decide what a thing is. Both exist to protect semantics, which is
   what search and answer engines actually read, and what assistive technology
   depends on.

   1. NATIVE ELEMENT whenever the thing carries a landmark, a role, or an
      interaction. <header>, <nav>, <footer>, <article>, <ol>, <dl>, <figure>,
      <details>/<summary>, <label>/<input> — all native, hooked with data-mp-*.
      A <mp-button> would have no role, no keyboard behaviour and no accessible
      name; a <mp-faq> would lose the disclosure semantics that <details> gives
      free. So those names survive only as comments.

   2. <mp-*> ELEMENT for pure composition blocks — the ones that group and frame
      content without claiming to be anything. There are four: mp-wordmark,
      mp-split, mp-panel, mp-answer.

   NONE of them carries a shadow root, and that is a decision rather than an
   omission. A declarative shadow root earns its cost only where it removes
   presentational markup from the light DOM. Here every such case — the
   wordmark's divider, the FAQ's cross, the list markers, the metadata
   separators — is already handled by a pseudo-element, which removes the same
   markup for nothing and keeps all text in the light DOM by construction. A
   template would be ceremony, and it would also mean shipping bytes twice on a
   site whose reader may be on a phone.

   The component vocabulary repeats across ~50 pages through build-time partials
   (`tools/build.java`, `layouts/`), not through runtime composition. On a static
   content site that is strictly better: no parsing, no upgrade step, smaller
   HTML, and nothing that can fail with script disabled.

   Every <mp-*> element gets an explicit `display` in the declared block below —
   custom elements are inline by default, and a missing rule would ship a
   half-laid-out page with no error anywhere.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Declared once, up front, so a new element cannot ship without its display. */
mp-wordmark,
mp-split,
mp-panel,
mp-answer {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-operating);
  font-size: var(--size-small);
  line-height: var(--leading-small);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip link. Visible only on focus, and it lands on the page's own ground. */
[data-mp-skip] {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius-control);
  font-size: var(--size-interface);
  font-weight: var(--weight-interface);
  transform: translateY(-200%);
}
[data-mp-skip]:focus {
  transform: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------
   GROUNDS AND CONTAINER
   A ground is set with data-ground on the <section>; tokens.css remaps the
   colour tokens and every component below reads them, so the same markup
   renders correctly on page, raised, or ink without a single override here.
   ------------------------------------------------------------------------- */

[data-ground] {
  background: var(--page);
  color: var(--ink);
}
/* The alternating band and the ink band both need to be readable as a change of
   ground, so each is bounded by the one rule weight this site has. */
[data-ground="raised"] {
  border-block: var(--border) solid var(--line);
}

[data-mp-container] {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

[data-mp-section] {
  padding-block: var(--section-y);
}

/* A section whose bottom boundary is the NEXT section's rule. Without this, two adjacent
   page-ground sections stack 76px of bottom padding on 76px of top padding and put ~150px
   between two blocks the design separates by 72. The rule sits flush at the top of its own
   section's content, so that section's top padding IS the "44px above" of README §3.6 and
   --rule-below is the 26 beneath it. */
[data-mp-section="open"] {
  padding-block: var(--section-y) 0;
}

/* The bar is sticky, so an in-page anchor would land its heading underneath it.
   ~69px of bar plus a breath. */
[id] {
  scroll-margin-top: calc(var(--target-min) + var(--space-6));
}

/* A row of actions: primary then secondary, wrapping on narrow screens. */
[data-mp-actions] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* Plain vertical space between two blocks in a column. Space only — no rule. Keeping
   this separate from [data-mp-trust] below matters: a rule on this site means "section
   break", so using the ruled variant as a generic spacer draws structure that is not
   there, and next to a bordered block it makes two rules, which is a box. */
[data-mp-gap] {
  margin-top: var(--space-7);
}

/* The hero's trust strip: interface size, hairline separators, one rule ABOVE it.
   Credibility from specificity — a qualification, an accreditation, two languages.
   This is the ONLY place the ruled variant is used. */
[data-mp-trust] {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--line);
}

/* A term list with rules between: "what EMDR is not", the glossary, spec rows.
   Rules between, never boxes — two rules between two blocks would be a box. */
[data-mp-terms] {
  margin: 0;
  border-bottom: var(--border) solid var(--line);
}
[data-mp-terms] > div {
  padding-block: var(--space-4);
  border-top: var(--border) solid var(--line);
}
[data-mp-terms] dt {
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: var(--leading-subhead);
  color: var(--ink);
  margin-bottom: var(--space-1);
}
[data-mp-terms] dd {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   THE MOTIF — the 1px hairline, doing its six jobs

   1 section break · 2 list marker · 3 photo frame · 4 caption tie
   5 pull quote · 6 inline separator

   Never a second weight, never dashed except as a genuinely empty placeholder,
   never in the accent — rules are structure, clay is action — and never two
   between two blocks, because that is a box and this site has no boxes.
   ------------------------------------------------------------------------- */

/* 1 — section break. A full-measure rule above the eyebrow: 44px above, 26px
   below, stated in README §3.6. Applied as padding on the section header so the
   rule belongs to the section it opens rather than to the one it closes. */
[data-mp-rule] {
  border-top: var(--border) solid var(--line);
  padding-top: var(--rule-below);
}
/* A section that already carries a ground boundary must not ALSO carry a rule:
   the boundary is the separation, and a rule beside it makes two rules between
   two blocks, which is a box, and this site has no boxes. Sections on the page
   ground carry no data-ground at all, so they keep their rule. */
[data-ground] [data-mp-rule] {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* 2 — list marker. A 14x1px rule, not a bullet, offset to sit at the cap-middle
   of the first line. list-style is dropped rather than restyled: ::marker cannot
   be given a width, so the rule is drawn as ::before on a padded item. */
[data-mp-marker-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
[data-mp-marker-list] > li {
  position: relative;
  padding-left: var(--space-6);
}
[data-mp-marker-list] > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;               /* cap-middle of the first line, per README §3.7 */
  width: var(--space-4);    /* 16px — the design's 14px on the ten-step scale */
  height: 1px;
  background: var(--hairline);
}

/* 3 + 4 — photo frame and caption tie. One rule at 4px radius, never a shadow;
   a rule above the caption ties it to the image it belongs to. */
[data-mp-figure] {
  margin: 0;
}
[data-mp-figure] > img,
[data-mp-figure] [data-mp-slot] {
  display: block;
  width: 100%;
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--raised);
}
[data-mp-figure] > figcaption {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border) solid var(--line);
  color: var(--muted);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
}

/* An empty image slot is the correct state until a real photograph exists —
   README §9. No stock, no AI-generated imagery: three of the four images stop
   working the moment they are somebody else's, and the site was designed to
   read with zero photography, which is why this palette was chosen over the
   near-monochrome alternative.

   Dashed is the one licensed exception to the solid-rule policy, precisely
   because it reads as "not yet filled" rather than as structure. Heights are
   named variants rather than an inline custom property: style-src 'self'
   forbids the style attribute, and a slot with no height collapses silently. */
[data-mp-slot] {
  border-style: dashed !important;
  border-color: var(--hairline) !important;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  color: var(--muted);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  text-align: center;
}
[data-mp-slot="portrait"] { min-height: var(--slot-portrait); }
[data-mp-slot="room"]     { min-height: var(--slot-room); }
[data-mp-slot="wide"]     { min-height: var(--slot-wide); }

/* An unconfirmed value from content.config, rendered as the design's draft so the
   page still composes and reads. Marked, never coloured — nothing on this site is
   allowed to look like a warning, and this must not be the exception. The dashed
   underline is the same "not yet filled" signal as the empty image slot. */
[data-mp-todo] {
  text-decoration: underline dashed var(--hairline);
  text-underline-offset: 0.22em;
}

/* 5 — pull quote. The only place the ink rule is used instead of the hairline. */
[data-mp-quote] {
  margin: var(--space-7) 0 0;
  padding-left: var(--space-5);
  border-left: var(--border) solid var(--ink);
  max-width: var(--measure);
  font-family: var(--font-reading);
  font-size: var(--size-subhead);
  line-height: 1.45;
  color: var(--ink);
}

/* 6 — inline separator. The vertical rule from the wordmark, reused for
   metadata: "50 minuta │ 80 KM │ uživo ili online". Drawn between items rather
   than marked up, so the content stays a plain list. */
[data-mp-meta] {
  /* Declared, not inherited: this sits inside a <dt> that is deliberately
     Newsreader, and metadata is an operating-band element. */
  font-family: var(--font-operating);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
}
[data-mp-meta] > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
[data-mp-meta] > li + li::before {
  content: "";
  width: 1px;
  height: 0.9em;
  background: var(--hairline);
  flex: none;
}

/* -------------------------------------------------------------------------
   THE WORDMARK
   Young Serif appears here and in the favicon, nowhere else. The divider is the
   motif's origin: 1px, hairline, drawn as a pseudo-element so the light DOM
   carries only the two pieces of text.
   ------------------------------------------------------------------------- */

mp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}
[data-mp-wordmark-name] {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--wordmark-size, var(--wordmark));   /* 19px in the header */
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  white-space: nowrap;
  position: relative;
}
[data-mp-wordmark-name]::after {
  content: "";
  position: absolute;
  right: calc(var(--space-3) * -1 - 0.5px);
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 1.16em;
  background: var(--hairline);
}
[data-mp-wordmark-descriptor] {
  font-family: var(--font-operating);
  font-weight: var(--weight-label);
  font-size: var(--descriptor-size, var(--wordmark-desc));  /* 7.5px in the header */
  letter-spacing: var(--tracking-descriptor);
  text-transform: uppercase;
  line-height: 1.7;
  opacity: 0.72;
  padding-left: var(--tracking-descriptor);
  white-space: nowrap;
}
/* Below the minimum the descriptor stops being readable; the footer and any
   small placement use the 15.5px / 6.5px pair rather than scaling freely. */
[data-mp-wordmark="small"] {
  --wordmark-size: var(--wordmark-sm);
  --descriptor-size: var(--wordmark-desc-sm);
}

/* -------------------------------------------------------------------------
   TYPOGRAPHY — two bands. If you read it, Newsreader. If you operate it,
   Public Sans. Reading sizes are never used for interface and interface sizes
   are never used for reading; that split IS the discipline.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

[data-mp-display], h1 {
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 15em;
}
[data-mp-heading], h2 {
  font-size: var(--size-heading);
  line-height: var(--leading-heading);
}
[data-mp-card-heading], h3 {
  font-size: var(--size-card-heading);
  line-height: var(--leading-card-heading);
}
[data-mp-subhead], h4 {
  font-size: var(--size-subhead);
  line-height: var(--leading-subhead);
}

/* The eyebrow. accent-text, never accent-fill: 12px in the fill colour lands at
   2.8:1. It is a <p> rather than a heading because it labels the section it sits
   in and must not enter the heading outline. */
[data-mp-eyebrow] {
  margin: 0 0 var(--space-3);
  font-family: var(--font-operating);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
/* On a card or a panel the same label is structural rather than navigational, so
   it recedes to muted — the accent is reserved for things you can act on. */
[data-mp-eyebrow="muted"] {
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   04 PROSE — 18px / 1.65 / 34em, on every breakpoint including mobile.
   Below 18px and above ~70 characters a line, comprehension drops for exactly
   the readers this site is for. This is a clinical accessibility requirement.
   ------------------------------------------------------------------------- */

[data-mp-prose] {
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink);
  max-width: var(--measure);
}
[data-mp-prose] > * {
  max-width: var(--measure);
}
[data-mp-prose] > * + * {
  margin-top: var(--space-4);
}
[data-mp-prose] > h2,
[data-mp-prose] > h3 {
  margin-top: var(--space-7);
}
[data-mp-prose] p {
  margin: 0;
}
[data-mp-prose] em {
  font-style: italic;   /* a real cursive italic — the face is declared, not synthesised */
}
[data-mp-prose] strong {
  font-weight: 500;
}

/* The lead sits under a heading in muted, still at reading size. */
[data-mp-lead] {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--muted);
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   LINKS AND BUTTONS
   Colour is never the only signal: every inline link carries an underline.
   ------------------------------------------------------------------------- */

a {
  color: var(--accent-text);
}

[data-mp-prose] a,
[data-mp-inline-link] {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration);
}
[data-mp-prose] a:hover,
[data-mp-inline-link]:hover {
  color: var(--ink);
}

/* A link that is BOTH a 44px hit target AND underlined must carry the underline
   on the inner <span>, never on the <a>. border-bottom on a 44px inline-flex box
   draws at the bottom of the BOX while the text is vertically centred, leaving a
   hairline floating ~15px under the words — which on this site reads as
   structure, because a floating 1px rule is exactly what the motif means. */
[data-mp-link] {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--accent-text);
  text-decoration: none;
  font-size: var(--size-interface);
  font-weight: var(--weight-label);
  transition: color var(--duration);
}
[data-mp-link] > span {
  border-bottom: var(--border) solid currentColor;
  padding-bottom: 2px;
}
[data-mp-link]:hover {
  color: var(--ink);
}
/* The reading-size variant, for a link that closes a block of prose. */
[data-mp-link="reading"] {
  font-family: var(--font-reading);
  font-size: var(--size-body);
  font-weight: var(--weight-reading);
}

[data-mp-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-6);
  border: var(--border) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-operating);
  font-size: var(--size-small);
  font-weight: var(--weight-label);
  line-height: var(--leading-interface);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration), color var(--duration),
              border-color var(--duration);
}
[data-mp-button="primary"] {
  background: var(--accent-fill);
  color: var(--on-accent);
}
[data-mp-button="primary"]:hover {
  /* Darkens on light, lightens on ink — colour-mix keeps one rule for both
     grounds instead of a second hardcoded hover token per ground. */
  background: color-mix(in oklab, var(--accent-fill) 88%, var(--ink));
}
[data-mp-button="secondary"] {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
[data-mp-button="secondary"]:hover {
  background: var(--raised);
}
/* On the ink ground the secondary outline starts at hairline and resolves to
   full ink on hover; a full-strength outline there competes with the primary. */
[data-ground="ink"] [data-mp-button="secondary"] {
  border-color: var(--hairline);
}
[data-ground="ink"] [data-mp-button="secondary"]:hover {
  background: transparent;
  border-color: var(--ink);
}

/* -------------------------------------------------------------------------
   01 HEADER — desktop, two tiers

   Tier 0: availability strip, not sticky. The only place a date appears in the
           chrome, and the cheapest trust signal on the site.
   Tier 1: the bar — wordmark, language, one action. STICKY, ~69px.
   Tier 2: the nav row, NOT sticky, scrolls away.

   The three groups deliberately do not share one flex row: they need ~818px and
   wrap badly below ~950px, which is inside the range real laptops use.
   ------------------------------------------------------------------------- */

[data-mp-availability] {
  background: var(--raised);
  border-bottom: var(--border) solid var(--line);
  padding-block: var(--space-2);
  color: var(--muted);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
}
[data-mp-availability] > [data-mp-container] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

[data-mp-header] {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
}
[data-mp-header] > [data-mp-container] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-3);
}
/* :not([data-mp-button]) is load-bearing, not tidiness. A container link rule is
   (0,1,1) and outranks [data-mp-button="primary"] at (0,1,0), so without it the CTA
   inside the header inherits body ink on an accent ground. On the light theme that
   still measures 5.0:1 and looks correct; on dark it lands at 1.96:1. A bug that is
   invisible in one theme and unreadable in the other is why the browser pass exists. */
[data-mp-header] a:not([data-mp-button]) {
  text-decoration: none;
  color: var(--ink);
}

/* The wordmark is a link wherever it appears — header, full footer, slim footer — so it
   carries the same 44px floor as every other control. Scoped to the link CONTAINING a
   wordmark rather than to a place, or the next placement misses it again. */
a:has(mp-wordmark) {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
[data-mp-header-actions] {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: none;
}

/* The language switch is a word, never a flag: a flag is a country rather than a
   language, and in this country a flag is never neutral. */
[data-mp-lang] {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  letter-spacing: 0.12em;
  color: var(--ink);
  transition: color var(--duration);
}
[data-mp-lang] > span {
  border-bottom: var(--border) solid var(--hairline);
  padding-bottom: 2px;
}
[data-mp-lang]:hover {
  color: var(--accent-text);
}

[data-mp-nav] {
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
}
[data-mp-nav] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
}
[data-mp-nav] a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--size-interface);
  font-weight: var(--weight-interface);
  transition: color var(--duration);
}
[data-mp-nav] a:hover {
  color: var(--ink);
}
/* The current page is marked by a rule as well as a colour — colour alone is
   never a signal here. */
[data-mp-nav] a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}

/* -------------------------------------------------------------------------
   02 HEADER — mobile

   A <details> sheet, which gives the disclosure semantics, the keyboard
   behaviour and the expanded state for free and needs no script. Every row is
   52px and the primary action sits at the BOTTOM of the sheet, inside thumb
   reach, not at the top where it reads as a banner.

   The desktop nav row and the mobile sheet are separate elements rather than one
   restyled list, because the design gives them different compositions — the
   sheet also carries the action and the language switch. Only one is ever in the
   accessibility tree; the other is display:none.
   ------------------------------------------------------------------------- */

[data-mp-menu] {
  display: block;
}
[data-mp-menu] > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  margin-right: calc(var(--space-3) * -1);
  cursor: pointer;
  list-style: none;
}
[data-mp-menu] > summary::-webkit-details-marker {
  display: none;
}
/* Two 1px rules — the motif again, not a hamburger glyph. */
[data-mp-menu-icon] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: var(--space-5);
}
[data-mp-menu-icon]::before,
[data-mp-menu-icon]::after {
  content: "";
  height: 1px;
  background: var(--ink);
}
[data-mp-menu-panel] {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
  max-height: calc(100dvh - var(--target-min) * 2);
  overflow-y: auto;
}
[data-mp-menu-panel] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-mp-menu-panel] li + li {
  border-top: var(--border) solid var(--line);
}
/* Scoped to the nav links, NOT to every <a> in the panel. A bare
   `[data-mp-menu-panel] a` rule outranks [data-mp-button] on specificity, which
   silently rendered the sheet's primary action and its language switch in the
   reading face — an interface control set in a reading size, which is the one
   line the two type bands are not allowed to cross. */
[data-mp-menu-panel] nav a {
  display: flex;
  align-items: center;
  min-height: var(--menu-row);
  padding-inline: var(--container-pad);
  font-family: var(--font-reading);
  font-size: var(--size-body);
  color: var(--ink);
  text-decoration: none;
}
[data-mp-menu-foot] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--container-pad);
  border-top: var(--border) solid var(--line);
}
[data-mp-menu-foot] [data-mp-lang] {
  justify-content: center;
}

/* One breakpoint decides which header is real. 60rem = 960px, just above the
   ~950px where the desktop bar's three groups begin to wrap. */
@media (max-width: 59.999rem) {
  /* On mobile the bar carries the wordmark and the hamburger only; the language
     switch and the action move into the sheet, where the action sits in thumb
     reach. Both survive as the sheet's copies, so nothing is lost. */
  [data-mp-nav],
  [data-mp-header-cta],
  [data-mp-header-actions] > [data-mp-lang] {
    display: none;
  }
}
@media (min-width: 60rem) {
  [data-mp-menu] {
    display: none;
  }
}

/* Breadcrumb. Reuses the inline separator — the same vertical hairline from the
   wordmark — rather than introducing a chevron, which would be a second device. */
[data-mp-breadcrumb] {
  margin-bottom: var(--space-6);
}
[data-mp-breadcrumb] ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  color: var(--muted);
}
[data-mp-breadcrumb] li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
[data-mp-breadcrumb] li + li::before {
  content: "";
  width: 1px;
  height: 0.9em;
  background: var(--hairline);
  flex: none;
}
[data-mp-breadcrumb] a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration);
}
[data-mp-breadcrumb] a:hover {
  color: var(--ink);
}
[data-mp-breadcrumb] [aria-current="page"] {
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   03 SECTION HEADER — rule, eyebrow, h2, optional lead
   ------------------------------------------------------------------------- */

[data-mp-section-head] {
  margin-bottom: var(--space-7);
}
[data-mp-section-head] > h2 {
  margin-bottom: var(--space-3);
}
[data-mp-section-head] > [data-mp-lead]:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */

mp-split {
  display: grid;
  gap: var(--gap-split);
  align-items: start;
}
mp-split[data-cols="hero"]   { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap-hero); }
mp-split[data-cols="even"]   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
mp-split[data-cols="aside"]  { grid-template-columns: minmax(0, var(--col-aside)) minmax(0, 1fr); }
mp-split[data-cols="figure"] { grid-template-columns: minmax(0, var(--col-aside)) minmax(0, 1fr); }

@media (max-width: 55rem) {
  mp-split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-8);
  }
}

/* A framed surface: cards, the "what EMDR is not" panel, the referral block. */
mp-panel {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
mp-panel[data-tone="raised"] {
  background: var(--raised);
}

/* -------------------------------------------------------------------------
   05 ANSWER BOX
   The single highest-leverage component for answer engines: the page's question
   as the heading, then a self-contained 40–60 word answer that can be lifted
   whole. Detail follows underneath, never above, and the answer carries no
   links inside it — a lifted paragraph with a dangling "read more" is worse than
   no lift at all.
   ------------------------------------------------------------------------- */

mp-answer {
  background: var(--raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}
mp-answer > p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   06 STEP SEQUENCE — 48px / 1fr / 150px, rules between, never boxes.
   Numerals are Newsreader in accent-text. An <ol> so the order is real.
   ------------------------------------------------------------------------- */

[data-mp-steps] {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--border) solid var(--line);
}
[data-mp-steps] > li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) var(--step-aside);
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-5);
  border-top: var(--border) solid var(--line);
}
[data-mp-step-n] {
  font-family: var(--font-reading);
  font-size: var(--size-body);
  color: var(--accent-text);
}
[data-mp-steps] h3 {
  font-size: var(--size-subhead);
  line-height: var(--leading-subhead);
  margin-bottom: var(--space-1);
}
[data-mp-steps] p {
  margin: 0;
  color: var(--muted);
  font-size: var(--size-small);
  line-height: var(--leading-small);
  max-width: var(--measure-step);
}
[data-mp-step-aside] {
  font-family: var(--font-operating);
  text-align: right;
  color: var(--muted);
  font-size: var(--size-interface);
}
@media (max-width: 40rem) {
  [data-mp-steps] > li {
    grid-template-columns: var(--space-7) minmax(0, 1fr);
  }
  [data-mp-step-aside] {
  font-family: var(--font-operating);
    grid-column: 2;
    text-align: left;
  }
}

/* -------------------------------------------------------------------------
   07 FEES — prices in the open, no packages. A <dl>: each row is a term and its
   price, which is what a definition list is for and what a screen reader will
   announce as a pair.
   ------------------------------------------------------------------------- */

[data-mp-fees] {
  margin: 0;
  border-bottom: var(--border) solid var(--line);
}
[data-mp-fee] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-top: var(--border) solid var(--line);
}
[data-mp-fee] dt {
  font-family: var(--font-reading);
  font-size: var(--size-subhead);
  line-height: var(--leading-subhead);
  color: var(--ink);
}
[data-mp-fee] dt [data-mp-meta] {
  margin-top: var(--space-1);
}
[data-mp-fee] dd {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-label);
  color: var(--ink);
  white-space: nowrap;
}
[data-mp-fee] dd[data-free] {
  color: var(--accent-text);
}

/* -------------------------------------------------------------------------
   08 FAQ
   <details>/<summary>: the disclosure role, keyboard operation and the expanded
   state come free and need no script, and the answer STAYS IN THE DOM when
   collapsed so crawlers and answer engines still read it. That last property is
   why this is not a JavaScript accordion.

   The indicator is a rule that becomes a cross, never a chevron: ::before is the
   horizontal rule, ::after the vertical one, and only the vertical arm is
   removed on open.
   ------------------------------------------------------------------------- */

[data-mp-faq] {
  border-bottom: var(--border) solid var(--line);
}

/* The static variant: same rules and rhythm, no disclosure. Used where the design shows
   the answers already visible. */
[data-mp-faq="static"] > div {
  padding-block: var(--space-4);
  border-top: var(--border) solid var(--line);
}
[data-mp-faq="static"] h3 {
  font-size: var(--size-subhead);
  line-height: 1.35;
  margin-bottom: var(--space-2);
}
[data-mp-faq] > details {
  border-top: var(--border) solid var(--line);
}
[data-mp-faq] summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  min-height: var(--target-min);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-reading);
  font-size: var(--size-subhead);
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--duration);
}
[data-mp-faq] summary::-webkit-details-marker {
  display: none;
}
[data-mp-faq] summary:hover {
  color: var(--accent-text);
}
[data-mp-faq-mark] {
  position: relative;
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  align-self: center;
}
[data-mp-faq-mark]::before,
[data-mp-faq-mark]::after {
  content: "";
  position: absolute;
  background: currentColor;
}
[data-mp-faq-mark]::before {           /* the rule */
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
[data-mp-faq-mark]::after {            /* the arm that makes it a cross */
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transition: opacity var(--duration);
}
[data-mp-faq] details[open] summary {
  color: var(--accent-text);
}
[data-mp-faq] details[open] [data-mp-faq-mark]::after {
  opacity: 0;
}
[data-mp-faq-answer] {
  margin: 0;
  padding-bottom: var(--space-4);
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: 1.62;
  color: var(--muted);
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   09 CONDITION CARDS
   Each card is also a landing page — this is the SEO cluster. Titles describe
   experiences, never diagnoses, so someone without a label still recognises
   themselves.

   DO NOT LOWER THE 360px FLOOR. There are exactly four cards, and the floor is
   what makes three tracks impossible anywhere inside the container's width
   range, so the grid is always a clean 2x2 and collapses to 1 on phones. A lower
   floor — 230px, say — produces three tracks around 830px and ORPHANS THE FOURTH
   CARD. Lowering it does not fix that; it only moves the orphan to a different
   width.
   ------------------------------------------------------------------------- */

[data-mp-cards] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-floor)), 1fr));
  gap: var(--gap-cards);
}
[data-mp-card] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
[data-mp-card] h3 {
  font-size: var(--size-subhead);
  line-height: var(--leading-subhead);
  margin-bottom: var(--space-2);
}
[data-mp-card] > p {
  margin: 0 0 var(--space-4);
  flex: 1;
  color: var(--muted);
  font-size: var(--size-small);
  line-height: var(--leading-small);
}
[data-mp-card] [data-mp-link] {
  align-self: flex-start;
}

/* -------------------------------------------------------------------------
   10 ARTICLE ROW
   A list, not a grid of thumbnails — there are no thumbnails, and inventing them
   would mean buying stock. Titles are written as questions where the piece
   answers one.
   ------------------------------------------------------------------------- */

[data-mp-articles] {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--border) solid var(--line);
}
[data-mp-articles] > li {
  border-top: var(--border) solid var(--line);
}
[data-mp-article] {
  display: block;
  padding-block: var(--space-5);
}
[data-mp-article] [data-mp-meta] {
  font-size: var(--size-label);
  margin-bottom: var(--space-2);
}
[data-mp-article] :is(h2, h3) {
  font-size: var(--size-subhead);
  line-height: 1.3;
  margin-bottom: 0;
}
/* The title is the row's primary link, so it carries the 44px floor like any other
   control. The padding replaces the heading's margin rather than adding to it, so the
   gap to the description below is unchanged and the row grows by one step. */
[data-mp-article] :is(h2, h3) a {
  /* A floor rather than tuned padding: 21px at 1.3 plus two steps lands at 43px, and a
     value that depends on the line-height arithmetic breaks the next time a size moves. */
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding-block: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--duration);
}
[data-mp-article] :is(h2, h3) a:hover {
  color: var(--accent-text);
}
[data-mp-article] > p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   11 REFERRAL-OUT
   The most persuasive block on the site. Naming what she does not do is the
   strongest available signal that the rest is honest, and it keeps the wrong
   enquiries out of her inbox.
   ------------------------------------------------------------------------- */

[data-mp-referral] {
  background: var(--raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-7);
}
[data-mp-referral] h2 {
  font-size: var(--size-card-heading);
  line-height: var(--leading-card-heading);
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------
   12 CALLOUTS — two only, and neither is red, and neither has an icon.

   The crisis note is a calm raised surface with ordinary ink text. A red alert
   bar on a trauma page is activating, and it is the one thing you cannot take
   back. It carries no border colour and no exclamation mark either.
   ------------------------------------------------------------------------- */

[data-mp-crisis] {
  background: var(--raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
}
[data-mp-crisis] > p {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink);
}

[data-mp-aside] {
  border-left: var(--border) solid var(--hairline);
  padding-left: var(--space-5);
}
[data-mp-aside] > p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   13 CONTACT FORM
   Labels above the field, always — placeholder text is never a label, because it
   disappears the moment someone starts typing, which is exactly when they need
   it. No asterisks: optional fields are marked instead, so the page never opens
   by listing obligations.

   Errors are described in words next to the field. Colour is never the only
   signal, which is why the message text is present regardless of the border.
   ------------------------------------------------------------------------- */

[data-mp-form] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure-form);
}
[data-mp-field] {
  display: flex;
  flex-direction: column;
}
/* A fieldset is the right element for a radio group — it is what gives the group
   its accessible name — but its UA border and padding are the one box this site
   would otherwise have. */
fieldset[data-mp-field] {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
[data-mp-field] legend,
[data-mp-field] label {
  display: block;
  padding: 0;
  font-size: var(--size-interface);
  font-weight: var(--weight-label);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
/* Inside a choice row the labels are the visible controls, so they must not inherit
   the block-label treatment above. */
[data-mp-choice] label {
  margin-bottom: 0;
}
[data-mp-optional] {
  font-family: var(--font-operating);
  font-weight: var(--weight-small);
  color: var(--muted);
}
[data-mp-field] input,
[data-mp-field] textarea,
[data-mp-field] select {
  font-family: var(--font-operating);
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  min-height: var(--target-min);
  transition: border-color var(--duration);
}
[data-mp-field] textarea {
  min-height: calc(var(--target-min) * 2);
  resize: vertical;
}
[data-mp-field] input:focus,
[data-mp-field] textarea:focus,
[data-mp-field] select:focus {
  border-color: var(--ink);
}
[data-mp-help] {
  font-family: var(--font-operating);
  margin: var(--space-2) 0 0;
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  color: var(--muted);
}

/* A radio set styled as a row of choices. The input stays a real radio — clipped
   rather than display:none, so it keeps focus and arrow-key operation — and the
   visible label redraws the focus ring. */
[data-mp-choice] {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
[data-mp-choice] input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-mp-choice] label {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  margin: 0;
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-weight: var(--weight-small);
  font-size: var(--size-small);
  cursor: pointer;
  transition: border-color var(--duration), color var(--duration),
              background-color var(--duration);
}
[data-mp-choice] input:checked + label {
  border-color: var(--ink);
  background: var(--raised);
  color: var(--ink);
}
[data-mp-choice] input:focus-visible + label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The honeypot. Hidden from people, reachable by a bot filling every input.
   Not display:none — some bots skip those — and aria-hidden plus tabindex="-1"
   in the markup keeps it out of the accessibility tree and the tab order. */
[data-mp-honeypot] {
  position: absolute;
  left: var(--offscreen);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The response-time promise sits NEXT TO the submit button, not in the
   confirmation, because next to the button is where the anxiety is. */
[data-mp-submit-row] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
[data-mp-submit-row] p {
  margin: 0;
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  color: var(--muted);
}
[data-mp-form-note] {
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--line);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   14 TOOL SHELL — non-diagnostic tools only.
   No symptom quiz, no screener, no score of any kind: those are validated
   clinical instruments, not licensed for self-serve use, and they hand someone a
   number with nobody there afterwards.
   ------------------------------------------------------------------------- */

[data-mp-tool] {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-7);
}
[data-mp-tool] h2,
[data-mp-tool] h3 {
  font-size: var(--size-card-heading);
  line-height: var(--leading-card-heading);
  margin-bottom: var(--space-2);
}
[data-mp-checklist] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
[data-mp-checklist] li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
[data-mp-checklist] input[type="checkbox"] {
  flex: none;
  appearance: none;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  margin-top: 0.2em;
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration), border-color var(--duration);
}
[data-mp-checklist] input[type="checkbox"]:checked {
  background: var(--accent-fill);
  border-color: var(--ink);
}
[data-mp-checklist] label {
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink);
  cursor: pointer;
}
[data-mp-tool-actions] {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* -------------------------------------------------------------------------
   15 404 AND EMPTY STATE
   No jokes and no giant "404". Someone who lands here may have been sent a link
   by a friend at a bad moment; the page's job is one click to somewhere useful.
   ------------------------------------------------------------------------- */

[data-mp-empty] {
  max-width: var(--measure);
  padding-block: var(--space-10);
}
[data-mp-empty] h1 {
  font-size: var(--size-heading);
  line-height: var(--leading-heading);
  letter-spacing: normal;
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------
   16 FOOTER
   Carries the crisis note on EVERY page, the address for local search, and the
   language link. In light mode this is the one place the ink surface is used
   full-bleed — the ground remap in tokens.css does all of the colour work.
   ------------------------------------------------------------------------- */

[data-mp-footer] {
  background: var(--page);
  color: var(--ink);
}
[data-mp-footer] a:not([data-mp-button]) {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration);
}
[data-mp-footer] a:hover {
  color: var(--ink);
}
[data-mp-footer-top] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
  /* Deliberately shorter than a section: the footer recedes, it does not open. */
  padding-top: var(--space-9);
  padding-bottom: var(--space-6);
}

/* The slim footer is one row, so it carries its own vertical space rather than the
   bottom-bar rule's. */
[data-mp-footer-slim] {
  border-top: 0;
  padding-block: var(--space-6);
  align-items: center;
}
[data-mp-footer-row] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
[data-mp-footer-row] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
[data-mp-footer-row] a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
[data-mp-footer-nav] {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
}
[data-mp-footer-nav] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--size-interface);
}
[data-mp-footer-nav] a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
[data-mp-footer-bottom] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  border-top: var(--border) solid var(--line);
  font-size: var(--size-interface);
  line-height: var(--leading-interface);
  color: var(--muted);
}
[data-mp-footer-bottom] address {
  font-style: normal;
}
[data-mp-footer-bottom] p {
  margin: 0;
  max-width: var(--measure-note);
}

/* -------------------------------------------------------------------------
   PRINT
   The one place literal values are licensed: paper has no tokens, and the tool
   sheets are meant to be printed and taken to an appointment.
   ------------------------------------------------------------------------- */

@media print {
  [data-mp-availability],
  [data-mp-header],
  [data-mp-nav],
  [data-mp-menu],
  [data-mp-skip],
  [data-mp-footer-nav] {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  [data-mp-prose],
  [data-mp-prose] > * {
    max-width: none;
  }
  a {
    color: #000;
  }
  /* A printed sheet leaves the room; a URL on it is how it gets back. */
  [data-mp-prose] a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
  [data-mp-tool],
  mp-panel,
  [data-mp-crisis] {
    border: 1px solid #999;
  }
  details {
    display: block;
  }
}
