/* 調味料の塩分早見アプリ固有の追加。基本の見た目は styles.css / theme.css（ほかのアプリと共通）。 */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 6px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px 8px; text-align: center; background: #fff; min-width: 0; }
.tile-label { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; }
.tile-label small { display: block; font-size: 10px; }
.tile strong { display: block; font-size: 24px; font-weight: 650; color: var(--green); font-variant-numeric: tabular-nums; line-height: 1.4; }
.tile strong small { font-size: 12px; margin-left: 2px; color: var(--muted); font-weight: 400; }
.tile .face { display: block; margin: 0 auto; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.tile .face-space { display: block; height: 26px; }
.tile-note { display: block; font-size: 10px; color: #8a4b12; }
.grade-pill { font-size: 10px; border-radius: 99px; padding: 1px 8px; border: 1px solid #cfdccc; color: #4a6a55; background: #f3f8f2; white-space: nowrap; }
.grade-pill.assumed { background: #fff0bf; color: #624000; border-color: #cea244; }
.card-note { margin: 8px 0 0; font-size: 11px; color: #624000; background: #fff7d9; border-radius: 8px; padding: 6px 9px; }
.zero-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.menu-card .card-actions { flex-wrap: wrap; }
.menu-card .card-actions .button { flex: 1 1 30%; min-width: 0; padding-left: 6px; padding-right: 6px; }
.goal-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.goal-chips button { min-width: 46px; min-height: 40px; border: 1px solid #e0e7d9; background: #f4f6ef; border-radius: 8px; font-size: 15px; padding: 4px 10px; }
.goal-chips button.active { background: var(--green); color: #fff; border-color: var(--green); }
.goal-other { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.goal-other select { min-height: 40px; }
.summary-box .salt-total > div { font-size: 38px; }
.reaction-avatar { display: inline-block; margin-right: 8px; vertical-align: middle; }
.reaction-character { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.meal-row-edit { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.meal-row-edit select { min-height: 44px; }
.meal-weight { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.compare-table .face { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-left: 4px; }
.reduction-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #edf4ed; color: var(--green); font-size: 13px; }
.salt-help { font-size: 11px; color: var(--muted); margin: 4px 0 8px; }

.tile.alert { background: #fde8e8; border-color: #c64a4a; }
.tile.alert strong, .tile.alert .tile-note { color: #a32020; font-weight: 700; }
.alert-text { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #a32020; }
.meal-item.row-alert { border: 2px solid #c64a4a; background: #fff6f6; }
.row-alert-text { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fde8e8; color: #a32020; font-weight: 700; font-size: 13px; }

.tile-sub { display: block; margin-top: 4px; font-size: 10px; line-height: 1.4; color: var(--muted); }