@import url("meals.css?v=2026102202");
@import url("palette.css?v=2026102001");
@import url("chores.css?v=2026102102");
@import url("item-details.css?v=2026102102");
@import url("school-calendar.css?v=2026102001");
@import url("privacy.css?v=2026102001");
@import url("import.css?v=2026102101");
@import url("media-setup.css?v=2026102101");
@import url("people.css?v=2026102101");
@import url("changes.css?v=2026102301");
@import url("swipe.css?v=2026102401");
@import url("assistants.css?v=2026102501");
@import url("checklist.css?v=2026102601");
@import url("frame.css?v=2026102701");
@import url("spacing.css?v=2026102701");
/* Yezbi Homeschool (remodel): components and layout for Look C.
   Phone (< 840 px): top bar + content + bottom navigation bar + round + button.
   Laptop (>= 840 px): navigation rail with a labeled + Create, top bar, content. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--hs-bg);color:var(--hs-text);font-family:var(--hs-font);font-size:var(--hs-body);line-height:1.5;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
a{color:var(--hs-primary)}
:focus-visible{outline:3px solid var(--hs-primary);outline-offset:2px}
/* Headings and the page that take focus only so screen readers start there (tabindex=-1) aren't controls: no ring. */
:is(h1,h2,main)[tabindex="-1"]:focus-visible{outline:none}
/* A pop-up itself takes focus only so screen readers start in it: no ring around the whole of it (Derek, October 28, of
   the clock in Settings). What's in it still shows one. */
:is(.sheet,.menu,.drawer,.acct,.datepick)[tabindex="-1"]:focus-visible{outline:none}
/* Full-width rows in cards and idea cards, and segmented buttons, sit against a box that clips its corners: their ring
   is drawn just inside, so it shows whole. (Filled buttons keep the outside ring, which shows against the card.) */
:is(.card,.rcard) :is(.list-row,.menu-row,.art):focus-visible,.seg :is(a,button):focus-visible,[data-calhead] .hd:focus-visible{outline-offset:-3px}
/* Keyboard focus and in-page jumps stop clear of the fixed bars: the top bar and its sticky rows, the + button and, on
   phones, the bottom navigation. */
html{scroll-padding-top:calc(var(--hs-topbar) + var(--hs-safe-t) + 112px);scroll-padding-bottom:calc(var(--hs-fab) + 40px)}
@media (max-width:839px){html{scroll-padding-bottom:calc(var(--hs-navbar) + var(--hs-safe-b) + var(--hs-fab) + 32px)}}
[hidden]{display:none!important}
label.btn,label.k-btn{position:relative}
label.btn:has(input:focus-visible),label.k-btn:has(input:focus-visible){outline:3px solid var(--hs-primary);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;flex:none;user-select:none;width:1em;overflow:hidden}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.ms-drawn svg{display:block}
.ms.s18{font-size:18px}.ms.s20{font-size:20px}.ms.s22{font-size:22px}.ms.s28{font-size:28px}.ms.s32{font-size:32px}.ms.s40{font-size:40px}.ms.s48{font-size:48px}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--hs-muted)}
.small{font-size:var(--hs-small)}
.grow{flex:1;min-width:0}
.row-flex{display:flex;align-items:center;gap:8px}
.wrap-flex{display:flex;flex-wrap:wrap;gap:8px}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-s{display:flex;flex-direction:column;gap:6px}

/* ---------- shell ---------- */
.shell{min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;height:calc(var(--hs-topbar) + var(--hs-safe-t));padding:var(--hs-safe-t) 4px 0 4px;display:flex;align-items:center;gap:2px;background:var(--hs-header);color:var(--hs-header-text)}
.topbar.scrolled{box-shadow:0 1px 0 var(--hs-border)}
.topbar .tb-home{display:flex;align-items:center;padding:0 4px 0 10px;flex:none;min-height:44px}
.topbar .tb-home img{height:28px;width:auto;display:block}
.topbar .tb-home .wm-dark{display:none}
:root[data-theme="dark"] .topbar .tb-home .wm-light{display:none}
:root[data-theme="dark"] .topbar .tb-home .wm-dark{display:block}
.topbar .title{font-size:var(--hs-title);font-weight:var(--hs-head-w);line-height:1.2;padding:0 8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .title-btn{display:flex;align-items:center;gap:2px;height:48px;padding:0 6px 0 8px;border:0;background:none;border-radius:24px;font-size:var(--hs-title);font-weight:var(--hs-head-w);min-width:0}
.topbar .tb-start{display:flex;align-items:center;gap:2px;flex:1 1 0;min-width:0}
.topbar .tb-end{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex:none}
.topbar .tb-theme .tb-theme-i{display:block;width:24px;height:24px}
.topbar .title.long{font-size:19px}
/* Phones: the end's buttons are 44 px wide (as in Bookshelf), leaving the page name more room beside Light/Dark. */
@media (max-width:839px){.topbar .tb-end .icon-btn{width:44px}}
.lockup{display:flex;align-items:flex-end;gap:6px;padding:0 8px;min-width:0}
.lockup img.wm{height:24px;width:auto;display:block}
.lockup img.ic{height:26px;width:auto;display:block}
.lockup .name{font-family:var(--hs-font-brand);font-size:17px;line-height:1;white-space:nowrap}
.wm-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wm-light{display:none!important}:root:not([data-theme="light"]) .wm-dark{display:block!important}}
:root[data-theme="dark"] .wm-light{display:none!important}
:root[data-theme="dark"] .wm-dark{display:block!important}
.icon-btn{width:48px;height:48px;flex:none;border:0;background:none;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;position:relative}
.icon-btn:hover{background:color-mix(in srgb,var(--hs-text) 8%,transparent)}
.icon-btn .dot{position:absolute;top:8px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hs-danger);color:var(--hs-on-danger);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
/* The account's photo, or its initials (October 14: the same circle as Bookshelf's). */
.avatar{width:34px;height:34px;flex:none;border-radius:50%;background:var(--hs-avatar);box-shadow:0 0 0 1px var(--hs-border);font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar.big{width:48px;height:48px;font-size:17px}
main.content{padding-bottom:calc(var(--hs-navbar) + 96px + var(--hs-safe-b))}
.page{max-width:1200px;margin:0 auto}
.page.narrow{max-width:920px}
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--hs-navbar) + var(--hs-safe-b));padding-bottom:var(--hs-safe-b);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--hs-surface);box-shadow:0 -1px 0 color-mix(in srgb,var(--hs-border) 60%,transparent)}
.navbar button{border:0;background:none;cursor:pointer;font:inherit}
.navbar a,.navbar button,.rail a.nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--hs-muted);font-size:12px;font-weight:500;min-width:0}
.navbar a .pill,.navbar button .pill,.rail a.nav .pill{position:relative;width:56px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.navbar a[aria-current="page"],.rail a.nav[aria-current="page"]{color:var(--hs-text);font-weight:700}
.navbar a[aria-current="page"] .pill,.rail a.nav[aria-current="page"] .pill{background:var(--hs-primary-soft)}
.navbar a[aria-current="page"] .ms,.rail a.nav[aria-current="page"] .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* Ask at the bar's right end (note 70), its sparkle in the AI button's blue, lit like the current place while open. */
.navbar [data-navask] .ms{color:var(--hs-ask-a)}
.navbar [data-navask][aria-pressed="true"]{color:var(--hs-text);font-weight:700}
.navbar [data-navask][aria-pressed="true"] .pill{background:var(--hs-primary-soft)}
.nav-badge{position:absolute;top:-3px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hs-danger);color:var(--hs-on-danger);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
/* The round buttons at the bottom right: + everywhere it adds to the calendar; on a laptop D and the AI button beside it
   (note 39), stacked since note 69. The group is placed; the buttons sit in it. */
.fabs{position:fixed;right:16px;bottom:calc(var(--hs-navbar) + 16px + var(--hs-safe-b));z-index:29;display:flex;align-items:center;gap:12px}
.fabs:not(:has(> :not([hidden]))){display:none}
.fab2{display:none}
.fab{position:relative;width:var(--hs-fab);height:var(--hs-fab);border-radius:50%;border:0;background:var(--hs-primary);color:var(--hs-on-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(16,24,40,.24)}
.fab-l{display:none}
.rail{display:none}
@media (min-width:840px){
  .shell{display:grid;grid-template-columns:var(--hs-rail) minmax(0,1fr)}
  .rail{display:flex;flex-direction:column;align-items:center;gap:6px;position:sticky;top:0;height:100dvh;padding:12px 0;background:var(--hs-bg);z-index:31}
  .rail{padding-top:20px}
  .rail a.nav{width:80px;padding:6px 0}
  .navbar{display:none}
  /* Laptops: the round + sits bottom right, as in the current version; beside the tool column from 1024 px. */
  .fabs{right:calc(var(--hs-toolbar-w,4px) + 24px);bottom:28px}
  .topbar .tb-sep{width:1px;height:26px;background:var(--hs-border);margin:0 6px 0 2px;flex:none}
  .topbar .title{font-size:20px}
  .topbar .tb-date{font-size:20px;font-weight:700;margin:0 2px;white-space:nowrap}
  .page.full{max-width:none}
  .rail button.nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:80px;padding:6px 0;border:0;background:none;color:var(--hs-muted);font-size:12px;font-weight:500;cursor:pointer;margin-bottom:6px}
  .rail button.nav .pill{position:relative;width:56px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
  .rail button.nav:hover .pill{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
  main.content{padding-bottom:112px}
  .col-main{min-width:0;display:flex;flex-direction:column}
  .topbar{padding-left:12px}
}
/* The logo is a link home on every screen (Derek, October 13, 2026). */
a.lockup{text-decoration:none;color:inherit;min-height:44px;padding-top:9px;padding-bottom:9px;border-radius:14px;flex:none}
a.lockup:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.topbar .tb-back{margin-right:-4px}
/* Laptops (>= 1024 px; Derek, October 19, after Nori and Skylight Calendar): one top bar across the window, the main
   places down a left column and the screen's tools down a right one (app.js sideNav, the toolbar; plan.js toolRail).
   The top bar's logo part is as wide as the left column, and the photo's part as wide as the right column, so the
   date starts over the page and the photo sits over the tools. Both columns start just under the top bar
   (--hs-chrome-top, app.js placeChrome). app.js fitTopbar steps down (no year, then a shorter Today…) only when the
   bar would overflow. */
.sidenav,.toolbar{display:none}
.tb-acct{display:contents}
@media (min-width:1024px){
  /* The right tool column narrower since October 21 (Derek, note 67: "make those icons the same size as the search
     magnifying glass and the bell icon at the top, and narrow up that column slightly"). */
  :root{--hs-nav-w:84px;--hs-toolbar-w:56px;--hs-rail:var(--hs-nav-w)}
  .shell{display:block}
  .rail{display:none}
  .topbar{padding-left:0;padding-right:0}
  .topbar .tb-sep{margin-left:6px}
  .topbar.tb-top{gap:0;box-shadow:0 1px 0 var(--hs-border)}
  .topbar.tb-top .tb-start{flex:none;min-width:var(--hs-nav-w);padding-left:6px}
  .topbar.tb-top .tb-mid{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:2px;padding-left:8px}
  .topbar.tb-top .tb-mid .title{padding-left:6px}
  .topbar.tb-top .tb-end{flex:none;gap:0}
  .topbar.tb-top .tb-end .icon-btn{width:44px}
  .topbar.tb-top .tb-acct{display:flex;justify-content:center;width:var(--hs-toolbar-w);flex:none}
  /* Day · Week · Month beside the date (viewbar.js), the week's theme after it, and the time at the end (app.js). */
  .tb-viewslot{display:flex;flex:none;margin-left:10px}
  .tb-viewslot:empty{display:none}
  .tb-viewslot .chip.drop{min-width:92px;justify-content:space-between;background:var(--hs-surface)}
  .tb-clock{flex:none;margin-left:auto;padding:0 10px 0 12px;font-size:20px;font-weight:600;color:var(--hs-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .topbar.fit-clock .tb-clock{display:none}
  .tb-today-off{visibility:hidden}
  /* By time · By child · Calendar after Day/Week/Month (Derek, October 20); just their icons when the bar is crowded. */
  .tb-arrslot{display:flex;flex:none;margin-left:10px}
  .tb-arrslot:empty{display:none}
  .tb-arr button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:var(--hs-surface)}
  .tb-arr button[aria-pressed="true"]{background:var(--hs-sel,var(--hs-primary-soft))}
  .tb-arr .ms{display:none}
  .topbar.fit-arr .tb-arr .ms{display:inline-flex}
  .topbar.fit-arr .tb-arr .tb-arr-l{display:none}
  .topbar.fit-arr .tb-arr button{width:44px;padding:0;justify-content:center}
  /* The left column: each place with its name; the one you're in shows its other pages under it. */
  .sidenav{display:flex;flex-direction:column;gap:8px;position:fixed;left:0;top:var(--hs-chrome-top,64px);bottom:0;width:var(--hs-nav-w);z-index:26;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px 6px 10px;background:var(--hs-bg);border-right:1px solid var(--hs-border);scrollbar-width:none}
  #main{margin-left:var(--hs-nav-w);padding-right:var(--hs-toolbar-w)}
  /* The right column, under the photo: the screen's tools, then Light/Dark and Ask at its foot, level with +. */
  .toolbar{display:block;position:fixed;right:var(--hs-toolbar-right,0px);top:var(--hs-chrome-top,64px);bottom:0;width:var(--hs-toolbar-w);z-index:27;background:var(--hs-bg);border-left:1px solid var(--hs-border)}
  /* Since October 20 the tools stay at the window's right edge with a side panel open (Derek: "it would be more obvious
     where to grab to stretch or shrink the width of the discovery bar"): the panel opens between the page and them. */
  body.with-panel .page.split > .split-main{padding-right:0}
}
/* Wider from 1440 px, where the logo fits over it; narrower, the week's seven days still fit side by side at 1280 px. */
/* Below 1280 px the details panel starts a little narrower (it can still be dragged wider). */
@media (min-width:1024px) and (max-width:1279px){:root{--hs-dock-w:340px}}
/* The left column's places are square buttons, an icon over its name (Derek, later October 19: "more square-like so they
   don't take up as much horizontal space"); their other pages are in the second column (.subnav), with no pop-outs
   since October 20 (note 31). */
.sn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sn-end{margin-top:auto;padding-top:8px;border-top:1px solid var(--hs-border)}
.sn-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:6px 2px;border-radius:14px;color:var(--hs-text);text-decoration:none;font-size:12px;font-weight:600;line-height:1.15;text-align:center}
.sn-link .ms{color:var(--hs-muted)}
.sn-link:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
.sn-link[aria-current]{background:none;font-weight:700}
.sn-link[aria-current] .ms{color:var(--hs-text);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.sn-link:focus-visible{outline-offset:-3px}
.sn-i{position:relative;display:inline-flex;flex:none}
.sn-i .nav-badge{top:-6px;right:-9px;min-width:16px;height:16px;padding:0 4px;font-size:10px}
.sn-l{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar.fit-mini .lockup .name{display:none}
/* Tighter still (app.js fitTopbar): the house beside a page's name, then the logo's house. */
.topbar.fit-nohome .tb-home{display:none}
.topbar.fit-noic .lockup img.ic{display:none!important}
.topbar.fit-short .tb-year{display:none}
/* The date sits between ‹ and › (Derek, October 15: "put the arrows on either side of the date"), centered in one width
   for its view, so Today and the arrows don't move as it changes (app.js steadyDate; Derek, October 14). */
.topbar .tb-date[data-steady]{min-width:var(--tb-date-w,auto);text-align:center}
/* Today: a pill with its word; in a tight bar just its calendar icon, in the same place (fit-today). */
.topbar .tb-today{height:40px;margin-right:4px;flex:none}
.topbar .tb-today .ms{display:none}
.topbar.fit-today .tb-today{width:44px;padding:0;justify-content:center;border-radius:22px}
.topbar.fit-today .tb-today .ms{display:inline-flex}
.topbar.fit-today .tb-today .tb-today-l{display:none}
.topbar.fit-short .tb-date[data-steady]{min-width:var(--tb-date-w-short,var(--tb-date-w,auto))}
/* While fitTopbar measures, everything keeps its natural width. */
.topbar.measuring > *{flex:none!important}
.topbar.measuring > * > *{flex-shrink:0!important}
.topbar.measuring .title{overflow:visible}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px;scrollbar-width:none;align-items:center}
.chips::-webkit-scrollbar{display:none}
/* With a mouse, rows of chips wrap instead of scrolling sideways (a mouse can't swipe). */
@media (hover:hover) and (pointer:fine){.chips{flex-wrap:wrap;overflow-x:visible}}
.chips .seg{flex:none}
/* Phones: the chosen arrangement shows its name, the others just their icon, so the row stays short. */
@media (max-width:839px){.chips .seg button{padding:0 12px}.chips .seg button:not([aria-pressed="true"]) .seg-l{display:none}}
.chips.sticky{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t));z-index:20;background:var(--hs-bg)}
/* A laptop's week tools (Plan next week, Life happened) at the far end of Plan's view row. */
.plan-tools{display:flex;gap:8px;margin-left:auto;flex:none}
/* With the week tools, the row wraps (touch laptops too), so they never hide off its end. */
@media (min-width:840px){.chips.with-tools{flex-wrap:wrap;overflow-x:visible}}
.plan-tools .btn{height:36px;padding:0 14px 0 10px;font-size:14px;gap:6px}
.chip{text-decoration:none;flex:none;height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--hs-r-chip);border:1px solid var(--hs-border);background:transparent;font-size:14px;font-weight:500;white-space:nowrap;color:var(--hs-text)}
.chip[aria-pressed="true"],.chip.on{background:var(--hs-primary-soft);border-color:var(--hs-primary-soft);font-weight:600}
.chip.drop{border-color:var(--hs-control);font-weight:600;padding:0 8px 0 12px}
/* A child's chip (Derek, October 15): the letter circle as tall as it can be, concentric with the chip's rounded end
   (36 px chip, 28 px circle, 4 px all round), the same 28 px as the other children's circles you choose from. */
.chip.kid{padding-left:3px;gap:8px}
.chip.kid .kb{width:28px;height:28px;font-size:14px}
.chip.kid > .ms:first-child{margin-left:5px}
/* The children chips beside Plan's view controls (Everyone · Remy · Jude …) have the same outline as the Day / By time /
   By child / Calendar control (Derek, October 14): 1 px of --hs-control, chosen or not. */
.chip[data-kids],.chip[data-kids][aria-pressed="true"],.chip[data-kids].on,.chip[data-kidlink],.chip[data-grownup],.chip[data-grownup][aria-pressed="true"]{border-color:var(--hs-control)}
/* A child not shown: muted name and a dimmed badge in their color, so the name stays readable (it was faded to 3.9:1). */
.chip.kid[aria-pressed="false"],.chip.kid.off{color:var(--hs-muted)}
.chip.kid[aria-pressed="false"] .kb,.chip.kid.off .kb{opacity:.5}
/* A big family's names row on one line: each grown-up's chip as just their mark where the row would wrap (app.js alignNames). */
.chips.names.tight .chip[data-grownup] .gu-name{display:none}
.chips.names.tight .chip[data-grownup]{padding-right:5px}
/* The children's row (app.js kidChips; Derek, October 20, notes 26 and 36): it starts at the left of the page area, and
   has no band of its own until the page scrolls under it. */
.chips.sticky.names{background:transparent}
.topbar.scrolled ~ .content .chips.sticky.names{background:var(--hs-bg)}
.chip .ms{font-size:18px}

/* ---------- child marks ---------- */
.kb{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;line-height:1;color:var(--hs-kid-ink);background:var(--kc-fill,var(--hs-control))}
.kb.s20{width:20px;height:20px;font-size:11px}.kb.s32{width:32px;height:32px;font-size:15px}.kb.s40{width:40px;height:40px;font-size:19px}.kb.s56{width:56px;height:56px;font-size:24px}
/* A grown-up's mark (HSC-09): round, as a child's is, since October 28 (Derek: "the initials for Dad and Mom are still
   square"); plain when they haven't chosen a color. */
.kb.mb{border-radius:50%}
.kb.mb.none{background:var(--hs-avatar);color:var(--hs-text);box-shadow:inset 0 0 0 1px var(--hs-border)}
/* In a chip (Derek, October 27: "I get that you made it more square to distinguish it from a child but now it doesn't
   fit nicely in the chip"): smaller, with rounder corners, centered in the chip's round end as a child's circle is. */
.chip.kid .kb.mb{width:24px;height:24px;margin-left:2px;font-size:13px}
.kb.s16{width:16px;height:16px;font-size:10px}
.own-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--hs-muted);white-space:nowrap}
/* A grown-up's item in an agenda: their color on the row's edge (their mark and name are in the row too). */
.row.own,.list-row.own{box-shadow:inset 4px 0 0 var(--kc)}
.blk .kb.mb,.wt-tm .kb.mb,.any-it .kb.mb,.it .kb.mb,.mi .kb.mb,.xev .kb.mb{margin-right:4px;vertical-align:-3px}
.kbs{display:inline-flex;align-items:center}
.kbs .kb{box-shadow:0 0 0 2px var(--hs-surface)}
.kbs .kb+.kb{margin-left:-6px}

/* A child's color (colorpick.js; HSC-09, October 18): the palette's ten and Custom, a wheel with brightness and a color
   code, and previews in Light and Dark. The swatches keep a thin edge so a very light choice still shows; the chosen
   one has a ring and a check, not color alone. */
.cp-lab{font-weight:600}
/* Two rows (October 20, note 11): the obvious colors, then more that fit the palette and Custom. */
/* Two rows of six, the wheel last (Derek's document, October 29): six across on any phone, the swatches shrinking to fit
   rather than a seventh wrapping. */
.cp-row{display:grid;grid-template-columns:repeat(6,minmax(0,44px));gap:8px 6px}
.cp-break{display:none}
.cp-row > .cp-sw{width:100%;height:auto;aspect-ratio:1}
.cp-sw{position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--sw,var(--hs-control));box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cp-sw .ms{opacity:0;color:#fff;text-shadow:0 0 2px rgb(0 0 0 / .7),0 0 1px rgb(0 0 0 / .9)}
.cp-sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18),0 0 0 3px var(--hs-surface),0 0 0 6px var(--hs-text)}
.cp-sw[aria-pressed="true"] .ms{opacity:1}
.cp-custom{background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-custom:not(.has) .ms{opacity:1;color:#fff}
.cp-custom.has{background:var(--sw)}
.cp-custom.has::after{content:"";position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);box-shadow:0 0 0 2px var(--hs-surface)}
.cp-panel{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;padding:14px;border:1px solid var(--hs-border);border-radius:16px}
.cp-panel[hidden]{display:none}
.cp-wheel{position:relative;flex:none;width:200px;height:200px;border-radius:50%;touch-action:none;cursor:crosshair;background:radial-gradient(closest-side,#fff,rgb(255 255 255 / 0)),conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18)}
.cp-dim{position:absolute;inset:0;border-radius:50%;background:#000;opacity:0;pointer-events:none}
.cp-thumb{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgb(0 0 0 / .55),0 2px 6px rgb(0 0 0 / .35);cursor:grab}
.cp-thumb:focus-visible{outline:3px solid var(--hs-primary);outline-offset:3px}
.cp-side{flex:1 1 180px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-range{width:100%;height:32px;accent-color:var(--hs-primary);appearance:none;-webkit-appearance:none;background:transparent}
.cp-range::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:linear-gradient(90deg,#1a1a1a,var(--cp-top,#888));box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18)}
.cp-range::-moz-range-track{height:12px;border-radius:6px;background:linear-gradient(90deg,#1a1a1a,var(--cp-top,#888))}
.cp-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid #333;box-shadow:0 1px 4px rgb(0 0 0 / .35)}
.cp-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #333}
.cp-hex{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;max-width:160px}
.cp-hex[aria-invalid="true"]{border-color:var(--hs-danger)}
.field .hint.err{color:var(--hs-danger)}
.cp-prevs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-prev{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--hs-border);min-width:0}
.cp-prev.light{color:#1B2330}.cp-prev.dark{color:#E8EDF4}
.cp-prevt{font-size:12px;font-weight:700;opacity:.75}
.cp-prevrow{display:flex;align-items:center;gap:8px;min-width:0}
.cp-prevrow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-prevev{display:flex;align-items:center;gap:6px;padding:6px 8px;border-left:4px solid;border-radius:6px;background:rgb(127 127 127 / .12);font-size:13px}
.cp-dot{flex:none;width:10px;height:10px;border-radius:50%}
.cp-note{margin:4px 0 0}
@media (max-width:420px){.cp-wheel{width:180px;height:180px}.cp-panel{justify-content:center}}

.kdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--kc,var(--hs-control))}

/* ---------- cards, groups, rows ---------- */
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:18px 20px 6px}
.section-h h2{margin:0;font-size:19px;font-weight:var(--hs-head-w);line-height:1.25}
.section-h .link{border:0;background:none;color:var(--hs-primary);font-weight:600;font-size:15px;padding:8px 4px;white-space:nowrap}
.card{background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);overflow:hidden}
.cards{display:flex;flex-direction:column;gap:12px;padding:0 12px}
.group{background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);overflow:hidden;border-top:4px solid var(--kc,transparent)}
.group-h{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px 8px}
.group-h .name{font-size:17px;font-weight:var(--hs-head-w)}
.group-h .meta{font-size:var(--hs-sec);color:var(--hs-muted)}
.row{display:flex;align-items:center;min-height:var(--hs-row);border-top:1px solid var(--hs-border);position:relative;background:var(--hs-surface)}
.row:first-child{border-top:0}
.group-h+.row{border-top:1px solid var(--hs-border)}
.row .lead{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--hs-control);border-radius:28px}
.row .lead.done{color:var(--hs-success)}
.row .body{flex:1;min-width:0;padding:10px 0;display:flex;flex-direction:column;gap:3px;border:0;background:none;text-align:left}
.row .t{font-size:var(--hs-body);line-height:1.3}
.row.done .t{color:var(--hs-muted);text-decoration:line-through}
/* Done is one struck-through line (Derek, October 14): the details line goes, and the title keeps one line. */
.row.done .m{display:none}
.row.done .t.clamp2{-webkit-line-clamp:1;line-clamp:1}
.row.done .body{padding:6px 0}
.row .m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--hs-sec);color:var(--hs-muted)}
.row .trail{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--hs-muted);border-radius:24px}
.row.dragging{box-shadow:var(--hs-shadow-raised);z-index:5;border-radius:16px;position:relative}
.row,.it,.wk-row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[data-cell].drop{outline:2px dashed var(--hs-primary);outline-offset:-2px}
.row.drop-before{box-shadow:inset 0 3px 0 var(--hs-primary)}
.row.drop-after{box-shadow:inset 0 -3px 0 var(--hs-primary)}
.row.drag-src{opacity:.35}
.drag-ghost{position:fixed!important;z-index:85;pointer-events:none;margin:0;border-radius:16px;background:var(--hs-surface);box-shadow:var(--hs-shadow-raised);opacity:.97}
/* Today's date stays in view under the children row, so a drag across days always shows the day it's over. */
/* --hs-chips-h: the view row's height above it (two lines on a narrow laptop; screens/today.js measures it). */
.datebar{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t) + var(--hs-chips-h,52px));z-index:19;height:52px;display:flex;align-items:center;gap:4px;padding:0 4px;background:var(--hs-bg);transition:background .15s}
.datebar .icon-btn{width:44px;height:44px}
.datebar .chip{height:34px}
.datebar.wide > a.icon-btn,.datebar.wide > a.chip{display:none}
/* On a laptop the bar holds only the theme and "to review": line them up with the cards below. */
.datebar.wide{padding:0 12px}
.datebar.wide:not(.moving) [data-datelabel]{display:none}
.wt-scroll{overflow-x:auto;margin:0 0 8px;scroll-padding-inline:64px 16px}
.datebar.moving{background:var(--hs-primary-soft);box-shadow:0 1px 0 var(--hs-border)}
.datebar.moving [data-datelabel]{color:var(--hs-primary)}
.day-preview{position:fixed;z-index:18;overflow-y:auto;background:var(--hs-bg);overscroll-behavior:contain}
@keyframes fromleft{from{transform:translateX(-40px);opacity:.4}}
/* Plan › Week on a laptop: Discover docked beside the calendar. */
@media (min-width:840px){.with-panel .fabs{right:calc(var(--hs-side-w,360px) + var(--hs-toolbar-w,0px) + 24px)}}
.page.split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto var(--hs-side-w,360px);align-items:start}
.split-main.day-main > *{max-width:920px;margin-left:auto;margin-right:auto}
/* Day › By time on a laptop: Any time in its own column beside the day (today.js; Derek, October 14). The two columns
   need about 860 px; narrower (Discover open on a smaller laptop) Any time stays under the day. */
.page.narrow.day2{max-width:1280px}
.split-main.day-main > .day-wrap{max-width:1280px}
.day-wrap{container-type:inline-size}
@container (min-width:860px){
  .day-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:start}
  .day-any{position:sticky;top:calc(var(--hs-topbar,64px) + var(--hs-chips-h,52px) + 8px);max-height:calc(100dvh - var(--hs-topbar,64px) - var(--hs-chips-h,52px) - 24px);overflow:auto}
  .day-any .group{margin-left:4px!important}
}
/* Day › By child on a laptop: each child's Any time items in a column at the right of their timed ones (today.js; Derek,
   October 15). Narrower, they stay under them with their own heading. */
.kid-any-h{display:flex;align-items:center;gap:8px;padding:10px 16px 4px;font-weight:700;border-top:1px solid var(--hs-border)}
.kid-any-h .meta{margin-left:auto;font-weight:400;font-size:13px;color:var(--hs-muted)}
@container (min-width:760px){
  .kid-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);align-items:stretch}
  .kid-any{border-left:1px solid var(--hs-border);position:relative}
  /* Its heading sits in the child's header band (the same 52 px), so its first item lines up with the first timed one
     (Derek, October 15: "I would like the events to line up with each other vertically"). */
  .kid-any-h{border-top:0;position:absolute;bottom:100%;left:0;right:0;height:52px;padding:10px 16px 8px}
}
/* The line between a side panel and the calendar, dragged to resize the panel (js/app/resize.js, October 13). */
/* A 24 px target (WCAG 2.5.8) drawn as a thin line, over the margins on each side of the edge. */
.side-resizer{position:relative;z-index:6;width:24px;cursor:col-resize;touch-action:none;background:none;outline:none;border-radius:8px}
.side-resizer::after{content:'';position:absolute;top:0;bottom:0;left:11px;width:2px;border-radius:1px;background:transparent;transition:background .12s}
.side-resizer:hover::after,.side-resizer.dragging::after{background:var(--hs-primary)}
/* A grip halfway down the edge (Derek, October 20, note 20: "a little thing… that lets you know you can grab it and
   stretch it (similar to the little thing we have at the bottom of events on the calendar)"): an event's grip, upright. */
.side-resizer::before{content:'';position:absolute;top:50%;left:50%;width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:var(--hs-control);opacity:.75;z-index:1}
.side-resizer:hover::before,.side-resizer.dragging::before,.side-resizer:focus-visible::before{background:var(--hs-primary);opacity:1}
.side-resizer:focus-visible{outline:2px solid var(--hs-primary);outline-offset:-2px}
.side-resizer:focus-visible::after{background:var(--hs-primary)}
.split > .side-resizer{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t));height:calc(100dvh - var(--hs-topbar) - var(--hs-safe-t));margin:0 -12px}
/* In a side sheet: its left margin, below the title row and above the buttons, so it covers no control. */
.sheet.side > .side-resizer{position:absolute;left:0;top:72px;bottom:88px}
.sheet.side > .side-resizer::after{left:3px}
@media (min-width:1024px){.sheet.side .sh-body{padding-left:26px}}
body.side-resizing{cursor:col-resize;user-select:none}
body.side-resizing *{cursor:col-resize!important}

.split-main{min-width:0}
.disc-panel{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t));height:calc(100dvh - var(--hs-topbar) - var(--hs-safe-t));display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--hs-border);background:var(--hs-surface)}
/* At the top (or the end) of its list, the wheel carries on into the page (Derek, October 15: "it should then engage
   the main scroll so that I can actually reach the top"). */
.disc-panel > .dp-body{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-gutter:stable}
/* Room for + at the end of the page belongs to the page's own column beside the panel, so scrolling to the end never
   pushes the panel's head (Discover, the date, Day or Week) up out of view (Derek, October 15). */
@media (min-width:840px){body #main:has(> .page.split){padding-bottom:0}.page.split > .split-main{padding-bottom:112px}.page.split > .split-main:has(.cal-scroll){padding-bottom:8px}}
.dp-more{display:flex;margin:4px auto 0}
/* The panel's head (Derek, October 14–15): "Discover" with Full page and close; under it Day or Week at the left and
   the date between ‹ and › at the right; then the children's lettered circles at the left and the week's theme at the
   right. */
.dp-head{flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px 2px 16px;background:var(--hs-surface)}
.dp-title{font-size:22px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
/* The date stays on one line beside Day · Week (Derek, October 20): the short words, then smaller (discover.js
   fitPanelDate adds .short and .tight). */
.dp-datebar{flex:none;position:relative;z-index:2;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:2px 4px 4px 12px;background:var(--hs-surface)}
.dp-datebar .dp-seg button{min-height:36px;padding:0 10px}
.dp-datenav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0}
.dp-datebar .icon-btn{width:40px;height:40px}
.dp-date{font-size:18px;font-weight:700;white-space:nowrap;text-align:center;min-width:120px;overflow:hidden;text-overflow:ellipsis}
.dp-date .dpd-s{display:none}
.dp-datebar.short .dp-date{min-width:0}
.dp-datebar.short .dpd-l{display:none}
.dp-datebar.short .dpd-s{display:inline}
.dp-datebar.tight .dp-date{font-size:15px}
.dp-end{display:flex;justify-self:end}
.ms-svg{display:block;flex:none}
.dp-bar{flex:none;position:relative;z-index:2;display:flex;flex-wrap:nowrap;align-items:center;gap:4px 8px;padding:0 12px 8px 10px;background:var(--hs-surface);border-bottom:1px solid var(--hs-border)}
.dp-kids{display:flex;gap:4px;flex:none}
.dp-bar .dp-saved{margin-left:auto;flex:none}
.dp-themebtn{width:40px;height:40px;color:var(--hs-muted)}
.dp-themebtn.on{color:var(--hs-teal)}
/* A 32 px target with the 28 px circle every child chooser uses (Derek, October 15: one size throughout). */
.dp-kid{width:32px;height:32px;padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.dp-kid > span{width:28px;height:28px;border-radius:50%;border:2px solid var(--kc,var(--hs-control));background:var(--hs-surface);color:var(--hs-text);font-size:14px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.dp-kid[aria-pressed="true"] > span{background:var(--kc-fill,var(--hs-control));border-color:var(--kc-fill,var(--hs-control));color:var(--hs-kid-ink);box-shadow:0 0 0 2px var(--hs-surface),0 0 0 3px var(--kc,var(--hs-primary))}
/* The kinds stay at the top of the panel while its ideas scroll (Derek, October 20, note 19). */
.dp-tabs{padding:8px 10px;position:sticky;top:0;z-index:3;background:var(--hs-surface);border-bottom:1px solid var(--hs-border)}
/* Each idea in about four lines (discover.js panelRow). */
.dp-list .list-row.pr{position:relative;display:block;padding:10px 8px 10px 12px;min-height:0}
.pr-main{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"pic title" "desc desc";column-gap:10px;row-gap:6px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pr-pic{grid-area:pic;display:flex;width:56px}
.pr-pic .tile{--tile:56px}
.pr-title{grid-area:title;align-self:start;display:flex;align-items:flex-start;gap:4px;min-width:0;padding-right:44px;font-size:15px;line-height:1.3}
.pr-title .evr-mark{flex:none}
.pr-desc{grid-area:desc;font-size:13px;line-height:1.35;color:var(--hs-muted)}
.pr-desc .pr-why{color:var(--hs-emph)}
.pr-desc .pr-shelf{color:var(--hs-success,var(--hs-teal));font-weight:600}
.pr-add{position:absolute;top:10px;right:8px;width:40px;height:40px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);cursor:pointer}
.pr-add:hover{filter:brightness(.96)}
.pr-add.done{background:var(--hs-success-soft,var(--hs-teal-soft));color:var(--hs-success,var(--hs-teal))}
.pr-add:focus-visible,.pr-main:focus-visible{outline-offset:2px}
/* Discover's kinds on a laptop (discover.js kindTabs; Derek, October 14): the icon over the name, like the top bar's
   tabs, the names always shown; three across in two rows where one row doesn't fit them (.grid). */
.dtabs-bar{padding:8px 12px;z-index:20;background:var(--hs-bg)}
.dtabs-bar.sticky{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t))}
.dtabs{display:flex;gap:4px;max-width:720px;margin:0 auto}
.dtab{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;padding:6px 4px;border:0;border-radius:16px;background:none;color:var(--hs-muted);font:inherit;font-size:13px;font-weight:600;line-height:1.15;text-decoration:none;cursor:pointer}
.dtab .ms{font-size:26px}
.dtab .dt-l{max-width:100%;text-align:center;white-space:nowrap}
.dtab .dt-s{display:none}
.dtabs.short .dt-f{display:none}
.dtabs.short .dt-s{display:inline}
.dtabs-bar:has(.disc-beside){display:flex;align-items:center;gap:8px}
.dtabs-bar:has(.disc-beside) .dtabs{flex:1 1 auto;min-width:0}
.disc-beside{flex:none}
/* Beside the calendar the five kinds share one row: a little tighter, names wrapping between words. */
.dp-tabs .dtabs{gap:2px}
.dp-tabs .dtab{padding:6px 2px;font-size:12.5px}
.dtab:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent);color:var(--hs-text)}
.dtab[aria-selected="true"]{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);font-weight:700}
.dtabs.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dtabs.grid .dt-l{white-space:normal;text-align:center}
/* The panel's day, lit up in Plan's week beside it (discover.js markDay). */
.split-main .dp-on:is(.wkt-col,.cell){box-shadow:inset 0 0 0 2px var(--hs-primary),var(--hs-shadow);background:color-mix(in srgb,var(--hs-primary) 6%,var(--hs-surface))}
.split-main .wk .cell.dp-on{box-shadow:inset 0 0 0 2px var(--hs-primary)}
.split-main .dp-on:is(.wkt-h,.hd){background:var(--hs-primary-soft)!important;color:var(--hs-primary-on-soft)}
.dp-band{position:absolute;top:0;bottom:0;pointer-events:none;background:color-mix(in srgb,var(--hs-primary) 7%,transparent);box-shadow:inset 2px 0 0 var(--hs-primary),inset -2px 0 0 var(--hs-primary)}
.dp-list .list-row{cursor:grab}
.dp-list .list-row .btn{height:36px!important}
.dp-ghost{position:fixed;z-index:90;pointer-events:none;display:flex;align-items:center;gap:6px;max-width:280px;padding:6px 12px;border-radius:12px;background:var(--hs-primary);color:var(--hs-on-primary);font-size:13px;font-weight:600;box-shadow:var(--hs-shadow-raised)}
.dp-ghost span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-wt].drop,[data-cell].drop{outline:2px dashed var(--hs-primary);outline-offset:-2px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:700;background:var(--hs-raised);color:var(--hs-muted);white-space:nowrap}
/* In a narrow row a long tag ("You own this · Living-room shelf") wraps instead of running past the column. */
.list-row .tx .tag{max-width:100%;height:auto;min-height:22px;padding-top:2px;padding-bottom:2px;white-space:normal}
.tag.now{background:var(--hs-primary-soft);color:var(--hs-primary)}
.tag.ok{background:var(--hs-success-soft);color:var(--hs-success)}
.tag.warn{background:var(--hs-emph-soft);color:var(--hs-emph)}
.tag.danger{background:var(--hs-danger-soft);color:var(--hs-danger)}
.list-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 16px;border-top:1px solid var(--hs-border);text-decoration:none;color:inherit;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.list-row:first-child{border-top:0}
/* A row whose main part is a link, with its own ⋮ beside it (a course: note 58). */
.list-row.cur-row{align-items:flex-start;gap:4px;padding-right:8px}
.cur-row .cur-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:14px;color:inherit;text-decoration:none}
.cur-row .trail{flex:none;width:44px;height:44px;margin-top:-4px}
.list-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* A row's words keep room to read (Derek, October 28, of Settings on his phone: "It's trying to put things in three
   columns so if there's a lot of text, it wraps the sentence to like ten lines. Can we reformat all menus to prevent this
   from happening?"): when its controls would leave the words less than 180 px, they go under them, at the right. A row
   with a switch or an arrow keeps them beside the words. */
.list-row:has(> .tx){flex-wrap:wrap;row-gap:8px}
.list-row > .tx{flex:1 1 180px}
.list-row > .tx + *{margin-left:auto}
/* Two or more controls (a day and a time; Send a test and Turn off) go under the words together on a phone. */
@media (max-width:599px){.list-row:has(> .tx ~ :is(select,.tf,.btn,input) ~ :is(select,.tf,.btn,input)) > .tx{flex-basis:100%}}
.list-row .tx b{font-weight:600;font-size:15px}
/* A child badge inside a row keeps its own ink and size (it was taking the muted row color). */
.list-row .tx span:not(.kb){font-size:13px;color:var(--hs-muted)}
button.list-row:hover,a.list-row:hover{background:color-mix(in srgb,var(--hs-text) 4%,transparent)}
.banner{margin:8px 12px;padding:14px 16px;border-radius:18px;background:var(--hs-primary-soft);display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.banner.teal{background:var(--hs-teal-soft);color:var(--hs-teal)}
.banner.warn{background:var(--hs-emph-soft)}
.empty{margin:24px 16px;padding:28px 20px;border-radius:var(--hs-r-card);background:var(--hs-surface);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty b{font-size:17px}
.empty span{color:var(--hs-muted);font-size:15px}
.empty .btn span{color:inherit;font-size:inherit}
.skel{border-radius:12px;background:linear-gradient(90deg,var(--hs-raised),color-mix(in srgb,var(--hs-raised) 50%,var(--hs-surface)),var(--hs-raised));background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- buttons ---------- */
.btn{height:44px;padding:0 20px;border-radius:var(--hs-r-btn);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;white-space:nowrap;text-decoration:none}
.btn.filled{background:var(--hs-primary);color:var(--hs-on-primary)}
.btn.tonal{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft)}
.btn.outlined{border-color:var(--hs-control);background:transparent;color:var(--hs-text)}
.btn.text{background:transparent;color:var(--hs-primary);padding:0 14px}
.btn.danger{background:var(--hs-danger);color:var(--hs-on-danger)}
.btn.big{height:52px;font-size:16px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btn.success{background:var(--hs-success-soft);color:var(--hs-success);border-color:var(--hs-success)}
.btn .ms{font-size:20px}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lab{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--hs-muted)}
.input,.select,.textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:var(--hs-r-field);border:1px solid var(--hs-control);background:var(--hs-surface);color:var(--hs-text);font-size:16px}
.textarea{min-height:104px;line-height:1.45;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--hs-primary);outline-offset:0;border-color:var(--hs-primary)}
/* Example text stays readable in Dark too (the browser default grey was 3.3:1 there). */
.input::placeholder,.textarea::placeholder{color:var(--hs-muted);opacity:1}
.seg{display:inline-flex;border:1px solid var(--hs-control);border-radius:var(--hs-r-btn);overflow:hidden}
.seg button{min-height:40px;padding:0 16px;border:0;background:transparent;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--hs-control)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--hs-primary-soft)}
.seg a{min-height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none;color:inherit;border-right:1px solid var(--hs-control)}
.seg a:last-child{border-right:0}
.seg a[aria-current="true"]{background:var(--hs-primary-soft)}
.opt-chips{display:flex;flex-wrap:wrap;gap:8px}
.opt-chips button{min-height:40px;padding:0 14px;border-radius:var(--hs-r-chip);border:1px solid var(--hs-control);background:transparent;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.opt-chips button[aria-pressed="true"],.opt-chips button[aria-checked="true"]{background:var(--hs-primary-soft);border-color:var(--hs-primary);font-weight:600}
/* A chip that starts with someone's initial: the initial nearly fills the chip's round end (Derek, October 28: "the chip or
   pill borders are too large. We should bring those down so that the rounded border is closer to the initial icon"). */
.opt-chips button > .kb{width:30px;height:30px;font-size:14px}
.opt-chips button:has(> .kb:first-child){padding-left:4px;gap:8px}
.opt-chips button:has(> .ms:first-child + .kb){padding-left:8px;gap:6px}
/* Who it's for, in Discover's details (discover.js addSection; Derek, October 14): each child's own color, a ★ where
   it's recommended. */
.kid-picks .kid-pick{border-color:color-mix(in srgb,var(--kc,var(--hs-control)) 60%,var(--hs-border));color:var(--hs-text)}
.kid-picks .kid-pick[aria-pressed="true"]{background:color-mix(in srgb,var(--kc,var(--hs-primary)) 16%,var(--hs-surface));border-color:var(--kc,var(--hs-primary))}
.kid-pick .rec,.add-sec .ms.fill{color:var(--hs-gold)}
.kid-pick .rec{display:inline-flex}
/* The details' children as lettered circles (October 15): a 40 px target, the 28 px circle, ★ at its corner. */
.kid-picks{flex-wrap:wrap;gap:6px}
.kid-picks .kid-pick.kid-dot{position:relative;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:none;justify-content:center}
.kid-dot .kd{width:28px;height:28px;border-radius:50%;border:2px solid var(--kc,var(--hs-control));background:var(--hs-surface);color:var(--hs-text);font-size:14px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.kid-dot:hover .kd{background:color-mix(in srgb,var(--kc,var(--hs-control)) 12%,var(--hs-surface))}
.kid-picks .kid-pick.kid-dot[aria-pressed="true"]{background:none}
.kid-dot[aria-pressed="true"] .kd{background:var(--kc-fill,var(--hs-control));border-color:var(--kc-fill,var(--hs-control));color:var(--hs-kid-ink);box-shadow:0 0 0 2px var(--hs-surface),0 0 0 3px var(--kc,var(--hs-primary))}
.kid-dot.warn .kd{border-style:dashed}
.kid-dot .rec{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;background:var(--hs-surface);display:flex;align-items:center;justify-content:center;line-height:0}
.kid-dot .rec .ms{font-size:13px}
.add-sec{display:flex;flex-direction:column;gap:14px;padding-top:12px;border-top:1px solid var(--hs-border)}
/* An event's head: the date and time, the price, the distance; the address to the right, opening Google Maps. */
.ev-head{display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,1fr);gap:4px 14px;align-items:start}
.ev-when{display:flex;flex-direction:column;gap:3px;font-size:14px;min-width:0}
.ev-when b{font-size:15px}
.ev-when .nw{white-space:nowrap}
.ev-place{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--hs-text);text-decoration:none;min-width:0;padding:2px 0 2px 12px;border-left:1px solid var(--hs-border)}
.ev-place .ev-venue{font-weight:600}
.ev-place .ev-maps{display:inline-flex;align-items:center;gap:4px;color:var(--hs-primary-on-soft);font-weight:600}
.ev-place:hover .ev-venue,.ev-place:focus-visible .ev-venue{text-decoration:underline}
@media (max-width:599px){.ev-head{grid-template-columns:64px minmax(0,1fr)}.ev-place{grid-column:1 / -1;border-left:0;padding-left:0}}
.switch{position:relative;width:52px;height:32px;flex:none;border-radius:16px;border:2px solid var(--hs-control);background:var(--hs-raised);padding:0}
.switch::after{content:'';position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--hs-control);transition:left .15s}
.switch[aria-checked="true"]{background:var(--hs-primary);border-color:var(--hs-primary)}
.switch[aria-checked="true"]::after{left:24px;background:var(--hs-on-primary)}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:var(--hs-scrim);animation:fade .15s}
/* The feedback button over a pop-up's shade, where the top bar's is (app.js liftFeedback; October 22). */
.fb-lift{position:fixed;z-index:62;border-radius:999px;background:var(--hs-surface);color:var(--hs-text);box-shadow:0 1px 4px rgba(16,24,40,.25)}
@keyframes fade{from{opacity:0}}
/* Sheets scroll inside their body only (Derek, October 13: the scroll bar cut across the rounded corners): the title
   row and the action bar stay put, and the bar starts below the top curve and ends above the bottom one. */
.sheet{position:fixed;left:0;right:0;bottom:var(--hs-kb,0px);z-index:61;max-height:calc(var(--hs-vvh,100dvh) * .92);display:flex;flex-direction:column;overflow:hidden;background:var(--hs-surface);border-radius:var(--hs-r-sheet) var(--hs-r-sheet) 0 0;padding:8px 0 calc(16px + var(--hs-safe-b));animation:up .2s ease-out}
/* With the phone keyboard up, a pop-up sits within what's still visible, above the keyboard (keyboard.js; Derek,
   October 27: with the keyboard up he couldn't scroll Ask to the top of the conversation). */
.sheet.full{top:calc(var(--hs-vv-top,0px) + max(24px,var(--hs-safe-t)));max-height:none}
.sheet.center{left:50%;right:auto;bottom:auto;top:calc(var(--hs-vv-top,0px) + var(--hs-vvh,100dvh) / 2);transform:translate(-50%,-50%);width:calc(100vw - 24px);max-width:560px;max-height:calc(var(--hs-vvh,100dvh) - 112px - var(--hs-safe-t) - var(--hs-safe-b));border-radius:var(--hs-r-dialog);padding:12px 0 16px;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet .grab{width:32px;height:4px;border-radius:2px;background:var(--hs-control);margin:6px auto 10px}
.sheet .sh-head{display:flex;align-items:flex-start;gap:4px;padding:0 12px 6px 8px;flex:none}
.sheet .grab{flex:none}
.sheet .sh-title{flex:1;min-width:0;padding-top:10px;display:flex;flex-direction:column;gap:3px}
.sheet .sh-title b{font-size:20px;line-height:1.25;font-weight:var(--hs-head-w)}
.sheet .sh-title span{font-size:14px;color:var(--hs-muted)}
.sheet .sh-body{padding:4px 12px 8px 20px;margin-right:6px;display:flex;flex-direction:column;gap:18px;flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
/* A pop-up never scrolls sideways (Derek, October 28: "the pop-up for the event has a horizontal scroll bar. We shouldn't
   have that"): its rows that scroll sideways (the kinds, the people) do it themselves, within its edges. */
.sheet .sh-body > *{flex-shrink:0}
.sheet .sh-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 20px 0;flex-wrap:wrap;flex:none;border-top:1px solid transparent}
.sheet.full .sh-body{flex:1 1 auto}
/* A switch row on a page card (Local events settings) looks the same as in a sheet. */
.sheet .menu-row,.menu .menu-row,.card .menu-row{width:100%;min-height:56px;padding:6px 24px;display:flex;align-items:center;gap:16px;border:0;border-top:1px solid var(--hs-border);background:none;text-align:left}
.menu .menu-row{border-top:0;min-height:40px;padding:4px 14px;gap:12px}
.menu .menu-label{font-size:15px;color:var(--hs-text)}
.menu .menu-row.danger .menu-label{color:var(--hs-danger)}
@media (pointer:coarse){.menu .menu-row{min-height:44px}}
.menu-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-row .tx span:not(.kb){font-size:13px;color:var(--hs-muted)}
.menu-row.danger,.menu-row.danger .ms{color:var(--hs-danger)}
.menu-row[role="menuitemradio"][aria-checked="true"]{background:var(--hs-primary-soft)}
@media (min-width:840px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 48px));max-height:min(86dvh,820px);border-radius:var(--hs-r-dialog);padding:12px 0 20px;animation:fade .15s}
  .sheet.full{top:50%;max-height:min(86dvh,820px)}
  .sheet .grab{display:none}
  .sheet.side{left:auto;right:0;top:0;bottom:0;transform:none;width:440px;max-height:none;border-radius:var(--hs-r-dialog) 0 0 var(--hs-r-dialog);animation:fromright .18s ease-out;box-shadow:var(--hs-shadow-raised)}
  /* The calendar stays readable beside the panel. */
  .scrim.side{background:color-mix(in srgb,var(--hs-scrim) 35%,transparent)}
  @keyframes fromright{from{transform:translateX(40px);opacity:.4}}
}
.menu{position:fixed;z-index:72;min-width:220px;max-width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:var(--hs-r-menu);background:var(--hs-menu);box-shadow:var(--hs-shadow-raised);animation:fade .12s}
.menu > .menu-scroll{overflow-y:auto;overscroll-behavior:contain;margin:8px 4px 8px 0;min-height:0}
/* The scrolling list clips anything outside it, so a row's focus ring is drawn just inside. */
.menu-scroll .menu-row:focus-visible,.dr-scroll .dr-row:focus-visible,.acct-scroll .dr-row:focus-visible{outline-offset:-3px}
.menu-scrim{position:fixed;inset:0;z-index:71;background:transparent}
/* Finish setting up: a tick before each row (batch 32). */
.setup-item{display:flex;align-items:center;border-top:1px solid var(--hs-border)}
.setup-item > .setup-row{flex:1;min-width:0;border-top:0}
.setup-item > .setup-tick{flex:none;margin-left:6px}
.setup-item > .setup-tick[aria-pressed="true"]{color:var(--hs-success,var(--hs-primary))}
/* Discover's details: along the list, by a swipe or ‹ › (Derek, October 28). */
.info-step{display:flex;align-items:center;justify-content:center;gap:8px;margin:-8px 0 -4px}
.info-step .icon-btn[disabled]{opacity:.35}
.sheet.info-from-right{animation:info-in-r .18s ease-out}
.sheet.info-from-left{animation:info-in-l .18s ease-out}
@keyframes info-in-r{from{opacity:.4;translate:48px 0}}
@keyframes info-in-l{from{opacity:.4;translate:-48px 0}}
@media (prefers-reduced-motion:reduce){.sheet.info-from-right,.sheet.info-from-left{animation:none}}
/* The + button's choices on a phone (ui.js speedDial; Derek, October 28, as Google Calendar's). */
.sd-wrap{position:fixed;inset:0;z-index:61;pointer-events:none}
.sd{position:fixed;display:flex;flex-direction:column;align-items:flex-end;gap:12px;overflow-y:auto;padding:2px;pointer-events:none;scrollbar-width:none}
.sd-it{pointer-events:auto;flex:none;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px 0 20px;border:0;border-radius:26px;background:var(--hs-primary);color:var(--hs-on-primary);font:inherit;font-size:17px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgb(0 0 0 / .22);cursor:pointer;animation:sd-in .16s ease-out both}
.sd-x{position:fixed;pointer-events:auto;border:0;border-radius:50%;background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgb(0 0 0 / .22);cursor:pointer}
@keyframes sd-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.sd-it{animation:none}}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:61;width:min(320px,86vw);display:flex;flex-direction:column;overflow:hidden;background:var(--hs-surface);border-radius:0 28px 28px 0;padding:calc(12px + var(--hs-safe-t)) 0 calc(16px + var(--hs-safe-b));animation:right .2s ease-out}
.drawer > .dr-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:6px}
@keyframes right{from{transform:translateX(-40px);opacity:.4}}
.drawer .lockup{padding:10px 24px 16px}
.drawer .dr-row,.acct .dr-row{width:100%;min-height:56px;padding:4px 24px;display:flex;align-items:center;gap:16px;border:0;background:none;text-align:left;color:inherit;text-decoration:none;border-radius:0 28px 28px 0}
.drawer .dr-row:hover,.acct .dr-row:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.drawer .dr-row[aria-current="page"],.acct .dr-row[aria-current="page"]{background:var(--hs-primary-soft);font-weight:700}
.drawer .dr-row img,.acct .dr-row img{flex:none;border-radius:6px}
.list-row .row-main{flex:1;min-width:0;display:flex;align-items:center;gap:16px;border:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer;min-height:48px}
.list-row .row-main > .ms:last-child{opacity:.55}
.apps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1px solid var(--hs-border);border-radius:20px;text-align:center;text-decoration:none;color:inherit}
.app-tile:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.app-tile img{border-radius:12px}
.drawer hr,.acct hr{border:0;border-top:1px solid var(--hs-border);margin:8px 24px}
.drawer .dr-h,.acct .dr-h{padding:8px 24px 4px;font-size:13px;font-weight:700;color:var(--hs-muted)}
/* ☰'s places (note 76): each place's row with its ▾, then its pages, indented, as the laptop's second column lists
   them. */
.drawer .dr-place{display:flex;align-items:center}
.drawer .dr-place > .dr-row{flex:1 1 auto;min-width:0}
.drawer .dr-place > .dr-row[aria-current="true"]{font-weight:700}
.drawer .dr-more{flex:none;margin-right:12px}
.drawer .dr-more .ms{transition:transform .15s}
.drawer .dr-more[aria-expanded="true"] .ms{transform:rotate(180deg)}
.drawer .dr-sub{list-style:none;margin:0;padding:0}
.drawer .dr-sub .dr-row{min-height:48px;padding-left:44px}
@media (prefers-reduced-motion:reduce){.drawer .dr-more .ms{transition:none}}
.drawer .dr-badge{position:static;flex:none}
.acct{position:fixed;z-index:61;top:calc(8px + var(--hs-safe-t));right:8px;width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:28px;background:var(--hs-surface);box-shadow:var(--hs-shadow-raised);animation:fade .12s}
/* The top-right cards (Derek, October 14): Help, Notifications and the account share this card, inset from the top and
   right, rounded, with a title row ending in × (and the bell's settings). */
.acct-h{display:flex;align-items:center;gap:2px;min-height:48px;padding:0 6px 4px 20px}
.acct-h > b{font-size:18px}
.acct-body{display:flex;flex-direction:column;gap:16px;padding:4px 20px 8px}
.acct-list{padding:2px 0 4px}
.fb-where{margin:0;display:flex;gap:6px;align-items:flex-start}
/* Search (smartsearch.js): the same card, wider, with the box at its top and results by where they are. */
.acct.srch{width:min(520px,calc(100vw - 16px))}
.srch-q{position:relative;margin:0 16px 8px}
.srch-q > .ms{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--hs-muted)}
.srch-q .input{width:100%;min-height:44px;padding-left:44px;border-radius:24px}
.srch-res{padding:0 0 8px}
.srch-res .list-row{padding-left:20px;padding-right:20px}
.srch-hint,.srch-none{margin:0;padding:4px 24px 8px}
.snack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--hs-navbar) + 16px + var(--hs-safe-b));z-index:70;width:min(560px,calc(100vw - 16px));min-height:48px;padding:6px 6px 6px 16px;border-radius:var(--hs-r-snack);background:var(--hs-inv);color:var(--hs-on-inv);display:flex;align-items:center;gap:8px;font-size:14px;box-shadow:0 4px 14px rgba(16,24,40,.3);animation:fade .15s}
.snack .tx{flex:1}
/* It can be swiped away, sideways or down (ui.js swipeAway). */
.snack{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.snack button{height:40px;padding:0 12px;border:0;background:none;color:var(--hs-inv-action);font-weight:700;font-size:14px;border-radius:20px}
@media (min-width:840px){.snack{bottom:28px;left:calc(var(--hs-rail) + 24px);right:auto;transform:none;width:min(560px,calc(100vw - var(--hs-rail) - 220px))}}
.toast-err{background:var(--hs-danger);color:var(--hs-on-danger)}
.toast-err button{color:var(--hs-on-danger)}

/* ---------- day + week grids ---------- */
.hours{position:relative;margin:4px 12px 16px 0}
.hours .hr{position:absolute;left:0;right:0;display:flex;gap:6px;pointer-events:none}
.hours .hr span{width:52px;text-align:right;font-size:11px;color:var(--hs-muted);transform:translateY(-7px)}
.hours .hr i{flex:1;border-top:1px solid var(--hs-border)}
/* The now line runs under the cards, so their words stay readable (Derek, October 20, note 25: "make sure that the text
   is in front of that"); over the empty hours and the gutter's edge, with its dot. */
.hours .nowline{position:absolute;left:58px;right:0;border-top:2px solid var(--hs-now);z-index:0;pointer-events:none}
.hours .xev{z-index:1}
/* What's above or below the hours in view (calscroll.js edgeMarks): a mark at that edge of its day. */
.edge-bar{position:sticky;height:0;z-index:7;pointer-events:none}
.edge-bar.up{top:0}
.edge-bar.down{bottom:0}
.edge-mark{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:2px;height:24px;padding:0 8px;border:1px solid var(--hs-border);border-radius:12px;background:var(--hs-surface);color:var(--hs-text);font:inherit;font-size:12px;font-weight:600;box-shadow:var(--hs-shadow);cursor:pointer;max-width:140px;margin:0 auto;white-space:nowrap}
.edge-mark .ms{font-size:18px}
.edge-mark.up{top:4px}
.edge-mark.down{bottom:4px}
.edge-mark:hover{background:var(--hs-raised)}
.hours .nowline::before{content:'';position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--hs-now)}
/* By time (today.js nowLine): the same line between the rows, at the first one not over yet. */
.list-now{position:relative;z-index:1;height:0;margin:-1px 0 -1px 12px;border-top:2px solid var(--hs-now);pointer-events:none}
.list-now::before{content:'';position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--hs-now)}
@media print{.list-now{display:none}}
.blk{position:absolute;padding:4px 6px;overflow:hidden;border-radius:12px;background:var(--tc-soft,var(--hs-surface));border:1px solid var(--hs-border);border-left:4px solid var(--tc,var(--kc,var(--hs-control)));display:flex;flex-direction:column;gap:1px;text-align:left;font-size:12px;line-height:1.25;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:var(--hs-text);cursor:pointer}
.blk b{font-weight:600;overflow-wrap:normal;word-break:normal;hyphens:manual}
/* Day › Calendar's "Any time" strip (daygrid.js; Derek, October 14: not chips): flat bars like the blocks below, in
   each child's column, under the names. One column for the day on a phone or with one child. */
.anyrow{display:grid;grid-template-columns:var(--any-left) repeat(var(--any-n),minmax(0,1fr));align-items:start;row-gap:2px;padding:0 0 6px}
.anyrow.one{grid-template-columns:var(--any-left) minmax(0,1fr);margin:0 12px 0 0}
.anyrow .any-h{font-size:12px;color:var(--hs-muted);padding:8px 4px 0 8px;line-height:1.2}
.anyrow .any-col{display:flex;flex-direction:column;gap:3px;padding:2px;min-width:0}
.anyrow.one .any-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.any-it{display:flex;align-items:center;gap:5px;min-height:30px;padding:3px 8px 3px 6px;border-radius:10px;background:var(--hs-surface);border:1px solid var(--hs-border);border-left:4px solid var(--kc,var(--hs-control));color:var(--hs-text);font:inherit;font-size:12px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;min-width:0;width:100%}
.any-it[hidden]{display:none}
.any-it .one{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.any-it:hover{background:color-mix(in srgb,var(--kc,var(--hs-control)) 7%,var(--hs-surface))}
.any-it.done{opacity:.6}
.any-it.done .one{text-decoration:line-through}
/* Chores folded into one line a column in Plan's calendars (items.js choreLine; Derek, October 14). */
.chore-line{display:flex;align-items:center;gap:5px;width:100%;min-width:0;min-height:30px;padding:3px 6px 3px 6px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--hs-teal) 45%,var(--hs-border));background:var(--hs-teal-soft);color:var(--hs-text);font:inherit;font-size:12px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer}
.chore-line > .ms:first-child{color:var(--hs-teal)}
.chore-line .one{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chore-line .chore-arrow{display:inline-flex;color:var(--hs-muted);transition:transform .15s ease}
.chore-line[aria-expanded="true"] .chore-arrow{transform:rotate(180deg)}
.chore-line:hover{background:color-mix(in srgb,var(--hs-teal) 10%,var(--hs-teal-soft))}
[data-chore][hidden]{display:none!important}
.any-more{justify-self:start;min-height:28px;padding:2px 10px;margin:0 2px;border:0;border-radius:14px;background:none;color:var(--hs-primary-on-soft);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.any-more:hover{background:var(--hs-primary-soft)}
/* The Calendar views' blocks look like By time's tiles (Derek, October 14): tinted and edged by kind, the children as
   dots after the time. */
.blk:hover{background:color-mix(in srgb,var(--hs-text) 5%,var(--tc-soft,var(--hs-surface)))}
.blk .tm{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--hs-muted)}
.blk .tm .wt-kids{margin-left:2px}
.blk.done{opacity:.6}
/* The calendar's blocks (Derek, October 15: "pretty up this view… more 3D relief", like Skylight's): 13 px text with the
   time on its own line when there's room, a soft shadow and a light top edge. The now line runs over a block's colour
   but under its words, so they always read. A done block fades by colour, not opacity, so its words stay above the
   line too. */
.hours .blk{font-size:13px;border-radius:14px;border-color:color-mix(in srgb,var(--tc,var(--kc,var(--hs-control))) 22%,var(--hs-border));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--hs-surface) 55%,transparent),0 1px 2px rgb(0 0 0 / .07),0 4px 10px -6px rgb(0 0 0 / .22)}
.hours .blk:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--hs-surface) 55%,transparent),0 2px 4px rgb(0 0 0 / .09),0 8px 16px -8px rgb(0 0 0 / .28)}
.hours .blk > b,.hours .blk > .tm{position:relative;z-index:4}
.hours .blk > .lk{z-index:4}
/* The current time crosses an event's color and passes under its words (Derek, October 21, note 51: "it needs to be in
   front of the color but behind the text"), as in Google Calendar: each block the time crosses draws the line again,
   over its own color and under its title, time and lock (z-index 4); the line itself and its dot stay under the
   blocks. */
.hours .blk > .blk-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--hs-now);z-index:2;pointer-events:none}
.hours .blk.drag > .blk-now{display:none}
.hours .blk .tm{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hours .blk.done{opacity:1;color:var(--hs-muted);background:color-mix(in srgb,var(--tc-soft,var(--hs-surface)) 50%,var(--hs-bg));box-shadow:none}
.blk.done b{text-decoration:line-through}
.blk.locked{cursor:pointer}
/* School calendar on the plan: breaks and holidays (gold), term starts and ends (teal). */
/* Details window: time spent on one line; how it went as a row of faces. */
/* Folding sections in the details window: log history, a workshop's guide. */
.fold{border:1px solid var(--hs-border);border-radius:18px;background:var(--hs-surface)}
.fold>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;cursor:pointer;font-weight:600}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .chev{transition:transform .2s}
.fold[open]>summary .chev{transform:rotate(180deg)}
.fold-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
/* The title, with the minutes and ages under it: beside it, long ages squeezed the title into them (Derek, October 15). */
.guide>summary .guide-h{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 0}
.guide>summary .guide-h .small{font-weight:400}
.guide h3{margin:6px 0 2px;font-size:15px}
.guide p,.guide ul,.guide ol{margin:0}
.guide ul,.guide ol{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.guide-art{margin:0}
.guide-art img{width:100%;height:auto;border-radius:14px;display:block}
.guide-art figcaption{font-size:13px;color:var(--hs-muted);margin-top:4px}
.guide-print{display:none}
.hist{gap:0;padding:0 6px 6px}
.hist-row{display:flex;align-items:flex-start;gap:10px;padding:8px;border-top:1px solid var(--hs-border)}
.hist-row:first-child{border-top:0}
.hist-i{font-size:20px;line-height:28px;width:28px;text-align:center;flex:none}
.hist-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hist-row .tx b{font-weight:600;font-size:14px}
.clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:pre-line}
.checklist{display:flex;flex-direction:column;border:1px solid var(--hs-border);border-radius:18px;overflow:hidden}
.check-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px;border-top:1px solid var(--hs-border);cursor:pointer}
.check-row:first-child{border-top:0}
.check-row input{width:24px;height:24px;accent-color:var(--hs-primary);flex:none}
/* Only a chore's steps are crossed off when ticked. Everywhere else a tick means "include" (Derek, October 13: checked
   places in Event filters looked crossed out). */
.checklist.steps .check-row:has(input:checked) span{text-decoration:line-through;color:var(--hs-muted)}
.filter-list .check-row:has(input:not(:checked)) .ef-name{color:var(--hs-muted)}
.ef-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.ef-line{font-size:13px}
.check-row.ef-venue{padding-left:40px}
.ef-kinds button .small{font-weight:500}
.ev-days .chip{gap:4px}
.logmark{display:inline-flex;color:var(--hs-muted)}
/* Calendar: on a laptop the hours scroll in their own area (calscroll.js), and the page keeps room for a scroll bar
   so the top bar never shifts. While dragging, others slide aside and hop over (drag.js reorderPreview). */
@media (min-width:840px){html{scrollbar-gutter:stable}}
/* And on a laptop the scroll bar itself is always there, so the right column looks the same on every page, centered
   (Derek, October 28: "on the homepage, when there's no scroll bar, they look like they're slightly to the left"): an
   empty space kept for it read as part of the column. While a sheet holds the page still it is kept as room. */
@media (min-width:1024px){body{overflow-y:scroll}}
/* Laptop week, By time: the days side by side (four across on a wide screen), each in time order. */
.cards.wk-agenda{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start;padding:4px 16px 8px}
.cards.wk-agenda>.card{margin:0}
.cal-scroll{overflow-y:auto;overscroll-behavior:contain;position:relative}
@media (min-width:840px){#main:has(.cal-scroll){padding-bottom:8px}} /* the hours reach the bottom of the window; + floats over them */
.blk{transition:top .16s ease}
.blk.drag{transition:none}
.blk.displaced{box-shadow:0 0 0 2px color-mix(in srgb,var(--hs-primary) 35%,transparent)}
.blk.blocked{border:2px dashed var(--hs-danger)!important;background:color-mix(in srgb,var(--hs-danger) 8%,var(--hs-surface))!important}
/* Editor: more kinds, links, a custom repeat. */
.opt-more{display:contents}
.opt-more[hidden]{display:none}
.link-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 40px;gap:8px;align-items:center}
@media (max-width:599px){.link-row{grid-template-columns:minmax(0,1fr) 40px}.link-row [data-llabel]{grid-column:1/2}.link-row [data-lurl]{grid-column:1/2;grid-row:2}.link-row [data-rmlink]{grid-row:1/3;grid-column:2}}
.custom-rep{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border:1px solid var(--hs-border);border-radius:18px;margin-top:-8px}
.custom-rep[hidden]{display:none}
.opt-chips .day1{width:40px;padding:0;justify-content:center}
.wk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:0 16px 12px}
.wk-stats>div{background:var(--hs-bg);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.wk-stats b{font-size:20px}
.wk-stats span{font-size:13px;color:var(--hs-muted)}
.mood-count{font-size:18px;background:var(--hs-bg);border-radius:999px;padding:2px 10px}
/* Records (batch 3): attendance days, report card, portfolio; each prints on its own. */
.print-only{display:none}
.mon .d{position:relative}
.mon .d .att-edit{position:absolute;top:2px;right:2px;color:var(--hs-muted);line-height:0}
.att-kid{border:1px solid var(--hs-border);border-radius:18px;padding:12px;border-left:4px solid var(--kc)}
.opt-chips a.opt-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--hs-control);text-decoration:none;color:inherit;font-weight:600;font-size:14px}
.opt-chips a.opt-link[aria-pressed="true"]{background:var(--hs-primary-soft);border-color:var(--hs-primary)}
table.rc{width:calc(100% - 32px);margin:0 16px 14px;border-collapse:collapse;font-size:14px}
table.rc th,table.rc td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--hs-border)}
.portfolio{margin:8px 12px;padding:16px 18px;background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);display:flex;flex-direction:column;gap:8px}
.portfolio h2{margin:0;font-size:22px}
.portfolio h3{margin:10px 0 2px;font-size:16px}
.portfolio p{margin:0}
.portfolio .wk-stats{padding:0}
.pf-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.pf-samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pf-sample{border:1px solid var(--hs-border);border-radius:14px;background:var(--hs-bg);padding:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;cursor:pointer;color:inherit}
.pf-sample .th{width:100%;aspect-ratio:4/3;border-radius:10px;background:var(--hs-raised);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pf-sample .th img{width:100%;height:100%;object-fit:cover}
/* A long file name wraps inside its tile (Derek, October 14). */
.pf-sample b{overflow-wrap:anywhere}
/* Course pace (courses.js): progress and whether it finishes on time. */
.pace{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pace .bar{display:block;height:6px;border-radius:3px;background:var(--hs-raised);overflow:hidden;max-width:260px}
.pace .bar i{display:block;height:100%;background:var(--hs-primary);border-radius:3px}
.ok-text{color:var(--hs-success)}
.carry-acts{display:flex;gap:6px;margin-right:8px;flex:none}
.carry-acts .btn{height:36px;padding:0 12px}
/* From yesterday (Derek, October 13): an attention card in the warm emphasis tokens, Light and Dark, with each item's
   Move to today and Mark done in plain view. On a phone the two buttons sit under the item. */
.card.carry{background:var(--hs-emph-soft);box-shadow:inset 4px 0 0 var(--hs-emph),var(--hs-shadow)}
.carry-head{display:flex;align-items:flex-start;gap:14px;padding:14px 16px 10px 20px}
.carry-head > .ms{color:var(--hs-emph);margin-top:1px}
.carry-head .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.carry-head .tx b{font-size:16px;font-weight:700}
.carry-head .tx span{font-size:14px;color:var(--hs-text)}
.carry .carry-row{background:transparent;border-top-color:color-mix(in srgb,var(--hs-emph) 25%,var(--hs-border));flex-wrap:wrap;padding-left:4px}
.carry .carry-row .m{color:var(--hs-text)}
.carry .carry-acts{gap:8px;margin-right:12px}
.carry .carry-acts .btn{gap:4px}
.carry .carry-acts .btn.outlined{border-color:var(--hs-emph);background:var(--hs-surface)}
.carry-foot{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:4px 8px 8px;border-top:1px solid color-mix(in srgb,var(--hs-emph) 25%,var(--hs-border))}
.carry-foot:not(:has(button)){display:none}
@media (max-width:599px){.carry .carry-acts{width:100%;justify-content:flex-end;margin:0 12px 10px 0}.carry .carry-row .body{padding-right:12px}}
.sheet-acts{display:flex;flex-wrap:wrap;gap:2px;margin:0 -12px;padding-top:4px;border-top:1px solid var(--hs-border)}
.sheet-acts .btn{height:40px;padding:0 12px}
.btn.text.danger-text{color:var(--hs-danger)}
.time-spent{gap:6px}
.time-spent .input{width:80px;text-align:center;flex:none}
.time-spent .icon-btn{font-size:22px;border:1px solid var(--hs-border);border-radius:50%;flex:none}
.mood-row{display:flex;gap:6px;flex-wrap:wrap}
/* Photos, Camera, then the microphone at the far right, on one line on a phone (lesson.js; Derek, October 22). */
.media-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.media-row .dict{margin-left:auto}
.media-row .dict[aria-pressed="true"]{background:var(--hs-primary-soft);box-shadow:inset 0 0 0 2px var(--hs-primary)}
@media (max-width:599px){.media-row{flex-wrap:nowrap}.media-row .dict{width:48px;min-width:48px;padding:0;justify-content:center}.media-row .dict .dict-l{display:none}}
.mood-row button{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--hs-border);background:none;font-size:24px;line-height:1;cursor:pointer;padding:0}
.mood-row button[aria-pressed="true"]{background:var(--hs-primary-soft);border-color:var(--hs-primary);box-shadow:inset 0 0 0 2px var(--hs-primary)}
.cal-mark{display:inline-block;max-width:100%;padding:1px 8px;border-radius:10px;font-size:11px;line-height:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--hs-gold-soft);color:var(--hs-on-gold-soft,var(--hs-text))}
.cal-mark.holiday{background:var(--hs-emph-soft);color:var(--hs-text)}
.cal-mark.term{background:var(--hs-teal-soft);color:var(--hs-text)}
.cal-bar{display:block;height:4px;border-radius:2px;margin:2px 4px 0;background:var(--hs-gold)}
.cal-bar.term{background:var(--hs-teal)}
.cal-bar.holiday{background:var(--hs-emph)}
.wk .cell.off{background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--hs-gold) 7%,transparent) 8px 16px)}
.wk .hd .cal-mark{margin-top:2px}
.blk.more{white-space:nowrap;font-size:12px;background:var(--hs-primary-soft);color:var(--hs-primary);border-left-color:var(--hs-primary);font-weight:700;align-items:center;justify-content:center;padding:2px 6px}
.blk .lk{position:absolute;top:3px;right:4px;opacity:.7;line-height:0}
.blk:has(.lk) b{padding-right:16px}
.it.locked{cursor:pointer}
.lock-tip{position:fixed;z-index:90;display:flex;gap:8px;align-items:flex-start;max-width:260px;padding:8px 12px;border-radius:12px;background:var(--hs-inv);color:var(--hs-on-inv);box-shadow:0 4px 14px rgba(16,24,40,.3);font-size:13px;line-height:1.3;pointer-events:none;animation:fade .12s}
.lock-tip b{display:block;font-size:14px}
.lock-tip small{display:block;opacity:.85;font-size:12px}
.nudge{animation:nudge .32s}
@keyframes nudge{0%,100%{translate:0}25%{translate:-4px}75%{translate:4px}}
.blk.ghost{opacity:.35}
.blk.drag{z-index:10;box-shadow:var(--hs-shadow-raised);border:2px dashed var(--hs-primary);background:var(--hs-primary-soft)}
.blk:has(.rs){padding-bottom:10px}
.blk .rs{position:absolute;left:0;right:0;bottom:0;height:14px;cursor:ns-resize;touch-action:none}
.blk .rs::after{content:'';position:absolute;left:50%;bottom:3px;width:20px;height:3px;margin-left:-10px;border-radius:2px;background:var(--hs-control);opacity:.6}

.wk{display:grid;border-top:1px solid var(--hs-border)}
.wk .hd{padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;border-bottom:1px solid var(--hs-border);background:var(--hs-surface)}
/* One day heading for every day and week grid (dayhead.js; Derek, October 20, note 14): Plan's small weekday over a
   large number, today in the filled circle. */
.dayhead{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;line-height:1.2}
.dayhead .dh-w{font-size:12px;font-weight:600;color:var(--hs-muted)}
.dayhead .dh-n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--hs-text)}
.dayhead.today .dh-w{color:var(--hs-primary)}
.dayhead.today .dh-n{background:var(--hs-primary);color:var(--hs-on-primary)}
.wk .lab{padding:10px 8px 10px 12px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--hs-border);border-bottom:1px solid var(--hs-border)}
.wk .cell{min-height:108px;padding:6px 4px 28px;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--hs-border);border-bottom:1px solid var(--hs-border);position:relative}
.wk .cell.today{background:color-mix(in srgb,var(--hs-primary) 5%,transparent)}
.wk .cell.drop{background:var(--hs-primary-soft)}
.wk .cell .add{position:absolute;left:4px;right:4px;bottom:4px;height:22px;border:1px dashed transparent;border-radius:11px;background:none;color:var(--hs-muted);display:flex;align-items:center;justify-content:center;opacity:0}
.wk .cell:hover .add,.wk .cell .add:focus-visible{opacity:1;border-color:var(--hs-border)}
.it{padding:5px 8px;border-radius:12px;background:var(--hs-bg);border:1px solid transparent;display:flex;flex-direction:column;gap:1px;text-align:left;font-size:12px;line-height:1.3;width:100%;cursor:grab;touch-action:manipulation}
.it .tm{font-size:11px;color:var(--hs-muted);display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.it b{font-weight:500}
.it.done b{color:var(--hs-muted);text-decoration:line-through}
.it.locked{background:var(--hs-raised)}
.it.fam{border-left:3px solid var(--hs-teal)}
.it.drag{opacity:.4}

/* ---------- month ---------- */
.mon{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.mon .dh{text-align:center;font-size:12px;font-weight:600;color:var(--hs-muted);padding:4px 0}
.mon .d{min-height:56px;border:0;background:none;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;color:inherit}
.mon .d .n{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.mon .d.today .n{background:var(--hs-primary);color:var(--hs-on-primary)}
.mon .d.sel{background:var(--hs-primary-soft)}
.mon .d.out{opacity:.35}
.mon .d.off .n{color:var(--hs-muted)}
.mon .dots{display:flex;gap:2px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:100%}
.mon .dots i{width:6px;height:6px;border-radius:50%;background:var(--kc)}
.mon .dots em{font-size:10px;font-style:normal;color:var(--hs-muted)}
@media (min-width:840px){
  .mon .d{min-height:112px;align-items:stretch;padding:4px}
  .mon .d .n{align-self:center}
  .mon .d .mi{display:block;font-size:11px;line-height:1.25;text-align:left;padding:2px 6px;border-radius:8px;background:var(--hs-bg);border-left:3px solid var(--kc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mon .dots{display:none}
}
@media (max-width:839px){.mon .d .mi{display:none}}
/* Attendance's month has no items: on a laptop it keeps the per-child dots and a shorter day box. */
@media (min-width:840px){.mon.att .d{min-height:72px;align-items:center}.mon.att .dots{display:flex}}
@media (min-width:840px){
  .mon.fit{grid-template-rows:auto repeat(var(--weeks,6),minmax(0,1fr))}
  .mon.fit .d{min-height:0;overflow:hidden}
  #main:has(.mon.fit){padding-bottom:8px}
  body.with-wx #main:has(.mon.fit){padding-bottom:var(--hs-wx-room)}
}
/* Laptop month: a day is a box with its number, its items (each opens) and Add. */
.mon div.d{position:relative;cursor:pointer}
.mon div.d .n{border:0;background:none;color:inherit;cursor:pointer;flex:none}
.mon div.d .n:hover{background:var(--hs-raised)}
.mon div.d button.mi{border-top:0;border-right:0;border-bottom:0;color:inherit;cursor:pointer;width:100%;font-family:inherit}
.mon div.d button.mi:hover{background:var(--hs-raised)}
.mon div.d button.mi.done{text-decoration:line-through;color:var(--hs-muted)}
.mon div.d button.mi.more{border:0;background:none;color:var(--hs-primary);font-weight:600}
.mon div.d .add{position:absolute;right:4px;bottom:4px;width:26px;height:26px;border-radius:50%;border:1px solid var(--hs-border);background:var(--hs-surface);color:var(--hs-muted);display:flex;align-items:center;justify-content:center;opacity:0}
.mon div.d:hover .add,.mon div.d .add:focus-visible{opacity:1}
.it .cn,.wk-row .cn,.list-row .cn{display:block;font-size:11px;color:var(--hs-muted);font-weight:500}
.theme-btn{border:0;background:none;color:var(--hs-teal);font-weight:700;font-size:13px;display:flex;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;padding:4px;border-radius:8px;max-width:100%}
.theme-btn:hover{background:var(--hs-raised)}
/* Discover's week theme, top center (Derek, October 14); with none yet, a nudge to add one. */
.disc-theme{display:flex;justify-content:center;padding:8px 12px 2px}
.theme-pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;padding:4px 14px;border:1px solid var(--hs-border);border-radius:18px;background:var(--hs-surface);color:var(--hs-teal);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.theme-pill span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-pill b{color:var(--hs-text)}
.theme-pill:hover{background:var(--hs-raised)}
.theme-pill.nudge{border-style:dashed;border-color:var(--hs-primary);background:var(--hs-primary-soft);color:var(--hs-primary-on-soft)}
.disc-match{justify-content:center;gap:8px;flex-wrap:wrap;padding:0 16px 6px;text-align:center}
.th-sugg{display:flex;flex-direction:column;border:1px solid var(--hs-border);border-radius:18px;overflow:hidden}
.th-row{border-top:1px solid var(--hs-border);display:flex;flex-direction:column}
.th-row:first-child{border-top:0}
.th-row .list-row{border:0}
.th-row .btn{align-self:flex-start;margin:0 0 6px 8px}

/* ---------- discover ---------- */
.carousel{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
/* A mouse can't swipe sideways, so on a laptop the week's picks sit in a grid instead of a swipe row. */
@media (min-width:840px){.carousel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;scroll-snap-type:none}.carousel>.rcard,.carousel>.skel{width:auto!important}}
.rcard{flex:none;width:240px;scroll-snap-align:start;background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);overflow:hidden;display:flex;flex-direction:column}
.rcard .art{height:96px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--art-bg,var(--hs-raised));color:var(--art-fg,var(--hs-muted))}
.rcard .art img{width:100%;height:100%;object-fit:contain}
.rcard .art .type{position:absolute;left:10px;top:10px;padding:2px 10px;border-radius:12px;background:var(--hs-surface);color:var(--hs-text);font-size:11px;font-weight:700}
.rcard .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.rcard .bd b{font-size:15px;line-height:1.3}
.rcard .why{font-size:13px;color:var(--hs-teal);line-height:1.35}
.rcard .acts{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;padding:0 16px}
.rgrid .rcard{width:auto}
.rlist .list-row .thumb{flex:none;width:56px;height:56px;border-radius:var(--hs-r-thumb);display:flex;align-items:center;justify-content:center;background:var(--art-bg,var(--hs-raised));color:var(--art-fg,var(--hs-muted));overflow:hidden}
.rlist .list-row .thumb img{width:100%;height:100%;object-fit:cover}
/* A local event's date in the same rounded square as a book's, video's or project's picture, in Local events' colors
   (Derek, October 15), wherever a local event is listed. */
.datebox{flex:none;width:56px;height:56px;border-radius:var(--hs-r-thumb);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--hs-emph-soft);color:var(--hs-emph)}
.datebox small{font-size:11px;font-weight:700;line-height:1.2}
.datebox b{font-size:20px;line-height:1.1}

/* ---------- laptop two-pane ---------- */
.two{display:flex;gap:16px;align-items:flex-start;padding:16px}
.two>.main{flex:1;min-width:0}
.two>.side{flex:0 0 360px;position:sticky;top:80px}
.panel{background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
@media (max-width:1099px){.two{flex-direction:column}.two>.side{position:static;flex:none;width:100%}}

/* ---------- misc ---------- */
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs .th{width:76px;height:76px;border-radius:var(--hs-r-thumb);background:var(--hs-raised);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--hs-muted)}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
/* A picture still saving shows at once, faded, until it is saved (October 22). */
.thumbs .th[data-saving] img{opacity:.55}
.thumbs .th button{position:absolute;top:2px;right:2px;width:28px;height:28px;border-radius:14px;border:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.progress{height:8px;border-radius:4px;background:var(--hs-raised);overflow:hidden}
.progress i{display:block;height:100%;background:var(--hs-primary);border-radius:4px}
.sample-bar{position:sticky;top:0;z-index:40;background:var(--hs-gold-soft);color:var(--hs-text);padding:8px 16px;font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sample-bar b{font-weight:700}
.next-bar{background:var(--hs-teal-soft);color:var(--hs-text);padding:2px 4px 2px 16px;font-size:13px;line-height:1.3;display:flex;align-items:center;gap:8px;justify-content:center}
.next-bar span{min-width:0}
.next-bar .icon-btn{width:40px;height:40px}
.next-bar a{font-weight:700;display:inline-block;padding:8px 2px;margin:-8px 0} /* a full-size tap target inside the sentence */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- start-up screens ---------- */
#app.boot{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.welcome{width:100%;display:flex;justify-content:center}
.welcome-card{width:min(440px,100%);background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.welcome-card .lockup{padding:0}
.welcome-card .lockup img.wm{height:32px}.welcome-card .lockup img.ic{height:34px}.welcome-card .lockup .name{font-size:22px}
.welcome-card h1{margin:0;font-size:26px;line-height:1.2;font-weight:800}
.welcome-card p{margin:0;font-size:16px}
#sign-in-mount{min-height:40px;display:flex;justify-content:center}

.datenav{display:flex;align-items:center;gap:4px;padding:2px 8px 0}
.datenav b{flex:1;text-align:center;font-size:17px}
/* The date beside ‹ › opens a month to go straight to any day (datepick.js, Derek, October 17). The ▾ is drawn here, so
   the date's own text stays just the date. */
.date-pick{display:inline-flex;align-items:center;justify-content:center;gap:2px;max-width:100%;min-width:0;min-height:44px;padding:0 4px 0 10px;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.date-pick::after{content:'expand_more';flex:none;width:20px;font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;color:var(--hs-muted);transition:transform .15s}
.date-pick[aria-expanded="true"]::after{transform:rotate(180deg)}
.date-pick:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
.date-pick:focus-visible{outline:2px solid var(--hs-primary);outline-offset:1px}
.datenav .date-pick{flex:1}
.datebar .date-pick{justify-content:flex-start;padding-left:2px}
.date-pick > .dp-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datepick{position:fixed;z-index:72;width:340px;max-width:calc(100vw - 16px);padding:8px 10px 6px;border-radius:var(--hs-r-menu);background:var(--hs-menu);box-shadow:var(--hs-shadow-raised);animation:fade .12s}
.datepick .dp-head{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:2px}
.datepick .dp-title{font-size:16px}
.datepick .dp-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.datepick .dp-dow{text-align:center;font-size:12px;font-weight:700;color:var(--hs-muted);padding:4px 0}
.datepick .dp-day{height:44px;min-width:0;border:0;border-radius:12px;background:none;color:var(--hs-text);font:inherit;font-size:15px;cursor:pointer}
.datepick .dp-day.out{color:var(--hs-muted)}
.datepick .dp-day:hover{background:color-mix(in srgb,var(--hs-text) 7%,transparent)}
.datepick .dp-day.shown{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);font-weight:700}
.datepick .dp-day.today{box-shadow:inset 0 0 0 2px var(--hs-primary);font-weight:700}
.datepick .dp-day:focus-visible{outline:2px solid var(--hs-primary);outline-offset:1px}
.datepick .dp-foot{display:flex;justify-content:flex-end;margin-top:6px;padding-top:4px;border-top:1px solid var(--hs-border)}
.tag.link{height:34px;padding:0 12px;font-size:13px;text-decoration:none}

/* ---------- print: the content only ---------- */
/* ---- batch 2–5 pages: Discover services, workshops, year, other calendars ---- */
.svc{display:inline-flex;flex-wrap:wrap;gap:4px}
.svc-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:600;background:var(--hs-teal-soft);color:var(--hs-text);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.attrib{font-size:12px;color:var(--hs-muted);margin:0;padding:4px 20px 12px}
.age-warn{color:var(--hs-emph)}
ul.checks{margin:0;padding-left:20px}
ul.checks li{margin:2px 0}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0 12px}
.ws-card{display:flex;flex-direction:column;text-align:left;border:1px solid var(--hs-border);border-radius:var(--hs-r-card);background:var(--hs-surface);overflow:hidden;padding:0;cursor:pointer;color:var(--hs-text);font:inherit}
.ws-card img,.ws-noart{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--hs-raised);display:flex;align-items:center;justify-content:center;color:var(--hs-muted)}
.ws-card .tx{display:flex;flex-direction:column;gap:2px;padding:8px 12px 12px;min-width:0}
.ws-card:hover{box-shadow:var(--hs-shadow)}
.yr-weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:4px 12px 12px}
.yr-week{position:relative;display:flex;flex-direction:column;gap:1px;padding:8px 10px 12px;border-radius:14px;background:var(--hs-surface);border:1px solid var(--hs-border);color:var(--hs-text);text-decoration:none;overflow:hidden;min-height:44px}
.yr-week.now{border-color:var(--hs-primary);box-shadow:0 0 0 1px var(--hs-primary)}
.yr-week .fill{position:absolute;left:0;bottom:0;height:4px;background:var(--hs-primary);border-radius:0 2px 0 0}
.cal-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--xc,var(--hs-muted))}
.list-row .cal-dot{margin-top:4px}
.xrow{color:var(--hs-text)}
.xrow .tx>.one:first-child{font-size:14px}
.xgroup .group-h .meta{font-style:italic}
.xev{position:absolute;z-index:0;display:flex;align-items:flex-start;padding:3px 6px;border:0;border-left:3px solid var(--xc);border-radius:8px;background:color-mix(in srgb,var(--xc) 14%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--xc) 10%,transparent) 6px 12px);color:var(--hs-text);font:inherit;font-size:11px;line-height:1.2;text-align:left;overflow:hidden;cursor:pointer}
.xev .one{opacity:.85}
.hours .blk:not(.drag){z-index:1}
.care-page{max-width:760px;margin:0 auto;padding-bottom:24px}
@media print{.xev,.xrow,.xgroup{display:none!important}}

@media print {
  .rail,.navbar,.sidenav,.toolbar,.fab,.fabs,#banner,.chips,.snack,.scrim,.sheet,.menu,.drawer,.acct,.row .trail,.row .lead,.datenav .icon-btn,.topbar .icon-btn,.wk .cell .add,.blk .rs{display:none!important}
  body{background:#fff;color:#000}
  /* Printing one item: just its details window. */
  body.print-att #app .page>*:not([data-body]),body.print-att [data-body]>*:not(.att-print){display:none!important}
  body.print-att .att-print{display:block!important}
  .att-print table{width:100%;border-collapse:collapse;font-size:10pt}
  .att-print th,.att-print td{border:1px solid #999;padding:3px 5px;text-align:left}
  body.print-grades #app .page>*:not([data-body]),body.print-grades .no-print{display:none!important}
  body.print-portfolio #app .page>*:not([data-body]),body.print-portfolio [data-body]>*:not([data-portfolio]){display:none!important}
  body.print-portfolio .portfolio{box-shadow:none;margin:0;padding:0}
  .no-print{display:none!important}
  body.print-sheet #app{display:none!important}
  body.print-sheet .sheet{display:block!important;position:static!important;transform:none!important;max-height:none!important;width:auto!important;box-shadow:none!important;overflow:visible!important}
  body.print-sheet .fold-body{display:flex!important}
  body.print-guide .sheet .sh-body>:not([data-guide]){display:none!important}
  body.print-guide .fold{border:0}
  body.print-guide .fold>summary .ms{display:none}
  body.print-guide .guide-print{display:block!important;break-before:page}
  .guide-print table{width:100%;border-collapse:collapse;margin:6px 0 14px}
  .guide-print th,.guide-print td{border:1px solid #999;padding:6px;text-align:left;height:28px}
  .guide-print .lines{height:72px;border-bottom:1px solid #999;margin-bottom:10px;background:repeating-linear-gradient(transparent 0 23px,#ccc 23px 24px)}
  .guide-print .draw{height:360px;border:1px solid #999;border-radius:8px}
  body.print-sheet .sheet .btn,body.print-sheet .sheet .icon-btn,body.print-sheet .sheet .mood-row,body.print-sheet .sheet .time-spent .icon-btn,body.print-sheet .sheet-acts{display:none!important}
  .shell{display:block}
  .topbar{position:static;height:auto;padding:0 0 8px}
  main.content{padding:0}
  .group,.card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .row{min-height:0}
}

/* ---------- time fields (js/app/timefield.js, Derek, October 13, 2026) ----------
   Typed or picked from a list of 15-minute times; no browser clock icon. The list floats above the sheet. */
.tf{display:block;position:relative;min-width:0}
.tf .tf-input{width:100%}
.list-row .tf{display:inline-block;width:132px;flex:none}
/* The clock for a time on a touch screen (timedial.js; Derek, October 27, after Google Calendar's): the hour and minute
   large, AM and PM beside them, a dial, and Cancel / OK; the keyboard button types it instead. */
.td{display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 0 0}
.td-label{align-self:flex-start;margin:0;font-size:13px;font-weight:600;color:var(--hs-muted)}
.td-top{display:flex;align-items:center;gap:6px}
.td-n{width:92px;height:72px;border:0;border-radius:12px;background:color-mix(in srgb,var(--hs-text) 8%,var(--hs-surface));color:var(--hs-text);font:inherit;font-size:46px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer}
.td-n.on{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft)}
.td-colon{font-size:42px;line-height:1;color:var(--hs-text)}
.td-ap{display:flex;flex-direction:column;margin-left:8px;border:1px solid var(--hs-control);border-radius:12px;overflow:hidden}
.td-ap button{width:54px;height:35px;border:0;background:none;color:var(--hs-text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.td-ap button + button{border-top:1px solid var(--hs-control)}
.td-ap button[aria-pressed="true"]{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft)}
.td-len{margin:0;min-height:18px;font-size:13px;color:var(--hs-muted)}
.td-dial{position:relative;width:min(256px,70vw);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.td-face{position:absolute;inset:0;width:100%;height:100%}
.td-bg{fill:color-mix(in srgb,var(--hs-text) 7%,var(--hs-surface))}
.td-hand{stroke:var(--hs-primary);stroke-width:2}
.td-pin,.td-knob{fill:var(--hs-primary)}
.td-v{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--hs-text);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer}
.td-v.on{color:var(--hs-on-primary);font-weight:700}
.sheet .sh-actions .td-type{margin-right:auto}
/* Typing in the clock's pop-up (Derek, October 28: "like Google, where you stay in the pop-up"). */
.td-field{display:flex;flex-direction:column;gap:4px;margin:0}
.td-field span{font-size:12px;color:var(--hs-muted)}
.td-in{width:92px;height:72px;border:2px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--hs-text) 8%,var(--hs-surface));color:var(--hs-text);font:inherit;font-size:46px;line-height:1;text-align:center;font-variant-numeric:tabular-nums;padding:0}
.td-in:focus{outline:none;border-color:var(--hs-primary);background:var(--hs-primary-soft);color:var(--hs-primary-on-soft)}
.td-typing .td-colon{align-self:flex-start;margin-top:12px}
.tf-pop{position:fixed;z-index:73;padding:6px 4px 6px 0;overflow:hidden;border-radius:var(--hs-r-menu);background:var(--hs-menu);box-shadow:var(--hs-shadow-raised);animation:fade .1s}
.tf-list{position:relative;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.tf-list [role="option"]{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;font-size:15px;color:var(--hs-text);cursor:pointer;white-space:nowrap}
.tf-list [role="option"]:hover{background:color-mix(in srgb,var(--hs-text) 7%,transparent)}
.tf-list [role="option"][aria-selected="true"]{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);font-weight:700}
.tf-list [role="option"].active{outline:2px solid var(--hs-primary);outline-offset:-2px}
.tf-list .tf-len{color:var(--hs-muted);font-size:13px;font-weight:500}
.tf-list .tf-len::before{content:'· '}
.tf-list [aria-selected="true"] .tf-len{color:inherit}
.tf-list .tf-none{padding:10px 16px;font-size:14px;color:var(--hs-muted)}

/* ---------- Curriculum: find a ready-made curriculum (screens/courses.js, js/app/catalog.js, October 13) ---------- */
.cat-find{display:flex;flex-direction:column;gap:10px;margin:12px 12px 0;padding:14px 14px 10px;border-radius:var(--hs-r-card);background:var(--hs-surface);box-shadow:var(--hs-shadow)}
.cat-search{gap:8px;flex-wrap:wrap}
.cat-q{position:relative;flex:1 1 260px;min-width:0;display:block}
.cat-q > .ms{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--hs-muted);pointer-events:none}
.cat-q .input{padding-left:44px}
.cat-search .select{width:auto;flex:0 1 auto}
.cat-results{box-shadow:none;border:1px solid var(--hs-border)}
.cat-results .tx .tag{align-self:flex-start;margin-top:4px}
.cat-none{margin:0;padding:4px 4px 0}
.cat-suggest{margin:0;align-items:center}
.cat-suggest .btn{height:40px;flex:none}

.acct > .acct-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;margin:14px 4px 12px 0;padding:0}
/* Thin scroll bars in the app's colors, Light and Dark, no arrow buttons (October 13). */
.sheet .sh-body,.menu-scroll,.dr-scroll,.acct-scroll,.dp-body,.tf-list,.cal-scroll,.setup-outline,.day-preview{scrollbar-width:thin;scrollbar-color:var(--hs-control) transparent}
.sheet .sh-body::-webkit-scrollbar,.menu-scroll::-webkit-scrollbar,.dr-scroll::-webkit-scrollbar,.acct-scroll::-webkit-scrollbar,.dp-body::-webkit-scrollbar,.tf-list::-webkit-scrollbar,.cal-scroll::-webkit-scrollbar,.setup-outline::-webkit-scrollbar{width:8px;height:8px}
.sheet .sh-body::-webkit-scrollbar-thumb,.menu-scroll::-webkit-scrollbar-thumb,.dr-scroll::-webkit-scrollbar-thumb,.acct-scroll::-webkit-scrollbar-thumb,.dp-body::-webkit-scrollbar-thumb,.tf-list::-webkit-scrollbar-thumb,.cal-scroll::-webkit-scrollbar-thumb,.setup-outline::-webkit-scrollbar-thumb{background:var(--hs-control);border-radius:4px}
.sheet .sh-body::-webkit-scrollbar-track,.menu-scroll::-webkit-scrollbar-track,.dr-scroll::-webkit-scrollbar-track,.acct-scroll::-webkit-scrollbar-track,.dp-body::-webkit-scrollbar-track,.tf-list::-webkit-scrollbar-track,.cal-scroll::-webkit-scrollbar-track,.setup-outline::-webkit-scrollbar-track{background:transparent}
:is(.sheet .sh-body,.menu-scroll,.dr-scroll,.acct-scroll,.dp-body,.tf-list,.cal-scroll,.setup-outline)::-webkit-scrollbar-button{display:none;width:0;height:0}
@media print{.sheet .sh-body{overflow:visible!important;max-height:none!important;margin:0!important}}
/* A resized side panel's width (js/app/resize.js), laptops only. */
@media (min-width:1024px){.sheet.side{width:var(--hs-side-w,440px)}}

/* ---------- Settings: search, sections and their menu (screens/pages.js, js/app/find.js, October 13) ---------- */
.find{position:relative;margin:12px 12px 0;display:flex;flex-direction:column;gap:6px}
.find .cat-q{flex:none}
.find-res{box-shadow:var(--hs-shadow-raised);border:1px solid var(--hs-border)}
.find-res .list-row .tx span{white-space:normal}
.find-none{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.set-jump{display:flex;align-items:center;gap:10px;margin:12px 12px 0}
.set-jump .select{width:auto;flex:1 1 auto;max-width:320px}
.set-nav{display:none}
.set-sec{scroll-margin-top:calc(var(--hs-topbar) + var(--hs-safe-t) + 8px)}
/* Records' children (the tabs that follow Children shown). */
.rec-kids{padding:8px 12px 0}
@media print{.rec-layout{display:block!important}.rec-layout .set-nav,.rec-kids{display:none!important}}
/* A part of a Settings section (Calendars’ two directions, Notifications’ recap, Discover’s library and local events). */
.set-sub{margin:16px 20px 6px;font-size:15px;font-weight:700;line-height:1.3;scroll-margin-top:calc(var(--hs-topbar) + var(--hs-safe-t) + 8px)}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,35%{background:var(--hs-primary-soft);box-shadow:inset 0 0 0 2px var(--hs-primary)}100%{background:inherit;box-shadow:none}}
@media (min-width:840px){
  /* One width for every page with a section menu, and a menu wide enough for each section's name on one line (Derek,
     October 15: "The content width for the records and the settings and community screens is wider than those for the
     curriculum and kids screens"; "Homeschool groups near you" wrapped). The page grew with the menu, so the content
     column is as wide as before. */
  .page:is(.set-page,:has(> .set-layout.has-nav)){max-width:1160px}
  .set-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:8px;align-items:start}
  .set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t) + 12px);margin:16px 0 0 12px;padding:6px;border-radius:var(--hs-r-card);background:var(--hs-surface);box-shadow:var(--hs-shadow)}
  .set-nav a{display:flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;color:var(--hs-text);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
  .set-nav a:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
  .set-nav a[aria-current="true"],.set-nav a[aria-current="page"]{background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);font-weight:700}
  /* Records (October 14): its sections in the column, so the phone's chips go. */
  .rec-layout .set-nav a{gap:10px}
  .rec-layout .rec-chips{display:none}
  .set-nav a:focus-visible{outline-offset:-3px}
  .set-jump{display:none}
}
@media (prefers-reduced-motion:reduce){.flash{animation:none;outline:2px solid var(--hs-primary)}}

/* ---------- Walkthrough batch 2 (Derek, October 14, 2026) ---------- */
/* Section menus on more pages (item 23): a page with fewer than three sections has no menu column. */
.set-layout:not(.has-nav){display:block}
/* Calendar links (item 35): the step-by-step guides for Google, Apple and Outlook, both directions (screens/sharing.js). */
.cal-fold{margin:8px 12px 0}
.cal-guide{display:flex;flex-direction:column;gap:10px}
.cal-guide-body{display:flex;flex-direction:column;gap:8px}
.cal-guide-t{margin:4px 0 0;font-size:16px;font-weight:700;line-height:1.3}
.cal-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.cal-note{margin:0;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--hs-teal-soft);color:var(--hs-text);font-size:14px;line-height:1.45}
.cal-note > .ms{color:var(--hs-teal);margin-top:1px}
.cal-official{align-self:flex-start;padding:0 10px;margin-left:-10px;white-space:normal;text-align:left;height:auto;min-height:40px}
.cal-more{border-top:1px solid var(--hs-border);padding-top:8px}
.cal-more > summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.cal-more p{margin:6px 0 0;font-size:14px;line-height:1.5}
/* Accents (item 34): the kit's plum, teal, gold, emphasis and blue on small icons and headings only; large surfaces stay
   neutral and each item's left edge stays its child's color. Each is 4.5:1 or better on the surfaces it sits on. */
.c-primary{color:var(--hs-primary)}.c-teal{color:var(--hs-teal)}.c-plum{color:var(--hs-plum)}.c-gold{color:var(--hs-gold)}.c-emph{color:var(--hs-emph)}.c-success{color:var(--hs-success)}.c-muted{color:var(--hs-muted)}
.kind{display:inline-flex;flex:none;vertical-align:-3px;margin-right:3px;line-height:1}
.kind .ms{font-size:15px}
.row .m .kind .ms,.list-row .kind .ms{font-size:18px}
.mon .mi .kind .ms,.mon .mi .ovl-mark .ms{font-size:12px}
.mon .mi .kind{vertical-align:-1px;margin-right:2px}
.blk.done .kind,.it.done .kind,.wt-it.done .kind{opacity:.7}
.section-h h2 .h-icon{margin-right:8px;vertical-align:-4px}
.chip .t-icon{margin-left:-2px}
/* Overlaps (item 29): a small warning icon naming what it overlaps, and the sheet that asks first. */
.ovl-mark{display:inline-flex;flex:none;color:var(--hs-emph);line-height:0;vertical-align:-3px}
.ovl-mark .ms{font-size:16px}
.blk .ovl-mark.on-blk{position:absolute;top:3px;right:4px}
.blk:has(.lk) .ovl-mark.on-blk{right:22px}
.blk:has(.ovl-mark.on-blk) b{padding-right:16px}
.blk:has(.lk):has(.ovl-mark.on-blk) b{padding-right:34px}
.blk.ovl,.it.ovl,.wt-it.ovl{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hs-emph) 55%,transparent)}
.row.ovl .ovl-mark{margin:0 2px}
.ovl-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ovl-list li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.ovl-list .ms,.ovl-sheet .sh-title b{color:inherit}
.ovl-list .ms{color:var(--hs-emph)}
.ovl-note{display:flex;gap:6px;align-items:flex-start;color:var(--hs-text)}
.ovl-note > .ms{color:var(--hs-emph);margin-top:2px}
/* Narrow blocks (item 29b): a box too narrow for words shows its kind icon alone; the title is in its tooltip and label. */
.blk.tiny{padding:3px 2px;align-items:center}
.blk.tiny b{font-size:0;padding-right:0!important}
.blk.tiny b .kind{margin:0}
.blk.tiny b .kind .ms{font-size:15px}
.blk.tiny .tm,.blk.tiny .also,.blk.tiny .ovl-mark.on-blk,.blk.tiny .lk{display:none}
.blk.tiny.ovl{box-shadow:inset 0 0 0 2px var(--hs-emph)}
.full-tip{max-width:320px;font-weight:600}
/* A shared item's copies in each child's column or row (item 30): the other children's dots, and hovering or focusing
   one lights up all of them. */
.also{display:inline-flex;align-items:center;gap:2px;flex:none}
.also .kdot{width:8px;height:8px;background:var(--kc-fill,var(--kc))}
.also .also-t{margin-left:4px;font-size:inherit;color:inherit}
.blk .also{position:absolute;right:4px;bottom:4px}
.blk:has(.rs) .also{bottom:11px}
.linked{outline:2px solid var(--hs-primary)!important;outline-offset:-2px;z-index:6}
.row.linked{outline-offset:-3px}
/* Plan › Day on a laptop: the date line only when it has the theme or "to review", and only as tall as they are. */
.datebar.wide{height:auto;min-height:40px;padding:4px 12px}
/* Plan › Week › By time on tablets and laptops (item 33): seven columns, every item, the day headers kept in view. */
.wkt{margin:4px 0 0}
/* The scroller itself is inset 16 px, so a scrolled week shows whole days with no sliver of the next. */
.wkt-grid{display:grid;grid-template-columns:repeat(var(--wkt-n,7),minmax(var(--wkt-min,164px),1fr));gap:8px}
.wkt-hscroll,.wkt-body{margin:0 16px}
.wkt-head{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t) + var(--hs-chips-h,56px));z-index:18;background:var(--hs-bg);display:flex;align-items:stretch;border-bottom:1px solid var(--hs-border)}
/* The header row scrolls too (with no bar of its own), in step with the columns. */
.wkt-hscroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.wkt-hscroll::-webkit-scrollbar{display:none}
.wkt-step{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:var(--hs-surface);box-shadow:var(--hs-shadow-raised);width:40px;height:40px}
.wkt-step[data-wkstep="-1"]{left:4px}.wkt-step[data-wkstep="1"]{right:4px}
.wkt-h{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px 8px;border:0;background:none;color:inherit;cursor:pointer;border-radius:14px;min-width:0}
.wkt-h:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.wkt-h .cal-mark{max-width:100%}
.wkt-body{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:8px 0 12px;scrollbar-width:thin;scrollbar-color:var(--hs-control) transparent}
.wkt-body:focus{outline:none}
.wkt-col{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:18px;background:var(--hs-surface);box-shadow:var(--hs-shadow);min-height:120px;cursor:default}
.wkt-col.today{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--hs-primary) 45%,transparent),var(--hs-shadow)}
.wkt-col.off{background:repeating-linear-gradient(135deg,var(--hs-surface) 0 8px,color-mix(in srgb,var(--hs-gold) 7%,var(--hs-surface)) 8px 16px)}
/* Week › By time tiles (Derek, October 14): colored by kind (items.js toneStyle: the kind's tone on the edge, its light
   tint behind); the children are the dots on the time line, so a tile is at most three lines. */
.wt-it,.wt-x{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;padding:6px 8px 6px 9px;border-radius:12px;border:1px solid var(--hs-border);border-left:4px solid var(--tc,var(--hs-control));background:var(--tc-soft,var(--hs-surface));color:var(--hs-text);text-align:left;font:inherit;cursor:pointer}
.wt-it:hover,.wt-x:hover{background:color-mix(in srgb,var(--hs-text) 5%,var(--tc-soft,var(--hs-surface)))}
.wt-tm{display:flex;align-items:center;gap:3px;font-size:12px;line-height:1.2;color:var(--hs-muted);min-width:0}
.wt-tm .ms{font-size:15px}
.wt-tm .kind{margin-right:1px}
.wt-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.3;font-weight:600;overflow-wrap:normal;word-break:normal}
.wt-t.one{display:block;white-space:nowrap;text-overflow:ellipsis}
.wt-it.done .wt-t{text-decoration:line-through;color:var(--hs-muted)}
/* A done tile is its struck-through title on one line (Derek, October 14). */
.wt-it.done{padding-top:5px;padding-bottom:5px;min-height:32px;justify-content:center}
.wt-it.done .wt-tm{display:none}
.wt-it.done .wt-t{-webkit-line-clamp:1;line-clamp:1}
.wt-kids{display:flex;gap:3px;align-items:center;flex:none;margin-left:4px}
/* The lock sits right after the time it locks (Derek, October 14). */
.wt-tm .wt-lock,.lock-at{display:inline-flex;flex:none;color:var(--hs-muted)}
.wt-tm .wt-lock .ms,.lock-at .ms{font-size:15px}
.wt-kids .kdot{width:8px;height:8px;background:var(--kc-fill,var(--kc))}
.wt-x{border-left-color:var(--xc);background:color-mix(in srgb,var(--xc) 10%,var(--hs-surface))}
.wt-x .cal-dot{width:8px;height:8px;background:var(--xc)}
.wkt-add{display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;margin-top:auto;border:1px dashed transparent;border-radius:12px;background:none;color:var(--hs-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;opacity:.0}
.wkt-col:hover .wkt-add,.wkt-add:focus-visible,.wkt-add.first{opacity:1;border-color:var(--hs-border)}
.wkt-add.first{color:var(--hs-primary)}
@media (hover:none){.wkt-add{opacity:1;border-color:var(--hs-border)}}
.wkt-none{margin:auto 0 4px;text-align:center;font-size:13px;color:var(--hs-muted)}
@media print{.wkt-head{position:static}.wkt-body{overflow:visible}.wkt-grid{grid-template-columns:repeat(var(--wkt-n,7),minmax(0,1fr))}.wkt-step,.wkt-add{display:none!important}}
/* The docked panel (item 32): an item's details, Move and Edit beside the calendar on a laptop. Not modal: no scrim,
   the page narrows instead of being covered, and the calendar keeps scrolling and taking clicks. With Discover docked
   (with-panel) it sits over Discover's panel, the same width. */
@media (min-width:1024px){
  .sheet.dock{position:fixed;left:auto;right:var(--hs-toolbar-w,0px);top:var(--hs-dock-top,calc(var(--hs-topbar) + var(--hs-safe-t)));bottom:0;transform:none;width:var(--hs-side-w,var(--hs-dock-w,420px));max-height:none;border-radius:0;box-shadow:none;border-left:1px solid var(--hs-border);z-index:25;padding:6px 0 14px;animation:fromright .16s ease-out}
  .sheet.dock:focus{outline:none}
  .sheet.dock:focus-visible{box-shadow:inset 0 0 0 2px var(--hs-primary)}
  .sheet.dock > .side-resizer{top:64px;bottom:72px}
  .sheet.dock .sh-head{padding:0 8px 6px 8px}
  .sheet.dock .sh-title{padding-top:10px}
  .sheet.dock .sh-body{flex:1 1 auto}
  body.with-dock:not(.with-panel) #main{margin-right:var(--hs-side-w,var(--hs-dock-w,420px))}
  body.with-panel .sheet.dock{width:var(--hs-side-w,360px)}
  body.with-dock .fabs{right:calc(var(--hs-side-w,var(--hs-dock-w,420px)) + var(--hs-toolbar-w,0px) + 24px)}
  body.with-dock.with-panel .fabs{right:calc(var(--hs-side-w,360px) + var(--hs-toolbar-w,0px) + 24px)}
  body.with-dock .snack{max-width:calc(100vw - var(--hs-rail,0px) - var(--hs-side-w,var(--hs-dock-w,420px)) - var(--hs-toolbar-w,0px) - 48px)}
}
.ghost-note{margin:0;display:flex;gap:6px;align-items:flex-start;color:var(--hs-muted)}
.ghost-note.warn{color:var(--hs-text)}
.ghost-note.warn > .ms{color:var(--hs-emph)}
.ghost-note:empty{display:none}
/* The ghost: where the change would land. Dashed, in the item's child color; amber when it would overlap. */
.ghost-prev{pointer-events:none;border-style:dashed!important;border-width:2px!important;border-color:var(--hs-primary)!important;background:color-mix(in srgb,var(--hs-primary) 10%,var(--hs-surface))!important;opacity:.95;z-index:7}
/* A preview that can be dragged to another time (ghost.js onMove). */
.ghost-prev.ghost-drag{pointer-events:auto;cursor:grab;touch-action:none;z-index:3}
.ghost-prev.ghost-drag.dragging{cursor:grabbing;opacity:.9}
.ghost-prev.ghost-ovl{border-color:var(--hs-emph)!important;background:color-mix(in srgb,var(--hs-emph) 10%,var(--hs-surface))!important}
.ghost-prev b,.ghost-prev span{font-weight:600}
.ghost-prev em{display:block;font-style:normal;font-size:11px;color:var(--hs-text)}
.blk.ghost-prev{position:absolute;padding:4px 6px;overflow:hidden;border-radius:12px;font-size:12px;line-height:1.25;display:flex;flex-direction:column;gap:1px;color:var(--hs-text)}
.mi.ghost-prev{display:block;font-size:11px;padding:2px 6px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.ghost-prev{border-radius:16px;margin:2px 6px}
.wt-warn{font-size:11px;color:var(--hs-text)}
/* The item being moved keeps its words readable (no fading): a dashed outline marks it. */
.ghost-src{outline:2px dashed var(--hs-muted)!important;outline-offset:-2px}
.blk.ghost-prev .one{display:block}
/* The calendar's hint line stays clear of the round + in the corner. */
@media (min-width:840px){.cal-hint{padding-right:88px}}
@media (min-width:1024px){.cal-hint{padding-right:200px}}
.ghost-hit{outline:2px solid var(--hs-emph)!important;outline-offset:-2px}
/* A short block (15 minutes) keeps its one line whole: less padding, a slimmer resize edge. */
.blk.short{padding-top:2px;padding-bottom:2px;justify-content:center}
.blk.short:has(.rs){padding-bottom:6px}
.blk.short .rs{height:8px}
.blk.short .rs::after{bottom:1px}
.blk .kind .ms{font-size:13px}
.blk .kind{vertical-align:-2px}
.wkt-add.first{margin-top:0}
/* The tool column on a laptop (app.js toolbar; plan.js toolRail puts Plan's tools in it): under the photo at the right
   edge since October 19 (Derek: "move all of the tools that you can use on that screen down the right side
   vertically"; at the left edge October 15–18, on the right before that). Light/Dark and Ask sit at its foot, Ask
   level with + and just right of it. Each icon says what it does on hover and on keyboard focus. Discover's panel and
   the details panel open at the window's edge and push the column left (the toolbar rules above). */
.tool-rail{display:flex;flex-direction:column;align-items:inherit;align-self:stretch;gap:6px}
@media (min-width:1024px){
  /* The page keeps clear of both columns, so the week's seven days are a little narrower (screens/plan.js weekColumns):
     all seven still fit at 1280 px. */
  .wkt-grid{--wkt-min:128px}
}
.tool-rail hr{width:28px;border:0;border-top:1px solid var(--hs-border);margin:4px 8px 4px 0;align-self:flex-end}
/* Hovering the screen's tools, or tabbing into them, widens them over the page with each tool's name and what it does
   beside its icon (Derek, October 15: "that bar could get wider, and we could have the text name for the tool… beside
   these icons"), in place of the tooltips they had. The icons stay put while it opens: it grows to the left. Light/Dark
   and Ask at the foot stay icons (named, with tooltips), so the widened tools never cover + (the pointer is often left
   over the column when a side panel closes). */
.tbar-in{position:absolute;inset:0;background:var(--hs-bg)}
.tbar-tools{position:absolute;top:0;right:0;width:100%;max-height:calc(100% - var(--tbar-foot,128px));display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:12px 10px;background:var(--hs-bg);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;z-index:1}
.tbar-tools:empty{display:none}
.tbar-foot{position:absolute;right:0;bottom:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 calc(36px + var(--hs-safe-b))}
.tr-btn{position:relative;width:44px;height:44px;flex:none;border:0;border-radius:22px;background:none;color:var(--hs-muted);display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:14px;padding:0 11px 0 0;cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:width .15s ease}
.tr-btn > .ms,.tr-btn > .tr-ico{flex:none}
.tr-ico{display:inline-flex;align-items:center;justify-content:center}
.tr-ico .tb-theme-i{width:22px;height:22px}
.tr-btn:hover,.tr-btn:focus-visible{background:color-mix(in srgb,var(--hs-text) 7%,transparent);color:var(--hs-text)}
/* Ask, the AI button: a tinted circle, level with + (both centered 58 px up). */
.tr-name{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;opacity:0;transition:opacity .1s ease;color:var(--hs-text);font-size:14px;line-height:1.25}
.tr-name b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-name span{font-size:12px;color:var(--hs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){
  .tbar-tools{transition:width .15s ease,box-shadow .15s ease}
  /* Only wider (no change of alignment or border), so the icons don't shift while it opens. */
  .tbar-tools:has(:focus-visible){width:272px;box-shadow:var(--hs-shadow-raised),inset 1px 0 0 var(--hs-border)}
  .toolbar:has(.tbar-tools :focus-visible){z-index:31}
  .tbar-tools:has(:focus-visible) .tr-btn{width:100%;padding-left:16px}
  .tbar-tools:has(:focus-visible) .tr-name{opacity:1}
  .tbar-tools:has(:focus-visible) .tool-rail hr{width:auto;margin:4px 8px;align-self:stretch}
}
/* A mouse or trackpad also opens them by resting on them (a touch screen keeps a tapped spot "hovered", and the column can
   move under it when a side panel opens). Passing over on the way somewhere else doesn't: the pointer rests a moment. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .tbar-tools:hover{width:272px;box-shadow:var(--hs-shadow-raised),inset 1px 0 0 var(--hs-border)}
  .toolbar:has(.tbar-tools:hover){z-index:31}
  .tbar-tools:hover .tr-btn{width:100%;padding-left:16px}
  .tbar-tools:hover .tr-name{opacity:1}
  .tbar-tools:hover,.tbar-tools:hover .tr-btn,.tbar-tools:hover .tr-name{transition-delay:.12s}
  .tbar-tools:hover .tool-rail hr{width:auto;margin:4px 8px;align-self:stretch}
}
@media print{.toolbar,.sidenav,.tool-rail{display:none!important}#main{margin-left:0!important;padding-right:0!important}}
/* Every screen's own tools in the same column (Derek, October 19: "move the tools for all of the screens to the right
   sidebar"): each screen wraps its action buttons (Add a chore, Starter chores, Meal settings, Print…) in .screen-tools.
   On phones and tablets the group adds nothing to the layout; on a laptop the same buttons sit in the tool column under
   the photo, as icons that show their names when the column opens, so everything they do (and every test that finds
   them) is unchanged. Actions on one item (Approve, Edit, ⋮) stay with the item. */
.screen-tools{display:contents}
@media (min-width:1024px){
  #main .screen-tools{position:fixed;top:var(--hs-chrome-top,64px);right:calc(var(--hs-toolbar-right,0px) + 1px);width:calc(var(--hs-toolbar-w) - 1px);max-height:calc(100dvh - var(--hs-chrome-top,64px) - var(--tbar-foot,128px));z-index:28;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0;padding:12px 10px;background:var(--hs-bg);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;transition:width .15s ease,box-shadow .15s ease}
  #main .screen-tools > :is(a,button,label){position:relative;flex:none;width:44px;height:44px!important;min-width:0;margin:0!important;padding:0 11px 0 0;border:0;border-radius:22px;background:none;box-shadow:none;color:var(--hs-muted);display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:14px;font-size:0;font-weight:600;line-height:1.25;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;transition:width .15s ease}
  #main .screen-tools > * > .ms{flex:none;font-size:22px}
  #main .screen-tools > .icon-btn::after{content:attr(aria-label);overflow:hidden;text-overflow:ellipsis}
  #main .screen-tools > :is(a,button,label):is(:hover,:focus-visible){background:color-mix(in srgb,var(--hs-text) 7%,transparent);color:var(--hs-text)}
  /* The main one (Add a chore, Add a recipe…) keeps its tint, as Ask does. */
  #main .screen-tools > :is(.btn.filled,.btn.tonal){color:var(--hs-primary-on-soft)}
  #main .screen-tools:has(:focus-visible){width:272px;box-shadow:var(--hs-shadow-raised),inset 1px 0 0 var(--hs-border)}
  #main .screen-tools:has(:focus-visible) > *{width:100%;padding-left:16px;font-size:14px}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  #main .screen-tools:hover{width:272px;box-shadow:var(--hs-shadow-raised),inset 1px 0 0 var(--hs-border);transition-delay:.12s}
  #main .screen-tools:hover > *{width:100%;padding-left:16px;font-size:14px;transition-delay:.12s}
}
/* Printing Plan (Derek, October 15: Discover's panel in the print "totally jacked up all the formatting… It should just
   be the calendar view, the by child view, or the by time view, formatted in a nice way to print out on 8.5 by 11").
   Letter paper; the day or week only, under its date; the calendar at its full height, not its scroll box. */
@page{size:letter;margin:.4in}
@media print{
  .disc-panel,.side-resizer,.carry,[data-catchup],.loop-card .btn,.tour-nudge,.vb-theme{display:none!important}
  .page.split{display:block!important}
  .page.split > .split-main{padding:0!important}
  .split-main.day-main > *,.split-main.day-main > .day-wrap{max-width:none}
  .cal-scroll{overflow:visible!important;height:auto!important;max-height:none!important}
  .day-any{position:static!important;max-height:none!important;overflow:visible!important}
  .plan-print-head{display:block!important;margin:0 0 8pt;font-size:15pt;font-weight:700;color:#000}
}
/* Search, Help and feedback, and the bell beside the photo (app.js GOOGLE_END; Derek, October 14 and 19), as in Google's
   apps. */
.tb-google{display:contents}
.topbar .tb-google .icon-btn[aria-current="page"]{color:var(--hs-primary-on-soft);background:var(--hs-primary-soft)}
/* Discover's details, October 14 (Derek): the address gets the room (the date and time column is only as wide as it
   needs); "For" with the age chip and ★ legend on one line, near the top; links with Save and Hide on one row. */
.ev-head{grid-template-columns:64px max-content minmax(0,1fr)}
.add-for-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.add-for-h .rec-legend{display:inline-flex;align-items:center;gap:4px}
.add-sec.in-info{padding-top:0;border-top:0;gap:12px}
.info-acts{gap:4px 8px;align-items:center}
.info-small{padding-top:10px;border-top:1px solid var(--hs-border)}
@media (max-width:599px){.ev-head{grid-template-columns:64px minmax(0,1fr)}}
/* Without a picture (an opened row on the Local events page, which shows its date tile): the when, then the where. */
.ev-head.no-thumb{grid-template-columns:max-content minmax(0,1fr)}
@media (max-width:599px){.ev-head.no-thumb{grid-template-columns:minmax(0,1fr)}}

/* Circles with other families (screens/circles.js). */
.cir-inv{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cir-inv > .wrap-flex{align-self:stretch}
.cir-kids{display:flex;flex-direction:column;gap:6px;align-self:stretch}
.cir-kid{display:flex;align-items:center;gap:10px}
.cir-kid .select{width:auto;min-width:220px;max-width:60%}

/* Homeschool groups (screens/groups.js; Derek, October 15): a card per group, as Local events shows a place. */
.grp-list{display:flex;flex-direction:column;gap:8px;padding:0 12px}
.grp{margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.grp-h{display:flex;align-items:flex-start;gap:12px}
.grp-h .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.grp-h b{font-size:16px;line-height:1.3}
.grp-ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--hs-teal-soft);color:var(--hs-teal)}
.grp-l{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px}
.grp-l > .ms{flex:none;margin-top:1px;color:var(--hs-muted)}
.grp-l a{color:var(--hs-primary);padding:2px 0}
.grp-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.grp-facts .tag{height:auto;min-height:22px;padding:2px 8px;white-space:normal;line-height:1.35}
.grp-card .grp-mini{min-height:52px;padding-left:54px}
.grp-card .grp-mini .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linklike{display:inline-block;padding:7px 0;border:0;background:none;color:var(--hs-primary);font:inherit;text-decoration:underline;cursor:pointer}

/* The item a Search result opened (app.js flashItem; Derek, October 15): it pulses three times so it's found at a glance.
   The ring is inside its edges, so a column that clips never hides it; with reduced motion it's a steady ring. */
@keyframes find-pulse{0%,100%{outline-color:transparent;box-shadow:0 0 0 0 transparent}50%{outline-color:var(--hs-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--hs-primary) 35%,transparent)}}
.find-pulse{outline:3px solid transparent;outline-offset:-3px;animation:find-pulse .85s ease-in-out 3}
@media (prefers-reduced-motion:reduce){.find-pulse{animation:none;outline-color:var(--hs-primary)}}

/* Community (screens/community.js; Derek, October 15): your circle, homeschool events and the groups near you. */
.com-h{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.com-h > .ms{color:var(--hs-teal)}
.com-h .meta{margin-left:auto;font-size:13px;color:var(--hs-muted)}
.com-faces{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 16px 8px}
.com-face{display:inline-flex;align-items:center;gap:8px;min-width:0}
.com-face .avatar{width:32px;height:32px;font-size:14px}
.com-circles{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0 16px 4px}
.com-row{border-top:0;width:auto}
/* Friends doing this too (friends.js): a small count on the local events families you know have planned or saved. */
.fr-also{flex:none;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 7px 0 5px;border-radius:11px;background:var(--hs-teal-soft);color:var(--hs-text);font-size:12px;font-weight:700;line-height:1}
.fr-also .ms{font-size:16px;color:var(--hs-teal)}
.rcard .bd .fr-also{align-self:flex-start}
.fr-line{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:14px;background:var(--hs-teal-soft);color:var(--hs-text);font-size:14px;line-height:1.45}
.fr-line > .ms{flex:none;color:var(--hs-teal)}
.fr-off{display:flex;gap:6px;align-items:center;margin:0}
.fr-fam{display:block}
/* The subject loop (loop.js): each child's turn today on Today, and the order in its sheet. */
.loop-head{display:flex;align-items:flex-start;gap:14px;padding:14px 16px 8px 20px}
.loop-head > .ms{color:var(--hs-teal);margin-top:1px}
.loop-head .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.loop-head .tx b{font-size:16px;font-weight:700}
.loop-head .tx span{font-size:14px;color:var(--hs-muted)}
.loop-kid{display:flex;flex-direction:column;padding:0 0 6px}
.loop-name{padding:6px 20px 2px;font-weight:700}
.loop-row{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 20px;border-top:1px solid var(--hs-border);min-height:56px}
.loop-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.loop-row .btn{flex:none;height:36px;padding:0 12px;gap:4px}
.loop-row.done .tx > b{color:var(--hs-muted);text-decoration:line-through}
.loop-list{margin:0}
.loop-pick{align-items:center;gap:6px;padding-right:6px}
.loop-pick .check-row{min-width:0}
.loop-move{display:flex;flex:none}
.loop-clear input{width:24px;height:24px}
/* The editor opened by + beside the calendar: Discover and Log something, one tap away (sheets/editor.js entry). */
/* From a picture and From a link, a pair under the title (batch 33). */
.ed-from{display:flex;flex-wrap:wrap;gap:4px 8px;margin:-6px -8px -4px}
/* The event sheet as Google Calendar's (sheets/editor.js; Derek, October 27): a large title, the kinds and the people
   in rows that scroll sideways, an icon at the start of each row, the start and end each a date and a time, and ✕
   and Save at the top. */
/* Its top: ✕ at the left, Delete (when editing) and Save at the right, on one line (not the details pop-up’s order). */
.sheet.ed-sheet .sh-head,.sheet.ed-sheet .sh-head.has-tools{flex-wrap:nowrap;align-items:center}
.sheet.ed-sheet .sh-head>[data-close],.sheet.ed-sheet .sh-head.has-tools>[data-close]{order:0}
.sheet.ed-sheet .sh-head>.sh-title,.sheet.ed-sheet .sh-head.has-tools>.sh-title{order:1;flex:1 1 auto;padding-top:0}
.sheet.ed-sheet .sh-head>.it-tools,.sheet.ed-sheet .sh-head.has-tools>.it-tools{order:2;margin-left:auto;flex-direction:row}
.sheet.ed-sheet .sh-head>.ed-save{order:3;flex:none;min-width:84px;margin-left:4px}
.ed-sheet .sh-body{gap:14px}
/* Its labels for screen readers are placed within the part that scrolls, and the sheet itself never scrolls: one far down
   had stuck out below a laptop’s side panel, so focusing a field could scroll the panel and hide ✕ and Save. */
.sheet.ed-sheet .sh-body{position:relative}
.sheet.ed-sheet{overflow:clip}
/* Each field keeps an edge, an underline as Google's fields have (the sweep's 3:1 boundary). */
.ed-bigtitle{width:100%;border:0;border-bottom:1px solid var(--hs-control);background:none;padding:4px 0 6px;font:inherit;font-size:24px;line-height:1.25;font-weight:500;color:var(--hs-text)}
.ed-bigtitle::placeholder{color:var(--hs-muted)}
.ed-bigtitle:focus-visible{outline:2px solid var(--hs-primary);outline-offset:2px;border-radius:4px}
/* Room inside for the focus ring, which the scrolling row would otherwise clip. */
.ed-scroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:-6px -12px -6px -6px;padding:6px 12px 6px 6px;overscroll-behavior-x:contain}
.ed-scroll::-webkit-scrollbar{display:none}
.ed-scroll > *{flex:none}
/* With a mouse there's no swiping: the rows wrap, as .chips do (Derek, October 28: "the side scroll on the names doesn't
   work on desktop because I don't have swiping available"). */
@media (hover:hover) and (pointer:fine){.ed-scroll{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.ed-line{display:flex;align-items:center;gap:14px;min-width:0}
.ed-line > .opt-chips,.ed-line > select,.ed-line > textarea{flex:1;min-width:0}
.field.ed-line{flex-direction:row}
.ed-ic{flex:none;width:24px;display:inline-flex;justify-content:center;color:var(--hs-muted)}
.sheet .menu-row.ed-row{margin:-8px -12px -8px -20px;width:calc(100% + 32px);padding-right:16px;gap:14px}
.sheet .menu-row.ed-row .ed-ic{margin-left:-4px}
/* The start and the end: the date in words on the left (the field under it opens the calendar), the time on the right. */
.ed-when2{display:flex;flex-direction:column;gap:4px;padding-left:38px}
.ed-dt{display:flex;align-items:center;gap:12px;min-height:44px}
.ed-dt[hidden]{display:none}
.ed-date{position:relative;flex:1;min-width:0;margin:0}
.ed-datetext{display:block;font-size:16px;line-height:1.3;color:var(--hs-text);padding:8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-enddate{flex:1;min-width:0;color:var(--hs-muted)}
.ed-date input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* With the keyboard in it, the date's own field shows over the words (its digits to type, its ring). */
.ed-date input[type="date"]:focus-visible{opacity:1}
.ed-time{flex:none;width:132px;margin:0}
.ed-time .tf-input{border-width:0 0 1px;border-radius:0;background:none;text-align:right;font-size:16px;padding-right:4px}
.ed-time .tf-input:focus{border-color:var(--hs-primary)}
.ed-lens{padding-left:38px}
.ed-plain{border-width:0 0 1px;border-radius:0;background:none;padding-left:0}
select.ed-plain{font-size:16px;cursor:pointer}
textarea.ed-plain{min-height:44px;resize:vertical}
.ed-plain:focus{border-color:var(--hs-primary);padding-left:10px}
.ed-notes{align-items:flex-start}
.ed-notes .ed-ic{padding-top:10px}
/* The end's own date where an item can end on a later day, where it is and its notifications (October 28: the
   coordinator's overnight_items, item_location and item_reminders; Derek, October 27, from Google Calendar's sheet). */
.ed-enddatefield .ed-enddate{color:var(--hs-text)}
.ed-line > input.ed-plain{flex:1;min-width:0}
.ed-remline{align-items:flex-start}
.ed-remline .ed-ic{padding-top:10px}
.ed-rems{flex:1;min-width:0;display:flex;flex-direction:column}
.ed-remlist{list-style:none;margin:0;padding:0}
.ed-remlist:empty{display:none}
.ed-remlist li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:16px}
.ed-remlist .icon-btn{flex:none}
.ed-addrem[hidden]{display:none}
/* A time on a touch screen is a tap for its clock, never text to pick (batch 31). */
@media (pointer:coarse){.tf-input[inputmode="none"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
/* Alerts on this device (push_reminders, October 28): Settings' row and the sheet's prompt. */
.push-row .push-acts{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.ed-pushhint{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.ed-pushhint[hidden]{display:none}
/* The small pop-up from a box drawn on a phone's calendar (drawbox.js): the title, the kinds, the day and times, the
   people; the calendar stays usable above it. A tap or a swipe up opens it all. */
.ed-whenline{display:none}
.sheet.ed-sheet.ed-peek .sh-body > :not([data-peekshow]){display:none}
.sheet.ed-sheet.ed-peek .ed-whenline{display:block;margin:0;padding-left:38px;font-size:16px;color:var(--hs-text);cursor:pointer}
.sheet.ed-sheet.ed-peek{max-height:min(340px,62dvh)}
.scrim.peek{background:transparent;pointer-events:none}
/* The box drawn on the hours, with its handles to stretch it. */
.qa-box{position:absolute;z-index:5;border:2px solid var(--hs-primary);border-radius:10px;background:color-mix(in srgb,var(--hs-primary) 12%,transparent);box-sizing:border-box;pointer-events:none}
.qa-h{position:absolute;width:36px;height:36px;pointer-events:auto;touch-action:none;cursor:ns-resize}
.qa-h::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--hs-surface);border:2px solid var(--hs-primary)}
.qa-top{left:6px;top:-18px}
.qa-bot{right:6px;bottom:-18px}
/* A draft from a picture or link (event-import.js): the parts to check, until they're changed. */
.ai-unsure{border-radius:14px;box-shadow:0 0 0 2px var(--hs-gold),0 0 0 6px color-mix(in srgb,var(--hs-gold) 18%,transparent);background:color-mix(in srgb,var(--hs-gold) 8%,transparent)}
/* Move: Tomorrow or the next school day opens a time there, with that day's open times (sheets/move.js). */
.mv-day{display:flex;flex-direction:column;gap:10px;padding:4px 24px 12px}
/* Chores (screens/chores.js): a column per child on a laptop, stacked on a phone; a week per child. */
.ch-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 12px 4px}
.ch-date{display:flex;align-items:center;gap:4px}
.ch-date b{font-size:16px;white-space:nowrap}
.ch-board{display:flex;flex-direction:column;gap:12px;padding:8px 12px}
.ch-board.wide{display:grid;grid-template-columns:repeat(var(--ch-n),minmax(240px,1fr));align-items:start;overflow-x:auto}
.ch-col,.ch-week{margin:0;padding:0 0 8px;border-top:4px solid var(--kc)}
.ch-colh{display:flex;align-items:center;gap:10px;padding:12px 16px 6px}
.ch-colh b{font-size:17px}
.ch-colh .meta{margin-left:auto;font-size:13px;color:var(--hs-muted)}
.ch-part{display:flex;flex-direction:column}
.ch-parth{display:flex;align-items:center;gap:6px;padding:8px 16px 4px;font-size:13px;font-weight:700;color:var(--hs-muted)}
.ch-none{margin:0;padding:6px 16px 10px}
.ch-alldone{display:flex;align-items:center;gap:8px;margin:6px 16px;color:var(--hs-success);font-weight:700}
.ch-add{margin:4px 8px 0}

/* Adding a chore inside a part of a child's day (chores-board.js data-addin; HSC-13, October 18): a + at the right of
   Morning, Afternoon, Evening and Any time. The editor's part of the day and stars for a new chore (editor.js). */
.ch-parth .grow{flex:1;min-width:0}
.ch-parth{padding-right:6px}
.ch-partadd{width:36px;height:36px;margin:-6px 0 -4px;color:var(--hs-primary)}
.ed-chore .ed-stars{max-width:240px}

/* Chores' week (chore-week.js weekGrid; Derek, October 20, note 14): one sticky row of Plan's day headings across the
   top, then each child's row, with no per-child date rows. A phone puts the child's name on its own line above the
   seven days. No overflow on the card, so the heading row can stick. */
.ch-wk{margin:8px 12px;background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow)}
.ch-wkhead,.ch-wkrow{display:grid;grid-template-columns:160px repeat(var(--ch-days,7),minmax(0,1fr))}
.ch-wkhead{position:sticky;top:calc(var(--hs-topbar) + var(--hs-safe-t) + var(--hs-chips-h,56px));z-index:18;background:var(--hs-surface);border-bottom:1px solid var(--hs-border);border-radius:var(--hs-r-card) var(--hs-r-card) 0 0}
.ch-wkh{display:flex;justify-content:center;padding:6px 4px 8px;border-radius:14px;color:inherit;text-decoration:none}
.ch-wkh:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.ch-wkrow + .ch-wkrow{border-top:1px solid var(--hs-border)}
.ch-wklab{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;padding:10px 12px;border-left:4px solid var(--kc)}
.ch-wklab b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-wklab .meta{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--hs-muted)}
.ch-wkcell{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px 4px;border-left:1px solid var(--hs-border)}
.ch-wknone{padding:6px 4px}
@media (max-width:767px){
  .ch-wk{margin:8px}
  .ch-wkhead,.ch-wkrow{grid-template-columns:repeat(var(--ch-days,7),minmax(0,1fr))}
  .ch-wkcorner{display:none}
  .ch-wklab{grid-column:1/-1;padding:8px 10px}
  .ch-wkcell{padding:4px 2px}
  .ch-wklab + .ch-wkcell{border-left:0}
  .ch-wkcell .ch-mini{flex-direction:column;align-items:center;gap:2px;padding:4px 2px;font-size:11px;text-align:center}
  .ch-wkcell .ch-mini span{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
}
.ch-mini{display:flex;align-items:center;gap:6px;min-height:36px;padding:2px 4px;border:0;border-radius:8px;background:none;color:var(--hs-text);font:inherit;font-size:13px;text-align:left;cursor:pointer;min-width:0}
.ch-mini span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-mini.done span{text-decoration:line-through;color:var(--hs-muted)}
.ch-mini:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
.st-list{margin:0}
.st-rowwrap{display:flex;align-items:center;gap:4px;padding-right:8px}.st-rowwrap + .st-rowwrap{border-top:1px solid var(--hs-border)}.st-rowwrap .check-row{flex:1;min-width:0;border-top:0}
/* Chores on a server with them (screens/chores-board.js): a skipped chore, stars, Up for Grabs, the turn order. */
.cb-row.skipped .t{color:var(--hs-muted);text-decoration:line-through}
.cb-stars{color:var(--hs-text);font-weight:700}
.cb-grabs{border-top-color:var(--hs-primary)}
.cb-grab{display:flex;flex-direction:column;gap:6px;padding:8px 16px 10px}
.cb-grab + .cb-grab{border-top:1px solid var(--hs-border)}
.cb-rot{margin:0;padding:4px 0}
.cb-rot .list-row{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 14px}
.cb-rot .tx{flex:1;min-width:0}
/* Rewards (screens/rewards.js). */
.rw-kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;padding:8px 12px}
.rw-kid{margin:0;padding:12px 16px;border-top:4px solid var(--kc);display:flex;flex-direction:column;gap:8px}
.rw-kidh{display:flex;align-items:center;gap:10px}
.rw-kidh b{font-size:17px}
.rw-bal{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.rw-bal small{font-size:14px;font-weight:600;color:var(--hs-muted);margin-left:4px}
.rw-adj{display:flex;gap:8px;flex-wrap:wrap}
.rw-sec{padding:8px 12px}
.rw-sec > h2{font-size:17px;margin:8px 4px}
.rw-list{margin:0}
.rw-emoji{font-size:24px;width:32px;text-align:center}
.rw-cost{font-weight:700;white-space:nowrap}
/* Displays set up (screens/wall.js boardIntro). */
.w-sec-h{margin:20px 16px 8px;font-size:17px}
.w-board .btn{height:36px}
/* Meals (screens/meals.js): a week grid on a laptop (a row a meal), a card a day on a phone. */
.ml-grid{display:grid;grid-template-columns:120px repeat(7,minmax(0,1fr));gap:6px;padding:8px 12px;align-items:stretch}
.ml-dayh{display:flex;flex-direction:column;align-items:center;padding:6px 0;border-radius:12px;font-size:13px;color:var(--hs-muted)}
.ml-dayh b{font-size:14px;color:var(--hs-text)}.ml-dayh.today{background:var(--hs-primary-soft)}.ml-dayh.today b,.ml-dayh.today span{color:var(--hs-primary-on-soft)}
.ml-mealh{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;padding:8px 4px;color:var(--hs-text)}
.ml-cell{display:flex;flex-direction:column;gap:4px;min-height:72px;padding:6px;border-radius:14px;background:var(--hs-surface);box-shadow:var(--hs-shadow);min-width:0}
.ml-cell.today{box-shadow:inset 0 0 0 2px var(--hs-primary)}
.ml-dish{display:flex;align-items:center;gap:4px;width:100%;min-height:36px;padding:4px 8px;border:0;border-radius:10px;background:var(--hs-gold-soft);color:var(--hs-text);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;min-width:0}
.ml-dish > span:not(.ml-rep){min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ml-rep{margin-left:auto;color:var(--hs-muted);flex:none}
.ml-add{align-self:flex-start;min-width:36px;min-height:36px;border:0;border-radius:10px;background:none;color:var(--hs-primary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ml-add:hover{background:var(--hs-primary-soft)}
.ml-days{display:flex;flex-direction:column;gap:12px;padding:8px 12px}
.ml-day{margin:0;padding:12px 14px}.ml-day.today{box-shadow:inset 0 0 0 2px var(--hs-primary),var(--hs-shadow)}
.ml-dayt{margin:0 0 6px;font-size:16px}
.ml-slot{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--hs-border)}
.ml-slotl{display:flex;align-items:center;gap:6px;width:110px;flex:none;font-size:14px;font-weight:700;color:var(--hs-muted)}
.ml-slotd{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}.ml-slotd .ml-dish{width:auto;max-width:100%}
.ml-set{margin:0}.ml-setrow{gap:10px}.ml-setrow .input{flex:1;min-width:0}.ml-showbox{width:24px;height:24px;flex:none}

/* Meals and shopping (HSC-11, October 18; meals.js, to-list.js): a dish's own servings on its chip, its servings and
   ingredients in the meal sheet, and Add to a shopping list. Recipes with foods the family avoids are marked
   (food-avoid.js, HSC-12). */
.ml-serv{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:12px;font-weight:700;color:var(--hs-muted)}
.ml-dish > span.ml-serv{display:inline-flex;overflow:visible}
.ml-ings{border:1px solid var(--hs-border);border-radius:14px;padding:4px 12px}
.ml-ings summary{display:flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;font-weight:600}
.ml-ings ul{margin:4px 0 10px;padding-left:22px}
.ml-ings li{padding:2px 0}
.tl-servein{width:72px;text-align:center}
.tl-serves,.ml-serves{flex-wrap:wrap}
.tl-list{margin:0;box-shadow:none;border:1px solid var(--hs-border)}
.tl-ing .tx b{font-weight:500}
.rc-avoid{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:13px;font-weight:600;color:var(--hs-danger)}
.rc-avoidnote{margin:8px 16px 0}
.avoid-word{gap:4px}
.avoid-add .input{flex:1;min-width:0}

/* Ask (ask.js; HSC-10, October 18): a conversation beside the calendar. What you said on the right, Yezbi's cards on the
   left; drafts, changes and listings each end in a receipt. */
.ask{display:flex;flex-direction:column;gap:10px;min-height:0}
/* Ask fills its pop-up: the conversation scrolls above the text box, which stays at the bottom, so the newest is
   scrolled to and the top is always reachable (the pop-up's body scrolled before, with the box stuck to it). */
.sheet .sh-body:has(> .ask){overflow:hidden}
.sheet .sh-body > .ask{flex:1 1 auto;min-height:0}
.ask-log{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:72px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.ask-you{align-self:flex-end;max-width:85%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--hs-primary-soft);color:var(--hs-primary-on-soft);font-weight:600;overflow-wrap:anywhere}
.ask-yez{align-self:stretch;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:16px 16px 16px 4px;background:var(--hs-surface);border:1px solid var(--hs-border)}
.ask-yez p{margin:0}
.ask-card.done{border-color:var(--hs-success)}
.ask-h{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.ask-when{font-weight:600}
.ask-when .tag,.ask-diff .tag{margin-left:4px}
.ask-diff .was{text-decoration:line-through;color:var(--hs-muted)}
.ask-diff .now{font-weight:700}
.ask-warn{display:flex;gap:6px;align-items:flex-start;color:var(--hs-text);font-size:14px}
.ask-warn .ms{color:var(--hs-danger)}
.ask-err{color:var(--hs-danger);font-weight:600;font-size:14px}
.ask-receipt{display:flex;gap:8px;align-items:flex-start}
.ask-receipt .ms{color:var(--hs-success);flex:none}
.ask-acts{gap:6px;flex-wrap:wrap}
.ask-kids button{min-height:36px}
.ask-res{display:flex;flex-direction:column;border:1px solid var(--hs-border);border-radius:12px}
.ask-ev{padding:8px 10px}
.ask-ev + .ask-ev{border-top:1px solid var(--hs-border)}
.ask-ev .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ask-ev .tx span{font-size:13px;color:var(--hs-muted)}
.ask-day{margin:0;padding:8px 10px 4px;font-size:13px;font-weight:700;border-top:1px solid var(--hs-border)}
.ask-day:first-child{border-top:0}
.ask-day + .ask-ev{border-top:0}
.ask-none{margin:0;padding:0 10px 8px;font-size:13px;color:var(--hs-muted)}
.ask-evs{display:block;font-weight:700}
.ask-evs.ok{color:var(--hs-success)}.ask-evs.bad{color:var(--hs-danger)}
.ask-try{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ask-try[hidden]{display:none}
.ask-try .chip{height:auto;min-height:36px;white-space:normal;text-align:left}
.ask-form{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:-8px;background:var(--hs-surface);padding:6px 0 8px;margin-bottom:-8px;z-index:1}
.ask-form .textarea{flex:1;min-height:48px;resize:vertical}
.ask-form .btn{flex:none;width:48px;padding:0}
.ask-note{margin:0}
.srch-ask b{color:var(--hs-primary-on-soft)}

/* Two-way calendar sync (calendar-sync.js; HSC-08, October 18): each connection's state in words and an icon, never
   color alone; the one-way choices below it say they're one way; the setup wizard's last screen offers it. */
.sync-row .tx{gap:2px}
.list-row .tx .sync-st{display:flex;align-items:flex-start;gap:4px;font-size:13px;font-weight:600;color:var(--hs-text)}
.list-row .tx .sync-st > span{font-size:13px;color:inherit}
.sync-st .ms{flex:none;margin-top:1px}
.sync-st.ok .ms{color:var(--hs-success)}.list-row .tx .sync-st.bad{color:var(--hs-danger)}.sync-st.busy .ms{color:var(--hs-primary)}
.sync-acts{gap:4px;flex-wrap:wrap;margin-top:4px}
.sync-acts .btn{height:36px}
.sync-acts .btn.filled{height:44px}
.sync-dirs{display:flex;flex-direction:column;border:1px solid var(--hs-border);border-radius:14px;overflow:hidden}
.sync-dirs .list-row + .list-row{border-top:1px solid var(--hs-border)}
.sync-dirs .radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--hs-muted);margin-top:2px}
.sync-dirs [aria-checked="true"] .radio{border:6px solid var(--hs-primary)}
.sync-dirs [aria-checked="true"]{background:var(--hs-primary-soft)}
.sync-cals{margin:0;box-shadow:none;border:1px solid var(--hs-border)}
.cal-oneway{margin-left:6px;vertical-align:middle;font-weight:600}
.setup-cal-offer{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0;flex-wrap:wrap}
.setup-cal-offer .tx{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.setup-cal-offer .tx span{font-size:14px;color:var(--hs-muted)}

/* Lists (screens/lists.js). */
.ls-tabs .chip{gap:6px}.ls-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--hs-primary);color:var(--hs-on-primary);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.ls-head{display:flex;align-items:center;gap:8px;padding:8px 16px 4px}.ls-head h2{margin:0;font-size:20px}
.ls-add{display:flex;gap:8px;padding:6px 12px 10px}.ls-add .input{flex:1;min-width:0}
.ls-list{margin:0 12px}.ls-item .tx b{font-weight:600}.ls-item.done .tx b{text-decoration:line-through;color:var(--hs-muted)}
.ls-amt{color:var(--hs-primary);font-weight:800}.ls-rec{color:var(--hs-muted);flex:none}
.ls-sec{padding:10px 16px 2px;font-size:13px;font-weight:800;color:var(--hs-muted);text-transform:uppercase;letter-spacing:.04em}
.ls-donehead{display:flex;align-items:center;gap:8px;padding:14px 16px 4px}
/* Recipes (screens/recipes.js), and cooking from one. */
.rc-search{display:flex;gap:8px;padding:12px 12px 4px}.rc-search .input{flex:1;min-width:0}
.rc-head{padding:12px 16px 4px}.rc-title{margin:0;font-size:26px;line-height:1.2}
.rc-acts{padding:8px 12px;gap:8px}
.rc-serves{display:flex;align-items:center;gap:6px;padding:4px 16px;font-weight:600}.rc-serves b{min-width:24px;text-align:center;font-size:18px}
.rc-h{margin:16px 16px 6px;font-size:17px}
.rc-ings,.rc-steps{margin:0 12px;padding:12px 16px 12px 36px;display:flex;flex-direction:column;gap:8px;line-height:1.45}
.rc-notes{margin:0 12px;padding:12px 16px;white-space:pre-wrap}
.rc-cookb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;padding:4px 0}
@media (max-width:767px){.rc-cookb{grid-template-columns:1fr}}
.rc-cooki h2,.rc-cooks h2{margin:0 0 10px;font-size:18px;color:var(--hs-muted)}
.rc-cooki .check-row{padding-left:0}.rc-cooki .check-row input{width:24px;height:24px;flex:none}.rc-cooki .check-row .tx b{font-size:20px;font-weight:500}
.rc-cookacts{justify-content:flex-end;width:100%}
.rc-step{font-size:clamp(22px,3vw,32px);line-height:1.4;margin:0 0 20px}
/* A click being worked on (app.js; Derek, October 16: make instant a universal rule): a thin moving bar across the top. */
.busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;overflow:hidden;pointer-events:none;background:color-mix(in srgb,var(--hs-primary) 18%,transparent)}
.busy-bar[hidden]{display:none}
.busy-bar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:var(--hs-primary);animation:hs-busy 1s ease-in-out infinite}
@keyframes hs-busy{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.busy-bar::before{animation:none;width:100%;opacity:.6}}
/* The family display (screens/wall.js): the whole screen, big type for across the room; the app's own bars go. */
body.wall-on .topbar,body.wall-on .navbar,body.wall-on .rail,body.wall-on .fab,body.wall-on .fabs,body.wall-on #tool-rail,body.wall-on .sidenav,body.wall-on .subnav,body.wall-on .toolbar{display:none!important}
body.wall-on main.content,body.wall-on #main{padding:0!important;margin:0!important}
.wall{min-height:100dvh;padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;background:var(--hs-bg)}
.w-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.w-clock{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.w-clock > b{font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.w-clock > span{font-size:clamp(18px,2vw,26px);color:var(--hs-muted)}
.w-theme{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--hs-teal-soft);font-size:18px}
.w-acts{margin-left:auto;display:flex;gap:8px}
.w-btn{width:56px;height:56px;border:0;border-radius:50%;background:var(--hs-surface);color:var(--hs-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--hs-shadow)}
.w-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--hs-muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 4px 8px}
.w-left{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:700}
.w-everyone{padding:12px 16px;border-radius:24px;background:var(--hs-surface);box-shadow:var(--hs-shadow)}
.w-row{display:flex;flex-wrap:wrap;gap:8px 20px}
.w-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:start;flex:1}
@media (max-width:767px){.w-cols{grid-template-columns:1fr}}
.w-col{border-radius:28px;background:var(--hs-surface);box-shadow:var(--hs-shadow);border-top:6px solid var(--kc);padding:8px 14px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.w-colh{display:flex;align-items:center;gap:12px;padding:8px 4px;border:0;background:none;color:var(--hs-text);font:inherit;cursor:pointer;text-align:left}
.w-colh b{font-size:24px}
.w-list,.w-chores{display:flex;flex-direction:column;gap:6px}
.w-chores{border-top:1px solid var(--hs-border);padding-top:8px}
.w-it{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px;border-radius:16px;min-width:0}
.w-it.now{background:var(--hs-primary-soft);box-shadow:inset 0 0 0 2px var(--hs-primary)}
.w-it.done .w-tx b{text-decoration:line-through;color:var(--hs-muted)}
.w-it.big{min-height:64px}.w-it.big .w-tx b{font-size:22px}
.w-dot{width:12px;height:12px;border-radius:50%;background:var(--kc,var(--hs-primary));flex:none;margin:0 10px}
.w-tick{width:48px;height:48px;flex:none;border:0;border-radius:50%;background:none;color:var(--kc,var(--hs-primary));display:flex;align-items:center;justify-content:center;cursor:pointer}
.w-tick[aria-pressed="true"]{color:var(--hs-success)}
.w-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.w-tx b{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.w-tx > span{font-size:15px;color:var(--hs-muted);display:flex;align-items:center;gap:6px}
.w-nowtag{padding:1px 8px;border-radius:999px;background:var(--hs-primary);color:var(--hs-on-primary,#fff);font-size:12px;font-weight:800}
.w-none{margin:0;padding:8px;font-size:16px;color:var(--hs-muted)}
.w-kidday{display:flex;flex-direction:column;gap:16px;max-width:900px;width:100%;margin:0 auto}
.w-part{border-radius:28px;background:var(--hs-surface);box-shadow:var(--hs-shadow);padding:12px 16px}
.w-dim{position:fixed;inset:0;z-index:80;background:rgb(0 0 0 / .88);cursor:pointer}
/* The paired family display (family-display.html, board.js): stars, offline, asks, meals. */
body.board-page{margin:0;background:var(--hs-bg);color:var(--hs-text);font-family:var(--hs-font)}
.w-stars{margin-left:auto;padding:4px 12px;border-radius:999px;background:var(--hs-gold-soft);color:var(--hs-text);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.w-stars.big{font-size:24px;padding:6px 16px}
.w-offline{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--hs-danger-soft);color:var(--hs-text);font-size:16px;font-weight:700}
.w-ask{border:0;background:var(--hs-gold-soft);color:var(--hs-text);font:inherit;text-align:left;cursor:pointer;padding:8px 14px}
.w-meals .w-dot{background:var(--hs-teal)}
.w-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.w-glist ul{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:6px;font-size:18px}
.w-glist li b{color:var(--hs-primary)}
.w-emoji{width:44px;flex:none;text-align:center;font-size:30px;line-height:1}.w-askbtn{margin-left:auto;flex:none}
.w-intro{margin:24px 12px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.w-intro h2{margin:0}.w-intro p{margin:0;max-width:560px}
/* Help › Set up a family display. */
.help-guide{padding:14px 18px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.help-guide p,.help-guide ol,.help-guide ul{margin:0}
.help-guide h3{margin:8px 0 0;font-size:16px}
.help-guide .help-done{display:flex;align-items:center;gap:8px;color:var(--hs-success);font-weight:600}
.help-guide ol,.help-guide ul{padding-left:22px;display:flex;flex-direction:column;gap:4px}
/* Saved and backed up (saved-note.js), under Records and in Settings › AI and privacy. */
.saved-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 20px 4px;line-height:1.45}
.saved-note > .ms{flex:none;color:var(--hs-success);margin-top:1px}
.saved-note a{display:inline-block;padding:8px 0;margin:-8px 0}
a.com-ev{text-decoration:none;color:inherit}

/* Discover's Add: the day and the time side by side (Derek, October 15: "a normal date and time selector"). */
.add-when{display:flex;flex-wrap:wrap;gap:12px}
.add-when .field{flex:1 1 170px;min-width:0;margin:0}
/* Records › Reading's reading list (batch 34): a book a row, a tick per child reading it. */
.rdl-book{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 16px;border-top:1px solid var(--hs-border)}
.rdl-t{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.rdl-t b{overflow-wrap:anywhere}
.rdl-kids{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rdl-kid{gap:6px}
.rdl-kid[aria-pressed="true"]{background:var(--hs-success-soft,var(--hs-primary-soft));color:var(--hs-text)}
.rdl-kid[aria-pressed="true"] > .ms{color:var(--hs-success,var(--hs-primary))}

/* The week's theme at the right end of Plan's view row on a laptop (viewbar.js; Derek, October 15). */
.chips .vb-theme{margin-left:auto;flex:none;display:flex;padding-left:8px}
.chips .vb-theme .theme-pill{max-width:320px}

/* The time picker (timefield.js; Derek, October 15): an hour, a minute and AM or PM side by side, in the list's look. */
.tf-pop.tf-clock{padding:6px}
.tf-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.tf-col{border-radius:12px}
.tf-col [role="option"]{justify-content:center;padding:0 8px;min-height:38px;border-radius:10px}
.tf-col.on{background:color-mix(in srgb,var(--hs-text) 4%,transparent)}
.tf-foot{display:flex;align-items:center;gap:8px;padding:6px 6px 0;border-top:1px solid var(--hs-border);margin-top:6px}
.tf-foot[hidden]{display:none}
.tf-foot .tf-len{flex:1 1 auto;font-size:13px;color:var(--hs-muted)}
.tf-foot .tf-len::before{content:none}
.tf-foot .tf-clear{height:36px;padding:0 12px}

/* Catch up after missed days (catchup.js; the October 13 research, confirmed by Derek): Today's welcome-back card, in
   the teal of a fresh start, and the sheet's list of where each child left off. */
.card.catchup{background:var(--hs-teal-soft);box-shadow:inset 4px 0 0 var(--hs-teal),var(--hs-shadow)}
.card.catchup .carry-head > .ms{color:var(--hs-teal)}
.card.catchup .carry-head .icon-btn{margin:-8px -8px 0 auto;flex:none}
.card.catchup .carry-foot{display:flex;align-items:center;gap:8px;padding:0 16px 14px 20px}
.cu-list{margin:0;box-shadow:none;border:1px solid var(--hs-border)}
.cu-row{min-height:52px}

/* Quick choices for a course's days (daypresets.js) above its weekday chips, and the setup wizard's start time. */
.day-presets button{font-weight:600}
.setup-when{gap:8px 16px;flex-wrap:wrap}
.setup-when .tf{width:140px}

/* Supplies › Get ready (screens/tools.js; the October 13 roadmap): what the next two weeks' plan asks for. */
.prep-h{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.prep-h > .ms{color:var(--hs-primary)}
.prep-go{display:inline-flex;align-items:center;gap:4px;color:var(--hs-primary-on-soft);font-weight:600;flex:none}
.prep-mats{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.prep-mats .tag{height:auto;min-height:22px;white-space:normal}

/* Course subjects (subjects.js; the October 13 roadmap): on lesson rows, a course's picker, Curriculum's sheets. */
.row .subj{font-weight:700;color:var(--hs-text)}
.course-subj{gap:8px;margin-top:4px}
.course-subj .select{width:auto;height:36px;padding-top:0;padding-bottom:0}
.subj-list,.tt-list{margin:0;box-shadow:none;border:1px solid var(--hs-border)}
.subj-row .select{width:auto;max-width:220px;flex:none}
.tt-row .tt-time{flex:none;width:140px}

/* Records › Portfolio: samples by month, and choosing the best (rec-portfolio.js; the October 13 roadmap). */
.pf-month{margin:12px 0 6px;font-size:14px;color:var(--hs-muted)}
.pf-sample-box{position:relative;display:flex}
.pf-sample-box > .pf-sample{flex:1;width:100%}
.pf-pick{position:absolute;top:6px;right:6px;z-index:1;width:40px;height:40px;border:0;border-radius:20px;background:var(--hs-surface);color:var(--hs-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--hs-shadow)}
.pf-pick[aria-pressed="false"]{color:var(--hs-muted)}
.pf-choose .pf-link{display:inline-block;padding:7px 0}
.pf-choosing .btn{height:40px}

/* Recipe drafts: real editable amounts, warnings beside each ingredient, ephemeral cookbook previews. */
.rc-import-note{padding:14px;border-radius:14px;background:var(--hs-primary-soft);line-height:1.5}
.rc-review-ings{display:grid;gap:14px}.rc-review-ing{min-width:0;margin:0;padding:14px;border:1px solid var(--hs-border);border-radius:14px;display:grid;gap:10px}.rc-review-ing legend{padding:0 5px;font-weight:600}
.rc-measures{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rc-measures input{min-width:0;width:100%}
.rc-warning{margin:4px 0 0;line-height:1.5;font-size:13px}.rc-warning::before{content:'Check: ';font-weight:600}
.rc-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rc-photo-grid figure{margin:0;min-width:0}.rc-photo-grid img{display:block;max-width:100%;height:auto;border-radius:8px}.rc-photo-grid figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.rc-review-photos{margin-top:12px}.rc-review-photos img{width:100%}
.rc-file{display:block;position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.rc-file:focus-visible{opacity:1}.btn:has(>.rc-file){position:relative;overflow:visible}.btn:has(>.rc-file:focus-visible){outline:2px solid var(--hs-primary);outline-offset:3px}

/* Yezbi Kitchen: local recipe ideas. Keep the recipe box's controls and theme colors. */
/* Each block keeps the page's side gutter, as the chips, headings and the recipe box's rows do. */
[data-rlbody]>:is(.field,p,[data-rlcopy]){margin-left:16px;margin-right:16px}
.rl-hidden{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:-4px 16px 4px}.rl-hidden:empty{display:none}
.rl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:0 12px}
.rl-card{display:flex;flex-direction:column;gap:10px;padding:18px;text-decoration:none;color:inherit;min-width:0}
.rl-card h2,.rl-card p{margin:0}.rl-card h2{font-size:1.1rem;overflow-wrap:anywhere}
.rl-tags{display:flex;flex-wrap:wrap;gap:6px}.rl-card .tag{white-space:normal}
.rl-servings{width:80px;text-align:center}.rc-serves:has(.rl-servings){flex-wrap:wrap}
[data-kitchen]>.chips{padding-top:12px}[data-kitchen] .small{overflow-wrap:anywhere}

/* Ingredient alternatives stay readable and reachable when long ingredient names wrap. */
.ing-choice-row{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.ing-choice-row>span{flex:1;min-width:0;overflow-wrap:anywhere}
.ing-alternative.btn{color:var(--hs-muted);min-height:44px;min-width:44px;flex-shrink:0;padding:8px;font-size:12px}
.ing-option.btn{height:auto;min-height:44px;white-space:normal;text-align:left;justify-content:flex-start;padding:12px;line-height:1.5}
.ing-option[aria-pressed=true]{outline:2px solid var(--hs-primary);outline-offset:1px}
/* The calendar colored by person (js/app/person-colors.js; Derek, October 19: "colored by person, using the six pastels
   with slanted stripes for shared events"): each item is a solid pastel of its person's color, an item several people
   share is bands of their colors slanted 8°, with a fine edge and the page's ink on top; Dark uses deep versions of the
   same colors under light text. The kind of item is its small icon; no initials (round 17). Other calendars (.wt-x and
   the bands behind the hours) stay as they were. */
.byp{background:var(--pf)!important;border-color:var(--pe)!important;border-left-width:1px!important;color:var(--hs-text)}
:root[data-yezbi-theme="dark"] .byp{background:var(--pf-d)!important;border-color:color-mix(in srgb,var(--pe-d) 70%,transparent)!important}
.byp:hover{filter:brightness(.96)}
:root[data-yezbi-theme="dark"] .byp:hover{filter:brightness(1.15)}
.byp :is(.kind,.wt-tm,.tm,.cn,.wt-t,b,.one,.lk){color:inherit}
.byp .wt-kids,.byp .kdot{display:none}
/* Done: a lighter wash of the same colors, still in the page's ink (struck through), so it reads at 4.5:1 or better. */
.byp.done{--wash:color-mix(in srgb,var(--hs-surface) 55%,transparent);opacity:1;color:var(--hs-text)!important;background:linear-gradient(var(--wash),var(--wash)),var(--pf)!important}
:root[data-yezbi-theme="dark"] .byp.done{background:linear-gradient(var(--wash),var(--wash)),var(--pf-d)!important}
.byp.done :is(b,.wt-t,.one){text-decoration-color:currentColor}
/* Plan's weather (js/app/weather.js; Derek, October 19: "the weather across the bottom in a very thin bar that just has
   the maximum temp, a little emoji ... and the percent chance of rain", and a larger by-the-hour view "just like on
   Weather Underground"; October 20, note 18: the columns' lines through it, high and low, the whole day, night and day,
   the chance of rain as a line, open on hover). The bar runs along the bottom of Plan, above a phone's bottom bar; on a
   laptop from the left column to the window's edge (the tools column rises to make room). The hours open over the page
   above it, so nothing under them moves: a day's 24 hours on the sky's night and day colors, the temperature as a line
   and the chance of rain as a filled area, as the Weather Underground app draws them. */
:root{--hs-wx-h:0px;--hs-wx-room:0px}
:root:has(> body.with-wx){--hs-wx-h:30px;--hs-wx-room:var(--hs-wx-h)}
:root:has(> body.with-wx){scroll-padding-bottom:calc(var(--hs-fab) + 40px + var(--hs-wx-room))}
.wx{--wx-rain:#4F86CF;--wx-rain-ink:#2F62A3;--wx-temp:#D9503F;--wx-sky-day:color-mix(in srgb,#FFE3A3 16%,var(--hs-surface));--wx-sky-night:color-mix(in srgb,#5A6688 17%,var(--hs-surface));--wx-sky-dawn:color-mix(in srgb,#F4B183 46%,var(--hs-surface));--wx-sky-dusk:color-mix(in srgb,#C79BD0 46%,var(--hs-surface));position:fixed;z-index:25;left:0;right:0;bottom:calc(var(--hs-navbar) + var(--hs-safe-b));display:flex;flex-direction:column}
:root[data-yezbi-theme="dark"] .wx{--wx-rain:#7FA8E2;--wx-rain-ink:#93B8EC;--wx-temp:#F0806E;--wx-sky-day:color-mix(in srgb,#FFE3A3 7%,var(--hs-surface));--wx-sky-night:color-mix(in srgb,#000 34%,var(--hs-surface));--wx-sky-dawn:color-mix(in srgb,#E08A55 32%,var(--hs-surface));--wx-sky-dusk:color-mix(in srgb,#8E68B8 36%,var(--hs-surface))}
.wx[hidden]{display:none}
.wx-bar{position:relative;flex:none;height:var(--hs-wx-h);display:flex;align-items:stretch;background:var(--hs-surface);border-top:1px solid var(--hs-rule,var(--hs-border))}
.wx-days{position:relative;flex:1;min-width:0;overflow:hidden}
.wx-day{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;border:0;background:none;color:var(--hs-text);font:inherit;font-size:13px;line-height:1.1;white-space:nowrap;cursor:pointer}
/* The calendar's line at each day's left edge but the first runs on down through the bar. */
.wx-days.lined .wx-day:not(.wx-first){box-shadow:inset 1px 0 0 var(--hs-border)}
.wx-day.wx-none{pointer-events:none}
.wx-day:hover,.wx-one:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent)}
.wx-day[aria-pressed="true"]{background:var(--hs-sel,var(--hs-primary-soft));box-shadow:inset 0 2px 0 var(--hs-primary)}
.wx-days.lined .wx-day[aria-pressed="true"]:not(.wx-first){box-shadow:inset 0 2px 0 var(--hs-primary),inset 1px 0 0 var(--hs-border)}
.wx-day b,.wx-one b{font-weight:700}
.wx-dn{color:var(--hs-muted);font-size:12px}
.wx-days.lined .wx-dn{display:none}
.wx-e{font-size:14px;line-height:1}
.wx-hilo{display:inline-flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.wx-hilo i{font-style:normal;color:var(--hs-muted);opacity:.7}
.wx-p{display:inline-flex;align-items:center;gap:2px;color:var(--wx-rain-ink);font-size:12px;font-variant-numeric:tabular-nums}
.wx-drop{width:7px;height:10px;fill:currentColor;flex:none}
.wx-day.wx-past{color:var(--hs-muted)}
.wx-day.tight{display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;align-items:center;gap:0 4px;font-size:11.5px;line-height:1.15}
.wx-days.lined .wx-day.tight .wx-p{grid-column:1 / -1;justify-content:center;font-size:11px}
.wx-day.tight .wx-p{font-size:11px}
.wx-one{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 20px;border:0;background:none;color:var(--hs-text);font:inherit;font-size:14px;white-space:nowrap;overflow:hidden;cursor:pointer;text-align:left}
.wx-one[aria-pressed="true"]{background:var(--hs-sel,var(--hs-primary-soft))}
/* Note 80 (October 22): Day's weather centered, with the wind; a phone's week scrolls sideways, about four days across;
   the hours step between the days in view. */
.wx-one{justify-content:center}
.wx-wind{color:var(--hs-muted);font-size:13px}
@media (max-width:420px){.wx-one .wx-sky{display:none}}
.wx-days.scrolls{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.wx-days.scrolls::-webkit-scrollbar{display:none}
.wx-days.scrolls .wx-day{position:relative;flex:0 0 var(--wx-cw,25%);scroll-snap-align:start}
.wx-days.scrolls .wx-day:not(.wx-first){box-shadow:inset 1px 0 0 var(--hs-border)}
.wx-days.scrolls .wx-day[hidden]{display:none}
/* A phone's calendar (weather.js place()): the days under their columns, scrolling sideways with them. */
.wx-days.track{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.wx-days.track::-webkit-scrollbar{display:none}
.wx-span{position:absolute;top:0;left:0;height:1px;pointer-events:none}
.wx-nav{display:flex;align-items:center}
.wx-nav .icon-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.wx-lo,.wx-sky{color:var(--hs-muted)}
.wx-sky{overflow:hidden;text-overflow:ellipsis}
.wx-msg{flex:1;min-width:0;display:flex;align-items:center;padding:0 20px;font-size:13px;color:var(--hs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-msg a{display:inline-flex;align-items:center;min-height:28px;color:var(--hs-primary);margin-left:4px}
.wx-panel{flex:none;max-height:calc(100dvh - var(--hs-topbar) - var(--hs-safe-t) - var(--hs-wx-h) - var(--hs-navbar) - 16px);overflow-y:auto;display:flex;flex-direction:column;background:var(--hs-surface);border-top:1px solid var(--hs-rule,var(--hs-border));box-shadow:0 -10px 28px rgba(40,28,14,.16);outline:none}
.wx-ph{flex:none;display:flex;align-items:center;gap:12px;padding:8px 6px 4px 20px}
.wx-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wx-pt h2{margin:0;font-size:16px;font-weight:700}
.wx-pt > span{font-size:14px;color:var(--hs-muted)}
.wx-src{margin-left:auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The hours scroll on from day to day between their scales, which stay at either side (weather.js panel()). */
.wx-tl{flex:none;display:flex;align-items:flex-start;padding:2px 12px 0}
.wx-tl > .wx-chart{flex:none}
.wx-scroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}
.wx-cols{position:relative;height:214px}
.wx-now{position:absolute;top:0;bottom:0;pointer-events:none;border-radius:8px;box-shadow:inset 0 0 0 2px var(--hs-primary)}
.wx-chart{display:block}
.wx-chart text{font-family:var(--hs-font);font-size:12px;fill:var(--hs-muted);text-anchor:middle}
.wx-chart .wx-tl{fill:var(--hs-text);font-size:12.5px;font-weight:700}
.wx-chart .wx-em{font-size:17px}
.wx-chart .wx-hnow{fill:var(--hs-primary);font-weight:800}
.wx-chart .wx-hd{fill:var(--hs-text);font-weight:800}
.wx-chart .wx-pl{font-size:11px;font-weight:600;fill:var(--wx-rain-ink)}
.wx-chart .wx-pl.wx-dry{fill:var(--hs-muted);font-weight:400;opacity:.75}
.wx-chart .wx-wl{font-size:11px}
.wx-chart .wx-ax{font-size:11px;text-anchor:end}
.wx-chart .wx-axp{text-anchor:start;fill:var(--wx-rain-ink)}
.wx-nowband{fill:color-mix(in srgb,var(--hs-primary) 13%,transparent)}
.wx-slot{fill:transparent}
.wx-line{fill:none;stroke:var(--wx-temp);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wx-dot{fill:var(--hs-surface);stroke:var(--wx-temp);stroke-width:2}
.wx-dot.wx-peak{stroke-width:2.5}
.wx-wet{fill:color-mix(in srgb,var(--wx-rain) 34%,transparent)}
.wx-wetline{fill:none;stroke:var(--wx-rain);stroke-width:1.75;stroke-linejoin:round}
.wx-grid{stroke:color-mix(in srgb,var(--hs-text) 7%,transparent);stroke-width:1}
.wx-dayline{stroke:color-mix(in srgb,var(--hs-text) 30%,transparent);stroke-width:1.5}
.wx-chart .wx-tt{font-size:15px;font-weight:600;fill:var(--hs-text)}
.wx-chart .wx-pin{font-size:10.5px;fill:var(--wx-rain-ink)}
.wx{--wx-feel:#8E4FA8}
:root[data-yezbi-theme="dark"] .wx{--wx-feel:#C79BD8}
.wx-feel{fill:none;stroke:var(--wx-feel);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:5 3}
.wx-ovchart .wx-ovin{font-size:11px;fill:var(--wx-rain-ink)}
.wx-warr path{fill:var(--hs-muted)}
/* The days at a glance above the hours (weather.js overview(); Derek, October 27, after Weather Underground's app). */
.wx-ovrow{border-bottom:1px solid var(--hs-border);padding-bottom:6px}
.wx-ovscroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.wx-ovscroll::-webkit-scrollbar{display:none}
.wx-ovcols{position:relative}
.wx-ovchart{display:block;flex:none}
.wx-ovchart text{font-family:var(--hs-font);font-size:12px;fill:var(--hs-muted);text-anchor:middle}
.wx-ovchart .wx-ovl{font-size:12px;font-weight:700;fill:var(--hs-text);letter-spacing:.03em}
.wx-ovchart .wx-ove{font-size:19px}
.wx-ovchart .wx-ovhl{font-size:14px;font-weight:600;fill:var(--hs-text)}
.wx-ovchart .wx-ovw{font-size:12px}
.wx-ovchart .wx-ovp{font-size:12px;font-weight:600;fill:var(--wx-rain-ink)}
.wx-ovchart .wx-ovax{font-size:11px;text-anchor:end}
.wx-ovchart .wx-ovaxp{text-anchor:start;fill:var(--wx-rain-ink)}
.wx-ovsel{fill:var(--hs-sel,var(--hs-primary-soft))}
.wx-ovsel[hidden]{display:none}
.wx-ovnight{fill:var(--wx-sky-night)}
.wx-ovsep{stroke:var(--hs-border);stroke-width:1}
.wx-ovline{fill:none;stroke:var(--wx-temp);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wx-ovwet{fill:color-mix(in srgb,var(--wx-rain) 30%,transparent)}
.wx-ovpeak{fill:var(--hs-surface);stroke:var(--wx-temp);stroke-width:2}
.wx-ovday{position:absolute;top:0;bottom:0;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.wx-ovday:hover{background:color-mix(in srgb,var(--hs-text) 5%,transparent)}
.wx-ovday:focus-visible{outline:2px solid var(--hs-primary);outline-offset:-2px}
.wx-tick{stroke:color-mix(in srgb,var(--hs-text) 11%,transparent);stroke-width:1}
.wx-base{stroke:var(--hs-border);stroke-width:1}
.wx-key{flex:none;display:flex;align-items:center;gap:18px;padding:6px 20px 10px;white-space:nowrap}
@media (max-width:599px){.wx-key{flex-wrap:wrap;gap:4px 14px}.wx-src{flex-basis:100%;margin-left:0;text-align:left}.wx-pt h2{font-size:15px}.wx-pt > span{font-size:13px}}
/* Room for the bar: a phone's page and +, and the tools column and + on a laptop; a laptop calendar's hours reach down to
   it, so their lines meet the bar's. */
body.with-wx main.content{padding-bottom:calc(var(--hs-navbar) + 96px + var(--hs-safe-b) + var(--hs-wx-room))}
body.with-wx .fabs{bottom:calc(var(--hs-navbar) + 16px + var(--hs-safe-b) + var(--hs-wx-h))}
/* A message along the bottom sits above the weather bar too, never over it (it had covered a day’s weather, so a tap
   there waited for the message to go). */
body.with-wx .snack{bottom:calc(var(--hs-navbar) + 16px + var(--hs-safe-b) + var(--hs-wx-h))}
body.wx-open .fabs{display:none}
/* Opened on a phone, the hours take the bar's place (Derek, October 28: "if it's expanded, we don't need to have the
   original weather data there"), pull down by their handle to close, and the page behind stays put ("if I swipe up
   and down, it scrolls what's behind it, which it shouldn't do"). A laptop keeps the bar, which hovering opens. */
.wx-grab{display:none}
.wx-panel{overscroll-behavior:contain}
@media (max-width:839px){
  body.wx-open{overflow:hidden}
  body.wx-open .wx-bar{display:none}
  body.wx-open .wx-panel{max-height:calc(100dvh - var(--hs-topbar) - var(--hs-safe-t) - var(--hs-navbar) - 16px)}
  .wx-grab{display:block;flex:none;width:32px;height:4px;border-radius:2px;background:var(--hs-control);margin:8px auto 0}
  .wx-panel{touch-action:pan-x pan-y}
}
@media (max-width:839px){:root:has(> body.with-wx){--hs-wx-h:36px;scroll-padding-bottom:calc(var(--hs-navbar) + var(--hs-safe-b) + var(--hs-fab) + 32px + var(--hs-wx-room))}}
@media (min-width:840px){
  .wx{left:var(--hs-rail);bottom:0}
  body.with-wx main.content{padding-bottom:calc(112px + var(--hs-wx-room))}
  body.with-wx .fabs{bottom:calc(28px + var(--hs-wx-h))}
  body.with-wx .snack{bottom:calc(28px + var(--hs-wx-h))}
  body.with-wx #main:has(.cal-scroll),body.with-wx .page.split > .split-main:has(.cal-scroll){padding-bottom:var(--hs-wx-room)}
  body.with-wx #main:has(> .page.split .cal-scroll){padding-bottom:0}
  body.with-wx .disc-panel{height:calc(100dvh - var(--hs-topbar) - var(--hs-safe-t) - var(--hs-wx-room))}
}
/* The weather ends at the right column, which keeps its whole height with it or without it (Derek, October 28: "if you
   switch to a view that has the weather and doesn't, the buttons on the right move around"). */
@media (min-width:1024px){
  .wx{left:var(--hs-nav-w);right:calc(var(--hs-toolbar-right,0px) + var(--hs-toolbar-w))}
}
body.wall-on .wx{display:none!important}
@media print{.wx{display:none!important}}
/* Whose calendar (HSC-09): the button under a connected calendar in Settings › Calendars, and the choice it opens. */
.cal-whose{align-self:flex-start;height:36px;min-height:36px;padding:0 6px;margin:2px 0 0 -6px;font-size:13px;gap:4px}
.whose-list .radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--hs-muted)}
.whose-list [aria-checked="true"] .radio{border:6px solid var(--hs-primary)}
/* The setup wizard's "Which of your calendars are yours?" (HSC-09). */
.setup-own{margin:0;padding:0;overflow:hidden}
.setup-own-h{display:flex;flex-direction:column;gap:2px;padding:14px 16px 8px}
/* The calendar on the page itself (Derek, later October 19: "I don't like this darker paper border around the calendar.
   It's just taking up extra space"): on a laptop, Plan's Week (beside Discover too) and Month and Day's calendar are drawn with no
   desk around them; the left and right columns keep the desk. */
@media (min-width:1024px){
  #main:has(> [data-plan]),#main:has(> [data-today].page.full),#main:has(> [data-today].page.split .cal-scroll){--hs-bg:var(--hs-surface);background:var(--hs-surface)}
  #main:has(> [data-plan]) .cal-card,#main:has(> [data-today]) .cal-card{margin:0!important;border-radius:0!important;box-shadow:none!important}
  #main:has(> [data-plan]) :is(.wkt-hscroll,.wkt-body){margin:0 8px}
  #main:has(> [data-plan]) .wkt-col{box-shadow:none;background:var(--hs-raised)}
}
/* Children's initials in the calendar's colors (Derek, later October 19: "the colors for the kids don't match the colors
   on the calendar. Let's make the initials match"): their pastel (person-colors.js badgeTone) under the page's ink, its
   deep version under light ink in Dark; Discover's child circles likewise. */
/* Since October 29 (Derek's "Family color picker update") a person's initials in Light are their own color with that color's
   ink (--av, --avi); Dark keeps the deep pastel under the page's ink. */
.kb.kb-p{background:var(--av,var(--pb));color:var(--avi,var(--hs-text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pbe) 55%,transparent)}
:root[data-yezbi-theme="dark"] .kb.kb-p{background:var(--pb-d);color:var(--hs-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pbe-d) 70%,transparent)}
:root[data-yezbi-theme="dark"] .kb-p > *{--pb:var(--pb-d);--pbe:var(--pbe-d);--av:var(--pb-d);--avi:var(--hs-text)}
.kb.kb-av{background:var(--av);color:var(--avi)}
:root[data-yezbi-theme="dark"] .kb.kb-av{background:var(--kc-fill,var(--hs-control));color:var(--hs-kid-ink)}
/* A child's initial always wears their own pastel (Derek, October 20: "the same color as they do in the plan view, even
   if they aren't selected. They can just be dimmed out"): a circle not chosen, while others are, is dimmed, never grey.
   badge(id, size, {off: true}) gives .kb-off for the same look elsewhere. The guard is screen-sweep.mjs "initials". */
.dp-kid.kb-p > span,.kid-dot.kb-p .kd{background:var(--av,var(--pb));border-color:var(--pbe);color:var(--avi,var(--hs-text));transition:opacity .12s}
.dp-kid.kb-p[aria-pressed="true"] > span,.kid-dot.kb-p[aria-pressed="true"] .kd{box-shadow:0 0 0 2px var(--hs-surface),0 0 0 3px var(--pbe)}
.dp-kids.some .dp-kid[aria-pressed="false"] > span,.kid-picks:has(.kid-dot[aria-pressed="true"]) .kid-dot[aria-pressed="false"] .kd,.kb.kb-off,
.opt-chips:has(> [aria-pressed="true"], > [aria-checked="true"]) > :is([aria-pressed="false"],[aria-checked="false"]) .kb.kb-p{opacity:.5}
.dp-kids.some .dp-kid[aria-pressed="false"]:hover > span,.kid-picks:has(.kid-dot[aria-pressed="true"]) .kid-dot[aria-pressed="false"]:hover .kd{opacity:.8}
/* The place you're in (Derek, October 20): on the calendar's paper color ("When the plan view is selected, can you have it
   be the same color as the calendar background?"). Other places' pages pop out on hover. */
.sn-item.on{background:var(--hs-surface);border-radius:16px;box-shadow:0 0 0 1px color-mix(in srgb,var(--hs-rule,var(--hs-border)) 70%,transparent)}
/* The second column (app.js COLUMN, subNav; Derek, October 20, note 9: "it just opens an additional menu bar just to the
   left of that vertical bar"): School year, Discover, Records, Curriculum, Community and Kids list their pages from the
   top of a full-height column on the paper color, joined to the place you're in, with the page's own sections under its
   row in place of the page's section menu. Laptops only; phones and tablets keep ☰ and the page's own menu. */
.subnav{display:none}
@media (min-width:1024px){
  :root{--hs-sub-w:256px}
  .subnav:not([hidden]){display:block;position:fixed;left:var(--hs-nav-w);top:var(--hs-chrome-top,64px);bottom:0;width:var(--hs-sub-w);z-index:25;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 10px 16px;background:var(--hs-surface);border-right:1px solid var(--hs-border)}
  body.with-subnav #main{margin-left:calc(var(--hs-nav-w) + var(--hs-sub-w))}
  body.with-subnav .sn-item.on{border-radius:16px 0 0 16px;margin-right:-6px;box-shadow:none}
  body.with-subnav .set-layout.has-nav{grid-template-columns:minmax(0,1fr)}
  body.with-subnav .set-layout.has-nav > .set-nav{display:none}
  body.with-subnav .page:has(> .set-layout.has-nav){max-width:900px}
  body.with-subnav .rec-layout .rec-chips{display:none}
}
.sb-h{padding:6px 12px 10px;font-size:18px;font-weight:700;letter-spacing:-.01em}
/* Discover's pictures whole in a rounded square tile (discover.js tile; Derek, October 20, notes 29, 33 and 34): a wide
   picture, a date or a kind's icon in the top three-quarters with the kind across the bottom quarter; a tall cover or
   poster in the right three-quarters with the kind up the left quarter. Never cropped: a picture that doesn't match its
   area shows whole on a soft matching background. One size per place (--tile). */
.tile{--tile:112px;position:relative;flex:none;width:var(--tile);height:var(--tile);border-radius:calc(var(--tile) * .16);overflow:hidden;display:grid;background:var(--art-bg,var(--hs-raised));color:var(--art-fg,var(--hs-muted))}
.tile img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:color-mix(in srgb,var(--art-fg,var(--hs-muted)) 10%,var(--art-bg,var(--hs-raised)))}
.tile .tile-i{display:none;align-items:center;justify-content:center;min-height:0}
.tile .tile-i .ms{font-size:calc(var(--tile) * .4)}
.tile .tile-k{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;font-size:clamp(8.5px,calc(var(--tile) * .095),14px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--art-fg,var(--hs-muted))}
.tile:is([data-shape="wide"],[data-shape="date"],[data-shape="mark"]){grid-template-rows:3fr 1fr}
.tile[data-shape="mark"] .tile-i{display:flex}
.tile[data-shape="wide"] img{grid-row:1}
.tile[data-shape="tall"]{grid-template-columns:1fr 3fr}
.tile[data-shape="tall"] img{grid-column:2;grid-row:1}
.tile[data-shape="tall"] .tile-k{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg)}
/* On the full page the kind is bigger, in proportion to the tile (note 41: "Can you make the word bigger since we have
   more space?"); beside the calendar it stays compact. */
.fc-main .tile .tile-k{font-size:calc(var(--tile) * .118);letter-spacing:.08em}
.tile-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1}
.tile-date small{font-size:calc(var(--tile) * .13);font-weight:700}
.tile-date b{font-size:calc(var(--tile) * .34);font-weight:800}
/* The full page's cards, two or three across (discover.js fullRow; Derek, October 20, note 28). */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:10px;margin:0 12px 10px}
.fcard{position:relative;display:flex;background:var(--hs-surface);border-radius:var(--hs-r-card);box-shadow:var(--hs-shadow);min-width:0}
.fc-main{flex:1;min-width:0;display:flex;align-items:stretch;gap:12px;padding:10px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--hs-r-card)}
/* Every card the same height, its tile filling it (Derek, October 20, note 29: "so that it takes up the full height"):
   two lines of title, the details, why it fits, two lines of the description, and a foot for the services and Add. */
.fc-main .tile{--tile:156px}
.fc-body{flex:1;min-width:0;height:156px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.fc-body b{min-height:2.6em}
.fc-foot{margin-top:auto;min-height:36px;display:flex;align-items:center;gap:4px;padding-right:140px;overflow:hidden}
.fc-body b{font-size:15.5px;line-height:1.3}
.fc-meta{font-size:13px;color:var(--hs-muted)}
.fc-why{font-size:13px;color:var(--hs-emph)}
.fc-desc{font-size:13px;line-height:1.35;color:var(--hs-text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fc-tag{align-self:flex-start}
.fc-add{position:absolute;right:10px;bottom:10px;height:36px;padding:0 14px}
/* An idea's ⋮ (note 58): top right of a card; in the panel beside the calendar, under its + and shown on hover or focus
   (it still answers a right-click or long press anywhere on the row). */
.fcard .r-more{position:absolute;top:6px;right:6px;width:36px;height:36px}
.fcard .fc-body{padding-right:30px}
.list-row.pr .r-more{position:absolute;top:54px;right:8px;width:40px;height:40px;opacity:0}
.list-row.pr:hover .r-more,.list-row.pr .r-more:focus-visible{opacity:1}
@media (max-width:599px){.fc-main .tile{--tile:96px}.fc-body{height:auto;min-height:96px}.fc-foot{padding-right:0;padding-bottom:40px}.fgrid{margin:0 8px 10px}}
/* A search on every kind (discover.js searchBar). */
.disc-search{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 16px 4px}
.ds-field{position:relative;flex:1;max-width:560px;display:flex;align-items:center;color:var(--hs-muted)}
.ds-field > .ms{position:absolute;left:14px;pointer-events:none}
.ds-field input{flex:1;min-width:0;height:44px;padding:0 14px 0 42px;border:1px solid var(--hs-control);border-radius:22px;background:var(--hs-surface);color:var(--hs-text);font:inherit;font-size:15px}
.ds-field input::placeholder{color:var(--hs-muted);opacity:1}
.ds-field input:focus-visible{outline:2px solid var(--hs-primary);outline-offset:1px}
.ds-count{flex:none}
.disc-search.compact{padding:6px 0 0}
.disc-search.compact .ds-field{max-width:none}
.disc-search.compact .ds-field input{height:40px}
/* Local events' order and "Fits your week". */
.ev-sort{gap:8px;flex-wrap:wrap;padding:2px 16px 4px}
.ev-sort .seg a{padding:0 12px}
/* Download app under Settings (install.js; Derek, October 20, note 22). */
.sn-install .sn-link{width:100%;border:0;background:none;font:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--hs-text)}
.sn-install .sn-link .ms-svg{color:var(--hs-muted)}
.sn-install .sn-l{white-space:normal;overflow:visible;line-height:1.1}
.dr-row .ms-svg{flex:none;color:var(--hs-muted)}
.install-step{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--hs-raised)}
.install-step.other{background:none;padding:4px 12px;color:var(--hs-muted)}
.install-step.other b{font-weight:600}

.sb-list,.sb-secs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sb-link,.subnav > .sb-secs .sb-sec{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border-radius:12px;color:var(--hs-text);text-decoration:none;font-size:14px;font-weight:500;line-height:1.25}
.sb-link .ms{color:var(--hs-muted)}
.sb-link[aria-current="page"],.subnav > .sb-secs .sb-sec[aria-current]{background:var(--hs-sel,var(--hs-primary-soft));font-weight:700}
.sb-link[aria-current="page"] .ms{color:var(--hs-text);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.sb-secs .sb-secs,.sb-list .sb-secs{margin:2px 0 8px 21px;padding-left:6px;border-left:2px solid var(--hs-border)}
.sb-sec{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 10px;border-radius:10px;color:var(--hs-muted);text-decoration:none;font-size:13.5px;line-height:1.25}
.sb-sec[aria-current]{color:var(--hs-text);font-weight:700}
.sb-sec .grow{flex:1;min-width:0}
.sb-link:hover,.sb-sec:hover{background:color-mix(in srgb,var(--hs-text) 6%,transparent);color:var(--hs-text)}
.sb-link:focus-visible,.sb-sec:focus-visible{outline-offset:-3px}
/* A place's own Settings at the foot of its column (batch 33). */
@media (min-width:1024px){.subnav:not([hidden]):has(> .sb-end){display:flex;flex-direction:column}}
.sb-end{margin-top:auto;padding-top:8px;border-top:1px solid var(--hs-border)}
@media (min-width:1024px){
  .sidenav{scrollbar-width:thin}
  .sn-link{min-height:54px}
  /* +, D and the AI button (note 39): the same size, 48 px (the AI button's since note 36: "a little too big"), level,
     12 px apart, each named above it on hover or focus; + in the logo's blue, D on paper with a blue ring, the AI button
     in the logo's colors. The tool column's foot: Help above Light/Dark (note 46). */
  .fab,.fab2{width:48px;height:48px}
  .fab{background:var(--hs-logo);color:var(--hs-on-logo)}
  .fab2{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;border-radius:50%;cursor:pointer;box-shadow:0 4px 12px rgba(16,24,40,.24)}
  .fab2[hidden]{display:none}
  .fab-d{background:var(--hs-surface);color:var(--hs-logo);box-shadow:inset 0 0 0 2px var(--hs-logo),0 4px 12px rgba(16,24,40,.2);font-family:var(--hs-font-brand);font-size:23px;font-weight:800;line-height:1}
  .fab-d[aria-pressed="true"]{background:var(--hs-logo);color:var(--hs-on-logo)}
  .fab-d:hover{background:color-mix(in srgb,var(--hs-logo) 12%,var(--hs-surface))}
  .fab-d[aria-pressed="true"]:hover{background:var(--hs-logo);filter:brightness(1.06)}
  /* Stacked since October 21 (Derek, note 69: "Let's make those vertical, still outside of the right toolbar but
     vertical"): + at the top, then D, then the AI button, each named to its left. The open panel's button is pressed
     (app.js syncPanelBtns): a ring around it, D filled, + turned to ×. */
  .fabs{flex-direction:column}
  .fabs [data-tip]:is(:hover,:focus-visible)::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:8px;background:var(--hs-inv);color:var(--hs-on-inv);font:600 13px/1.3 var(--hs-font);white-space:nowrap;pointer-events:none;z-index:1}
  .fabs > [aria-pressed="true"]{box-shadow:0 0 0 3px var(--hs-bg),0 0 0 5px var(--hs-logo),0 4px 12px rgba(16,24,40,.24)}
  .fabs > .fab-ask[aria-pressed="true"]{box-shadow:0 0 0 3px var(--hs-bg),0 0 0 5px var(--hs-ask-a),0 4px 12px rgba(16,24,40,.24)}
  .fab > .ms{transition:transform .15s}
  .fab[aria-pressed="true"] > .ms{transform:rotate(45deg)}
  @media (prefers-reduced-motion:reduce){.fab > .ms{transition:none}}
  /* Room for the column at the end of the page and of the hours, so the last row or the end of the day scrolls out
     from under it: the AI button alone, + with it, or all three on Plan and Day. */
  :root{--hs-fabs-room:112px}
  :root:has(.fabs > .fab:not([hidden])){--hs-fabs-room:172px}
  :root:has(.fabs > .fab-d:not([hidden])){--hs-fabs-room:232px}
  html{scroll-padding-bottom:var(--hs-fabs-room)}
  :root:has(> body.with-wx){scroll-padding-bottom:calc(var(--hs-fabs-room) + var(--hs-wx-room))}
  main.content,.page.split > .split-main{padding-bottom:var(--hs-fabs-room)}
  body.with-wx main.content{padding-bottom:calc(var(--hs-fabs-room) + var(--hs-wx-room))}
  /* At the end of the hours a spacer, not padding: the hours' own height is fitted to the window (calscroll.js). */
  [data-calscroll]{scroll-padding-bottom:calc(var(--hs-fabs-room) - 40px)}
  [data-calscroll]::after{content:"";display:block;height:calc(var(--hs-fabs-room) - 40px)}
  .tbar-foot{padding-bottom:calc(28px + var(--hs-safe-b))}
  /* Since October 21 (note 67) each tool is the top bar's size: a 44 px target with a 24 px icon, like search and the
     bell, centered in the 56 px column. */
  .tbar-tools,#main .screen-tools{padding:12px 6px}
  .tr-btn,#main .screen-tools > :is(a,button,label){width:44px;height:44px!important;border-radius:22px}
  .tr-btn{padding-right:10px}
  .tr-btn > .ms,#main .screen-tools > * > .ms{font-size:24px}
  .tr-ico .tb-theme-i{width:24px;height:24px}
  /* The family's other Yezbi apps at the column's foot, above Help (Derek, October 21, note 49: "the bottom of that
     right tool column would be a great spot for our other app icons instead of hidden under the profile"), each named
     beside it on hover or focus, as Help and Light/Dark are. */
  .tbar-foot .tr-app img{display:block;width:24px;height:24px}
  .tbar-foot .tr-app{padding-right:10px}
  .tbar-foot .tr-apps-sep{width:28px;height:1px;background:var(--hs-border);margin:2px 0}
  /* A size bigger, centered in the column (Derek, October 28: "make the buttons a little bigger, or at the very least,
     center them"): 48 px targets with 26 px icons. Named on hover, they still widen to the left (above). */
  .tbar-tools,#main .screen-tools{padding:12px 4px 12px 3px;align-items:flex-end}
  .tr-btn,#main .screen-tools > :is(a,button,label){width:48px;height:48px!important;border-radius:24px}
  .tr-btn{padding-right:11px}
  .tr-btn > .ms,#main .screen-tools > * > .ms{font-size:26px}
  .tr-ico .tb-theme-i{width:26px;height:26px}
  .tbar-foot .tr-app img{width:26px;height:26px}
  .tbar-foot .tr-app{padding-right:11px}
  .tbar-foot [data-tip]:is(:hover,:focus-visible)::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:8px;background:var(--hs-inv);color:var(--hs-on-inv);font:600 13px/1.3 var(--hs-font);white-space:nowrap;pointer-events:none;z-index:2}
  /* The names showed nowhere: the buttons clip what spills out of them, and the name is drawn beside one (Derek, October 28:
     "When we hover over the icons in the right toolbar on desktop, can you have it pop up the name of that app … Can you
     also have tooltips for the question mark and the moon"). The foot's buttons don't widen, so they needn't clip. */
  .tbar-foot .tr-btn{overflow:visible}
  .tr-help[aria-current]{background:var(--hs-sel,var(--hs-primary-soft))}
  /* The AI button stands out (Derek, October 20, note 21: "change the coloring or the effects of it to make it more
     obvious and noticeable, so people actually use that feature"), in two looks to choose between on staging (app.js
     askLook): "logo", the usual, filled with the logo's blue, teal and terracotta; "glow", paper with a ring that slowly
     turns from blue to terracotta and a soft glow, still under reduced motion. */
  .fab-ask{background:linear-gradient(135deg,var(--hs-ask-a) 10%,var(--hs-ask-b) 55%,var(--hs-ask-c) 100%);color:var(--hs-on-ask);box-shadow:0 3px 10px color-mix(in srgb,var(--hs-ask-a) 45%,transparent)}
  .fab-ask .ms{font-size:24px}
  .fab-ask:hover{background:linear-gradient(135deg,var(--hs-ask-a) 0%,var(--hs-ask-b) 45%,var(--hs-ask-c) 100%);filter:brightness(1.06)}
  :root[data-ask-look="glow"] .fab-ask{background:var(--hs-surface);color:var(--hs-ask-a);animation:ask-glow 4s ease-in-out infinite;box-shadow:0 0 0 2px var(--hs-ask-a),0 0 12px 1px color-mix(in srgb,var(--hs-ask-b) 40%,transparent)}
  :root[data-ask-look="glow"] .fab-ask:hover{background:var(--hs-raised);filter:none}
}
@keyframes ask-glow{0%,100%{box-shadow:0 0 0 2px var(--hs-ask-a),0 0 10px 0 color-mix(in srgb,var(--hs-ask-b) 35%,transparent)}50%{box-shadow:0 0 0 2px var(--hs-ask-c),0 0 18px 4px color-mix(in srgb,var(--hs-ask-c) 40%,transparent)}}
@media (prefers-reduced-motion:reduce){:root[data-ask-look="glow"] .fab-ask{animation:none}}
@media (min-width:1024px){
}
/* Discover's "Search by theme" (Derek, October 20: "make it obvious that you can search by theme in the discovery
   tab"): a search field's look at the top of the page; it opens the theme sheet. */
.theme-search{display:flex;align-items:center;gap:10px;width:min(560px,100%);min-height:48px;padding:6px 14px 6px 12px;border:1px solid var(--hs-border);border-radius:24px;background:var(--hs-surface);color:var(--hs-text);font:inherit;font-size:15px;text-align:left;cursor:pointer;box-shadow:var(--hs-shadow)}
.theme-search:hover{border-color:var(--hs-control)}
.theme-search .ts-i{display:flex;color:var(--hs-primary)}
.theme-search .ts-l{flex:none;font-weight:700}
.theme-search .ts-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hs-muted)}
.theme-search .ts-v.on{color:var(--hs-text);font-weight:600}
.theme-search > .ms:last-child{color:var(--hs-muted)}
/* A short laptop screen (768 px tall) keeps every place and Family and Settings in view: the buttons tighten. */
@media (min-width:1024px) and (max-height:820px){
  .sidenav{padding-top:6px;gap:4px}
  .sn-list{gap:0}
  .sn-link{min-height:46px;padding:3px 2px;gap:1px}
  .sn-end{padding-top:4px}
}
/* One place for a screen's dates (app.js datedBar; Derek, October 20: "Let's just make the date be centered on the
   window, on the top bar"): ‹ date › centered on the window, Today just left of it, Day/Week (or Plan's view and
   arrangement) just right; the page's name stays at the left. A crowded bar steps down (fitTopbar), and last lets the
   dates follow the name (fit-flow). On a phone the row sits at the top of the page. */
@media (min-width:1024px){
  .topbar.tb-top .tb-mid.dated{position:static}
  .tb-dates{position:absolute;left:50%;top:calc(var(--hs-safe-t) + var(--hs-topbar) / 2);transform:translate(-50%,-50%);display:flex;align-items:center;gap:2px;white-space:nowrap}
  .tb-dates > .tb-today{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);margin:0}
  .tb-dates > .tb-after{position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
  .tb-dates > .tb-after > :is(.tb-viewslot,.tb-arrslot){margin-left:0}
  .tb-dates .tb-date{margin:0 2px}
  .tb-spans button{height:36px;padding:0 14px;background:var(--hs-surface)}
  .tb-spans button[aria-pressed="true"]{background:var(--hs-sel,var(--hs-primary-soft))}
  .topbar.fit-flow .tb-dates{position:static;transform:none;margin-left:8px}
  .topbar.fit-flow .tb-dates > :is(.tb-today,.tb-after){position:static;transform:none;margin:0 6px}
  /* Following the name, the hidden Today placeholder takes no room; the tightest bar has its tabs and Day · Week a size
     smaller (app.js fitTopbar). */
  .topbar.fit-flow .tb-dates > .tb-today-off{display:none}
  .topbar.fit-tabs .tb-spans button{padding:0 10px}
}
.dated-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.dated-row .tb-spans,.dated-row > .seg{margin-right:auto}
.dated-row .dated-today{margin-left:auto}
.dated-row .dp-label{font-size:17px;font-weight:700}