/* デザインシステム「AI Teleapo」の tokens.json と components/bundle.css をそのまま写したもの。
   値を変えるときはデザインシステム側を直してから、ここに写す。 */
:root {
  --surface: #f5f7fa;
  --surface-raised: #ffffff;
  --line: #d5dbe4;
  --line-strong: #6b7686;
  --ink: #1a2233;
  --ink-muted: #4a5568;
  --navy: #1f3a6e;
  --navy-pressed: #162b52;
  --navy-soft: #e6edf7;
  --on-navy: #ffffff;
  --status-uncontacted: var(--ink-muted);
  --status-appo: #0b5cad;
  --status-appo-soft: #e3effc;
  --status-materials: #0d6a6a;
  --status-materials-soft: #ddf2f0;
  --status-excluded: #b42318;
  --status-excluded-soft: #fdecea;
  --status-unreachable: #525c6a;
  --status-unreachable-soft: #eceff3;
  --danger: var(--status-excluded);
  --danger-soft: var(--status-excluded-soft);
  --warning: #8a4b00;
  --warning-soft: #fff3dc;
  --focus: #b45309;
  --scrim: rgba(26, 34, 51, 0.6);
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --button-height: 64px;
  --button-height-sub: 56px;
  --tap-min: 48px;
  --field-height: 56px;
  --icon-size: 28px;
  --content-max: 560px;
  --shadow-overlay: 0 8px 24px rgba(26, 34, 51, 0.18);
  --font-sans: "BIZ UDPGothic", "BIZ UDGothic", "Noto Sans JP", sans-serif;
  --font-mono: "BIZ UDGothic", "Noto Sans JP", monospace;
}

/* AI Teleapo — component styles. Values come from tokens.css; only component-local custom properties are declared here. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 30px; background: var(--surface); color: var(--ink); -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tp-icon { width: var(--icon-size); height: var(--icon-size); flex: none; }
.tp-stack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); max-width: var(--content-max); }
.tp-row { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); align-items: flex-start; }
.tp-num { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Button */
.tp-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; min-height: var(--button-height); padding: var(--space-1) var(--space-4); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--navy); font: inherit; font-size: 20px; line-height: 28px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.tp-btn--primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.tp-btn--primary:active { background: var(--navy-pressed); border-color: var(--navy-pressed); }
.tp-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-navy); }
.tp-btn--sub { width: auto; min-height: var(--button-height-sub); min-width: var(--tap-min); padding: var(--space-1) var(--space-2); border-color: transparent; background: transparent; font-size: 18px; line-height: 30px; text-decoration: underline; text-underline-offset: 4px; }
.tp-btn--sub .tp-icon { width: 24px; height: 24px; }
.tp-btn__num { font-family: var(--font-mono); }

/* ResultButton */
.tp-result { --c: var(--ink); --c-soft: var(--surface-raised); display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 80px; padding: var(--space-2) var(--space-4); border: 2px solid var(--c); border-radius: var(--radius-md); background: var(--c-soft); color: var(--c); font: inherit; text-align: left; cursor: pointer; }
.tp-result .tp-icon { width: 32px; height: 32px; }
.tp-result__text { display: flex; flex-direction: column; }
.tp-result__label { font-size: 20px; line-height: 28px; font-weight: 700; }
.tp-result__hint { font-size: 16px; line-height: 26px; color: var(--ink); }
.tp-result--appo { --c: var(--status-appo); --c-soft: var(--status-appo-soft); }
.tp-result--materials { --c: var(--status-materials); --c-soft: var(--status-materials-soft); }
.tp-result--excluded { --c: var(--status-excluded); --c-soft: var(--status-excluded-soft); }
.tp-result--unreachable { --c: var(--status-unreachable); --c-soft: var(--surface-raised); min-height: var(--button-height); border-style: dashed; }
.tp-result[aria-pressed="true"] { background: var(--c); color: var(--on-navy); }
.tp-result[aria-pressed="true"] .tp-result__hint { color: var(--on-navy); }

/* StatusBadge */
.tp-badge { --c: var(--status-uncontacted); --c-soft: var(--surface-raised); display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-1) 2px 6px; border: 2px solid var(--c); border-radius: var(--radius-sm); background: var(--c-soft); color: var(--c); font-size: 16px; line-height: 26px; font-weight: 700; white-space: nowrap; }
.tp-badge .tp-icon { width: 20px; height: 20px; }
.tp-badge--uncontacted { border-color: var(--line-strong); }
.tp-badge--appo { --c: var(--status-appo); --c-soft: var(--status-appo-soft); }
.tp-badge--materials { --c: var(--status-materials); --c-soft: var(--status-materials-soft); }
.tp-badge--excluded { --c: var(--status-excluded); --c-soft: var(--status-excluded-soft); }
.tp-badge--unreachable { --c: var(--status-unreachable); --c-soft: var(--status-unreachable-soft); }

/* CountTile */
.tp-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); max-width: var(--content-max); }
.tp-count { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.tp-count__label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 16px; line-height: 26px; font-weight: 700; color: var(--ink-muted); }
.tp-count__label .tp-icon { width: 20px; height: 20px; }
.tp-count__value { white-space: nowrap; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tp-count__unit { font-size: 18px; margin-left: 2px; }
.tp-count--appo .tp-count__label { color: var(--status-appo); }
.tp-count--materials .tp-count__label { color: var(--status-materials); }

/* TextField */
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-field__label { font-size: 18px; line-height: 30px; font-weight: 700; color: var(--ink); }
.tp-field__hint { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.tp-field__input { width: 100%; height: var(--field-height); padding: 0 var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 20px; }
.tp-field__input--number { font-family: var(--font-mono); font-weight: 700; }
.tp-field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 16px; line-height: 26px; font-weight: 700; color: var(--danger); }
.tp-field__error .tp-icon { width: 22px; height: 22px; margin-top: 2px; }
.tp-field--error .tp-field__input { border-color: var(--danger); border-width: 3px; }

/* OptionChip */
.tp-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.tp-options legend { padding: 0; margin-bottom: 6px; font-size: 18px; line-height: 30px; font-weight: 700; }
.tp-chip { position: relative; display: flex; }
.tp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tp-chip span { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--button-height-sub); padding: var(--space-1) var(--space-2); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; }
.tp-chip span .tp-icon { display: none; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; padding: 3px; border: 2px solid var(--navy); border-radius: 50%; background: var(--surface-raised); color: var(--navy); }
.tp-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.tp-chip input:checked + span .tp-icon { display: block; }
.tp-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Checkbox */
.tp-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--button-height-sub); padding: var(--space-1) var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 18px; line-height: 28px; font-weight: 700; cursor: pointer; }
.tp-check input { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px; margin: 0; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); display: grid; place-content: center; cursor: pointer; }
.tp-check input::after { content: ""; width: 16px; height: 9px; border-left: 3px solid var(--on-navy); border-bottom: 3px solid var(--on-navy); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.tp-check input:checked { background: var(--navy); border-color: var(--navy); }
.tp-check input:checked::after { opacity: 1; }
.tp-check:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); }

/* Notice */
.tp-notice { --c: var(--navy); --c-soft: var(--navy-soft); display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 2px solid var(--c); border-radius: var(--radius-lg); background: var(--c-soft); color: var(--ink); }
.tp-notice > .tp-icon { color: var(--c); width: 32px; height: 32px; }
.tp-notice__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c); }
.tp-notice__body { margin: 4px 0 0; font-size: 18px; line-height: 30px; }
.tp-notice__actions { display: flex; gap: var(--space-2); margin-top: 4px; margin-left: calc(var(--space-2) * -1); }
.tp-notice--toast { box-shadow: var(--shadow-overlay); }
.tp-notice--error { --c: var(--danger); --c-soft: var(--danger-soft); }
.tp-notice--warning { --c: var(--warning); --c-soft: var(--warning-soft); }
.tp-notice--stop { --c: var(--status-excluded); --c-soft: var(--status-excluded-soft); }

/* ConfirmDialog */
.tp-scrim { display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--scrim); }
.tp-dialog { width: 100%; max-width: 440px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.tp-dialog__title { margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; }
.tp-dialog__body { margin: var(--space-1) 0 var(--space-4); }
.tp-dialog__actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Tabs */
.tp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 2px solid var(--line); background: var(--surface-raised); }
.tp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: var(--space-1) 4px; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 16px; line-height: 22px; font-weight: 700; cursor: pointer; }
.tp-tab .tp-icon { width: 24px; height: 24px; }
.tp-tab__count { font-family: var(--font-mono); font-size: 16px; }
.tp-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); background: var(--navy-soft); }

/* CompanyCard */
.tp-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.tp-card__name { margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; overflow-wrap: anywhere; }
.tp-card__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); margin: 0; }
.tp-card__meta dt { font-size: 16px; line-height: 32px; color: var(--ink-muted); }
.tp-card__meta dd { margin: 0; font-size: 18px; line-height: 32px; }
.tp-card__phone { font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: .02em; }

/* ScreenHeader */
.tp-header { display: flex; flex-direction: column; gap: 4px; padding: var(--space-1) var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.tp-header__bar { display: flex; align-items: center; justify-content: space-between; margin-left: calc(var(--space-2) * -1); }
.tp-header__step { font-size: 16px; line-height: 26px; font-weight: 700; color: var(--ink-muted); }
.tp-header__title { margin: 0; font-size: 28px; line-height: 38px; font-weight: 700; }

/* 幅が狭い画面（文字拡大200％など・幅389px以下）。横スクロールを出さないため、件数の札は縦1列にし、バッジは折り返す。
   保存などの知らせ（.tp-notice--toast）は、余白とアイコンを詰めて背を低くする。文字は16px以上のまま。
   次の画面へ移る知らせ（保存など）は重ねず、画面の一番上に段として出す（アプリ側の app.js / app.css） */
@media (max-width: 389px) {
  .tp-counts { grid-template-columns: minmax(0, 1fr); }
  .tp-count { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-2); padding: var(--space-1) var(--space-3); }
  .tp-badge { white-space: normal; max-width: 100%; }
  .tp-notice--toast { gap: var(--space-1); padding: var(--space-1) var(--space-2); }
  .tp-notice--toast > .tp-icon { width: 24px; height: 24px; }
  .tp-notice--toast .tp-notice__title { font-size: 18px; line-height: 26px; }
  .tp-notice--toast .tp-notice__body { font-size: 16px; line-height: 26px; }
  .tp-notice--toast .tp-notice__actions { margin-top: 0; }
}