/* The app's palette, so the pages a subscriber lands on from the paywall look
   like the thing they just paid for. Values come straight from
   Sources/Design/Palette.swift. */

:root {
  --canvas: #F7F2EA;
  --surface: #FFFCF7;
  --ink: #241E19;
  --ink-secondary: #6A5D52;
  --ink-tertiary: #766A5C;
  --hairline: #E3D9C9;
  --accent: #C96A1E;
  --accent-ink: #A5511A;
  --accent-soft: #F6E4CE;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #14120F;
    --surface: #1E1B17;
    --ink: #F6F0E7;
    --ink-secondary: #B5A99C;
    --ink-tertiary: #8D8278;
    --hairline: #322C27;
    --accent: #E9913F;
    --accent-ink: #F0A65E;
    --accent-soft: #3A2A1A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main, footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header { padding-top: 2.5rem; padding-bottom: 1rem; }

.wordmark {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-ink);
  text-decoration: none;
}

main { padding-bottom: 3rem; }

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 1rem;
  font-weight: 650;
}

body.wide h1 { font-size: 2.3rem; max-width: 18ch; }

h2 {
  font-size: 1.12rem;
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-weight: 640;
}

h3 {
  font-size: 1rem;
  margin: 1.8rem 0 0.4rem;
  font-weight: 640;
}

p, li { color: var(--ink-secondary); }
h1 + p.lede { color: var(--ink); font-size: 1.1rem; }

strong { color: var(--ink); font-weight: 620; }

em { color: var(--ink); font-style: normal; font-weight: 600; }

a { color: var(--accent-ink); text-underline-offset: 0.18em; }

ul, ol { padding-left: 1.2rem; }
li { margin: 0.45rem 0; }

/* Unfilled legal blanks in a draft build. Loud on purpose. */
mark.todo {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  border: 1px dashed var(--accent);
}

footer {
  border-top: 1px solid var(--hairline);
  padding-top: 1.2rem;
  padding-bottom: 3rem;
  font-size: 0.85rem;
  color: var(--ink-tertiary);
}

footer a { color: var(--ink-tertiary); }

em.date, p em:first-child { color: var(--ink-tertiary); font-weight: 400; }

/* --- App Store button, tables, article rhythm --------------------------------
   Added with the first content page. The site previously had no button and no
   table styles, so an unstyled link was the only route to the App Store. The
   palette is the app's own (PR.accent / PR.canvas / PR.ink in Palette.swift),
   so the page and the product read as one thing. */

.cta { margin: 1.75rem 0; }

a.button {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  background: #C96A1E;
  color: #FFF8F0;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
a.button:hover { background: #A5511A; }
a.button:focus-visible { outline: 3px solid #C96A1E; outline-offset: 3px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(36, 30, 25, 0.14);
}
th { font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* Wide tables scroll rather than forcing the page sideways on a phone. */
main { overflow-x: auto; }

@media (prefers-color-scheme: dark) {
  a.button { background: #E9913F; color: #1B160F; }
  a.button:hover { background: #F0A65E; }
  th, td { border-bottom-color: rgba(246, 240, 231, 0.16); }
}

/* --- article furniture -------------------------------------------------------
   .checklist gives each socialization item room to breathe: title, how-to and
   stop rule are three lines that must stay visually separable, because the
   stop rule is the part that makes the list worth reading. */

ul.checklist { list-style: none; padding-left: 0; }
ul.checklist > li {
  padding: 0.85rem 0 0.85rem 0;
  border-bottom: 1px solid rgba(36, 30, 25, 0.12);
  line-height: 1.55;
}
ul.checklist > li:last-child { border-bottom: none; }
ul.checklist em { color: #A5511A; font-style: normal; font-weight: 600; }

.level {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #F6E4CE;
  color: #A5511A;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

p.note {
  padding: 0.8rem 1rem;
  border-left: 3px solid #C96A1E;
  background: rgba(201, 106, 30, 0.06);
  border-radius: 0 8px 8px 0;
}

@media (prefers-color-scheme: dark) {
  ul.checklist > li { border-bottom-color: rgba(246, 240, 231, 0.14); }
  ul.checklist em { color: #F0A65E; }
  .level { background: #3A2A1A; color: #F0A65E; }
  p.note { border-left-color: #E9913F; background: rgba(233, 145, 63, 0.10); }
}

/* The schedule builder. Two inputs on one line where there is room, stacked
   where there is not; the output table reuses the article table styling. */
#schedule-form,
#timer-form,
#night-form,
#sleep-form,
#gap-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
#schedule-form label,
#timer-form label,
#night-form label,
#sleep-form label,
#gap-form label { color: var(--ink-secondary); }
#schedule-form input,
#schedule-form select,
#timer-form input,
#timer-form select,
#night-form input,
#night-form select,
#sleep-form input,
#sleep-form select,
#gap-form input {
  font: inherit;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 0.4rem 0.6rem;
}
#schedule-form input:focus-visible,
#schedule-form select:focus-visible,
#timer-form input:focus-visible,
#timer-form select:focus-visible,
#night-form input:focus-visible,
#night-form select:focus-visible,
#gap-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#schedule-out table { margin-top: 0.5rem; }
#schedule-out caption {
  text-align: left;
  color: var(--ink-secondary);
  padding-bottom: 0.5rem;
}

/* The potty timer. Reuses the builder's form shell; the headline is the one
   thing a reader holding a puppy should be able to read from arm's length. */
#timer-form input[type="number"] { width: 5rem; }
.timer-headline {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 1.25rem 0 0.5rem;
  color: var(--accent-ink);
}
.timer-headline[data-tone="overdue"],
.timer-headline[data-tone="now"] { color: var(--accent); }

#gap-form input { width: 4.5rem; }

/* Calendar export under the generated day. A plain link-styled button: the
   table is the answer, this is a convenience. */
.ics-button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 0.45rem 0.8rem;
  margin-top: 0.75rem;
  cursor: pointer;
}
.ics-button:hover { border-color: var(--accent); }

/* "Print this checklist" — Search Console shows people looking for a
   printable socialization checklist. The page prints as one: tick boxes,
   no chrome. */
.lede-sub { color: var(--ink-secondary); }
.print-button {
  font: inherit; color: var(--accent); background: none; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 7px; padding: 0.3rem 0.7rem; margin-left: 0.4rem;
}
@media print {
  header, footer, nav, .print-button, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  ul.checklist { list-style: none; padding-left: 0; }
  ul.checklist li { break-inside: avoid; margin: 0 0 0.6rem; }
  ul.checklist li::before { content: "\2610  "; font-size: 1.1em; }
}

/* The feeding, crate and bladder tools share one form shell instead of growing
   the id list above again. */
.tool-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.tool-form label { color: var(--ink-secondary); }
.tool-form input,
.tool-form select {
  font: inherit;
  max-width: 100%;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 0.4rem 0.6rem;
}
.tool-form input[type="number"] { width: 5rem; }
.tool-form input:focus-visible,
.tool-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#feed-out caption,
#crate-out caption {
  text-align: left;
  color: var(--ink-secondary);
  padding-bottom: 0.5rem;
}

/* Bladder answer: three numbers side by side, stacked on a phone. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.stat {
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-ink);
}
.stat-label { display: block; color: var(--ink-secondary); font-size: 0.9rem; margin-top: 0.25rem; }

/* Hero art on the tool pages: full column width, never taller than it needs. */
img.hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.5rem 0 1.25rem;
  border-radius: 12px;
}

/* Weight page: the growth-curve chart and a wide table that scrolls inside
   itself on a phone rather than pushing the page sideways. */
figure.chart { margin: 1rem 0 1.5rem; }
figure.chart svg { width: 100%; height: auto; color: var(--ink); }
figure.chart figcaption { color: var(--ink-secondary); font-size: 0.9rem; margin-top: 0.4rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.th-sub { font-weight: 400; color: var(--ink-secondary); font-size: 0.85em; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.3rem; color: var(--ink); }
.legend i { display: inline-block; width: 0.9rem; height: 0.25rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }