/* ===========================================================================
   SolutionsCoding -- 画面イメージ, part 3: the hands-on layer, same pattern as
   SolutionsSales (sales-mock.css "hotspot dots + coach pill"):
     - legend above the tabs: 「● の付いたところは、実際に操作できます。」
     - an amber dot on every [data-hot] control, one navy coach pill per tab
       (fine pointers, >= 900px) -- built by coding-mock-hot.js
     - the in-window controls of coding-mock-act.js: skill rows (tab 1), run
       the flow (2), search terms (3), approve / stop (4), this / last week
       (5), connect a model (6); rail rows open their tab (pointer only)
   Buttons are disabled in the HTML: without JS they read as flat labels and
   no legend shows (.cd-demo.is-live comes with the script).
   =========================================================================== */
.cd-demo { --mk-hot: #F2B705; --mk-hot-rim: #9A7000; }
.cd-demo [hidden] { display: none !important; }

/* ---- legend ---------------------------------------------------------------- */
.cd-mock-legend { display: flex; align-items: center; margin: 0 0 14px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.8; color: var(--ink); }
.cd-demo:not(.is-live) > .cd-mock-legend { display: none; }

/* ---- dots + coach pill ----------------------------------------------------- */
.cd-mock-dot { position: absolute; top: -4px; right: -4px; z-index: 3; display: block; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--mk-hot-rim); border-radius: 50%; background: var(--mk-hot); box-shadow: 0 0 0 2px var(--white); pointer-events: none; }
.cd-mock-dot--inline { position: relative; top: auto; right: auto; flex: none; margin: 0 7px 0 2px; }
.cd-mock-dot::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--mk-hot); border-radius: 50%; opacity: 0; pointer-events: none; }
.cd-mock-dot.is-main::after { inset: -4px; border-width: 2.5px; }
[aria-pressed="true"] > .cd-mock-dot, [aria-pressed="true"] > .cd-mock-coach { display: none; }   /* already showing */
.cd-mock-coach { position: absolute; z-index: 4; display: none; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: var(--navy); box-shadow: 0 6px 16px rgba(16, 42, 67, 0.22); font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: var(--white); white-space: nowrap; pointer-events: none; }
.cd-mock-coach::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-hot); }
.cd-mock-coach::after { content: ""; position: absolute; border: 6px solid transparent; }
.cd-mock-coach[data-pos="left"] { right: calc(100% + 12px); top: 50%; margin-top: -15px; }
.cd-mock-coach[data-pos="left"]::after { left: 100%; top: 50%; margin-top: -6px; border-left-color: var(--navy); }
.cd-mock-coach[data-pos="right"] { left: calc(100% + 12px); top: 50%; margin-top: -15px; }
.cd-mock-coach[data-pos="right"]::after { right: 100%; top: 50%; margin-top: -6px; border-right-color: var(--navy); }
.cd-mock-coach[data-pos="below"] { right: 0; top: calc(100% + 10px); }
.cd-mock-coach[data-pos="below"]::after { bottom: 100%; right: 18px; border-bottom-color: var(--navy); }
.cd-mock-coach[data-pos="below"][data-align="start"] { right: auto; left: 0; }
.cd-mock-coach[data-pos="below"][data-align="start"]::after { right: auto; left: 18px; }
@media (min-width: 900px) {
  .cd-mock-coach { display: inline-flex; }
  .cd-demo .is-hotroom { margin-bottom: 40px; }   /* space a pill below its control needs, kept until the tab changes */
}
.cd-mock-dot.is-out, .cd-mock-coach.is-out { opacity: 0; animation: none; transition: opacity 0.2s; }

/* ---- rail rows: pointer shortcuts to the tabs (the tab bar is the keyboard path) */
/* the shared ".dc-ui-rail span" (home-prototype.css) pads every span in a rail: undo it on the dot */
.dc-ui--coding .dc-ui-rail .cd-mock-dot { top: 50%; right: 16px; margin-top: -5px; padding: 0; line-height: 0; box-shadow: 0 0 0 2px var(--navy); }
.cd-demo.is-live .dc-ui--coding .dc-ui-rail > span[data-go] { cursor: pointer; }
.dc-ui--coding[data-tab="1"] .dc-ui-rail [data-go="1"], .dc-ui--coding[data-tab="2"] .dc-ui-rail [data-go="2"], .dc-ui--coding[data-tab="3"] .dc-ui-rail [data-go="3"],
.dc-ui--coding[data-tab="4"] .dc-ui-rail [data-go="4"], .dc-ui--coding[data-tab="5"] .dc-ui-rail [data-go="5"], .dc-ui--coding[data-tab="6"] .dc-ui-rail [data-go="6"] { cursor: default; }
.dc-ui--coding[data-tab="1"] [data-go="1"] > .cd-mock-dot, .dc-ui--coding[data-tab="2"] [data-go="2"] > .cd-mock-dot, .dc-ui--coding[data-tab="3"] [data-go="3"] > .cd-mock-dot,
.dc-ui--coding[data-tab="4"] [data-go="4"] > .cd-mock-dot, .dc-ui--coding[data-tab="5"] [data-go="5"] > .cd-mock-dot, .dc-ui--coding[data-tab="6"] [data-go="6"] > .cd-mock-dot { display: none; }
@media (hover: hover) and (pointer: fine) { .cd-demo.is-live .dc-ui--coding .dc-ui-rail > span[data-go]:hover { color: var(--white); } }

/* ---- in-window buttons ------------------------------------------------------- */
.cd-btn { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 5px 13px; border: 1px solid var(--acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--edge); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--acc-ink); white-space: nowrap; cursor: pointer; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.cd-btn::before { content: ""; position: absolute; inset: -5px -2px; }   /* 34px frame, 44px hit area */
.cd-btn svg { width: 12px; height: 12px; flex: 0 0 12px; fill: currentColor; }
.cd-btn--pri { background: var(--acc); color: var(--white); box-shadow: 0 2px 0 var(--acc-ink); }   /* #FFF on acc 4.9:1 */
.cd-btn--sm { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.cd-btn--sm::before { inset: -8px -2px; }
.cd-btn:disabled, .cd-btn[aria-disabled="true"] { border-color: transparent; background: var(--cd-neu-bg); box-shadow: none; color: var(--cd-neu); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .cd-btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); background: var(--tint); box-shadow: 0 3px 0 var(--edge); }
  .cd-btn--pri:not(:disabled):not([aria-disabled="true"]):hover { background: var(--acc-ink); box-shadow: 0 3px 0 #7A360F; }
}
.cd-btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
:is(.cd-btn, .cd-chip, .cd-seg):focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- tab 1: a skill row shows its rules in the preview -------------------- */
.cd-row-btn { appearance: none; position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cd-row-btn:disabled { color: inherit; cursor: default; }
.cd-row-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.cd-demo.is-live .cd-mock-grid--skill .cd-mock-tr:not(.cd-mock-th):not(.is-sel) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cd-demo.is-live .cd-mock-grid--skill .cd-mock-tr:not(.cd-mock-th):not(.is-sel):hover { background: var(--surface); } }
.cd-mock-grid--skill .cd-mock-tr { transition: background-color var(--dur-3) var(--ease-soft), box-shadow var(--dur-3) var(--ease-soft); }

/* ---- tab 2: run the flow; steps light up one by one ------------------------- */
.cd-mock-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; }
.cd-mock-act__st { font-size: 13px; color: var(--muted); }
.cd-mock-act__st[data-done] { font-weight: 700; color: var(--cd-ok); }
.cd-mock-grid--agent .cd-mock-tr { transition: background-color 0.3s var(--ease-soft); }
.cd-mock-grid--agent .cd-mock-tr.is-run { background: #FFFAF6; }
.cd-mock-tr.is-run .cd-step { box-shadow: 0 0 0 4px var(--tint); }
.cd-mock-tr.is-done .cd-step { border-color: var(--acc); background: var(--acc); color: transparent; }
.cd-mock-tr.is-done .cd-step::after { content: ""; position: absolute; inset: 0; background: center / 13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cd-mock-tr.is-done .cd-c-step::after { background: var(--acc); }

/* ---- tab 3: search terms ------------------------------------------------------ */
.cd-mock-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; }
.cd-mock-terms__k { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cd-chip { appearance: none; position: relative; display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 13px; border: 1px solid var(--cd-frame); border-radius: 999px; background: var(--white); box-shadow: 0 2px 0 var(--cd-ln); font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
.cd-chip::before { content: ""; position: absolute; inset: -7px -3px; }
.cd-chip[aria-pressed="true"] { border-color: var(--acc); background: var(--tint); box-shadow: none; color: var(--acc-ink); cursor: default; }
.cd-chip:disabled { border-color: var(--cd-ln); box-shadow: none; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cd-chip:not(:disabled):not([aria-pressed="true"]):hover { transform: translateY(-1px); border-color: var(--acc); } }

/* ---- tab 4: a request waiting for a person ------------------------------------ */
.cd-mock-ask { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--edge); border-left: 3px solid var(--acc); border-radius: 8px; background: #FFFAF6; }
.cd-mock-ask__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tint); color: var(--acc-ink); }
.cd-mock-ask__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-mock-ask__t { min-width: 0; margin: 0; }
.cd-mock-ask__t b { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.cd-mock-ask__t small { display: block; font-size: 13px; color: var(--muted); }
.cd-mock-ask__f { display: flex; gap: 8px; margin: 0; }
.cd-mock-ask.is-done { grid-template-columns: 34px minmax(0, 1fr); border-color: var(--cd-ln); border-left-color: var(--cd-ok); background: var(--surface); }
.cd-mock-ask.is-done .cd-mock-ask__ic { background: var(--cd-ok-bg); color: var(--cd-ok); }
.cd-mock-ask:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@container cdm (max-width: 519px) { .cd-mock-ask { grid-template-columns: 34px minmax(0, 1fr); } .cd-mock-ask__f { grid-column: 2; } }

/* ---- tab 5: this week / last week ---------------------------------------------- */
.cd-mock-period { display: flex; margin: 0 0 14px; }
.cd-seg { appearance: none; position: relative; min-height: 32px; margin: 0; padding: 0 16px; border: 1px solid var(--acc); background: var(--white); box-shadow: 0 2px 0 var(--edge); font: inherit; font-size: 13px; font-weight: 700; color: var(--acc-ink); cursor: pointer; }
.cd-seg::before { content: ""; position: absolute; inset: -6px 0; }
.cd-seg:first-child { border-radius: 8px 0 0 8px; }
.cd-seg + .cd-seg { border-left: 0; border-radius: 0 8px 8px 0; }
.cd-seg[aria-pressed="true"] { background: var(--acc); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18); color: var(--white); cursor: default; }
.cd-seg:disabled:not([aria-pressed="true"]) { border-color: var(--cd-ln); background: var(--cd-neu-bg); box-shadow: none; color: var(--cd-neu); cursor: default; }
@media (hover: hover) and (pointer: fine) { .cd-seg:not(:disabled):not([aria-pressed="true"]):hover { background: var(--tint); } }
.cd-mock-sub b { font-weight: 700; }
.cd-mock-sub em { font-style: normal; }
html.cd-motion .cd-demo.is-live .cd-bars__t i { transition: width 0.5s var(--ease-out); }

/* ---- "and more" lines: each list shows a few rows of many (the counts in
   the heads); a quiet line under it says so, so no list reads as the limit -- */
.cd-mock-col { min-width: 0; }
.cd-mock-rest { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 0 4px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cd-mock-rest > span { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--cd-neu-bg); font-size: 12px; font-weight: 700; line-height: 1; color: var(--cd-neu); }
.cd-mono--gw { background: var(--cd-kn-bg); color: var(--cd-kn); }   /* the gateway: any other model, through one door */
.cd-mono--gw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- tab 6: connect a model ---------------------------------------------------- */
.cd-demo:not(.is-live) [data-connect] { display: none; }

/* ---- motion (html.cd-motion only; reduced motion = still dots, still pill) ----
   Waves as on the Sales / ChatOps pages: every dot ripples and glows, 3 runs
   of 1.4s (under the 5s of WCAG 2.2.2), when the window first shows, a tab
   opens or the pointer enters (coding-mock-hot.js restarts .cd-wave). */
@keyframes cd-hot-pulse { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cd-hot-glow { 50% { box-shadow: 0 0 0 2px var(--white), 0 0 10px 3px rgba(242, 183, 5, 0.6); } }
@keyframes cd-hot-in { from { opacity: 0; } }
@keyframes cd-hot-bob { 50% { translate: 0 -3px; } }
@keyframes cd-hot-ring { 50% { box-shadow: 0 0 0 7px var(--tint); } }
html.cd-motion .cd-demo.cd-wave .cd-mock-dot { animation: cd-hot-glow 1.4s ease-in-out var(--wd, 0ms) 3; }
html.cd-motion .cd-demo.cd-wave .dc-ui-rail .cd-mock-dot { animation: none; }
html.cd-motion .cd-demo.cd-wave .cd-mock-dot::after { animation: cd-hot-pulse 1.4s var(--ease-out) var(--wd, 0ms) 3 both; }
html.cd-motion .cd-mock-coach { animation: cd-hot-in 0.4s var(--ease-out) both, cd-hot-bob 1.5s ease-in-out 0.4s 3; }
html.cd-motion .dc-ui--coding:not(.cd-seen) .cd-mock-coach { animation-play-state: paused; }
html.cd-motion .cd-mock-tr.is-run .cd-step { animation: cd-hot-ring 0.7s ease-in-out infinite; }