/* SelfiePaw UI. Every value comes from brand/project/tokens.json.
   Surfaces rescope the tokens, so children never choose a color for themselves. */
.a {
  --marigold: #FFC41F; --on-marigold: #14213D;
  --lead: #1747B5; --on-lead: #FFFBF2;
  --sky: #CFE0FF; --navy: #14213D;
  --paper-constant: #FFFBF2; --paper: #FFFBF2; --paper-raised: #FFF3D6;
  --ink: #14213D; --muted: #55607A;
  --line: #E6DFC9; --line-strong: #7B8499;
  --success: #0E6B46; --danger: #B42318;
  --night: #0E1930; --scrim: rgba(14, 25, 48, 0.86); --scrim-soft: rgba(14, 25, 48, 0.38);
  --preview: #E9E2D2;
  position: relative; overflow: hidden; box-sizing: border-box; background: var(--paper); color: var(--ink);
  font: 400 17px/24px Figtree, -apple-system, system-ui, sans-serif;
}
.a * { box-sizing: border-box; }
.a.dark {
  --lead: #8FB4FF; --on-lead: #14213D;
  --sky: #1E335C; --navy: #22355F;
  --paper: #0E1930; --paper-raised: #16264A;
  --ink: #FFF8E7; --muted: #B4BFD6;
  --line: #2B3D66; --line-strong: #6F7FA3;
  --success: #6FDDAA; --danger: #FF9B8A;
}

/* Surfaces */
.paper { background: var(--paper); color: var(--ink); }
.raised { background: var(--paper-raised); color: var(--ink); }
.sky { background: var(--sky); color: var(--ink); }
.mari { --ink: #14213D; --muted: #14213D; --line-strong: #14213D; background: var(--marigold); color: var(--on-marigold); }
.navy { --ink: #FFF8E7; --muted: #B4BFD6; --line: #2B3D66; --line-strong: #6F7FA3; --lead: #8FB4FF; --navy: #22355F; background: var(--night); color: var(--paper-constant); }
/* Stands in for the camera feed or a real photo. It never ships. */
.preview, .field { background: var(--preview); color: #14213D; }

/* Screen layout. 390 x 844: status bar 47, home indicator 34, content margin 16 above it. */
.pad { padding: 72px 24px 50px; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; flex: none; }
.top { position: absolute; left: 20px; right: 20px; top: 64px; display: flex; align-items: center; justify-content: space-between; }

/* Type: app-hero, app-title-xl, app-title-lg, heading, body, small */
.t0 { margin: 0; font: 600 88px/84px Fredoka, system-ui, sans-serif; letter-spacing: -0.01em; }
.t1 { margin: 0; font: 600 64px/64px Fredoka, system-ui, sans-serif; letter-spacing: -0.01em; }
.t2 { margin: 0; font: 600 40px/44px Fredoka, system-ui, sans-serif; text-wrap: balance; }
.t3 { margin: 0; font: 600 20px/26px Fredoka, system-ui, sans-serif; }
.b { margin: 0; }
.m { margin: 0; color: var(--muted); font-size: 15px; line-height: 20px; }
.count { font: 600 88px/84px Fredoka, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.time { font: 600 17px/22px Figtree, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.value { flex: none; font: 600 18px/24px Fredoka, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Actions */
.btn { display: block; width: 100%; height: 60px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--marigold); color: var(--on-marigold); font: 600 17px/22px Figtree, system-ui, sans-serif; }
.btn.ink { background: var(--ink); color: var(--paper-constant); }
.link { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--lead); font: 600 17px/22px Figtree, system-ui, sans-serif; }
.mari .link { color: var(--on-marigold); }
.tool { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--paper-raised); color: var(--ink); }
.tool.on { background: var(--marigold); color: var(--on-marigold); }
.tool.quiet { background: none; color: var(--muted); }
.tool.bare { background: none; color: inherit; margin-left: -10px; }
.navy .tool { background: var(--navy); color: var(--paper-constant); }
.xabs { position: absolute; right: 16px; top: 60px; z-index: 1; }

/* Over the camera feed: always a scrim, so they read on any photo */
.word { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 600 20px/26px Fredoka, system-ui, sans-serif; }
.chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--scrim); color: var(--paper-constant); font: 600 15px/20px Figtree, system-ui, sans-serif; }
.chip.on { background: var(--marigold); color: var(--on-marigold); }
.chip.cue { display: flex; align-items: center; gap: 8px; white-space: nowrap; max-width: 240px; }
.round { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 999px; background: var(--scrim); color: var(--paper-constant); }
.status { display: flex; justify-content: center; }
.status > span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--scrim); color: var(--paper-constant); font: 600 15px/20px Figtree, system-ui, sans-serif; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--scrim); }
.seg button { min-width: 72px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--paper-constant); font: 600 15px/20px Figtree, system-ui, sans-serif; }
.seg button.on { background: var(--marigold); color: var(--on-marigold); }
.hint { --ink: #14213D; --lead: #1747B5; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #FFFBF2; color: #14213D; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }

/* Lists */
.line { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; }
.line strong { display: block; font: 600 18px/24px Fredoka, system-ui, sans-serif; }
.line .m { display: block; }
.rowmain { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }

/* Tiles */
.tile { position: relative; overflow: hidden; border-radius: 16px; }
.tile img { position: absolute; left: 50%; bottom: -8%; width: 72%; transform: translateX(-50%); }
.badge { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #14213D; color: #FFC41F; }

/* Stand-in for SwiftUI Toggle */
.toggle { flex: none; width: 52px; height: 32px; padding: 3px; border-radius: 999px; background: var(--marigold); display: flex; justify-content: flex-end; }
.toggle i { width: 26px; height: 26px; border-radius: 999px; background: #14213D; }
.toggle.off { background: var(--line-strong); justify-content: flex-start; }
.toggle.off i { background: #FFFBF2; }
.modes { display: flex; justify-content: center; gap: 20px; font: 600 15px/20px Figtree, system-ui, sans-serif; }

/* Pets */
.avatar { flex: none; display: block; position: relative; overflow: hidden; border-radius: 999px; }
.avatar img { display: block; margin-left: auto; margin-right: auto; transform: translateX(-2px); }
.chip.pet { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; }
.pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font: 600 15px/20px Figtree, system-ui, sans-serif; }
.pick.on { border-color: var(--on-marigold); background: var(--marigold); color: var(--on-marigold); }

/* Sheets and system dialogs: inherit the theme of the app, not of the frame behind */
.sheet { background: var(--paper); color: var(--ink); }
.preview.dark .sheet, .sheet { color: var(--ink); }
.dlg { display: block; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--lead); font: 400 17px/22px Figtree, system-ui, sans-serif; }
.dlg.sheet { background: var(--paper); }
.a.dark .tile.navy { background: var(--navy); }
.seg.zoom button { min-width: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }