/* おわりじかん — 見た目 */

:root {
  --ground: #E8ECF0;
  --surface: #FFFFFF;
  --surface-sunk: #F1F4F7;
  --ink: #14202B;
  --ink-soft: #5C6975;
  --ink-faint: #8B98A4;
  --line: #D2DAE2;
  --line-soft: #E2E8EE;
  --accent: #1F4E79;
  --on-accent: #FFFFFF;
  --on-tone: #FFFFFF;
  --ok: #0E7256;
  --mid1: #4F7118;
  --warn: #96590C;
  --mid3: #9C4614;
  --late: #9E3A2E;
  --ok-deep: #094C38;
  --mid1-deep: #354A0F;
  --warn-deep: #5E380A;
  --mid3-deep: #672D0D;
  --late-deep: #6E2820;
  --ok-wash: #E2F1EB;
  --mid1-wash: #EAF0DC;
  --warn-wash: #F7EDDD;
  --mid3-wash: #F7E9DF;
  --late-wash: #F7E6E3;
  --bad: #A32B22;
  --bad-wash: #F8E5E3;
  --scrim: rgba(12, 22, 31, .48);
  --shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 8px 24px -12px rgba(20, 32, 43, .18);
  --shadow-lift: 0 -2px 8px rgba(20, 32, 43, .06), 0 -18px 48px -20px rgba(20, 32, 43, .4);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E161E;
    --surface: #18232E;
    --surface-sunk: #131D26;
    --ink: #E8EEF4;
    --ink-soft: #9BA9B7;
    --ink-faint: #6B7B8A;
    --line: #2A3843;
    --line-soft: #212D38;
    --accent: #85B6E8;
    --on-accent: #0E161E;
    --on-tone: #0E161E;
    --ok: #45C39B;
    --mid1: #9CC64F;
    --warn: #E2A550;
    --mid3: #EC8B3C;
    --late: #E67F6E;
    --ok-deep: #2C8168;
    --mid1-deep: #688736;
    --warn-deep: #99702F;
    --mid3-deep: #9E5C26;
    --late-deep: #9C5347;
    --ok-wash: #12312A;
    --mid1-wash: #212B12;
    --warn-wash: #33260F;
    --mid3-wash: #33210F;
    --late-wash: #351F1B;
    --bad: #EE8478;
    --bad-wash: #3A1E1B;
    --scrim: rgba(3, 8, 12, .66);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
    --shadow-lift: 0 -2px 8px rgba(0, 0, 0, .4), 0 -18px 48px -20px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
               "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* zoom は文字だけでなく余白や段組みごと縮めます。
   端末の画面に収まりきらないときに、ここを小さくして一画面に入れます。
   設定シートは .shell の外にあるので、調整中もシート自体の大きさは変わりません。 */
.shell {
  zoom: var(--ui-scale, 1);
  max-width: 460px;
  margin: 0 auto;
  padding: 18px 18px calc(56px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------------------------------------------------------------- 見出し */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.wordmark { font-size: 15px; font-weight: 700; letter-spacing: .18em; margin: 0; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.today {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* アイコンだと何のボタンか解読が要るので、文字で書きます。
   まちがって開かないよう、1秒の長押しでしか反応しません。 */
.gearbtn {
  position: relative;
  overflow: hidden;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  cursor: pointer;
  /* 長押しで「コピー」の吹き出しや文字選択が出ないようにする */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.gearbtn:hover { color: var(--ink); border-color: var(--ink-faint); }
.gearbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 押している間、左から塗りつぶされていきます。あと何秒かが目に見えるように。 */
.gearbtn-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: .24;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.gearbtn.is-holding .gearbtn-fill {
  transform: scaleX(1);
  transition: transform 1s linear;
}

/* 指を離したら、待たずに一気に戻します（transition を付けない） */

.gearbtn.is-holding { color: var(--ink); border-color: var(--accent); }

/* ---------------------------------------------------------------- 状態カード */

.status {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 20px 26px;
  overflow: hidden;
}

.status::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--tone, var(--ink-faint));
}

.status-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.status-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.headline {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--tone);
  text-wrap: balance;
}

/* 閲覧側は受け取るだけの画面なので、ひとまわり大きく */
.view-family .headline { font-size: 62px; }

.headline-sub {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.status-meta {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 表示が入れ替わるとき、少し行き過ぎてから落ち着く */
.fade-swap { animation: swap .42s cubic-bezier(.34, 1.5, .64, 1); }

@keyframes swap {
  0%   { opacity: 0; transform: translateY(12px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* 左の色帯が上から一気に伸びる */
.status.is-updating::before {
  transform-origin: top;
  animation: stripe .5s cubic-bezier(.2, .9, .3, 1);
}

@keyframes stripe {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- 押しボタン */

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.panel-title { font-size: 14px; font-weight: 700; letter-spacing: .06em; margin: 0; }
.panel-note { font-size: 12px; color: var(--ink-faint); }

/* 毎日押す3つ（定時・2残・4残）は左の広い列、めったに押さない2つ（1残・3残）は
   右の狭い列。縦に積まないので、ボタンを大きく保ったまま5つ全部が一画面に入ります。
   左上から右下へ読むと 定時→1残→2残→3残→4残 の時間順にもなります。 */
.choices {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: stretch;
}

/* ベタ塗り＋下の厚み。押すと沈む。 */
.choice {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--tone);
  color: var(--on-tone);
  box-shadow: 0 5px 0 var(--tone-deep);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, opacity .15s;
}

@media (hover: hover) {
  .choice:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tone-deep); }
}

/* :active は :hover より後に置くこと。押下が浮きに負けます。 */
.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tone-deep); }

.choice:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.choice[disabled] { opacity: .5; cursor: default; }
.choice[disabled]:active { transform: none; box-shadow: 0 5px 0 var(--tone-deep); }

/* いま選ばれている1つ */
.choice[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 4px; }

/* 指を置いた場所から広がる波紋 */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--on-tone);
  opacity: .32;
  transform: scale(0);
  pointer-events: none;
  animation: ripple .6s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--on-tone);
  color: var(--tone);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  visibility: hidden;
}

.choice[aria-pressed="true"] .check {
  visibility: visible;
  animation: checkPop .38s cubic-bezier(.34, 1.6, .64, 1);
}

@keyframes checkPop {
  0%   { transform: scale(0) rotate(-40deg); }
  100% { transform: scale(1) rotate(0); }
}

.choice-name { font-size: 27px; font-weight: 800; letter-spacing: .04em; line-height: 1.15; }

.choice-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: .82;
}

.choice-time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 4残だけは横幅いっぱい。右列に相手がいないので、余白を作らず伸ばします。 */
.choice-full { grid-column: 1 / -1; }

/* 右列のボタン。幅が狭いので、名前と時刻を縦に積みます。
   高さは grid の align-items: stretch で左の大きいボタンに揃うので、
   見た目は小さくても指の当たる面積は十分あります。 */
.choice-narrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 0;
  padding: 9px 13px;
  border-radius: 13px;
  box-shadow: 0 4px 0 var(--tone-deep);
}

.choice-narrow:active { box-shadow: 0 1px 0 var(--tone-deep); }

@media (hover: hover) {
  .choice-narrow:hover { box-shadow: 0 6px 0 var(--tone-deep); }
}

.choice-narrow .choice-name { font-size: 19px; font-weight: 800; }
.choice-narrow .choice-time { font-size: 16px; }

/* ---------------------------------------------------------------- 履歴 */

.log {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.log-day {
  padding: 11px 18px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.log-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.log-row:last-child { border-bottom: 0; }

.log-empty { padding: 20px 18px; color: var(--ink-faint); font-size: 14px; text-align: center; }

.log-stamp { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.log-what { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }

.log-what::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tone);
  flex: none;
}

.log-result { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* いちばん新しい記録は、色を差してから引く */
.log-row.is-latest { animation: rowIn .55s ease-out; }

@keyframes rowIn {
  0%   { background: var(--tone-wash); transform: translateX(-7px); }
  100% { background: transparent; transform: none; }
}

.log-row.is-latest .log-result::after {
  content: "いま";
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.log-row.is-void .log-what,
.log-row.is-void .log-result {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
  font-weight: 500;
}

.log-row.is-void .log-what::before { opacity: .4; }

.foot { text-align: center; font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; margin: 0; }

/* ---------------------------------------------------------------- お知らせ帯 */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bad-wash);
  border: 1px solid var(--bad);
  color: var(--bad);
  font-size: 14px;
  font-weight: 600;
}

.banner[hidden] { display: none; }

/* 通知の登録カード（父さんの画面） */

.notify {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notify-title { font-size: 16px; font-weight: 700; margin: 0; }
.notify-desc { font-size: 13px; color: var(--ink-soft); margin: 0; }
.notify[hidden] { display: none; }

/* ---------------------------------------------------------------- 重ねる窓 */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
  display: flex;
  justify-content: center;
  padding: 18px;
  animation: veil .18s ease;
}

.scrim[hidden] { display: none; }
.scrim.at-bottom { align-items: flex-end; padding: 0; }
.scrim.at-center { align-items: center; }

@keyframes veil { from { opacity: 0; } to { opacity: 1; } }

/* 下から丸ごとせり上がる */
@keyframes rise {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* 少し行き過ぎてから収まる */
@keyframes pop {
  0%   { opacity: 0; transform: scale(.84) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lift);
  padding: 22px 20px calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: rise .36s cubic-bezier(.2, 1.05, .3, 1);
}

.sheet-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .1em; }

.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}

.setting-name { font-size: 17px; font-weight: 700; }
.setting-desc { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.switch {
  position: relative;
  flex: none;
  width: 58px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ground);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: transform .18s, background .18s;
}

.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(24px); background: var(--on-accent); }
.switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 時刻の設定 */

.sheet-section { display: flex; flex-direction: column; gap: 10px; }

.sheet-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.sheet-section-title { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.sheet-section-note { font-size: 12px; color: var(--ink-faint); }

.time-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunk);
}

.time-chip {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tone);
  color: var(--on-tone);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
}

.time-home { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.field {
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}

.field:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.field-num { width: 84px; text-align: right; }

/* 画面の大きさ */

.scale-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunk);
}

.stepbtn {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.stepbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepbtn:active:not(:disabled) { transform: translateY(2px); }
.stepbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stepbtn:disabled { opacity: .3; cursor: default; }

.scale-value {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.scale-value small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .06em;
}

/* 確認の窓 */

.confirm {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 20px;
  border-top: 7px solid var(--tone);
  box-shadow: var(--shadow);
  padding: 26px 22px 20px;
  text-align: center;
  animation: pop .34s cubic-bezier(.34, 1.56, .64, 1);
}

.confirm-q { font-size: 15px; color: var(--ink-soft); margin: 0 0 6px; }
.confirm-what { font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--tone); }

.confirm-when {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.confirm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

.btn {
  min-height: 54px;
  padding: 12px 18px;
  border-radius: 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--tone);
  color: var(--on-tone);
  box-shadow: 0 4px 0 var(--tone-deep);
}

.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tone-deep); }

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
  min-height: 46px;
  font-size: 15px;
}

.btn-wide { width: 100%; }

/* 知らせの吹き出し */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100% - 36px);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: toastIn .44s cubic-bezier(.34, 1.5, .64, 1);
}

/* toast は translateX(-50%) で中央寄せしているので、キーフレームにも必ず含めること */
@keyframes toastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.88); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-7px) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.toast[hidden] { display: none; }

.hidden { display: none; }

.tone-ok   { --tone: var(--ok);   --tone-wash: var(--ok-wash);   --tone-deep: var(--ok-deep); }
.tone-mid1 { --tone: var(--mid1); --tone-wash: var(--mid1-wash); --tone-deep: var(--mid1-deep); }
.tone-warn { --tone: var(--warn); --tone-wash: var(--warn-wash); --tone-deep: var(--warn-deep); }
.tone-mid3 { --tone: var(--mid3); --tone-wash: var(--mid3-wash); --tone-deep: var(--mid3-deep); }
.tone-late { --tone: var(--late); --tone-wash: var(--late-wash); --tone-deep: var(--late-deep); }
.tone-none { --tone: var(--ink-faint); --tone-wash: var(--surface-sunk); --tone-deep: var(--line); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }

  /* 設定ボタンの帯だけは残します。飾りではなく「あと何秒か」を示す情報なので、
     ここを止めると一瞬で満タンに見えて、押せたと勘違いさせてしまいます。 */
  .gearbtn.is-holding .gearbtn-fill { transition: transform 1s linear !important; }
}