/* R7.1.1 case polish: Case at a glance, a visual grammar per decision style, step details, illustrative scenario.
   Loaded after site2.css and before mobile.css (phones are recomposed in mobile.css). Same tokens: one accent,
   radius 4px, no shadows, no gradients. Motion is limited to 180 ms state changes and is off with reduced motion. */

/* brass ink for the small R7.1.1 labels: the accent itself in the dark theme; in the light theme a deeper shade of the same
   brass, because #8b6a2b gives only 4.09:1 on --bg-2. Local to the new labels: the global --accent token is not changed. */
:root{--brass-ink:var(--accent)}
:root[data-theme="light"]{--brass-ink:#7d6028}

/* ---------- case header: Case at a glance beside the business question ---------- */
.cs-glance .cs-label{color:var(--brass-ink)}
.cs-head-grid.has-glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:24px clamp(32px,5vw,80px);align-items:start}
.cs-head-main{min-width:0}
.cs-glance{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:18px 20px 14px;margin-top:4px}
.cs-glance .cs-label{margin-bottom:16px}
.gl-list{display:grid}
.gl-list li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);padding:0 0 12px}
.gl-list li:last-child{padding-bottom:2px}
.gl-list li::before{content:"";grid-column:1;grid-row:1 / 3;justify-self:center;position:relative;z-index:1;margin-top:5px;width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--accent);border-radius:50%;background:var(--bg-2)}
.gl-list li:not(:last-child)::after{content:"";position:absolute;left:10.5px;top:16px;bottom:2px;width:1px;background:var(--line-2)}
.gl-k{grid-column:2;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.gl-t{grid-column:2;font-size:.94rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.gl-list .gl-input::before{background:var(--accent);width:7px;height:7px;margin-top:6px;border:0}
.gl-list .gl-gate::before{border-radius:1px;transform:rotate(45deg) scale(.9)}
.gl-list .gl-judgement::before{background:radial-gradient(circle,var(--accent) 0 1.6px,transparent 2.2px),var(--bg-2)}
.gl-list .gl-decision::before,.gl-list .gl-outcome::before{border-radius:1px;background:var(--accent);width:10px;height:10px}
.gl-list .gl-layer::before{width:14px;height:5px;border-radius:1px;margin-top:7px}
.gl-decision .gl-k,.gl-outcome .gl-k{color:var(--brass-ink)}
.gl-go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px 0 2px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-ink);text-decoration:none}
.gl-go::after{content:"\2193";font-family:var(--sans);font-size:.95rem;line-height:1;transition:transform .18s var(--ease)}
.gl-go:hover{color:var(--text)}
.gl-go:hover::after{transform:translateY(2px)}
.gl-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}
/* tablets: the glance runs as one horizontal line under the summary */
@media (min-width:768px) and (max-width:1099px){
  .cs-head-grid.has-glance{grid-template-columns:minmax(0,1fr);gap:22px}
  .cs-glance{padding:16px 18px 12px}
  .gl-list{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:14px}
  .gl-list li{grid-template-columns:minmax(0,1fr);grid-template-rows:10px auto auto;align-content:start;row-gap:2px;padding:0}
  .cs-glance .gl-list li::before{grid-row:1;justify-self:start;align-self:center;margin:0}
  .gl-k{margin-top:6px}
  .gl-list li:not(:last-child)::after{left:16px;right:-10px;top:4px;bottom:auto;width:auto;height:1px}
  .gl-k,.gl-t{grid-column:1}
}

/* ---------- step details: native <details>, polished ---------- */
.dp-more summary{gap:10px;padding-right:8px;border-radius:var(--r);transition:color .18s var(--ease)}
.dp-more summary::before{content:"";width:6px;height:6px;margin:0 2px 2px 2px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);transition:transform .18s var(--ease)}
.dp-more[open] summary::before{content:"";transform:rotate(45deg);margin-bottom:4px}
.dp-more[open] summary{color:var(--text)}
.dp-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dp-more dl{gap:10px;margin:4px 0 6px 5px;padding:4px 0 2px 16px;border-left:1px solid var(--accent)}
.dp-more[open] dl{animation:dp-open .18s var(--ease)}
.dp-more dl > div{display:grid;gap:3px}
.dp-more dd{color:var(--text);line-height:1.5}
.dp-esc{padding:8px 12px 9px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--accent-soft)}
.dp-esc dt::before{content:"\2197";font-family:var(--sans);margin-right:6px}
/* light theme: brass text has no contrast headroom on a tint, so panels that carry it sit on paper instead */
:root[data-theme="light"] .dp-esc{background:var(--bg)}
@keyframes dp-open{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---------- decision grammar per style ---------- */
/* chain: records linked on a spine; field name on the left, what is checked on the right */
.dpath-chain .dp-step{padding-bottom:14px}
.dpath-chain .dp-node{position:relative;margin-top:22px;width:10px;height:10px}
.dpath-chain .dp-node::after{content:"";position:absolute;left:100%;top:50%;width:12px;height:1px;margin-top:-.5px;background:var(--line-2)}
.dpath-chain .dp-step:not(:last-child)::after{content:"";position:absolute;z-index:1;left:calc(var(--spine) - 4px);bottom:-1px;width:8px;height:15px;box-sizing:border-box;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--bg-2)}
.dpath-chain .dp-body{display:grid;grid-template-columns:minmax(150px,30%) minmax(0,1fr);column-gap:24px;align-items:start;margin:0;padding:14px 18px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg)}
.dpath-chain .dp-step:not(:last-child) .dp-body{border-bottom-style:solid}
.dpath-chain .dp-top{grid-column:1;grid-row:1}
.dpath-chain .dp-body h3{grid-column:1;grid-row:2;margin:0}
.dpath-chain .dp-check{grid-column:2;grid-row:1 / 3;align-self:center}
.dpath-chain .dp-more{grid-column:2;grid-row:3;margin-top:4px}
.dpath-chain .dp-step.is-gate .dp-body{border-left:2px solid var(--accent)}

/* gates: each check is a barrier the material has to pass */
.dpath-gates .dp-step{padding-bottom:12px}
.dpath-gates .dp-step:not(.is-outcome) .dp-node{position:relative}
.dpath-gates .dp-step:not(.is-outcome) .dp-node::after{content:"";position:absolute;left:100%;top:50%;width:8px;height:1px;margin-top:-.5px;background:var(--accent)}
.dpath-gates .dp-step:not(.is-outcome) .dp-body{margin:0;padding:12px 16px 8px;border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--bg)}
.dpath-gates .dp-step.is-outcome .dp-body{margin-top:6px}

/* timeline: owner as the time column; a change of owner is a handover */
.dpath-timeline{--lane:150px}
.dpath-timeline::before,.dpath-timeline::after{left:calc(var(--lane) + var(--spine) - .5px)}
.dpath-timeline .dp-step{grid-template-columns:var(--lane) calc(var(--spine) * 2 + 6px) minmax(0,1fr)}
.dpath-timeline .dp-lane{grid-column:1;grid-row:1;margin:4px 0 0;padding-right:16px;text-align:right;font-family:var(--mono);font-size:.68rem;line-height:1.4;letter-spacing:.03em;color:var(--dim);overflow-wrap:anywhere}
.dpath-timeline .dp-lane.is-handover{color:var(--brass-ink)}
.dpath-timeline .dp-node{grid-column:2;grid-row:1}
.dpath-timeline .dp-body{grid-column:3;grid-row:1}
.tl-strip{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin:0 0 30px;padding:14px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.tl-strip::before{content:"";position:absolute;left:calc(50% / var(--cols));right:calc(50% / var(--cols));top:43px;height:1px;background:var(--line-2)}
.tl-strip li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 5px 14px;text-align:center}
.tl-strip li::before{content:"";order:1;width:10px;height:10px;box-sizing:border-box;border:1.5px solid var(--accent);border-radius:50%;background:var(--bg)}
.tl-strip li.is-gate::before{border-radius:1px;transform:rotate(45deg) scale(.9)}
.tl-strip li.is-outcome::before{border-radius:1px;background:var(--accent)}
.tl-n{order:0;height:16px;line-height:16px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--accent)}
.tl-t{order:2;font-size:.74rem;line-height:1.28;color:var(--muted);overflow-wrap:anywhere}

/* swimlane: the hand-off between lanes reads left to right */
.sw-cell{position:relative}
.sw-cell:not(:last-child)::after{content:"\2192";position:absolute;right:-5px;top:50%;transform:translateY(-52%);font-size:.72rem;line-height:1;color:var(--accent)}
.sw-lane{border-left:2px solid var(--line-2)}

/* layers: one stacked architecture, from the supplier down to notifications */
.dpath-layers .dp-step{margin-left:0;padding-bottom:0}
.dpath-layers .dp-step + .dp-step{margin-top:-1px}
.dpath-layers .dp-step.is-gate{z-index:1}
.dpath-layers .dp-body{position:relative;z-index:0;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;padding:12px 18px 8px 0;border-radius:0;background:var(--bg)}
/* each deeper layer is a little warmer: an accent wash under the text, 1.1% per layer (no color-mix, so the tone is a plain rgb).
   The index column stays untinted so the brass layer number keeps its contrast in the light theme. */
.dpath-layers .dp-body::before{content:"";position:absolute;inset:0 0 0 var(--layer-col,53px);z-index:-1;border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--accent);opacity:calc(var(--i,0) * .011);pointer-events:none}
.dpath-layers .dp-step.is-outcome .dp-body::before{display:none}
.dpath-layers .dp-step:first-child .dp-body{border-radius:var(--r) var(--r) 0 0}
.dpath-layers .dp-step:last-child .dp-body{border-radius:0 0 var(--r) var(--r)}
.dpath-layers .dp-top{grid-column:1;grid-row:1 / 4;align-self:stretch;justify-content:center;align-items:flex-start;margin:-12px 0 -8px;padding-top:15px;border-right:1px solid var(--line)}
.dpath-layers .dp-n{font-size:.74rem}
.dpath-layers .dp-body h3,.dpath-layers .dp-check,.dpath-layers .dp-more{grid-column:2}

/* ---------- illustrative scenario ---------- */
.scn-note{display:flex;align-items:flex-start;gap:10px;max-width:68ch;margin:0 0 18px;font-size:.86rem;color:var(--dim)}
.scn-note::before{content:"";flex:none;width:10px;height:10px;margin-top:5px;box-sizing:border-box;border:1.5px dashed var(--accent);border-radius:1px}
.scn-title{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
.scn-list{border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);overflow:hidden}
.scn-row{display:grid;grid-template-columns:minmax(140px,24%) minmax(0,1fr);border-top:1px solid var(--line)}
.scn-row:first-child{border-top:0}
.scn-k{display:flex;gap:10px;margin:0;padding:14px 16px;border-right:1px solid var(--line);font-family:var(--mono);font-size:.66rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-scenario .cs-h span,.scn-k span{color:var(--brass-ink)}
.scn-v{min-width:0;padding:12px 18px}
.scn-v.is-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px}
.scn-i p{margin:0;font-size:.94rem;line-height:1.5}
.scn-i .scn-b{margin:0 0 3px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink)}
.scn-i .scn-fx{font-family:var(--mono);font-size:1.02rem;letter-spacing:.02em;color:var(--brass-ink)}
.scn-row.is-decision{background:var(--accent-soft)}
:root[data-theme="light"] .scn-row.is-decision{background:var(--bg)}
.scn-row.is-decision .scn-k{color:var(--brass-ink)}
.scn-row.is-decision .scn-v.is-split .scn-i{padding-left:12px;border-left:1px solid var(--accent)}

@media (max-width:1099px){
  .tl-strip{display:none}
}
@media (max-width:980px){
  .dpath-timeline{--lane:116px}
}
@media (prefers-reduced-motion:reduce){
  .dp-more[open] dl{animation:none}
  .dp-more summary,.dp-more summary::before,.gl-go::after{transition:none}
}