/* ===========================================================================
   SolutionsSales -- 画面イメージ (FRAGMENT:mock), part 4:
   the 6-tab bar on every width, and tab 4 一斉配信 (FRAGMENT:mock-bulk):
   recipient list, a template whose merge fields are chips, the preview that
   fills them in, and the send progress. Behaviour: sales-mock-4.js.
   - The template is written by a person: its chips are navy-grey, never
     the AI tint (--sa-tint stays for AI marks only, sales-ui.css).
   - No JS: chips show, values hidden, buttons flat, progress at 0.
   - Motion only under html.sa-motion; reduced motion = final state.
   Contrast (measured): --navy on #EAF1F8 13.4:1; --muted on #FFF 5.48:1;
   --st-nur on --sa-flat 4.75:1; --sa-acc on #FFF 5.79:1.
   =========================================================================== */

/* ---- six tabs: one row (icon left) from 1024px, icon above the label on
   900-1023px, 3 x 2 on 480-899px, 2 x 3 on phones (sales-mock-3.css) ----- */
@media (min-width: 900px) and (max-width: 1023px) {
  .sa-mock .sa-mock-tab { flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 4px; font-size: 13px; }
}
@media (min-width: 480px) and (max-width: 899px) {
  .sa-mock .sa-mock-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sa-mock .sa-mock-tab { flex-direction: row; gap: 6px; min-height: 48px; padding: 6px 8px; font-size: 13px; }
}

/* ---- layout: recipients | letter -------------------------------------------- */
.sa-bk { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.sa-bk-to { position: relative; z-index: 2; }   /* its coach pill floats over the letter */
.sa-mock-win .sa-bk-to-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy); }
.sa-mock-win .sa-bk-to-src { margin: 2px 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sa-bk-list { display: grid; gap: 8px; }
.sa-bk-rc { appearance: none; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; padding: 8px 12px; border: 1px solid var(--sa-acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--mk-edge); font: inherit; text-align: left; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out); }
.sa-bk-rc-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
.sa-bk-rc small { font-size: 13px; font-weight: 400; color: var(--muted); }
.sa-bk-rc[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--sa-acc); cursor: default; }
.sa-bk-rc[aria-pressed="true"] > .sa-mock-dot { display: none; }
.sa-bk-rc:disabled { border-color: transparent; background: var(--sa-flat); box-shadow: none; cursor: default; }
.sa-bk-rc:disabled .sa-co { background: var(--white); }
.sa-bk-rc:focus-visible, .sa-bk-sw:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sa-bk-rc[aria-pressed="false"]:not(:disabled):hover { transform: translateY(-1px); background: var(--sa-tint); }
}
.sa-bk-st { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 4px; background: var(--sa-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--st-nur); white-space: nowrap; }
.sa-bk-st::before { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.sa-mock-win .sa-bk-more { padding: 8px 12px 0; font-size: 13px; color: var(--muted); }

/* ---- letter: view switch + merge fields --------------------------------------- */
.sa-mock-win .sa-bk-letter .sa-mock-lh { flex-wrap: wrap; }
.sa-mock-win .sa-bk-seg { display: inline-flex; border-radius: 8px; box-shadow: 0 2px 0 var(--mk-edge); }
.sa-bk-sw { appearance: none; position: relative; min-height: 32px; margin: 0; padding: 4px 12px; border: 1px solid var(--sa-acc); background: var(--white); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--sa-acc); white-space: nowrap; cursor: pointer; }
.sa-bk-sw:first-child { border-radius: 8px 0 0 8px; }
.sa-bk-sw:last-child { margin-left: -1px; border-radius: 0 8px 8px 0; }
.sa-bk-sw[aria-pressed="true"] { background: var(--sa-acc); color: var(--white); cursor: default; }
.sa-bk-sw[aria-pressed="true"] > .sa-mock-dot { display: none; }
.sa-bk-sw:disabled { border-color: var(--sa-flat); background: var(--sa-flat); color: var(--navy); cursor: default; }
.sa-mock-win .sa-bk-seg:has(:disabled) { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .sa-bk-sw[aria-pressed="false"]:not(:disabled):hover { background: var(--sa-tint); }
}
.sa-bk-k { display: inline-block; margin: 1px 1px; padding: 0 7px; border: 1px solid #C6D3E0; border-radius: 4px; background: #EAF1F8; font-size: 13px; font-weight: 700; line-height: 20px; color: var(--navy); white-space: nowrap; vertical-align: 1px; }
.sa-bk-v { box-shadow: inset 0 -7px 0 #DCE7F2; font-weight: 700; color: var(--navy); }
.sa-bk-letter[data-view="tpl"] .sa-bk-v, .sa-bk-letter[data-view="pv"] .sa-bk-k { display: none; }
.sa-mock-win .sa-bk-txt { min-height: 0; }
.sa-mock-win .sa-bk-unsub { padding-top: 8px; border-top: 1px dashed var(--sa-hair); font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---- send progress ------------------------------------------------------------ */
.sa-bk-prog { flex: 1 1 240px; min-width: 0; }
.sa-mock-win .sa-bk-prog-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.sa-bk-prog-h b { color: var(--navy); }
.sa-bk-cnt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.sa-mock-win .sa-bk-bar { height: 6px; margin: 6px 0; overflow: hidden; border-radius: 3px; background: var(--sa-hair); }
.sa-bk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sa-acc); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.sa-mock-win .sa-bk-note { font-size: 13px; line-height: 1.7; color: var(--muted); }
.sa-bk[data-state="run"] [data-bk-state] { color: var(--sa-acc); }
.sa-bk[data-state="done"] [data-bk-state] { color: var(--st-nur); }
.sa-bk[data-state="paused"] .sa-bk-bar i { background: var(--muted); }

/* ---- motion ---------------------------------------------------------------------- */
@keyframes sa-bk-in { from { opacity: 0; transform: translateY(3px); } }
html.sa-motion .sa-bk-letter[data-view="pv"].is-fill .sa-bk-v { display: inline-block; animation: sa-bk-in 0.35s var(--ease-out) both; }
html.sa-motion .sa-bk-bar i { transition: transform 0.5s var(--ease-out); }
html.sa-motion .sa-bk-st:not([hidden]) { animation: sa-mock-pop 0.3s var(--ease-out) both; }

/* ---- small screens --------------------------------------------------------------- */
@media (max-width: 899px) {
  .sa-bk { grid-template-columns: minmax(0, 1fr); }
  .sa-bk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sa-bk-list { grid-template-columns: minmax(0, 1fr); }
  .sa-bk-rc { min-height: 48px; }
}