/* ===========================================================================
   SolutionsCoding -- 画面イメージ, part 2: what each of the 6 panels shows,
   their own motion beats, and the responsive rules. Tokens and the shared
   parts are in coding-mock.css (load that first).
   Lists are ARIA tables (role=table/row/cell) on CSS grid, so they can turn
   into stacked cards on a narrow window without losing their meaning. Narrow
   (cards) is the default; the window's main column is a container (cdm) and
   each list switches to aligned columns (subgrid) once it has room.
   =========================================================================== */

/* ---- rows: narrow default = stacked cards --------------------------------- */
.cd-mock-grid { position: relative; display: grid; gap: 8px; }
/* stacked cards hide the header row visually only: screen readers keep the
   column headers (display:none would drop them from the table) */
.cd-mock-tr.cd-mock-th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cd-mock-tr { display: grid; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--cd-ln); border-radius: 8px; background: transparent; font-size: 13px; line-height: 1.6; color: var(--ink); }
.cd-mock-tr.is-sel { border-color: var(--edge); background: #FFFAF6; box-shadow: inset 3px 0 0 var(--acc); }
.cd-c-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.cd-c-scope, .cd-c-date { color: var(--muted); font-size: 13px; }
.cd-c-date { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-c-st { display: flex; }
.cd-c-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-mock-grid--skill .cd-mock-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name st" "scope date"; }
.cd-mock-grid--skill .cd-c-name { grid-area: name; } .cd-mock-grid--skill .cd-c-st { grid-area: st; justify-self: end; }
.cd-mock-grid--skill .cd-c-scope { grid-area: scope; } .cd-mock-grid--skill .cd-c-date { grid-area: date; justify-self: end; }
.cd-mock-grid--gate .cd-mock-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "st scope"; row-gap: 8px; }
.cd-mock-grid--gate .cd-c-name { grid-area: name; } .cd-mock-grid--gate .cd-c-st { grid-area: st; } .cd-mock-grid--gate .cd-c-scope { grid-area: scope; }
.cd-mock-grid--model .cd-mock-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name st" "scope scope"; }
.cd-mock-grid--model .cd-c-name { grid-area: name; } .cd-mock-grid--model .cd-c-st { grid-area: st; } .cd-mock-grid--model .cd-c-scope { grid-area: scope; padding-left: 34px; }
.cd-mono { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; background: var(--cd-neu-bg); font-size: 12px; font-weight: 700; color: var(--cd-neu); }
.cd-mono--logo { background: var(--white); box-shadow: inset 0 0 0 1px var(--cd-ln); }   /* the model's official mark (assets/logos) */
.cd-mono--logo img { display: block; width: 15px; height: 15px; }

/* tab 2: process timeline -- numbered steps joined by a line, top to bottom */
.cd-mock-grid--agent { gap: 10px; }
.cd-mock-grid--agent .cd-mock-tr { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "step name" "step task" "step tags"; align-items: start; }
.cd-mock-grid--agent .cd-c-step { grid-area: step; align-self: stretch; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--acc-ink); white-space: nowrap; }
.cd-mock-grid--agent .cd-c-name { grid-area: name; } .cd-mock-grid--agent .cd-c-task { grid-area: task; } .cd-mock-grid--agent .cd-c-tags { grid-area: tags; padding-top: 4px; }
.cd-step { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1.5px solid var(--acc); border-radius: 50%; background: var(--white); font-size: 12px; font-weight: 700; color: var(--acc-ink); font-variant-numeric: tabular-nums; }
.cd-mock-grid--agent .cd-c-step::after { content: ""; position: absolute; top: 47px; left: 50%; width: 2px; height: calc(100% - 11px); margin-left: -1px; border-radius: 2px; background: var(--edge); transform-origin: top; }
.cd-mock-grid--agent .cd-mock-tr:last-child .cd-c-step::after { display: none; }

/* ---- aligned columns once the window has room (subgrid; the fixed tracks
   keep columns aligned in browsers without subgrid too) ---------------------- */
@container cdm (min-width: 560px) {
  .cd-mock-grid:not(.cd-mock-grid--agent) { gap: 0; column-gap: 16px; }
  .cd-mock-grid:not(.cd-mock-grid--agent) .cd-mock-tr.cd-mock-th { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .cd-mock-grid:not(.cd-mock-grid--agent) .cd-mock-tr { grid-column: 1 / -1; grid-template-columns: var(--cols); grid-template-columns: subgrid; grid-template-areas: none; min-height: 52px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--cd-ln2); border-radius: 0; }
  .cd-mock-grid:not(.cd-mock-grid--agent) .cd-mock-tr > * { grid-area: auto; padding-left: 0; justify-self: start; }
  .cd-mock-grid .cd-mock-tr.cd-mock-th { min-height: 36px; background: var(--surface); border-bottom-color: var(--cd-ln); border-radius: 6px 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
  .cd-mock-grid--skill { grid-template-columns: var(--cols); --cols: minmax(0, 1.5fr) minmax(0, 1fr) 96px 112px; }
  .cd-mock-grid--gate { grid-template-columns: var(--cols); --cols: minmax(0, 1fr) 160px 112px; }
  .cd-mock-grid--model { grid-template-columns: var(--cols); --cols: minmax(0, 1fr) minmax(0, 1fr) 112px; }
  .cd-c-scope { color: var(--ink); }
}
@container cdm (min-width: 720px) {
  .cd-mock-grid--agent { gap: 0; column-gap: 16px; grid-template-columns: var(--cols); --cols: 104px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .cd-mock-grid--agent .cd-mock-tr { grid-column: 1 / -1; grid-template-columns: var(--cols); grid-template-columns: subgrid; grid-template-areas: none; align-items: center; min-height: 58px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--cd-ln2); border-radius: 0; }
  .cd-mock-grid--agent .cd-mock-tr.cd-mock-th { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .cd-mock-grid--agent .cd-mock-tr > * { grid-area: auto; padding-top: 0; }
  .cd-mock-grid--agent .cd-c-step { flex-direction: row; gap: 10px; color: var(--navy); }
  .cd-mock-grid--agent .cd-c-step::after { top: calc(50% + 13px); left: 12px; height: calc(100% - 26px + 1px); }
}

/* ---- tab 1: list + preview of the selected skill --------------------------- */
.cd-mock-split { display: grid; gap: 16px; }
/* preview beside the list when there is room; under it, its 3 rules sit in a row */
@container cdm (min-width: 600px) and (max-width: 799px) { .cd-mock-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } }
@container cdm (min-width: 800px) { .cd-mock-split { grid-template-columns: minmax(0, 1fr) 272px; align-items: start; } .cd-mock-pv { --sx: -14px; --sy: 0px; } }
.cd-mock-pv { padding: 16px 18px; border: 1px solid var(--edge); border-top: 3px solid var(--acc); border-radius: 8px; background: var(--white); }
.cd-mock-pv__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--navy); }
.cd-mock-pv__scope { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.cd-mock-rules { margin: 0; padding: 0; list-style: none; counter-reset: cdr; border-top: 1px solid var(--cd-ln2); }
.cd-mock-rules li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cd-ln2); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.7; color: var(--ink); counter-increment: cdr; }
.cd-mock-rules li::before { content: counter(cdr); display: grid; place-items: center; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 4px; background: var(--tint); font-size: 12px; font-weight: 700; color: var(--acc-ink); font-variant-numeric: tabular-nums; }
.cd-mock-pv__f { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- tab 3: knowledge search ------------------------------------------------ */
.cd-mock-search { display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0 0 6px; padding: 0 14px; border: 1px solid var(--acc); border-radius: 8px; box-shadow: 0 0 0 3px var(--tint); font-size: 15px; font-weight: 700; color: var(--navy); }
.cd-mock-search svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.cd-mock-search::after { content: ""; order: 1; width: 1.5px; height: 18px; margin-left: -8px; background: var(--acc); }   /* caret after the query */
.cd-mock-search__n { order: 2; margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-mock-hits { margin: 0; padding: 0; list-style: none; }
.cd-mock-hits li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--cd-ln2); }
.cd-mock-doc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--cd-kn-bg); color: var(--cd-kn); }
.cd-mock-doc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cd-mock-hit { min-width: 0; }
.cd-mock-hit b { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.cd-mock-hit small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.cd-mock-hit code { padding: 0 5px; border-radius: 3px; background: var(--cd-neu-bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--cd-neu); }
.cd-mark { position: relative; isolation: isolate; padding: 0 1px; background: none; color: inherit; }
.cd-mark::before { content: ""; position: absolute; z-index: -1; inset: 2px -1px 1px; border-radius: 2px; background: var(--tint); box-shadow: inset 0 -2px 0 var(--acc); transform-origin: left; }
.cd-mock-ref { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-mock-ref em { margin: 0 2px; font-style: normal; font-size: 16px; font-weight: 700; color: var(--navy); }

/* ---- tab 4: rules + recent log ---------------------------------------------- */
.cd-mock-log { margin: 18px 0 0; }
.cd-mock-log ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cd-ln); }
.cd-mock-log li { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--cd-ln2); font-size: 13px; line-height: 1.6; color: var(--ink); }
.cd-mock-log time { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
@container cdm (max-width: 519px) { .cd-mock-log li { grid-template-columns: 44px minmax(0, 1fr); } .cd-mock-log li .cd-pill { justify-self: start; } .cd-mock-log__t { grid-column: 2; } }

/* ---- tab 5: numbers + bar chart --------------------------------------------- */
.cd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cd-kpi:last-child { grid-column: 1 / -1; }
.cd-kpi { display: grid; grid-template-rows: auto auto auto; padding: 14px 16px; border: 1px solid var(--cd-ln); border-radius: 8px; }
.cd-kpi p { margin: 0; }
.cd-kpi__k { font-size: 13px; font-weight: 700; color: var(--muted); }
.cd-kpi .cd-kpi__v { display: flex; align-items: baseline; gap: 3px; margin: 2px 0; font-size: 28px; font-weight: 700; line-height: 1.35; color: var(--navy); font-variant-numeric: tabular-nums; }
.cd-kpi__v small { font-size: 13px; font-weight: 700; color: var(--muted); }
.cd-kpi .cd-kpi__v--word { align-self: end; font-size: 18px; line-height: 1.6; padding-bottom: 1px; }   /* on the numbers' baseline; beats .cd-kpi .cd-kpi__v (28px ran out of the card at 768px) */
.cd-kpi__s { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
@container cdm (min-width: 520px) {
  .cd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 0; }
  .cd-kpi { grid-row: span 3; grid-template-rows: subgrid; }
  .cd-kpi:last-child { grid-column: auto; }
  .cd-chart .cd-bars li { grid-template-columns: 7.2em minmax(0, 1fr) 3em; grid-template-areas: "k t v"; gap: 12px; min-height: 32px; padding: 0; }
}
.cd-chart { margin: 14px 0 0; padding: 14px 16px 12px; border: 1px solid var(--cd-ln); border-radius: 8px; }
.cd-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cd-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "t t"; align-items: center; gap: 4px 12px; padding: 2px 0 6px; }
.cd-bars__k { grid-area: k; } .cd-bars__t { grid-area: t; } .cd-bars__v { grid-area: v; }
.cd-bars__k { font-size: 13px; color: var(--ink); white-space: nowrap; }
.cd-bars__t { height: 12px; border-radius: 999px; background: var(--cd-ln2); overflow: hidden; }
.cd-bars__t i { display: block; height: 100%; border-radius: 999px; background: var(--acc); transform-origin: left; }
.cd-bars__v { justify-self: end; font-size: 13px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---- per-panel motion beats (each replays when its panel is shown) --------- */
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-pv { animation-name: cd-mock-slide; animation-duration: 0.45s; animation-delay: calc(var(--cd-mock-lag) + 240ms); }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-grid--agent .cd-c-step::after { animation: cd-mock-growy 0.2s var(--ease-soft) calc(var(--cd-mock-lag) + 200ms + var(--r, 0) * 110ms) both; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mark::before { animation: cd-mock-growx 0.35s var(--ease-out) calc(var(--cd-mock-lag) + 280ms + var(--r, 0) * 40ms) both; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-search::after { animation: cd-mock-blink 1s steps(1) calc(var(--cd-mock-lag) + 300ms) 3; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-log li { animation: cd-mock-write 0.35s var(--ease-out) calc(var(--cd-mock-lag) + 320ms + var(--l, 0) * 90ms) both; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-log li + li { --l: 1; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-mock-log li .cd-pill { animation-delay: calc(var(--cd-mock-lag) + 400ms + var(--l, 0) * 90ms); }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-bars__t i { animation: cd-mock-growx 0.6s var(--ease-out) calc(var(--cd-mock-lag) + 200ms + var(--b, 0) * 60ms) both; }
html.cd-motion .dc-ui--coding.cd-seen .dc-ui-panel.is-active .cd-bars__v { animation: cd-mock-fade 0.3s var(--ease-out) calc(var(--cd-mock-lag) + 560ms + var(--b, 0) * 60ms) both; }

/* ---- responsive ---------------------------------------------------------------- */
/* one window height for all 6 tabs while the rail shows, so a tab switch never
   moves the page: the tallest panel is ゲートキーパー with its waiting request
   and its "ほか12件" line (from 1082px, where the skill preview fits beside its
   list) or 共有スキル with the room its coach pill reserves (1024-1081). Measured 2026-10-05
   after the 13px type floor (main column, min-height off, every tab). Narrower
   windows follow their content. */
@media (min-width: 1024px) { .dc-ui--coding .dc-ui-main { min-height: 697px; } }
@media (min-width: 1082px) { .dc-ui--coding .dc-ui-main { min-height: 679px; } }
@media (max-width: 1180px) {
  .cd-tabs.dc-ui-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
@media (max-width: 1023px) {
  .dc-ui--coding .dc-ui-body { grid-template-columns: minmax(0, 1fr); }
  .dc-ui--coding .dc-ui-rail { display: none; }   /* the tab bar above names the screen */
}
@media (max-width: 760px) {
  .cd-tabs.dc-ui-tabs { gap: 6px; }
  .cd-tabs .dc-ui-tab { flex-direction: column; gap: 4px; min-height: 58px; padding: 8px 4px; font-size: 13px; line-height: 1.4; text-align: center; }
  .dc-ui--coding .dc-ui-panel { padding: 0 14px 16px; }
  .cd-mock-head { margin: 0 -14px 14px; padding: 8px 14px; min-height: 50px; }
  .cd-mock-where { display: none; }
}
@media (max-width: 400px) {
  .cd-mock-meta { display: none; }
  .cd-mock-org { display: none; }
  .cd-mock-me { margin-left: auto; }
}