/* The DeMoe Family design system
   Near-black magazine styling. Warm white ink, one gold accent.
   No emojis anywhere. No em dashes in any text. */

:root {
  --bg: #0A0A0A;
  --ink: #F5F2EA;
  --gold: #C9A227;
  --dim: rgba(245, 242, 234, .55);
  --faint: rgba(245, 242, 234, .38);
  --hair: rgba(245, 242, 234, .14);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

#app { min-height: 100vh; }

/* ---------- shared type ---------- */

.kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

.kicker.gold { color: var(--gold); }

.serif { font-family: var(--serif); }

.star-glyph {
  color: var(--gold);
  font-style: normal;
}

.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(201, 162, 39, .55);
  padding: 3px 8px 2px;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

.rule { border: 0; border-top: 1px solid var(--hair); }

.noscript { padding: 40px; text-align: center; }

button { font-family: var(--sans); cursor: pointer; }

/* ---------- chooser (#/) ---------- */

.chooser {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.chooser .masthead {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.chooser .sub { margin-bottom: 56px; }

.chooser .choices {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(420px, 92vw);
}

.big-btn {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(245, 242, 234, .35);
  padding: 22px 28px;
  font-size: 17px;
  letter-spacing: .06em;
  transition: border-color .2s, background .2s;
  background: transparent;
}

.big-btn:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 39, .06);
}

.big-btn .kicker { display: block; margin-top: 8px; font-size: 10px; }

/* ---------- TV view ---------- */

.tv {
  width: 1920px;
  min-height: 1080px;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
}

.tv-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}

.tv-date { display: flex; align-items: center; gap: 36px; }

.tv-daynum {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 128px;
  line-height: .9;
}

.tv-date-labels .kicker {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
}

.tv-date-labels .kicker:last-child { margin-bottom: 0; }

.tv-clock {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}

.tv-weather {
  display: flex;
  align-items: center;
  gap: 30px;
  text-align: right;
}

.tv-temp {
  font-family: var(--serif);
  font-size: 84px;
  font-weight: 600;
  line-height: 1;
}

.tv-weather-meta .kicker { display: block; margin-bottom: 6px; }

.tv-hilo {
  font-family: var(--serif);
  font-size: 26px;
  margin-top: 4px;
  color: var(--dim);
}

/* CSS sun behind cloud */
.sun-cloud { position: relative; width: 110px; height: 74px; flex: 0 0 auto; }
.sun-cloud .sun {
  position: absolute; top: 2px; left: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold);
  opacity: .9;
}
.sun-cloud .cloud {
  position: absolute; bottom: 6px; left: 22px;
  width: 76px; height: 30px; border-radius: 15px;
  background: #EDE8DB;
}
.sun-cloud .cloud::before, .sun-cloud .cloud::after {
  content: ""; position: absolute; background: #EDE8DB; border-radius: 50%;
}
.sun-cloud .cloud::before { width: 40px; height: 40px; top: -20px; left: 10px; }
.sun-cloud .cloud::after { width: 28px; height: 28px; top: -13px; left: 42px; }

.tv-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 20px 0;
}

.tv-person { min-width: 0; }

.tv-person-name {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .03em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}

.tv-stars {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 24px;
}

.tv-stars .kicker { font-family: var(--sans); font-size: 15px; margin-left: 8px; }

.tv-kindline {
  margin-top: 6px;
  font-size: 15px;
  color: var(--faint);
  font-style: italic;
}

.tv-nextline {
  margin-top: 8px;
  font-size: 16px;
  color: var(--dim);
  letter-spacing: .04em;
}

.tv-nextline strong { color: var(--ink); font-weight: 500; }

.tv-items { list-style: none; margin-top: 18px; }

.tv-item {
  padding: 12px 0 12px 14px;
  border-bottom: 1px solid var(--hair);
  transition: opacity .3s;
}

.tv-item.away { border-left: 2px solid var(--gold); padding-left: 12px; }
.tv-item.now { border-left: 2px solid var(--gold); padding-left: 12px; }

.tv-item.past { opacity: .35; }

.tv-item-time {
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 5px;
}

.tv-item-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
}

.tv-item.done .tv-item-title,
.tv-item.done .tv-item-detail {
  text-decoration: line-through;
  color: var(--dim);
}

.tv-item-detail {
  font-size: 19px;
  color: var(--dim);
  margin-top: 4px;
}

.tv-item-place {
  font-size: 19px;
  color: var(--dim);
  margin-top: 4px;
  font-style: italic;
}

.tv-nowtag, .tv-nexttag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 700;
  margin-left: 10px;
  vertical-align: middle;
}

.tv-nowtag { color: var(--gold); }
.tv-nexttag { color: var(--faint); }

.tv-checkbox {
  display: inline-block;
  width: 15px; height: 15px;
  border: 1px solid rgba(245, 242, 234, .6);
  margin-right: 12px;
  position: relative;
  flex: 0 0 auto;
}

.tv-checkbox.done { background: var(--ink); border-color: var(--ink); }

.tv-chore { display: flex; align-items: center; }

/* TV key gate */
.tv-gate {
  width: 1920px;
  min-height: 1080px;
  transform-origin: top left;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.tv-gate .serif { font-size: 34px; margin-bottom: 14px; }
.tv-gate p { color: var(--dim); margin-bottom: 26px; }
.tv-gate form { display: flex; gap: 10px; }

/* ---------- kid + parent shared chrome ---------- */

.shell { max-width: 720px; margin: 0 auto; padding: 32px 22px 90px; }

.shell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 30px;
}

.shell-head .greet {
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 600;
}

.shell-head .date-line { margin-top: 6px; }

.linklike {
  background: none; border: 0;
  color: var(--dim);
  font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.linklike:hover { color: var(--ink); }

.section { margin-bottom: 44px; }

.section-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 6px;
}

.section-sub { color: var(--dim); font-size: 14px; margin-bottom: 18px; }

/* ---------- login / pin pad ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
}

.login-wrap .who { font-family: var(--serif); font-size: 32px; margin-bottom: 8px; }
.login-wrap .kicker { margin-bottom: 30px; }

.profile-list {
  display: flex; flex-direction: column; gap: 14px;
  width: min(340px, 88vw); margin-bottom: 34px;
}

.profile-btn {
  background: transparent;
  border: 1px solid rgba(245, 242, 234, .3);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  padding: 16px;
  transition: border-color .2s;
}
.profile-btn:hover { border-color: var(--gold); }

.pin-dots { display: flex; gap: 18px; justify-content: center; margin: 6px 0 28px; }
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(245, 242, 234, .5);
}
.pin-dot.filled { background: var(--gold); border-color: var(--gold); }

.pinpad {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  gap: 12px; justify-content: center;
  margin-bottom: 20px;
}
.pinpad button {
  background: transparent;
  border: 1px solid rgba(245, 242, 234, .25);
  color: var(--ink);
  font-size: 26px; font-family: var(--serif);
  width: 84px; height: 72px;
  transition: border-color .15s, background .15s;
}
.pinpad button:hover { border-color: var(--gold); }
.pinpad button:active { background: rgba(201, 162, 39, .12); }
.pinpad .pin-clear { font-size: 15px; font-family: var(--sans); letter-spacing: .12em; }

.login-err { color: #E08080; font-size: 14px; margin-top: 10px; min-height: 20px; }

/* ---------- kid schedule ---------- */

.progress-line { color: var(--dim); font-size: 15px; margin: 4px 0 22px; }

.kid-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--hair);
}

.kid-item.past { opacity: .38; }

.kid-time {
  flex: 0 0 92px;
  font-size: 12px; letter-spacing: .14em;
  color: var(--gold); font-weight: 600;
  text-transform: uppercase; padding-top: 4px;
  line-height: 1.6;
}

.kid-body { flex: 1; min-width: 0; }

.kid-title { font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.kid-title .tag { font-family: var(--sans); }

.kid-item.done .kid-title { text-decoration: line-through; color: var(--dim); }
.kid-item.done .kid-detail { text-decoration: line-through; color: var(--faint); }

.kid-detail { color: var(--dim); font-size: 14px; margin-top: 5px; line-height: 1.5; }
.kid-place { color: var(--dim); font-size: 14px; margin-top: 5px; font-style: italic; }

.check {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(245, 242, 234, .55);
  background: transparent;
  position: relative;
  margin-top: 2px;
  transition: background .15s, border-color .15s;
}
.check.done { background: var(--ink); border-color: var(--ink); }
.check.done::after {
  content: "";
  position: absolute; left: 11px; top: 5px;
  width: 7px; height: 13px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.check.busy { opacity: .5; }

/* ---------- stars ---------- */

.star-totals { display: flex; gap: 34px; margin: 6px 0 20px; flex-wrap: wrap; }
.star-total .num {
  font-family: var(--serif);
  font-size: 40px; font-weight: 600;
}
.star-total .num .star-glyph { font-size: 30px; margin-right: 6px; }

.reward-progress { margin: 4px 0 26px; }
.reward-line { font-size: 16px; margin-bottom: 10px; }
.reward-line strong { font-weight: 600; }
.progress-track { height: 4px; background: var(--hair); position: relative; }
.progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }

.feed { list-style: none; }
.feed li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px; line-height: 1.55;
}
.feed li.removed { opacity: .45; }
.feed .feed-day { color: var(--faint); font-size: 13px; margin-left: 8px; }
.feed .feed-note { color: var(--dim); display: block; font-style: italic; margin-top: 3px; }

.quiet-line { color: var(--faint); font-size: 14px; font-style: italic; margin-top: 18px; }

/* ---------- forms ---------- */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 8px; font-weight: 500;
}
.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(245, 242, 234, .28);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.field select option { background: #141414; }
.field textarea { min-height: 76px; resize: vertical; }

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }

.checkbox-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 15px; }
.checkbox-row input { width: 20px; height: 20px; accent-color: var(--gold); }

.btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  padding: 14px 26px;
  transition: background .2s, color .2s;
}
.btn:hover { background: rgba(201, 162, 39, .12); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.danger { border-color: #B05252; color: #D98C8C; }
.btn.danger:hover { background: rgba(176, 82, 82, .12); }
.btn.ghost { border-color: rgba(245, 242, 234, .3); color: var(--ink); }

.msg { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.msg.ok { color: #9CCB8E; }
.msg.err { color: #E08080; }

.pin-once {
  font-family: var(--serif);
  font-size: 64px; letter-spacing: .18em;
  color: var(--gold);
  margin: 14px 0 6px;
  text-align: center;
}

/* ---------- parent console ---------- */

.date-nav {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.date-nav .nav-btn {
  background: transparent; border: 1px solid rgba(245, 242, 234, .3);
  color: var(--ink); font-size: 20px;
  width: 46px; height: 46px;
}
.date-nav .nav-btn:hover { border-color: var(--gold); }
.date-nav .today-btn { font-size: 13px; letter-spacing: .12em; width: auto; padding: 0 18px; text-transform: uppercase; }
.date-nav .cur-date { font-family: var(--serif); font-size: 20px; flex: 1; }
.date-nav input[type="date"] {
  background: transparent; border: 1px solid rgba(245, 242, 234, .28);
  color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 10px;
  color-scheme: dark;
}

.person-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.person-tabs button {
  background: transparent; border: 1px solid rgba(245, 242, 234, .25);
  color: var(--dim); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 18px;
}
.person-tabs button.active { border-color: var(--gold); color: var(--gold); }

.item-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
}
.item-row .grow { flex: 1; min-width: 0; }
.item-row .ititle { font-family: var(--serif); font-size: 18px; }
.item-row .imeta { color: var(--dim); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.item-row .actions { display: flex; gap: 8px; flex: 0 0 auto; }
.mini-btn {
  background: transparent; border: 1px solid rgba(245, 242, 234, .3);
  color: var(--ink); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 8px 12px;
}
.mini-btn:hover { border-color: var(--gold); color: var(--gold); }
.mini-btn.danger:hover { border-color: #B05252; color: #D98C8C; }

.reward-card {
  border: 1px solid var(--hair);
  padding: 18px; margin-bottom: 14px;
}
.reward-card.inactive { opacity: .5; }
.reward-card .rtitle { font-family: var(--serif); font-size: 20px; }
.reward-card .rcost { color: var(--gold); font-size: 14px; margin-top: 4px; }
.reward-card .rrow { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.reward-card select {
  background: transparent; border: 1px solid rgba(245, 242, 234, .28);
  color: var(--ink); font-size: 14px; padding: 8px 10px;
}
.reward-card select option { background: #141414; }

.key-field {
  font-family: monospace; font-size: 13px;
  width: 100%; background: transparent;
  border: 1px solid rgba(245, 242, 234, .28);
  color: var(--ink); padding: 12px 14px; margin-top: 10px;
}

details.form-details { margin-top: 22px; border: 1px solid var(--hair); padding: 16px 18px; }
details.form-details summary {
  cursor: pointer; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
details.form-details summary:hover { color: var(--gold); }
details.form-details .form-body { margin-top: 18px; }

hr.rule { margin: 34px 0; }

/* smaller screens: kid/parent app only. The TV is a fixed 1920px canvas
   scaled by JS, so viewport media queries must not touch TV elements. */
@media (max-width: 640px) {
  .field-row { flex-direction: column; }
  .date-nav { flex-wrap: wrap; }
}

/* ---------- TV kiosk mode: fixed 1920x1080 canvas, scaled to fit ---------- */
html.tv-mode, html.tv-mode body { height: 100%; overflow: hidden; background: #000; }