/* Soft Dawn tokens and base styles, shared by all pages.
   Page layout stays inline in each HTML file, mirroring the design mocks. */

:root {
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --surface-alt: #F2EFE9;
  --border: #EFEAE0;
  --text: #29252E;
  --text-2: #8A8494;
  --text-faint: #B4AEBE;
  --accent: #C25E3C;
  --accent-2: #9E4B2F;
  --accent-soft: #F4E7DF;
  --on-accent: #FFFFFF;
  --mark-dot: #C7C1B4;
  --nav-bg: rgba(251, 248, 243, 0.82);
  --shadow: 0 12px 34px rgba(41, 37, 46, 0.08);
  --shadow-sm: 0 6px 18px rgba(41, 37, 46, 0.06);
  --mod-money: #6F7D4A;
  --mod-habits: #3E6B67;
  --mod-todos: #B0782A;
  --mod-shopping: #2E8B84;
  --mod-mood: #D9A036;
  --mod-sleep: #5A7290;
  --mod-fitness: #A6484F;
  --mod-ent: #85566E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151D;
    --surface: #201D29;
    --surface-alt: #2A2735;
    --border: #2C2937;
    --text: #F0EDF6;
    --text-2: #9C96A8;
    --text-faint: #6D6779;
    --accent: #E08A66;
    --accent-2: #EDA588;
    --accent-soft: #33241F;
    --on-accent: #17151D;
    --mark-dot: #4A4654;
    --nav-bg: rgba(23, 21, 29, 0.82);
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
    --mod-money: #9BAC72;
    --mod-habits: #6BA39D;
    --mod-todos: #D6A24E;
    --mod-shopping: #63BDB4;
    --mod-mood: #E5BA5C;
    --mod-sleep: #8AA3C2;
    --mod-fitness: #D07680;
    --mod-ent: #B586A0;
  }
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Albert Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
::selection { background: var(--accent-soft); }

/* The privacy page's sticky table of contents only makes sense beside the
   article. Once the layout stacks to one column it overlaps the body text, so
   drop it on narrow screens. */
@media (max-width: 720px) {
  .toc { display: none; }
  /* Safety net: on phones nothing should scroll sideways. The device frames
     scale via script to fit, but this guarantees no horizontal scrollbar even
     if that script is ever blocked. No sticky elements exist at this width. */
  html { overflow-x: clip; }
}

/* Responsive device frames. The phone art is authored at a fixed pixel size
   (--dw x --dh), so it can't reflow; instead .device-fit takes the available
   width (never exceeding the art) and holds the aspect ratio, and the art is
   scaled uniformly to fill it. A tiny script sets --s from the box width, so
   proportions stay exact at any screen size. Without the script it renders at
   natural size (--s defaults to 1). */
.device-fit {
  position: relative;
  width: min(calc(var(--dw) * 1px), 100%);
  aspect-ratio: var(--dw) / var(--dh);
  margin: 0 auto;
}
.device-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--dw) * 1px);
  transform-origin: top left;
  transform: scale(var(--s, 1));
}

/* iPhone device frame (from the design kit's ios-frame component).
   Set --ps to width/402 on the .phone element; chrome scales with it.
   Screens stay light-themed in dark mode, matching the mock art. */
.phone {
  position: relative;
  overflow: hidden;
  background: #F2F2F7;
  border-radius: calc(48px * var(--ps));
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, system-ui, sans-serif;
}
.phone-island {
  position: absolute;
  top: calc(11px * var(--ps));
  left: 50%;
  transform: translateX(-50%);
  width: calc(126px * var(--ps));
  height: calc(37px * var(--ps));
  border-radius: calc(24px * var(--ps));
  background: #000;
  z-index: 50;
}
.phone-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(139px * var(--ps));
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.25);
  z-index: 60;
  pointer-events: none;
}
.phone-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  gap: calc(154px * var(--ps));
  align-items: center;
  justify-content: center;
  padding: calc(21px * var(--ps)) calc(24px * var(--ps)) calc(19px * var(--ps));
  box-sizing: border-box;
}
.phone-status > span {
  flex: 1;
  height: calc(22px * var(--ps));
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-time {
  font-weight: 590;
  font-size: calc(17px * var(--ps));
  color: #000;
}
.phone-glyphs { gap: calc(7px * var(--ps)); }
.ps-cell { width: calc(19px * var(--ps)); height: calc(12px * var(--ps)); }
.ps-wifi { width: calc(17px * var(--ps)); height: calc(12px * var(--ps)); }
.ps-batt { width: calc(27px * var(--ps)); height: calc(13px * var(--ps)); }

/* Store badge placeholders, swapped for official artwork at launch */
.badge-slot {
  width: 172px;
  height: 54px;
  border: 1.5px dashed var(--text-faint);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 600;
}
.badge-slot i { font-size: 20px; }