/* Daily Life Doc, revision 3: tokens, the four place colours, the type scale, buttons, the shared recipes of LOOK.md
   (tile, page header, section heading, filter row, empty state) and the motion classes.
   The palette comes from the main artifact (../daily-life-app/css/base.css: navy ink, soft / accent / deep colour
   triads, Lexend) on a warmer paper background. Every colour is a token on :root with a dark set in the two blocks
   the artifact needs. The phone frame is in css/frame.css; the header, the plus button and pages are in css/shell.css. */
[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-2xs: 11.5px; --t-xs: 12.5px; --t-sm: 13.5px; --t-s: 14px; --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;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161513; --surface: #211F1C; --ink: #F2EFE9; --ink2: #BDB8AE; --ink3: #9A958B; --line: #35322D; --soft: #2B2925;
    --on-ink: #161513; --ink-hover: #DAD6CE; --glass: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .58);
    --shadow: rgba(0, 0, 0, .7); --page-bg: #0B0A09; --frame: #3A3732; --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;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161513; --surface: #211F1C; --ink: #F2EFE9; --ink2: #BDB8AE; --ink3: #9A958B; --line: #35322D; --soft: #2B2925;
  --on-ink: #161513; --ink-hover: #DAD6CE; --glass: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .58);
  --shadow: rgba(0, 0, 0, .7); --page-bg: #0B0A09; --frame: #3A3732; --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;
}
/* 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; }
.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), .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; }
}