/* スロース貿易システムの実機デモ窓だけを、第二輪の sloth.css からそのまま抜いたもの。
   デモ App の見た目は一切いじっていない（App 自体は本輪の対象外）。
   ページ側の見た目は case-editorial.css が持つ。 */
.sloth-app-stage {
--s-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* 2026-09-08：デモ窓が v4 の骨組み（styles-v4.css）の上に載った。
   下の値はもともと case-editorial.css の :root が持っていて、v4 側にはない。
   補わないと var(--fs-caption) の宣言そのものが無効になり、文字の大きさが
   親から継承されてしまう。値は case-editorial.css と同じ。 */
--fs-caption: 12px;
--fs-h3: clamp(20px, 1.6vw, 24px);
--gold-btn: #b98f3f;
--on-gold: #14161b;
}

/* 検索欄のラベル。画面には出さないが、読み上げには残す。 */
.sloth-sr-only {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: -1px;
clip-path: inset(50%);
white-space: nowrap;
}

/* ---- App demo window ---- */

.sloth-window {
overflow: hidden;
border: 1px solid rgb(14 17 23 / 12%);
border-radius: 18px;
background: #f4f6f9;
color: #24262a;
/* 字体走全站同一套变量（定义在 case-editorial.css 的 :root，本页两份都引）。
   原来这里写死了一条以 -apple-system 打头的散装栈，中日文都会掉进系统兜底。 */
font-family: var(--font-body);
box-shadow: 0 20px 54px rgb(10 20 32 / 22%);
}

.sloth-window button, .sloth-window input { font: inherit; }

.sloth-titlebar {
display: grid;
min-height: 54px;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
border-bottom: 1px solid rgb(24 34 46 / 12%);
background: #fff;
padding: 0 14px;
}

.sloth-traffic-lights { display: flex; gap: 7px; }
.sloth-traffic-lights span { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 14%); }
.sloth-traffic-lights span:nth-child(1) { background: #ff5f57; }
.sloth-traffic-lights span:nth-child(2) { background: #febc2e; }
.sloth-traffic-lights span:nth-child(3) { background: #28c840; }

.sloth-window-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); }
.sloth-window-title span { border-radius: 999px; background: #e6edf5; color: #5b6675; padding: 4px 7px; font-size: var(--fs-caption); font-weight: 700; }

.sloth-toolbar-btn { display: inline-flex; min-height: 34px; justify-self: end; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: var(--gold-btn); color: var(--on-gold); padding: 8px 12px; font-size: var(--fs-caption); font-weight: 700; cursor: pointer; transition: transform 160ms var(--s-ease-out); }
.sloth-toolbar-btn:active { transform: scale(0.95); }

.sloth-app-body { display: grid; min-height: 560px; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

.sloth-sidebar { display: flex; flex-direction: column; border-right: 1px solid rgb(24 34 46 / 12%); background: #e6e9ee; padding: 16px 10px 12px; }
.sloth-workspace-mark { display: flex; align-items: center; gap: 9px; padding: 0 8px 14px; color: #2f3a48; font-size: var(--fs-caption); font-weight: 750; }
.sloth-sidebar nav { display: grid; gap: 3px; }
.sloth-sidebar nav button { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; color: #2f3a48; padding: 9px 10px; font-size: var(--fs-caption); font-weight: 600; text-align: left; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
@media (hover: hover) and (pointer: fine) {
.sloth-sidebar nav button:hover { background: rgb(255 255 255 / 52%); color: #1c2937; }
}
.sloth-sidebar nav button:active { transform: scale(0.98); }
.sloth-sidebar nav button.active { background: #fff; color: #7d5f28; }
.sloth-sidebar-foot { display: grid; gap: 4px; margin-top: auto; border-top: 1px solid rgb(24 34 46 / 10%); padding: 13px 8px 2px; }
.sloth-sidebar-foot span { color: #5b6675; font-size: var(--fs-caption); }
.sloth-sidebar-foot strong { color: #2f3a48; font-size: var(--fs-caption); }

.sloth-content { min-width: 0; background: #fbfcfd; padding: 20px; }
.sloth-content-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.sloth-content-header small { color: #5b6675; font-size: var(--fs-caption); font-weight: 700; }
.sloth-content-header h2 { margin: 4px 0 0; font-size: var(--fs-h3); letter-spacing: 0; }

.sloth-search-box { display: flex; min-height: 38px; width: min(250px, 42%); align-items: center; gap: 7px; border: 1px solid rgb(24 34 46 / 16%); border-radius: 8px; background: #fff; padding: 8px 10px; }
.sloth-search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #2f3a48; font-size: var(--fs-caption); }
.sloth-search-box input::placeholder { color: #5b6675; }

.sloth-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.sloth-metrics > div { display: grid; min-height: 84px; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; border: 1px solid rgb(24 34 46 / 12%); border-radius: 10px; background: #fff; padding: 13px; }
.sloth-metrics span { color: #5b6675; font-size: var(--fs-caption); font-weight: 700; }
.sloth-metrics strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #17202a; font-size: var(--fs-h3); }
.sloth-metrics small { align-self: end; color: #5b6675; font-size: var(--fs-caption); }

.sloth-work-area { display: grid; min-height: 344px; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr); gap: 12px; margin-top: 12px; }
.sloth-list-pane, .sloth-inspector { overflow: hidden; border: 1px solid rgb(24 34 46 / 12%); border-radius: 10px; background: #fff; }
.sloth-pane-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 10px; font-size: var(--fs-caption); }
.sloth-pane-title span { color: #5b6675; font-size: var(--fs-caption); }
.sloth-table-head { display: grid; grid-template-columns: 1fr 52px 74px; gap: 8px; border-bottom: 1px solid rgb(24 34 46 / 8%); color: #5b6675; padding: 0 34px 8px 15px; font-size: var(--fs-caption); font-weight: 700; }
.sloth-company-list { display: grid; }
.sloth-empty-state { min-height: 150px; margin: 0; display: grid; place-items: center; padding: 24px; color: #5b6675; font-size: var(--fs-caption); line-height: 1.65; text-align: center; }
.sloth-company-list button { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 42px 74px 14px; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid rgb(24 34 46 / 7%); background: transparent; color: #2f3a48; padding: 12px 12px 12px 15px; text-align: left; cursor: pointer; transition: background 140ms ease; }
.sloth-company-list button.active { background: #f3ead6; }
@media (hover: hover) and (pointer: fine) {
.sloth-company-list button:hover { background: #f3ead6; }
}
.sloth-company-list button:last-child { border-bottom: 0; }
.sloth-company-name { display: grid; min-width: 0; gap: 4px; }
.sloth-company-name strong { overflow: hidden; font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.sloth-company-name small { overflow: hidden; color: #5b6675; font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.sloth-score { color: #2f3a48; font-size: var(--fs-caption); }
.sloth-stage { width: max-content; border-radius: 999px; background: #edf0f4; color: #5b6675; padding: 4px 6px; font-size: var(--fs-caption); font-weight: 750; }
.sloth-stage.approved { background: #e7dcc4; color: #6b5122; }

.sloth-inspector { display: flex; flex-direction: column; padding: 16px; }
.sloth-inspector-top { display: flex; align-items: center; gap: 10px; }
.sloth-company-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #2f3a48; color: #fff; font-size: var(--fs-caption); font-weight: 800; }
.sloth-inspector-top small { color: #5b6675; font-size: var(--fs-caption); }
.sloth-inspector-top h3 { margin: 3px 0 0; font-size: var(--fs-caption); }
.sloth-inspector dl { display: grid; gap: 9px; margin: 18px 0 0; }
.sloth-inspector dl div { display: flex; justify-content: space-between; gap: 10px; }
.sloth-inspector dt { color: #5b6675; font-size: var(--fs-caption); }
.sloth-inspector dd { margin: 0; color: #2f3a48; font-size: var(--fs-caption); font-weight: 700; text-align: right; }
.sloth-inspector > p { margin: 18px 0 0; color: #5b6675; font-size: var(--fs-caption); line-height: 1.7; }
.sloth-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; padding-top: 18px; }
.sloth-inspector-actions button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; padding: 7px; font-size: var(--fs-caption); font-weight: 750; cursor: pointer; transition: transform 140ms var(--s-ease-out), background 140ms ease; }
.sloth-inspector-actions button:active:not(:disabled) { transform: scale(0.95); }

@media (max-width: 980px) {
.sloth-app-body { grid-template-columns: minmax(0, 1fr); }
.sloth-sidebar { display: block; border-right: 0; border-bottom: 1px solid rgb(24 34 46 / 12%); padding: 8px; }
.sloth-workspace-mark, .sloth-sidebar-foot { display: none; }
.sloth-sidebar nav { display: flex; overflow-x: auto; }
.sloth-sidebar nav button { width: auto; flex: 0 0 auto; }
.sloth-work-area { grid-template-columns: minmax(0, 1fr); }
.sloth-inspector { min-height: 250px; }
}

@media (max-width: 640px) {
.sloth-window { border-radius: 16px; }
.sloth-titlebar { grid-template-columns: auto minmax(0, 1fr); }
.sloth-window-title { justify-self: end; }
.sloth-window-title span, .sloth-toolbar-btn { display: none; }
.sloth-app-body { min-height: 620px; }
.sloth-content { padding: 14px 10px; }
.sloth-content-header { align-items: stretch; flex-direction: column; }
.sloth-search-box { width: 100%; }
.sloth-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sloth-metrics > div:last-child { display: none; }
.sloth-table-head { display: none; }
.sloth-company-list button { grid-template-columns: minmax(0, 1fr) auto; }
/* 状态标签本来挤在 66px 的第三列里：英文态「Pending check」「Researching」
   被列宽切掉后半截（实测右边越出面板 22px，面板是 overflow: hidden，看不见也滑不到）。
   改成两行：公司名与分数一行，状态标签另起一行按内容取宽。 */
.sloth-company-list .sloth-company-name { grid-column: 1; grid-row: 1; }
.sloth-company-list .sloth-score { grid-column: 2; grid-row: 1; }
.sloth-company-list .sloth-stage { grid-column: 1; grid-row: 2; justify-self: start; }
.sloth-company-list button > span:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* 2026-09-07：375 宽下侧栏模块条只有横滚一条路，英文态「Outreach emails」
   「Quotes」两个标签整块在屏外，看不见也不知道能滑。改成换行，全部露出来。 */
@media (max-width: 640px) {
.sloth-sidebar nav {
overflow-x: visible;
flex-wrap: wrap;
gap: 4px;
}
}

/* 2026-09-07：5つのタブがそれぞれ別の中身を出すようになったので、
   タブごとの1行説明と「ここで止まる」の注記を置く場所を足す。
   デモの中身は sloth.js の DATA にある。 */
.sloth-module-lead {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--ai2-ink-dim, #626873);
  font-size: 13px;
  line-height: 1.7;
  max-width: 46em;
}

.sloth-stop-note {
  margin: 16px 0 0;
  border-left: 2px solid var(--hq-gold, #7d5f28);
  padding: 4px 0 4px 14px;
  color: var(--hq-strong, #101114);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────
   2026-09-08：デモ窓を v4 の画面外框 .v4-frame の中に入れた
   （sloth.html の FIG 0.1。それまでは同じ画面の静止画だった）。
   ──────────────────────────────────────────────────────────────── */

/* 外框がすでに 1px の辺・8px の角・落ち影を持っている。
   窓が自前で持っている分は消す——消さないと枠が二重に見える。 */
.v4-frame .sloth-window {
border: 0;
border-radius: 0;
box-shadow: none;
}

/* 承認ボタン。もとの sloth.css には .sloth-primary-action /
   .sloth-secondary-action の見た目がなく、ブラウザ既定のボタンのまま出ていた。
   押したあとに「承認済み」へ変わったことが見て分かるよう、
   押せる状態・押せない状態を色で分ける。 */
.sloth-secondary-action {
border: 1px solid rgb(24 34 46 / 22%);
background: #fff;
color: #2f3a48;
}
.sloth-primary-action {
border: 1px solid transparent;
background: var(--gold-btn);
color: var(--on-gold);
}
.sloth-primary-action:disabled {
background: #e7dcc4;
border-color: rgb(24 34 46 / 10%);
color: #6b5122;
cursor: default;
}

/* 一覧の列幅。以前は見出し行と本文行が別々に 74px / 42px と書いてあり、
   英語だと状態のラベル（Waiting to send＝107px）が 74px の列からはみ出して
   右端の「›」に重なっていた。見積の金額（DKK 88,600）も 42px に入らず 2 行に折れていた。
   ここで 1 か所に集約する。見出し行の金額列だけ +10px なのは元の版と同じ。 */
/* ⚠ @media で囲むのは、640px 以下の 2 列レイアウト（上の方にある）を
   後ろから上書きしてしまわないため。同じ詳細度なので、後に書いたほうが勝つ。 */
@media (min-width: 641px) {
.sloth-list-pane { --sl-score: 76px; --sl-stage: 74px; }
html[lang="en"] .sloth-list-pane { --sl-stage: 112px; }
.sloth-table-head { grid-template-columns: minmax(0, 1fr) calc(var(--sl-score) + 10px) var(--sl-stage); }
.sloth-company-list button { grid-template-columns: minmax(0, 1fr) var(--sl-score) var(--sl-stage) 14px; }
.sloth-score { white-space: nowrap; }
}

/* 右パネルの「項目 ─ 値」。項目名のほうが折り返して
   「システムが行うこ／と」のように 1 文字だけ次の行に落ちていた。
   項目名は折り返さない。入りきらない行は値のほうが次の行に回る。 */
.sloth-inspector dl div { flex-wrap: wrap; row-gap: 3px; }
.sloth-inspector dt { flex: 0 0 auto; white-space: nowrap; }
.sloth-inspector dd { flex: 1 1 auto; }

/* 375px：横スクロールを出さないための駄目押し。
   タブは既存の @media (max-width: 640px) で折り返す。
   ここは中身の側——長い会社名や英語の状態ラベルが列を押し広げないようにする。 */
@media (max-width: 640px) {
.sloth-window { max-width: 100%; }
.sloth-content-header > div { min-width: 0; }
.sloth-content-header h2 { overflow-wrap: anywhere; }
.sloth-inspector dl div { flex-wrap: wrap; }
.sloth-inspector dd { overflow-wrap: anywhere; }
}