/* ===========================================================================
   SolutionsSales -- 画面イメージ (FRAGMENT:mock), part 1:
   legend, tabs (outside the window), window frame, menu rail, panels, the
   LIVE vs FLAT button language, hotspot dots + coach pills, entrance motion.
   Part 2 (sales-mock-2.css): the first panels' content + small screens;
   part 4 = 一斉配信 + the 6-tab bar, part 5 = ダッシュボード.
   - Builds on sales-ui.css (.sa-win/.sa-top/.sa-ai/.sa-score/.sa-co/.sa-pill).
   - .sa-mock-demo.is-live is set by sales-mock.js. Without it (no JS): tabs +
     legend hidden, all 6 panels stack (each under its tab's name, a hairline
     between), in-window buttons stay disabled + flat, no rail row lit.
   - A left edge means one thing only: the selected row of a list (rail, drafts).
   - Motion: transform / opacity only, and only under html.sa-motion
     (sales-motion.js), so reduced motion = final state, nothing hidden.
   Contrast (measured): --sa-acc on #FFF 5.79:1, on --sa-tint 4.95:1, on --sa-flat 5.21:1;
   --muted on #FFF 5.48:1, on --sa-rail 5.20:1; #FFF on --sa-acc-ink 7.36:1;
   dot rim #9A7000 on #FFF 4.48:1 (graphic, 1.4.11 needs 3:1).
   =========================================================================== */
.sa-mock { --mk-edge: #D6C8DD; --mk-hot: #F2B705; --mk-hot-rim: #9A7000; --mk-row: #EDF1F5; word-break: auto-phrase; }
.sa-mock .h2 { margin-bottom: clamp(24px, 3vw, 36px); }
.sa-mock [hidden] { display: none !important; }

/* ---- what this screen is: one plain line per tab, above the window -------
   All six share one grid cell (the tallest sets the height), so switching
   tabs never moves the window; the open tab's line shows. No JS: hidden
   (the tabs are hidden too and all panels show, each under its own heading). */
.sa-mock-say { display: grid; margin: 0 0 18px; }
.sa-mock-demo:not(.is-live) .sa-mock-say { display: none; }
@supports not selector(:has(*)) { .sa-mock-say { display: none; } }   /* cannot follow the tab: no empty gap */
.sa-mock-say__i { grid-area: 1 / 1; align-self: start; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--sa-acc); font-family: 'Noto Sans JP', sans-serif; visibility: hidden; opacity: 0; }
.sa-mock-say__h { font-size: 16px; font-weight: 700; line-height: 1.75; color: var(--navy); }
.sa-mock-say__h em { font-style: normal; color: var(--sa-acc-ink); }
.sa-mock-say__d { font-size: 14px; line-height: 1.9; color: var(--ink); }
.sa-mock-demo:has(#sa-mock-p1.is-active) [data-say="1"], .sa-mock-demo:has(#sa-mock-p2.is-active) [data-say="2"],
.sa-mock-demo:has(#sa-mock-p3.is-active) [data-say="3"], .sa-mock-demo:has(#sa-mock-p4.is-active) [data-say="4"],
.sa-mock-demo:has(#sa-mock-p5.is-active) [data-say="5"], .sa-mock-demo:has(#sa-mock-p6.is-active) [data-say="6"] { visibility: visible; opacity: 1; }
html.sa-motion .sa-mock-say__i { transition: opacity 0.25s ease, visibility 0.25s; }

/* ---- legend + tabs: page-level controls, OUTSIDE the window -------------- */
.sa-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); }
.sa-mock-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.sa-mock-demo:not(.is-live) > .sa-mock-legend,
.sa-mock-demo:not(.is-live) > .sa-mock-tabs { display: none; }
.sa-mock-tab { appearance: none; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; margin: 0; padding: 8px 10px; border: 1px solid var(--sa-acc); border-radius: 10px; background: var(--white); box-shadow: 0 2px 0 var(--mk-edge); font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--navy); word-break: keep-all; cursor: pointer; transition: transform var(--dur-3) var(--ease-out); }
.sa-mock-tab svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sa-mock-tab.is-on { background: var(--sa-acc); color: var(--white); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .sa-mock-tab:not(.is-on):hover { transform: translateY(-1px); background: var(--sa-tint); box-shadow: 0 3px 0 var(--mk-edge), 0 6px 14px rgba(16, 42, 67, 0.12); }
}
.sa-mock-tab:not(.is-on):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--mk-edge); }
.sa-mock-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- window --------------------------------------------------------------- */
.sa-mock-win { position: relative; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 42, 67, 0.08); font-size: 13px; }
.sa-mock-me { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: var(--sa-acc); font-size: 12px; font-weight: 700; line-height: 1; color: var(--white); }
.sa-mock-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 640px; }
.sa-mock-win .sa-mock-rail { display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; border-right: 1px solid var(--sa-hair); background: var(--sa-rail); }
.sa-mock-rail li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.sa-mock-rail li.sa-mock-rail-h { justify-content: space-between; margin: 14px 0 2px; padding: 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.sa-mock-rail svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sa-mock-win .sa-mock-rail .sa-mock-rail-ai { margin: 0 0 10px; padding: 9px 10px; border-radius: 8px; background: var(--sa-tint); font-weight: 700; color: var(--sa-acc-ink); }
/* the row being viewed follows the open tab (data-tab on the window) */
.sa-mock-win[data-tab="1"] [data-rail~="1"], .sa-mock-win[data-tab="2"] [data-rail~="2"],
.sa-mock-win[data-tab="3"] [data-rail~="3"], .sa-mock-win[data-tab="4"] [data-rail~="4"],
.sa-mock-win[data-tab="5"] [data-rail~="5"], .sa-mock-win[data-tab="6"] [data-rail~="6"] { background: var(--white); box-shadow: inset 3px 0 0 var(--sa-acc), 0 1px 2px rgba(16, 42, 67, 0.06); font-weight: 700; color: var(--navy); }
.sa-mock-win[data-tab="2"] .sa-mock-rail .sa-mock-rail-ai { background: var(--sa-acc); box-shadow: none; color: var(--white); }
/* rows with a screen here: pressable by pointer, like the real menu (the tab
   bar stays the keyboard path). The row on screen: no pointer, no dot. */
.sa-mock-rail li { position: relative; }
.sa-mock-rail .sa-mock-dot { top: 50%; right: 8px; margin-top: -5px; }
.sa-mock-demo.is-live .sa-mock-rail [data-go] { cursor: pointer; transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
.sa-mock-win[data-tab="1"] .sa-mock-rail [data-go="1"], .sa-mock-win[data-tab="2"] .sa-mock-rail [data-go="2"],
.sa-mock-win[data-tab="3"] .sa-mock-rail [data-go="3"], .sa-mock-win[data-tab="4"] .sa-mock-rail [data-go="4"],
.sa-mock-win[data-tab="5"] .sa-mock-rail [data-go="5"], .sa-mock-win[data-tab="6"] .sa-mock-rail [data-go="6"] { cursor: default; }
.sa-mock-win[data-tab="1"] .sa-mock-rail [data-go="1"] > .sa-mock-dot, .sa-mock-win[data-tab="2"] .sa-mock-rail [data-go="2"] > .sa-mock-dot,
.sa-mock-win[data-tab="3"] .sa-mock-rail [data-go="3"] > .sa-mock-dot, .sa-mock-win[data-tab="4"] .sa-mock-rail [data-go="4"] > .sa-mock-dot,
.sa-mock-win[data-tab="5"] .sa-mock-rail [data-go="5"] > .sa-mock-dot, .sa-mock-win[data-tab="6"] .sa-mock-rail [data-go="6"] > .sa-mock-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="1"]) .sa-mock-rail [data-go="1"]:hover,
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="2"]) .sa-mock-rail [data-go="2"]:hover,
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="3"]) .sa-mock-rail [data-go="3"]:hover,
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="4"]) .sa-mock-rail [data-go="4"]:hover,
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="5"]) .sa-mock-rail [data-go="5"]:hover,
  .sa-mock-demo.is-live .sa-mock-win:not([data-tab="6"]) .sa-mock-rail [data-go="6"]:hover { background: var(--sa-tint); color: var(--sa-acc-ink); }
}
.sa-mock-main { min-width: 0; }
.sa-mock-panel { display: none; padding: 20px 24px 24px; }
.sa-mock-panel.is-active, .sa-mock-demo:not(.is-live) .sa-mock-panel { display: block; }
.sa-mock-demo:not(.is-live) .sa-mock-panel + .sa-mock-panel { border-top: 1px solid var(--sa-hair); }
.sa-mock-win .sa-mock-nojs-h { margin: 0 0 12px; font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: 0.08em; color: var(--muted); }
.sa-mock-demo.is-live .sa-mock-nojs-h { display: none; }
.sa-mock-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

/* ---- panel header + shared bits ----------------------------------------- */
.sa-mock-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.sa-mock-ttl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.sa-mock-num, .sa-mock-flat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 5px; background: var(--sa-flat); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; line-height: 22px; color: var(--navy); white-space: nowrap; }
.sa-mock-flat { color: var(--muted); }
.sa-mock-sub { font-size: 13px; color: var(--muted); }
/* ---- LIVE button: framed + 2px bottom edge + dot. FLAT = picture only ---- */
.sa-mock-btn { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 5px 13px; border: 1px solid var(--sa-acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--mk-edge); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--sa-acc); white-space: nowrap; cursor: pointer; transition: transform var(--dur-3) var(--ease-out); }
.sa-mock-btn::before { content: ""; position: absolute; inset: -5px -2px; }   /* 36px frame, 46px hit area */
.sa-mock-btn svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sa-mock-btn[aria-pressed="true"], .sa-mock-btn--pri { background: var(--sa-acc); color: var(--white); box-shadow: 0 2px 0 var(--sa-acc-ink); }
.sa-mock-btn[aria-pressed="true"] { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18); }
@media (hover: hover) and (pointer: fine) {
  .sa-mock-btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); background: var(--sa-tint); box-shadow: 0 3px 0 var(--mk-edge), 0 6px 14px rgba(16, 42, 67, 0.12); }
  .sa-mock-btn--pri:not([aria-disabled="true"]):hover, .sa-mock-btn[aria-pressed="true"]:hover { background: var(--sa-acc-ink); color: var(--white); }
}
.sa-mock-btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--mk-edge); }
.sa-mock-btn:focus-visible, .sa-mock-draft:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* disabled (no JS) or done (送信済み): flat, nothing to press */
.sa-mock-btn:disabled, .sa-mock-btn[aria-disabled="true"], .sa-mock-draft:disabled { border-color: transparent; background: var(--sa-flat); box-shadow: none; color: var(--navy); cursor: default; }

/* ---- hotspot dots + coach pill (sales-mock.js builds them) --------------- */
.sa-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; }
.sa-mock-dot--inline { position: relative; top: auto; right: auto; flex: none; margin: 0 7px 0 2px; }
.sa-mock-dot::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--mk-hot); border-radius: 50%; opacity: 0; pointer-events: none; }
.sa-mock-dot.is-main::after { inset: -4px; border-width: 2.5px; }
.sa-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; color: var(--white); white-space: nowrap; pointer-events: none; }
.sa-mock-coach::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-hot); }
.sa-mock-coach::after { content: ""; position: absolute; border: 6px solid transparent; }
.sa-mock-coach[data-pos="left"] { right: calc(100% + 12px); top: 50%; margin-top: -15px; }
.sa-mock-coach[data-pos="left"]::after { left: 100%; top: 50%; margin-top: -6px; border-left-color: var(--navy); }
.sa-mock-coach[data-pos="right"] { left: calc(100% + 12px); top: 50%; margin-top: -15px; }
.sa-mock-coach[data-pos="right"]::after { right: 100%; top: 50%; margin-top: -6px; border-right-color: var(--navy); }
.sa-mock-coach[data-pos="below"] { right: 0; top: calc(100% + 10px); }
.sa-mock-coach[data-pos="below"]::after { bottom: 100%; right: 18px; border-bottom-color: var(--navy); }
@media (min-width: 900px) { .sa-mock-coach { display: inline-flex; } }
.sa-mock-dot.is-out, .sa-mock-coach.is-out { opacity: 0; animation: none; transition: opacity 0.2s; }
/* the space a pill below its control needs, kept until the tab changes */
@media (min-width: 900px) { .sa-mock .is-hotroom { margin-bottom: 40px; } }

/* ---- motion (html.sa-motion only) ----------------------------------------- */
@keyframes sa-mock-pulse { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sa-mock-pop { from { opacity: 0; } }
@keyframes sa-mock-bob { 50% { translate: 0 -3px; } }
@keyframes sa-mock-in { from { opacity: 0; transform: translateY(8px); } }
/* waves (same as the ChatOps page): every dot ripples and glows, 3 runs of
   1.4s (about 4.7s with the stagger, under the 5s of WCAG 2.2.2), each time
   the demo comes into view, a tab opens, the AI answers or the pointer
   enters the window (sales-mock.js restarts .sa-wave). Dots go one after
   another in reading order (--wd); the primary's ring is a little stronger. */
@keyframes sa-mock-glow { 50% { box-shadow: 0 0 0 2px var(--white), 0 0 10px 3px rgba(242, 183, 5, 0.6); } }
html.sa-motion .sa-mock-demo.sa-wave .sa-mock-dot { animation: sa-mock-glow 1.4s ease-in-out var(--wd, 0ms) 3; }
html.sa-motion .sa-mock-demo.sa-wave .sa-mock-dot::after { animation: sa-mock-pulse 1.4s var(--ease-out) var(--wd, 0ms) 3 both; }
html.sa-motion .sa-mock-coach { animation: sa-mock-pop 0.4s var(--ease-out) both, sa-mock-bob 1.5s ease-in-out 0.4s 3; }
html.sa-motion .sa-mock-demo:not(.sa-seen) .sa-mock-coach { animation-play-state: paused; }
html.sa-motion .sa-mock-panel.is-enter [data-in] { animation: sa-mock-in 0.45s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 70ms); }
/* first view: legend, tabs, window rise in once */
.sa-mock-demo > .sa-mock-legend, .sa-mock-demo > .sa-mock-tabs, .sa-mock-demo > .sa-mock-win { transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-out); }
.sa-mock-demo > .sa-mock-tabs { transition-delay: 80ms; }
.sa-mock-demo > .sa-mock-win { transition-delay: 160ms; }
html.sa-motion .sa-mock-demo:not(.sa-seen) > .sa-mock-legend,
html.sa-motion .sa-mock-demo:not(.sa-seen) > .sa-mock-tabs,
html.sa-motion .sa-mock-demo:not(.sa-seen) > .sa-mock-win { opacity: 0; transform: translateY(16px); }
/* a control that is done (送信済み / 追加済み) keeps no dot */
.sa-mock-btn[aria-disabled="true"] > .sa-mock-dot, .sa-mock-btn[aria-disabled="true"] > .sa-mock-coach { display: none; }
.sa-mock-btn:disabled > svg:last-of-type:not(:first-child) { display: none; }   /* no JS: no "go" arrow on a flat label */