/* REDISH 営業デモ共通の部品 demo-kit.css
 * 数字とグラフの動き（data-count-to / data-grow）と、解説パネル・スライドショーの見た目。
 * 色は --dk-* のトークンで持つ。ダークモードは prefers-color-scheme で切り替える。 */

/* ---- 動きの長さの表（7 つのデモで共通。値を変えるのはここだけ） ----
 * 押した反応 100ms（0.1 秒の内に反応が見える）・窓を開く 200ms・枠が動く 250ms・点を出す 400ms（窓や枠の動きの上限）・
 * 数字とグラフ 800ms（demo-kit.js の COUNT_MS と同じ。データを見せる動きだけ上限より長い）・
 * 達成の印を描く 600ms（スライドショーの最後の 1 枚だけ。1 秒以内） */
:root { --dk-t-press: 100ms; --dk-t-open: 200ms; --dk-t-move: 250ms; --dk-t-fade: 400ms; --dk-t-data: 800ms; --dk-t-achieve: 600ms; }

/* ---- 数字とグラフの動き（デモの要素に付く） ---- */
@keyframes dk-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dk-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dk-g-x, .dk-g-y { transform-box: fill-box; }
.dk-g-x { transform-origin: left center; }
.dk-g-y { transform-origin: center bottom; }
.dk-g-x.dk-pre { transform: scaleX(0); }
.dk-g-y.dk-pre { transform: scaleY(0); }
.dk-g-draw.dk-pre { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dk-g-x.dk-run { animation: dk-grow-x var(--dk-t-data) cubic-bezier(.2, .7, .2, 1) both; }
.dk-g-y.dk-run { animation: dk-grow-y var(--dk-t-data) cubic-bezier(.2, .7, .2, 1) both; }
.dk-g-draw.dk-run { stroke-dasharray: 1; animation: dk-draw var(--dk-t-data) ease-out both; }
/* ドーナツの輪と、折れ線の点: 形は変えず、不透明度だけで出す（点は data-grow-delay で線を描き終わるころに出す） */
@keyframes dk-donut { from { opacity: 0; } to { opacity: 1; } }
@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
.dk-g-donut.dk-pre, .dk-g-fade.dk-pre { opacity: 0; }
.dk-g-donut.dk-run { animation: dk-donut var(--dk-t-data) ease-out both; }
.dk-g-fade.dk-run { animation: dk-fade var(--dk-t-fade) ease-out both; }
/* 数え上げる数字は桁の幅をそろえる（数えている間に横へ揺れない・並べた数字の桁が合う） */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---- 押した反応（デモの画面のボタンにも効く）。:where で強さを 0 にし、デモが自分で書いた見た目を上書きしない ---- */
:where(button, [role="button"], [role="tab"], summary) { transition: transform var(--dk-t-press) ease-out; }
:where(button:active, [role="button"]:active, [role="tab"]:active, summary:active) { transform: translateY(1px); }

/* ---- プレゼン表示（html.dk-present）: 画面共有・投影向けに、薄い文字を濃くし、動きを止めて最後の形を出す ----
 * フィルタは html に付ける（html 以外に付けると、デモの固定の見出し・左の欄の位置の基準が変わる） */
html.dk-present { filter: contrast(1.12); }
html.dk-present .dk-pre { transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
html.dk-present .dk-run { animation: none !important; }

/* ---- 解説・スライドショー ---- */
.dk-root {
  --dk-ink: #1f2937; --dk-sub: #4b5563; --dk-bg: #ffffff; --dk-soft: #f3f4f6; --dk-line: #d1d5db;
  --dk-accent: #0f766e; --dk-accent-ink: #ffffff; --dk-mark: #f59e0b; --dk-mark-glow: rgba(245, 158, 11, .28); --dk-shade: rgba(15, 23, 42, .78);
  --dk-shade-ink: #f8fafc; --dk-band: #374151;
  font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 14px; line-height: 1.7; color: var(--dk-ink);
}
@media (prefers-color-scheme: dark) {
  .dk-root {
    --dk-ink: #f3f4f6; --dk-sub: #cbd5e1; --dk-bg: #1f2937; --dk-soft: #111827; --dk-line: #475569;
    --dk-accent: #2dd4bf; --dk-accent-ink: #0f172a; --dk-mark: #fbbf24; --dk-mark-glow: rgba(251, 191, 36, .34); --dk-shade: rgba(2, 6, 23, .86);
  }
}
.dk-root [hidden] { display: none !important; }
.dk-root button { font: inherit; cursor: pointer; transition: transform var(--dk-t-press) ease-out, background-color var(--dk-t-press) ease-out; }
.dk-root button:active { transform: translateY(1px); }
.dk-root button:focus-visible { outline: 3px solid var(--dk-mark); outline-offset: 2px; }
@keyframes dk-in { from { opacity: 0; } to { opacity: 1; } }
.dk-panel:not([hidden]), .dk-pick:not([hidden]), .dk-ask:not([hidden]) { animation: dk-in var(--dk-t-open) ease-out; }

.dk-fabs { position: fixed; right: 12px; bottom: 12px; z-index: 2147483000; display: flex; gap: 8px; }
.dk-root[data-mode="guide"] .dk-fabs, .dk-root[data-mode="pick"] .dk-fabs, .dk-root[data-mode="show"] .dk-fabs { display: none; }
.dk-fab { border: 1px solid var(--dk-line); border-radius: 999px; padding: 8px 14px; background: var(--dk-bg); color: var(--dk-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.dk-fab.dk-primary { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-accent-ink); }

.dk-frame { position: fixed; z-index: 2147482990; pointer-events: none; border: 3px solid var(--dk-mark); border-radius: 8px; box-shadow: 0 0 0 4px var(--dk-mark-glow); transition: left var(--dk-t-move) ease, top var(--dk-t-move) ease, width var(--dk-t-move) ease, height var(--dk-t-move) ease; }

.dk-panel { position: fixed; z-index: 2147483000; top: 12px; right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); overflow: auto; background: var(--dk-bg); border: 1px solid var(--dk-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .3); padding: 14px; }
.dk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dk-head h2 { margin: 0; font-size: 16px; }
.dk-x { border: 0; background: transparent; color: var(--dk-sub); font-size: 20px; line-height: 1; padding: 4px 8px; }
.dk-aud { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dk-aud button, .dk-nav button { border: 1px solid var(--dk-line); border-radius: 8px; padding: 6px 10px; background: var(--dk-bg); color: var(--dk-ink); }
.dk-aud button[aria-checked="true"] { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-accent-ink); }
.dk-who { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--dk-soft); color: var(--dk-sub); font-size: 13px; }
.dk-stepno { margin: 0; color: var(--dk-sub); font-size: 12px; }
.dk-title { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.dk-press { margin: 4px 0; font-weight: 700; }
.dk-where, .dk-see { margin: 4px 0; color: var(--dk-sub); font-size: 13px; }
.dk-say { margin: 8px 0; padding: 10px 12px; border-left: 4px solid var(--dk-accent); background: var(--dk-soft); border-radius: 6px; }
.dk-note { margin: 4px 0; color: var(--dk-sub); font-size: 12px; }
.dk-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dk-nav button:disabled { opacity: .45; cursor: default; }

.dk-pick { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: var(--dk-shade); }
.dk-pick-box { width: min(420px, calc(100vw - 32px)); background: var(--dk-bg); border-radius: 12px; padding: 18px; }
.dk-pick-box h2 { margin: 0 0 4px; font-size: 16px; }
.dk-pick-box p { margin: 0 0 12px; color: var(--dk-sub); font-size: 13px; }
.dk-pick-box button { display: block; width: 100%; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--dk-line); border-radius: 8px; background: var(--dk-bg); color: var(--dk-ink); text-align: left; }
.dk-pick-box button:hover { border-color: var(--dk-accent); }

.dk-show { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.dk-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--dk-shade); color: var(--dk-shade-ink); pointer-events: auto; z-index: 2; }
.dk-bar button { border: 1px solid var(--dk-line); border-radius: 8px; padding: 4px 10px; background: var(--dk-bg); color: var(--dk-ink); }
.dk-bar button:disabled { opacity: .45; cursor: default; } /* 押せない「前へ」「次へ」を、押せるボタンと同じ見た目にしない */
.dk-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 24px 24px; background: var(--dk-bg); color: var(--dk-ink); text-align: center; pointer-events: auto; }
.dk-card h2 { margin: 0; font-size: clamp(20px, 3.4vw, 32px); }
.dk-card p { margin: 0; max-width: 40em; font-size: clamp(14px, 2vw, 20px); }
.dk-card .dk-sub { color: var(--dk-sub); font-size: clamp(13px, 1.6vw, 16px); }
/* 達成の印と 1 行の言葉（物語の finale.achieve があるときだけ）。印は描いた形が既定で、同じタブの最初の 1 回だけ描く */
/* 印は 1 行目の頭に付ける（スマホの幅で 2 行に折れても、印が言葉から離れない）。折り目は文節でそろえる */
.dk-card .dk-achieve { color: var(--dk-accent); font-size: clamp(15px, 2.2vw, 22px); font-weight: 700; text-wrap: balance; word-break: auto-phrase; }
.dk-achieve-mark { display: inline-block; width: 1.3em; height: 1.3em; margin-right: .35em; vertical-align: -.28em; }
.dk-achieve-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dk-achieve--draw .dk-achieve-mark path { animation: dk-draw var(--dk-t-achieve) ease-out both; }
html.dk-present .dk-achieve--draw .dk-achieve-mark path { animation: none !important; }
.dk-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px 18px; background: var(--dk-shade); color: var(--dk-shade-ink); pointer-events: auto; z-index: 1; }
.dk-cap-title { margin: 0 0 4px; font-size: clamp(12px, 1.5vw, 15px); font-weight: 700; letter-spacing: .04em; opacity: .85; }
.dk-cap-say { margin: 0; font-size: clamp(15px, 2.2vw, 22px); font-weight: 700; }
.dk-cap-see { margin: 6px 0 0; font-size: clamp(12px, 1.5vw, 15px); opacity: .85; }

/* 9. 自分の店で試す（店の方に向けたデモの最後の 1 枚と、解説の最後の手）。行は display を持たない（hidden で隠すため）。
   押せる高さは 44px。プレゼン表示では、担当者に聞くと同じく行ごと隠す（画面共有の最中に相手へ向けたリンクを出さない） */
.dk-try { margin: 10px 0; }
.dk-try-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 0 22px; border-radius: 10px; background: var(--dk-accent); color: var(--dk-accent-ink); font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.dk-try-link:hover { filter: brightness(1.08); }
.dk-try-link:focus-visible { outline: 3px solid var(--dk-mark); outline-offset: 2px; }
.dk-try-note { display: block; margin-top: 6px; color: var(--dk-sub); font-size: 13px; }
html.dk-present .dk-try { display: none !important; }

/* 見せ場の直後に置く相談のボタン（data-demo-ask）の行。ボタンの見た目は各デモの控えめなボタンの型を使い、ここは余白と押せる高さだけ。
   上下に余白を取る（下が 0 だと次のカードの見出しに見える）。押せる高さは 40px（控えめなボタンの型は 30px のものがある）。
   プレゼン表示では、右下の「担当者に聞く」と同じく行ごと隠す（画面共有の最中に相手へ向けたボタンを出さない。行を残すと flex・grid の間の空きが残る） */
.dk-ask-line { margin: 12px 0; }
.dk-ask-line [data-demo-ask] { min-height: 40px; }
html.dk-present .dk-ask-line,
html.dk-present [data-demo-ask] { display: none !important; }

/* 担当者に聞く窓（6.）。送ったとは言わない窓なので、閉じるボタンだけ */
.dk-ask { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: var(--dk-shade); }
.dk-ask-box { width: min(420px, calc(100vw - 32px)); background: var(--dk-bg); border-radius: 12px; padding: 18px; }
.dk-ask-box h2 { margin: 0 0 8px; font-size: 16px; }
.dk-ask-box p { margin: 0 0 14px; color: var(--dk-ink); }
.dk-ask-box button { padding: 8px 16px; border: 1px solid var(--dk-accent); border-radius: 8px; background: var(--dk-accent); color: var(--dk-accent-ink); }
.dk-present-fab[aria-pressed="true"] { background: var(--dk-ink); border-color: var(--dk-ink); color: var(--dk-bg); }
/* プレゼン表示に切り替えたときの、文字の拡大の手順（数秒で消える） */
.dk-hint { position: fixed; left: 50%; bottom: 64px; z-index: 2147483000; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; padding: 8px 14px; border-radius: 8px; background: var(--dk-shade); color: var(--dk-shade-ink); font-size: 13px; }

/* 「デモ」の印（script に data-demo-mark を付けたデモだけ）。押せない・操作盤（z-index 2147483000）と枠（2147482990）より下 */
.dk-mark { position: fixed; top: 8px; right: 8px; z-index: 2147482980; pointer-events: none; padding: 2px 8px; border-radius: 4px; background: rgba(15, 23, 42, .86); color: #ffffff; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; white-space: nowrap; }

/* 10. redish.jp の公開のデモ（/demo/play/…）だけの見た目。見ている方が初めて読むので、文の行頭をそろえ、強調を次の一手に絞る。
   右下の相談はリンク（a）なので、ボタンと同じ形にする */
a.dk-fab { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
a.dk-fab:hover { border-color: var(--dk-accent); }
a.dk-fab:focus-visible { outline: 3px solid var(--dk-mark); outline-offset: 2px; }
/* 文字の大きさが違う要素も左端をそろえる（em で幅を書くと、大きい文字ほど幅が広がって左端がずれる） */
html.dk-public .dk-card > * { width: min(800px, 100%); max-width: 100%; }
html.dk-public .dk-card h2 { line-height: 1.35; text-wrap: balance; word-break: auto-phrase; }
html.dk-public .dk-card p { text-wrap: pretty; word-break: auto-phrase; }
html.dk-public .dk-card .dk-sub { color: var(--dk-ink); }
html.dk-public .dk-card .dk-card-note { color: var(--dk-ink); font-weight: 700; }
/* 公開ではこの帯だけが説明なので、下のページの文字を透かさない */
html.dk-public .dk-bar, html.dk-public .dk-cap { background: var(--dk-band); }
/* スライドショーの間は、上下の帯の分だけ本文を空ける（高さは部品が測って入れる） */
html.dk-public.dk-showing body { padding-top: var(--dk-bar-h); padding-bottom: var(--dk-cap-h); }
html.dk-public.dk-showing, html.dk-public.dk-showing * { scroll-padding-top: calc(var(--dk-bar-h) + 8px); scroll-padding-bottom: calc(var(--dk-cap-h) + 8px); }
/* 空けた分だけページが伸びるので、そのためのスクロールバーは出さない。枠は帯より手前に出す */
html.dk-public.dk-showing { scrollbar-width: none; }
html.dk-public.dk-showing .dk-frame { z-index: 2147483001; }
html.dk-public .dk-root { --dk-mark: var(--dk-accent); --dk-mark-glow: color-mix(in srgb, var(--dk-accent) 28%, transparent); }
html.dk-public .dk-cap-say, html.dk-public .dk-try-note { text-wrap: pretty; word-break: auto-phrase; }
html.dk-public .dk-pick-box .dk-pick-cancel { border-color: transparent; background: transparent; color: var(--dk-sub); }
/* 作る側の札と社内向けの説明は、公開のデモには出さない（デモのファイルは SFA と共通なので、ここで隠す） */
html.dk-public [data-doc-dates], html.dk-public .purpose, html.dk-public .purpose-mini, html.dk-public .nav-tag { display: none !important; }
html.dk-public .dk-card { text-align: left; }
html.dk-public .dk-card p:empty { display: none; }
html.dk-public .dk-card .dk-achieve { color: var(--dk-ink); }
html.dk-public .dk-achieve-mark { color: var(--dk-accent); }
.dk-try-link--sub { background: transparent; color: var(--dk-accent); border: 1px solid var(--dk-accent); }
html.dk-public .dk-mark { background: rgba(255, 255, 255, .92); color: #4b5563; border: 1px solid #d1d5db; font-weight: 500; }

@media (max-width: 600px) {
  .dk-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62vh; }
  .dk-mark { left: 50%; right: auto; transform: translateX(-50%); }
  .dk-present-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-root *, .dk-frame { transition: none !important; animation: none !important; }
  .dk-pre { transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  :where(button, [role="button"], [role="tab"], summary) { transition: none; }
}