/* 案件の部品 (tokens.css・base.css の後に読み込む)。値は tokens.css の変数で書く */

#view { min-width: 0; }
.boot { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-10) 0; color: var(--text-muted); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--gray-200); border-top-color: var(--gray-700); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* LINE WORKS・LINE のヘッダーと重ならない余白 */
.page { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); }
.page-head .head-actions { display: flex; gap: var(--sp-2); }
.page > * + * { margin-top: var(--sp-4); }
.page > .page-head + * { margin-top: 0; }
.section-title { font-size: var(--text-lg); margin: var(--sp-6) 0 var(--sp-3); }
.stack { display: grid; gap: var(--sp-2); }
.sidebar-brand { font-weight: 700; padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.btn { text-decoration: none; }
.btn-small { min-height: var(--tap); padding: 0 var(--sp-3); font-size: var(--text-sm); }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
.btn-spacer { display: inline-block; width: 88px; }
.field-error:empty { display: none; }
.skeleton { height: 1em; }
.sk-60 { width: 60%; }
.sk-40 { width: 40%; }

/* iPhone の Safari は select の高さ (min-height) を無視して 23px に縮める。見た目を自前にして 44px を守る */
.select { -webkit-appearance: none; appearance: none; padding-right: var(--sp-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352525b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* 下タブがある画面では、送信ボタンの帯をタブの上に出す */
.action-bar { bottom: calc(56px + env(safe-area-inset-bottom)); margin: var(--sp-4) calc(-1 * var(--sp-4)) 0; z-index: 2; }
.liff .action-bar { bottom: 0; }
@media (min-width: 960px) { .action-bar { bottom: 0; margin: var(--sp-4) 0 0; border: 1px solid var(--border); border-radius: var(--radius-card); } }
.tabbar { z-index: 3; }

/* お知らせ (色 + 見出しの文字) */
.notice { border-left: 4px solid var(--gray-400); }
.notice-title { font-weight: 700; margin: 0 0 var(--sp-1); }
.notice p { margin: 0 0 var(--sp-2); }
.notice p:last-child { margin-bottom: 0; }
.notice-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.notice-info { border-left-color: var(--info); background: var(--info-bg); }
.reasons { margin: 0 0 var(--sp-2); padding-left: 1.2em; }

/* ホーム */
.today-card { display: grid; gap: var(--sp-2); }
.today-card p { margin: 0; }
.today-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.stat-link { text-decoration: none; color: var(--text); padding: var(--sp-3); min-height: var(--tap); }
.stat-link .stat-value { line-height: 1.2; }
.stat-danger { border-color: var(--danger); }
.stat-danger .stat-value { color: var(--danger); }
.stat-warn .stat-value { color: var(--warn); }
.stat-ok .stat-value { color: var(--ok); }
.shortcuts { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }

/* 体調のフォーム: 押す場所は大きく (手袋でも押せるように) */
.choices { border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
.choices legend { padding: 0; margin-bottom: var(--sp-2); }
.choice-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); }
.choice-row.wrap { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; display: flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: var(--sp-2); border: 1px solid var(--gray-300); border-radius: var(--radius-control); background: var(--surface); font-weight: 600; cursor: pointer; }
.choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.temp-row { display: grid; grid-template-columns: 56px 1fr auto 56px; align-items: center; gap: var(--sp-2); }
.temp-step { min-height: 52px; font-size: var(--text-xl); padding: 0; }
.temp-input { text-align: center; font-size: var(--text-xl); font-weight: 700; min-height: 52px; }
.temp-unit { font-weight: 600; }
.retry[hidden] { display: none; }

/* 一覧 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.chip { min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--gray-300); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.date-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.title-note { margin-left: var(--sp-2); vertical-align: middle; }
.reasons-line { color: var(--text); }
a.list-item { cursor: pointer; }
.list-button { width: 100%; text-align: left; font: inherit; cursor: pointer; }
details.list-item summary { list-style: none; display: grid; gap: 2px; cursor: pointer; }
details.list-item summary::-webkit-details-marker { display: none; }
details.list-item[open] summary { margin-bottom: var(--sp-3); }
.member-row { grid-template-columns: 1fr auto; align-items: center; }
.role-select { width: auto; min-width: 128px; }

/* 詳細 */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }
.compare > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); }
.actions-bottom { margin-top: var(--sp-6); }

/* 送る文面 */
.message-preview { font-size: var(--text-sm); background: var(--gray-50); }
.send-panel { display: grid; gap: var(--sp-2); }
.send-panel p { margin: 0; }

/* 協力会社 (LINE) */
.invite-card p { margin: 0; }
.invite-tenant { font-size: var(--text-lg); font-weight: 700; }
.consent-label { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2); align-items: start; font-weight: 600; cursor: pointer; }
.consent-label input { width: 24px; height: 24px; margin: 2px 0 0; }
.who-card { display: grid; gap: var(--sp-2); }
.who-main { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.input-phone { max-width: 16em; }

/* 確認の画面 */
.overlay { position: fixed; inset: 0; background: rgba(24, 24, 27, 0.5); display: grid; place-items: center; padding: var(--sp-4); z-index: 10; }
.dialog { width: 100%; max-width: 420px; }
.dialog p { margin: 0 0 var(--sp-4); }

/* トースト */
.toast { z-index: 11; }
.toast[data-kind="error"] { background: var(--danger); }

/* 診断 */
.diag { font-size: var(--text-sm); color: var(--text-muted); }
.diag summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }