/* ===========================================================================
   SolutionsCoding -- チームでの活用: the shared backlog of the AVATAR flyer
   (Nam, 2026-07-28, page 2), drawn as the board itself (a product vignette).
   Lanes 要望 → 仕様 → タスク分解 → 受け入れ条件 → 開発者の手元へ:
     · 要望 (入り口): the customer's one request. Its progress bar fills as
       the later lanes finish: the customer follows on the same board.
     · 仕様 / タスク分解 / 受け入れ条件: written by AVATAR (blue bar + tag).
       Each names the 仕組み knowledge card it used, in that card's own icon
       and orange tile, so the two sections read as one story.
     · 開発者の手元へ (出口): every developer gets their own task.
   Colours: お客様 amber · プロキシPO navy · AVATAR logo blue · 開発チーム
   green · organisational knowledge orange (as in 仕組み).
   Layout: five lanes side by side from 1000px; 640-999px each lane is a row
   (header left, cards right, tasks three across); below 640px all stacks.
   Motion lives in coding-team.js (WAAPI). The start states below apply only
   under html.cd-motion to a lane without .cd-seen, so no JS, reduced motion
   and print all show the finished board. Cursors and rings rest at opacity 0.
   =========================================================================== */
.cd-team { --tb-client: #F0A836; --tb-client-ink: #8A5B00; --tb-client-bg: #FDF1DC; --tb-po: #102A43; --tb-po-bg: #E7EDF4; --tb-ai: #2A52C9; --tb-dev: #2A7240; --tb-dev-bg: #E5F1E9; --tb-know: #B8531A; --tb-know-ink: #9A4413; --tb-know-bg: #FBEADF; --tb-lane: #F3F6F9; --tb-lane-ai: #EFF3FD; --tb-hot: #F2B705; --tb-hot-rim: #9A7000; }
.cd-team__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cd-tb svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:where(.cd-tb) :where(p, ul, ol) { margin: 0; }
.cd-tb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- request picker (amber dot = not tried yet) ---------- */
.cd-tb-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 20px; }
.cd-tb-pick__l { flex: 1 0 100%; margin: 0 0 4px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.8; color: var(--ink); }
html:not(.js) .cd-tb-pick, .cd-tb-pick[hidden] { display: none; }   /* chips need the script and its #cd-tb-data */
.cd-tb-chip { appearance: none; position: relative; display: inline-flex; align-items: center; min-height: 34px; margin: 0; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; color: var(--navy); cursor: pointer; transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--ease-out); }
.cd-tb-chip::before { content: ""; position: absolute; inset: -6px -3px; }
.cd-tb-chip[aria-pressed="true"] { border-color: var(--tb-know); background: #FBEFE7; color: #9A4413; cursor: default; }
.cd-tb-chip:disabled { cursor: default; }
.cd-tb-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cd-tb-chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--tb-know); transform: translateY(-1px); } }
.cd-tb-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--tb-hot-rim); border-radius: 50%; background: var(--tb-hot); pointer-events: none; }
.cd-tb-dot::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--tb-hot); border-radius: 50%; opacity: 0; }
html.cd-motion .cd-tb-dot::after { animation: cd-tb-pulse 1.6s ease-out 3; }
@keyframes cd-tb-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- board head: name + who is on it ---------- */
.cd-tb-board { position: relative; overflow-x: clip; }
.cd-tb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cd-tb-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cd-tb .cd-tb-title__ic { align-self: center; width: 16px; height: 16px; color: var(--tb-know); fill: currentColor; stroke: none; }
.cd-tb-title b { font-size: 15.5px; line-height: 1.5; color: var(--navy); }
.cd-tb-title span { font-size: 13px; color: var(--muted); }
.cd-tb-who { display: flex; align-items: center; padding-left: 6px; }
.cd-tb-av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--white); font-size: 12px; font-weight: 700; line-height: 1; }
.cd-tb-av svg { width: 15px; height: 15px; }
.cd-tb-av--client, .cd-tb-mini--client { background: var(--tb-client-bg); color: var(--tb-client-ink); }
.cd-tb-av--po, .cd-tb-mini--po { background: var(--tb-po); color: var(--white); }
.cd-tb-av--ai { background: var(--white); box-shadow: 0 0 0 2px var(--white), inset 0 0 0 1px var(--line-strong); }
.cd-tb-av--ai img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cd-tb-av--dev, .cd-tb-mini--dev, .cd-tb-as { background: var(--tb-dev-bg); color: var(--tb-dev); }
.cd-tb-ring { position: absolute; inset: -4px; border: 2px solid var(--tb-ai); border-radius: 50%; opacity: 0; pointer-events: none; }
.cd-tb-ring[data-who="client"] { border-color: var(--tb-client); }
.cd-tb-ring[data-who="po"] { border-color: var(--tb-po); }
.cd-tb-ring[data-who="dev"] { border-color: var(--tb-dev); }

/* ---------- lanes ---------- */
.cd-tb-lanes { list-style: none; padding: 0; display: grid; gap: 12px; }
.cd-tb-lane { --lb: var(--tb-lane); position: relative; min-width: 0; padding: 10px; border-radius: 12px; background: var(--lb); }
.cd-tb-lane--ai { --lb: var(--tb-lane-ai); }
.cd-tb-lh { padding: 2px 4px 10px; }
.cd-tb-stage { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--navy); }
.cd-tb-n { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.cd-tb-gate { margin-left: auto; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: .08em; color: var(--tb-know); }
.cd-tb-by { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cd-tb-mini { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--lb); font-size: 12px; font-weight: 700; line-height: 1; }
.cd-tb-mini + .cd-tb-mini { margin-left: -11px; }
.cd-tb-mini svg { width: 13px; height: 13px; }
.cd-tb-mini--ai { background: var(--white); }
.cd-tb-mini--ai svg { width: 16px; height: 16px; }

/* ---------- cards (blue bar = written by AVATAR) ---------- */
.cd-tb-card { position: relative; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 8px 18px -14px rgba(16, 42, 67, .28); }
.cd-tb-card--ai { padding-left: 15px; }
.cd-tb-aibar { position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tb-ai); transform-origin: 50% 0; }
.cd-tb-id { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-bottom: 6px; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.cd-tb-aitag { display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1.4 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--tb-ai); white-space: nowrap; }
.cd-tb-aitag svg { width: 14px; height: 14px; }
.cd-tb-req, .cd-tb-t { font-size: 14px; font-weight: 700; line-height: 1.65; color: var(--navy); }
.cd-tb-t { margin-bottom: 6px; }
.cd-tb-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.cd-tb-prog { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.cd-tb-segs { display: flex; flex: 1; gap: 3px; }
.cd-tb-segs i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cd-tb-segs b { display: block; height: 100%; background: var(--tb-po); transform-origin: 0 50%; }
.cd-tb-segs i:last-child b { background: var(--tb-dev); }
.cd-tb-list, .cd-tb-tasks, .cd-tb-checks, .cd-tb-inbox { list-style: none; padding: 0; display: grid; }
.cd-tb-list { gap: 3px; }
.cd-tb-list li { position: relative; padding-left: 12px; font-size: 13px; line-height: 1.65; color: var(--ink); }
.cd-tb-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 4px; height: 4px; border-radius: 50%; background: var(--tb-ai); }
.cd-tb-ref { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--tb-know-ink); }
.cd-tb-lane > .cd-tb-ref { margin: 10px 4px 2px; }
.cd-tb-ref__ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--tb-know-bg); color: var(--tb-know); }
.cd-tb-ref__ic svg { width: 14px; height: 14px; stroke-width: 2; }
.cd-tb-oks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cd-tb-ok { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.cd-tb-ok svg, .cd-tb-got svg { width: 13px; height: 13px; stroke-width: 2.6; }
.cd-tb-ok--client { background: var(--tb-client-bg); color: var(--tb-client-ink); }
.cd-tb-ok--po { background: var(--tb-po-bg); color: var(--tb-po); }
.cd-tb-tasks { gap: 8px; }
.cd-tb-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; padding: 9px 10px 10px 14px; }
.cd-tb-task .cd-tb-id { grid-column: 1 / -1; margin-bottom: 2px; }
.cd-tb-tt { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.cd-tb-as { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; }
.cd-tb-checks { gap: 6px; }
.cd-tb-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; font-size: 13px; line-height: 1.65; color: var(--ink); }
.cd-tb-box { position: relative; width: 16px; height: 16px; margin-top: 3px; box-sizing: border-box; border: 1.5px solid #B7C3D1; border-radius: 4px; background: var(--white); }
.cd-tb-box b { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 4px; background: var(--tb-ai); color: var(--white); }
.cd-tb-box svg { width: 11px; height: 11px; stroke-width: 3; }
.cd-tb-cap { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cd-tb-inbox { gap: 7px; }
.cd-tb-in { display: flex; align-items: center; gap: 8px; }
.cd-tb-inid { flex: 1; min-width: 0; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy); }
.cd-tb-inid--t { font: 700 13px/1.4 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; }
.cd-tb-as--qa { letter-spacing: -.04em; }
.cd-tb-got { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--tb-dev); }
.cd-tb-done { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--tb-dev-bg); font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--tb-dev); }
.cd-tb-done svg { width: 14px; height: 14px; margin-top: 3px; stroke-width: 2.6; }
.cd-tb .cd-tb-note { max-width: 44em; margin-top: 18px; font-size: 14px; line-height: 1.9; color: var(--muted); }
.cd-tb .cd-tb-fine { margin: 6px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---------- live cursors (wide screens, only while the story plays) ---------- */
.cd-tb-curs { position: absolute; inset: 0; pointer-events: none; }
.cd-tb-cur { --c: var(--tb-ai); --ci: var(--white); position: absolute; left: 0; top: 0; opacity: 0; }
.cd-tb-cur[data-who="client"] { --c: var(--tb-client); --ci: var(--navy); }
.cd-tb-cur[data-who="po"] { --c: var(--tb-po); }
.cd-tb-cur[data-who="dev"] { --c: var(--tb-dev); }
.cd-tb .cd-tb-cur > svg { width: 16px; height: 16px; fill: var(--c); stroke: var(--white); stroke-width: 1.3; filter: drop-shadow(0 1px 1.5px rgba(16, 42, 67, .3)); }
.cd-tb-cur b { position: absolute; left: 12px; top: 15px; width: max-content; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; background: var(--c); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--ci); white-space: nowrap; box-shadow: 0 2px 6px -1px rgba(16, 42, 67, .25); }
.cd-tb-cur--flip b { left: auto; right: 10px; top: -26px; }
.cd-tb-cur__face { display: block; width: 20px; height: 20px; margin-left: -4px; border-radius: 50%; background: var(--white); }

/* ---------- Avatar peeking over the タスク分解 lane (from 1024px) ---------- */
.cd-tb-peek { display: none; }
@media (min-width: 1024px) {
  .cd-tb-peek { position: absolute; bottom: 100%; left: 50%; z-index: 2; display: block; width: 62%; overflow: hidden; transform: translateX(-50%); pointer-events: none; }
  .cd-tb-peek img { display: block; width: 100%; height: auto; }
}

/* ---------- 640-999px: each lane is a row ---------- */
@media (min-width: 640px) and (max-width: 999.98px) {
  .cd-tb-lane { display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .cd-tb-lh { padding: 4px 0 0 4px; }
  .cd-tb-lane > :not(.cd-tb-lh) { grid-column: 2; }
}
@media (min-width: 760px) and (max-width: 999.98px) { .cd-tb-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- below 640px: lane header on one line, tasks as one-line rows ---------- */
@media (max-width: 639.98px) {
  .cd-tb-lh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
  .cd-tb-by { margin-top: 0; }
  .cd-tb-gate { margin-left: 4px; }
  .cd-tb-task { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .cd-tb-task .cd-tb-id { grid-column: auto; margin-bottom: 0; }
}
@media (max-width: 999.98px) {
  .cd-tb-lanes { gap: 16px; }
  .cd-tb-lane + .cd-tb-lane::before { content: ""; position: absolute; left: 26px; top: -16px; width: 2px; height: 16px; background: var(--line-strong); }
}
/* ---------- from 1000px: five lanes side by side ---------- */
@media (min-width: 1000px) {
  .cd-tb-lanes { grid-template-columns: .9fr 1.15fr 1.1fr 1.1fr 1.05fr; }
}

/* ---------- start states (coding-team.js plays them) ---------- */
html.cd-motion .cd-tb-lane:not(.cd-seen) :is(.cd-tb-a, .cd-tb-w, .cd-tb-pop) { opacity: 0; }
html.cd-motion .cd-tb-lane:not(.cd-seen) .cd-tb-aibar { transform: scaleY(0); }
html.cd-motion .cd-tb-lane[data-k="0"]:not(.cd-seen) .cd-tb-segs i:nth-child(1) b,
html.cd-motion .cd-tb:has(.cd-tb-lane[data-k="1"]:not(.cd-seen)) .cd-tb-segs i:nth-child(2) b,
html.cd-motion .cd-tb:has(.cd-tb-lane[data-k="2"]:not(.cd-seen)) .cd-tb-segs i:nth-child(3) b,
html.cd-motion .cd-tb:has(.cd-tb-lane[data-k="3"]:not(.cd-seen)) .cd-tb-segs i:nth-child(4) b,
html.cd-motion .cd-tb:has(.cd-tb-lane[data-k="4"]:not(.cd-seen)) .cd-tb-segs i:nth-child(5) b { transform: scaleX(0); }
html.cd-motion .cd-tb:has(.cd-tb-lane[data-k="4"]:not(.cd-seen)) .cd-tb-peek img { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .cd-tb-chip { transition: none; }
  .cd-tb-chip:hover { transform: none !important; }
}