/* Write With Janet — parent-facing stylesheet.
 *
 * ONE stylesheet owns the palette, the type and the parent chrome. Never put a
 * colour or a font stack in a template — add a token here and reference it with
 * var(). A second :root block in a template is the defect this file exists to
 * prevent.
 *
 * Approved design: variant A of the dog-register prototype (Jamie, 2026-07-20),
 * restyled into the marketing site's "Revision" language (Jamie, 2026-09-07,
 * after reacting to the six-screen prototype). The palette is sampled from the
 * crayon logo and the pen value is measured from Janet's own blue Paper Mate
 * Flair — see docs/public-site/site/style.css, which is the sibling of this file
 * and must not drift from it.
 *
 * gh #78's four dog moments are DELIBERATELY KEPT, not dropped in the restyle:
 * the crayon badge + tagline in the header, the hero banner above the H1, the
 * paw divider between the big moves of the form, and one puppy at the submit
 * moment. They are restyled, never removed — that was a ruling, not a default.
 *
 * THE PEN IS RESERVED. It marks a revision — something a family already agreed
 * to that has since changed — and nothing else. It is never a warning, never an
 * accent, never decoration. Warnings use --warn.
 *
 * Phone-first; the desktop overrides live at the bottom.
 */

/* ---------- self-hosted faces ---------------------------------------------
 * Latin subsets only, served from our own static files rather than fetched
 * from Google at request time (Jamie, 2026-09-07). Parent screens are where
 * families type a child's name, and a third party on that render path is both
 * a privacy question and a dependency we do not control.
 *
 * A browser downloads a face only when something actually renders in it, so a
 * typical parent page pulls Bricolage + Newsreader + DM Mono; the Caveat hand
 * and the Newsreader italic arrive only on the screens that use them.
 *
 * To refresh: fetch the Google CSS with a modern UA, keep the blocks whose
 * unicode-range covers U+0000-00FF, download those woff2 and update below.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  font-stretch: 100%;
  src: url("fonts/bricolage-grotesque-400_800.c47ac31e5437.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-400.b4ddae058212.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-500.ecb3fd43cbea.woff2") format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/newsreader-300_600-italic.6d201901085f.woff2") format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/newsreader-300_600.0a301b6df4c7.woff2") format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  /* Caveat is a variable font: Google serves ONE file for 500 and 600, and
     the two downloads were byte-identical. Declared as a range so the 600
     actually renders at 600 off the weight axis instead of pointing at a
     duplicate of the 500. */
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/caveat-500_600.1fde3bbfa795.woff2") format('woff2');
}

:root {
  /* Palette — sampled from the crayon logo, verbatim from the public site. */
  --paper: #FBEFE8;        /* the crayon page                     */
  --cream: #F6D8C8;        /* the mark's own ground; banded areas  */
  --peach: #E0A791;        /* hairlines, the paw                   */
  --ink: #241F1B;          /* graphite                             */
  --green: #12796A;        /* the J's turquoise, deepened          */
  --green-dark: #0C5F53;
  --yellow: #EFC03A;       /* the pencil                           */
  --pink: #E0A791;
  --text: #241F1B;
  --muted: #6B6058;
  --line: #E0A791;

  /* Janet's blue Paper Mate Flair, measured from a real mark on white paper.
     Reserved for revision marks. See the note at the top of this file. */
  --pen: #1A70C6;

  /* Type. --sans and --serif keep their names because templates reference
     them; the values are the new pairing. --meta is the small-label face. */
  --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --meta: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;

  /* Derived / semantic tokens. Parent templates reference THESE, never a hex. */
  --card: #FFFCF8;
  --field-bg: #FFFCF8;
  /* Field outlines use --field-line, NOT the hairline --line used for dividers
     (Jamie, 2026-08-02: a hairline box was invisible at an angle, so the
     comments box read as if it weren't there). --field-line clears the 3:1
     non-text contrast bar an input boundary has to meet. Keep it this dark —
     this ruling outranks the hairline the rest of this design uses. */
  --field-line: #8C8371;
  --accent: var(--green);
  --accent-bg: #E7F1EE;
  /* One step lighter than --accent-bg: a tinted CARD ground (gh #626's
     open-slot cards) that --accent-bg chips still read against. */
  --accent-bg-soft: #F2F8F6;
  --warn: #8A5A2C;
  --warn-bg: #FDF3E3;
  --warn-line: #EFC03A;
  --warn-ink: #6B4D10;
  --danger: #A33E52;
  --danger-bg: #FBE6EA;
  --highlight: #FBEBBE;
  --chip-bg: #F3E3D8;
  /* Draft / not-yet-sent state on the public schedule. Deliberately outside the
     crayon hues so "provisional" reads as neutral rather than as a warning —
     and deliberately violet-grey rather than blue, so a provisional chip can
     never be mistaken for a pen mark. */
  --draft-bg: #EAE7F0;
  --draft-line: #A9A3BC;
  --draft-ink: #4E4866;
  --track-off: #D9CFC6;
  --scrim: rgba(36, 31, 27, 0.45);
  /* This design sits flat on paper: a rule does the work a shadow used to.
     Photographs keep a lift, because a photo is an object on the page. */
  --shadow: none;
  --shadow-lift: 0 6px 20px rgba(60, 40, 10, 0.12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--green); }

h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 5.5vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
}
h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 26px 0 8px;
}
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
/* Small print is set in the label face, not in shrunken body copy. */
p.lede, .subtitle {
  font-family: var(--meta); color: var(--muted);
  font-size: 12.5px; line-height: 1.7; margin: 0 0 20px;
}

/* ---------- header: the crayon badge + the one tagline ---------- */
.wwj-head { background: var(--paper); border-bottom: 1px solid var(--line); }
/* Full-bleed on purpose: parent pages use three different content widths (the
   640px .wrap, the register form's 900px layout, the schedule's wide grid), so
   a centred header column would sit visibly off-axis on two of the three. */
.wwj-head .head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px;
}
.wwj-head .brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
/* The mark's own crayon ground is this page's ground, so it needs no frame. */
.wwj-head .brand img { height: 34px; width: 34px; display: block; }
.wwj-head .brand b {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  letter-spacing: -0.02em; display: block; line-height: 1.2;
}
.wwj-head .brand .tag {
  display: block; font-family: var(--meta); font-style: normal;
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); line-height: 1.4;
}
/* Second header row: the parent nav sits with the badge, not in the content
   column, so every parent page (base-extending or standalone) has one chrome. */
.wwj-head .nav-in { padding: 0 16px; }
.wwj-head nav.parent-nav { border-bottom: 0; margin-bottom: 0; padding-bottom: 8px; }

/* ---------- hero: the dogs-couch banner above the H1 ---------- */
.wwj-hero { background: var(--cream); border-bottom: 1px solid var(--line); }
/* 900px matches the register form's .layout so the banner and the first card
   share one left edge. */
.wwj-hero .in { max-width: 900px; margin: 0 auto; padding: 18px 16px 22px; }
.hero-photo {
  display: block; width: 100%; height: 110px; object-fit: cover;
  object-position: 50% 62%; border-radius: 0; margin-bottom: 16px;
  box-shadow: var(--shadow-lift);
}

/* ---------- paw divider between the big moves of the form ----------
   Kept per gh #78 — the restyle changes its colour, never its presence. The
   paw is an inline data-URI SVG (four toes + a pad) in --peach's value, so
   there is no extra asset to ship. The hex is repeated here because a custom
   property cannot be interpolated into a data URI; change both together. */
.paw-rule {
  border: 0; height: 26px; margin: 26px 0 18px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23e0a791'><ellipse cx='27' cy='38' rx='9.5' ry='13' transform='rotate(-18 27 38)'/><ellipse cx='45' cy='27' rx='9.5' ry='13.5' transform='rotate(-7 45 27)'/><ellipse cx='64' cy='30' rx='9.5' ry='13.5' transform='rotate(9 64 30)'/><ellipse cx='79' cy='44' rx='9' ry='12.5' transform='rotate(22 79 44)'/><path d='M52 46c14 0 24 10 24 21s-11 15-24 15-24-4-24-15 10-21 24-21z'/></g></svg>"),
    linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent);
  background-repeat: no-repeat, no-repeat;
  background-size: 22px 22px, 100% 2px;
  background-position: center center, center center;
}

/* ---------- the submit moment: one puppy, above the buttons ---------- */
.submit-card {
  background: var(--cream); border: 0; border-top: 2px solid var(--peach);
  border-radius: 0; padding: 18px 0 4px; margin-top: 20px;
}
.submit-dog { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.submit-dog img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 3px solid var(--card); box-shadow: var(--shadow-lift);
}
.submit-dog p { margin: 0; font-size: 15px; font-style: italic; color: var(--muted); }

/* ---------- parent chrome ---------- */
.wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 24px; }
body.has-tabbar .wrap { padding-bottom: 84px; }

/* Parent nav (#34 item 13): logged-in parents get the full menu; anonymous
   visitors (public schedule, token-gated proposal pages) see Register +
   Schedule only. Phone-first: one wrapping row of plain links. */
nav.parent-nav {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--meta); font-size: 12px; letter-spacing: 0.05em;
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
nav.parent-nav a {
  text-decoration: none; font-weight: 500; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
nav.parent-nav a:hover { text-decoration: none; color: var(--green); border-bottom-color: var(--green); }
nav.parent-nav a.profile { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
nav.parent-nav a.profile svg { width: 18px; height: 18px; display: block; }
/* When Profile is present it owns the margin-left:auto push; Log out then
   sits directly after it rather than claiming its own auto-margin. */
nav.parent-nav a.profile + a.logout { margin-left: 0; }
nav.parent-nav a.logout { margin-left: auto; font-weight: 400; color: var(--muted); }

/* Django messages (#34 item 17, parent side): rendered at the very top of
   the content column so they're visible on load without scrolling. */
ul.messages { list-style: none; padding: 0; margin: 0 0 16px; font-family: var(--meta); }
ul.messages li {
  background: var(--accent-bg); border: 0; border-left: 3px solid var(--green);
  padding: 10px 14px; border-radius: 0; margin-bottom: 10px;
  font-size: 12.5px; line-height: 1.7;
}
ul.messages li.warning { background: var(--warn-bg); border-left-color: var(--warn-line); color: var(--warn-ink); }
ul.messages li.error { background: var(--danger-bg); border-left-color: var(--danger); }

/* Bottom icon tab bar (#35): parent-portal chrome once logged in, on every
   parent page — Home / Charges & Payments / Schedule / Register. */
nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--paper); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); z-index: 40;
  font-family: var(--meta);
}
nav.tabbar .tab {
  text-align: center; padding: 10px 2px 12px; font-size: 10px;
  letter-spacing: 0.04em; text-decoration: none; color: var(--muted);
}
nav.tabbar .tab.on { color: var(--green); font-weight: 500; }
nav.tabbar .tab .ic { display: block; font-size: 16px; }

/* ---------- shared parent surfaces ----------
   Cards lose their float-above-the-page chrome: on a paper ground a rule does
   the same job more quietly, and it stops every screen reading as a stack of
   boxes. --shadow is none for exactly this reason. */
.card {
  background: transparent; border: 0; border-top: 2px solid var(--peach);
  border-radius: 0; padding: 16px 0 4px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.card > h2:first-child { margin-top: 0; }

label {
  display: block; font-family: var(--meta); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 6px; color: var(--muted);
}
.field { margin-bottom: 16px; }
.field-hint, .hint { font-family: var(--meta); font-size: 11.5px; line-height: 1.7; color: var(--muted); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%; padding: 10px 11px; border: 1.5px solid var(--field-line);
  border-radius: 2px; font-size: 16px; font-family: var(--serif);
  background: var(--field-bg); color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px rgba(26, 112, 198, 0.25);
}
textarea { min-height: 70px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

button.primary, .btn {
  background: var(--green); color: var(--paper); border: none;
  padding: 11px 22px; border-radius: 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button.primary:hover, .btn:hover { background: var(--green-dark); color: var(--paper); }
button.secondary, .btn.ghost {
  background: transparent; color: var(--ink); border: 0;
  box-shadow: inset 0 0 0 1.5px var(--line);
  padding: 11px 22px; border-radius: 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button.secondary:hover, .btn.ghost:hover { background: var(--cream); color: var(--ink); }

/* Keyboard focus is visible in the pen, the one place it is used as chrome
   rather than as a revision mark: it is transient and cannot be confused with
   content. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--pen); outline-offset: 3px; border-radius: 1px;
}

/* ---------- a revision, when something a family agreed to has changed ------
   .was is the superseded value; the stroke is drawn rather than a CSS
   line-through, because a felt-tip does not draw a straight uniform line.
   Use ONLY for a genuine change to an agreed placement, time or amount. */
.was { position: relative; display: inline-block; color: var(--muted); text-decoration: none; }
.was .pen-strike {
  position: absolute; left: -4px; top: 0; width: calc(100% + 8px); height: 100%;
  overflow: visible; pointer-events: none;
}
.was .pen-strike path {
  fill: none; stroke: var(--pen); stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.was .pen-strike .ink { stroke-width: 2.5; opacity: 0.95; }
.was .pen-strike .bear { stroke-width: 3.6; opacity: 0.34; }
.revised-note {
  font-family: var(--hand); font-size: 1.15rem; color: var(--pen);
  transform: rotate(-2deg); margin: 8px 0 0;
}

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .wwj-head .head-in, .wwj-head .nav-in, .wwj-hero .in { padding-left: 24px; padding-right: 24px; }
  .wwj-hero .in { padding-top: 28px; padding-bottom: 30px; }
  .hero-photo { height: 180px; }
  .submit-dog img { width: 78px; height: 78px; }
}