/* ===========================================================================
   SolutionsCoding -- こんな課題 / 仕組み (lead) / 導入効果 (+ 向いている組織) /
   導入フロー / 初日から使える装備 (numbers band). Also the lead of チームでの活用.
   Port of the SolutionsChatops page <style> rules (co- -> cd-, green ->
   #B8531A). The 仕組み flow diagram lives in coding-arch.css.
   Motion contract (coding-sections.js): final state is the default; start
   states only under html.cd-motion [data-cd-latch]:not(.cd-seen); transitions
   only under .cd-seen, so entering the start state is instant and nothing
   replays on scroll-back; .cd-now (focus landed inside) kills transitions.
   Transform / opacity only, plus stroke-dashoffset on pathLength=1 paths.
   =========================================================================== */

/* h2 -> content gap. The site .h2 has no bottom margin, and the 導入フロー
   connector right under the h2 would read as an underline. */
.cd-pains, section[data-screen-label="導入効果"] .dc-panel--fig, .cd-flow { margin-top: clamp(24px, 2.6vw, 36px); }

/* ---------- こんな課題: 4 cards, 2 columns from 644px ---------- */
.cd-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(45%, 280px)), 1fr)); gap: 20px; }
.cd-pain {
  background: var(--white); border: 1px solid var(--line-strong); border-left: 3px solid #B8531A;
  padding: 24px 26px; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.9; color: var(--ink);
  word-break: keep-all; /* break only after 、 and at the <wbr> between phrases (設計|思想 split otherwise) */
}
/* One pain at a time, in reading order, 80ms apart; one column: no delay
   (each card latches on its own as it scrolls in). */
html.cd-motion .cd-pain[data-cd-latch]:not(.cd-seen) { opacity: 0; transform: translateY(12px); }
.cd-pain.cd-seen {
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  transition-delay: calc(var(--s, 0) * 80ms);
}
@media (max-width: 643px) { .cd-pain.cd-seen { transition-delay: 0ms; } }

/* ---------- 仕組み lead + its glossary term ---------- */
/* the glossary "?" badge, page-wide (仕組み lead, 特長): the shared 11px of
   home-prototype.css is under this page's 12px floor; the 16px disc stays */
.dc-term-q { font-size: 12px; }
.cd-lead {
  margin: 12px 0 clamp(28px, 3vw, 40px); max-width: 860px;
  font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: var(--muted);
}
/* Underline the word itself (not the 44px-ish button box), so the line does
   not land on the next text line; the button keeps its tap padding. */
.cd-lead .dc-term-btn {
  margin-block: -6px; box-shadow: none;
  transition: color var(--dur-3) var(--ease-soft), transform var(--dur-3) var(--ease-out);
}
.cd-lead .cd-term-t {
  text-decoration: underline; text-decoration-color: #9BB0C4; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-3) var(--ease-soft);
}
.cd-lead .dc-term-q { transition: background-color var(--dur-3) var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .cd-lead .dc-term-btn:hover { color: var(--navy); }
  .cd-lead .dc-term-btn:hover .cd-term-t { text-decoration-color: currentColor; }
  .cd-lead .dc-term-btn:hover .dc-term-q { background-color: var(--navy); }
}
.cd-lead .dc-term-btn:active { transform: translateY(1px); }
.cd-lead .dc-term-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (min-width: 900px) { .cd-lead .dc-term-pop { margin-top: 6px; } }   /* clear the focus ring (see the -6px margin above) */
/* Safari / Firefox have no auto-phrase and would break between any two
   characters: keep-all leaves breaks only after 、。 and at the <wbr> between
   phrases in the markup. The popover keeps normal breaks. */
@supports not (word-break: auto-phrase) {
  .cd-lead { word-break: keep-all; }
  .cd-lead .dc-term-pop { word-break: normal; }
}

/* ---------- 導入効果: BEFORE stays still. 0 arrow draws (0.4s), its head
   at 360ms; 250 AFTER frame fades in; 350 the orange bar grows from the
   left; 650 the 3 points slide in from the arrow side, 90ms apart. Ends at
   about 1.3s. ---------- */
.cd-ba__bar { transform-box: fill-box; transform-origin: left; }
html.cd-motion .cd-ba__arrow { stroke-dasharray: 1; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-ba__arrow { stroke-dashoffset: 1; }
html.cd-motion [data-cd-latch]:not(.cd-seen) :is(.cd-ba__head, .cd-ba__frame) { opacity: 0; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-ba__bar { transform: scaleX(0); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-ba__item { opacity: 0; transform: translateX(-14px); }
.cd-seen .cd-ba__arrow { transition: stroke-dashoffset 0.4s var(--ease-out); }
.cd-seen .cd-ba__head { transition: opacity 0.12s linear 0.36s; }
.cd-seen .cd-ba__frame { transition: opacity 0.35s var(--ease-soft) 0.25s; }
.cd-seen .cd-ba__bar { transition: transform var(--dur-1) var(--ease-out) 0.35s; }
.cd-seen .cd-ba__item {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: calc(650ms + var(--s, 0) * 90ms);
}

/* ---------- 導入フロー ----------
   When the 4 cards sit in one row (container >= 952px = 4 x 220px + 3 x 24px
   gaps, the auto-fit break of the grid) one 3px connector runs across the
   card tops and draws left to right; the card tops turn grey so the orange is
   the connector, and each card's text rises as the tip passes its middle
   (1.2s ease-soft reaches 1/8, 3/8, 5/8, 7/8 at about 230/360/490/720ms).
   Narrower, there is no connector: cards keep their orange top and rise on
   their own. Without container queries: orange tops, no connector, no motion.
   The 3 text tiers (STEP, h3, p) share subgrid rows, so they line up. */
.cd-flow-wrap { container: cd-flow / inline-size; }
.cd-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(22%, 220px)), 1fr)); gap: 24px; }
.cd-flow__step {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; gap: 12px;
  background: var(--white); border: 1px solid var(--line-strong); border-top: 3px solid #B8531A; padding: 28px 26px;
}
.cd-flow__step > * { margin: 0; }
.cd-flow__n { font-size: 14px; font-weight: 700; letter-spacing: 0.18em; color: #B8531A; }
.cd-flow__step h3 { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.cd-flow__p { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.95; color: var(--muted); word-break: keep-all; }
@container cd-flow (min-width: 952px) {
  .cd-flow { position: relative; }
  .cd-flow::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px;
    background: #B8531A; transform-origin: left; pointer-events: none;
  }
  .cd-flow__step { border-top-color: var(--line-strong); }
  html.cd-motion .cd-flow[data-cd-latch]:not(.cd-seen)::before { transform: scaleX(0); }
  html.cd-motion .cd-flow[data-cd-latch]:not(.cd-seen) .cd-flow__step > * { opacity: 0; transform: translateY(12px); }
  .cd-flow.cd-seen::before { transition: transform 1.2s var(--ease-soft); }
  .cd-flow.cd-seen .cd-flow__step > * { transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
  .cd-flow.cd-seen .cd-flow__step:nth-child(1) > * { transition-delay: 230ms; }
  .cd-flow.cd-seen .cd-flow__step:nth-child(2) > * { transition-delay: 360ms; }
  .cd-flow.cd-seen .cd-flow__step:nth-child(3) > * { transition-delay: 490ms; }
  .cd-flow.cd-seen .cd-flow__step:nth-child(4) > * { transition-delay: 720ms; }
}
@container cd-flow (max-width: 951.98px) {
  html.cd-motion .cd-flow__step[data-cd-latch]:not(.cd-seen) { opacity: 0; transform: translateY(12px); }
  .cd-flow__step.cd-seen { transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
  .cd-flow__step.cd-seen:nth-child(even) { transition-delay: 80ms; } /* 2 columns */
}
@container cd-flow (max-width: 463.98px) {
  .cd-flow__step.cd-seen:nth-child(even) { transition-delay: 0ms; } /* 1 column */
}

/* ---------- 導入効果: こんな組織に向いています (avatar.nal.vn/coding imp.who).
   3 columns from 760px; name and text share subgrid rows, so they line up.
   The 3 rise 90ms apart once (one column: no delay). ---------- */
.cd-who-h { margin: clamp(40px, 4.4vw, 64px) 0 4px; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.cd-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.cd-who > li { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 6px; align-content: start; padding: 16px 0 20px; border-bottom: 1px solid var(--line-strong); }
.cd-who b { font-size: 16px; line-height: 1.6; color: #B8531A; }   /* 4.9:1 on white */
.cd-who span { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.9; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 760px) { .cd-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cd-who > li { padding-top: 18px; border-bottom: 0; border-top: 2px solid var(--line-strong); } }
html.cd-motion .cd-who[data-cd-latch]:not(.cd-seen) > li { opacity: 0; transform: translateY(12px); }
.cd-who.cd-seen > li { transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); transition-delay: calc(var(--s, 0) * 90ms); }
@media (max-width: 759.98px) { .cd-who.cd-seen > li { transition-delay: 0ms; } }

/* ---------- 初日から使える装備: 4 numbers (avatar.nal.vn/coding num.*).
   Home's .stat look (home-prototype.css) rebuilt on this page's play-once
   latch: Home's [data-count] / [data-rise] replay on every scroll-back. The 4
   rise 80ms apart, the numbers count once (coding-stats.js, 150ms + 80ms x i,
   0.9s), then each orange rule draws. 2 columns, 4 from 900px. ---------- */
.cd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.2vw, 48px) clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cd-stat { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-stat > p { margin: 0; }
.cd-stat__k { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); white-space: nowrap; }
.cd-stat__v { display: flex; align-items: baseline; gap: 2px; font-size: clamp(40px, 5vw, 64px); font-weight: 900; line-height: 0.95; color: var(--navy); white-space: nowrap; }
.cd-stat__v small { font-size: 0.5em; font-weight: 700; }
.cd-stat__rule { width: 36px; height: 3px; background: #B8531A; transform-origin: left; }
.cd-stat__d { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.85; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
html.cd-motion .cd-stats[data-cd-latch]:not(.cd-seen) > li { opacity: 0; transform: translateY(12px); }
html.cd-motion .cd-stats[data-cd-latch]:not(.cd-seen) .cd-stat__rule { transform: scaleX(0); }
.cd-stats.cd-seen > li { transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.cd-stats.cd-seen .cd-stat__rule { transition: transform var(--dur-2) var(--ease-out) calc(var(--i, 0) * 80ms + 900ms); }

/* Keyboard focus landed inside a latch (.cd-now): show it finished at once. */
:is(.cd-pain, .cd-flow, .cd-flow__step, .dc-fig, .cd-who, .cd-stats).cd-now,
:is(.cd-pain, .cd-flow, .cd-flow__step, .dc-fig, .cd-who, .cd-stats).cd-now *,
.cd-flow.cd-now::before { transition: none !important; }