/* Hallmark · macrostructure: Workbench (app shell, sidebar variant) · tone: utilitarian · anchor hue: 29
 * theme: custom — studied DNA (source: crowdbank.jp mypage, user reference)
 *   paper oklch(94.5% 0 0) · accent oklch(57% 0.225 29) brand red · Noto Sans JP + Barlow (numerals)
 * scope: 会社別の画面（A〜D社すべて）。body.shell-d の中だけでトークンを上書きし、既存部品をそのまま着せ替える。
 *   D社向けが基本形。運営・販売会社は「管理」タグと広い作業面（.d-main--wide）を足すだけで骨格は共通。
 */

.shell-d {
  /* 作業面はグレー、カードは白。境界は線より影で示す。 */
  --color-paper: oklch(94.5% 0 0);
  --color-paper-2: oklch(97% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-ink: oklch(38% 0.022 230);
  --color-ink-2: oklch(45% 0.02 230);
  --color-ink-3: oklch(60% 0.012 230);
  --color-rule: oklch(91.5% 0 0);
  --color-rule-2: oklch(86% 0 0);

  /* ブランドの赤は「現在地」「主ボタン」「件数バッジ」だけに使う。リンクは青。 */
  --color-brand: oklch(57% 0.225 29);
  --color-brand-ink: oklch(50% 0.2 29);
  --color-brand-wash: oklch(96% 0.02 29);
  --color-link: oklch(54% 0.12 245);
  --color-accent: var(--color-brand);
  --color-accent-ink: var(--color-brand-ink);
  --color-accent-wash: var(--color-brand-wash);
  --color-focus: oklch(58% 0.14 245);
  --color-danger: oklch(47% 0.17 27);

  --font-display: "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "Barlow", "Noto Sans JP", sans-serif;

  --radius-1: 3px;
  --radius-2: 4px;
  --shadow-card: 0 1px 3px oklch(0% 0 0 / 0.08), 0 0 0 1px oklch(0% 0 0 / 0.02);

  --d-head-h: 50px;
  --d-nav-w: 220px;

  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.shell-d a { color: var(--color-link); text-decoration: none; }
@media (hover: hover) { .shell-d a:hover { color: var(--color-link); text-decoration: underline; } }
.shell-d h1, .shell-d h2, .shell-d h3 { letter-spacing: 0.03em; }
.shell-d h1 { font-size: 1.375rem; font-weight: 400; }
.shell-d h2 { font-size: 1rem; font-weight: 700; }
.shell-d h3 { font-size: 0.9375rem; font-weight: 700; }

/* ── ヘッダー ── */
.d-head {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--d-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5) 0 28px;
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-rule);
}
.shell-d .d-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (hover: hover) { .shell-d .d-logo:hover { color: var(--color-brand-ink); text-decoration: none; } }
.d-logo__mark {
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 4px 11px / 3px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 8px / 3px 8px no-repeat,
    linear-gradient(currentColor, currentColor) 14px 4px / 3px 12px no-repeat;
}
/* 管理画面の目印：ロゴ横の小札。赤ではなく墨色にして、参加企業の画面と一目で区別する */
.d-logo__tag {
  margin-left: 4px;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--color-ink);
  color: oklch(100% 0 0);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}
.d-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-user__icon { width: 26px; height: 26px; color: var(--color-ink-3); flex: none; }
.d-user__name { font-size: 0.8125rem; color: var(--color-ink-2); line-height: 1.3; }
.d-user__name small { font-size: 0.6875rem; }
.d-user__org { font-size: 0.6875rem; color: var(--color-ink-3); line-height: 1.3; overflow-wrap: anywhere; }

/* ── 本体：左ナビ＋作業面 ── */
.d-body { display: grid; grid-template-columns: var(--d-nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--d-head-h)); }

.d-nav { min-width: 0; background: var(--color-surface); padding-top: var(--space-5); }
.d-nav ul { list-style: none; margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule-2); }
.shell-d .d-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 41px;
  padding: 0 var(--space-4) 0 28px;
  color: var(--color-ink);
  font-size: 0.875rem;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .shell-d .d-nav a:hover { color: var(--color-brand); text-decoration: none; background: var(--color-paper-2); } }
.shell-d .d-nav a:active { background: var(--color-brand-wash); }
.shell-d .d-nav a[aria-current="page"] { color: var(--color-brand); font-weight: 700; }
.shell-d .d-nav a:focus-visible { outline-offset: -2px; }
.d-nav__icon { width: 20px; height: 20px; flex: none; }
.d-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: -6px;
  align-self: flex-start;
  margin-top: 8px;
  border-radius: 8px;
  background: var(--color-brand);
  color: oklch(100% 0 0);
  font: 500 0.625rem/1 var(--font-mono);
}

.shell-d .d-main {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: var(--space-6) clamp(var(--space-4), 5vw, 86px) var(--space-6);
  display: flex;
  flex-direction: column;
}
.shell-d .d-main > * { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
.shell-d .d-main--wide > * { max-width: 1120px; }
.d-foot { margin-top: auto; padding-top: var(--space-7); text-align: center; font: 400 0.6875rem/1 var(--font-mono); color: var(--color-ink-3); letter-spacing: 0.06em; }

/* ── 既存部品の着せ替え ── */
.shell-d .page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-4); }
.shell-d .page-head__meta { font-size: 0.75rem; }
.shell-d .section { margin-top: var(--space-6); }
.shell-d .section__head { margin-bottom: var(--space-3); }

.shell-d .panel,
.shell-d .table-scroll {
  border: 0;
  border-radius: var(--radius-2);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.shell-d .panel { padding: var(--space-5) 30px; }
.shell-d .panel--quiet { background: var(--color-surface); box-shadow: none; border: 1px solid var(--color-rule-2); }

.shell-d .data th {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 0.75rem;
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-rule-2);
}
.shell-d .data td { padding: var(--space-4); vertical-align: middle; }
.shell-d .data tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .shell-d .data tbody tr:hover { background: var(--color-paper-2); } }
.shell-d .data td.r, .shell-d .num { font-family: var(--font-mono); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; }

.shell-d .figures { border: 0; background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-2); }
.shell-d .figure { padding: var(--space-4) var(--space-5); }
.shell-d .figure + .figure { border-left: 1px solid var(--color-rule); }
.shell-d .figure__label { font-weight: 700; color: var(--color-ink); }
.shell-d .figure__value { font-size: 1.5rem; font-weight: 500; }
@media (max-width: 520px) { .shell-d .figure + .figure { border-left: 0; border-top: 1px solid var(--color-rule); } }

/* 開閉リンクは「操作できる文字」なので青。赤は主ボタンと現在地に取っておく */
.shell-d details.disclose summary { color: var(--color-link); }
/* カードの中の数値帯は影を重ねず、線だけで区切る */
.shell-d .panel .figures { box-shadow: none; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); border-radius: 0; }
.shell-d .panel .figure { padding-left: 0; }
.shell-d .panel .figure + .figure { padding-left: var(--space-4); }
.shell-d .panel .figure__value { font-size: 1.25rem; }
/* 入力フォームは白いカードに載せる */
.shell-d form.form.panel { padding: var(--space-6) 30px; }

/* ホームの要約：白いカードに件数を並べる。件数が0でない「自社の番」だけ赤で示す */
.d-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0 0 var(--space-2); padding: 0; list-style: none; background: var(--color-rule); border-radius: var(--radius-2); box-shadow: var(--shadow-card); overflow: hidden; }
.d-kpis li { background: var(--color-surface); }
.shell-d .d-kpis a, .d-kpis .d-kpi { display: block; height: 100%; padding: var(--space-4) var(--space-5); color: var(--color-ink); transition: background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .shell-d .d-kpis a:hover { background: var(--color-paper-2); text-decoration: none; color: var(--color-ink); } }
.shell-d .d-kpis a:active { background: var(--color-brand-wash); }
.d-kpi__label { display: block; font-size: 0.75rem; font-weight: 700; }
.d-kpi__value { display: block; margin-top: var(--space-2); font: 500 1.75rem/1 var(--font-mono); letter-spacing: 0.02em; }
.d-kpi__value small { margin-left: 4px; font: 400 0.75rem/1 var(--font-body); color: var(--color-ink-3); }
.d-kpi--alert .d-kpi__value { color: var(--color-brand); }

/* 状態ラベル：Crowd Bank の「日本／その他」タグに寄せた角の立った小札 */
.shell-d .pill { border-radius: 2px; font-weight: 500; padding: 1px 8px; }
.shell-d .pill::before { display: none; }
.shell-d .pill--accent { background: var(--color-brand-wash); color: var(--color-brand-ink); }

/* ボタン：主ボタンは赤の塗り・角ほぼ直角。それ以外は白地に線。 */
.shell-d .btn { border-radius: 2px; font-weight: 700; letter-spacing: 0.04em; }
.shell-d .btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: oklch(100% 0 0); }
@media (hover: hover) { .shell-d .btn--primary:hover { background: var(--color-brand-ink); border-color: var(--color-brand-ink); color: oklch(100% 0 0); text-decoration: none; } }
.shell-d a.btn:hover { text-decoration: none; }

.shell-d .input, .shell-d .select, .shell-d .textarea { border-radius: 2px; }
.shell-d .input, .shell-d .select { min-height: 40px; height: 40px; }
.shell-d .notice { border-radius: 2px; }

/* ── 狭い画面：ナビを横スクロールの帯に畳む ── */
@media (max-width: 860px) {
  .d-body { grid-template-columns: minmax(0, 1fr); }
  .d-nav { display: flex; overflow-x: auto; padding: 0; border-bottom: 1px solid var(--color-rule-2); }
  .d-nav ul { display: flex; padding: 0; border-bottom: 0; }
  .shell-d .d-nav a { padding: 0 var(--space-4); white-space: nowrap; min-height: 44px; }
  .shell-d .d-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-brand); }
  .d-user__org { display: none; }
}
@media (max-width: 860px) {
  /* 列を潰さず、表の中だけ横スクロールさせる */
  .shell-d .table-scroll table.data { min-width: 680px; }
}
@media (max-width: 414px) {
  .d-head { padding: 0 var(--space-3); }
  .shell-d .panel { padding: var(--space-4); }
}

/* ── 紙面（契約書・帳票）の中は影を付けない。紙の上の表として線だけで組む ── */
.shell-d .paper { border-radius: var(--radius-2); box-shadow: var(--shadow-card); border: 0; }
.shell-d .paper .table-scroll { box-shadow: none; border-top: 1px solid var(--color-ink); border-radius: 0; }
.shell-d .paper .data th { padding-top: var(--space-3); }
.shell-d .data tfoot th, .shell-d .data tfoot td { border-bottom: 0; border-top: 1px solid var(--color-rule); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.shell-d .data tfoot tr:last-child th, .shell-d .data tfoot tr:last-child td { border-top: 1px solid var(--color-ink); font-weight: 700; }
.shell-d .doc-total { max-width: none; }

/* ═══════════ 案件（Crowd Bank のファンド一覧・詳細に倣う） ═══════════ */

/* サムネイル：一覧は 80px 角、詳細・新着は 4:3 の大判。NEW は左上の赤帯 */
.case-thumb { position: relative; flex: none; overflow: hidden; background: var(--color-paper); }
.case-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-thumb--sm { width: 80px; height: 80px; }
.case-thumb--lg { width: 100%; aspect-ratio: 4 / 3; }
.case-thumb__blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-rule), var(--color-paper)); }
.case-new { position: absolute; top: 0; left: 0; padding: 2px 8px; background: var(--color-brand); color: oklch(100% 0 0); font: 600 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.08em; }
.case-thumb--lg .case-new { padding: 4px 12px; font-size: 0.8125rem; }
.case-thumb__note { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; background: oklch(100% 0 0 / 0.85); color: var(--color-ink-2); font-size: 0.625rem; border-radius: 2px; }

/* 分類タグ：濃い札＋枠の二連（「日本｜その他」の形）。回答状況も同じ形の札で並べる */
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case-tag { display: inline-flex; align-items: stretch; border: 1px solid var(--color-ink); border-radius: 2px; font-size: 0.6875rem; line-height: 1; white-space: nowrap; }
.case-tag:not(:has(b)) { padding: 3px 7px; }
.case-tag b { padding: 3px 7px; background: var(--color-ink); color: oklch(100% 0 0); font-weight: 500; }
.case-tag:has(b) { padding-right: 8px; gap: 7px; align-items: center; }
.case-tag--todo { border-color: var(--color-brand); color: var(--color-brand); }
.case-tag--live { border-color: var(--color-brand); background: var(--color-brand); color: oklch(100% 0 0); }
.case-tag--warn { border-color: var(--color-warn); color: var(--color-warn); }
.case-tag--ok { border-color: var(--color-ok); color: var(--color-ok); }
.case-tag--quiet { border-color: var(--color-rule-2); color: var(--color-ink-3); }

/* 募集状況：赤い「募集中」、終わったものは灰色の札 */
.case-state { display: inline-block; min-width: 80px; padding: 8px 10px; border-radius: 2px; text-align: center; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: var(--color-rule); color: oklch(100% 0 0); }
.case-state--live { background: var(--color-brand); }
.case-state--done { background: oklch(52% 0.11 155); }
.case-state--quiet { background: oklch(80% 0 0); }
.case-closed { color: var(--color-brand); font-weight: 700; }
.case-days { margin-left: 2px; font-size: 0.75em; color: var(--color-ink-3); font-family: var(--font-body); }

/* 一覧の表 */
.shell-d .case-table th { text-align: center; vertical-align: bottom; }
.shell-d .case-table th:first-child { text-align: left; padding-left: calc(var(--space-4) + 96px); }
.shell-d .case-table .th-sub { font-weight: 400; font-size: 0.6875rem; color: var(--color-ink-3); }
.shell-d .case-table td { padding: var(--space-3) var(--space-4); }
.shell-d .case-table .c { text-align: center; }
.shell-d .case-table__rate { font-size: 1.0625rem; }
.shell-d .case-row { display: flex; align-items: center; gap: var(--space-4); color: var(--color-ink); min-width: 0; }
@media (hover: hover) { .shell-d .case-row:hover { text-decoration: none; color: var(--color-ink); } .shell-d .case-row:hover .case-row__title { color: var(--color-brand); } }
.case-row__text { display: grid; gap: 6px; min-width: 0; }
.case-row__title { font-weight: 700; font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease-out); }
.shell-d .case-table .sub { display: block; font-size: 0.6875rem; color: var(--color-ink-3); }

/* ホームの新着カード（追加仕様 F01）：画像＋大きな提示利益率 */
.arrivals { margin-bottom: var(--space-6); }
.shell-d .arrivals__h { margin-bottom: var(--space-3); }
.arrival { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-2); overflow: hidden; border-top: 3px solid var(--color-brand); }
.arrival + .arrival { margin-top: var(--space-4); }
.arrival__media { display: block; }
.arrival__media .case-thumb--lg { height: 100%; aspect-ratio: auto; min-height: 220px; }
.arrival__body { padding: var(--space-5) 30px; display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.arrival__no { margin: var(--space-1) 0 0; font-size: 0.6875rem; color: var(--color-ink-3); }
.shell-d .arrival__title { font-size: 1.25rem; font-weight: 700; }
.shell-d .arrival__title a { color: var(--color-ink); }
.arrival__figs { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); margin: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.arrival__fig { padding: var(--space-3) var(--space-4); display: grid; align-content: start; gap: 6px; }
.arrival__fig:first-child { padding-left: 0; }
.arrival__fig + .arrival__fig { border-left: 1px solid var(--color-rule); }
.arrival__fig dt { font-size: 0.75rem; font-weight: 700; }
.arrival__fig dt small { font-weight: 400; color: var(--color-ink-3); }
.arrival__fig dd { margin: 0; font-size: 0.9375rem; }
.arrival__left { display: block; color: var(--color-brand); font-weight: 700; font-size: 0.75rem; }
.case-rate { font: 500 2.75rem/1 var(--font-mono); letter-spacing: 0.01em; color: var(--color-ink); white-space: nowrap; }
.case-rate small { font-size: 0.55em; }
.case-rate em { font-style: normal; font-size: 0.45em; margin-left: 2px; }
.arrival__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.arrival__actions form { display: contents; }
.arrival__actions .btn--primary { min-width: 200px; }
.arrival__more { font-size: 0.8125rem; margin-left: auto; }

/* 詳細：見出し → 画像＋数値（左）と条件表＋申込ボタン（右） */
.case-head { margin: var(--space-2) 0 var(--space-5); }
.case-head__no { margin: var(--space-3) 0 2px; font-size: 0.75rem; color: var(--color-ink-3); }
.shell-d .case-head__title { font-size: 1.75rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; }
.case-head__sub { margin-top: var(--space-2); font-size: 0.875rem; color: var(--color-ink-2); }
.case-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--space-5); background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-2); }
.case-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.case-figs > div { padding: var(--space-4) var(--space-3); text-align: center; display: grid; gap: 8px; align-content: start; }
.case-figs > div + div { border-left: 1px solid var(--color-rule); }
.case-figs dt { font-size: 0.75rem; color: var(--color-ink-2); }
.case-figs dt small { color: var(--color-ink-3); }
.case-figs dd { margin: 0; font-size: 1rem; font-weight: 500; }
.case-figs .case-rate { font-size: 2.25rem; }
.case-note { font-size: 0.6875rem; color: var(--color-ink-3); text-align: center; max-width: none; }
.case-spec dl { margin: 0; }
.case-spec dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); }
.case-spec dl > div:first-child { border-top: 1px solid var(--color-rule); }
.case-spec dt { font-size: 0.8125rem; color: var(--color-ink-2); white-space: nowrap; }
.case-spec dd { margin: 0; text-align: right; font-weight: 700; }
.case-spec dd small { display: block; font-weight: 400; font-size: 0.6875rem; color: var(--color-ink-3); }
.case-spec dd .num { font-size: 1.0625rem; }
.shell-d .case-spec__cta { display: flex; width: 100%; min-height: 52px; margin-top: var(--space-5); font-size: 1rem; border-radius: 4px; box-shadow: inset 0 -3px 0 oklch(0% 0 0 / 0.18); }
.shell-d .case-spec__cta[aria-disabled="true"] { background: var(--color-rule); color: var(--color-ink-3); border-color: transparent; box-shadow: none; cursor: default; }
.case-apply { scroll-margin-top: calc(var(--d-head-h) + var(--space-4)); }
.case-apply:target .panel { box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-card); }

/* 参考計算（「投資収益シミュレーション」に相当） */
.shell-d .sim h2 { margin-bottom: var(--space-2); }
.sim__row { display: grid; gap: 6px; margin: var(--space-4) 0 var(--space-3); padding: var(--space-4); background: var(--color-paper-2); font-size: 0.8125rem; font-weight: 700; }
.sim__input { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.sim__input .input { flex: 1; min-width: 0; }
.sim__out { margin: 0 0 var(--space-3); }
.sim__out > div { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }
.sim__out dt { font-size: 0.8125rem; color: var(--color-ink-2); }
.sim__out dd { margin: 0; }
.sim__gain dd { color: var(--color-brand); font-size: 1.125rem; }

@media (max-width: 860px) {
  .arrival { grid-template-columns: minmax(0, 1fr); }
  .arrival__media .case-thumb--lg { min-height: 0; aspect-ratio: 16 / 9; }
  .arrival__figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .arrival__fig--rate { grid-column: 1 / -1; border-bottom: 1px solid var(--color-rule); }
  .arrival__fig:nth-child(2) { padding-left: 0; border-left: 0; }
  .arrival__more { margin-left: 0; }
  .case-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .shell-d .case-table th:first-child { padding-left: var(--space-4); }
}
@media (max-width: 414px) {
  .arrival__body { padding: var(--space-4); }
  .arrival__actions .btn--primary { flex: 1; min-width: 0; }
  .case-figs { grid-template-columns: minmax(0, 1fr); }
  .case-figs > div + div { border-left: 0; border-top: 1px solid var(--color-rule); }
}
.case-state--sm { min-width: 0; padding: 3px 10px; font-size: 0.6875rem; }