/* =========================================================
   components.css — 画面をまたいで出る部品

   立体の作り方は1つに統一する（ニューモーフィズム）。
   ★ただし「押せるもの」を影だけで示さない。地と同じ色＝境界のコントラストが無く、
     WCAG 2.2 SC 1.4.11（3:1）を素では満たせない。主要な操作は塗りつぶす。
   ========================================================= */

/* ── ボタン ───────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--nm-bg);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--nm-up);
  transition: box-shadow 90ms var(--ease), color 90ms var(--ease);
}
.btn + .btn{ margin-top: 12px; }
.btn:active{ box-shadow: var(--nm-in); }
.btn:focus-visible{ outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.btn[disabled]{ opacity: .45; box-shadow: var(--nm-up-sm); }

/* 主要な操作だけは塗りつぶす。ここは影に頼らない */
.btn--accent{
  background: var(--on-accent);
  color: var(--white);
  box-shadow: 5px 5px 11px var(--nm-dark), -5px -5px 11px var(--nm-light);
}
.btn--accent:active{
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, .30), inset -2px -2px 6px rgba(255, 255, 255, .12);
}
.btn--sm{ min-height: var(--tap); padding: 11px 18px; font-size: var(--fs-sm); }

/* ── カード（地と同じ色。浮いて見せる）───────────────── */
.card{
  background: var(--nm-bg);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--nm-up);
}
.card + .card{ margin-top: 20px; }
/* 沈んだ面。情報を「置く」だけで押せないもの */
.card--sunk{ box-shadow: var(--nm-in); background: var(--nm-sunk); }

.sec{ margin-top: 34px; }
.sec:first-child{ margin-top: 14px; }
.sec > h2{
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.5;
  margin-bottom: 16px;
}
.sec > .lead{
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.85;
  margin-top: -10px;
  margin-bottom: 18px;
}

.eyebrow{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent-deep);
  margin-bottom: 6px;
}

/* ── 主役の数字（ポイント）─────────────────────── */
.hero-pt{
  border-radius: var(--r-card);
  padding: 24px 22px 22px;
  background: var(--nm-bg);
  box-shadow: var(--nm-up);
}
.hero-pt .cap{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.hero-pt .big{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.hero-pt .big b{
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.hero-pt .big span{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.hero-pt .sub{
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-2);
}

/* 3つ並びの小さい数字。溝に沈めて置く */
.stat3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.stat3 > div{
  border-radius: 12px;
  padding: 14px 6px;
  text-align: center;
  background: var(--nm-bg);
  box-shadow: var(--nm-in-sm);
}
.stat3 b{
  display: block;
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.stat3 span{ font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ── 週の点（今週どの曜日に上げたか）──────────────── */
.week{ display: flex; gap: 7px; margin-top: 14px; }
.week i{
  flex: 1 1 0;
  height: 42px;
  border-radius: 10px;
  background: var(--nm-bg);
  box-shadow: var(--nm-up-sm);
  display: grid; place-items: center;
  font-size: 12px;
  font-style: normal;
  color: var(--ink-3);
}
/* 上げた日は「沈んで・色が付く」。影だけに頼らない */
.week i.on{
  box-shadow: var(--nm-in-sm);
  color: var(--accent-deep);
  font-weight: 600;
}
.week i.today{ outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* ── 進み具合のバー（溝に埋める）────────────────── */
.bar{
  height: 14px;
  border-radius: var(--r-chip);
  background: var(--nm-sunk);
  box-shadow: var(--nm-in-sm);
  overflow: hidden;
  padding: 3px;
}
.bar > i{
  display: block;
  height: 100%;
  border-radius: var(--r-chip);
  background: var(--accent-deep);
}

/* ── 表（★横スクロールさせない。甲板の中でスワイプが二重になるため）── */
.tbl{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td{
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.tbl th{ font-weight: 600; color: var(--ink-2); font-size: var(--fs-label); letter-spacing: .04em; }
.tbl td.n, .tbl th.n{
  text-align: right;
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl tr:last-child td{ border-bottom: 0; }
.tbl tfoot td{ font-weight: 600; border-top: 2px solid var(--ink); border-bottom: 0; }

/* ── ラベル ───────────────────────────────────── */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--r-chip);
  background: var(--nm-bg);
  box-shadow: var(--nm-in-sm);
  color: var(--ink-2);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.5;
}
.chip--wait{ color: var(--accent-deep); }
.chip--accent{ background: var(--on-accent); color: var(--white); box-shadow: var(--nm-up-sm); }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip{ font-weight: 500; }
.chips .chip.said{ box-shadow: var(--nm-up-sm); color: var(--accent-deep); }

.note{
  font-size: var(--fs-label);
  color: var(--ink-3);
  line-height: 1.9;
  margin-top: 12px;
}

.empty{
  text-align: center;
  padding: 26px 16px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* ── 状態の丸（緑・黄・灰）。色だけで伝えず、必ず文字を添える ── */
.st{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label);
  white-space: nowrap; font-weight: 600; }
.st::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.st.ok{ color: #1F6B3F; } .st.ok::before{ background: #1F6B3F; }
.st.warn{ color: #7A5600; } .st.warn::before{ background: #7A5600; }
.st.off{ color: var(--ink-3); } .st.off::before{ background: var(--ink-3); }