/* Work section: network map + case detail. The block is navy in both themes,
   like the opening section and the cards it replaces. Colors are theme tokens. */
.work-map {
  margin-top: clamp(24px, 4vw, 48px);
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 18px;
  background: var(--section-dark);
  color: var(--on-dark);
}
.wm-body { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.wm-pick { min-width: 0; }
.wm-hint { margin: 0 0 14px; color: var(--on-dark); font-size: 14px; font-weight: 600; line-height: 1.4; }
.wm-hint span { color: var(--on-dark-muted); font-weight: 500; }

/* Area accordion. Each area sets --area; opening is a grid-template-rows
   transition (0fr to 1fr), so nothing is measured in script. */
.wm-acc { display: grid; gap: 8px; }
.wa { border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent); border-radius: 14px; transition: background 220ms ease-out, border-color 220ms ease-out; }
.wa.is-open { background: color-mix(in srgb, var(--area) 6%, transparent); border-color: color-mix(in srgb, var(--area) 55%, transparent); }
.wa-h { margin: 0; font: inherit; }
.wa-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px;
  border: 0; border-radius: 13px; background: transparent; color: var(--on-dark); font: inherit; text-align: left; cursor: pointer;
}
.wa-head:hover { background: color-mix(in srgb, var(--on-dark) 4%, transparent); }
.wa-head:focus-visible, .wa-row:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wa-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--area); }
.wa-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wa-name b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.wa-name small { color: var(--on-dark-muted); font-size: 12px; line-height: 1.35; }
.wa-count { flex: none; color: var(--area); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
.wa-chev { flex: none; color: var(--on-dark-muted); transition: transform 220ms ease-out; }
.wa-head[aria-expanded="true"] .wa-chev { transform: rotate(90deg); }

.wa-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 220ms ease-out, visibility 0s linear 220ms; }
.wa.is-open .wa-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 220ms ease-out; }
.wa-clip { min-height: 0; overflow: hidden; }
.wa-list { display: grid; gap: 2px; padding: 0 8px 8px; }
.wa-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--on-dark); font: inherit; text-align: left; cursor: pointer;
}
.wa-row:focus-visible { outline-offset: -2px; }
.wa-row:hover { background: color-mix(in srgb, var(--on-dark) 6%, transparent); }
.wa-row.is-selected { background: color-mix(in srgb, var(--area) 16%, transparent); }
.wa-num { color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; }
.wa-title { overflow: hidden; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.wa-metric { min-width: 0; max-width: 160px; overflow: hidden; color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.wa-go { color: var(--on-dark-muted); font-size: 13px; transition: color 160ms ease-out; }
.wa-row.is-selected .wa-go { color: var(--area); }

.wm-detail {
  min-width: 0; min-height: 420px; padding: clamp(14px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); border-radius: 14px;
  position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow-y: auto;
  border-top: 2px solid var(--area, var(--coral));
  background: color-mix(in srgb, var(--on-dark) 4%, transparent);
}
.wm-detail:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.wd-num { color: var(--coral); font-family: var(--mono); font-size: 12px; }
.wd-type { color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }
.wd-type em { display: block; margin-top: 5px; font-style: normal; letter-spacing: 0.04em; text-transform: none; }
.wd-code { margin: 14px 0 0; color: var(--area, var(--coral)); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.wd-title { margin: 6px 0 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }
.wd-sub { margin: 8px 0 0; color: var(--on-dark-soft); font-size: 13px; font-weight: 600; line-height: 1.45; }
.wd-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); }
.wd-metrics strong { display: block; font-size: clamp(17px, 1.9vw, 22px); font-weight: 700; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.wd-metrics span { display: block; margin-top: 4px; color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.wd-desc { margin: 16px 0 0; color: var(--on-dark-soft); font-size: 13px; line-height: 1.6; }
.wd-note { margin: 12px 0 0; color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.wd-role { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--coral); background: color-mix(in srgb, var(--coral) 8%, transparent); color: var(--on-dark-soft); font-size: 12px; line-height: 1.55; }
.wd-role strong { color: var(--on-dark); }
.wd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wd-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent); border-radius: 999px; color: var(--on-dark-soft); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-decoration: none; }
.wd-links a:hover { color: var(--on-dark); border-color: var(--on-dark); }
.wd-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: var(--on-fill); font-size: 12px; font-weight: 800; text-decoration: none; }
.wd-open:hover { background: var(--blue-hover); }
.wd-links a.wd-live { border-color: var(--area, var(--coral)); color: var(--area, var(--coral)); }
.wd-links a.wd-live:hover { color: var(--on-dark); border-color: var(--on-dark); }

/* How it works and Methods, between the notes and the results. */
.wd-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); }
.wd-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wd-kicker { margin: 0; color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.wd-play { min-height: 36px; padding: 0 14px; border: 1px solid var(--area, var(--coral)); border-radius: 999px; background: transparent; color: var(--area, var(--coral)); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.wd-play:hover { color: var(--on-dark); border-color: var(--on-dark); }
.wd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.wd-steps li { display: flex; min-width: 0; }
.wd-step {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 88px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); border-radius: 10px; background: transparent; color: var(--on-dark);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.wd-steps li:not(:last-child) .wd-step::after { content: ""; position: absolute; top: 25px; right: -11px; width: 12px; height: 2px; background: color-mix(in srgb, var(--on-dark) 16%, transparent); }
.wd-step:hover { border-color: var(--on-dark); }
.wd-step[aria-pressed="true"] { border-color: var(--area, var(--coral)); background: color-mix(in srgb, var(--area, var(--coral)) 12%, transparent); }
.wd-step-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.wd-step-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--on-dark) 8%, transparent); color: var(--on-dark-muted); }
.wd-step[aria-pressed="true"] .wd-step-ico, .wd-step.is-past .wd-step-ico { background: var(--area, var(--coral)); color: var(--section-dark); }
.wd-steps li .wd-step.is-past::after { background: var(--area, var(--coral)); }
.wd-step-name { color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wd-step[aria-pressed="true"] .wd-step-name { color: var(--area, var(--coral)); }
.wd-step-label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.wd-step-line { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; color: var(--on-dark); font-size: 14px; line-height: 1.45; }
.wd-step-n { flex: none; color: var(--area, var(--coral)); font-family: var(--mono); font-size: 12px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wd-chip { min-height: 36px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent); border-radius: 999px; background: transparent; color: var(--on-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }
.wd-chip:hover { border-color: var(--on-dark); }
.wd-chip[aria-pressed="true"] { border-color: var(--area, var(--coral)); background: var(--area, var(--coral)); color: var(--section-dark); }
.wd-def { margin: 8px 0 0; color: var(--on-dark-soft); font-size: 13px; line-height: 1.5; }
.wd-play:focus-visible, .wd-step:focus-visible, .wd-chip:focus-visible, .wd-links a:focus-visible, .wd-open:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

@media (max-width: 899px) {
  .wm-body { grid-template-columns: minmax(0, 1fr); }
  .wm-detail { position: static; min-height: 0; max-height: none; overflow: visible; }
}
@media (max-width: 599px) {
  .wa-head { padding: 10px 12px; }
  .wa-row { grid-template-columns: 22px minmax(0, 1fr) 16px; grid-template-areas: "num title go" ". metric go"; row-gap: 2px; padding: 8px 8px; }
  .wa-num { grid-area: num; }
  .wa-title { grid-area: title; }
  .wa-metric { grid-area: metric; max-width: none; }
  .wd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wd-steps li .wd-step::after { display: none; }
  .wd-play, .wd-chip { min-height: 44px; }
  .wa-go { grid-area: go; }
}
@media (prefers-reduced-motion: reduce) { .wa, .wa-chev, .wa-panel, .wa.is-open .wa-panel, .wa-go, .wd-step, .wd-chip { transition: none; } }