/* ════════════════════════════════════════════════════════════════════
   Portage's look, in one place: the homepage's colours, fonts and logo.
   Kaveh, 2026-10-03: "The homepage's look is the Portage standard."
   Every page links this file in its <head>, before its own <style>, so
   a page can only add to the look, never redefine it. Change a colour,
   a font or the logo here and every page follows: the homepage, About,
   for-camps, the parent app, the camp console, the counsellor app and
   the turn-off page. tests/shared-look.spec.js keeps it that way.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,600&family=Schibsted+Grotesk:wght@400;500;600&display=swap');

:root{
  /* neutrals — cool, no yellow undertone */
  --paper:#F1F4F1; --card:#FFFFFF; --ink:#0E2019; --ink2:#4C5D55; --ink3:#65716B;   /* measured: 4.59:1 on --paper, 5.09:1 on --card (was #8B9B93 at 2.63:1) */
  --line:#DFE7E1; --lineS:#C2CFC8;
  /* canopy — a surface, not just text: header band, tab bar, notif */
  --canopy:#0E3B2E; --canopyInk:#EDF3EF; --canopyDim:#8FB0A3; --canopyLine:#3A6154;
  --birch:#EDE7D6; /* accent ON canopy only — never on paper */
  /* accents */
  --spruce:#12876A; --spruceBg:#D5F2E5; --spruceDeep:#0B5C48;
  --lake:#2C86AC; --lakeBg:#DAEDF6; --lakeDeep:#14536F;
  --sun:#E9A032; --sunBg:#FBEBD3; --sunDeep:#855206; --sunLine:#E7CFA0;
  --berry:#C9503A; --berryBg:#FAE4DE; --berryDeep:#82301F;
  --ui:"Schibsted Grotesk",system-ui,sans-serif;
  --display:"Fraunces",Georgia,serif;
}

/* the ground every page stands on */
*{box-sizing:border-box;margin:0}
html,body{background:var(--paper)}
body{font-family:var(--ui);color:var(--ink);min-height:100vh}

/* the logo: portage-lockup.svg on paper, portage-lockup-reversed.svg on
   the canopy band, always in a .wordmark */
.wordmark{text-decoration:none;display:block;line-height:0;flex:0 0 auto}

/* the header's buttons (Sign in, FR, Sign out, the bell): white pills
   with a thin border, as on the homepage */
.lang,.signin{font:600 11.5px var(--ui);border:1.5px solid var(--line);background:var(--card);color:var(--ink2);border-radius:99px;padding:6px 12px;cursor:pointer;letter-spacing:.05em;min-height:32px;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.lang:hover,.signin:hover{border-color:var(--spruce);color:var(--spruceDeep)}
/* the account button: the person's initials in a round spruce badge,
   where "Sign out" was (Kaveh, 2026-10-04) */
.lang.acct{width:36px;height:36px;min-height:36px;padding:0;justify-content:center;border-radius:50%;background:var(--spruceBg);border-color:var(--spruceBg);color:var(--spruceDeep);font-size:13px;letter-spacing:.02em}
.lang.acct:hover{border-color:var(--spruce)}
/* the account sheet, the same in every app (the counsellor app has none
   of the field styles, so they are given here, inside the sheet only) */
.acctav{width:36px;height:36px;border-radius:50%;background:var(--spruceBg);color:var(--spruceDeep);font:700 13px var(--ui);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.acctsheet .fgl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin:10px 0 0}
.acctsheet .llab{font-size:12px;color:var(--ink2);display:block;margin-top:12px;font-weight:500}
.acctsheet .lin{width:100%;font:400 15px var(--ui);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;margin-top:8px;min-height:46px}
.acctsheet .lsheet{margin-top:14px;width:100%;font:600 14px var(--ui);color:#fff;background:var(--spruce);border:none;border-radius:11px;padding:13px;cursor:pointer;min-height:48px}
.acctsheet .lsheet:disabled{opacity:.6}
.acctsheet .lsheet.acctout{background:var(--card);color:var(--ink);border:1.5px solid var(--line);margin-top:22px}
.acctsheet .toast{margin-top:10px}
.acctmail{font:600 15px var(--ui);color:var(--ink);margin-top:6px;overflow-wrap:anywhere}
#modal.still .scrim,#modal.still .sheet{animation:none}

/* the apps' header row (logo, then the pills) never runs off the screen:
   on a screen too narrow for both, the pills move under the logo */
.hbar{flex-wrap:wrap;row-gap:8px}
.hdr-right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;margin-left:auto}

/* iPhone Safari zooms in when a field whose text is under 16px is
   tapped, and stays zoomed after it: the page then looks wider than the
   screen, the FR pill is cut off and the page slides sideways (Kaveh's
   iPhone, signing in from Kids, 2026-10-03). On phones and tablets every
   field is 16px. !important: the apps size their fields in their own
   <style>, which comes after this file. */
@media (max-width:1023px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px !important}
}

/* An empty date of birth looks empty. Safari on a Mac draws today's date
   in grey in an empty date field, which reads as already filled in
   (Kaveh, 2026-10-04). A required date field with no date (:invalid)
   hides those digits until it is tapped; a half-typed date is :invalid
   too, and shows again on the next tap. One rule per selector: a browser
   that doesn't know one of these drops only that rule. */
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit{color:transparent;opacity:0}
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit-fields-wrapper{color:transparent}
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit-month-field{color:transparent}
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit-day-field{color:transparent}
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit-year-field{color:transparent}
input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit-text{color:transparent}

/* page titles, and the line under them, at the homepage's sizes */
h1{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.12}
.sub{font-size:14.5px;color:var(--ink2);line-height:1.6}
@media (min-width:768px){ h1{font-size:38px} .sub{font-size:15.5px} }
@media (min-width:1100px){ h1{font-size:44px} }