/* Daily Life Doc: tokens, the type scale, buttons, the shared recipes (tile, page header, section heading, filter
   row, empty state) and the motion classes. Every colour is a token on :root with a dark set in the two blocks.
   Round 13 (zone XF): the sage set of the page "Expert Plans" (docs/artifact/expert/index.html: --app, --app2,
   --card, --cardline, --sage, --sage-d, --fab, --bubble, --mine, --on-mine), its lifted shadow (--lift; the old
   --shadow stays a colour) and its pill button (.pill: 14 px, 8 × 15, round ends). The expert's layout (the left
   list, the head row, the places) is in css/shell.css. The old four place triads stay until no kept file reads them.
   Round 13 (FX-F2): one 14 px step (--t-s; --t-sm is its older name), --field and --seg-on, and a dark set tinted
   towards the green-black ground (the warm brown cards of the first dark set fought the ground). */
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --bg: #F5F2EC;              /* the page: warm paper */
  --surface: #FFFFFF;         /* cards and sheets */
  --ink: #1A2130;
  --ink2: #4D5364;
  --ink3: #666B7B;
  --line: #E5DFD3;
  --soft: #ECE7DD;
  --on-ink: #FFFFFF;          /* words on a dark (ink) button */
  --ink-hover: #2A3348;
  --glass: rgba(255, 255, 255, .7);
  --scrim: rgba(26, 33, 48, .34);
  --shadow: rgba(40, 32, 20, .5);
  --page-bg: #DAD5CA;         /* outside the phone frame */
  --frame: #17202E;           /* the phone frame's edge */
  --focus: #2F6FDB;
  --red: #D5382F;             /* the unread count */
  --good: #2E9E5B; --good-bg: #D5EEDC; --good-d: #1E5E37;   /* Helped */
  --bad: #D5382F; --bad-bg: #F9DEDB; --bad-d: #8A1F18;      /* Did not help, Made worse */
  --try: #D9A521; --try-bg: #FBEAB5; --try-d: #6A5000;      /* To try */
  --exp: #E4ECCD; --exp-a: #9DB65C; --exp-d: #3C4D14;       /* a control chip, an experiment mark */
  --note: #E0E3FA; --note-d: #2F3A80;                       /* small marks */
  --care: #F7DDE3; --care-d: #82304A;                       /* small marks: By care team */
  /* The four places: soft fill, accent, deep text. Use them through --pc-bg, --pc, --pc-d (below). */
  --today-bg: #FCE4CC; --today: #EE9A4D; --today-d: #7A3F0C;
  --atlas-bg: #D3EEE8; --atlas: #4FB7A7; --atlas-d: #12564E;
  --library-bg: #E0E3FA; --library: #8793E3; --library-d: #2F3A80;
  --experiments-bg: #E4ECCD; --experiments: #9DB65C; --experiments-d: #3C4D14;
  /* The open place's colour. With no place (Messages, Profiles, onboarding) it is quiet ink. */
  --pc-bg: var(--soft); --pc: var(--ink3); --pc-d: var(--ink);
  /* Round 6. --nav: the plus button (brown; in panel mode also the open tab of the bar). --done: the tick of an answered
     line. --tint: the soft tint behind a line an update just changed, behind Requests at the top of Today and behind
     a preview. --tint-team: the same for what only the care team sees (a proposal, a draft reply). */
  --nav: #7A3F0C; --on-nav: #FFFFFF; --done: #9DB65C;
  --tint: color-mix(in srgb, var(--pc-bg) 62%, var(--surface));
  --tint-team: color-mix(in srgb, var(--care) 55%, var(--surface));
  --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Curves: out = something arrives or answers a tap; io = something moves from one place to another;
     drawer = a page or sheet slides; spring = a small overshoot (the tab pill, a tick, a count). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  /* One type scale: every size in the app is one of these. --t-sm is the older name of --t-s (round 13, FX-F2: the
     13.5 px step half a pixel from 14 px was merged into one step); new code writes --t-s. */
  --t-2xs: 11.5px; --t-xs: 12.5px; --t-s: 14px; --t-sm: var(--t-s); --t-m: 16px; --t-l: 18px; --t-xl: 22px; --t-xxl: 30px;
  /* One duration per kind of action. */
  --m-press: 140ms; --m-step: 200ms; --m-add: 320ms; --m-remove: 220ms; --m-tab: 320ms; --m-push: 380ms; --m-pop: 300ms;
  --m-sheet: 420ms; --m-toast: 320ms; --m-flash: 1400ms; --m-tick: 520ms;
  /* Sizes other files place things by. --sb is the status bar inside the frame (0 on a real phone). */
  /* --plus: the floating plus button. --foot-h: the room the button takes at the foot of Today and Atlas, with the
     phone's safe-area inset (80 px without one; panel mode's bar with its raised button takes about as much). */
  --plus: 60px; --foot-h: calc(var(--plus) + 20px + env(safe-area-inset-bottom, 0px)); --sb: 0px; --gut: 16px;
  /* Round 13: the expert's app (the page "Expert Plans"). --app/--app2: the screen's ground, top to bottom; --card:
     a list row, the plan's column, the chat's column; --cardline: lines inside a card; --sage/--sage-d: the open
     thing's ring and the expert's deep green; --bubble: the client's bubble; --mine: the expert's own bubble. */
  --app: #E9EFEA; --app2: #F0F3EE; --card: #F8FAF7; --cardline: #E3E9E3; --sage: #86AE8F; --sage-d: #2C5845; --fab: #2C5845;
  --bubble: #E6E9E4; --mine: #2C5845; --on-mine: #FFFFFF;
  --lift: 0 1px 2px rgba(40, 32, 20, .06), 0 14px 32px -16px rgba(40, 32, 20, .3);
  /* The pill button (.pill): every button of the expert's app, a sheet's main button too (round 13, FX-F2); .btn
     stays only on the client's link pages. */
  --pill-t: var(--t-s); --pill-pad: 8px 15px; --pill-sm-t: var(--t-xs); --pill-sm-pad: 5px 12px;
  /* Round 13 (FX-F2): --field is a tinted field and the inset box inside a card (a drafted reply); --seg-on is the
     picked part of a segmented choice, lighter than its track in both themes. */
  --field: #EEF2EE; --seg-on: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131815; --surface: #232B26; --ink: #EFF2EE; --ink2: #B9C1BB; --ink3: #959E98; --line: #36403A; --soft: #2F3833;
    --on-ink: #131815; --ink-hover: #DAD6CE; --glass: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .58);
    --shadow: rgba(0, 0, 0, .7); --page-bg: #0A0D0B; --frame: #36403A; --focus: #7FAAF2; --red: #E5544B;
    --good: #5CC487; --good-bg: #1D3A2A; --good-d: #A9E2C0; --bad: #EE7068; --bad-bg: #43201E; --bad-d: #F5B5B0;
    --try: #E0B446; --try-bg: #40350F; --try-d: #F0D58A; --exp: #2F3A1B; --exp-a: #A6BE68; --exp-d: #D5E3AE;
    --note: #2A3058; --note-d: #CDD3FA; --care: #44222D; --care-d: #F1BFCB; --nav: #F8D2AC; --on-nav: #2A1B0C; --done: #8AA24E;
    --today-bg: #46301A; --today: #E9A262; --today-d: #F8D2AC;
    --atlas-bg: #17403A; --atlas: #5CC2B2; --atlas-d: #B5E8DF;
    --library-bg: #2A3058; --library: #98A3EE; --library-d: #CDD3FA;
    --experiments-bg: #2F3A1B; --experiments: #A6BE68; --experiments-d: #D5E3AE;
    --app: #161C18; --app2: #1A201C; --card: #212824; --cardline: #2E3732; --sage: #8AB894; --sage-d: #BFE0C8; --fab: #3E7A5E;
    --bubble: #2B322E; --mine: #3E7A5E; --on-mine: #FFFFFF; --field: #2F3934; --seg-on: #4A5750;
    --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131815; --surface: #232B26; --ink: #EFF2EE; --ink2: #B9C1BB; --ink3: #959E98; --line: #36403A; --soft: #2F3833;
  --on-ink: #131815; --ink-hover: #DAD6CE; --glass: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .58);
  --shadow: rgba(0, 0, 0, .7); --page-bg: #0A0D0B; --frame: #36403A; --focus: #7FAAF2; --red: #E5544B;
  --good: #5CC487; --good-bg: #1D3A2A; --good-d: #A9E2C0; --bad: #EE7068; --bad-bg: #43201E; --bad-d: #F5B5B0;
  --try: #E0B446; --try-bg: #40350F; --try-d: #F0D58A; --exp: #2F3A1B; --exp-a: #A6BE68; --exp-d: #D5E3AE;
  --note: #2A3058; --note-d: #CDD3FA; --care: #44222D; --care-d: #F1BFCB; --nav: #F8D2AC; --on-nav: #2A1B0C; --done: #8AA24E;
  --today-bg: #46301A; --today: #E9A262; --today-d: #F8D2AC;
  --atlas-bg: #17403A; --atlas: #5CC2B2; --atlas-d: #B5E8DF;
  --library-bg: #2A3058; --library: #98A3EE; --library-d: #CDD3FA;
  --experiments-bg: #2F3A1B; --experiments: #A6BE68; --experiments-d: #D5E3AE;
  --app: #161C18; --app2: #1A201C; --card: #212824; --cardline: #2E3732; --sage: #8AB894; --sage-d: #BFE0C8; --fab: #3E7A5E;
  --bubble: #2B322E; --mine: #3E7A5E; --on-mine: #FFFFFF; --field: #2F3934; --seg-on: #4A5750;
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
}
/* A place's colour reaches everything inside an element that carries data-place. The router sets it on <body> and
   on every page it opens; a block may set it itself (an experiment card on Today: data-place="experiments"). */
[data-place="today"] { --pc-bg: var(--today-bg); --pc: var(--today); --pc-d: var(--today-d); }
[data-place="atlas"] { --pc-bg: var(--atlas-bg); --pc: var(--atlas); --pc-d: var(--atlas-d); }
[data-place="library"] { --pc-bg: var(--library-bg); --pc: var(--library); --pc-d: var(--library-d); }
[data-place="experiments"] { --pc-bg: var(--experiments-bg); --pc: var(--experiments); --pc-d: var(--experiments-d); }
[data-place=""], [data-place="none"] { --pc-bg: var(--soft); --pc: var(--ink3); --pc-d: var(--ink); }
/* --tint is mixed again wherever a place sets its colour. A custom property that names another one is worked out
   on the element that declares it: declared at the root alone, --tint took the root's grey --pc-bg and stayed
   grey inside every place. Declared here too, the tint of Today is warm and the tint of Atlas green. */
[data-place] { --tint: color-mix(in srgb, var(--pc-bg) 62%, var(--surface)); }

* { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
/* A typed field shows no ring (its caret says where the writing goes); a button shows one for the keyboard only. */
button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible { outline: none; }
html:not(.kbd) :focus-visible { outline: none !important; }
svg { display: block; width: 100%; height: 100%; }
h1, h2, h3, p { margin: 0; }
p, small, li { text-wrap: pretty; }
h1, h2, h3, .btn { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: .btn with one kind ----------
   ink = the main action · tint = a main action in the place's colour · grey = a second action ·
   line = a quiet action · soft = on a coloured card. */
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); flex: none;
  transition: transform var(--m-press) var(--ease-out), background-color 200ms ease; }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.sm { width: 36px; height: 36px; } .icon-btn.sm svg { width: 18px; height: 18px; }
.icon-btn.grey { background: var(--soft); }
.icon-btn.tint { background: var(--pc-bg); color: var(--pc-d); }
.btn { height: 56px; border-radius: 18px; padding: 0 20px; font-size: var(--t-l); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform var(--m-press) var(--ease-out), background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn.ink { background: var(--ink); color: var(--on-ink); }
.btn.tint { background: var(--pc-bg); color: var(--pc-d); }
.btn.grey { background: var(--soft); }
.btn.soft { background: var(--glass); }
.btn.line { box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.sm { height: 42px; padding: 0 16px; border-radius: 13px; font-size: var(--t-s); }
.btn.sm svg { width: 18px; height: 18px; }
.btn.wide { width: 100%; }
/* A disabled button is a light grey fill with grey words, never a faded dark button. */
.btn[disabled], .btn.ink[disabled], .btn.tint[disabled] { background: var(--soft); color: var(--ink2); box-shadow: none; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
/* Round 13: the pill button of the expert's screens (the page's .btn): grey; .dark = the one main action of a
   screen; .pk = Ask AI; .sm = the smaller one inside a card or a head. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--pill-t); font-weight: 500; line-height: 1.3; padding: var(--pill-pad);
  border-radius: 999px; background: var(--soft); color: var(--ink); white-space: nowrap; text-decoration: none; transition: transform var(--m-press) var(--ease-out), background-color 200ms ease, color 200ms ease; }
.pill:active { transform: scale(.96); }
.pill svg { width: 15px; height: 15px; flex: none; }
.pill.dark { background: var(--ink); color: var(--surface); }
.pill.pk { background: var(--care); color: var(--care-d); font-weight: 600; }
.pill.sm { font-size: var(--pill-sm-t); padding: var(--pill-sm-pad); }
.pill[disabled] { background: var(--soft); color: var(--ink3); cursor: default; }
.link { color: var(--ink2); font-size: var(--t-s); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }

/* ---------- Recipes (LOOK.md section 5) ---------- */
/* Tile: a small rounded square in the place's soft colour that holds one icon. */
.tile { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--pc-bg); color: var(--pc-d); font-style: normal; }
.tile svg { width: 16px; height: 16px; }
.tile.lg { width: 44px; height: 44px; border-radius: 14px; } .tile.lg svg { width: 24px; height: 24px; }
.tile.xl { width: 64px; height: 64px; border-radius: 21px; } .tile.xl svg { width: 32px; height: 32px; }
.tile.solid { background: var(--pc); color: var(--surface); }
.tile.grey { background: var(--soft); color: var(--ink2); }
/* Page header: the place's large tile, the page's name, one short line under it, one optional control at the right. */
.phead { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 2px 0 16px; }
.phead-t { flex: 1; min-width: 0; }
.phead h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead p { min-height: 19px; font-size: var(--t-sm); font-weight: 500; color: var(--pc-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phead-act { flex: none; display: flex; align-items: center; gap: 8px; }
/* Section heading: a tile with the section's icon, the name, an optional small count or word at the right. */
.sect { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 24px 0 8px; font-size: var(--t-m); font-weight: 600; }
.sect:first-child { margin-top: 2px; }
.sect > span { flex: 1; min-width: 0; }
.sect > small { flex: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink2); }
/* A card tinted with the place's colour, and a framed block in the place's colour (Today's Measure and Actions). */
.card.place { background: var(--pc-bg); color: var(--ink); }
.framed { border-radius: 22px; padding: 14px 16px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--pc); }
/* Filter row: one line of choices with counts; it scrolls sideways and never wraps. data-tone colours a choice. */
.filters { display: flex; gap: 6px; margin: 0 calc(var(--gut) * -1) 14px; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; height: 38px; padding: 0 13px; border-radius: 19px; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); color: var(--ink2);
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.filter:active { transform: scale(0.95); }
.filter b { min-width: 14px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .75; }
.filter::before { content: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.filter[data-tone]::before { content: ''; }
.filter[data-tone="good"]::before { background: var(--good); } .filter[data-tone="bad"]::before { background: var(--bad); }
.filter[data-tone="worse"]::before { background: var(--bad-d); } .filter[data-tone="try"]::before { background: var(--try); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
/* Empty state: a large tile, one line of words, at most one button. */
.blank { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 20px 30px; text-align: center; }
.blank b { font-size: var(--t-l); font-weight: 600; }
.blank p { margin-top: -8px; font-size: var(--t-m); color: var(--ink2); }
.blank .btn { margin-top: 6px; min-width: 200px; }
/* A small state mark: a dot and a word ("Running", "Draft", "Reviewed"). */
.state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: var(--pc-bg); color: var(--pc-d);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); }
.state.live::before { animation: dd-live 1800ms ease-in-out infinite; }
.state.grey { background: var(--soft); color: var(--ink2); } .state.grey::before { background: var(--ink3); }
@keyframes dd-live { 50% { opacity: .35; transform: scale(.8); } }

/* ---------- Motion classes (LOOK.md section 4). JS helpers: DD.motion in js/core/motion.js ---------- */
/* Press: anything that takes a tap answers it. */
.press { transition: transform var(--m-press) var(--ease-out); }
.press:active { transform: scale(0.97); }
/* Add: a thing that has just appeared (a new card, a new row). */
.rise, .m-add { animation: dd-rise var(--m-add) var(--ease-out) both; }
@keyframes dd-rise { from { opacity: 0; transform: translateY(8px); } }
.fade { animation: dd-fade 220ms ease both; }
@keyframes dd-fade { from { opacity: 0; } }
/* A list that arrives: each child a little after the one before (the first eight). */
.stagger > * { animation: dd-rise var(--m-add) var(--ease-out) both; }
.stagger > :nth-child(2) { animation-delay: 35ms; } .stagger > :nth-child(3) { animation-delay: 70ms; } .stagger > :nth-child(4) { animation-delay: 105ms; }
.stagger > :nth-child(5) { animation-delay: 140ms; } .stagger > :nth-child(6) { animation-delay: 175ms; } .stagger > :nth-child(7) { animation-delay: 210ms; }
.stagger > :nth-child(n+8) { animation-delay: 245ms; }
/* Remove: fades and shrinks a little; DD.motion.remove also closes the gap it leaves. */
.m-remove { animation: dd-leave var(--m-remove) ease both; pointer-events: none; }
@keyframes dd-leave { to { opacity: 0; transform: scale(.96); } }
/* Flash: a changed thing glows once in the place's colour. The glow is a shadow, so nothing moves. */
.m-flash { animation: dd-glow var(--m-flash) ease-out 1; border-radius: 8px; }
@keyframes dd-glow { 0%, 22% { background-color: var(--pc-bg); box-shadow: 0 0 0 5px var(--pc-bg); } 100% { background-color: transparent; box-shadow: 0 0 0 5px transparent; } }
/* Save: the button that saved shows a tick for a moment (DD.motion.saved). The tick lies over the words, so the
   button keeps its width. */
.m-saved { position: relative; color: transparent !important; }
.m-saved > * { opacity: 0; }
.m-saved::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 11px; margin: -9px 0 0 -10px; border: solid var(--on-ink); border-width: 0 0 2.6px 2.6px;
  border-radius: 1px; transform: rotate(-45deg); animation: dd-tick 380ms var(--ease-spring) both; }
.m-saved:not(.ink)::after { border-color: var(--ink); }
@keyframes dd-tick { from { opacity: 0; transform: rotate(-45deg) scale(.4); } }
/* A number that changed: DD.motion.tick counts it; .m-pop gives a value that was set by a tap one small spring. */
.m-pop { animation: dd-pop 300ms var(--ease-spring); }
@keyframes dd-pop { from { transform: scale(.82); } }
/* Waiting: a soft pulse on the thing that is being worked on, and three dots. */
.m-wait { animation: dd-wait 1100ms ease-in-out infinite; }
@keyframes dd-wait { 50% { opacity: .45; } }
.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dd-dot 900ms ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 150ms; } .dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dd-dot { 50% { opacity: .2; } }

/* The one place hover is used: a pointer's own feedback on something that already takes a tap. Nothing appears. */
@media (hover: hover) and (pointer: fine) {
  :is(.icon-btn, .btn:not(.ink), .pill:not(.dark), .chip-o, .seg-o, .row, .st-btn, .bl-c, .card.tap, .filter:not([aria-pressed="true"])):not([disabled]):hover {
    background-image: linear-gradient(rgba(125, 120, 110, .12), rgba(125, 120, 110, .12)); }
  .btn.ink:not([disabled]):hover { background-color: var(--ink-hover); }
}
/* Reduced motion: movement is dropped, short fades stay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
    animation-delay: 0ms !important; transition-delay: 0ms !important; }
}