/* ============================================================
   Whysdom — PARENTS' app polish layer.
   Loaded ONLY by parent.html, AFTER kid.css. Every rule here
   affects the grown-ups pages only; the kid app never loads
   this file. CSP: no inline styles anywhere — all here.
   Palette: warm paper background, white cards, deep teal
   accent (the kid app's leaf/teal family, grown-up version),
   amber reserved for "needs your action".
   ============================================================ */

body {
  background: #f5f1e8;
  color: #1e2b26;
  font-size: 17px;
  line-height: 1.5;
}
#app { max-width: 640px; padding: 18px 14px 48px; }

/* ---- cards & section headers ---- */
.card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 18px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(31, 54, 46, .06), 0 8px 24px rgba(31, 54, 46, .07);
}
.card h2 { font-size: 20px; }
.sec-head { display: flex; align-items: center; gap: 11px; margin: 0 0 4px; }
.sec-ico {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  background: #e6f2ef; display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.sec-head h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.sec-sub { color: #52665c; font-size: 15px; margin: 2px 0 12px; }
.sec-head + .sec-sub { margin-left: 49px; margin-top: -2px; }
.sub-h { font-size: 16px; font-weight: 700; margin: 18px 0 6px; color: #2c4239; }
.mut { color: #52665c; }
.big { font-size: 17px; line-height: 1.6; }

/* ---- header ---- */
.p-head { display: flex; align-items: flex-start; gap: 10px; margin: 4px 2px 2px; }
.p-over { font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; color: #0e7c7b; text-transform: uppercase; }
.p-title { font-size: 27px; margin: 2px 0 8px; line-height: 1.15; }
.buddy-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 15px;
  box-shadow: 0 1px 5px rgba(31, 54, 46, .12);
}
.buddy-chip .bav { font-size: 20px; line-height: 1; }
.buddy-chip b { font-weight: 800; }
.buddy-chip .bmeta { color: #52665c; }
.p-lock { flex: none; margin-top: 4px; }

/* ---- buttons & fields (48px tap targets) ---- */
.btn { min-height: 48px; padding: 12px 22px; font-size: 16.5px; border-radius: 999px; }
.btn.small { min-height: 48px; padding: 11px 18px; font-size: 16px; }
.btn.secondary { background: #e9efec; color: #1e2b26; }
.btn.danger { background: #fbeae8; color: #a03328; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.btnrow .btn { margin: 0; }
input[type=password], input[type=text], input[type=number] {
  width: 100%; font-size: 17px; padding: 12px 13px; min-height: 48px;
  border: 2px solid #d8e2dd; border-radius: 12px; font-family: inherit; background: #fff;
}
input[type=password]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus {
  outline: none; border-color: #0e7c7b;
}
.flabel { display: block; font-size: 14px; font-weight: 700; color: #37493f; margin: 12px 0 4px; }
.frow { display: flex; gap: 10px; }
.frow > div { flex: 1; }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 16px; margin: 12px 0 4px; }
.checkline input { width: 22px; height: 22px; flex: none; }
.msg-ok { color: #256d3c; font-weight: 600; }
.msg-err { color: #a03328; font-weight: 600; }

/* ---- at-a-glance stats ---- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.stat { background: #f2f7f4; border-radius: 16px; padding: 14px 14px 12px; }
.stat .s-num { font-size: 29px; font-weight: 800; line-height: 1.1; color: #0b5f5e; }
.stat .s-lab { font-size: 14px; font-weight: 700; color: #37493f; margin-top: 3px; }
.stat .s-sub { font-size: 13.5px; color: #52665c; margin-top: 1px; }

/* ---- action (pending approvals) ---- */
.action-card { border: 2.5px solid #e8a33d; background: #fffaf0; }
.action-item {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1.5px solid #f0d9ae; border-radius: 16px; padding: 13px 14px; margin: 10px 0;
}
.action-item .a-emoji { font-size: 30px; flex: none; }
.action-item .a-name { font-weight: 800; font-size: 17.5px; line-height: 1.3; }
.action-item .a-cost { color: #52665c; font-size: 15px; }
.action-btns { display: flex; gap: 8px; flex: none; }
.action-btns .btn { margin: 0; }

/* ---- today's steps checklist ---- */
.tstep { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf2ef; }
.tstep:last-child { border-bottom: none; }
.tstep .t-ico {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: #eef3f1; color: #7d9186; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.tstep.done .t-ico { background: #43a35f; color: #fff; }
.tstep .t-name { font-weight: 700; font-size: 16.5px; }
.tstep .t-state { margin-left: auto; font-size: 14.5px; font-weight: 700; color: #7d9186; flex: none; }
.tstep.done .t-state { color: #256d3c; }

/* ---- last 7 days rows ---- */
.dayrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf2ef; }
.dayrow:last-child { border-bottom: none; }
.dayrow .d-date { width: 86px; flex: none; font-weight: 700; font-size: 15px; line-height: 1.25; }
.dayrow .d-date .d-type { display: block; font-weight: 600; font-size: 12.5px; color: #52665c; }
.daydots { display: flex; gap: 5px; flex: none; }
.ddot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d8e2dd;
  color: transparent; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ddot.on { background: #43a35f; border-color: #43a35f; color: #fff; }
.daybar { flex: 1; min-width: 44px; }
.daybar .bar { height: 9px; background: #edf2ef; border-radius: 6px; }
.daybar .bar > div { background: #0e7c7b; }
.dayrow .d-min { width: 74px; flex: none; text-align: right; font-size: 14px; color: #37493f; font-weight: 600; }
.legend { font-size: 13.5px; color: #52665c; margin-top: 8px; }

/* ---- topics ---- */
.topic { padding: 13px 0 12px; border-bottom: 1px solid #edf2ef; }
.topic:last-child { border-bottom: none; padding-bottom: 2px; }
.topic-head { display: flex; align-items: baseline; gap: 8px; }
.topic-head .t-emoji { font-size: 19px; }
.topic-head .t-title { font-weight: 800; font-size: 17px; }
.topic-head .t-acc { margin-left: auto; font-size: 14.5px; color: #37493f; font-weight: 600; flex: none; }
.topic .bar { height: 9px; background: #edf2ef; border-radius: 6px; margin: 8px 0 7px; }
.topic .bar > div { background: #0e7c7b; }
.mastery { font-size: 15px; color: #37493f; }
.mastery .m-unseen { color: #52665c; }

/* ---- generic rows / lists ---- */
.kv { padding: 9px 0; border-bottom: 1px solid #edf2ef; font-size: 16px; gap: 12px; }
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: #37493f; }
.kv b { text-align: right; }
.rw-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf2ef; }
.rw-row:last-child { border-bottom: none; }
.rw-row .r-emoji { font-size: 24px; flex: none; }
.rw-row .r-name { font-weight: 700; font-size: 16.5px; }
.rw-row .r-name .paused-tag { color: #a03328; font-weight: 600; font-size: 14px; }
.rw-row .r-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.rw-row .r-cost { font-weight: 800; color: #0b5f5e; white-space: nowrap; }
.status-tag { font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px; background: #eef3f1; color: #52665c; white-space: nowrap; }
.status-tag.given { background: #e7f4ea; color: #256d3c; }
.status-tag.declined { background: #fbeae8; color: #a03328; }
.formcard { background: #f7faf8; border-radius: 16px; padding: 16px 14px; margin: 12px 0 4px; box-shadow: none; }
.formcard .btnrow { margin-top: 14px; }

/* ---- ask transcript ---- */
.status-pill { display: inline-block; font-size: 14px; font-weight: 800; border-radius: 999px; padding: 5px 13px; }
.status-pill.on { background: #e7f4ea; color: #256d3c; }
.status-pill.off { background: #eef3f1; color: #52665c; }
.status-pill.noset { background: #fdf0da; color: #8a5a12; }
.qa-day { font-size: 13.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #0e7c7b; margin: 18px 0 4px; }
.qa { padding: 12px 0 13px; border-bottom: 1px solid #edf2ef; }
.qa:last-child { border-bottom: none; }
.qa .q-line { font-weight: 700; font-size: 16.5px; line-height: 1.45; }
.qa .q-line .q-ico { margin-right: 6px; }
.qa .a-line { font-size: 16.5px; line-height: 1.6; color: #2c4239; margin: 6px 0 0 27px; white-space: pre-line; }
.qa .qa-status { font-size: 13px; }

/* ---- writings ---- */
.writing { padding: 13px 0; border-bottom: 1px solid #edf2ef; }
.writing:last-child { border-bottom: none; padding-bottom: 2px; }
.writing .w-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.writing .w-kind { font-weight: 800; font-size: 16px; }
.writing .w-day { color: #52665c; font-size: 14px; }
.writing .w-text { font-size: 17px; line-height: 1.65; margin: 6px 0 0; color: #24352e; }

/* ---- empty states ---- */
.empty {
  background: #f7faf8; border-radius: 14px; padding: 16px 14px;
  text-align: center; color: #52665c; font-size: 15.5px; margin: 8px 0 2px;
}

/* ---- sessions ---- */
.sess-note { font-size: 14.5px; color: #52665c; }

/* ---- pin pad ---- */
.pin-wrap { max-width: 360px; margin: 7vh auto 0; }
.pinpad {
  max-width: none; margin: 0; text-align: center; padding: 30px 24px 26px;
}
.pinpad .pin-ico { font-size: 40px; }
.pinpad h1 { font-size: 25px; margin: 8px 0 6px; }
.pinpad .big { color: #37493f; }
.pinpad input[type=password] {
  text-align: center; font-size: 30px; letter-spacing: 14px; text-indent: 14px;
  padding: 13px 8px; border-radius: 14px; margin-top: 6px;
}
.pinpad .btn { width: 100%; margin: 14px 0 0; padding: 15px 22px; font-size: 18px; }
.pin-msg { min-height: 24px; font-weight: 600; margin: 10px 0 0; font-size: 16px; }
.pin-msg.err { color: #a03328; }