/* ===========================================================================
   SolutionsSales -- 選ばれる理由 (FRAGMENT:why). Every class .sa-why-*.
   Photo band + ruled spec-sheet rows (micro-UI crop | title | text), the same
   structure as the ChatOps 選ばれる理由, drawn in the AVATAR SALES product
   language from sales-ui.css (.sa-stage / .sa-win / .sa-top / .sa-ai / .sa-co).
   Motion: sales-motion.js latch. Start states live ONLY under
   html.sa-motion [data-sa-latch]:not(.sa-seen), so no JS / reduced motion =
   final state. Contrast of every text pair below >= 4.5:1 (#237A52 on #FFF
   5.36, #5A6B7C on #FFF 5.53, #805496 on #FFF 5.79, #FFF on #102A43 14.7).
   =========================================================================== */

.sa-why-lead { margin: 16px 0 0; max-width: 860px; word-break: auto-phrase; }
.sa-why { margin-top: clamp(28px, 3vw, 40px); word-break: auto-phrase; }

/* ---- photo band: 2400:974 (1176x477 at 1440); phones get a 4:3 cut ------- */
.sa-why-band { margin: 0 0 clamp(32px, 3.4vw, 48px); }
.sa-why-frame { overflow: hidden; aspect-ratio: 2400 / 974; background: var(--surface-2); }
.sa-why-frame > picture { display: block; height: 100%; }
.sa-why-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 599.98px) { .sa-why-frame { aspect-ratio: 4 / 3; } }

/* ---- spec-sheet rows ------------------------------------------------------- */
.sa-why-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.sa-why-item { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 24px 0 28px; border-bottom: 1px solid var(--sa-rule); }
.sa-why-h { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--navy); }
/* Titles are phrase spans, so lines break between 文節 in every browser. */
.sa-why-h > span { display: inline-block; }
.sa-why-h > .sa-why-n { display: block; margin: 0 0 4px; font-size: 13px; line-height: 20px; letter-spacing: 0.18em; color: var(--sa-acc); font-variant-numeric: tabular-nums; }
.sa-why-p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: var(--muted); overflow-wrap: break-word; }
.sa-why-list + .sa-cap { margin-top: 16px; }
@media (min-width: 600px) {
  .sa-why-item { grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; row-gap: 8px; }
  .sa-why-ui { grid-row: 1 / span 2; }
}
/* Desktop: crop | title | text on one line per reason; text starts level
   with the title line, under the number. */
@media (min-width: 1024px) {
  .sa-why-item { grid-template-columns: 232px minmax(0, 17em) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; padding: 32px 0; }
  .sa-why-ui { grid-row: auto; }
  .sa-why-p { padding-top: 22px; }
}

/* ---- micro-UI crop, 232x112: a small .sa-stage with a bleeding window ---- */
.sa-stage.sa-why-ui { --inset: 10px; width: 232px; height: 112px; border-radius: 10px; }
/* Phones: the crop spans the column and is zoomed, so its text is readable
   (10.5px -> ~13px) instead of a small tile beside empty space. zoom scales
   the px sizes; width:100% still resolves to the column width. */
@media (max-width: 599.98px) {
  .sa-stage.sa-why-ui { width: 100%; max-width: 352px; zoom: 1.25; }
}
@media (max-width: 359.98px) { .sa-stage.sa-why-ui { zoom: 1.12; } }
.sa-why-ui > .sa-win { height: 100%; border-radius: 6px 0 0 0; font-size: 13px; line-height: 1.4; }
.sa-why-ui svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sa-why-head { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--sa-hair); white-space: nowrap; }
.sa-why-head b { font-size: 13px; color: var(--navy); }
.sa-why-head .sa-co { width: 18px; height: 18px; border-radius: 4px; font-size: 12px; }
.sa-why-mut { margin-left: auto; font-size: 13px; color: var(--muted); }

/* 01: product bar + import dialog (CSV file, then importing sent mail). */
.sa-top.sa-why-top { gap: 8px; height: 24px; padding: 0 10px; font-size: 13px; }
.sa-why-top .sa-brand { gap: 6px; font-size: 12px; letter-spacing: 0.06em; }
.sa-why-top .sa-brand::before { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 2.5px #A88BBA; }
.sa-why-crumb { margin-left: auto; color: var(--sa-chrome-tx); }
.sa-why-imp { display: grid; gap: 7px; padding: 8px 10px 0; }
.sa-why-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 4px; }
.sa-why-ext { padding: 0 4px; border-radius: 3px; background: var(--navy); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; color: var(--white); }
.sa-why-fn { overflow: hidden; font-weight: 700; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.sa-why-cnt { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--st-nur); white-space: nowrap; }
.sa-why-meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--sa-hair); }
.sa-why-fill { display: block; height: 100%; background: var(--sa-acc); transform-origin: 0 50%; }
.sa-why-gm { display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--sa-rule); border-radius: 5px; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* 02: one customer's contact history. The handover shows only as the 担当
   name changing (佐藤 -> 鈴木) -- no "owner changed" system event. The first
   鈴木 entry gets a light row tint. */
.sa-win .sa-why-log { position: relative; padding: 4px 10px 0 25px; }
.sa-why-log::before { content: ""; position: absolute; top: 16px; bottom: 0; left: 15px; width: 1px; background: var(--sa-rule); transform-origin: 50% 0; }
.sa-why-log li { position: relative; display: flex; align-items: center; gap: 6px; height: 22px; color: var(--ink); white-space: nowrap; }
.sa-why-log li::before { content: ""; position: absolute; left: -13px; width: 7px; height: 7px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--muted); }
.sa-why-log .sa-why-d { width: 30px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.sa-why-who { margin-left: auto; font-size: 13px; color: var(--muted); }
.sa-why-who::before { content: "担当："; }
.sa-why-log .sa-why-new { margin: 0 -4px 0 -6px; padding: 0 4px 0 6px; border-radius: 3px; background: var(--sa-flat); }
.sa-why-log .sa-why-new::before { left: -7px; box-shadow: inset 0 0 0 1.5px var(--navy); }
.sa-why-new .sa-why-who { font-weight: 700; color: var(--navy); }

/* 03: AI settings, own model + own API key, stored encrypted. */
.sa-why-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 8px; padding: 6px 10px 0; }
.sa-why-lab { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sa-why-box { display: flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--sa-rule); border-radius: 4px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.sa-why-box svg { margin-left: auto; color: var(--muted); }
.sa-why-key { gap: 3px; }
.sa-why-key i { width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
.sa-why-lock { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--st-nur); }
.sa-why-lock svg { width: 11px; height: 11px; }

/* 04: pick one pipeline to start with. */
.sa-win .sa-why-opts { display: grid; gap: 3px; padding: 6px 10px 0; }
.sa-why-opts li { position: relative; display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--sa-hair); color: var(--ink); white-space: nowrap; }
.sa-why-radio { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.sa-why-opts .sa-why-on { font-weight: 700; color: var(--navy); }
.sa-why-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--sa-acc); }
/* Selected radio = one overlay (accent ring + dot) over the grey ring, so the
   selection can appear with opacity/transform only. */
.sa-why-on .sa-why-radio::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--sa-acc) 0 2.4px, var(--white) 2.9px); box-shadow: inset 0 0 0 1.5px var(--sa-acc); }
.sa-why-go { margin-left: auto; padding: 0 6px; border-radius: 3px; background: var(--navy); font-size: 12px; font-weight: 700; line-height: 17px; color: var(--white); }

/* ---- motion: plays once per crop / photo (sales-motion.js latch) ----------
   Transitions exist only once latched: entering the start state is instant,
   so a block reached mid-scroll never fades OUT first. --t = step delay. */
html.sa-motion .sa-seen :is(.sa-why-step, .sa-why-fill, .sa-why-key i, .sa-why-img),
html.sa-motion .sa-seen :is(.sa-why-on, .sa-why-on .sa-why-radio)::after,
html.sa-motion .sa-seen .sa-why-log::before {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: var(--t, 0ms);
}
html.sa-motion .sa-seen .sa-why-fill { transition-duration: 0.9s; transition-timing-function: var(--ease-soft); }
html.sa-motion .sa-seen .sa-why-log::before { transition-duration: 0.9s; transition-delay: 150ms; }
html.sa-motion .sa-seen .sa-why-key i { transition-duration: 0.2s; }
html.sa-motion .sa-seen .sa-why-on::after { transition-delay: 250ms; }
html.sa-motion .sa-seen .sa-why-on .sa-why-radio::after { transition-delay: 380ms; }
html.sa-motion .sa-seen .sa-why-img { transition-duration: var(--dur-2); }

html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-step { opacity: 0; transform: translateY(5px); }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-fill { transform: scaleX(0); }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-log::before { transform: scaleY(0); }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-key i { opacity: 0; transform: scale(0.3); }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-on::after { opacity: 0; }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-on .sa-why-radio::after { opacity: 0; transform: scale(0.5); }
html.sa-motion [data-sa-latch]:not(.sa-seen) .sa-why-img { opacity: 0; transform: scale(1.04); }

/* Photo drift while the band crosses the viewport: the picture moves a little
   slower than the page. Scroll-driven, transform only; browsers without
   view timelines (and reduced motion, where .sa-motion is never set) keep a
   still photo. Scale 1.08 leaves 4% spare above/below for the 3% travel. */
@supports (animation-timeline: view()) {
  html.sa-motion .sa-why-frame > picture { animation: sa-why-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes sa-why-drift {
    from { transform: translateY(-3%) scale(1.08); }
    to { transform: translateY(3%) scale(1.08); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa-why-frame > picture { animation: none !important; }
  .sa-why :is(.sa-why-step, .sa-why-fill, .sa-why-key i, .sa-why-img) { transition: none !important; }
}