/* AI SDLC (service-ai-sdlc.html): the seven stages around coding, the software factory (one definition the agents
   run from), the flow from idea to merged code, compounding after each run, the screens in the harder-problems window (list and preview,
   patterns.css), the maturity staircase and complexity bands, and the measures under the process. Blocks drawn with
   the v2 tone tokens (--on-dark, --line-dark, --surface-dark) read on either band; the ink islands on paper set
   their own colors. */

/* The factory headline is two sentences. The column is wide enough for each on its own line. */
.v2 #factory .section-head h2 { max-width: none; }
/* Heading rows with text on the right: the label runs across the top, then the heading and text start on the same line.
   Same columns and left edge as the Context and Knowledge Graphs page (service-context.css). */
@media (min-width: 961px) {
  .section-head:has(> .section-intro) { grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
  .section-head:has(> .section-intro) > div { display: contents; }
  .section-head:has(> .section-intro) .kicker { grid-column: 1 / -1; }
  .section-head > .section-intro { padding-left: calc(1.3rem + 1px); }
}

/* ---------- The seven stages, bracketed around coding (ink) ---------- */
.sdlc-stages { display: grid; grid-template-columns: 3fr 1fr 3fr; gap: 10px; }
.sdlc-stage-group { display: grid; gap: 1.1rem; align-content: start; }
.sdlc-stage-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.sdlc-stage-row li {
  display: grid; align-content: space-between; gap: 1.25rem; min-height: 104px; padding: .9rem 1rem 1rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--surface-dark);
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
}
.sdlc-stage-row li span { font-size: .8rem; font-weight: 400; letter-spacing: .06em; color: var(--on-dark-faint); font-variant-numeric: tabular-nums; }
.sdlc-stage-group.is-code li { border-color: var(--mint); background: var(--mint); color: var(--ink); }
.sdlc-stage-group.is-code li span { color: rgba(14, 37, 27, .6); }
.sdlc-stage-note { position: relative; padding-top: 1rem; border-top: 1px solid var(--on-dark-faint); font-size: .93rem; line-height: 1.5; color: var(--on-dark-muted); }
.sdlc-stage-note::before, .sdlc-stage-note::after { content: ""; position: absolute; top: -8px; width: 1px; height: 8px; background: var(--on-dark-faint); }
.sdlc-stage-note::before { left: 0; }
.sdlc-stage-note::after { right: 0; }
.sdlc-stage-note b { display: block; margin-bottom: .2rem; font-weight: 500; color: var(--on-dark); }
.is-code .sdlc-stage-note, .is-code .sdlc-stage-note::before, .is-code .sdlc-stage-note::after { border-color: var(--mint); background-color: transparent; }
.is-code .sdlc-stage-note::before, .is-code .sdlc-stage-note::after { background: var(--mint); }

/* The common view, and what we build toward */
.sdlc-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; align-items: stretch; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sdlc-shift-card { display: grid; gap: .7rem; align-content: start; padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.sdlc-shift-card.is-target { border-color: rgba(204, 246, 100, .45); background: var(--forest); }
.sdlc-shift-k { font-size: .85rem; color: var(--on-dark-faint); }
.sdlc-shift-card.is-target .sdlc-shift-k { color: var(--mint); }
.sdlc-shift-card h3 { max-width: 28ch; font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.2; }
.sdlc-shift-card p:last-child { max-width: 48ch; font-size: .95rem; line-height: 1.55; color: var(--on-dark-muted); }
.sdlc-shift-arrow { align-self: center; width: 28px; height: 28px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The flow, from idea to merged code (paper) ---------- */
.sdlc-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sdlc-flow-group {
  display: grid; gap: 1rem; align-content: start; padding: 1.1rem;
  border: 1px solid rgba(14, 37, 27, .1); border-radius: calc(var(--radius) + 4px); background: var(--white);
}
.sdlc-flow-group--run { grid-column: 1 / -1; border-color: transparent; background: var(--ink); color: var(--paper); }
.sdlc-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .1rem 0; }
.sdlc-flow-head h3 { font-size: 1.1rem; }
.sdlc-tag { display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 .75rem; border-radius: 999px; background: var(--forest); color: var(--mint); font-size: .8rem; font-weight: 500; }
.sdlc-flow-group--run .sdlc-tag { background: var(--mint); color: var(--ink); }
.sdlc-flow-steps { --flow-gap: 30px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--flow-gap); }
.sdlc-flow-steps > li { position: relative; display: grid; gap: .45rem; align-content: start; min-height: 118px; padding: 1rem; border-radius: var(--radius); background: var(--paper); }
.sdlc-flow-group--run .sdlc-flow-steps > li { background: #1A2F25; }
.sdlc-flow-steps b { font-size: 1.08rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.sdlc-flow-steps p { font-size: .88rem; line-height: 1.45; color: var(--text-muted); }
.sdlc-flow-group--run .sdlc-flow-steps p { color: rgba(247, 243, 234, .72); }
.sdlc-flow-steps > li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--flow-gap) / -2 - 8px); width: 16px; height: 16px; margin-top: -8px;
  background: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sdlc-flow-group--run .sdlc-flow-steps > li:not(:last-child)::after { background: var(--mint); }
/* The plan's optional steps: two dashed boxes stacked where one step would sit */
.sdlc-flow-steps--plan { grid-auto-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.sdlc-flow-steps > li.sdlc-flow-opts { gap: 8px; min-height: 0; padding: 0; background: none; }
.sdlc-flow-opts > div { display: grid; gap: .25rem; align-content: center; padding: .75rem 1rem; border: 1.5px dashed rgba(14, 37, 27, .28); border-radius: var(--radius); }
.sdlc-flow-opts p { color: var(--forest); }

.sdlc-gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.sdlc-gains li { display: grid; gap: .4rem; align-content: start; padding-top: 1rem; border-top: 3px solid var(--forest); }
.sdlc-gains b { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; }
.sdlc-gains p { font-size: .93rem; line-height: 1.5; color: var(--text-muted); }

/* Why one definition matters. The forest card is the main reason; the flow follows in the same section. */
.sdlc-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sdlc-why li {
  display: grid; gap: .45rem; align-content: start; padding: 1.25rem 1.3rem 1.4rem;
  border: 1px solid rgba(14, 37, 27, .1); border-radius: calc(var(--radius) + 4px); background: var(--white);
}
.sdlc-why-k { font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--forest); }
.sdlc-why b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.sdlc-why p:last-child { font-size: .93rem; line-height: 1.5; color: var(--text-muted); }
.sdlc-why .is-main { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.sdlc-why .is-main .sdlc-why-k { color: var(--mint); }
.sdlc-why .is-main p:last-child { color: rgba(247, 243, 234, .78); }
.sdlc-follow { margin-top: clamp(4.5rem, 8vw, 7rem); }
.sdlc-compound { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Harder problems: the screens in the window (ink) ---------- */
.sdlc-win { --pat-window-h: 520px; }
.sdlc-win .pat-panel:not([hidden]) { display: grid; gap: .8rem; align-content: start; font-size: .82rem; line-height: 1.45; color: var(--pw-muted); }
.sdlc-win p { line-height: 1.45; }
.sd-box { border: 1px solid var(--pw-line); border-radius: 6px; background: rgba(247, 243, 234, .02); }
.sd-box-k { padding: .6rem .75rem 0; }
.sd-chip { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 .6rem; border: 1px solid var(--pw-line); border-radius: 999px; color: var(--pw-muted); font-size: .74rem; font-style: normal; white-space: nowrap; }
.sd-chip.on { border-color: rgba(204, 246, 100, .45); color: var(--mint); }
.sd-chip.warn { border-color: rgba(255, 107, 44, .5); color: var(--tangerine); }
.sd-chip.fill { border-color: var(--mint); background: var(--mint); color: var(--ink); font-weight: 500; }
.sd-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sd-sk { display: block; height: 7px; border-radius: 4px; background: rgba(247, 243, 234, .1); }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sd-title { color: var(--pw-text); font-size: .95rem; font-weight: 500; letter-spacing: -0.01em; }
.sd-k { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-faint); }
.sd-dim { color: var(--pw-faint); font-size: .74rem; text-align: right; }
.sd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; color: var(--pw-faint); font-size: .76rem; }
.sd-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: .7rem .8rem; }
.sd-row p { color: var(--pw-muted); }
.sd-list { display: grid; }
.sd-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 38px; padding: .45rem .75rem; border-bottom: 1px solid var(--pw-line); color: var(--pw-text); }
.sd-list li:last-child { border-bottom: 0; }
.sd-tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(204, 246, 100, .16); color: var(--mint); }
.sd-tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Design guidance */
.sd-doc { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .9rem; }
.sd-doc-nav { display: grid; gap: 2px; align-content: start; padding: .5rem; border-radius: 6px; background: rgba(247, 243, 234, .04); }
.sd-doc-nav li { padding: .42rem .55rem; border-radius: 4px; color: var(--pw-faint); font-size: .74rem; }
.sd-doc-nav li.on { background: rgba(204, 246, 100, .1); box-shadow: inset 2px 0 0 var(--mint); color: var(--mint); }
.sd-doc-main { display: grid; gap: .7rem; align-content: start; }
.sd-doc-main .sd-title { font-size: 1.15rem; }
.sd-props { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); }
.sd-props > span { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 40px; padding: .45rem .75rem; border-bottom: 1px solid var(--pw-line); color: var(--pw-text); }
.sd-props > span:nth-child(odd) { color: var(--pw-faint); font: .74rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.sd-props > span:nth-last-child(-n + 2) { border-bottom: 0; }

/* Issue to pull request */
.sd-run { display: grid; padding: .9rem .9rem .1rem; }
.sd-run li { position: relative; display: grid; gap: .15rem; padding: 0 0 1rem 1.6rem; }
.sd-run li::before { content: ""; position: absolute; left: 0; top: .22rem; width: 11px; height: 11px; border: 1.5px solid var(--mint); border-radius: 50%; background: var(--mint); }
.sd-run li::after { content: ""; position: absolute; left: 5px; top: 1.1rem; bottom: .15rem; width: 1px; background: var(--pw-line); }
.sd-run li:last-child::after { display: none; }
.sd-run li.now::before { background: transparent; box-shadow: 0 0 0 4px rgba(204, 246, 100, .14); }
.sd-run b { color: var(--pw-text); font-weight: 500; }
.sd-run span { color: var(--pw-faint); font-size: .76rem; }

/* Pull request diff and review comment */
.sd-diff { padding: .4rem 0; }
.sd-ln { display: grid; grid-template-columns: 2.4rem 1rem minmax(0, 1fr); align-items: center; height: 22px; padding-right: .8rem; color: var(--pw-faint); font-size: .7rem; font-variant-numeric: tabular-nums; }
.sd-ln span:first-child { padding-right: .6rem; text-align: right; }
.sd-ln .sd-sk { height: 7px; }
.sd-ln.add { background: rgba(204, 246, 100, .07); }
.sd-ln.add .sd-sk { background: rgba(204, 246, 100, .3); }
.sd-ln.del { background: rgba(255, 107, 44, .07); }
.sd-ln.del .sd-sk { background: rgba(255, 107, 44, .32); }
.sd-comment { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .7rem; margin: .3rem .8rem .5rem 2.4rem; padding: .75rem; }
.sd-comment > i { width: 26px; height: 26px; border-radius: 6px; background: var(--mint); }
.sd-comment > div { display: grid; gap: .45rem; justify-items: start; }
.sd-comment b { color: var(--pw-text); font-weight: 500; }

/* Risk route */
.sd-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sd-out { display: grid; gap: .2rem; padding: .7rem .8rem; }
.sd-out b { color: var(--pw-text); font-weight: 500; }
.sd-out span { color: var(--pw-faint); font-size: .76rem; }
.sd-out.on { border-color: rgba(204, 246, 100, .45); background: rgba(204, 246, 100, .07); }
.sd-out.on b { color: var(--mint); }

/* ---------- Surface areas: the open card (paper) ---------- */
.pat-card.sdlc-open { align-content: center; border: 1.5px dashed rgba(14, 37, 27, .3); background: var(--paper); }
.pat-card.sdlc-open h3 { max-width: 16ch; }
.pat-card .pat-link { margin-top: .4rem; font-size: .93rem; }

/* ---------- Maturity staircase and complexity bands (ink) ---------- */
.sdlc-dim-head { display: grid; gap: .35rem; margin-bottom: 1.5rem; }
.sdlc-dim-k { font-size: .85rem; color: var(--mint); }
.sdlc-dim-head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.03em; }
.sdlc-stairs-wrap { position: relative; }
.sdlc-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 330px; }
.sdlc-stair {
  display: grid; align-content: space-between; height: var(--h); padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--surface-dark);
  color: var(--on-dark-muted); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.sdlc-stair:nth-child(1) { --h: 40%; }
.sdlc-stair:nth-child(2) { --h: 58%; }
.sdlc-stair:nth-child(3) { --h: 79%; }
.sdlc-stair:nth-child(4) { --h: 100%; }
.sdlc-stair b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.sdlc-stair-n { font-size: .85rem; letter-spacing: .06em; color: var(--on-dark-faint); font-variant-numeric: tabular-nums; }
.sdlc-stair:hover { border-color: rgba(204, 246, 100, .45); color: var(--on-dark); }
.sdlc-stair[aria-selected="true"] { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.sdlc-stair[aria-selected="true"] .sdlc-stair-n { color: var(--forest); }
.sdlc-threshold { position: absolute; top: 0; bottom: 0; left: 50%; pointer-events: none; border-left: 1.5px dashed var(--mint); }
.sdlc-threshold p { position: absolute; top: 0; right: 1.1rem; width: min(30ch, 40vw); text-align: right; font-size: .93rem; line-height: 1.45; color: var(--on-dark-muted); }
.sdlc-threshold b { display: block; margin-bottom: .2rem; font-weight: 500; color: var(--mint); }
/* where the line falls: drawn on wide screens, said in words on phones and to screen readers */
.sdlc-threshold-at { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sdlc-stage-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 12px; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--surface-dark); }
.sdlc-stage-panel[hidden] { display: none; }
.sdlc-stage-panel h4 { margin: 0 0 .45rem; font-size: .85rem; font-weight: 500; color: var(--mint); }
.sdlc-stage-panel p { font-size: .98rem; line-height: 1.55; color: var(--on-dark-muted); }

.sdlc-complex { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line-dark); }
.sdlc-complex .sdlc-dim-head { margin-bottom: 1.25rem; }
.sdlc-factors { display: grid; margin: 0; }
.sdlc-factors div { display: grid; gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--line-dark); }
.sdlc-factors dt { font-weight: 500; letter-spacing: -0.02em; }
.sdlc-factors dd { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--on-dark-muted); }
.sdlc-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: end; }
.sdlc-bands li { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--surface-dark); }
.sdlc-bands b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.sdlc-bands p { font-size: .93rem; line-height: 1.5; color: var(--on-dark-muted); }
.sdlc-band-k { font-size: .8rem; letter-spacing: .06em; color: var(--on-dark-faint); }
.sdlc-bars { display: flex; align-items: end; gap: 4px; height: 22px; margin-bottom: 1.1rem; }
.sdlc-bars i { width: 8px; border-radius: 2px; background: var(--line-dark); }
.sdlc-bars i:nth-child(1) { height: 40%; }
.sdlc-bars i:nth-child(2) { height: 70%; }
.sdlc-bars i:nth-child(3) { height: 100%; }
.sdlc-bars[data-level="1"] i:nth-child(-n + 1),
.sdlc-bars[data-level="2"] i:nth-child(-n + 2),
.sdlc-bars[data-level="3"] i { background: var(--mint); }

/* ---------- What we measure: an ink strip under the process (paper) ---------- */
.sdlc-measure { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 3fr)); gap: 1.25rem 2rem; margin-top: 12px; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.sdlc-measure-k { font-size: .9rem; font-weight: 500; color: var(--mint); }
.sdlc-measure li { display: grid; gap: .3rem; align-content: start; }
.sdlc-measure b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.sdlc-measure span { font-size: .9rem; line-height: 1.5; color: rgba(247, 243, 234, .72); }
.sdlc-measure ul { display: contents; }

@media (prefers-reduced-motion: reduce) {
  .sdlc-stair { transition: none; }
}
@media (max-width: 1100px) {
  .sdlc-flow { grid-template-columns: minmax(0, 1fr); }
  .sdlc-compound { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sdlc-stages { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .sdlc-stage-row li { min-height: 84px; }
  .sdlc-shift { grid-template-columns: minmax(0, 1fr); }
  .sdlc-shift-arrow { justify-self: center; transform: rotate(90deg); }
  .sdlc-gains, .sdlc-why, .sdlc-compound, .sdlc-stage-panel { grid-template-columns: minmax(0, 1fr); }
  .sdlc-complex { grid-template-columns: minmax(0, 1fr); }
  .sdlc-measure { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sdlc-measure-k { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sdlc-flow-steps, .sdlc-flow-steps--plan { --flow-gap: 26px; grid-auto-flow: row; grid-auto-columns: auto; }
  .sdlc-flow-steps > li { min-height: 0; }
  .sdlc-flow-steps > li:not(:last-child)::after { top: auto; right: auto; bottom: calc(var(--flow-gap) / -2 - 8px); left: 50%; margin: 0 0 0 -8px; transform: rotate(90deg); }
  .sdlc-stairs { grid-template-columns: minmax(0, 1fr); align-items: stretch; height: auto; }
  .sdlc-stair { display: flex; align-items: center; gap: 1rem; width: var(--w); height: auto; min-height: 60px; }
  .sdlc-stair:nth-child(1) { --w: 70%; }
  .sdlc-stair:nth-child(2) { --w: 80%; }
  .sdlc-stair:nth-child(3) { --w: 90%; }
  .sdlc-stair:nth-child(4) { --w: 100%; }
  .sdlc-threshold { position: static; margin-top: 1rem; padding-left: 1rem; border-left-width: 1.5px; }
  .sdlc-threshold p { position: static; width: auto; text-align: left; }
  .sdlc-threshold-at { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .sdlc-bands { grid-template-columns: minmax(0, 1fr); }
  .sdlc-measure { grid-template-columns: minmax(0, 1fr); }
  /* the screens grow the window on phones instead of being cut to its height */
  .sdlc-win { --pat-window-h: 0px; }
  .sdlc-win .pat-panel { position: static; }
  .sd-route { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sdlc-stage-row li { min-height: 80px; gap: .75rem; padding: .75rem .8rem .85rem; font-size: .95rem; }
  .sd-doc { grid-template-columns: minmax(0, 1fr); }
  .sd-doc-nav { display: none; }
}