@import './tokens.css';

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3 { margin: 0; }

/* ---------------- アプリバー ---------------- */
#app-bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  padding: 6px 8px;
  min-height: 48px;
  flex: 0 0 auto;
}
#app-bar h1 { font-size: 1.05rem; font-weight: 700; flex: 1; }
.bar-btn {
  color: var(--c-brand-ink);
  font-size: 1.5rem;
  line-height: 1;
  min-width: 44px;
  min-height: 40px;
  border-radius: var(--r-sm);
}
.bar-btn:active { background: rgba(255,255,255,.2); }
#net-badge { font-size: 1.1rem; }
#net-badge[data-online='false'] { filter: grayscale(1); opacity: .8; }

/*
 * 計測中はアプリバーとバナーを隠し、その約100pxを径級ボタンに回す。
 * マウントに付けたまま親指で押すとき、スクロールが最大のストレスになるため、
 * 1画面に収まる行数を1行でも増やすことを優先する。
 * 隠したアプリバーの機能（メニュー・通信状態）は #meta-line が引き継ぐ。
 */
body[data-screen='measure'] #app-bar,
body[data-screen='measure'] #sub-banner { display: none; }

/* ---------------- 画面共通 ---------------- */
main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.screen { flex: 1 1 auto; min-height: 0; display: none; flex-direction: column; }
.screen.is-active { display: flex; }

.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------------- セットアップ画面 ---------------- */
#screen-setup .scroll { padding: 12px; }
.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-text-weak);
  margin-bottom: 4px;
}
.field input[type='text'],
.field input[type='number'],
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: 8px 10px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  user-select: text;
}
.field textarea { min-height: 72px; resize: vertical; }

/* ▲▼ピッカー（径級は2cm刻み等の制約があるため自由入力させない） */
.picker { display: flex; align-items: stretch; gap: 6px; }
.picker-group { flex: 1; display: flex; flex-direction: column; align-items: center; }
.picker-group > span { font-size: .8rem; color: var(--c-text-weak); }
.picker-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.picker-btn {
  flex: 0 0 auto;
  width: 56px;
  height: var(--tap-min);
  border-radius: var(--r-md);
  background: var(--c-neutral);
  color: var(--c-neutral-ink);
  font-size: 1.4rem;
  font-weight: 700;
}
.picker-btn:active { background: var(--c-tap-active); color: var(--c-tap-ink); }
.picker-value {
  flex: 1;
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
}
.picker-count { text-align: center; font-size: .8rem; color: var(--c-text-weak); margin-top: 4px; }

.preset-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.preset-chip {
  border: 2px solid var(--c-brand);
  color: var(--c-brand-dark);
  background: var(--c-surface);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 48px;
  font-weight: 700;
}
.preset-chip:active { background: var(--c-brand); color: var(--c-brand-ink); }

.btn {
  display: block;
  width: 100%;
  min-height: 64px;
  border-radius: var(--r-lg);
  font-size: var(--fs-action);
  font-weight: 800;
  background: var(--c-neutral);
  color: var(--c-neutral-ink);
}
.btn-primary { background: var(--c-primary); color: var(--c-primary-ink); }
.btn-accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn-danger { background: var(--c-danger); color: var(--c-danger-ink); }
.btn-sm { min-height: 48px; font-size: 1rem; }
.btn:active { filter: brightness(.88); }
.btn[disabled] { opacity: .45; }

.sticky-foot {
  flex: 0 0 auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

/* ---------------- 計測画面 ---------------- */
/* 上部ダッシュボードは画面高の2/3以下（--dash-max-h）に収める */
#dashboard {
  flex: 0 0 auto;
  max-height: var(--dash-max-h);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-border);
  padding: 3px 8px 4px;
}
#meta-line {
  flex: 0 0 auto;   /* 履歴が増えても縮まない（潰れると樹種が読めなくなる） */
  display: flex;
  align-items: center;
  gap: 6px;
}
#meta-text {
  flex: 1;
  font-size: calc(.85rem * var(--ui-scale));
  color: var(--c-text);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-btn {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  min-width: 40px;
  min-height: 30px;
  border-radius: var(--r-sm);
  color: var(--c-brand);
}
.meta-btn:active { background: var(--c-neutral); }
#meta-net { flex: 0 0 auto; font-size: 1rem; }
#meta-net[data-online='false'] { filter: grayscale(1); opacity: .8; }
#totals { flex: 0 0 auto; display: flex; gap: var(--gap); margin: 3px 0 4px; }
/*
 * ラベルと数字を同じ行に並べる。2段組みにすると合計だけで56px使い、
 * その分そのまま径級ボタンが小さくなる（8行なら1行あたり7pxの差になる）。
 */
.total-box {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  background: var(--c-bg);
  border-radius: var(--r-md);
  padding: 2px 8px;
}
.total-box .label { font-size: calc(var(--fs-dash-label) * var(--ui-scale)); color: var(--c-text-weak); white-space: nowrap; }
.total-box .value { font-size: calc(var(--fs-dash-value) * var(--ui-scale)); font-weight: 800; line-height: 1.1; }
.total-box .unit { font-size: calc(.8rem * var(--ui-scale)); font-weight: 600; margin-left: 2px; }
/* 工場の伝票に書き写すのは材積。本数より一段大きく出す */
.total-box.is-main .value { font-size: calc(var(--fs-dash-value) * 1.18 * var(--ui-scale)); }

/*
 * 入力履歴は「1行だけ」。国有林の研修などで数百本入力しても画面を埋めない。
 * 古い方から左へ流れ出て、最新が常に右端に残る。
 */
#history {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: calc(1.55em + 4px);
  overflow: hidden;
  white-space: nowrap;
  font-size: calc(var(--fs-history) * var(--ui-scale));
  border-top: 1px dashed var(--c-border);
  padding: 4px 2px 0 0;   /* 最新の1本が右端で切れないよう、わずかに余白を残す */
}
/* 左へ流れ出た古い入力が途中で切れて見えないよう、左端をぼかす */
#history:not(.is-empty) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px);
  mask-image: linear-gradient(to right, transparent 0, #000 18px);
}
#history.is-empty { justify-content: flex-start; }
/* 数字と区切りをひとかたまりで折り返す（行頭に区切り文字が落ちるのを防ぐ） */
.hist-item { flex: 0 0 auto; font-weight: 700; }
/* いま入れた1本がどれか、目を凝らさなくても分かるようにする */
.hist-item:last-child { font-weight: 900; color: var(--c-brand-dark); }
/* 区切り文字。inline-block にすることで、取消の取り消し線が区切りまで伸びない */
.hist-item:not(:last-child)::after {
  content: var(--hist-sep);
  display: inline-block;
  white-space: pre;
  color: var(--c-text-weak);
  font-weight: 400;
}
/* 取消済みは消さずに薄いグレー＋赤の取り消し線で残す */
.hist-item.is-cancelled { color: #9aa396; text-decoration: line-through; text-decoration-color: var(--c-danger); text-decoration-thickness: 2px; }
#history-empty { color: var(--c-text-weak); }

/* 径級グリッド */
#grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 5px 6px;
  overscroll-behavior: contain;
  /* 半端に切れたカードを押してしまわないよう、行の頭で止める */
  scroll-snap-type: y proximity;
}
/* 収まりきらないときだけ、上下に「まだ続きがある」影を出す */
#grid-wrap.is-scrollable {
  box-shadow: inset 0 9px 9px -9px rgba(0,0,0,.45), inset 0 -9px 9px -9px rgba(0,0,0,.45);
}
#grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 5px;
  min-height: 100%;
  /*
   * 収まるときは下（親指側）に寄せる。収まらないときは上詰めにする。
   * CSSの safe end はブラウザによって一番上の行が画面外に押し出されて
   * 触れなくなることがあったため、JSが測って is-fits を付け外しする。
   */
  align-content: start;
}
#grid.is-fits { align-content: end; }
/* 径級数が奇数のとき、最後の1枚は余白を使い切って横いっぱいに広げる */
#grid.is-fits > .dia-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dia-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-height: var(--card-h, 72px);
  height: var(--card-h, 72px);
  padding: 4px 8px;
  border-radius: var(--r-md);
  background: var(--c-tap);
  color: var(--c-tap-ink);
  /* 炎天下では面の色だけでは境目が飛ぶ。輪郭を濃くしてカードを1枚ずつ切り分ける */
  border: 3px solid rgba(0,0,0,.38);
  text-align: left;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}
.dia-card[data-has-count='true'] { background: var(--c-tap-active); }
/*
 * 数字の大きさはカードの寸法から決める。径級が多くてカードが横長になったときは
 * 高さが効き、少なくて正方形に近づくと幅の上限が効く。
 * 幅の上限がないと、カードが大きくなったときに「1本」が2行に折り返してしまう。
 * 本数が3桁になるカードは、その分だけ一段小さくする。
 */
.dia-card {
  font-size: clamp(
    1.05rem,
    calc(min(var(--card-h, 72px) * .55, var(--card-w, 160px) * .26) * var(--ui-scale)),
    3.2rem
  );
}
.dia-card[data-wide='true'] { font-size: clamp(.95rem, calc(min(var(--card-h, 72px) * .55, var(--card-w, 160px) * .26) * var(--ui-scale) * .74), 2.4rem); }
.dia-card .d,
.dia-card .n { font-size: 1em; white-space: nowrap; }
.dia-card .d { font-weight: 900; line-height: 1.05; }
.dia-card .d small { font-size: .45em; font-weight: 700; }
/* 本数側は長押しで直接入力できる。点線の下線でそれと分かるようにする */
.dia-card .n {
  font-weight: 900;
  line-height: 1.05;
  padding: 2px 2px 0;
  border-bottom: 3px dotted rgba(0, 0, 0, .3);
}
/* まだ1本も入れていない径級は本数を薄くし、入れた径級だけが目に飛び込むようにする */
.dia-card[data-has-count='false'] .n { opacity: .34; }
.dia-card .n small { font-size: .45em; font-weight: 700; margin-left: 1px; }
.dia-card.is-hit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-glow);
  animation: glow .28s ease-out;
  /* 発光中でも当たり判定を奪わない。
     これがないと、タップ直後に長押しした場合に押した場所を判別できなくなる */
  pointer-events: none;
}
@keyframes glow { from { opacity: .85; } to { opacity: 0; } }
.dia-card.is-longpress[data-lp='minus'] { outline: 4px solid var(--c-danger); outline-offset: -4px; }
.dia-card.is-longpress[data-lp='count'] { outline: 4px solid var(--c-accent); outline-offset: -4px; }

/* 操作バー */
#action-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  background: var(--c-bg);
  border-top: 2px solid var(--c-border);
}
#action-bar > .btn { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }

/* ボタン配置の左右切替（body[data-side] 1か所で全体反映） */
body[data-side='right'] #action-bar { flex-direction: row-reverse; }
/* 音声入力は圏外では使えない補助機能。一等地は取消とデータ出力に譲る */
/* #action-bar > .btn の flex:1 に負けないよう、同じ強さで指定する */
#action-bar > #voice-btn { flex: 0 0 56px; font-size: 1.3rem; }
#voice-btn[disabled] { opacity: .35; }
#voice-btn.is-listening { animation: pulse .9s infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.5); } }

/* ---------------- ドロワー ---------------- */
#drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(92vw, 420px);
  background: var(--c-surface);
  z-index: 40;
  transform: translateX(-100%);
  transition: transform .18s ease-out;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(0,0,0,.25);
}
#drawer.is-open { transform: none; }
#drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 39;
  display: none;
}
#drawer-scrim.is-open { display: block; }
.drawer-head {
  display: flex;
  align-items: center;
  background: var(--c-brand);
  color: var(--c-brand-ink);
  padding: 8px;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.drawer-head h2 { flex: 1; font-size: 1.05rem; }
.drawer-body { padding: 12px; }
.menu-section { margin-bottom: 20px; }
.menu-section > select { width: 100%; min-height: var(--tap-min); padding: 6px 10px; border: 2px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.menu-section > h3 { font-size: .95rem; color: var(--c-brand-dark); border-bottom: 2px solid var(--c-border); padding-bottom: 4px; margin-bottom: 8px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: .9rem;
}
.chip button { color: var(--c-danger); font-weight: 900; min-width: 28px; min-height: 28px; }
.inline-add { display: flex; gap: 6px; }
.inline-add input { flex: 1; min-height: 48px; padding: 6px 10px; border: 2px solid var(--c-border); border-radius: var(--r-md); user-select: text; }
.inline-add button { flex: 0 0 64px; border-radius: var(--r-md); background: var(--c-brand); color: var(--c-brand-ink); font-weight: 800; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; min-height: 48px; border-radius: var(--r-md); border: 2px solid var(--c-border); background: var(--c-surface); font-weight: 700; }
.seg button[aria-pressed='true'] { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note { font-size: .78rem; color: var(--c-text-weak); }
.switch { display: flex; align-items: center; gap: 8px; }
.switch input { width: 28px; height: 28px; }

/* ---------------- ダイアログ ---------------- */
dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  width: min(94vw, 460px);
  max-height: 88dvh;
  background: var(--c-surface);
  color: var(--c-text);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
.dlg-body { padding: 16px; overflow-y: auto; max-height: 72dvh; }
.dlg-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.dlg-question { font-size: 1.25rem; font-weight: 800; line-height: 1.5; }
.dlg-confirm { margin: 0; padding: 10px 16px 0; border-top: 2px solid var(--c-border); }
.dlg-foot { display: flex; gap: var(--gap); padding: 12px 16px 16px; }
.dlg-foot .btn { flex: 1; }
/* 「はい」は必ず左、「戻る」は右（仕様） */
/* 手書き伝票への転記元になる明細表。数字を読み違えないことを最優先にする */
.detail-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
/*
 * 出力確認の明細は、工場の手書き伝票へ書き写す元になる画面。
 * 老眼で読み違えると伝票そのものが間違うので、表示サイズ設定をここにも効かせる。
 */
.detail-table th, .detail-table td { padding: 5px 4px; border-bottom: 1px solid var(--c-border); text-align: right; font-size: calc(.95rem * var(--ui-scale)); }
.detail-table thead th { font-size: .78rem; white-space: nowrap; color: var(--c-text-weak); position: sticky; top: 0; background: var(--c-surface); }
.detail-table td:first-child, .detail-table th:first-child { text-align: left; font-weight: 800; font-size: calc(1.05rem * var(--ui-scale)); }
.detail-table td.n { font-weight: 800; font-size: calc(1.05rem * var(--ui-scale)); }
.detail-table td.v { font-weight: 800; }
.detail-table td.per { color: var(--c-text-weak); }
.detail-table tfoot td {
  border-top: 3px solid var(--c-text);
  border-bottom: none;
  font-size: 1.15rem;
  font-weight: 900;
  padding-top: 8px;
}
.summary-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.summary-table th, .summary-table td { border-bottom: 1px solid var(--c-border); padding: 6px 4px; text-align: left; font-size: .95rem; }
/* 日付や納入規格範囲が折り返すと、書き写す明細表が下へ押し出される */
.summary-table td:last-child { white-space: nowrap; }
.summary-table td:last-child, .summary-table th:last-child { text-align: right; }

#count-input {
  width: 100%;
  min-height: 72px;
  font-size: 2.2rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  user-select: text;
}


.ticket { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px; margin-bottom: 8px; }
.ticket .head { display: flex; justify-content: space-between; font-weight: 800; }
.ticket .sub { font-size: .85rem; color: var(--c-text-weak); }

/* ---------------- トースト ---------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(20,33,15,.94);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-lg);
  font-weight: 700;
  z-index: 60;
  max-width: 90vw;
  text-align: center;
  display: none;
}
#toast.is-show { display: block; }

.banner {
  background: var(--c-warn-bg);
  color: var(--c-warn-ink);
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 700;
  display: none;
}
.banner.is-show { display: block; }

/*
 * 操作ボタンの文字も表示サイズ設定に連動させるが、上限を設ける。
 * 「データ出力」が2行に折り返すとボタンが縦に伸び、その分だけ径級ボタンが小さくなる。
 */
#action-bar .btn {
  font-size: clamp(1rem, calc(var(--fs-action) * var(--ui-scale)), 1.45rem);
  white-space: nowrap;
}
#action-bar .btn .main { line-height: 1.15; }

/* 表示サイズの3択（標準／大／特大） */
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1;
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  background: var(--c-neutral);
  color: var(--c-neutral-ink);
  font-weight: 700;
  border: 2px solid transparent;
}
.seg button[aria-pressed='true'] {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border-color: var(--c-brand-dark);
}
.seg button:nth-child(2) { font-size: 1.15rem; }
.seg button:nth-child(3) { font-size: 1.35rem; }

/* ---------------- 便：材（ロット）のタブ ---------------- */
/* 1台に複数の材を積むときだけ出る。横に流れて、選択中の材が常に見える */
#lot-tabs {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
#lot-tabs::-webkit-scrollbar { display: none; }
#lot-tabs[hidden] { display: none; }
.lot-tab, .lot-add {
  flex: 0 0 auto;
  min-height: calc(30px * var(--ui-scale));
  padding: 0 8px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: calc(.85rem * var(--ui-scale));
  font-weight: 800;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lot-tab b {
  font-size: calc(.85rem * var(--ui-scale));
  min-width: 1.6em;
  text-align: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
}
.lot-tab.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.lot-tab.is-active b { background: rgba(255, 255, 255, .22); color: var(--c-brand-ink); }
.lot-add { min-width: calc(44px * var(--ui-scale)); justify-content: center; font-size: calc(1.2rem * var(--ui-scale)); color: var(--c-brand); }
.lot-add:active { background: var(--c-neutral); }

/* 出力確認：材ごとの見出し */
.lot-head { margin: 10px 0 0; font-weight: 900; font-size: calc(1.05rem * var(--ui-scale)); border-left: 5px solid var(--c-brand); padding-left: 8px; }
.lot-head small { font-weight: 600; color: var(--c-text-weak); font-size: .8em; }
#output-detail .detail-table { margin-top: 2px; }
.summary-table th.sum-head { text-align: left; color: var(--c-brand); font-weight: 900; border-bottom-width: 2px; }
#lot-delete[hidden] { display: none; }
#lot-delete { width: 100%; }

/* ---------------- 事務所からのお知らせ・納入枠 ---------------- */
/* 荷下ろしできない知らせは、見落とすと運転手の1日が無駄になる。いちばん目立つ色で出す */
#notice-band {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-weight: 800;
  font-size: calc(.9rem * var(--ui-scale));
  line-height: 1.25;
  background: var(--c-danger);
  color: var(--c-danger-ink);
}
#notice-band[hidden] { display: none; }
#notice-band[data-kind='restricted'] { background: #e65100; color: #fff; }
#notice-band[data-kind='info'] { background: var(--c-accent); color: var(--c-accent-ink); }
#notice-band .nb-kind { flex: 0 0 auto; background: #fff; color: #7a0000; border-radius: 999px; padding: 0 8px; }
#notice-band[data-kind='restricted'] .nb-kind { color: #7a2f00; }
#notice-band[data-kind='info'] .nb-kind { color: #0b3b6b; }
#notice-band .nb-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notice-band .nb-more { flex: 0 0 auto; opacity: .9; font-size: .85em; }

#quota-card { margin-bottom: 14px; padding: 10px 12px; background: var(--c-surface); border: 2px solid var(--c-border); border-radius: var(--r-md); }
#quota-card[hidden] { display: none; }
#quota-card .qc-title { font-size: .8rem; color: var(--c-text-weak); font-weight: 700; }
#quota-card .qc-left { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#quota-card .qc-left.is-over { color: var(--c-danger); }
#quota-card .qc-window { font-weight: 700; }
#quota-card .qc-window.is-open { color: var(--c-primary); }
#quota-card .qc-window.is-shut { color: var(--c-danger); }
#quota-card .qc-stale { font-size: .78rem; color: var(--c-text-weak); }
#quota-card .qc-stale.is-warn { color: var(--c-danger); font-weight: 700; }
#quota-card .qc-item + .qc-item { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border); }
#notice-list .nl-item { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
#notice-list .nl-head { font-weight: 800; }
#notice-list .nl-body { white-space: pre-wrap; }
#notice-list .nl-period { font-size: .8rem; color: var(--c-text-weak); }


/* ---------------- 押した瞬間のフィードバック（0.1秒以内に見た目を変える） ---------------- */
button { touch-action: manipulation; }
button:not(.dia-card) { transition: transform .08s ease-out, filter .08s ease-out; }
/* is-pressed は押した瞬間に feedback.js が付ける（iPhoneの :active は反応が遅いため、クラスでも出す） */
button.is-pressed:not([disabled]):not(.dia-card),
.switch.is-pressed { transform: scale(.96); filter: brightness(.86); }

/* 処理中（通信・保存を待つボタン）：押した直後に回転マークを出し、連続タップを受けない */
.is-busy { opacity: .75; pointer-events: none; }
.is-busy::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  vertical-align: -.15em;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin .7s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* ---------------- 選んで入れるボタン（樹種・規格長さ。入力欄の下に並べる） ---------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-row:empty { display: none; }
.quick-chip {
  min-height: 52px;
  min-width: 56px;
  padding: 8px 14px;
  border: 2px solid var(--c-brand);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-brand-dark);
  font-weight: 800;
  font-size: 1.05rem;
}
.quick-chip[aria-pressed='true'] { background: var(--c-brand); color: var(--c-brand-ink); }
details.more > summary { min-height: 52px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }