/* Chores, redesigned (Oct 31), plus each child's Reward Shop and the chore pictures everywhere.
   Sizes follow CLAUDE.md rule 8: text 15–16px, secondary 13px, labels 12px, section headings 30px. */

/* The drawings scale with the text around them, like the emoji they replace. */
.chore-art { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: middle; flex: none; }

.ch-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ch-staricon { width: 24px; height: 24px; flex: none; }
.ch-staricon path { fill: #c99a2e !important; stroke: none !important; }
.ch-eyebrow { font: 700 12px 'DM Sans', sans-serif; letter-spacing: .14em; color: #1c6b67; }
.ch-empty { margin: 6px 0; font-size: 15px; color: #4a4f57; }

/* Buttons */
.ch-blue, .ch-navy, .ch-light, .ch-gold, .ch-ghost { border-radius: 999px; font: 700 15px 'DM Sans', sans-serif; min-height: 44px; padding: 0 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.ch-blue { background: #0a60a2 !important; color: #fff !important; border: 0 !important; min-height: 48px; }
.ch-navy { background: #0f3554 !important; color: #fff !important; border: 0 !important; }
.ch-light { background: #fff !important; color: #0f3554 !important; border: 1.5px solid #e5ddcf !important; }
.ch-gold { background: #ebc35f !important; color: #0f3554 !important; border: 0 !important; }
.ch-ghost { background: transparent !important; color: #fff !important; border: 1.5px solid #5a7690 !important; }
.ch-link { background: none !important; border: 0 !important; padding: 0 !important; min-height: 44px; font: 700 15px 'DM Sans', sans-serif; color: #0a60a2 !important; cursor: pointer; }
.ch-link:hover { color: #0f3554 !important; text-decoration: underline; }

/* Who, and the view switch */
.ch-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 22px; }
.ch-whos, .ch-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-who { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #e5ddcf !important; background: #fff !important; color: #2e3238 !important; border-radius: 999px; min-height: 46px; padding: 0 18px 0 6px; font: 700 15px 'DM Sans', sans-serif; cursor: pointer; }
.ch-who.on { background: #0f3554 !important; color: #fff !important; border-color: #0f3554 !important; }
.ch-who .avatar, .ch-allface { width: 32px !important; height: 32px !important; min-width: 32px; font-size: 13px !important; }
.ch-allface { border-radius: 50%; background: #fff; color: #0f3554; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px !important; border: 1.5px solid #e5ddcf; box-sizing: border-box; }

/* Waiting for You */
.ch-waiting { background: #0f3554; color: #fff; border-radius: 26px; padding: 22px 26px; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.ch-waiting .ch-eyebrow { color: #ebc35f; }
.ch-wait-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; padding: 6px 0; }
.ch-wait-item b { display: block; font: 400 22px/1.25 'Young Serif', serif; }
.ch-wait-item b em { font-style: normal; color: #ebc35f; }
.ch-wait-item small { display: block; margin-top: 4px; font-size: 15px; color: #d3dee8; }
.ch-wait-item.small b { font: 700 16px 'DM Sans', sans-serif; }
.ch-wait-item.small small { font-size: 13px; }
.ch-wait-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ch-promised { border-top: 1px solid #2b4c69; padding-top: 8px; }

/* A card per child */
.ch-kids { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; align-items: start; }
.ch-kids.one { grid-template-columns: minmax(0, 760px); }
.ch-card { background: #fff; border-radius: 28px; padding: 24px; box-sizing: border-box; }
.ch-kid { display: flex; flex-direction: column; gap: 16px; }
.ch-kid-top { display: flex; align-items: center; gap: 14px; }
.ch-ring { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ch-ring .avatar { width: 52px !important; height: 52px !important; font-size: 19px !important; border: 3px solid #fff; box-sizing: border-box; }
.ch-kid-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-kid-name h2 { margin: 0; font: 400 30px/1.1 'Young Serif', serif; color: #2e3238; }
.ch-kid-name span { font-size: 15px; color: #4a4f57; }
.ch-stars { display: inline-flex; align-items: center; gap: 6px; font: 400 30px 'Young Serif', serif; color: #8a6410; }
.ch-goal { background: #fbf7f0; border-radius: 18px; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ch-goal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ch-goal-head .ch-link { min-height: 32px; font-size: 14px; }
.ch-goal-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.ch-goal-pic { font-size: 30px; line-height: 1; display: inline-flex; }
.ch-goal-line { font-size: 13px; color: #4a4f57; }
.ch-bar { display: block; height: 10px; border-radius: 999px; background: #eae2d3; overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: 999px; background: #e0a93a; }
.ch-bar.thin { height: 6px; background: #e3dbcb; }
.ch-bar.thin i { background: #299492; }
.ch-today { display: flex; flex-direction: column; }
.ch-today > .ch-eyebrow { color: #4a4f57; padding-bottom: 6px; }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid #f1eadd; }
.ch-check { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 2px solid #cfc6b6 !important; background: #fff !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ch-check .ch-ico { width: 22px; height: 22px; stroke: #fff; stroke-width: 3; }
.ch-row.done .ch-check { background: #299492 !important; border-color: #299492 !important; }
.ch-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none !important; border: 0 !important; padding: 0; text-align: left; cursor: pointer; color: inherit; min-height: 44px; font: inherit; }
.ch-pic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #f4f1ea; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; overflow: hidden; }
.ch-pic .chore-photo { width: 100%; height: 100%; object-fit: cover; }
.ch-pic .chore-art { width: 36px; height: 36px; }
.ch-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-name b { font-size: 16px; font-weight: 500; color: #2e3238; }
.ch-name small { font-size: 13px; color: #4a4f57; }
.ch-row.done .ch-name b { color: #5b6068; text-decoration: line-through; }
.ch-open:hover .ch-name b { color: #0a60a2; }
.ch-earn { font-size: 14px; font-weight: 700; color: #8a6410; white-space: nowrap; }
.ch-earn.waiting { color: #1c6b67; font-size: 13px; }
.ch-earn.zero { color: #6b6f76; }
.ch-later { margin: 0; padding: 10px 0 2px; border-top: 1px solid #f1eadd; font-size: 14px; color: #4a4f57; }
.ch-addfor { display: flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 10px; padding: 0 14px; border: 1.5px dashed #d8cdb9 !important; border-radius: 14px; background: transparent !important; font: 700 15px 'DM Sans', sans-serif; color: #0a60a2 !important; cursor: pointer; }
.ch-routines { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-routine { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: #f4f1ea; }
.ch-routine > span:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.ch-routine small { font-size: 13px; color: #4a4f57; }

/* Picture View: big tiles the kids can tap */
.ch-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.ch-tile { position: relative; }
.ch-tile-main { width: 100%; min-height: 150px; border-radius: 20px; border: 2px solid #eee6d8 !important; background: #fff !important; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; font: inherit; color: #2e3238; }
.ch-tile-pic { font-size: 64px; line-height: 1; display: inline-flex; }
.ch-tile-pic .chore-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; }
.ch-tile-main b { font-size: 15px; font-weight: 700; text-align: center; }
.ch-tile-check { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cfc6b6; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ch-tile-check .ch-ico { stroke: #fff; stroke-width: 3; width: 18px; height: 18px; }
.ch-tile.done .ch-tile-main { border-color: #299492 !important; background: #eef7f6 !important; }
.ch-tile.done .ch-tile-check { background: #299492; border-color: #299492; }
.ch-tile-edit { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0 !important; background: transparent !important; color: #4a4f57 !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* Reward Shop and This Week */
.ch-shop { margin: 34px 0 0; }
.ch-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.ch-section-head h2 { margin: 0; font: 400 30px 'Young Serif', serif; color: #2e3238; }
.ch-section-head p { margin: 4px 0 0; font-size: 15px; color: #4a4f57; max-width: 620px; }
.ch-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ch-reward { display: flex; align-items: center; gap: 14px; text-align: left; background: #fff !important; border: 0 !important; border-radius: 22px; padding: 14px 16px; cursor: pointer; font: inherit; color: #2e3238; min-height: 80px; }
.ch-reward:hover { box-shadow: 0 0 0 2px #e5ddcf; }
.ch-reward-pic { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #f7ecc7; display: inline-flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; }
.ch-reward b { display: block; font-size: 16px; line-height: 1.25; }
.ch-reward small { display: block; margin-top: 4px; font-size: 13px; color: #4a4f57; }
.ch-reward em { font-style: normal; font-weight: 700; color: #8a6410; }
.ch-reward.saving { background: #f1ece2 !important; }
.ch-reward.saving .ch-reward-pic { background: #e7e1d5; filter: grayscale(.8); opacity: .75; }
.ch-reward.saving em { color: #6b6f76; }
.ch-week { margin: 34px 0 0; }
.ch-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.ch-week-name { display: block; font-size: 16px; color: #4a4f57; margin-bottom: 10px; }
.ch-week-name b { color: #2e3238; }
.ch-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.ch-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-height: 120px; }
.ch-day small { font-size: 12px; font-weight: 700; color: #4a4f57; min-height: 15px; }
.ch-day i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: var(--kid, #0a60a2); }
.ch-day span { font-size: 12px; font-weight: 700; color: #4a4f57; }
.ch-day.today span { color: #0f3554; text-decoration: underline; text-underline-offset: 3px; }
.ch-settings { margin: 26px 0 0; font-size: 15px; color: #4a4f57; }
.ch-settings .textbtn { font-size: 15px; }
.ch-nokids h2 { margin: 0 0 8px; font: 400 30px 'Young Serif', serif; }
.ch-nokids p { font-size: 16px; color: #4a4f57; }

/* Windows: a chore, a reward, every star, a child's shop */
html dialog.ch-sheet { width: 520px; max-width: calc(100% - 28px); padding: 18px 24px 24px; border-radius: 28px; background: #fff; color: #2e3238; box-sizing: border-box; }
.ch-sheet form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ch-sheet h2 { margin: 0 0 10px; font: 400 30px 'Young Serif', serif; }
.ch-sheet-top { display: flex; justify-content: space-between; align-items: center; }
.ch-close { width: 44px; height: 44px; border-radius: 50%; background: #f4f1ea !important; border: 0 !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ch-close svg { width: 18px; height: 18px; fill: none; stroke: #2e3238; stroke-width: 2.2; stroke-linecap: round; }
.ch-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; color: #2e3238; margin: 0; }
.ch-field small { font-size: 13px; font-weight: 400; color: #4a4f57; }
.ch-field input, .ch-field select { font: 400 16px 'DM Sans', sans-serif; color: #2e3238; border: 1.5px solid #e5ddcf; border-radius: 14px; padding: 12px 14px; background: #fff; }
.ch-field .ch-big { font: 400 22px 'Young Serif', serif; border: 0; border-bottom: 2px solid #e5ddcf; border-radius: 0; padding: 6px 0; }
.ch-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch-fieldset legend { font-size: 15px; font-weight: 700; padding: 0 0 8px; }
.ch-fieldset legend small { font-size: 13px; font-weight: 400; color: #4a4f57; }
.ch-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.ch-art { aspect-ratio: 1; min-height: 48px; border-radius: 14px; border: 1.5px solid #e5ddcf !important; background: #fff !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; padding: 4px; }
.ch-art .chore-art { width: 100%; height: 100%; }
.ch-art.on { border: 3px solid #0f3554 !important; background: #fbf7f0 !important; }
.ch-art-emoji { font-size: 28px; line-height: 1; }
.ch-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ch-photo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip input, .ch-day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #e5ddcf; background: #fff; font: 700 14px 'DM Sans', sans-serif; cursor: pointer; box-sizing: border-box; }
.ch-chip input:checked + span { background: #0f3554; border-color: #0f3554; color: #fff; }
.ch-chip input:focus-visible + span, .ch-day-pick input:focus-visible + span { outline: 3px solid #6fb3ea; outline-offset: 2px; }
.ch-daypick { border: 0; padding: 0; margin: 4px 0 0; }
.ch-daypick[hidden] { display: none; }
.ch-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ch-day-pick span:first-of-type { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; border: 1.5px solid #e5ddcf; background: #fff; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.ch-day-pick input:checked + span { background: #299492; border-color: #299492; color: #fff; }
.ch-daysline { display: block; margin-top: 8px; font-size: 13px; color: #4a4f57; }
.ch-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fbf7f0; }
.ch-stepper > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ch-stepper small { font-size: 13px; color: #4a4f57; }
.ch-step { display: inline-flex; align-items: center; gap: 8px; font: 400 22px 'Young Serif', serif; color: #8a6410; }
.ch-step input { width: 64px; text-align: center; font: 400 24px 'Young Serif', serif; color: #8a6410; border: 0; background: transparent; -moz-appearance: textfield; }
.ch-step input::-webkit-inner-spin-button, .ch-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ch-round { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #e5ddcf !important; background: #fff !important; font: 700 20px 'DM Sans', sans-serif; cursor: pointer; color: #2e3238 !important; padding: 0; }
.ch-note { margin: 0; font-size: 13px; color: #4a4f57; }
.ch-save { width: 100%; min-height: 52px; font-size: 16px; }
.ch-remove { align-self: center; min-height: 44px; background: none !important; border: 0 !important; font: 700 15px 'DM Sans', sans-serif; color: #a8361a !important; cursor: pointer; }
.ch-remove[hidden] { display: none; }
.ch-history { list-style: none; margin: 0; padding: 0; }
.ch-history li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f1eadd; }
.ch-history li > span { flex: 1; min-width: 0; }
.ch-history b { display: block; font-size: 15px; }
.ch-history small { font-size: 13px; color: #4a4f57; }
.ch-history em { font-style: normal; font-weight: 700; color: #8a6410; white-space: nowrap; }

/* A child's shop */
.ks-dialog { background: #fbf7f0 !important; }
.ks-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 6px 0 14px; }
.ks-head h2 { margin: 0; }
.ks-head p { margin: 4px 0 0; font-size: 13px; color: #4a4f57; }
.ks-bank { display: flex; flex-direction: column; align-items: flex-end; }
.ks-bank b { font: 400 30px 'Young Serif', serif; color: #8a6410; white-space: nowrap; }
.ks-bank small { font-size: 12px; color: #4a4f57; }
.ks-goal { background: #0f3554; color: #fff; border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ks-goal .ch-eyebrow { color: #ebc35f; }
.ks-goal-title { font: 400 21px/1.25 'Young Serif', serif; }
.ks-goal .ch-bar { background: #2b4c69; }
.ks-goal .ch-bar i { background: #ebc35f; }
.ks-goal-line { font-size: 13px; color: #d3dee8; }
.ks-held { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: #e3f1ef; color: #1c6b67; font-size: 15px; font-weight: 700; }
.ks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ks-item { display: flex; align-items: center; gap: 12px; border-radius: 20px; padding: 10px 10px 10px 12px; background: #f1ece2; }
.ks-item.lit { background: #fff; box-shadow: 0 1px 0 #e5ddcf; }
.ks-pic { width: 48px; height: 48px; flex: none; border-radius: 14px; background: #e7e1d5; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; filter: grayscale(.8); opacity: .75; }
.ks-item.lit .ks-pic { background: #f7ecc7; filter: none; opacity: 1; }
.ks-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ks-text b { font-size: 16px; line-height: 1.25; }
.ks-text small { font-size: 13px; color: #4a4f57; }
.ks-item.lit .ks-text small { color: #1c6b67; }
.ks-item.asked .ks-text small { font-weight: 700; }
.ks-pin { width: 44px; height: 44px; flex: none; border: 0 !important; border-radius: 50%; background: transparent !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #a39d92; padding: 0; }
.ks-pin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ks-pin.on { color: #c99a2e; }
.ks-pin.on svg { fill: currentColor; }
.ks-price { min-width: 76px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 0 !important; background: #ebc35f !important; color: #0f3554 !important; font: 700 15px 'DM Sans', sans-serif; white-space: nowrap; cursor: pointer; }
.ks-price:disabled { background: #e7e1d5 !important; color: #5b6068 !important; cursor: default; }
.ks-item.asked .ks-price { background: #fff !important; color: #1c6b67 !important; border: 1.5px solid #1c6b67 !important; }

/* Kids' Board: the shop buttons, and drawings where emoji were */
.kh-shops { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
#kidsRoot .kh-shop, .kh-shop { min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0 !important; background: #ebc35f !important; color: #0f3554 !important; font: 700 17px 'DM Sans', sans-serif !important; cursor: pointer; box-shadow: 0 2px 0 #c99a2e; }
.kid-goal-prize .chore-art, .kc-goal-prize .chore-art { width: 1.3em; height: 1.3em; }

@media (max-width: 760px) {
  .ch-who-all { display: none !important; }
  .ch-toolbar { margin-bottom: 16px; }
  .ch-tools { width: 100%; }
  .ch-tools .ch-blue { flex: 1; }
  .ch-card { padding: 20px 18px; border-radius: 24px; }
  .ch-kids, .ch-kids.one { grid-template-columns: minmax(0, 1fr); }
  .ch-kid-name h2 { font-size: 26px; }
  .ch-waiting { padding: 18px; border-radius: 22px; }
  .ch-wait-item b { font-size: 20px; }
  .ch-wait-actions { width: 100%; }
  .ch-wait-actions button { flex: 1; }
  .ch-rewards { grid-template-columns: minmax(0, 1fr); }
  .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html dialog.ch-sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; padding: 14px 18px 26px; }
  .ch-art-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* The window opens with focus on its close button; show the ring only for the keyboard. */
.ch-sheet .ch-close:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }