/* 小朋友獎勵行事曆（#1372）。字型 Huninn（justfont 粉圓，Google Fonts 上 OFL，google/fonts ofl/huninn/OFL.txt 10/17 實查），圓潤可愛、繁體全字。 */
@import url('https://fonts.googleapis.com/css2?family=Huninn&display=swap');

/* 10/17 分數表對比修正：橘 #e0622a（白底 3.53）→ #b8461a（5.34，淺橘底上 4.62）；灰字全部 ≥4.5（算法 WCAG 相對亮度）。
   ⚠️ 中文頁有 kit 首屏，kit.css html:has(.kit-hero) 會把 --accent 蓋成品牌藍 #02539C（v2 規則）；這裡的橘只用在英文頁 */
:root { --accent: #b8461a; --accent-soft: #fdebe0; --kr-ink: #2b2118; --kr-paper: #fffaf0; --kr-red: #c8322b; }
.kr-top { padding-bottom: 4px; position: relative; }
.kr-kicker { margin: 0 0 4px; font-family: Huninn, sans-serif; font-size: 20px; color: var(--accent); }
.kr-lang { display: inline-flex; border: 1.5px solid #e6d6c4; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.kr-lang button { border: 0; background: #fff; padding: 6px 14px; font-size: 14px; cursor: pointer; color: #6b5d50; }
.kr-lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* 分數表第二輪 ③「同頁三個字族」：工具區文字跟著 kit 內文字；Huninn 只留在獎勵券與印章（app.js 的 canvas、calc.js 的 sealSvg）這種「圖」上 */
#kr-app { padding-bottom: 36px; }
/* 10/17 分數表②：工具區原本 648px（kit-wrap 680）、FAQ 1120px，左緣差約 236px → 工具區跟 FAQ 同寬 */
#kr-app.kit-wrap { max-width: var(--wrap); }
.kr-tonight h2 { word-break: keep-all; }   /* 「今晚的任務」的「務」不要單獨斷到第二行 */
.kr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .kr-grid { grid-template-columns: 1fr; gap: 20px; } }

.kr-tonight { background: #fff; border: 2px solid #f1dcc6; border-radius: 18px; padding: 18px 18px 14px; }
.kr-tonight h2 { margin: 0 0 10px; font-size: 21px; color: var(--kr-ink); }
.kr-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kr-tasks label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--kr-paper); cursor: pointer; font-size: 19px; }
.kr-tasks input { width: 26px; height: 26px; accent-color: var(--accent); flex: none; }
.kr-tasks input:checked + span { color: #6f6052; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.kr-bar { height: 10px; border-radius: 99px; background: #f3e6d8; margin: 14px 0 4px; overflow: hidden; }
.kr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f4a340, var(--accent)); transition: width .35s ease; }
.kr-prog { margin: 0 0 12px; font-size: 14px; color: #7a6a5a; }
.kr-then { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; font-weight: 700; color: var(--kr-ink); }
.kr-then input { flex: 1 1 180px; font-size: 18px; padding: 10px 12px; border: 2px solid #f1c9a8; border-radius: 12px; background: #fff; }
.kr-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kr-ideas .chip { border: 1.5px solid #ecd5bf; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; font-family: inherit; }

/* 獎勵券（官方許可證風） */
.kr-coupon { position: relative; background: #fff; border: 3px dashed #d9c4ae; border-radius: 18px; padding: 18px 20px 16px; min-height: 210px; color: #6f6052; transition: border-color .3s, color .3s; }
.kr-coupon.on { border-color: var(--accent); color: var(--kr-ink); background: linear-gradient(#fff, #fff8ef); }
.kr-coupon header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid currentColor; padding-bottom: 6px; opacity: .9; }
.kr-coupon .ttl { font-size: 22px; font-weight: 700; letter-spacing: .08em; color: inherit; }
.kr-coupon.on .ttl { color: var(--accent); }
.kr-coupon .no { font-size: 13px; letter-spacing: .1em; }
.kr-coupon .grant { font-size: 22px; line-height: 1.5; margin: 16px 92px 18px 0; font-weight: 700; }
.kr-coupon footer { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 14px; padding-right: 96px; }   /* 右下留給印章，不壓到核准人 */
.kr-seal { position: absolute; right: 16px; bottom: 14px; width: 86px; height: 86px; transform: rotate(-9deg); opacity: .92; mix-blend-mode: multiply; }
.kr-seal.off { opacity: .14; filter: grayscale(1); }
.kr-coupon.fresh .kr-seal { animation: kr-stamp .5s .15s cubic-bezier(.3,1.6,.5,1) both; }
.kr-coupon.fresh { animation: kr-pop .4s ease; }
@keyframes kr-stamp { from { transform: rotate(-9deg) scale(2.6); opacity: 0 } to { transform: rotate(-9deg) scale(1); opacity: .92 } }
@keyframes kr-pop { 0% { transform: scale(.97) } 60% { transform: scale(1.02) } 100% { transform: scale(1) } }

.kr-streak { margin-top: 16px; background: #fff; border: 2px solid #f1dcc6; border-radius: 16px; padding: 14px 16px; }
.kr-streak b { font-size: 20px; color: var(--accent); }
.kr-levels { list-style: none; padding: 0; margin: 10px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kr-levels li { border-radius: 12px; background: var(--kr-paper); padding: 8px 10px; font-size: 13px; color: #6b5d50; text-align: center; line-height: 1.35; }
.kr-levels li span { display: block; font-size: 22px; font-weight: 700; color: #7d6c5b; }
.kr-levels li.hit { background: #fdebe0; } .kr-levels li.hit span { color: var(--accent); }
.kr-streak p { margin: 4px 0 0; font-size: 15px; } .kr-streak .kr-rule { font-size: 13px; color: #7a6a5a; }
.kr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kr-actions .btn { width: 100%; } .kr-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 月曆 */
.kr-cal { margin-top: 28px; background: #fff; border: 2px solid #f1dcc6; border-radius: 18px; padding: 16px; }
.kr-cal h2 { margin: 0 0 10px; font-size: 20px; }
.kr-week, .kr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kr-week span { text-align: center; font-size: 13px; color: #7a6a5a; }
.kr-day { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--kr-paper); position: relative; font-family: inherit; font-size: 15px; color: var(--kr-ink); cursor: pointer; padding: 0; }
.kr-day.empty { background: transparent; cursor: default; }
.kr-day.today { outline: 2.5px solid var(--accent); outline-offset: -2.5px; }
.kr-day.done { background: #fff1e6; }
.kr-day .n { position: absolute; top: 4px; left: 7px; font-size: 13px; }
.kr-day .mini { position: absolute; inset: 22% 14% 10% 14%; transform: rotate(-9deg); opacity: .9; }
.kr-day .mini svg { width: 100%; height: 100%; }
.kr-dayview { margin-top: 12px; } .kr-dayview h3 { font-size: 16px; margin: 0 0 8px; }

/* 家長設定 */
.kr-settings { margin-top: 22px; background: #fff; border: 2px solid #f1dcc6; border-radius: 16px; padding: 12px 16px; }
.kr-settings summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.kr-settings .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 520px) { .kr-settings .row2 { grid-template-columns: 1fr; } }
.kr-settings textarea, .kr-settings input:not([type=radio]) { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; }
.kr-seal-prev { width: 64px; height: 64px; margin-top: 8px; }
.kr-bigrow { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; }

.kr-print-coupons { display: none; }
@media print {
  .kr-tonight, .kr-streak, .kr-actions, .kr-settings, .kr-lang, .kr-dayview { display: none !important; }
  .kr-grid { display: block; } .kr-right > .kr-coupon { display: none; }
  .kr-cal { border: 0; padding: 0; } .kr-day { border: 1px solid #ddd; }
  .kr-print-coupons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  .kr-print-coupons .kr-coupon { break-inside: avoid; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .kr-coupon.fresh, .kr-coupon.fresh .kr-seal, .kr-bar i { animation: none; transition: none } }

/* 研究調整（docs/research/kids-reward-calendar-evidence-20261017.md）：當場具體稱讚提示、任務 1–4 項提示、螢幕類小字、讓孩子自己選 */
.kr-praise { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff4d6; color: #6b4a12; font-size: 15px; line-height: 1.5; animation: kr-pop .35s ease; }
.kr-hint { margin: -4px 0 12px; font-size: 14px; color: #8a5a1a; }
.kr-note { margin: 6px 0 0; font-size: 12.5px; color: #7a6a5a; line-height: 1.5; }
.kr-ideas .chip.kid { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.kr-ideas .chip.screen { border-style: dashed; color: #6b5d50; }

/* 分數表第二輪 ②：月曆格子 aspect-ratio 1，1280 時每格約 145px 正方、5 列約 850px → 寬螢幕改固定高度（列印照舊正方） */
@media screen and (min-width: 961px) { .kr-day { aspect-ratio: auto; height: 78px; } .kr-day .mini { inset: 24% 30% 8% 30%; } }
/* 分數表第二輪 ①：手機首屏 kit 用 box-shadow 往下延伸 56px 藍底（section.kit-hero 是 position: relative），
   而這頁工具區是自己的結構、沒定位，被那 56px 蓋住任務卡標題上半 → 工具區自己疊到上面 */
#kr-app { position: relative; z-index: 1; }

/* 分數表第三輪（79）：
   ① 月曆 35 格只有日期數字、空了一大片 → 還沒蓋的格子畫一個淡虛線圈（「章蓋在這裡」）、桌機格子壓矮、標題旁寫這個月蓋了幾個章
   ② 「列印月曆」近黑是全頁最重的鈕 → 列印改外框（app.js），下載獎勵券停用時改虛線外框而不是淡藍，看得出「還沒解鎖」而不是壞掉
   ③ 語言切換軌道撐滿約 357px → 照兩顆鈕的寬度；連續天數的數字放大當全頁最大的結果字 */
.kr-lang { width: max-content; }
.kr-sk { display: flex; align-items: baseline; gap: 6px; font-size: 20px; color: var(--accent); line-height: 1.1; }
.kr-sk-n { font: 900 56px/1 var(--font-head, inherit); letter-spacing: -.02em; }
.kr-actions .btn[disabled] { opacity: 1; background: #fff; border: 1.5px dashed #8FA6BD; color: #3d4b59; box-shadow: none; }
.kr-cal h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kr-cal h2 small { font-size: 15px; font-weight: 700; color: var(--accent); }
.kr-day:not(.done):not(.empty)::after { content: ''; position: absolute; left: 50%; top: 58%; width: min(54%, 34px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px dashed #e2c9b0; border-radius: 50%; }
.kr-day.today:not(.done)::after { border-color: var(--accent); opacity: .6; }
@media screen and (min-width: 961px) { .kr-day { height: 60px; } .kr-day:not(.done)::after { width: 30px; } }
@media print { .kr-day:not(.done)::after { border-color: #bbb; } }

/* 萬用輸入（Atlas 10/18）：首屏下面、今晚任務上面；講一句就出今晚的任務表 */
.kr-un-wrap { padding-top: 8px; padding-bottom: 8px; max-width: 760px; }
#kr-un:empty { min-height: 276px; }
@media (min-width: 960px) { #kr-un:empty { min-height: 264px; } }