:root {
  color: #303650;
  background: #f4f0ff;
  --green: #7659dd;
  --green-dark: #5e45bd;
  --mint: #eee9ff;
  --pink: #f787b4;
  --lilac: #eee9ff;
  --line: #e9e4f4;
}
body { background: radial-gradient(circle at 85% 2%, #fbe9ff 0, transparent 30%), radial-gradient(circle at 8% 8%, #e8faff 0, transparent 29%), #f4f0ff; }

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chart-viewport:focus-visible, .increment-viewport:focus-visible, .record-row:focus-visible {
  outline: 3px solid #f49bbe;
  outline-offset: 2px;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-main { width: min(900px, calc(100% - 32px)); }
.nav-inner { max-width: 900px; }
.app-main { padding-top: 26px; }
.page-heading, .increment-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.page-heading > div:first-child { min-width: 0; }
.page-heading { margin-bottom: 16px; }
.page-heading h2 { color: #303650; font-weight: 800; }
.page-heading p, .chart-legend, .chart-note { color: #6e7894; }
.page-heading p { line-height: 1.35; }
.icon-button { flex: none; color: #167f9d; background: #e6f9ff; border-radius: 50%; box-shadow: 0 4px 12px #39bde324; }
.zoom-controls { align-items: center; gap: 2px; padding: 3px; border-color: #e9e3fa; border-radius: 14px; box-shadow: 0 3px 12px #7463bd0d; }
.zoom-controls button { display: grid; place-items: center; padding: 0; color: var(--green-dark); width: 40px; height: 40px; border-radius: 11px; line-height: 1; }
.zoom-controls span { color: #696486; min-width: 44px; font-size: 12px; font-variant-numeric: tabular-nums; }
.zoom-controls button:disabled { opacity: .36; }

.chart-viewport, .records-list, .empty-state {
  border: 1px solid var(--line);
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 12px 30px #6454a11a;
}
.empty-state { color: #4e5675; }
.empty-state span { color: #77819e; }
.chart-viewport { overflow: hidden; touch-action: none; overflow-anchor: none; }
.chart-frame { touch-action: none; }
.chart-viewport svg { overflow: hidden; }
.chart-viewport::-webkit-scrollbar, .increment-viewport::-webkit-scrollbar { height: 5px; }
.chart-viewport::-webkit-scrollbar-thumb, .increment-viewport::-webkit-scrollbar-thumb { background: #cfc4f6; border-radius: 8px; }
.chart-viewport::-webkit-scrollbar-track, .increment-viewport::-webkit-scrollbar-track { background: transparent; }
#chart-content { position: relative; }
.chart-frame { position: relative; }
.chart-y-axis, .increment-y-axis { position: absolute; top: 0; left: 0; width: 50px; height: calc(100% - 2px); pointer-events: none; background: #fffffff0; border-radius: 23px 0 0 23px; }
.chart-age-unit { position: absolute; top: 5px; right: 16px; color: #939bb4; font-size: 11px; pointer-events: none; background: #ffffffed; }
.chart-dot { cursor: pointer; outline: none !important; }
.chart-dot:focus-visible circle:last-child { fill: #6248c8; }
.chart-dot.is-selected circle:last-child { fill: #ef657d; }
.key.personal { border-color: #6950cf; }
.key.middle { border-color: #53c8e4; }
.key.reference { border-color: #c8b9ef; }
.chart-legend { justify-content: center; align-items: center; gap: 8px 16px; margin-top: 14px; line-height: 1.35; }
.chart-legend span { white-space: nowrap; }
.key { width: 16px; }
.chart-point-detail {
  position: absolute;
  width: min(240px, calc(100% - 24px));
  z-index: 2;
  padding: 13px 15px 14px;
  border: 1px solid #e6dcff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px #6755ae2e;
}
.chart-point-detail #point-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9895ac;
  font-size: 23px;
}
.point-age { color: #303650; font-size: 17px; font-weight: 750; padding-right: 28px; }
.point-date { margin-top: 3px; color: #6f7893; font-size: 12px; }
.point-values { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 13px; }
.point-values strong { font-size: 19px; color: var(--green-dark); }
.point-values span { font-size: 14px; color: #b94b7d; white-space: nowrap; }
.point-change { margin-top: 8px; color: #7b78a2; font-size: 12px; }

.record-row { grid-template-columns: minmax(0,1fr) minmax(120px,43%); align-items: center; border-color: #f0ebf8; padding: 17px 18px; cursor: pointer; }
.record-row:focus-visible { background: #f8f5ff; }
.record-age { margin-top: 0; color: #303650; font-size: 16px; font-weight: 750; line-height: 1.35; }
.record-when { margin-top: 5px; color: #727b99; font-size: 12px; font-weight: 400; }
.record-note { color: #727b99; }
.record-result { min-width: 0; white-space: normal; font-variant-numeric: tabular-nums; }
.record-height { color: var(--green-dark); }
.record-percent { color: #167f9d; }
.record-change { margin: 5px 0 0 auto; color: #8e8aaf; font-size: 12px; line-height: 1.35; }
.increment-section { margin-top: 26px; }
.increment-heading { margin-bottom: 14px; }
.increment-section h3 { margin: 0; color: #303650; font-size: 18px; line-height: 1.3; }
.range-controls { display: flex; flex: none; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.range-controls button { min-width: 56px; min-height: 38px; padding: 6px 9px; border: 0; border-radius: 9px; background: transparent; color: #696b8b; font-size: 12px; font-weight: 700; }
.range-controls button[aria-pressed="true"] { background: #def7ff; color: #167f9d; }
.increment-frame { position: relative; }
.increment-viewport, .increment-empty { border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: 0 12px 30px #6454a11a; }
.increment-viewport { height: 218px; overflow-x: auto; overflow-y: hidden; scrollbar-color: #cfc4f6 transparent; scrollbar-width: thin; touch-action: none; }
.increment-viewport svg { display: block; height: 218px; max-width: none; }
.increment-empty { padding: 48px 16px; color: #939bb4; text-align: center; font-size: 13px; }
.entry-actions { display: flex; align-items: center; gap: 12px; }
.entry-actions .primary-button { flex: 1; }
.entry-actions #entry-delete { flex: none; color: #b04b7c; background: #fff0f7; }
.bottom-nav { overflow: visible; border-top: 1px solid #eee8fb; background: #fffffff2; box-shadow: 0 -7px 30px #6956a11c; backdrop-filter: blur(16px); }
.nav-inner { display: grid; grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); height: 86px; align-items: stretch; padding: 0 6px; }
.bottom-nav button { color: #69748f; font-size: 15px; font-weight: 700; gap: 3px; }
.bottom-nav svg { box-sizing: content-box; width: 29px; height: 29px; padding: 7px; border-radius: 14px; }
.bottom-nav button:not(.fab) { width: 100%; min-height: 86px; padding: 8px 8px 7px; }
.bottom-nav button[aria-current="page"] { color: var(--green-dark); background: transparent; }
.bottom-nav button[aria-current="page"] svg { background: #f0ebff; }
.bottom-nav .fab { position: relative; inset: auto; align-self: start; justify-self: center; display: grid; place-items: center; width: 68px; height: 68px; min-height: 68px; margin-top: -27px; padding: 0 0 4px; border: 0; border-radius: 50%; background: linear-gradient(145deg, #967cec 0%, #8164e3 55%, #694bcf 100%); color: #fff; font-size: 42px; font-weight: 500; line-height: 1; box-shadow: 0 11px 20px #8168df59, 0 3px 8px #7960d22b; z-index: 1; }
.notice { background: #eee9ff; border-color: #d9ccff; color: #6048b8; }
.notice { top: max(12px, env(safe-area-inset-top)); }
dialog { background: #fff; box-shadow: 0 22px 70px #46318c3d; }
dialog::backdrop { background: #28214591; }
.sheet, .confirm-dialog { border-radius: 23px; }
.dialog-content h2 { color: #303650; }
.dialog-content label:not(.file-button) { color: #4b536f; }
.dialog-content input, .dialog-content select, .dialog-content textarea { border-color: #e2ddf2; border-radius: 12px; background: #fdfcff; color: #303650; }
.close-button { color: #777598; }
.confirm-dialog p { color: #616b89; }
.primary-button { background: linear-gradient(120deg, #785cde, #5d40c6); border-radius: 12px; box-shadow: 0 7px 17px #8062e83b; }
.secondary-button { background: #f0ebff; color: var(--green-dark); border-radius: 12px; }
.danger-button { background: #ed7399; border-radius: 12px; }
.settings-divider { background: var(--line); }
.settings-footnote { color: #979bb2; }
.login-sheet { width: min(420px, calc(100% - 32px)); }
.login-sheet .primary-button { width: 100%; }
.login-error { color: #af3f68; margin: 0 0 14px; font-size: 14px; }
.logout-button { display: block; width: 100%; margin-top: 18px; }

/* Keep desktop hover from changing colors; the controls are designed for touch. */
.icon-button:hover { background: #e6f9ff; }
.zoom-controls button:hover, .range-controls button:hover { background: transparent; }
.range-controls button[aria-pressed="true"]:hover { background: #def7ff; }
.chart-dot:hover circle:last-child { fill: #6950cf; }
.chart-dot.is-selected:hover circle:last-child { fill: #ef657d; }
.record-row:hover { background: #fff; }
.bottom-nav .fab:hover { background: linear-gradient(145deg, #967cec 0%, #8164e3 55%, #694bcf 100%); transform: none; }
.primary-button:hover { background: linear-gradient(120deg, #785cde, #5d40c6); transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .page-enter-left { animation: page-in-left .22s cubic-bezier(.22,1,.36,1) both; }
  .page-enter-right { animation: page-in-right .22s cubic-bezier(.22,1,.36,1) both; }
  @keyframes page-in-left { from { opacity: .72; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes page-in-right { from { opacity: .72; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
  .icon-button, .zoom-controls button, .range-controls button, .bottom-nav button, .record-row, .close-button, .fab { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1); }
  .bottom-nav .fab:active { transform: scale(.92); box-shadow: 0 5px 12px #8062e854; }
  .icon-button:active, .zoom-controls button:active, .range-controls button:active, .bottom-nav button:active { transform: scale(.91); }
  .record-row:active { background: #f4f0ff; }
  dialog[open] { animation: dialog-in .2s cubic-bezier(.22,1,.36,1) both; }
  dialog[open]::backdrop { animation: backdrop-in .2s ease-out both; }
  @keyframes dialog-in { from { opacity: .6; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 600px) {
  .app-main { padding-top: 20px; }
  .sheet { border-radius: 20px 20px 0 0; }
  .record-row { padding: 16px; grid-template-columns: minmax(0,1fr) minmax(116px,45%); }
  .record-age { font-size: 15px; }
  .record-height { font-size: 18px; }
  .record-change { font-size: 11px; }
  .increment-section { margin-top: 22px; }
  .increment-section h3 { font-size: 16px; }
  .zoom-controls button { width: 38px; height: 38px; }
  .zoom-controls span { min-width: 42px; }
  dialog.sheet, dialog.confirm-dialog { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: 100dvh; overflow-y: auto; border-radius: 20px 20px 0 0; }
  dialog.sheet .dialog-content, dialog.confirm-dialog .dialog-content { max-height: none; overflow: visible; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .dialog-heading { margin-bottom: 16px; }
  .dialog-content label:not(.file-button) { margin-bottom: 14px; }
  .settings-divider { margin: 18px 0 14px; }
  .settings-footnote { margin-top: 16px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sheet-up .28s cubic-bezier(.22,1,.36,1) both; }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
@media (max-width: 350px) {
  .page-heading, .increment-heading { gap: 7px; }
  .page-heading h2 { font-size: 18px; }
  .increment-section h3 { font-size: 14px; }
  .zoom-controls button { width: 34px; height: 38px; }
  .zoom-controls span { min-width: 36px; font-size: 11px; }
}