/* ===========================================================================
   SolutionsCoding -- 特長 crops 03-05, caption, glossary buttons, then the
   motion vocabulary shared by 特長 and 選ばれる理由 (see coding-feat.css).
   =========================================================================== */

/* ---------- 03 コマンド・フック: light command box, suggestions, hook log ---- */
.cd-feat-v3__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px; }
.cd-feat-cmd { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--acc); }
.cd-feat-prompt { font: 700 14px/1 var(--cd-mono); color: var(--acc); }
.cd-feat-type { position: relative; display: inline-block; font: 600 13px/1.4 var(--cd-mono); color: var(--navy); }
/* typing = a white cover sliding off the word in steps; its left edge is the caret */
.cd-feat-cover { position: absolute; top: -2px; bottom: -2px; left: 0; width: 100%; background: #FFF; transform: translateX(100%); }
.cd-feat-cover::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 1.5px; background: var(--acc); }
.cd-feat-sugg { margin-top: 6px; padding: 4px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--cd-line); }
.cd-feat-sugg li { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-radius: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cd-feat-sugg li > * { position: relative; }
.cd-feat-sugg code { min-width: 68px; font-size: 12px; font-weight: 600; color: var(--navy); }
.cd-feat-sel::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--tint); box-shadow: inset 2px 0 0 var(--acc); }
.cd-feat-sel span { color: var(--acc-ink); font-weight: 700; }
.cd-feat-hooks { margin-top: auto; padding-top: 14px; }
.cd-feat-sub { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.cd-feat-hook { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--cd-ok-tint); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--cd-ok); }
.cd-feat-hook > svg { color: var(--cd-ok); }
.cd-feat-hook > span { flex: 1 1 auto; min-width: 0; }
.cd-feat-hook .cd-feat-ck { width: 16px; height: 16px; }
@container (max-width: 439.98px) { .cd-feat-v3__body { padding: 14px; } .cd-feat-sugg code { min-width: 60px; } .cd-feat-sugg li { gap: 8px; } }

/* ---------- 04 ナレッジハブ: request, typing, answer + the past work found ---- */
.cd-feat-v4__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.cd-feat-ai { display: grid; }
.cd-feat-ai > * { grid-area: 1 / 1; }
.cd-feat-ans { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.cd-feat-dots { display: none; }
.cd-feat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--cd-gfx); }
.cd-feat-kcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; width: min(100%, 300px); padding: 9px 12px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1px var(--cd-line), inset 3px 0 0 var(--cd-know); }
.cd-feat-kcard b { min-width: 0; font-size: 14px; line-height: 1.5; color: var(--navy); }
.cd-feat-kcard small { grid-column: 2; font-family: var(--cd-mono); font-size: 13px; color: var(--muted); }
.cd-feat-ref { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 7px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--acc-ink); transform-origin: left center; }
.cd-feat-ref .cd-feat-ic { width: 12px; height: 12px; }
.cd-feat-compose { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; margin-top: auto; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--cd-line); font-size: 13px; color: var(--muted); white-space: nowrap; }
.cd-feat-compose .cd-feat-ic { color: var(--cd-gfx); }
@container (max-width: 439.98px) { .cd-feat-v4__body { padding: 14px; } }

/* ---------- 05 ゲートキーパー・テレメトリ: the AI's command, the block card,
   this month's blocks by week ---------------------------------------------- */
.cd-feat-v5__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.cd-feat-cli { margin-top: 6px; padding: 4px 8px; overflow: hidden; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cd-line-2); font-size: 12px; line-height: 1.6; color: #33475B; white-space: nowrap; text-overflow: clip; }
.cd-feat-block { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--edge); }
.cd-feat-shield { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--acc); color: #FFF; }
.cd-feat-shield .cd-feat-ic { width: 16px; height: 16px; stroke-width: 1.7; }
.cd-feat-block b { display: block; font-size: 14px; line-height: 1.55; color: var(--acc-ink); }
.cd-feat-block small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.5; color: var(--acc-ink); }
.cd-feat-tele { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cd-line-2); }
.cd-feat-tele p { font-size: 13px; line-height: 1.4; color: var(--muted); }
.cd-feat-tele p b { margin-left: 4px; font-size: 18px; color: var(--navy); font-variant-numeric: tabular-nums; }
.cd-feat-bars { display: flex; align-items: flex-end; gap: 12px; }
.cd-feat-bars > span { display: grid; justify-items: center; gap: 3px; }
.cd-feat-bars i { display: block; width: 20px; height: calc(var(--h) * 30px + 3px); border-radius: 2px 2px 0 0; background: var(--acc); transform-origin: center bottom; }
.cd-feat-bars i.cd-feat-zero { background: var(--cd-rule); }
.cd-feat-bars small { font-size: 13px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
/* the week labels arrive with their bars (same --t on the parent span), not before the story reaches them */
html.cd-motion .cd-feat-stage[data-cd-latch]:not(.cd-seen) .cd-feat-bars small { opacity: 0; }
.cd-feat-stage.cd-seen .cd-feat-bars small { transition: opacity 0.35s var(--ease-out); transition-delay: calc(var(--t, 0ms) - 80ms); }
@container (max-width: 439.98px) { .cd-feat-v5__body { padding: 14px; } .cd-feat-bars { gap: 6px; } }

/* ---------- caption, line breaks, glossary buttons (Level 1) -------------- */
.cd-feat-cap { margin: clamp(48px, 5vw, 72px) 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--muted); }
.cd-nw { white-space: nowrap; }
.cd-nw .dc-term-pop { white-space: normal; }   /* a term kept with its particle still gets a wrapping popover */
.cd-feat .dc-term-btn { margin-block: -6px; border-radius: 3px; box-shadow: none; transition: background-color var(--dur-3) var(--ease-soft), transform var(--dur-3) var(--ease-out); }
.cd-feat .cd-term-t { text-decoration: underline; text-decoration-color: #9BB0C4; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .cd-feat .dc-term-btn:hover { background: var(--cd-know-tint); } }
.cd-feat .dc-term-btn:active { transform: translateY(1px); }
.cd-feat .dc-term-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* the -6px margin above shrinks the box the popover hangs from: give the 6px back so a
   focused button's ring is not covered (coding-terms.js fit() only closes positive gaps) */
@media (min-width: 900px) { .cd-feat .dc-term-pop { margin-top: 6px; } }

/* ===========================================================================
   MOTION (spec 3.3 / 3.8). Final frame = default. Start states only under
   html.cd-motion [data-cd-latch]:not(.cd-seen); transitions / animations only
   under .cd-seen. Delay = --o (row offset, 選ばれる理由) x 160ms + --t (beat).
     rise 12px .55s · in 10px .4s · write -6px .35s · slide 14px .45s
     up 14px .45s · drop -6px .3s · fade .3s · pop .6 -> 1.08 -> 1 .35s
     grow scaleY .6s · type steps(7) .6s
   =========================================================================== */
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-rise { opacity: 0; transform: translateY(12px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-in { opacity: 0; transform: translateY(10px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-write { opacity: 0; transform: translateX(-6px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-slide { opacity: 0; transform: translateX(-14px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-up { opacity: 0; transform: translateY(14px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-drop { opacity: 0; transform: translateY(-6px); }
html.cd-motion [data-cd-latch]:not(.cd-seen) :is(.cd-feat-fade, .cd-feat-pop) { opacity: 0; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-sel::before { opacity: 0; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-grow { transform: scaleY(0); }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-cover { transform: none; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-node { opacity: 0; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-node__b { opacity: 0.4; }
html.cd-motion [data-cd-latch]:not(.cd-seen) .cd-feat-node + .cd-feat-node::after { transform: var(--leg0); }

html.cd-motion .cd-seen :is(.cd-feat-rise, .cd-feat-in, .cd-feat-write, .cd-feat-slide, .cd-feat-up, .cd-feat-drop, .cd-feat-fade, .cd-feat-grow, .cd-feat-node__b) { transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); transition-delay: calc(var(--o, 0) * 160ms + var(--t, 0ms)); }
html.cd-motion .cd-seen .cd-feat-rise { transition-duration: var(--dur-1); }
html.cd-motion .cd-seen .cd-feat-in { transition-duration: 0.4s; }
html.cd-motion .cd-seen :is(.cd-feat-slide, .cd-feat-up) { transition-duration: 0.45s; }
html.cd-motion .cd-seen .cd-feat-drop { transition-duration: 0.3s; }
html.cd-motion .cd-seen .cd-feat-grow { transition-duration: 0.6s; }
html.cd-motion .cd-seen .cd-feat-pop { animation: cd-feat-pop 0.35s var(--ease-out) calc(var(--o, 0) * 160ms + var(--t, 0ms)) both; }
html.cd-motion .cd-seen .cd-feat-sel::before { transition: opacity 0.25s var(--ease-soft) 1250ms; }
/* 02: nodes show faint together (stagger 60), each lights up when the line reaches it */
html.cd-motion .cd-seen .cd-feat-node { transition: opacity 0.3s var(--ease-out) calc(var(--i, 0) * 60ms); }
html.cd-motion .cd-seen .cd-feat-node + .cd-feat-node::after { transition: transform 0.45s var(--ease-soft) calc(var(--t) - 450ms); }
/* 03: "/review" typed 200-800ms, then the caret blinks 3 times and rests */
html.cd-motion .cd-seen .cd-feat-cover { animation: cd-feat-type 0.6s steps(7, end) 0.2s both; }
html.cd-motion .cd-seen .cd-feat-cover::before { animation: cd-feat-blink 0.6s linear 0.85s 3; }
/* 04: three dots while the AI looks things up (400-1200ms) */
html.cd-motion .cd-feat-dots { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 12px 12px 12px 4px; background: #F1F3F5; align-self: start; justify-self: start; opacity: 0; }
html.cd-motion .cd-seen .cd-feat-dots { animation: cd-feat-life 0.8s var(--ease-soft) 0.4s both; }
html.cd-motion .cd-seen .cd-feat-dots i { animation: cd-feat-dot 0.4s ease-in-out calc(0.45s + var(--k, 0) * 0.12s) 2 alternate; }
.cd-feat-dots i:nth-child(2) { --k: 1; }
.cd-feat-dots i:nth-child(3) { --k: 2; }

/* 特長 text column: number, title, text rise with their window (0 / 80 / 160).
   Keyed on the window's latch through :has() (no :has = static text); a
   focused term button keeps its column visible at once. */
html.cd-motion .cd-feat-row:has(> .cd-feat-stage:not(.cd-seen)):not(:focus-within) .cd-feat-text > * { opacity: 0; transform: translateY(12px); }
html.cd-motion .cd-feat-row:has(> .cd-feat-stage.cd-seen) .cd-feat-text > * { transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-out); }
html.cd-motion .cd-feat-row:has(> .cd-feat-stage.cd-seen) .cd-feat-text > :nth-child(2) { transition-delay: 80ms; }
html.cd-motion .cd-feat-row:has(> .cd-feat-stage.cd-seen) .cd-feat-text > :nth-child(3) { transition-delay: 160ms; }

/* Keyboard focus inside a 特長 / 理由 latch (.cd-now): jump to the final frame.
   Scoped to these latches on purpose: the 画面イメージ mock keeps its own
   transition-only .cd-now rule (coding-mock.css), so its tab animations live on. */
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now,
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now::before,
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now::after,
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now *,
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now *::before,
html.cd-motion :is(.cd-feat-stage, .cd-why-band, .cd-why-item).cd-now *::after { transition: none !important; animation: none !important; }
html.cd-motion .cd-feat-stage.cd-now .cd-feat-dots { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cd-feat-stage *, .cd-feat-stage *::before, .cd-feat-stage *::after, .cd-why *, .cd-why *::before, .cd-why *::after { transition: none !important; animation: none !important; }
  .cd-feat-dots { display: none !important; }
}

@keyframes cd-feat-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes cd-feat-type { from { transform: none; } to { transform: translateX(100%); } }
@keyframes cd-feat-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cd-feat-life { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cd-feat-dot { to { transform: translateY(-3px); opacity: 0.5; } }