/* Calm parent-facing surfaces, readable evidence cards and touch-sized controls. */
:root {
  --bg:#f7f8f3;
  --paper:#fff;
  --ink:#253c33;
  --muted:#778279;
  --green:#245b4c;
  --line:#e1e8df;
  --soft:#eaf0e5;
  --amber:#9c6d29;
  --red:#ae5042;
  --radius:18px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.65
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 15px;
  background:white;
  color:var(--ink);
  min-height:44px
}
button:hover {
  background:var(--soft)
}
button:disabled {
  opacity:.5;
  cursor:default
}
button:focus-visible,a:focus-visible {
  outline:3px solid #91b9a2;
  outline-offset:3px
}
a {
  color:var(--green);
  text-underline-offset:4px
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:30px;
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.4;
  margin-bottom:10px
}
h2 {
  font-size:21px;
  line-height:1.4;
  margin-bottom:14px
}
h3 {
  font-size:17px;
  line-height:1.5;
  margin-bottom:8px
}
p {
  margin-bottom:12px
}
small,.muted {
  color:var(--muted);
  font-size:13px
}
.hidden {
  display:none!important
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:248px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:30px 22px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  font-size:22px;
  font-weight:650
}
.brand img {
  width:43px;
  height:43px;
  border-radius:13px
}
.brand small {
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:1px
}
.child-badge {
  display:flex;
  gap:12px;
  align-items:center;
  margin:38px 0 24px;
  font-size:13px
}
.child-badge small {
  display:block
}
.avatar {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:#f1eadb;
  border-radius:50%;
  color:#87734c;
  font-size:19px
}
.sidebar nav {
  display:grid;
  gap:7px
}
.sidebar nav button {
  border:0;
  background:transparent;
  text-align:left;
  padding:13px 15px;
  font-size:14px
}
.sidebar nav button span {
  display:inline-block;
  width:29px;
  font-size:18px
}
.sidebar nav button.active {
  background:var(--soft);
  color:var(--green);
  font-weight:600
}
.sidebar-foot {
  margin-top:auto;
  font-size:12px;
  color:var(--muted)
}
.privacy-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#7da183;
  border-radius:50%;
  margin-right:6px
}
.text-button {
  border:0;
  color:var(--green);
  background:none;
  padding:6px 0;
  min-height:38px;
  font-size:13px
}
.sidebar-foot button {
  display:block
}
main {
  margin-left:248px;
  width:calc(100% - 248px);
  padding:0 42px 50px
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:82px;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
  font-size:13px
}
.connection {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted)
}
.connection button {
  font-size:12px;
  min-height:32px;
  padding:4px 12px
}
.mobile-settings {
  display:none
}
#content {
  max-width:1180px;
  margin:auto
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  color:var(--green);
  margin-bottom:12px
}
.page-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:25px
}
.page-intro p {
  color:var(--muted);
  margin-bottom:0;
  font-size:14px
}
.primary {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.primary:hover {
  background:#194637
}
.secondary {
  background:var(--soft);
  border-color:var(--soft);
  color:var(--green)
}
.danger {
  color:var(--red)
}
.hero {
  background:#eaf0e4;
  border-radius:var(--radius);
  padding:30px 34px;
  margin-bottom:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.hero h2 {
  font-size:24px;
  font-weight:550
}
.hero p {
  color:#5c7363;
  max-width:570px;
  font-size:14px;
  margin-bottom:20px
}
.hero-decoration {
  font-size:78px;
  color:#99b294;
  letter-spacing:-14px;
  padding-right:14px;
  font-family:Georgia,serif
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-bottom:25px
}
.stat {
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:20px
}
.stat strong {
  display:block;
  font-size:31px;
  font-weight:550;
  line-height:1.4
}
.stat small {
  display:block;
  margin-top:7px
}
.two-cols {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px
}
.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px
}
.card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}
.card-head h2,.card-head h3 {
  margin:0
}
.empty {
  padding:35px 12px;
  text-align:center;
  color:var(--muted)
}
.empty strong {
  display:block;
  color:var(--ink);
  margin-bottom:8px;
  font-weight:550
}
.empty p {
  font-size:13px;
  margin-bottom:12px
}
.tag {
  display:inline-block;
  background:var(--soft);
  border-radius:6px;
  padding:3px 8px;
  font-size:11px;
  color:var(--green);
  margin:2px 5px 2px 0
}
.tag.warn {
  background:#f8f0df;
  color:var(--amber)
}
.tag.gray {
  background:#f2f3ef;
  color:var(--muted)
}
.row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #edf0e9
}
.row:last-child {
  border-bottom:0
}
.row p {
  margin-bottom:2px
}
.row strong {
  font-size:14px
}
.row .meta {
  font-size:12px;
  color:var(--muted)
}
.notice {
  padding:11px 16px;
  background:#fbf4e6;
  color:#806a43;
  font-size:12px;
  border-radius:10px;
  margin-bottom:22px
}
.toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px
}
.toolbar select {
  width:auto
}
.toolbar .search {
  flex:1;
  min-width:160px
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 20px
}
label {
  min-width:0;
  display:block;
  font-size:13px;
  font-weight:550;
  margin-bottom:14px
}
input,textarea,select {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  padding:11px 12px;
  border:1px solid #dce3d8;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  outline:none;
  font-size:14px;
  margin-top:6px;
  min-height:45px
}
/* iPhone date controls have intrinsic widths; constrain the native editing surface. */
input[type=date] {
  appearance:none;
  -webkit-appearance:none;
  overflow:hidden
}
input[type=date]::-webkit-date-and-time-value {
  min-width:0;
  text-align:left
}
.capture-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px
}
.record-extra {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:12px
}
input:focus,textarea:focus,select:focus {
  border-color:#83aa95;
  box-shadow:0 0 0 3px #edf4ed
}
textarea {
  resize:vertical;
  min-height:85px
}
input[type=checkbox] {
  display:inline-block;
  width:18px;
  height:18px;
  min-height:0;
  vertical-align:middle;
  margin:0 7px 0 0
}
.full {
  grid-column:1/-1
}
.help {
  font-weight:400;
  color:var(--muted);
  font-size:12px;
  display:block;
  margin-top:5px
}
.form-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px
}
.task-card {
  border:1px solid var(--line);
  border-radius:13px;
  padding:20px;
  margin-top:16px;
  background:#fcfdf9
}
.task-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px
}
.task-head strong {
  font-size:14px
}
.task-head button {
  font-size:12px;
  padding:5px 10px;
  min-height:32px
}
.task-card details {
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:8px
}
summary {
  font-size:13px;
  cursor:pointer;
  color:var(--green);
  min-height:30px
}
details[open]>summary {
  margin-bottom:12px
}
.attachment-list {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:12px
}
.file-chip {
  display:flex;
  gap:7px;
  align-items:center;
  background:#f4f6ef;
  border-radius:9px;
  padding:8px 10px;
  font-size:12px;
  max-width:100%;
  overflow-wrap:anywhere
}
.file-chip button {
  border:0;
  background:none;
  min-height:24px;
  padding:0 4px
}
.timeline-card .excerpt {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  color:#526357;
  margin:14px 0
}
.timeline-date {
  font-size:12px;
  color:var(--muted)
}
.task-summary {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding:10px 0;
  font-size:13px
}
.task-summary div {
  max-width:70%;
  overflow-wrap:anywhere
}
.record-actions {
  display:flex;
  gap:12px;
  margin-top:13px
}
.record-actions button {
  font-size:12px;
  min-height:35px;
  padding:5px 11px
}
.radar svg {
  display:block;
  width:100%;
  max-width:420px;
  margin:auto
}
.radar-note {
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.dimension-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.dimension-card {
  background:#fff;
  border:1px solid var(--line);
  padding:17px;
  border-radius:13px
}
.dimension-card strong {
  font-size:14px
}
.dimension-card .rate {
  font-size:26px;
  display:block;
  margin-top:7px;
  color:var(--green)
}
progress {
  appearance:none;
  width:100%;
  height:5px;
  display:block;
  margin:10px 0;
  background:var(--soft);
  border:0;
  border-radius:10px
}
progress::-webkit-progress-bar {
  background:var(--soft);
  border-radius:10px
}
progress::-webkit-progress-value {
  background:#8ba990;
  border-radius:10px
}
.evidence-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  margin-bottom:14px
}
.evidence-links {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:12px
}
.evidence-links button {
  font-size:11px;
  min-height:30px;
  padding:4px 9px
}
.hypothesis {
  background:#f7f8f2;
  border-radius:10px;
  padding:13px;
  margin:10px 0;
  font-size:13px
}
.hypothesis p {
  margin:5px 0
}
.goal-card {
  border-left:4px solid #85a48b
}
.exercise {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px
}
.exercise .form-grid {
  margin-top:12px
}
.exercise textarea {
  min-height:60px
}
.report-title {
  display:flex;
  align-items:center;
  gap:12px
}
.import-area {
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:18px
}
.file-label {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  max-width:100%;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  font-weight:400;
  margin-bottom:0
}
.file-label input {
  display:none
}
.mobile-nav {
  display:none
}
.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  padding:13px 22px;
  background:#203d31;
  color:#fff;
  border-radius:12px;
  box-shadow:0 6px 25px #18372922;
  max-width:90vw;
  z-index:30;
  font-size:13px;
  white-space:pre-wrap
}
.error {
  color:var(--red);
  font-size:13px
}
dialog {
  border:1px solid var(--line);
  border-radius:22px;
  max-width:680px;
  width:calc(100% - 32px);
  padding:28px;
  max-height:85vh;
  overflow:auto;
  box-shadow:0 15px 70px #172f2a22
}
dialog::backdrop {
  background:#173d2a55;
  backdrop-filter:blur(3px)
}
#pair-dialog {
  max-width:430px
}
#pair-dialog button {
  width:100%
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}
.dialog-head h2 {
  margin:0
}
.dialog-head button {
  font-size:24px;
  min-height:38px;
  padding:0 12px
}
.pin-display {
  background:var(--soft);
  padding:13px;
  text-align:center;
  border-radius:12px;
  margin:16px 0;
  letter-spacing:5px;
  font-size:25px;
  color:var(--green)
}
.pin-display small {
  display:block;
  letter-spacing:0;
  font-size:11px
}
.setup-links a {
  display:block;
  margin-bottom:8px;
  overflow-wrap:anywhere
}
.path {
  font-family:ui-monospace,monospace;
  font-size:12px;
  overflow-wrap:anywhere;
  background:#f1f4ed;
  padding:10px;
  border-radius:8px
}
.detail-task {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px
}
.detail-task dt {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.detail-task dd {
  margin:2px 0 8px;
  font-size:14px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}
.photo-grid img {
  width:100%;
  border-radius:8px;
  max-height:260px;
  object-fit:contain;
  background:#f4f5ef
}
.link-note {
  font-size:12px;
  color:var(--muted)
}
/* On narrow screens, use a fixed safe-area-aware bottom navigation. */
@media(max-width:1000px) {
  .sidebar {
    width:210px;
    padding:25px 17px
  }
  main {
    margin-left:210px;
    width:calc(100% - 210px);
    padding:0 25px 45px
  }
  .two-cols {
    grid-template-columns:1fr
  }
  .hero-decoration {
    font-size:60px
  }
  .dimension-list {
    grid-template-columns:repeat(3,1fr)
  }
}
@media(max-width:680px) {
  :root {
    font-size:14px
  }
  .sidebar {
    display:none
  }
  main {
    margin:0;
    width:100%;
    padding:0 18px calc(100px + env(safe-area-inset-bottom))
  }
  .topbar {
    height:auto;
    min-height:65px;
    gap:10px;
    padding:12px 0;
    margin-bottom:22px
  }
  .connection {
    min-width:0;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end
  }
  #connection-status {
    flex-basis:100%;
    text-align:right
  }
  #page-label {
    flex-shrink:0
  }
  .mobile-settings {
    display:inline-flex
  }
  h1 {
    font-size:25px
  }
  .page-intro {
    align-items:flex-start
  }
  .page-intro .primary {
    font-size:12px;
    padding:8px 12px;
    white-space:nowrap
  }
  .hero {
    padding:24px;
    gap:10px
  }
  .hero h2 {
    font-size:21px
  }
  .hero-decoration {
    display:none
  }
  .stats-grid {
    gap:9px
  }
  .stat {
    padding:15px 12px
  }
  .stat strong {
    font-size:25px
  }
  .stat small {
    font-size:11px
  }
  .card {
    padding:20px 17px
  }
  .form-grid {
    grid-template-columns:minmax(0,1fr);
    gap:0
  }
  .form-grid label {
    margin-bottom:15px
  }
  .dimension-list {
    grid-template-columns:1fr 1fr
  }
  .dimension-card {
    padding:15px
  }
  .toolbar input,.toolbar select {
    font-size:14px
  }
  input,textarea,select {
    font-size:16px
  }
  .task-card {
    padding:16px 13px
  }
  .mobile-nav {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fffffff5;
    border-top:1px solid var(--line);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    z-index:10;
    backdrop-filter:blur(15px)
  }
  .mobile-nav button {
    flex:1;
    border:0;
    background:none;
    min-height:47px;
    padding:3px;
    font-size:19px;
    color:#829183
  }
  .mobile-nav button span {
    display:block;
    font-size:10px;
    margin-top:2px
  }
  .mobile-nav button.active {
    color:var(--green);
    font-weight:600
  }
  .toast {
    bottom:calc(90px + env(safe-area-inset-bottom))
  }
  dialog {
    padding:23px 18px
  }
  .notice {
    font-size:11px
  }
  .report-title {
    flex-wrap:wrap
  }
}