/* Shared house look (stage: the six doors). :root variables and the .card
   style, moved out of every page per the build brief, so there is one place
   that defines them. Every page links this file and keeps its own layout
   and component styles local (FAMILY-APP-SCREENS.md: the look stays
   provisional, decided by eye later; this file changes nothing about it,
   it only stops six copies of the same rules drifting apart). */

:root {
  --ink: #2b2a2e;
  --soft: #6d6a6e;
  --bg: #f7f4ee;
  --card: #fffdf8;
  --line: #ebe4d8;
  --accent: #8b6b9e;
  --accent-wash: #ece4f0;
  --good: #3f8a5a;
  --bad: #b34f52;
  --warn: #d9a441;
  --unknown: #8b879a;
  --chipbg: #f1ece2;
  /* Colour band, NAT-RULED 9 Sep 2026 (FAMILY-APP-SCREENS.md, Sitting 6:
     "i love the colour band options"): cards and section rows round up
     to 20px, the band-to-sheet seam is a touch deeper at 24px. */
  --radius: 20px;
  --radius-sheet: 24px;
  /* DM Serif Display for page titles and card headings, Nunito Sans for
     the rest (the ruling's own words). Fraunces and Atkinson Hyperlegible
     stay self-hosted below, unused, in case a later look wants them back. */
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* Three fixed, low-saturation tints that rotate by section (point 3 of
     the look brief), lifted straight from the canvas artboards
     (design/sitting6/ColourBand*.dc.html), never tied to any one
     child's colour, so they read the same on every kid's pages. */
  --tint-a: #e4f5ef; --tint-a-deep: #8fd6be; --tint-a-ink: #2e6152; --tint-a-ink-deep: #1e4c3b;
  --tint-b: #fdeae0; --tint-b-deep: #f3b78c; --tint-b-ink: #9c5a24; --tint-b-ink-deep: #5c3313;
  --tint-c: #efe9f7; --tint-c-deep: #c7b3e8; --tint-c-ink: #5b4e78; --tint-c-ink-deep: #3e2e5c;

  /* Pass 2, NAT-RULED 9 Sep 2026 (later): "i do love the seafoam colours
     can we incorporate them into the forms? and maybe for the brief etc
     have it the kids colour." Two layers from here: SEAFOAM is the form
     colour, everywhere a person answers or acts; the KID'S OWN colour
     (--k-* below) stays for identity (bands on a child's page, the brief,
     name markers). --seafoam and --seafoam-wash are the exact values from
     the three canvas artboards (design/sitting6/ColourBand{Quick,Shift,
     Today}.dc.html: --seafoam and --mint in their own root style, byte for
     byte). The artboards never defined their own --coral; #e8724f is the
     hex Nat named in her ruling. White text on it is 3.02:1 (fails), so
     buttons use dark ink instead (--ink on --coral is 4.72:1). Ink on
     --seafoam-wash is 12.63:1. Full notes and every ratio checked live in
     SITTING-LOOK.md's Pass 2 section. */
  --seafoam: #4e9c89;
  --seafoam-wash: #e4f5ef;
  --coral: #e8724f;

  /* NAT-RULED 2 Sep 2026 near midnight: look B's sand shell with look C's colours
     (FAMILY-APP-SCREENS.md, the palette side-by-side). Zones re-stepped so
     green and yellow separate for colour-blind readers.
     Per-kid accents, mapped from children.theme (seeded migration 0002).
     Fresh, decide-by-eye look deferred (FAMILY-APP-SCREENS.md); this is
     accent-only, one house look, not a palette per child. Two of the four
     reuse existing house variables, two are new, per the stage 6 brief. */
  --k-fletcher: #8f7ac4;   /* beach-pastels: new, warm sand/terracotta */
  --k-talan:    #219c8e;   /* press-box: new, sporty teal */
  --k-jet:      #2f6fb0;   /* ocean-at-night: NAT 3 Sep 2026 "a little more blue, closer to a sky blue"; the bluest that stays tellable from Talan teal (validator: normal-vision floor fails for every lighter sky) */
  --k-nat:      #b7508a;  /* nat: reuse the house neutral */
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
}

/* ---------------------------------------------- self-hosted type, v2 -- */
/* DM Serif Display + Nunito Sans (NAT-RULED 9 Sep 2026, colour band).
   Files live in /fonts so nobody's phone calls Google, same as the
   original pair below. Both are SIL Open Font Licence. */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-serif-display-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/dm-serif-display-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-sans-normal-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-normal-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/nunito-sans-normal-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------- the band -- */
/* A colour band at the top of every page (look brief point 1): the
   child's own accent where the page belongs to a child, the house
   --accent on a shared page. Kid pages set --kid on <html> once the
   child is known (see kidStyle() in each page's own script, already
   the app-wide mechanism the kid-wash cards below use); shared pages
   never set it, so this falls back to the house neutral on its own. */
.pageBand {
  /* Pass 2 follow-up, 9 Sep 2026: a page with no child (Add, Kids, or any
     shared page that forgets to say so) falls back to seafoam, never to the
     old mauve, so every band is either a child's colour or the app's. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--kid, var(--seafoam)) 50%, #fff), var(--kid, var(--seafoam)));
  padding: 1.2rem 1rem 1.6rem;
  margin: 0 0 -.9rem;
}
.pageBand h1 { font-size: 1.5rem; color: #fff; margin: 0 0 .2rem; }
.pageBand .sub { color: rgba(255, 255, 255, .88); font-size: .88rem; font-weight: 700; margin: 0; }
.pageBand .backLink {
  display: inline-flex; align-items: center; gap: .3rem;
  color: rgba(255, 255, 255, .92); font-size: .85rem; font-weight: 700;
  text-decoration: none; margin: 0 0 .5rem;
}
.pageBand .backLink svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The compact header row (child, date, times, place) a form already
   knows once it is under way; a row of small pale chips on the band. */
.bandMeta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.bandMeta li { color: rgba(255, 255, 255, .92); font-size: .78rem; font-weight: 700; }

/* The white sheet below the band, 24px top radius, on the house's very
   light neutral --bg (look brief point 2). */
.pageSheet {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 1.5rem 1rem 1.25rem;
  box-shadow: 0 -6px 16px rgba(43, 32, 20, .05);
}
@media (min-width: 48rem) {
  .pageBand { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
  .pageSheet { padding: 1.75rem 1.5rem 2rem; }
}

/* -------------------------------------------------- tinted sections -- */
/* Very lightly tinted panels, rotating the three fixed tints above by
   section (look brief point 3): give the Nth section class tint-a,
   tint-b or tint-c in turn (a, b, c, a, b, c…) and it carries its own
   heading ink and its own selected-chip fill, no per-page CSS needed.
   .tintRotate is the same idea for a plain repeating list of .card
   elements where nobody hand-numbers each one. */
.tint-a, .tint-b, .tint-c { border: none; border-radius: var(--radius); }
.tint-a { background: var(--tint-a); }
.tint-b { background: var(--tint-b); }
.tint-c { background: var(--tint-c); }
.tint-a h2, .tint-a h3, .tint-a .cardHead { color: var(--tint-a-ink); }
.tint-b h2, .tint-b h3, .tint-b .cardHead { color: var(--tint-b-ink); }
.tint-c h2, .tint-c h3, .tint-c .cardHead { color: var(--tint-c-ink); }
/* Pass 2: a selected chip/pill/tile is always the seafoam recipe now (tint
   fill, dark text, seafoam border), the same inside any of the three
   section tints as outside one, one consistent "this is my answer" signal
   app-wide, in place of each tint's own -deep colour doing that job. The
   tint itself (the section's own light wash) is untouched. */
.tint-a .chip.selected, .tint-a .pill.selected, .tint-a .tile.selected,
.tint-b .chip.selected, .tint-b .pill.selected, .tint-b .tile.selected,
.tint-c .chip.selected, .tint-c .pill.selected, .tint-c .tile.selected {
  background: var(--seafoam-wash); color: var(--ink); border-color: var(--seafoam);
}
.tintRotate > .card:nth-of-type(3n+1) { background: var(--tint-a); border-color: transparent; }
.tintRotate > .card:nth-of-type(3n+2) { background: var(--tint-b); border-color: transparent; }
.tintRotate > .card:nth-of-type(3n+3) { background: var(--tint-c); border-color: transparent; }
.tintRotate > .card:nth-of-type(3n+1) h2, .tintRotate > .card:nth-of-type(3n+1) h3 { color: var(--tint-a-ink); }
.tintRotate > .card:nth-of-type(3n+2) h2, .tintRotate > .card:nth-of-type(3n+2) h3 { color: var(--tint-b-ink); }
.tintRotate > .card:nth-of-type(3n+3) h2, .tintRotate > .card:nth-of-type(3n+3) h3 { color: var(--tint-c-ink); }

/* ------------------------------------------------ numbered circles -- */
/* Goal rungs, plan stages, steps in a sequence: order that matters
   (look brief point 5). Pass 2: every current use of .stepNum is inside a
   form (incident.js, day.js, shift.js, checked by grep before changing
   this), so it is seafoam now, unconditionally, not the page's accent. */
.stepNum {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .25rem; border-radius: 999px; flex: none;
  background: var(--seafoam); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
}
.stepNum.lg { min-width: 1.9rem; height: 1.9rem; font-size: .78rem; }

/* --------------------------------------------------- progress bar -- */
/* Sections answered over sections shown (look brief point 6): under a
   multi-section form's header, or wherever else it reads naturally. Only
   shift.js uses this (checked by grep), so seafoam applies unconditionally,
   same reasoning as .stepNum above. */
.progressWrap { margin: 0 0 1rem; }
.progressLabel { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; font-weight: 700; color: var(--soft); margin: 0 0 .35rem; }
.progressLabel b { color: var(--seafoam); font-weight: 800; }
.progressBar { height: 6px; border-radius: 999px; background: #efefef; overflow: hidden; }
.progressBar > span { display: block; height: 100%; border-radius: 999px; background: var(--seafoam); transition: width .25s ease; }

/* ------------------------------------------------------ focus, pass 2 -- */
/* No page styled a focus state for a real form input before this (only two
   button-shaped tiles had their own focus-visible rule, both left as they
   were: add.html's doors keep their own kind colour, reports.html's folder
   tiles keep the child's colour, both identity, not a form answer). A
   text/date/time/number input or textarea now gets a seafoam ring and a
   seafoam border while focused, everywhere, forms and shared pages alike. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--seafoam);
  outline-offset: 1px;
  border-color: var(--seafoam);
}

/* ------------------------------------------------------- app navigation -- */
/* Six doors, always visible (FAMILY-APP-SCREENS.md, NAT-RULED 2 Sep 2026:
   Home, Add, Kids, History, Reports, Me). Built by nav.js, which every page
   also includes; a door hides itself by scope (Add: nothing this person may
   create anywhere; Reports: no readable child). One <nav> element, moved
   into place by media query rather than duplicated: a fixed bottom tab bar
   on a phone, a static bar at the top of the page on a desktop. */
.appNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.appNav .doorLink {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .15rem;
  text-decoration: none;
  color: var(--soft);
}
.appNav .doorInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  padding: .3rem .5rem;
  border-radius: 12px;
  min-width: 0;
}
/* NAT, 3 Sep 2026: "i also think this could have more colour". Each door in
   its own tint (set by nav.js as --door), the open one filled in it. */
.appNav .doorLink { color: var(--door, var(--soft)); }
/* Pass 2: replacing the house mauve fallback with seafoam (nav.js sets its
   own --door tint on every door already, so this default never actually
   shows today; kept correct anyway rather than left pointing at mauve). */
.appNav .doorLink.active .doorInner {
  background: var(--door, var(--seafoam));
  color: #fff;
}
.appNav svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appNav .doorLink span {
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Room for the fixed bar so it never covers the last thing on the page.
   Higher specificity than any page's own plain `body { padding: … }` rule,
   so this wins regardless of where that rule sits in the page's own
   stylesheet (see STAGE brief: padding-bottom on body, not a z-index fight). */
body.has-app-nav { padding-bottom: 6.5rem; }
/* Seven doors (nav.js adds .many): narrower pill so "Staff room" fits. */
.appNav.many .doorInner { padding: .3rem .2rem; }
.appNav.many .doorLink { padding: .35rem .05rem; }
.appNav.many .doorLink span { font-size: .6rem; white-space: normal; text-align: center; line-height: 1.05; overflow: visible; }

@media (min-width: 48rem) {
  .appNav {
    position: static;
    left: auto; right: auto; bottom: auto;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    border-top: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    padding-bottom: 0;
  }
  .appNav .doorInner { flex-direction: row; }
  .appNav .doorLink span { font-size: .74rem; }
  .appNav svg { width: 1.25rem; height: 1.25rem; }
  .appNav.many { max-width: 44rem; }
  .appNav.many .doorInner { padding: .3rem .4rem; }
  .appNav.many .doorLink span { font-size: .72rem; }
  body.has-app-nav { padding-bottom: 3rem; }
}

/* NAT-RULED 9 Sep 2026 (colour band): DM Serif Display for page titles
   and card headings only; h3 and the small date/month labels move to
   the body face at a bold weight, matching the canvas artboards exactly
   (their own h3 "When"/"What kind" inherit the body font; only h1/h2
   carry the serif). Was Fraunces for all four, 2 Sep 2026; both self-
   hosted families stay on disk either way (fonts.css, fonts/). */
body { font-family: var(--font-body); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
h3, .todayDate, .monthLabel { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
/* Form controls do not inherit body's font by default in any browser;
   chips and buttons across every page rely on this to land in Nunito
   Sans rather than the OS UI font. */
button, input, select, textarea { font-family: inherit; }

/* ------------------------------------------------------------- mic.js ---- */
/* The microphone button (History sitting, decision 10). mic.js wraps the
   target textarea/input in .micWrap and appends .micBtn as a sibling, so
   this is the one place its look lives rather than six per-page copies. */
.micWrap { position: relative; display: block; }
/* Found live 3 Sep 2026 building the shift note screen: a chip field with no
   "other" option (sn_zone) still gets the "other, in words" box mic.js
   always builds, hidden via the input's own `hidden` property. The wrap
   itself stayed a real (zero-height) block, so its absolutely positioned
   .micBtn child still rendered, floating over whatever sat below. attach()
   still runs on every hidden box on purpose (a field with a real "other"
   option needs its mic ready for the moment it is revealed); this hides
   only the WRAPPER, so a still-hidden box's mic never shows and a later
   unhidden one is unaffected. */
.micWrap:has(> [hidden]) { display: none; }
/* Pass 2: dictating into a field is a form answer, so seafoam, not the
   house mauve, everywhere this button appears. */
.micBtn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--seafoam);
}
.micBtn.corner { right: .35rem; bottom: .35rem; }
.micBtn.inline { right: .35rem; top: 50%; transform: translateY(-50%); }
.micBtn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.micBtn.listening { background: var(--seafoam); color: #fff; border-color: var(--seafoam); }
.micHelpLine { font-size: .78rem; color: var(--soft); margin: .35rem 0 0; }

/* ------------------------------------------------------------ flags.js --- */
/* "Flag for a look" (History sitting, decision 11). Self-contained classes
   rather than reusing a page's own .saveBtn/.cancelBtn: flags.js mounts on
   three different pages, each with its own local stylesheet, and only
   app.css is guaranteed to be linked by all three. */
.flagTrigger {
  border: 1px solid var(--line); background: var(--chipbg); color: var(--ink);
  border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.flagBackdrop {
  position: fixed; inset: 0; background: rgba(30, 25, 35, .45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.flagSheet {
  background: var(--card); color: var(--ink); width: 100%; max-width: 30rem;
  border-radius: 18px 18px 0 0; padding: 1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom));
  max-height: 85vh; overflow-y: auto; font-family: var(--font-body);
}
.flagSheet h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.flagLabel { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); margin: .8rem 0 .4rem; }
.flagForList { display: flex; flex-direction: column; gap: .4rem; }
.flagForOption {
  text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 10px; padding: .55rem .7rem; font-size: .9rem; cursor: pointer;
}
/* Pass 2: a radio-style option, so seafoam, not the house mauve. */
.flagForOption.selected { border-color: var(--seafoam); background: var(--seafoam-wash); font-weight: 700; }
.flagNote {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .65rem; font: inherit; font-size: .9rem; background: var(--bg); color: var(--ink); resize: vertical;
}
.flagStatus { font-size: .8rem; color: var(--soft); min-height: 1.1em; margin: .5rem 0 0; }
.flagStatus.err { color: var(--bad); }
.flagRow { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .6rem; }
.flagCancelBtn { border: none; background: none; color: var(--soft); font-size: .88rem; font-weight: 600; cursor: pointer; padding: .5rem .3rem; }
/* Pass 2: seafoam, not coral, a flag is not one of the five named record
   saves; ink text, the same reasoning as every other seafoam fill
   (SITTING-LOOK.md, Pass 2). */
.flagSaveBtn {
  border: none; background: var(--seafoam); color: var(--ink); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.flagSaveBtn:disabled { opacity: .5; cursor: default; }

@media (min-width: 48rem) {
  .flagBackdrop { align-items: center; }
  .flagSheet { border-radius: var(--radius); }
}

/* --------------------------------------------------------- needs a look -- */
/* The tray (History sitting, decision 11): on Me always, on Home only when
   non-empty. Shared here since both pages render the identical card. */
.flagsCard { border-left: 4px solid var(--warn); }
.flagsTrayItem { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.flagsTrayItem:last-child { border-bottom: none; }
.flagsTrayHead { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.flagsTrayKid { font-weight: 700; color: var(--kid, var(--ink)); font-size: .9rem; }
.flagsTrayWhen { font-size: .76rem; color: var(--soft); }
.flagsTraySummary { font-size: .9rem; margin-top: .15rem; }
.flagsTrayMeta { font-size: .8rem; color: var(--soft); margin-top: .2rem; }
.flagsTrayNote { font-size: .88rem; margin-top: .3rem; white-space: pre-wrap; }
.flagsTrayActions { display: flex; gap: .6rem; margin-top: .5rem; align-items: center; }
.flagsTrayLink { font-size: .85rem; font-weight: 700; text-decoration: none; }
.flagsTrayClear {
  border: 1px solid var(--line); background: var(--chipbg); color: var(--ink);
  border-radius: 999px; padding: .32rem .8rem; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.flagsTrayStatus { font-size: .78rem; color: var(--soft); }

/* A small dot on the Me door (nav.js) when open_flags is above zero. */
.appNav .doorLink { position: relative; }
.doorDot {
  position: absolute; top: .1rem; right: 50%; margin-right: -1.05rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--bad);
}
@media (min-width: 48rem) {
  .doorDot { top: -.05rem; right: auto; left: 1.5rem; margin-right: 0; }
}

/* NAT, 3 Sep 2026: "could these cards/tiles and others that are about a
   kiddo have a light matching background colour?" Any card carrying a kid
   (the pages set --kid on it) takes a light wash of that kid's colour. */
.card[style*="--kid"] {
  background: color-mix(in srgb, var(--kid) 6%, var(--card));
  border-top-color: color-mix(in srgb, var(--kid) 22%, var(--line));
  border-right-color: color-mix(in srgb, var(--kid) 22%, var(--line));
  border-bottom-color: color-mix(in srgb, var(--kid) 22%, var(--line));
  border-left-color: var(--kid);
}

/* Record-kind marks (marks.js): the same small icon and word wherever a
   glimmer, incident, shift note or day check appears. Kind colours, not kid
   colours; they match the Add page's doors. */
.kindMark {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kindInk, var(--soft));
}
.kindMark svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kindMark.glimmer { --kindInk: #9c7a17; }
.kindMark.incident { --kindInk: #a5552f; }
.kindMark.shift { --kindInk: #7a5a8d; }
.kindMark.day { --kindInk: #35774d; }


/* ---------------------------------------------------------- the sorter --- */
/* Decision 10 (design sitting 2), woken 5 Sep 2026. "Tell it as it happened"
   sits first on the incident report and the shift note; Sort asks the
   model service which existing taps the words state plainly; a suggestion
   is a DASHED chip, never a filled one, and only a tap (or Accept all)
   turns it into an answer. Shared here because both forms link app.css.
   Pass 2: this is a form a person acts on too, so seafoam, not the house
   mauve; the dashed border (not solid, and not the tint fill) is what
   still tells a suggestion apart from an actual selected answer. */
.chip.suggested {
  border: 2px dashed var(--seafoam);
  background: var(--seafoam-wash);
  color: var(--ink);
}
.sortRow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .45rem 0 .2rem; }
/* Ink on seafoam is 4.37:1, close to the house accent's own 4.47:1 on
   white today (SITTING-LOOK.md, Pass 2). */
.sortBtn {
  border: none; background: var(--seafoam); color: var(--ink); border-radius: 999px;
  padding: .55rem 1.05rem; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.sortBtn:disabled { opacity: .5; cursor: default; }
.sortNote { font-size: .82rem; color: var(--soft); }
.sortBar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--seafoam-wash); border-left: 4px solid var(--seafoam); border-radius: 10px;
  padding: .5rem .75rem; margin: .5rem 0 .3rem; font-size: .88rem; color: var(--ink);
}
.sortBar button {
  border: 1px solid var(--seafoam); background: var(--card); color: var(--seafoam);
  border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.section.tell { border-left: 4px solid var(--seafoam); padding-left: .75rem; }

/* The Accept all caption (Pip, 5 Sep 2026): the condition for the shortcut, said out loud, no extra tap. */
.sortBar .sortCap { font-size: .8rem; color: var(--soft); margin: 0 .5rem; }

/* ------------------------------------------------------------- photos ----
   Stage 9 (9 Sep 2026). Shared by the Glimmers feed, the Me page and the Kids
   page, so a face and a photo look the same wherever they appear.

   Every src here is /api/media/<id>, which is the Worker, not a bucket: there
   is no public URL for any of these bytes and there never will be (A3, A12). */

.avatar {
  border-radius: 50%; object-fit: cover; flex: none; display: inline-block;
  background: var(--seafoam-wash); vertical-align: middle;
}
/* Until a picture is set: the initial in the person's or child's own colour
   (decision 15). --kid is set by the card it sits in, and falls back to the
   house accent for anyone who has no colour of their own. */
.avatarInitial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kid, var(--seafoam)); color: #fff; font-weight: 700;
  line-height: 1; letter-spacing: .01em;
}

/* The strip under the composer: what is about to be posted. */
.photoStrip { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; }
.photoTile { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--seafoam-wash); }
.photoTile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photoTile .photoX {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0;
}
.photoTile.pending { display: grid; place-items: center; }
.photoSpin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--seafoam) 35%, #fff); border-top-color: var(--seafoam);
  animation: photoSpin .8s linear infinite;
}
@keyframes photoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .photoSpin { animation-duration: 2.4s; } }

.photoAddBtn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--seafoam); font-weight: 700; font-size: .92rem; cursor: pointer;
}
.photoAddBtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Photos on a posted glimmer. One photo gets the full width of the card and
   keeps its own shape; several tile square, which is what makes a run of
   glimmers read as a wall rather than a column of odd rectangles. */
.photoGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .55rem 0 .2rem; }
.photoGrid.one { grid-template-columns: 1fr; }
.photoCell { display: block; border-radius: 10px; overflow: hidden; background: var(--seafoam-wash); }
.photoCell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photoGrid:not(.one) .photoCell img { aspect-ratio: 1 / 1 !important; }
.photoGrid.one .photoCell img { max-height: 420px; object-fit: contain; background: var(--seafoam-wash); }

/* The goal picker (public/goalpicker.js), 10 Sep 2026 sitting: NAT, "could
   we have goals in the glimmer and in the shift notes but as a drop down
   menu and can choose more than one?" A collapsed row, its own chevron, a
   chip row of what is chosen, and an in-page tile list, never a native
   <select>. Shared here (rather than duplicated per page) because it is
   used on three pages (Home's composer, the glimmer edit form, the shift
   note); one definition means one look and one future edit. The tile
   recipe reuses SITTING-TILES.md's own numbers (44px, 15px radius, the
   seafoam check) under its own class names so this never depends on a
   page's local .tile CSS existing. */
.goalPicker { margin: .6rem 0; }
.goalPickerRow {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; min-height: 44px; box-sizing: border-box;
  padding: .55rem .75rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left;
}
.goalPickerRow[aria-expanded="true"] { border-color: var(--seafoam); }
.goalPickerChevron { color: var(--soft); font-size: 1.15rem; line-height: 1; transition: transform .15s ease; }
.goalPickerRow[aria-expanded="true"] .goalPickerChevron { transform: rotate(180deg); color: var(--seafoam); }
.goalPickerChips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 0; }
.goalPickerChips[hidden] { display: none; }
.goalPickerChip {
  display: inline-block; border: 1px solid var(--seafoam); background: var(--seafoam-wash); color: var(--ink);
  border-radius: 12px; padding: .3rem .7rem; font-size: .78rem; font-weight: 600;
  max-width: 100%; box-sizing: border-box; line-height: 1.3; overflow-wrap: anywhere;
}
/* Nat, 13 Sep 2026: a whole plan goal in a 999px pill wrapped into a
   paragraph whose first and last words fell outside the capsule. Chips are
   now rounded boxes, so a short focus title still reads as a pill and a
   long plan goal wraps cleanly inside its own outline. */
.goalPickerList { margin-top: .5rem; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; background: var(--card); }
.goalPickerList[hidden] { display: none; }
.goalPickerGroup { margin-bottom: .6rem; }
.goalPickerGroup:last-of-type { margin-bottom: 0; }
.goalPickerGroupHeading {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soft); margin: 0 0 .35rem; font-weight: 700;
}
.goalPickerGrid { display: flex; flex-direction: column; gap: .5rem; }
.goalPickerTile {
  display: flex; align-items: center; gap: .55rem; text-align: left; width: 100%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 15px; min-height: 44px; box-sizing: border-box;
  padding: .55rem .75rem; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.goalPickerTile.selected { background: var(--seafoam-wash); color: var(--ink); border-color: var(--seafoam); font-weight: 700; }
.goalPickerCircle {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid var(--line); box-sizing: border-box; position: relative;
}
.goalPickerTile.selected .goalPickerCircle { border-color: var(--seafoam); background: var(--seafoam); }
.goalPickerTile.selected .goalPickerCircle::after {
  content: ''; position: absolute; left: .28rem; top: .12rem; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.goalPickerLabelText { line-height: 1.25; }
.goalPickerEmpty { font-size: .84rem; color: var(--soft); margin: 0 0 .5rem; }
.goalPickerDone {
  width: 100%; margin-top: .3rem; border: none; background: var(--seafoam); color: var(--ink);
  border-radius: 12px; min-height: 44px; font: inherit; font-weight: 700; cursor: pointer;
}
/* A static chip row (record.js, the feed card, the day page): the same
   chip look, no picker underneath it, never a button. */
.goalPickerChipsStatic { margin: .3rem 0; }

/* 13 Sep 2026, Nat: "can we have the sign out button a bit easier to spot?"
   A real outlined button in the form colour, full width on a phone, room
   above it so it reads as its own thing rather than a line of small print. */
.signOutBtn {
  display: block; width: 100%; margin: .8rem 0 .2rem; min-height: 44px;
  border: 2px solid var(--seafoam); background: #fff; color: var(--ink);
  border-radius: 12px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.signOutBtn:active { background: var(--seafoam-wash); }
.signOutBtn[disabled] { opacity: .6; cursor: default; }
@media (min-width: 700px) { .signOutBtn { width: auto; padding: 0 1.4rem; } }

/* ---------------------------------------------------- compact rows --
   Shared by the day check and the incident report (migrations 0075 and
   0092). A row is a full-width button, 44px minimum, label left, the
   current answer (or "Choose") right; tapping opens the flagSheet above
   with the field's own tiles. */
  /* Migration 0075, compact rows: Fletcher's five behaviour bands as one
     small table instead of five full tile grids. A row is a full-width
     button, 44px minimum (SITTING-LOOK's own tap-target rule), label left,
     the current answer (or "Choose") right; tapping opens the sheet
     (flagBackdrop/flagSheet, app.css) with the same tiles the field always
     had, plus the exact-number stepper for the five bands that carry one. */
  .compactTable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  /* Migration 0085, prompt-level rows: a heading above a run of compact
     rows sharing one display.row_group, the same look tileGroupHeading
     already uses, sitting inside the compact table's own bordered card as
     a row of its own so it reads as a section label over the rows below
     it, never over a border seam. */
  .compactGroupHeading {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--soft); font-weight: 700; padding: .5rem .8rem 0;
    background: var(--card, #fff);
  }
  .compactGroupHeading:first-child { padding-top: .6rem; }
  .compactRow {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    width: 100%; min-height: 44px; box-sizing: border-box; padding: .6rem .8rem;
    border: none; border-top: 1px solid var(--line); background: #fff; color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
  }
  .compactRow:first-child { border-top: none; }
  .compactRowLabel { font-weight: 600; font-size: .9rem; }
  .compactRowAnswer { color: var(--soft); font-size: .88rem; }
  .compactRowAnswer.answered { color: var(--ink); font-weight: 700; }
  .compactSheetExact { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); margin: .9rem 0 .4rem; }
  .compactSheetDone {
    display: flex; justify-content: flex-end; margin-top: .6rem;
  }


/* Migration 0120, the tag colours. NAT, 16 Sep 2026: "can we make the tags
   coloured." One rule per tag, named for the tag and stored on the tag's own
   row (tags.css_class), so every surface that shows a tag picks the colour
   up at once and none of them can drift apart. Each sets one ink; the wash
   and the line are worked out from it, so a new tag needs one line here and
   one colour, never three.

   Told apart at pill size, which is the whole job: talking and being with
   people in the blues and teals, play and learning in the greens, the body
   ones in the warm half, and hard day alone in rust so it reads differently
   from the things around it without shouting. */
.tag-communication { --tagInk: #2f8f86; }
.tag-social        { --tagInk: #2f6fb0; }
.tag-play          { --tagInk: #3f8a5a; }
.tag-learning      { --tagInk: #6b7f2f; }
.tag-regulation    { --tagInk: #8b6b9e; }
.tag-sensory       { --tagInk: #7a5ea8; }
.tag-self-care     { --tagInk: #b06a8f; }
.tag-daily-living  { --tagInk: #9c7b3a; }
.tag-milestone     { --tagInk: #b9861c; }
.tag-hard-day      { --tagInk: #a5552f; }

/* Any pill, on any page, carrying .tagColoured plus one of the classes
   above. Without a --tagInk it keeps the house neutral, so a tag with no
   colour set is never broken, only plain. */
/* Doubled on purpose: a page's own .gPill / .niceTag / .pill rule is loaded
   after this file and would otherwise win on source order alone. */
.tagColoured.tagColoured {
  background: color-mix(in srgb, var(--tagInk, var(--soft)) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--tagInk, var(--line)) 50%, #fff);
  color: color-mix(in srgb, var(--tagInk, var(--ink)) 88%, #000);
  font-weight: 700;
}
.chip.tagColoured.tagColoured.selected {
  background: var(--tagInk, var(--seafoam));
  border-color: var(--tagInk, var(--seafoam));
  color: #fff;
}
/* Migration 0139: the prompt under a Medical treatment pick. */
.medicalPrompt { margin-top: .5rem; padding: .5rem .65rem; border-left: 3px solid var(--bad); border-radius: 6px; background: var(--bg); color: var(--ink); font-weight: 600; }

/* The mark bar (11 Oct 2026): above the nav on every page while a session is
   open. The big button is the one press that matters. */
.markBar { position: fixed; left: 0; right: 0; bottom: 4.1rem; z-index: 41; display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(43, 32, 20, .08); }
.markBarWho { display: flex; flex-direction: column; min-width: 4.6rem; text-decoration: none; color: var(--ink); line-height: 1.15; }
.markBarWho b { font-size: .9rem; } .markBarWho span { font-size: .72rem; color: var(--soft); }
.markBarBig { flex: 1; font: inherit; font-weight: 800; font-size: 1.15rem; border: 0; border-radius: 14px; padding: .75rem .6rem; color: #fff; background: var(--seafoam); cursor: pointer; box-shadow: 0 6px 16px rgba(78, 156, 137, .35); }
.markBarBig:active { transform: scale(.98); }
.markBarBtn { font: inherit; font-weight: 700; font-size: .85rem; border: 1.5px solid var(--line); background: var(--chipbg); color: var(--ink); border-radius: 12px; padding: .6rem .6rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.markBarBtn.serious { background: var(--bad); border-color: var(--bad); color: #fff; }
.markBarToast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 8.6rem; z-index: 42; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; padding: .55rem .9rem; border-radius: 999px; max-width: 90vw; }
body.has-mark-bar { padding-bottom: 10.5rem; }
@media (min-width: 48rem) { .markBar { max-width: 34rem; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; } }

/* Home: your time (11 Oct 2026) */
.timeOpen { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; margin: .3rem 0 .6rem; }
.timeOpen b { display: block; } .timeOpen span { font-size: .85rem; color: var(--soft); }
.timeHelp { color: var(--soft); font-size: .86rem; margin: .1rem 0 .5rem; }
.timeRow { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; flex-wrap: wrap; }
.timeName { font-weight: 800; min-width: 4.5rem; }
.timeStart { font: inherit; font-weight: 800; border: 0; border-radius: 12px; padding: .65rem .9rem; color: #fff; background: var(--seafoam); cursor: pointer; flex: 1; }
.timeMore { font-size: .85rem; font-weight: 700; color: var(--seafoam); }