/* 北谷町 防災アプリだけの見た目（共通の style.css のあとに読み込む） */

.test-band{background:var(--warning);color:var(--surface);text-align:center;font-weight:700;font-size:.85rem;padding:6px 16px}

/* 電話ボタン */
.call-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.call{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 14px;border-radius:var(--r);text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--surface-2)}
.call-label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.call-num{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.call-danger{background:color-mix(in oklab,var(--danger) 12%,var(--surface));border-color:transparent}
.call-danger .call-num{color:var(--danger)}
.call-info{background:color-mix(in oklab,var(--info) 12%,var(--surface));border-color:transparent}
.call-info .call-num{color:var(--info)}
.call-plain{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.call-plain .call-num{font-size:1.15rem;color:var(--accent);white-space:nowrap}

/* 警戒レベル4 */
.level4{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:color-mix(in oklab,#7E22CE 12%,var(--surface));border:1px solid color-mix(in oklab,#7E22CE 30%,var(--surface))}
.level4 p{margin:4px 0 0;font-size:.9rem}
.level4-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#7E22CE;color:#fff;font-weight:800;font-size:1.3rem}

/* ホームの入口 */
.home-link{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink)}
.home-link > span:last-child{display:flex;flex-direction:column}
.home-icon{font-size:1.8rem;line-height:1}

/* 避難所カード */
.shelter{padding:14px 16px}
.shelter-top{display:flex;gap:10px;align-items:flex-start}
.shelter-no{flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.85rem}
.shelter-main{flex:1;min-width:0}
.shelter-name{font-weight:700;line-height:1.4}
.shelter-addr{color:var(--muted);font-size:.85rem}
.shelter-note{font-size:.85rem;color:var(--ink-2);margin-top:4px}
.fav-btn{flex:none;width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);color:var(--muted);font-size:1.25rem;cursor:pointer}
.fav-btn[aria-pressed="true"]{color:var(--warning);border-color:color-mix(in oklab,var(--warning) 45%,var(--surface));background:color-mix(in oklab,var(--warning) 12%,var(--surface))}
.hz{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.hz span{font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:var(--r-full);border:1px solid var(--line)}
.hz .ok{background:color-mix(in oklab,var(--success) 12%,var(--surface));color:var(--success);border-color:transparent}
.hz .ng{color:var(--muted);text-decoration:line-through;opacity:.75}
.hz .unk{color:var(--muted);border-style:dashed}
.shelter-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:10px}
#hazard{margin-bottom:4px}

/* 備えのチェック */
.prep-group h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.prep-group h2 .muted{font-size:.85rem;font-weight:600}
.prep-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0 16px}
.prep-items .check{align-items:flex-start;padding:6px 0}
.prep-items .check input{margin-top:4px;flex:none}
.prep-items .check small{display:block;color:var(--muted)}
.progress-bar{height:8px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.progress-bar > span{display:block;height:100%;background:var(--success);transition:width .3s var(--ease)}

/* 警戒レベル */
.levels{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lv{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line)}
.lv div{display:flex;flex-direction:column}
.lv span:not(.lv-no){font-size:.875rem;color:var(--ink-2)}
.lv-no{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-weight:800;color:#fff}
.lv5 .lv-no{background:#111}
.lv4 .lv-no{background:#7E22CE}
.lv3 .lv-no{background:#DC2626}
.lv2 .lv-no{background:#CA8A04}
.lv1 .lv-no{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.lv4{background:color-mix(in oklab,#7E22CE 10%,var(--surface))}

/* 津波警報の表 */
.tw-major td:first-child{color:var(--danger)}
.tw-warn td:first-child{color:var(--danger)}
.tw-adv td:first-child{color:var(--warning)}

.steps{margin:0;padding-left:1.4em;display:grid;gap:8px}
.steps strong{display:block}

/* 共通の input の指定に負けて検索アイコンと文字が重なるため、ここで余白を付け直す */
.toolbar .search input[type="search"]:not([type="checkbox"]){padding-left:38px}