/* 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 ----
   #2183: single column — the journey rail moved from a left sidebar to a
   horizontal bar (.jt, styled in journey-bar.css) above the stage detail. */
.ehcp-board { display: flex; flex-direction: column; gap: 1.5rem; }

/* ---- 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 ---- */
/* #2237: the stage-specific outcome actions sit inline with the header on
   wide viewports, wrapping to stack full-width only when the viewport is
   too narrow to hold title + buttons side by side. */
.sd .sd-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.sd .sd-head-main { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 0; min-width: 0; }
.sd .sd-head-actions { display: flex; flex-direction: row; gap: .625rem; flex-shrink: 0; }
@media (max-width: 760px) {
  .sd .sd-head-row { flex-direction: column; align-items: stretch; }
  .sd .sd-head-actions { flex-direction: row; }
  .sd .sd-head-actions .btn { flex: 1; justify-content: center; }
}
.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; }

/* body sections (#2183: To Do / Tips & rights are static panels, not an
   accordion — only the nested appeal-rights <details> inside Tips still
   opens/closes). */
.sd .sd-acc { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sd .sd-panel {
  border: 1px solid var(--color-base-200); border-radius: var(--radius-box, 14px);
  background: var(--color-base-100); overflow: hidden;
}
.sd .sd-panel-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; font-weight: 700; font-size: .95rem; color: var(--color-base-content);
}
.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(--sd-accent) 16%, transparent); color: var(--sd-accent);
}
.sd .sd-panel-ic svg { width: 1.05rem; height: 1.05rem; }
.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(--sd-accent) 16%, transparent); color: var(--sd-accent); }
.sd .sd-panel-body { padding: 0 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: block; width: 100%; text-align: left; background: transparent; cursor: pointer; border: none; padding: 0; }
.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.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; }

/* templates available (was "letters & links" list rows — now icon cards,
   #2183) */
.sd .sd-lettercards-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin: 0 0 .6rem; font-weight: 800; }
.sd .sd-lettercards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sd .sd-lettercard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 6rem; padding: 1rem .5rem; border-radius: var(--radius-box, 14px);
  border: 2px solid var(--color-base-200); background: var(--color-base-100);
  text-decoration: none; text-align: center; transition: transform .12s ease, border-color .12s ease;
}
.sd .sd-lettercard:hover { transform: translateY(-1px); border-color: color-mix(in oklch, var(--sd-accent) 40%, transparent); }
.sd .sd-lettercard-face { color: var(--sd-accent); }
.sd .sd-lettercard-face .ic-32 { width: 2rem; height: 2rem; }
.sd .sd-lettercard-label { font-weight: 700; font-size: .875rem; color: var(--color-base-content); }
@media (max-width: 500px) { .sd .sd-lettercards { grid-template-columns: 1fr; } }

.sd .sd-quick-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* tips & rights (a static box, not an accordion panel, #2183) */
.sd .sd-tipbox {
  border-radius: var(--radius-box, 14px);
  background: color-mix(in oklch, var(--sd-accent) 6%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 22%, transparent);
  padding: 1.1rem 1.2rem;
}
.sd .sd-tipbox-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.sd .sd-tipbox-ic {
  flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: var(--radius-field, 10px);
  background: var(--sd-accent); color: var(--color-secondary-content, #fff);
  display: inline-flex; align-items: center; justify-content: center;
}
.sd .sd-tipbox-ic svg { width: 1rem; height: 1rem; }
.sd .sd-tipbox-title { font-weight: 800; font-size: .95rem; }
.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); }
.sd .sd-tipbox-help { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklch, var(--sd-accent) 20%, transparent); }
.sd .sd-tipbox-help-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .6rem; font-weight: 800; color: color-mix(in oklch, var(--sd-accent) 70%, var(--color-base-content)); }
.sd .sd-help-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 500px) {
  .sd .sd-help-btns { flex-direction: column; align-items: stretch; }
}

/* Upload-evidence modal shell (#2183): title/CTA populated client-side from
   whichever [data-open-upload] trigger opened it — no server round trip.
   Shell only; #2184 owns the real inline upload flow and existing-items
   picker. */
.sd-dropzone {
  border: 2px dashed var(--color-base-300); border-radius: var(--radius-box, 14px);
  padding: 1.75rem 1rem; text-align: center; color: var(--muted-ink, inherit);
  font-size: .85rem; line-height: 1.5; background: var(--color-base-200);
}
.sd-dropzone strong { display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--color-base-content); }

/* Existing-items pick-list (#2205): "Recent reports" / "Recent Contact log
   entries", offered above the dropzone divider for the checklist items that
   classify as one or the other. Reuses .sd-ev's row treatment. */
.recent-items-heading { font-size: .78rem; font-weight: 700; opacity: .7; margin: 0 0 .4rem; }
.recent-items-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.recent-item-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid var(--color-base-200); border-radius: var(--radius-field, 10px);
  padding: .45rem .6rem;
}
.recent-item-body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.recent-item-t { font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item-d { font-size: .72rem; opacity: .65; }