/* The phase registry owns the content; this component owns both navigation layouts. */
.case-workspace, .case-workspace-content { min-width: 0; }
.workflow-stepper {
  display: flex; flex-direction: column; min-width: 0; margin-bottom: 1rem;
  padding: 1rem .8rem .8rem; border-top: 3px solid #6488ff;
  background: var(--register-navy); color: #f4f7fb;
}
.workflow-return { align-self: flex-start; margin: 0 .55rem .8rem; padding-block: .3rem; color: #a3aec0; font-size: .75rem; text-decoration: none; }
.workflow-return:hover { color: #fff; text-decoration: underline; }
.workflow-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: .75rem; margin: 0 .55rem .8rem; padding-bottom: .9rem; border-bottom: 1px solid var(--register-navy-line); }
.workflow-heading-copy { min-width: 0; display: grid; gap: .35rem; }
.workflow-heading-tools { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.workflow-heading:has(.workflow-readonly) { grid-template-columns: minmax(0,1fr); }
.workflow-heading:has(.workflow-readonly) .workflow-heading-tools { justify-content: space-between; }
.workflow-case { display: block; color: #f6f8fb; font-size: .92rem; font-weight: 750; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.workflow-case:hover { color: var(--register-blue-light); }
.workflow-position { color: #a3aec0; font: 600 .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workflow-readonly { justify-self: start; padding: .3rem .5rem; background: #3b3122; color: #e8c98b; font-size: .75rem; }
.workflow-desktop { display: block; }
.workflow-mobile { display: none; }
.workflow-mobile-bar { display: none; }
.workflow-phases { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.workflow-phase { min-width: 0; padding-top: .65rem; border-top: 1px solid var(--register-navy-line); }
.workflow-phase:first-child { padding-top: 0; border-top: 0; }
/* The heading is the block's own disclosure control: the chevron moves to
   the trailing edge so the number keeps the leading column, which is what
   the entries below are indented against. */
.workflow-phase-block > summary.workflow-phase-heading {
  display: grid; grid-template-columns: 1.75rem minmax(0,1fr) auto; align-items: center;
  gap: .65rem; padding: .4rem 1.75rem .4rem .55rem !important; cursor: pointer;
}
.workflow-phase-block > summary:hover { background: #1a2432; }
.workflow-phase-block > summary:focus-visible { outline: 2px solid #7896f5; outline-offset: -2px; }
details.workflow-phase-block > summary::before { left: auto !important; right: .55rem; color: #9db2f2; }
.workflow-number { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid #465367; background: #1a2432; color: #b5bfcc; font: 650 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workflow-label { display: grid; gap: .15rem; min-width: 0; }
.workflow-label strong { color: #dce5f1; font-size: .85rem; line-height: 1.35; }
.workflow-label small { color: #a3aec0; font-size: .72rem; line-height: 1.4; }
.workflow-phase-state { display: flex; align-items: center; gap: .3rem; }
.workflow-count { color: #a3aec0; font: 650 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workflow-phase.is-done > .workflow-phase-block .workflow-count { color: var(--register-done); }
.workflow-phase.is-done > .workflow-phase-block > summary .workflow-number { border-color: #4167df; background: #3158d7; color: #fff; }
.workflow-phase.is-current > .workflow-phase-block > summary .workflow-number { border-color: #7896f5; background: #2b4ebf; color: #fff; }
.workflow-phase.is-attention > .workflow-phase-block > summary .workflow-number { border-color: #9c742f; background: #3b3122; color: #e8c98b; }
/* What is finished, in the one green of the palette. The hidden text carries
   the word to a screen reader; the status help explains every mark on touch. */
.workflow-check { display: inline-flex; flex: none; color: var(--register-done); }
/* The quiet half of the same row: what is left to do and what cannot be
   opened yet are marks, not sentences, so the column spends its width on
   the names of the steps. */
.workflow-mark { display: inline-flex; flex: none; color: #8b97a9; }
.workflow-mark svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workflow-mark.is-todo svg { stroke-dasharray: 3 3; }
/* The three loud states carry their colour as well as their word: what
   went wrong, what no longer holds, and what the case is doing by itself. */
.workflow-mark.is-stale, .workflow-mark.is-attention { color: #e8c98b; }
.workflow-mark.is-working { color: var(--register-blue-light); }
.workflow-mark.is-attention svg, .workflow-mark.is-stale svg { stroke-width: 2; }
.workflow-phase-entries .workflow-mark { margin-left: auto; }
.workflow-check svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.workflow-check.is-double svg { width: 1.35rem; height: 1.05rem; }
.workflow-status-help > summary {
  border-color: #465367 !important; background: #1a2432 !important;
  color: #c4d1f3 !important;
}
.workflow-status-help[open] > summary, .workflow-status-help > summary:hover {
  border-color: #7896f5 !important; background: #222f41 !important; color: #fff !important;
}
.workflow-status-help .context-help-panel { left: auto; right: 0; width: min(18rem,calc(100vw - 1.5rem)); }
.workflow-status-key { display: grid; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.workflow-status-key li { display: grid; grid-template-columns: 1.35rem minmax(0,1fr); align-items: center; gap: .55rem; color: var(--ink); }
.workflow-status-key-mark { display: inline-grid; place-items: center; color: var(--muted); }
.workflow-status-key-mark :is(.workflow-check,.workflow-mark) { margin: 0; }
.workflow-phase-entries { display: grid; gap: .15rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.workflow-phase-entries > li { min-width: 0; }
.workflow-phase-entries :is(a, .workflow-disabled) {
  display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .6rem .5rem 2.9rem;
  border-left: 2px solid transparent; color: #b5bfcc; font-size: .8rem; line-height: 1.4;
  text-decoration: none; overflow-wrap: anywhere;
}
.workflow-entry-label { min-width: 0; }
.workflow-phase-entries .workflow-check { margin-left: auto; }
.workflow-phase-entries a:hover { background: #1a2432; color: #fff; }
.workflow-phase-entries > .is-current > a { border-left-color: #6e8fff; background: var(--register-navy-raised); color: #fff; font-weight: 650; }
.workflow-phase-entries > li > small { display: block; margin: -.2rem .6rem .35rem 3rem; color: #a3aec0; font-size: .7rem; }
.workflow-phase-entries > .is-attention > small { color: #e8c98b; }
.workflow-disabled { color: #8b97a9; cursor: not-allowed; }
.workflow-aside { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: .7rem .55rem 0; border-top: 1px solid var(--register-navy-line); list-style: none; }
.workflow-aside a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #8b97a9; font-size: .75rem; text-decoration: none; }
.workflow-aside a:hover { color: #c4d1f3; text-decoration: underline; text-underline-offset: .2em; }
.workflow-aside a[aria-current] { color: #fff; }
.workflow-shortcuts { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.workflow-shortcuts li { flex: 1 1 auto; }
.workflow-shortcuts a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .4rem .5rem; border: 1px solid #354257; background: #1a2432; color: #c4d1f3; font-size: .75rem; font-weight: 650; text-decoration: none; }
.workflow-shortcuts a:hover { border-color: #7896f5; background: #222f41; color: #fff; }
.workflow-shortcuts a { gap: .4rem; }
.workflow-shortcut-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; background: #d5ad61; color: #1a2432; font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workflow-shortcuts a[aria-current] { border-color: #7896f5; background: #2b4ebf; color: #fff; }
.case-tasks, .case-own-pages { margin: 0 0 1rem; padding: .75rem .55rem; border: 1px solid #354257; background: #1a2432; }
.case-tasks { border-left: 2px solid #d5ad61; }
.workflow-stepper :is(.case-tasks, .case-own-pages) h2 { margin: 0 0 .4rem; color: #dce5f1; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.case-tasks ul, .case-own-pages ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.case-tasks a, .case-own-pages a { display: flex; align-items: center; min-height: 2.75rem; color: #c4d1f3; font-size: .8rem; line-height: 1.4; }
.case-tasks a:hover, .case-own-pages a:hover { color: #fff; }
.case-own-pages a[aria-current] { color: #fff; font-weight: 650; }
.case-tasks small { display: block; color: #a3aec0; font-size: .72rem; line-height: 1.5; }
.case-reader-links { display: grid; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.case-reader-links :is(a, span) { display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; padding: .65rem .75rem; border-left: 2px solid transparent; color: #b5bfcc; font-size: .875rem; font-weight: 650; text-decoration: none; }
.case-reader-links a:hover { background: #1a2432; color: #fff; }
.case-reader-links a[aria-current] { border-left-color: #6e8fff; background: var(--register-navy-raised); color: #fff; }
.case-reader-links small { margin-top: .15rem; font-size: .72rem; font-weight: 400; }
@media (min-width: 72.01rem) {
  .case-workspace:has(> .workflow-stepper) { display: grid; grid-template-columns: 15.8rem minmax(0,1fr); align-items: start; gap: clamp(1rem,1.5vw,2rem); }
  .case-workspace > .workflow-stepper { margin: 0; }
}
@media (min-width: 52.01rem) and (max-width: 72rem) {
  .workflow-phases { grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: .75rem; }
  .workflow-phase, .workflow-phase:first-child { padding-top: .65rem; border-top: 1px solid var(--register-navy-line); }
}
@media (max-width: 72rem) {
  .case-reader-links { grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); }
  .workflow-heading { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
  .workflow-shortcuts { align-self: flex-start; }
}
@media (max-width: 72rem) {
  .workflow-stepper { padding: .8rem; }
  .workflow-desktop { display: none; }
  .workflow-heading-tools > .workflow-status-help { display: none; }
  .workflow-mobile-bar {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start;
    gap: .5rem; margin: 0 0 .8rem;
  }
  .workflow-mobile { display: block; }
  .workflow-mobile > summary { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 3.5rem; padding: .55rem 2rem .55rem .55rem !important; border-left: 2px solid #6e8fff; background: var(--register-navy-raised); color: #fff; cursor: pointer; }
  details.workflow-mobile > summary::before { left: auto !important; right: .75rem; color: #9db2f2; }
  .workflow-mobile-number { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: none; background: #3158d7; color: #fff; font: 650 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
  .workflow-mobile > summary > span:last-child { display: grid; gap: .15rem; }
  .workflow-mobile > summary strong { color: inherit; font-size: .9rem; }
  .workflow-mobile-case {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow-wrap: anywhere;
  }
  .workflow-mobile > summary small { color: #a3aec0; font-size: .75rem; }
  .workflow-mobile > .workflow-phases { margin-top: 1rem; }
  .workflow-mobile-help { padding-top: .35rem; }
  .workflow-heading { grid-template-columns: minmax(0,1fr) auto; }
}
@media (max-width: 52rem) {
  .workflow-stepper { padding: .55rem; }
  .workflow-return, .workflow-heading { display: none; }
  .workflow-mobile-bar, .workflow-shortcuts { margin-bottom: .55rem; }
  .workflow-mobile > summary { min-height: 3.25rem; }
  .workflow-aside { margin-top: .5rem; padding-top: .45rem; }
}
.workflow-hearing { display: block; margin-top: .25rem; color: var(--muted); font-size: .8rem; font-weight: 650; }