/* EHCP process screen (#1110) — the two-column "board": the always-visible
   journey rail (left) drives the stage-detail board (right).

   Styles the markup in templates/ehcp.html plus the partials HTMX swaps into
   it, partials/_journey_rail.html (.jr-*) and partials/_stage_detail.html
   (.sd-*). Uses daisyUI semantic tokens (--color-*, --radius-*) throughout,
   so the board follows the active theme rather than hard-coding the palette.

   Loaded from ehcp.html's head_extra block, i.e. after app.css and the
   reskin, and unlayered — which is where these rules sat when they were
   inline in the page, so what wins over what is unchanged. */
/* ---- board shell ---- */
.ehcp-board { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .ehcp-board { grid-template-columns: minmax(300px, 340px) 1fr; }
  .ehcp-rail { position: sticky; top: 1rem; }
}

/* ---- accent decoration token (issue #1110) ----
   The accent chrome (progress fill, current-stage highlights, next-step
   tint, chevrons, count pills) uses SEN blue rather than the green primary,
   which stays reserved for genuine primary actions (btn-primary) and the
   green success ticks. --color-secondary is SEN blue on the senguru reskin
   and degrades to a sane bluish tone on Classic (nord). */
.jr, .sd { --sd-accent: var(--color-secondary); }

/* ---- journey rail ---- */
.jr .jr-progress { height: 6px; border-radius: 999px; background: var(--color-base-300); overflow: hidden; margin-top: 2px; }
.jr .jr-progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--sd-accent); transition: width .4s cubic-bezier(.22,1,.36,1); }
.jr .jr-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.jr .jr-divider { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .55; margin: .4rem 0 .1rem .25rem; }
{# #1328: opacity blends the divider's ink with whatever's behind it — the
   mechanism that made it fail WCAG AA (3.71:1 on --color-base-100). The
   senguru theme's dedicated --jr-divider-ink is pre-computed to clear
   4.5:1 on its own, so this override renders it at full opacity instead of
   dimming it further. Scoped to the light theme only (where the token is
   defined and the violation was measured); dark reskin and Classic keep
   the original opacity-based rule above untouched. #}
[data-theme="senguru"] .jr .jr-divider { opacity: 1; color: var(--jr-divider-ink); }
.jr .jr-row { position: relative; }
/* Continuous rail line down the dot gutter, split at the dot into an
   incoming (top) half and an outgoing (bottom) half so it spans the WHOLE
   row — unbroken past the button's own top/bottom padding and the
   substep/rewind expanders that render after the button. Coloured like the
   old per-dot connectors: done stages are green both halves; the current
   stage is green above the dot (the path to "here" is done) and grey below.
   Sits behind the dots/connectors (jr-graph is lifted above it). */
.jr .jr-row::before, .jr .jr-row::after {
  content: ""; position: absolute; left: calc(1.25rem - 1px); width: 2px;
  background: var(--color-base-300);
}
.jr .jr-row::before { top: 0; height: 1.85rem; }
.jr .jr-row::after { top: 1.85rem; bottom: 0; }
.jr .jr-row[data-state="done"]::before,
.jr .jr-row[data-state="done"]::after,
.jr .jr-row[data-state="current"]::before { background: var(--color-success); }
.jr .jr-row:first-child::before { display: none; }
.jr .jr-row:last-child::after { display: none; }
.jr .jr-item {
  display: flex; align-items: stretch; gap: .75rem; width: 100%; text-align: left;
  padding: .5rem .5rem; border-radius: var(--radius-field, 10px);
  background: transparent; border: none; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.jr .jr-item:hover { background: color-mix(in oklch, var(--color-base-200) 70%, transparent); }
.jr .jr-item.is-selected { background: color-mix(in oklch, var(--sd-accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--sd-accent); }
.jr .jr-item:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 1px; }

.jr .jr-graph { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 1.5rem; position: relative; z-index: 1; }
.jr .jr-conn { width: 2px; background: var(--color-base-300); }
.jr .jr-conn-top { height: .55rem; flex: 0 0 auto; }
.jr .jr-conn-bot { flex: 1 1 auto; min-height: .35rem; margin-top: 0; }
.jr .jr-conn.is-done { background: var(--color-success); }
.jr .jr-conn.is-hidden { visibility: hidden; }
.jr .jr-dot {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; margin: 1px 0;
}
.jr .jr-dot svg { width: .9rem; height: .9rem; }
.jr .jr-dot-done { background: var(--color-success); color: var(--color-success-content, #fff); }
.jr .jr-dot-current { background: var(--color-base-100); border: 2.5px solid var(--sd-accent); position: relative; }
.jr .jr-dot-current .jr-dot-pulse { width: .6rem; height: .6rem; border-radius: 999px; background: var(--sd-accent); }
.jr .jr-dot-current::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--sd-accent); opacity: .5; animation: jr-pulse 1.8s ease-out infinite;
}
@keyframes jr-pulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jr .jr-dot-current::after { animation: none; } }
.jr .jr-dot-future { background: var(--color-base-300); }

.jr .jr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.jr .jr-name-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.jr .jr-name { font-weight: 700; line-height: 1.2; }
.jr .jr-item[data-nothing] {}
.jr .jr-row[data-state="future"] .jr-name { opacity: .55; font-weight: 600; }
.jr .jr-here { font-weight: 700; }
.jr .jr-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem; }
.jr .jr-meta-time { opacity: .6; }
{# #1941: same opacity-blend failure #1328 fixed for the divider/appeal
   note. Future-row `.jr-name` measured 3.61:1 (#7b7c73 on the row's
   rendered #f2ede0); `.jr-meta-time` measured 4.22:1 (#707169), all
   states. Both are muted secondary text, so they reuse the existing
   --muted-ink token (#1938) rather than a new one — 5.25:1 against
   #f2ede0. Light theme only: dark and Classic were not flagged. #}
[data-theme="senguru"] .jr .jr-row[data-state="future"] .jr-name { opacity: 1; color: var(--muted-ink); }
[data-theme="senguru"] .jr .jr-meta-time { opacity: 1; color: var(--muted-ink); }
{# #1328: --jr-appeal-ink is a dedicated, darker token (defined only for
   the light senguru theme, where the AA violation was measured) so this
   legal-rights note clears WCAG AA 4.5:1; falling back to --color-warning
   keeps the dark reskin and Classic themes rendering exactly as before. #}
.jr .jr-appeal { display: inline-flex; align-items: center; gap: .2rem; color: var(--jr-appeal-ink, var(--color-warning)); }
.jr .jr-appeal svg { width: .8rem; height: .8rem; }
.jr .jr-entered { font-size: .72rem; opacity: .65; }
.jr .jr-deadline { display: flex; align-items: center; gap: .4rem; font-size: .78rem; margin-top: .15rem; }
.jr .jr-rewind { margin: .35rem 0 0 2.25rem; font-size: .78rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; background: color-mix(in oklch, var(--color-info) 12%, transparent); border-radius: 8px; padding: .3rem .5rem; }
.jr .jr-rewind-conditions { flex-basis: 100%; font-size: .72rem; opacity: .85; margin: .1rem 0 0; }
.jr .jr-substeps { margin: .25rem 0 .25rem 2.25rem; font-size: .8rem; }
.jr .jr-substeps > summary { cursor: pointer; font-size: .72rem; opacity: .7; user-select: none; }
.jr .jr-substep-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.jr .jr-substep { display: flex; align-items: baseline; gap: .4rem; width: 100%; text-align: left; padding: .3rem .45rem; border: none; background: transparent; border-radius: 8px; cursor: pointer; }
.jr .jr-substep:hover { background: color-mix(in oklch, var(--color-base-200) 70%, transparent); }
.jr .jr-substep.is-selected { box-shadow: inset 2px 0 0 var(--sd-accent); background: color-mix(in oklch, var(--sd-accent) 8%, transparent); }
.jr .jr-substep-name { font-weight: 600; }
.jr .jr-substep-dur { opacity: .55; font-size: .72rem; }
.jr .jr-foot { display: flex; align-items: center; gap: .4rem; font-size: .78rem; opacity: .7; margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--color-base-200); }
.jr .jr-foot-ic { width: .85rem; height: .85rem; color: var(--color-success); }
.jr .jr-empty { font-size: .8rem; opacity: .7; margin-top: .35rem; }

/* ---- stage detail board ---- */
.sd .sd-head { display: flex; flex-direction: column; gap: .4rem; }
.sd .sd-summary { line-height: 1.5; }
.sd .sd-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sd .sd-tag-current::before { content: "●"; font-size: .6em; margin-right: .3rem; vertical-align: middle; }

/* preview banner (previewing a stage that isn't the current one, #233).
   A custom flex banner rather than daisyUI .alert — the reskin styles
   .alert as a 2-col grid and forces alert <strong> to display:block, which
   stacked this sentence's emphasised stage names onto their own lines. */
.sd .sd-preview {
  display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem;
  padding: .7rem .9rem; border-radius: var(--radius-box, 14px);
  font-size: .875rem; line-height: 1.55; color: var(--color-base-content);
  background: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--color-info) 32%, transparent);
}
.sd .sd-preview-ic { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--color-info); }
.sd .sd-preview-text { flex: 1 1 auto; min-width: 0; }
.sd .sd-preview-text strong { font-weight: 700; }
.sd .sd-preview-back { flex: 0 0 auto; align-self: center; }

/* next-step callout */
.sd .sd-next {
  display: flex; gap: .85rem; align-items: flex-start; margin-top: .25rem;
  padding: .9rem 1rem; border-radius: var(--radius-box, 14px);
  background: color-mix(in oklch, var(--sd-accent) 9%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, transparent);
}
.sd .sd-next-badge {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--sd-accent); color: var(--color-secondary-content, #fff);
  display: inline-flex; align-items: center; justify-content: center;
}
.sd .sd-next-badge svg { width: 1.1rem; height: 1.1rem; }
.sd .sd-next-label { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in oklch, var(--sd-accent) 70%, var(--color-base-content)); }
.sd .sd-next-text { margin: .15rem 0 0; line-height: 1.5; }
.sd .sd-next-btn {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-weight: 700; font-size: .85rem; color: var(--sd-accent);
}
.sd .sd-next-btn svg { width: .95rem; height: .95rem; }

/* accordion (ported from docs/design/ehcp-process — "7b. Accordion variant") */
.sd .sd-acc { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.sd .sd-panel {
  border: 1px solid var(--color-base-200); border-radius: var(--radius-box, 14px);
  background: var(--color-base-100); overflow: hidden;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.sd .sd-panel[open] { border-color: color-mix(in oklch, var(--sd-accent) 30%, transparent); box-shadow: 0 1px 2px color-mix(in oklch, var(--color-base-content) 8%, transparent); }
.sd .sd-panel > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; font-weight: 700; font-size: .95rem; color: var(--color-base-content);
  transition: background .12s ease;
}
.sd .sd-panel > summary::-webkit-details-marker { display: none; }
.sd .sd-panel > summary::marker { content: ""; }
.sd .sd-panel > summary:hover { background: color-mix(in oklch, var(--color-base-200) 45%, transparent); }
.sd .sd-panel[open] > summary { background: color-mix(in oklch, var(--sd-accent) 8%, transparent); color: color-mix(in oklch, var(--sd-accent) 80%, var(--color-base-content)); }
.sd .sd-panel > summary:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: -2px; border-radius: var(--radius-box, 14px); }
.sd .sd-panel-ic {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-base-200) 80%, transparent); color: var(--sd-accent);
}
.sd .sd-panel-ic svg { width: 1.05rem; height: 1.05rem; }
.sd .sd-panel[open] .sd-panel-ic { background: color-mix(in oklch, var(--sd-accent) 16%, transparent); }
.sd .sd-panel-title { flex: 1 1 auto; min-width: 0; }
.sd .sd-panel-count { font-size: .72rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; font-variant-numeric: tabular-nums; background: color-mix(in oklch, var(--color-base-200) 80%, transparent); color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.sd .sd-panel[open] .sd-panel-count { background: color-mix(in oklch, var(--sd-accent) 16%, transparent); color: var(--sd-accent); }
.sd .sd-panel-chevron { flex: 0 0 auto; display: inline-flex; color: color-mix(in oklch, var(--color-base-content) 45%, transparent); transition: transform .18s cubic-bezier(.22,1,.36,1); }
.sd .sd-panel-chevron svg { width: 1rem; height: 1rem; }
.sd .sd-panel[open] .sd-panel-chevron { transform: rotate(90deg); color: var(--sd-accent); }
.sd .sd-panel-body { padding: .25rem 1rem 1rem; }
.sd .sd-empty { opacity: .7; font-size: .9rem; }

/* checklist / evidence */
.sd .sd-tasklist, .sd .sd-evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sd .sd-task { display: flex; align-items: flex-start; gap: .65rem; width: 100%; text-align: left; padding: .55rem .65rem; border: 1px solid var(--color-base-200); border-radius: var(--radius-field, 10px); background: transparent; cursor: pointer; transition: background .12s ease; }
.sd .sd-task:hover { background: color-mix(in oklch, var(--color-base-200) 45%, transparent); }
.sd .sd-check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid var(--color-base-300); display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: .05rem; }
.sd .sd-check svg { width: .8rem; height: .8rem; }
.sd .sd-task.is-done .sd-check, .sd .sd-ev.is-done .sd-check { background: var(--color-success); border-color: var(--color-success); color: var(--color-success-content, #fff); }
.sd .sd-task-n { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: color-mix(in oklch, var(--sd-accent) 14%, transparent); color: var(--sd-accent); font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.sd .sd-task.is-done .sd-task-t { text-decoration: line-through; opacity: .6; }
.sd .sd-task-t { line-height: 1.4; }
.sd .sd-ev { border: 1px solid var(--color-base-200); border-radius: var(--radius-field, 10px); }
.sd .sd-ev-form, .sd .sd-ev > .sd-ev-label { margin: 0; }
.sd .sd-ev-label { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .65rem; cursor: pointer; }
.sd .sd-ev-box { margin-top: .15rem; flex: 0 0 auto; }
.sd .sd-ev-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sd .sd-ev-t { font-weight: 600; font-size: .9rem; }
.sd .sd-ev.is-done .sd-ev-t { text-decoration: line-through; opacity: .7; }
.sd .sd-ev-d { font-size: .78rem; opacity: .65; line-height: 1.4; }

/* tips & rights */
.sd .sd-tiplist { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sd .sd-tiplist li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5; }
.sd .sd-tip-ic { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--color-warning); margin-top: .15rem; }
.sd .sd-appeal { margin-top: .5rem; }
.sd .sd-appeal-h { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 700; font-size: .9rem; }
.sd .sd-appeal-ic { width: 1rem; height: 1rem; color: var(--color-warning); }

/* letters & links */
.sd .sd-ll-group + .sd-ll-group { margin-top: 1rem; }
.sd .sd-ll-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin: 0 0 .4rem; font-weight: 800; }
.sd .sd-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sd .sd-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border: 1px solid var(--color-base-200); border-radius: var(--radius-field, 10px); }
.sd .sd-row-ic { flex: 0 0 auto; color: var(--sd-accent); display: inline-flex; }
.sd .sd-row-ic svg { width: 1.1rem; height: 1.1rem; }
.sd .sd-row-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.sd .sd-row-t { font-weight: 700; font-size: .9rem; }
.sd .sd-row-d { font-size: .76rem; opacity: .65; }
.sd .sd-row-go { flex: 0 0 auto; opacity: .45; }
.sd .sd-ll-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }