/* コマドリ — 今日のプラン（子ども画面） */

/* 色は DESIGN.md 第3章の値がすべて。ページ全体で使えるよう :root に置く。 */
:root{
  --paper:#F4F6F6; --card:#FFFFFF; --card2:#FAFBFB;
  --ink:#16232E; --mid:#5E7180; --soft:#93A4B0; --line:#E1E7E9;
  --ai:#2C6E9B; --ai-bg:#E7F0F6;
  --sui:#0E9E8C; --sui-bg:#E1F4F1;
  --kohaku:#B5811A; --kohaku-bg:#F7EFDD;
  --shu:#C13B30;
}
/* 画面全体を1色にする。テーマの body 背景に勝つため詳細度を上げる。 */
body.nhc{background:var(--paper)}

/*
 * .nh-app は背景・角丸・枠を持たない（板として浮かせない）。
 * 画面全体が var(--paper) の1色になるのが正解。
 */
.nh-app{
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink); line-height:1.7;
  max-width:470px; margin:0 auto; padding:0 20px 60px;
  -webkit-font-smoothing:antialiased;
}
.nh-app.dark{
  --paper:#101A22; --card:#18242E; --card2:#1D2B36; --ink:#E8EFF2; --mid:#93A8B5;
  --soft:#6A7F8C; --line:#2A3A46; --ai:#5FA9DC; --ai-bg:#1B2E3B; --sui:#3ECFB6;
  --sui-bg:#12302C; --kohaku:#E0AC46; --kohaku-bg:#332811; --shu:#E1594B;
}
.nh-app *{box-sizing:border-box; margin:0; padding:0}
.nh-app .num{font-variant-numeric:tabular-nums}
.nh-loading,.nh-guard{padding:40px 0; text-align:center; color:var(--mid); font-size:0.875rem}

/* ---- checkin gate ---- */
.nh-gate{padding:56px 20px; text-align:center}
.nh-gate .sun{width:64px;height:64px;border-radius:50%;border:2px solid var(--kohaku);
  color:var(--kohaku);display:grid;place-items:center;font-size:1.5rem;margin:0 auto 24px}
.nh-gate h2{font-size:1.375rem;font-weight:900;line-height:1.5}
.nh-gate p{font-size:0.875rem;color:var(--mid);margin-top:12px}
.nh-gate button{margin-top:32px;background:var(--ink);color:var(--paper);border:none;
  border-radius:12px;padding:20px 40px;font-size:1rem;font-weight:700;cursor:pointer;
  font-family:inherit}

/* ---- header ---- */
.nh-hd{padding:32px 4px 20px}
.nh-hd .meta{display:flex;gap:16px;font-size:0.71875rem;color:var(--soft);letter-spacing:.04em}
.nh-hd .meta b{color:var(--ai);font-weight:700}
.nh-hd h2{font-size:1.1875rem;font-weight:700;line-height:1.55;margin-top:12px}
.nh-hd p{font-size:0.84375rem;color:var(--mid);margin-top:8px}
.nh-hd p b{color:var(--ink);font-weight:700}

/* ---- 秘書からのお知らせ（停滞アラート：穏やかに。警告色は使わない） ---- */
.nh-notice{margin-top:16px;background:var(--ai-bg);border:1px solid var(--line);
  border-left:3px solid var(--ai);border-radius:12px;padding:16px 16px}
.nh-notice .hd{font-size:0.6875rem;letter-spacing:.1em;color:var(--ai);font-weight:700;margin-bottom:8px}
.nh-notice p{font-size:0.875rem;font-weight:700;line-height:1.6}
.nh-notice p.sub{font-size:0.78125rem;font-weight:400;color:var(--mid);margin-top:8px}

/* ---- 秘書からの提案（3日目：習慣／7日目：挑戦）。圧をかけない ---- */
.nh-ask{margin-top:32px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px;animation:nh-appear .4s ease both}
.nh-ask .lb{font-size:0.6875rem;letter-spacing:.09em;color:var(--soft);font-weight:700}
.nh-ask .say{font-size:1rem;font-weight:700;line-height:1.6;margin-top:8px}
.nh-ask .sub{font-size:0.78125rem;color:var(--mid);margin-top:8px}
.nh-ask-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:12px}
.nh-ask-pick{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 12px;
  text-align:left;cursor:pointer;color:var(--soft);font-family:inherit}
.nh-ask-pick b{display:block;font-size:0.875rem;font-weight:500}
.nh-ask-pick span{display:block;font-size:0.6875rem;letter-spacing:.09em;margin-top:4px}
/* 選択は2pxの線で。習慣は翠、挑戦は琥珀（原則3） */
.nh-ask-pick.s.on{border-width:2px;border-color:var(--sui);background:var(--sui-bg);color:var(--sui)}
.nh-ask-pick.c.on{border-width:2px;border-color:var(--kohaku);background:var(--kohaku-bg);color:var(--kohaku)}
.nh-ask-pick.s.on b,.nh-ask-pick.c.on b{font-weight:900}
.nh-ask-pick:disabled{opacity:.4;cursor:default}
.nh-ask-acts{display:flex;gap:8px;margin-top:16px}
.nh-ask-acts .nh-btn{flex:1;padding:16px}
.nh-ask-acts .nh-btn:disabled{background:var(--card2);color:var(--soft);border:1px solid var(--line);cursor:default}

/* ---- three lanes ---- */
.nh-lanes{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 20px}
.nh-lane{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.nh-lane:last-child{border:none}
.nh-lane .nm{width:36px;flex:none;font-size:0.78125rem;font-weight:700}
.nh-lane .viz{flex:1;min-width:0}
.nh-lane .vl{flex:none;font-size:0.78125rem;color:var(--mid);min-width:60px;text-align:right}
.nh-lane .vl b{color:var(--ink);font-weight:700}
.nh-bar{height:7px;border-radius:12px;background:var(--card2);display:flex;gap:4px;overflow:hidden}
.nh-bar i{background:var(--ai);transition:flex-grow .6s cubic-bezier(.2,.8,.25,1)}
.nh-bar i.gone{background:var(--ai-bg)}
.nh-dots{display:flex;gap:8px}
.nh-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line)}
.nh-dots i.hit{background:var(--sui);border-color:var(--sui)}
.nh-ringmini{display:flex;align-items:center;gap:12px;font-size:0.78125rem;color:var(--mid)}
.nh-ringmini svg{transform:rotate(-90deg)}

/* ---- sections ---- */
.nh-sec{margin-top:32px}
.nh-sec-h{display:flex;align-items:baseline;gap:12px;padding:0 4px;margin-bottom:12px}
.nh-sec-h h3{font-size:0.875rem;font-weight:700;letter-spacing:.05em}
.nh-sec-h .ct{margin-left:auto;font-size:0.71875rem;color:var(--soft)}
.nh-rule{height:1px;background:var(--line);margin-bottom:16px}
.nh-rule.k{background:linear-gradient(90deg,var(--ai) 0 32px,var(--line) 32px)}
.nh-rule.s{background:linear-gradient(90deg,var(--sui) 0 32px,var(--line) 32px)}
.nh-rule.c{background:linear-gradient(90deg,var(--kohaku) 0 32px,var(--line) 32px)}

/* ---- kadai card ---- */
.nh-k{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 16px;margin-bottom:12px;position:relative}
.nh-k .top{display:flex;gap:12px;align-items:flex-start}
.nh-k h4{font-size:1.03125rem;font-weight:700;line-height:1.45}
.nh-k .sub{font-size:0.78125rem;color:var(--mid);margin-top:4px}
.nh-k .est{margin-left:auto;flex:none;font-size:0.71875rem;color:var(--ai);background:var(--ai-bg);
  border-radius:12px;padding:4px 12px;font-weight:700}
.nh-acts{display:flex;gap:8px;margin-top:16px}
.nh-btn{font-family:inherit;font-weight:700;font-size:0.9375rem;border:none;border-radius:12px;
  padding:16px 20px;cursor:pointer;background:var(--ink);color:var(--paper);flex:1}
.nh-btn:active{transform:scale(.98)}
.nh-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mid);
  flex:0 0 auto;font-weight:400;font-size:0.8125rem;padding:16px 16px}
.nh-btn.sui{background:var(--sui);color:var(--card)}

/* 完了：カードは沈み、判子だけが残る（小中学生共通、tier で表現を変える） */
.nh-k.done{background:var(--card2);border-color:var(--line)}
.nh-k.done .top{opacity:.42;filter:grayscale(1)}
.nh-k.done h4{text-decoration:line-through;text-decoration-thickness:1.5px}
.nh-stamp{position:absolute;right:16px;top:50%;width:60px;height:60px;border-radius:50%;
  border:2.5px solid var(--shu);color:var(--shu);display:grid;place-items:center;
  font-size:0.875rem;font-weight:900;transform:translateY(-50%) rotate(-12deg)}
.nh-k.just .nh-stamp{animation:nh-press .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes nh-press{0%{transform:translateY(-50%) rotate(-12deg) scale(2.5);opacity:0}
  55%{transform:translateY(-50%) rotate(-12deg) scale(.9);opacity:1}
  100%{transform:translateY(-50%) rotate(-12deg) scale(1);opacity:1}}
.nh-log{font-size:0.71875rem;color:var(--ai);margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between}

/* 完了の記録が現れるときだけ、静かにフェードイン（第10章：出現は .4s ease） */
.nh-k.just .nh-log{animation:nh-appear .4s ease both}

/* ---- habits ---- */
.nh-h{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 16px;margin-bottom:8px}
.nh-h .t{flex:1;min-width:0}
.nh-h h4{font-size:0.96875rem;font-weight:700}
.nh-h .st{font-size:0.71875rem;color:var(--mid);margin-top:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 時間のはかり方を、押す前に分かるように添える */
.nh-h .st .tm{font-style:normal;font-size:0.6875rem;color:var(--sui);font-weight:700}
/* 時間になったら、時計の色だけが静かに変わる（点滅はしない） */
.nh-clock.done{color:var(--sui)}
.nh-tick{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--soft);
  font-size:1.0625rem;transition:.25s;font-family:inherit}
.nh-tick.on{background:var(--sui);border-color:var(--sui);color:var(--card);
  animation:nh-pop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes nh-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---- chosen ---- */
.nh-c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px;
  margin-bottom:12px;position:relative;overflow:hidden}
.nh-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kohaku)}
.nh-c .head{display:flex;gap:16px;align-items:flex-start}
.nh-c h4{font-size:1.125rem;font-weight:900;line-height:1.45;letter-spacing:.01em}
.nh-c .kind{font-size:0.65625rem;letter-spacing:.09em;color:var(--kohaku);font-weight:700;display:block;margin-bottom:4px}
.nh-ring{flex:none;position:relative;width:56px;height:56px}
.nh-ring svg{transform:rotate(-90deg)}
.nh-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:0.8125rem;font-weight:700}
.nh-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.nh-next .lb{font-size:0.65625rem;letter-spacing:.09em;color:var(--soft);font-weight:700}
.nh-next .stp{font-size:1rem;margin-top:8px;font-weight:700}
.nh-next button{margin-top:12px;width:100%;background:transparent;border:1px solid var(--kohaku);
  color:var(--kohaku);border-radius:12px;padding:12px;font-size:0.875rem;cursor:pointer;
  font-family:inherit;font-weight:700}

/* ---- 全部やりきった（静かで確かな達成。光る枠・波紋は使わない） ---- */
.nh-alldone{background:var(--sui-bg);border:1px solid var(--sui);
  border-radius:16px;padding:24px 20px;text-align:center;margin-top:32px}
.nh-alldone h3{font-size:1.25rem;font-weight:900;color:var(--sui)}
.nh-alldone p{font-size:0.78125rem;color:var(--mid);margin-top:8px}
.nh-alldone.go{animation:nh-appear .4s ease both}
@keyframes nh-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* やりきったときは、締めるボタンもこの中に置く（次にすることを1か所に集める） */
.nh-alldone .nh-close.inside{width:100%;margin-top:20px;background:var(--sui);color:var(--card);
  border:none;border-radius:12px;padding:20px;font-size:1rem;font-weight:700;
  cursor:pointer;font-family:inherit}
.nh-alldone .nh-close.inside:active{transform:scale(.99)}
.nh-tmr{margin-top:16px;padding-top:16px;border-top:1px solid var(--sui);text-align:left}
.nh-tmr .lb{font-size:0.6875rem;letter-spacing:.09em;color:var(--soft);font-weight:700}
.nh-tmr p{font-size:0.875rem;font-weight:700;color:var(--ink);margin-top:4px}

/* ---- clear / close ---- */
.nh-clear{background:var(--sui-bg);border:1px solid var(--sui);border-radius:16px;padding:24px 20px;
  text-align:center;margin-bottom:12px}
.nh-clear h4{font-size:1.25rem;font-weight:900;color:var(--sui)}
.nh-clear p{font-size:0.84375rem;color:var(--mid);margin-top:8px}
.nh-close{width:100%;margin-top:32px;background:transparent;border:1px dashed var(--line);
  color:var(--mid);border-radius:12px;padding:16px;font-size:0.875rem;cursor:pointer;font-family:inherit}
.nh-closed{margin-top:32px;text-align:center;font-size:0.8125rem;color:var(--soft)}

/*
 * 1日の締め。画面全体を静かに沈める覆い（原則1で認められた唯一の例外）。
 * 電気が消えるように、ゆっくり暗くなる。派手な演出はしない。
 */
.nh-fin{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;
  padding:20px;background:rgba(12,20,28,.72);
  animation:nh-fin-dim 1.6s cubic-bezier(.2,.8,.25,1) both}
@keyframes nh-fin-dim{from{background:rgba(12,20,28,0)}to{background:rgba(12,20,28,.72)}}
.nh-fin-in{width:100%;max-width:400px;text-align:center;
  animation:nh-appear .4s ease .6s both}
.nh-fin .ttl{font-size:1.5rem;font-weight:900;color:var(--paper);line-height:1.5}
.nh-fin .sub{font-size:0.875rem;color:var(--paper);opacity:.72;margin-top:8px}
.nh-fin-stats{display:flex;gap:12px;margin-top:32px}
.nh-fin-stats .s{flex:1;border:1px solid rgba(244,246,246,.24);border-radius:16px;padding:16px 12px}
.nh-fin-stats .s span{display:block;font-size:0.6875rem;letter-spacing:.09em;color:var(--paper);opacity:.6}
.nh-fin-stats .s b{display:block;font-size:0.9375rem;font-weight:700;color:var(--paper);margin-top:4px}
.nh-fin-stats .s b .n{font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums;padding-right:.06em}
.nh-fin-tmr{margin-top:24px}
.nh-fin-tmr .nh-tmr{border-top:1px solid rgba(244,246,246,.24);text-align:center}
.nh-fin-tmr .nh-tmr .lb{color:var(--paper);opacity:.6}
.nh-fin-tmr .nh-tmr p{color:var(--paper)}
.nh-fin-x{margin-top:32px;background:transparent;border:1px solid rgba(244,246,246,.4);
  color:var(--paper);border-radius:12px;padding:16px 40px;font-size:0.875rem;
  cursor:pointer;font-family:inherit}
@media(prefers-reduced-motion:reduce){
  .nh-fin,.nh-fin-in{animation:none}
}

/* ---- agreement ---- */
.nh-agree{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 20px;
  text-align:center;margin-top:20px}
.nh-agree h3{font-size:1.0625rem;font-weight:900}
.nh-agree p{font-size:0.8125rem;color:var(--mid);margin-top:12px;line-height:1.75}
.nh-agree button{margin-top:20px;background:var(--ink);color:var(--paper);border:none;
  border-radius:12px;padding:16px 32px;font-size:0.9375rem;font-weight:700;cursor:pointer;font-family:inherit}
.nh-agwait{margin-top:16px}
/*
 * 合意の印。保護者の画面と同じ「枠のある札」に揃える。
 * 書類に押印する所作に近づけるため、ただのボタンにしない。
 */
.nh-agsign{margin-top:20px}
.nh-agsign-row{display:flex;gap:12px}
.nh-agsign .nh-sign{flex:1;background:var(--card);border:2px solid var(--line);border-radius:12px;
  padding:20px 8px;font-size:0.875rem;font-weight:700;font-family:inherit;color:var(--ink);
  cursor:pointer;line-height:1.5;text-align:center}
/* 済んだ方は翠で満たす。まだの方は枠だけで待つ */
.nh-agsign .nh-sign.done{border-color:var(--sui);background:var(--sui-bg);color:var(--sui);cursor:default}
.nh-agsign button.nh-sign:active{transform:scale(.99)}
.nh-agsign-note{font-size:0.78125rem;color:var(--mid);margin-top:12px;line-height:1.75;text-align:center}
/* 終了目安 */
.nh-agfc{margin-top:20px;background:var(--sui-bg);border:1px solid var(--sui);border-radius:12px;padding:16px 16px}
.nh-agfc b{display:block;font-size:1rem;font-weight:900;color:var(--sui);line-height:1.5}
.nh-agfc span{display:block;font-size:0.78125rem;color:var(--mid);margin-top:8px}
.nh-agfc.bad{background:transparent;border-color:var(--shu)}
.nh-agfc.bad b{color:var(--shu)}
/* 計画の一覧 */
.nh-aglist{margin-top:20px;text-align:left}
/*
 * 原則3：3層は必ず色で区別する。見出しの色＋行の縦線＋数値の色で見分けられるようにする。
 * 太さは第2章（課題=与えられたもの700 / 習慣・挑戦=自分で決めたもの900）。
 */
.nh-agsec{margin-top:16px}
.nh-agsec h4{font-size:0.75rem;font-weight:700;letter-spacing:.06em;padding-left:12px;border-left:3px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
/* 何コマ預かるか。層の色は h4 から受け継ぐ */
.nh-agsec h4 span{font-size:0.6875rem;font-weight:700;letter-spacing:.06em;opacity:.85}
.nh-agsec.k h4{border-color:var(--ai);color:var(--ai)}
.nh-agsec.s h4{border-color:var(--sui);color:var(--sui)}
.nh-agsec.c h4{border-color:var(--kohaku);color:var(--kohaku)}
.nh-agsec .nh-agrow{border-left:3px solid var(--line);padding-left:12px}
.nh-agsec.k .nh-agrow{border-left-color:var(--ai-bg)}
.nh-agsec.s .nh-agrow{border-left-color:var(--sui-bg)}
.nh-agsec.c .nh-agrow{border-left-color:var(--kohaku-bg)}
.nh-agsec.k .nh-agrow .vl{color:var(--ai)}
.nh-agsec.s .nh-agrow .vl{color:var(--sui)}
.nh-agsec.c .nh-agrow .vl{color:var(--kohaku)}
.nh-agsec.s .nh-agrow .nm,.nh-agsec.c .nh-agrow .nm{font-weight:900}
.nh-agrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 4px 12px 12px;border-bottom:1px solid var(--line)}
.nh-agrow:last-child{border-bottom:none}
.nh-agrow .nm{font-size:0.9375rem;font-weight:700}
.nh-agrow .vl{font-size:0.9375rem;font-weight:800;color:var(--ink);flex:none;text-align:right}
.nh-agrow .vl em{display:block;font-style:normal;font-size:0.6875rem;font-weight:600;color:var(--soft);margin-top:4px}

/* ---- 親の見守り（数字を主役に） ---- */
.nh-watch{max-width:600px}
.nh-watch-h{font-size:1.5rem;font-weight:900;padding:24px 4px 4px}
.nh-watch-sub{font-size:0.8125rem;color:var(--mid);padding:4px 4px 8px}
.nh-wc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:16px}
.nh-wc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.nh-wc-h .nm b{font-size:1.1875rem;font-weight:800}
.nh-wc-h .grade{font-size:0.75rem;color:var(--soft);margin-left:12px}
.nh-wc-edit{font-size:0.78125rem;color:var(--ai);text-decoration:none;white-space:nowrap}
.nh-wc-stats{display:flex;gap:4px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.nh-wc-stats .s{flex:1;background:var(--card);padding:16px 12px;text-align:center}
.nh-wc-stats .s span{display:block;font-size:0.6875rem;color:var(--mid);margin-bottom:8px}
.nh-wc-stats .s b{font-size:1.6875rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.01em}
.nh-wc-stats .s b i{font-size:0.9375rem;font-style:normal;font-weight:700;color:var(--mid);margin-left:4px}
.nh-wc-stats .s b.muted{color:var(--soft);font-size:1.125rem;font-weight:700}
.nh-wc-stats .s b.warn{color:var(--shu);font-size:1.25rem}
.nh-wc-alert{margin-top:16px;background:var(--kohaku-bg);border-left:3px solid var(--kohaku);border-radius:12px;padding:16px 16px}
.nh-wc-alert b{font-size:0.71875rem;letter-spacing:.06em;color:var(--kohaku);font-weight:700}
.nh-wc-alert p{font-size:0.90625rem;font-weight:700;margin-top:4px}
.nh-wc-alert span{display:block;font-size:0.75rem;color:var(--mid);margin-top:8px;line-height:1.7}
.nh-wc-ok{margin-top:16px;font-size:0.78125rem;color:var(--sui);font-weight:600}
.nh-wc-pending{background:var(--card2);border-radius:12px;padding:16px 16px}
.nh-wc-pending b{font-size:0.9375rem;color:var(--shu)}
.nh-wc-pending span{display:block;font-size:0.78125rem;color:var(--mid);margin-top:8px;line-height:1.7}
.nh-watch-note{margin-top:20px;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:16px 16px;font-size:0.71875rem;color:var(--mid);line-height:1.8}

/* ---- くわしく設定の案内（§5）。急かさず、静かに置く ---- */
.nh-up{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ai);
  border-radius:16px;padding:20px;margin:0 auto 16px;max-width:900px}
.nh-up-lb{font-size:0.6875rem;letter-spacing:.09em;color:var(--ai);font-weight:700}
/* 畳んだ状態の見出し。開くまでは1行しか場所を取らない */
.nh-up-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none}
.nh-up-sum::-webkit-details-marker{display:none}
.nh-up-more{font-size:0.71875rem;color:var(--soft);text-decoration:underline;flex:none}
.nh-up[open] .nh-up-more::after{content:"（とじる）"}
.nh-up[open] .nh-up-more{font-size:0}
.nh-up[open] .nh-up-more::after{font-size:0.71875rem}
.nh-up-say{font-size:1rem;font-weight:700;line-height:1.6;margin-top:8px}
/* 点は ::before で自前に描く。テーマの標準マーカーを消さないと二重になる */
.nh-up-list{margin-top:12px;list-style:none;padding-left:0}
.nh-up-list li{font-size:0.8125rem;color:var(--ink);line-height:1.9;padding-left:16px;position:relative}
.nh-up-list li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--ai)}
.nh-up-note{font-size:0.78125rem;color:var(--mid);margin-top:12px;line-height:1.8;
  border-top:1px solid var(--line);padding-top:12px}
.nh-up-wrap{margin-top:16px}
.nh-up-wrap .nh-up{text-align:left}

/* ---- front login ---- */
.nh-login{min-height:58vh;display:grid;place-items:center;padding:32px 4px}
.nh-login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:40px 32px;width:100%;max-width:380px;text-align:center}
.nh-login-sun{width:60px;height:60px;border-radius:50%;border:2px solid var(--kohaku);color:var(--kohaku);
  display:grid;place-items:center;font-size:1.5rem;margin:0 auto 20px}
/* うまくいかなかったときの丸。朱で示す */
.nh-login-sun.nh-ng{border-color:var(--shu);color:var(--shu)}
/* ロゴ。ホーム画面のアイコンと同じ絵を、同じ角丸で出す */
.nh-login-logo{display:block;width:64px;height:64px;border-radius:16px;margin:0 auto 20px}
/* 送信先のメールアドレス。打ち間違いにその場で気づけるように */
.nh-reg-to{font-size:0.9375rem;font-weight:700;color:var(--ink);margin-top:8px;word-break:break-all}
/* 登録の3段階。いまどこにいるかを示す */
.nh-reg-steps{display:flex;align-items:center;justify-content:center;gap:8px;
  list-style:none;margin:0 0 24px;padding:0}
.nh-reg-steps li{display:flex;align-items:center;gap:8px;font-size:0.71875rem;color:var(--soft)}
.nh-reg-steps li::before{content:"";width:8px;height:8px;border-radius:50%;
  border:1px solid var(--line);background:var(--card2)}
.nh-reg-steps li+li{padding-left:8px;border-left:1px solid var(--line)}
.nh-reg-steps li.now{color:var(--ai);font-weight:700}
.nh-reg-steps li.now::before{background:var(--ai);border-color:var(--ai)}
.nh-reg-steps li.done{color:var(--mid)}
.nh-reg-steps li.done::before{background:var(--mid);border-color:var(--mid)}
.nh-login-card h2{font-size:1.375rem;font-weight:900;letter-spacing:.01em}
.nh-login-card p{font-size:0.8125rem;color:var(--mid);margin-top:12px;line-height:1.75}
.nh-login-card form{margin-top:20px;text-align:left}
.nh-login-card label{font-size:0.75rem;color:var(--mid)}
.nh-login-card input.input,.nh-login-card input[type=text],.nh-login-card input[type=password]{
  width:100%;padding:12px;font-size:0.9375rem;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);color:var(--ink);margin:8px 0 12px;font-family:inherit}
.nh-login-card .login-remember{font-size:0.75rem;color:var(--mid);display:flex;align-items:center;gap:8px}
.nh-login-card .login-remember input{width:auto;margin:0}
.nh-login-card #wp-submit{width:100%;margin-top:16px;background:var(--ink);color:var(--paper);border:none;
  border-radius:12px;padding:16px;font-size:0.9375rem;font-weight:700;cursor:pointer;font-family:inherit}
.nh-login-go{display:inline-block;margin-top:16px;background:var(--ink);color:var(--paper);
  border-radius:12px;padding:16px 32px;font-size:0.9375rem;font-weight:700;text-decoration:none}
.nh-login-out{display:block;margin-top:16px;font-size:0.78125rem;color:var(--soft);text-decoration:underline}
/* 保護者登録フォーム */
.nh-reg-form{margin-top:20px;text-align:left;display:flex;flex-direction:column;gap:12px}
.nh-reg-form label{font-size:0.75rem;color:var(--mid);display:flex;flex-direction:column;gap:8px}
.nh-reg-form input{padding:12px;font-size:0.9375rem;border:1px solid var(--line);border-radius:12px;
  background:var(--card2);color:var(--ink);font-family:inherit}
.nh-reg-form #wp-submit{margin-top:4px;background:var(--ink);color:var(--paper);border:none;border-radius:12px;
  padding:16px;font-size:0.9375rem;font-weight:700;cursor:pointer;font-family:inherit}
/* 保護者画面のエラー。塗りではなく線で示す（原則1）。赤は保護者画面のみ許容（第3章）。 */
.nh-reg-msg{background:var(--card);border:1px solid var(--shu);color:var(--shu);border-radius:12px;
  padding:12px 12px;font-size:0.78125rem}
.nh-reg-alt{margin-top:16px;font-size:0.78125rem;color:var(--mid)}
.nh-reg-alt a{color:var(--ai)}

/* ---- front setup ---- */
.nh-setup{max-width:900px;margin:0 auto;padding:8px 16px 60px}
.nh-setup-bar{padding:12px 4px}
.nh-setup-bar a{font-size:0.8125rem;color:var(--mid);text-decoration:none}
.nh-setup-card{max-width:420px}
.nh-setup-list{margin:8px 0 4px;text-align:left}
.nh-setup-item{display:flex;flex-direction:column;gap:4px;padding:16px 16px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:8px;text-decoration:none;color:var(--ink);background:var(--card2)}
.nh-setup-item b{font-size:0.9375rem}
.nh-setup-item span{font-size:0.71875rem;color:var(--mid)}
.nh-setup-empty{font-size:0.8125rem;color:var(--mid);padding:12px 0}
.nh-setup-row{margin-bottom:16px}
.nh-setup-row .nh-setup-item{margin-bottom:0}
/*
 * 消す操作は小さく、離して置く。
 * 開くボタンと同じ大きさで並べると、押し間違いで消える。
 */
.nh-setup-ops{display:flex;gap:20px;padding:8px 16px 0}
.nh-setup-ops a{font-size:0.71875rem;color:var(--soft);text-decoration:underline}
.nh-setup-ops a:hover{color:var(--mid)}
.nh-setup-ops a.del:hover{color:var(--shu)}
.nh-op-done{font-size:0.78125rem;color:var(--sui);font-weight:700;margin-top:8px}

/*
 * 節目の画面（合意した／1日を終えた）。
 * 覆いはシートと同じ扱い。DESIGN.md 第10章で許されている「.4s ease で出現」だけを使う。
 * 光る枠・紙吹雪・点滅・羽ばたきは入れない。
 */
.nh-moment{position:fixed;inset:0;background:rgba(12,20,28,.58);z-index:9998;
  display:grid;place-items:center;padding:20px}
.nh-moment-card{background:var(--card);border-radius:16px;padding:40px 32px;
  width:100%;max-width:340px;text-align:center;animation:nh-moment-in .4s ease both}
/*
 * コマドリの羽ばたき（DESIGN.md 第10章の4つ目）。
 * 一度だけ。傾きは4度まで、上下は6pxまで。跳ねない・回らない・繰り返さない。
 * 出してよいのは「合意したとき」と「1日を終えたとき」だけ。
 */
.nh-moment-bird{display:block;width:72px;height:72px;border-radius:16px;margin:0 auto 20px;
  animation:nh-flap .9s ease-in-out 1 both}
@keyframes nh-flap{
  0%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-6px) rotate(-4deg)}
  50%{transform:translateY(0) rotate(0deg)}
  75%{transform:translateY(-3px) rotate(3deg)}
  100%{transform:translateY(0) rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.nh-moment-bird{animation:none}}
.nh-moment-card h3{font-size:1.25rem;font-weight:900;line-height:1.5}
.nh-moment-card p{font-size:0.8125rem;color:var(--mid);margin-top:12px;line-height:1.8}
@keyframes nh-moment-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nh-moment-card{animation:none}}

/*
 * 「やめる」「一覧へ戻る」などの控えめなリンク。
 * easy.css の .nh-ez-back に頼っていたが、この画面では easy.css を読まないため
 * 装飾が当たらず、上のボタンと横に並んで重なっていた。ここに自前で持つ。
 */
.nh-back-link{display:block;width:100%;margin-top:16px;text-align:center;
  font-size:0.8125rem;font-weight:700;color:var(--mid);text-decoration:underline}
.nh-back-link:hover{color:var(--ink)}
/* この2つの画面では、主ボタンも横幅いっぱいの塊にする */
.nh-hand-card .nh-login-go,.nh-op-card .nh-login-go{display:block;width:100%;text-align:center}

/* お子さんの端末へ渡す画面 */
.nh-hand-card{max-width:420px;text-align:left}
.nh-hand-card h2{font-size:1.25rem;font-weight:900;line-height:1.5}
.nh-hand-card>p{font-size:0.8125rem;color:var(--mid);margin-top:8px;line-height:1.75}
/* QRは白地のまま出す。枠や角丸で欠けさせない */
.nh-hand-qr{display:block;margin:20px auto 0;width:240px;height:240px;
  max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px}
.nh-hand-url{font-size:0.71875rem;color:var(--soft);text-align:center;margin-top:8px;word-break:break-all}
.nh-hand-steps{list-style:none;padding-left:0;margin-top:20px}
.nh-hand-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line)}
.nh-hand-steps li:last-child{border-bottom:none}
.nh-hand-steps i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ai);
  color:var(--paper);font-style:normal;font-size:0.75rem;font-weight:700;
  display:grid;place-items:center;margin-top:2px}
.nh-hand-steps span{font-size:0.8125rem;line-height:1.7}
.nh-setup-ops a.go{color:var(--ai);font-weight:700}

/* 消す前の確認 */
.nh-op-card{max-width:420px;text-align:left}
.nh-op-card h2{font-size:1.25rem;font-weight:900;line-height:1.5}
.nh-op-card>p{font-size:0.8125rem;color:var(--mid);margin-top:8px;line-height:1.75}
.nh-op-what{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:4px 16px}
.nh-op-what>div{padding:12px 0;border-bottom:1px solid var(--line)}
.nh-op-what>div:last-child{border-bottom:none}
.nh-op-what b{display:block;font-size:0.6875rem;letter-spacing:.09em;font-weight:700}
.nh-op-what span{display:block;font-size:0.8125rem;color:var(--ink);margin-top:4px;line-height:1.7}
.nh-op-what .go b{color:var(--shu)}
.nh-op-what .stay b{color:var(--sui)}
.nh-op-warn{font-size:0.78125rem;color:var(--shu);font-weight:700;margin-top:16px;text-align:center}
.nh-op-go{display:block;width:100%;margin-top:12px;background:var(--shu);color:var(--paper);
  border:none;border-radius:12px;padding:20px;font-size:1rem;font-weight:700;
  font-family:inherit;cursor:pointer}

/* ---- timer ---- */
.nh-veil{position:fixed;inset:0;background:rgba(12,20,28,.58);display:none;align-items:flex-end;
  justify-content:center;z-index:9999}
.nh-veil.on{display:flex}
.nh-sheet{background:var(--card);width:100%;max-width:470px;border-radius:16px 16px 0 0;
  border-top:1px solid var(--line);
  padding:32px 24px calc(32px + env(safe-area-inset-bottom));text-align:center;color:var(--ink)}
@media(min-width:520px){.nh-veil{align-items:center}
  .nh-sheet{border-radius:16px;margin:20px;border:1px solid var(--line)}}
.nh-timer-lb{font-size:0.6875rem;letter-spacing:.14em;color:var(--soft);font-weight:700}
.nh-sheet h4{font-size:1.1875rem;font-weight:800;margin-top:8px;line-height:1.4}
.nh-clock{font-size:4rem;font-weight:800;margin:20px 0 4px;font-variant-numeric:tabular-nums;line-height:1}
.nh-vs{font-size:0.8125rem;color:var(--mid)}
.nh-sheet .nh-acts{margin-top:32px;gap:12px}
.nh-sheet .nh-btn{padding:20px;font-size:1rem;border-radius:12px}
/*
 * 「ここでやめる」はよく使う操作。薄い脇役にせず、
 * 「できた」と同じ大きさで並べる（色だけで役割を分ける）。
 */
.nh-btn.stop{flex:1;background:var(--card);border:2px solid var(--line);
  color:var(--ink);font-weight:700;font-size:1rem}
.nh-btn.stop:active{transform:scale(.98)}
.nh-sheet .nh-btn.sui{flex:1}
.nh-sheet .nh-vs{margin-top:4px}
.nh-app :focus-visible{outline:2.5px solid var(--ai);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.nh-app *{animation:none!important;transition:none!important}}

/* ---- 広い画面での配置（影は使わない。線と余白だけで構成する） ---- */
@media(min-width:800px){
  .nh-watch{max-width:940px}
  .nh-watch-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .nh-watch-cards .nh-wc{margin-top:0}
}