/* ============================================================
   Crew's scene (the mix, 2026-10-03): one home, four things it runs: money, chores, lists, and the Home that holds them.
   Markup: products/scenes/crew.html; motion: assets/js/scene-crew.js; the shared frame: scene.css.
   The phone is Crew's UI rebuilt from its Flutter code. Inside the screen every size is in the app's own design
   units (ScreenUtilInit designSize 402 x 874, crew-app-development/lib/app.dart:208): --p is one unit, so a value
   read in the code (16.r, 14.sp) is written here as calc(16 * var(--p)). The screen is 402 x 869.5 units.
   Outside the phone the same pieces are drawn at one unit = 1px and scaled by the scene.
   ============================================================ */

.sc[data-scene="crew"] {
  --teal: #47C7BB;
  --c-ink: #010E0B;
  --c-grey: #94A3B8;
  --c-grey2: #989B98;
  --tint: #F1FBFA;
  --btn: url(/assets/img/crew-btn.webp);
}
.sc[data-scene="crew"] .sc-screen { background: #fff; container-type: size; }

/* ---------- the app ---------- */

.cr-ui {
  --p: calc(100cqw / 402);
  position: absolute;
  inset: 0;
  font-family: "Poppins", var(--display);
  color: var(--c-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.cr-ui p, .cr-ui h3, .cr-out p { margin: 0; }
.cr-ui img, .cr-out img { display: block; }
/* a picture of the app, not controls: nothing in it or around it invites a click (RULES 15) */
.sc[data-scene="crew"] .sc-screen, .cr-out { cursor: default; user-select: none; -webkit-user-select: none; }

/* the status bar, as on the Farro scene's phone */
.cr-bar {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0;
  height: calc(52 * var(--p));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(6 * var(--p)) calc(30 * var(--p)) 0 calc(38 * var(--p));
  box-sizing: border-box;
  font: 600 calc(16 * var(--p)) / 1 -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
}
.cr-bar__ic { display: flex; gap: calc(6 * var(--p)); align-items: center; }
.cr-bar__ic svg { height: calc(12 * var(--p)); width: auto; fill: currentColor; }
.cr-bar__ic svg:first-child { width: calc(18 * var(--p)); }
.cr-bar__ic svg:nth-child(2) { width: calc(16 * var(--p)); }
.cr-bar__ic svg:last-child { width: calc(26 * var(--p)); height: calc(13 * var(--p)); }

/* Expenses (expenses_page.dart): 24 under the safe area, the header, 16, the reel of cards and its dots, the tabs, the list */
.cr-scr { position: absolute; inset: 0; background: #fff; }
/* still (no JS, reduced motion): Home only, after the day */
.sc:not(.is-live) .cr-scr:not(.cr-home) { visibility: hidden; }
.cr-head {
  position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(76 * var(--p));
  height: calc(32 * var(--p));
  display: flex; align-items: center;
}
.cr-head__t { flex: 1; font-weight: 600; font-size: calc(20 * var(--p)); letter-spacing: 0; }
.cr-help { width: calc(20 * var(--p)); height: calc(20 * var(--p)); fill: var(--c-grey); flex: none; }
.cr-head .cr-help { margin-right: calc(8 * var(--p)); }
.cr-hbtn {
  position: relative; flex: none;
  height: calc(32 * var(--p)); min-width: calc(32 * var(--p));
  box-sizing: border-box; border: 1px solid var(--c-grey); border-radius: calc(8 * var(--p));
  display: grid; place-items: center; margin-right: calc(12 * var(--p));
}
.cr-hbtn > img { width: calc(24 * var(--p)); height: calc(24 * var(--p)); }
.cr-hbtn--txt { padding: 0 calc(12 * var(--p)); font-size: calc(14 * var(--p)); color: var(--c-grey); }
.cr-jewel { position: absolute; width: calc(16 * var(--p)); height: calc(16 * var(--p)); top: calc(-6 * var(--p)); right: 0; }
.cr-add {
  flex: none; width: calc(32 * var(--p)); height: calc(32 * var(--p)); border-radius: calc(8 * var(--p));
  background: url(/assets/img/crew-add.webp) center / cover; display: grid; place-items: center; /* img_add_back.png */
}
.cr-add svg { width: calc(20 * var(--p)); height: calc(20 * var(--p)); }

/* the Expenses header of 1.0.28 (expenses_header_view.dart:40-159): the help glyph in a 28 box, then 8; Groups and the
   alert on the control surface (edge E4E9E8, shadow 5% blur 4 down 1), 12 apart; the alert a grey silhouette */
.cr-exp .cr-head .cr-help { box-sizing: content-box; padding: calc(4 * var(--p)); }
.cr-exp .cr-hbtn { border-color: #E4E9E8; box-shadow: 0 calc(1 * var(--p)) calc(4 * var(--p)) rgba(0, 0, 0, 0.05); }
.cr-exp .cr-hbtn--txt { font-weight: 400; }

/* the reel (expenses_card_reel.dart): cards 336 wide, 10 apart, 163 high, 2 under the header's 16; the next card
   peeks 40 at the right edge. A card: raised surface, 12 and 14 inside, a top row 20 high (label 12, the link pill) */
.cr-reel { position: absolute; left: calc(16 * var(--p)); top: calc(126 * var(--p)); height: calc(163 * var(--p)); display: flex; gap: calc(10 * var(--p)); }
.cr-card {
  position: relative; flex: none; width: calc(336 * var(--p)); height: 100%; box-sizing: border-box;
  padding: calc(12 * var(--p)) calc(14 * var(--p));
  display: flex; flex-direction: column;
  border-radius: calc(16 * var(--p)); background: #fff; border: 1px solid #E4E9E8;
  box-shadow: 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.cr-card__k { flex: none; height: calc(20 * var(--p)); display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: calc(12 * var(--p)); line-height: calc(18 * var(--p)); color: #6A6A6A; white-space: nowrap; }
.cr-card__k > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-lk { flex: none; display: flex; align-items: center; padding: calc(2 * var(--p)) calc(5 * var(--p)) calc(2 * var(--p)) calc(8 * var(--p)); border-radius: calc(20 * var(--p)); background: var(--tint); font-weight: 500; font-size: calc(10 * var(--p)); line-height: calc(15 * var(--p)); color: var(--teal); }
.cr-lk svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); fill: currentColor; }
/* Pending moves (expenses_pending_card.dart:54-177): 6, two rows 34 high split by a rule, the net pill 32 high at the foot */
.cr-pm__row { flex: none; height: calc(34 * var(--p)); display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: calc(12 * var(--p)); color: #6A6A6A; }
.cr-card .cr-card__k + .cr-pm__row { margin-top: calc(6 * var(--p)); border-bottom: 1px solid #E4E9E8; }
.cr-pm__row img { width: calc(18 * var(--p)); height: calc(18 * var(--p)); flex: none; }
.cr-pm__row span { flex: 1; }
.cr-num { font-weight: 500; font-size: calc(15 * var(--p)); color: #0E0D0D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-card .cr-pm__net { margin-top: auto; flex: none; height: calc(32 * var(--p)); padding: 0 calc(10 * var(--p)); border-radius: calc(10 * var(--p)); background: #F3F5F5; display: flex; align-items: center; justify-content: space-between; font-size: calc(12 * var(--p)); color: #6A6A6A; }
.cr-pm__net b { font-weight: 600; font-size: calc(14 * var(--p)); color: var(--teal); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the month card (expenses_month_card.dart:117-194): the total 24, the split bar 9 high in 3-apart pieces, the legend */
.cr-mc__n { padding-top: calc(1 * var(--p)); font-weight: 600; font-size: calc(24 * var(--p)); line-height: calc(36 * var(--p)); color: #0E0D0D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-card .cr-mc__bar { display: flex; gap: calc(3 * var(--p)); height: calc(9 * var(--p)); margin: calc(10 * var(--p)) 0 calc(9 * var(--p)); }
.cr-mc__bar i { flex: var(--f) 1 0; border-radius: calc(4.5 * var(--p)); background: var(--c); }
.cr-mc__lg { display: flex; flex-wrap: wrap; gap: calc(4 * var(--p)) calc(12 * var(--p)); font-size: calc(11 * var(--p)); color: #6A6A6A; }
.cr-mc__lg span { display: flex; align-items: center; gap: calc(4 * var(--p)); white-space: nowrap; }
.cr-mc__lg span::before { content: ""; width: calc(8 * var(--p)); height: calc(8 * var(--p)); margin-right: calc(1 * var(--p)); border-radius: 50%; background: var(--c); }
.cr-mc__lg b { font-weight: 500; color: #0E0D0D; }
/* the dots under the reel: the one in front a dark pill 16 x 6, the others 6, 5 apart */
.cr-exp .cr-dots { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: calc(5 * var(--p)); }
.cr-exp .cr-dots i { width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: calc(3 * var(--p)); background: rgba(148, 163, 184, 0.45); }
.cr-exp .cr-dots .is-on { width: calc(16 * var(--p)); background: #0E0D0D; }
.cr-exp .cr-dots { top: calc(299 * var(--p)); }

/* the tab bar (common_tab_bar_view.dart): the same white pill as the selector, the chosen tab on the button art */
.cr-tabs {
  position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(301 * var(--p));
  box-sizing: border-box; padding: calc(4 * var(--p));
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: calc(24 * var(--p)); background: #fff;
  border: 1px solid rgba(131, 131, 131, 0.2); box-shadow: 0 0 calc(4 * var(--p)) rgba(0, 0, 0, 0.16);
}
.cr-tabs span {
  text-align: center; padding: calc(11 * var(--p)) 0; font-weight: 500; font-size: calc(12 * var(--p));
  color: var(--c-grey); border-radius: calc(24 * var(--p)); margin-right: calc(8 * var(--p));
}
.cr-tabs span:last-child { margin-right: 0; }
.cr-tabs .is-on { color: #fff; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--btn) center / cover; }

/* the list (expense_debt_list_view.dart, expense_list_item.dart, expense_card_head.dart): padding 16 under the tabs, a
   day header 14 over 18, the next day 24 under the last card; cards 10 apart on the raised surface, 20 / 16 / 16 / 14
   inside: the category 11 in its colour over the title 16, the people 10 under it, the 4-wide category bar 8 from the
   left edge, 18 down and 34 high; the amount 16 on the right */
.cr-exp .cr-tabs { top: calc(317 * var(--p)); border-color: #E4E9E8; box-shadow: 0 calc(1 * var(--p)) calc(4 * var(--p)) rgba(0, 0, 0, 0.05); }
.cr-list { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(382.5 * var(--p)); }
.cr-day { font-size: calc(14 * var(--p)); line-height: calc(21 * var(--p)); color: var(--c-grey2); padding-bottom: calc(18 * var(--p)); }
.cr-rest .cr-day { padding-top: calc(24 * var(--p)); }
.cr-row {
  position: relative; display: flex; align-items: center; gap: calc(12 * var(--p)); box-sizing: border-box;
  padding: calc(16 * var(--p)) calc(16 * var(--p)) calc(14 * var(--p)) calc(20 * var(--p));
  border-radius: calc(16 * var(--p)); background: #fff; border: 1px solid #E4E9E8;
  box-shadow: 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, 0.07);
  margin-bottom: calc(10 * var(--p));
}
.cr-row::before { content: ""; position: absolute; left: calc(8 * var(--p)); top: calc(18 * var(--p)); width: calc(4 * var(--p)); height: calc(34 * var(--p)); border-radius: calc(3 * var(--p)); background: var(--bar); }
.cr-row__l { flex: 1; min-width: 0; display: grid; justify-items: start; }
.cr-row__l em { padding-bottom: calc(1 * var(--p)); font-style: normal; font-weight: 500; font-size: calc(11 * var(--p)); line-height: calc(13.2 * var(--p)); color: var(--lab); white-space: nowrap; }
.cr-row__l b { font-weight: 400; font-size: calc(16 * var(--p)); line-height: calc(24.8 * var(--p)); color: #0E0D0D; white-space: nowrap; }
.cr-row__a { font-weight: 500; font-size: calc(16 * var(--p)); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-pill { margin-top: calc(10 * var(--p)); height: calc(20 * var(--p)); display: flex; align-items: center; }
.cr-arw { width: calc(16 * var(--p)); height: calc(16 * var(--p)); margin: 0 calc(8 * var(--p)); fill: none; stroke: var(--teal); stroke-width: 1.33; flex: none; }
.cr-arw--owe { stroke: #F82626; }

/* avatars (common_member_view.dart): initials on the app's four colours, by person here so each one stays theirs */
.cr-av--m { --av: #FDD891; }
.cr-av--j { --av: #FCB992; }
.cr-av--s { --av: #ADD4C5; }
.cr-av--l { --av: #BDC1B9; }
.cr-av--n { --av: #EEF1F0; color: var(--c-grey) !important; }
.cr-av {
  width: calc(20 * var(--p)); height: calc(20 * var(--p)); flex: none; box-sizing: border-box;
  border-radius: 50%; border: 1px solid rgba(114, 114, 114, 0.2); padding: calc(1 * var(--p));
  background: var(--av) content-box; display: grid; place-items: center;
  font-style: normal; font-weight: 600; font-size: calc(10 * var(--p)); line-height: 1; color: var(--c-ink);
}
.cr-av + .cr-av { margin-left: calc(-5 * var(--p)); }

.cr-nav {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; background: #fff;
  padding: calc(18 * var(--p)) calc(8 * var(--p)) calc(44 * var(--p));
  display: flex; justify-content: space-between;
}
.cr-nav > span { flex: 1; display: grid; justify-items: center; gap: calc(2 * var(--p)); font-size: calc(12 * var(--p)); color: var(--c-grey); }
.cr-nav i { position: relative; display: block; width: calc(24 * var(--p)); height: calc(24 * var(--p)); }
.cr-nav img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cr-nav img + img { visibility: hidden; }
.cr-nav [data-on="1"] { color: var(--teal); }
.cr-nav [data-on="1"] img { visibility: hidden; }
.cr-nav [data-on="1"] img + img { visibility: visible; }
.cr-home-ind {
  position: absolute; z-index: 7; left: 50%; bottom: calc(8 * var(--p)); width: calc(140 * var(--p)); height: calc(5 * var(--p));
  margin-left: calc(-70 * var(--p)); border-radius: 9px; background: #0D0D0F;
}

/* Add expense, step 1 (no app bar; body padding 16, top = safe area + 16) */
/* the page lives under the status bar's line: leaving through the top it goes under it, as under the bezel */
/* the page's body scrolls above its footer (Scaffold bottomNavigationBar): it ends at 869.5 - 44 - 42 - 8 = 775.5 */
/* and under its header, which stays (create_or_edit_expense_page.dart: the header is outside the scrolling form) */
.cr-new__body { position: absolute; inset: 0; clip-path: inset(calc(108 * var(--p)) 0 calc(94 * var(--p)) 0); }
.cr-newclip { position: absolute; inset: 0; z-index: 5; clip-path: inset(calc(52 * var(--p)) 0 0 0); pointer-events: none; }
.cr-new { position: absolute; inset: 0; background: #fff; display: none; box-shadow: calc(-6 * var(--p)) 0 calc(24 * var(--p)) rgba(0, 0, 0, 0.1); }
.cr-new__top { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(68 * var(--p)); display: flex; align-items: center; }
.cr-back { width: calc(40 * var(--p)); height: calc(40 * var(--p)); border-radius: 50%; background: rgba(71, 199, 187, 0.12); display: grid; place-items: center; flex: none; }
.cr-back svg { width: calc(20 * var(--p)); height: calc(20 * var(--p)); fill: var(--teal); }
.cr-new__t { flex: 1; margin-left: calc(12 * var(--p)); font-weight: 500; font-size: calc(18 * var(--p)); }
.cr-new__top .cr-help { margin-right: calc(4 * var(--p)); }
.cr-who {
  position: absolute; top: calc(156 * var(--p)); left: 50%; transform: translateX(-50%);
  display: flex; padding: calc(4 * var(--p)); border-radius: calc(24 * var(--p)); background: #fff;
  border: 1px solid rgba(131, 131, 131, 0.2); box-shadow: 0 0 calc(4 * var(--p)) rgba(0, 0, 0, 0.16);
}
.cr-who > span { position: relative; width: calc(72 * var(--p)); padding: calc(7 * var(--p)) 0; display: grid; place-items: center; }
.cr-who > span img:first-child { width: calc(20 * var(--p)); height: calc(20 * var(--p)); }
.cr-who .cr-jewel { width: calc(28 * var(--p)); height: calc(28 * var(--p)); top: calc(-15 * var(--p)); right: calc(-10 * var(--p)); }
.cr-who__pill {
  position: absolute; left: calc(4 * var(--p)); top: calc(4 * var(--p)); bottom: calc(4 * var(--p)); width: calc(72 * var(--p));
  border-radius: calc(24 * var(--p)); background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--btn) center / cover;
}
.cr-new__name {
  position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(228 * var(--p));
  padding: calc(12 * var(--p)) 0; text-align: center; font-weight: 600; font-size: calc(24 * var(--p)); color: #000; white-space: nowrap;
}
.cr-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--teal); visibility: hidden; }
.cr-amt {
  position: absolute; top: calc(310 * var(--p)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(8 * var(--p)); padding: 0 calc(28 * var(--p)) calc(4 * var(--p));
}
.cr-cur {
  display: flex; align-items: center; gap: calc(10 * var(--p));
  padding: calc(8 * var(--p)) calc(12 * var(--p)); border-radius: calc(20 * var(--p)); background: rgba(0, 0, 0, 0.04);
  font-size: calc(18 * var(--p));
}
.cr-cur svg { width: calc(5 * var(--p)); height: calc(3 * var(--p)); fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cr-amt__n { display: flex; justify-content: center; min-width: calc(50 * var(--p)); padding: 0 calc(8 * var(--p)); font-weight: 600; font-size: calc(24 * var(--p)); text-align: center; font-variant-numeric: tabular-nums; }
.cr-amt__n .cr-type:empty::before { content: "00"; color: var(--c-grey); }
.cr-amt__conv .cr-type:empty::before { content: "00,00"; }
.cr-new__name .cr-type:empty::before { content: "Add expense name..."; color: var(--c-grey); }
.cr-new__name[data-f="1"] .cr-type:empty::before { content: none; }
.cr-amt__conv { position: absolute; left: 0; right: 0; top: calc(367 * var(--p)); text-align: center; font-size: calc(16 * var(--p)); color: var(--c-grey2); }
.cr-carta--in { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(475 * var(--p)); }
.cr-field {
  position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(595 * var(--p));
  box-sizing: border-box; padding: calc(12 * var(--p)) calc(16 * var(--p)); border-radius: calc(24 * var(--p));
  border: 0.5px solid var(--c-grey); font-size: calc(14 * var(--p)); color: #242424;
}
.cr-group { position: absolute; left: calc(16 * var(--p)); top: calc(657 * var(--p)); display: flex; align-items: center; gap: calc(6 * var(--p)); font-size: calc(14 * var(--p)); color: var(--c-grey); }
.cr-grp {
  position: absolute; left: calc(16 * var(--p)); top: calc(700 * var(--p)); width: calc(64 * var(--p));
  display: grid; justify-items: center; gap: calc(5 * var(--p));
}
.cr-grp i {
  width: calc(48 * var(--p)); height: calc(48 * var(--p)); border-radius: 50%; background: var(--av); display: grid; place-items: center;
  font-style: normal; font-weight: 600; font-size: calc(14 * var(--p)); line-height: 1;
}
.cr-grp span { font-size: calc(12 * var(--p)); color: var(--c-grey); white-space: nowrap; }
.cr-foot {
  position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); bottom: calc(44 * var(--p));
  display: flex; align-items: center; gap: calc(16 * var(--p));
}
.cr-circ {
  width: calc(42 * var(--p)); height: calc(42 * var(--p)); box-sizing: border-box; flex: none; border-radius: 50%;
  border: 0.5px solid var(--teal); background: #fff; display: grid; place-items: center;
}
.cr-circ img { width: calc(24 * var(--p)); height: calc(24 * var(--p)); }
.cr-circ--on { border-color: #F9F1DE; background: #F9F1DE; }
.cr-save {
  flex: 1; text-align: center; padding: calc(11 * var(--p)) calc(22 * var(--p)); border-radius: calc(24 * var(--p));
  background: var(--btn) center / cover; color: #fff; font-weight: 600; font-size: calc(12 * var(--p));
}

/* ---------- the Carta receipt (expense_receipt_view.dart), in the app and outside it ----------
   white, radius 16, 1px E4E9E8, shadow 7% blur 10 y2, padding 12 / 14; two zones split by a dashed perforation
   (1.5 wide, 40 tall, dashes 4 and 4, 94A3B8 at 55%); 13/600 main lines, 10.5/400 sub lines; avatars 24 with a 2px ring */
.cr-carta { --u: var(--p); box-sizing: border-box; display: flex; align-items: center; }
.cr-carta b { display: block; font-weight: 600; font-size: calc(13 * var(--u)); line-height: 1.5; color: #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-carta__pay > span, .cr-carta__split > span:not(.cr-stack) { display: block; margin-top: calc(3 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.5; color: var(--c-grey); white-space: nowrap; }
.cr-carta__perf {
  flex: none; width: calc(1.5 * var(--u)); height: calc(40 * var(--u)); margin: 0 calc(12 * var(--u));
  background: repeating-linear-gradient(rgba(148, 163, 184, 0.55) 0 calc(4 * var(--u)), transparent 0 calc(8 * var(--u)));
  border-radius: 1px;
}
.cr-carta__pay, .cr-carta__split { flex: 1; min-width: 0; }
.cr-carta__split { display: flex; flex-direction: column; align-items: flex-end; }
.cr-stack { display: flex; margin-top: calc(6 * var(--u)); }
.cr-av2 {
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); box-sizing: border-box; border-radius: 50%;
  border: calc(2 * var(--u)) solid #fff; background: var(--av); display: grid; place-items: center; flex: none;
  font-style: normal; font-weight: 600; font-size: calc(9.6 * var(--u)); line-height: 1; color: var(--c-ink);
}
.cr-av--n.cr-av2 { font-size: calc(10 * var(--u)); }
.cr-av2 + .cr-av2 { margin-left: calc(15 * var(--u)); }
.cr-carta--in {
  padding: calc(12 * var(--u)) calc(14 * var(--u)); min-height: calc(56 * var(--u));
  background: #fff; border: 1px solid #E4E9E8; border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.07);
}

/* outside: one unit is one pixel, the scene scales it; the two halves meet on the perforation's centre line */
.cr-out { display: none; }
.sc.is-live .cr-out { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translateX(var(--sx, 0px));
  font-family: "Poppins", var(--display); color: var(--c-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.cr-carta--out { z-index: 2; --u: 1px; position: absolute; left: 0; top: 0; width: 370px; transform-origin: 0 0; visibility: hidden; align-items: stretch; }
.cr-half { position: relative; width: 185px; }
/* one card until it tears: one shadow for the whole receipt, the halves overlap by a pixel so no seam shows; at the
   tear each half takes its own shadow (scene-crew.js) */
.cr-carta--out { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.07)); }
.cr-half + .cr-half { margin-left: -1px; }
.cr-carta--out .cr-carta__pay, .cr-carta--out .cr-carta__split {
  position: relative; box-sizing: border-box; height: 100%; padding: 12px 14px; background: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.cr-carta--out .cr-carta__pay { padding-right: 26.75px; border: 1px solid #E4E9E8; border-right: 0; border-radius: 16px 0 0 16px; }
.cr-carta--out .cr-carta__split { padding-left: 12.75px; border: 1px solid #E4E9E8; border-left: 0; border-radius: 0 16px 16px 0; align-items: flex-end; }
.cr-carta--out .cr-carta__perf { position: absolute; right: -0.75px; top: 50%; margin: -20px 0 0; }

/* the Pending moves card's twin: the same card at one unit = 1px (expenses_card_reel.dart: 336 x 163) */
.cr-pmout { z-index: 1; --p: 1px; position: absolute; left: 0; top: 0; width: 336px; height: 163px; transform-origin: 0 0; visibility: hidden; }
.cr-pmout .cr-card { height: 100%; }


/* ---------- twins: a piece of a screen, cloned by the script, drawn at one unit = 1px and scaled by the scene ---------- */
.cr-tw { --p: 1px; position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.cr-tw > * { position: relative !important; left: 0 !important; top: 0 !important; right: auto !important; margin: 0 !important; }
.cr-tw--lift { filter: drop-shadow(0 calc(14 * var(--p)) calc(22 * var(--p)) rgba(1, 14, 11, 0.16)); }

/* ---------- Home, the design of Crew 1.0.28 (home_page.dart:1105-1825; surfaces: components/rilievo.dart) ----------
   On white: the header, then one column 16 from the sides, 20 under it: the day in one sentence, Tasks, Expenses,
   Coming up. The Crew mark sits behind it, bottom right, turned 20 degrees at 12% */
.cr-home { background: #fff; }
.cr-mark { position: absolute; width: calc(335 * var(--p)); height: calc(335 * var(--p)); right: calc(-127 * var(--p)); bottom: calc(41 * var(--p)); transform: rotate(20deg); opacity: 0.12; }
/* the header: welcome 11.5 teal over the crew's name 24 and its chevron; the streak chip and the bell, 36 high, 8 apart */
.cr-hh { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(72 * var(--p)); height: calc(53 * var(--p)); display: flex; align-items: center; gap: calc(8 * var(--p)); }
.cr-hh__t { flex: 1; min-width: 0; }
.cr-hh__w { font-weight: 500; font-size: calc(11.5 * var(--p)); line-height: calc(17 * var(--p)); color: #12857B; white-space: nowrap; }
.cr-hh__n { display: flex; align-items: center; gap: calc(2 * var(--p)); height: calc(36 * var(--p)); }
.cr-hh__n > b { font-weight: 600; font-size: calc(24 * var(--p)); line-height: 1.5; color: #0E0D0D; white-space: nowrap; }
.cr-hh__dn { width: calc(20 * var(--p)); height: calc(20 * var(--p)); fill: #0E0D0D; flex: none; }
.cr-bell { flex: none; width: calc(36 * var(--p)); height: calc(36 * var(--p)); box-sizing: border-box; border-radius: 50%; background: #fff; border: 1px solid #E4E9E8; display: grid; place-items: center; }
.cr-bell img { width: calc(18 * var(--p)); height: calc(18 * var(--p)); }
/* the streak chip (streak_chip_view.dart): pill 36 high, 10 and 13 inside, white, 1px DCF1EC; the flame 15.8 x 20, two
   lobes with the code's own gradients (streak_flame_view.dart); 5, the count 16/700 */
.cr-chip { flex: none; box-sizing: border-box; height: calc(36 * var(--p)); padding: 0 calc(13 * var(--p)) 0 calc(10 * var(--p)); border-radius: calc(99 * var(--p)); background: #fff; border: 1px solid #DCF1EC; display: inline-flex; align-items: center; gap: calc(5 * var(--p)); }
.cr-flame { position: relative; display: block; width: calc(15.8 * var(--p)); height: calc(20 * var(--p)); transform-origin: 50% 100%; }
.cr-flame::before, .cr-flame > i { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 95%; border-radius: 52% 48% 42% 58% / 70% 72% 28% 30%; background: linear-gradient(to top, #1E8E82, #47C7BB); }
.cr-flame > i { left: 25%; width: 50%; height: 50%; background: linear-gradient(to top, #8FEADB, #EAFFF7); }
.cr-roll { position: relative; display: block; overflow: hidden; height: calc(24 * var(--p)); font-weight: 700; font-size: calc(16 * var(--p)); line-height: 1.5; color: #010E0B; font-variant-numeric: tabular-nums; }
.cr-roll b { display: block; font-weight: 700; }
.sc:not(.is-live) .cr-roll b:first-child { transform: translateY(-100%); }
.cr-roll b + b { position: absolute; left: 0; top: 0; }
/* the column */
.cr-hb { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(145 * var(--p)); }
/* the day in a sentence, 22/600 on 28, what you owe in red; the second line 13 grey, 4 under it, then 14 */
.cr-brief { font-variant-numeric: tabular-nums; font-weight: 600; font-size: calc(22 * var(--p)); line-height: calc(28 * var(--p)); color: #0E0D0D; letter-spacing: 0; }
.cr-brief em { font-style: normal; color: #F82626; }
.cr-brief .cr-dg, .cr-brief .cr-dg b { height: calc(28 * var(--p)); line-height: calc(28 * var(--p)); }
.cr-brief__sub { overflow: hidden; }
.cr-brief__sub p { padding-top: calc(4 * var(--p)); font-size: calc(13 * var(--p)); line-height: calc(19.5 * var(--p)); color: #666E6B; }
/* a section header: 44 high, the title 15/500; View all 12.5/500 teal with its chevron 16 */
.cr-hsec { margin-top: calc(14 * var(--p)); height: calc(44 * var(--p)); margin-bottom: calc(1 * var(--p)); display: flex; align-items: center; justify-content: space-between; }
.cr-hsec b { font-weight: 500; font-size: calc(15 * var(--p)); line-height: 1.5; color: #0E0D0D; }
.cr-hsec span { display: flex; align-items: center; padding-left: calc(12 * var(--p)); font-weight: 500; font-size: calc(12.5 * var(--p)); line-height: 1.5; color: #12857B; }
.cr-hsec svg { width: calc(16 * var(--p)); height: calc(16 * var(--p)); fill: currentColor; }
/* today's tasks as a strip: a piece each, 12 high, 4 apart; yours open: a teal edge; done: teal (--d) */
.cr-hstrip { margin: 0 calc(2 * var(--p)); display: flex; gap: calc(4 * var(--p)); }
.cr-hstrip i { flex: 1; height: calc(12 * var(--p)); box-sizing: border-box; border-radius: calc(6 * var(--p)); border: 1px solid var(--teal); }
.cr-hstrip__a { --d: 1; background: rgba(71, 199, 187, var(--d)); }
/* the counts under it, 11.5 grey: the pill of yours, what is left for you, and on the right what is done */
.cr-hb .cr-hcnt { margin-top: calc(8 * var(--p)); font-variant-numeric: tabular-nums; display: flex; align-items: center; font-size: calc(11.5 * var(--p)); line-height: calc(17 * var(--p)); color: #949494; white-space: nowrap; }
.cr-hcnt__pill { flex: none; width: calc(14 * var(--p)); height: calc(8 * var(--p)); margin-right: calc(6 * var(--p)); box-sizing: border-box; border: 1px solid var(--teal); border-radius: calc(4 * var(--p)); }
.cr-hcnt__l { flex: 1 1 0; }
.cr-hcnt .cr-dg, .cr-hcnt .cr-dg b { height: calc(17 * var(--p)); line-height: calc(17 * var(--p)); }
/* on the right the new figure sits on the right edge of the old one's room, so a narrower 1 leaves no gap before "of" */
.cr-hcnt__r .cr-dg b + b { left: auto; right: 0; }
/* the rows, 16 under the counts, two at most, 8 apart (the task row of Tasks, raised); Organize Fridge is done and
   leaves, Feed Pets comes up */
.cr-htk { position: relative; display: flow-root; margin-top: calc(16 * var(--p)); }
.cr-htk .cr-tk { margin-bottom: calc(8 * var(--p)); }
.cr-home[data-s="1"] .cr-tk--h1 { display: none; }
.cr-home[data-s="0"] .cr-tk--h3 { position: absolute; left: 0; right: 0; top: 100%; }
/* what the crew spent this month (raised, no padding): the label 11.5 with its chevron, the total 34/600, last month's
   line; the months as bars on the right, 52 high at most, past ones teal at 36%, this one solid */
.cr-spend { border-radius: calc(16 * var(--p)); background: #fff; border: 1px solid #E4E9E8; box-shadow: 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, 0.07); overflow: hidden; }
.cr-spend__top { display: flex; align-items: flex-end; justify-content: space-between; padding: calc(15 * var(--p)) calc(16 * var(--p)); }
.cr-spend__k { display: flex; align-items: center; font-size: calc(11.5 * var(--p)); line-height: calc(17 * var(--p)); color: #6A6A6A; white-space: nowrap; }
.cr-spend__k svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); fill: currentColor; flex: none; }
.cr-spend__k span { margin-left: calc(4 * var(--p)); color: #0E0D0D; font-variant-numeric: tabular-nums; }
.cr-spend .cr-spend__n { margin: calc(2 * var(--p)) 0 calc(4 * var(--p)); font-weight: 600; font-size: calc(34 * var(--p)); line-height: 1.2; color: #0E0D0D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-mbars { display: flex; align-items: flex-end; }
.cr-mbars span { width: calc(26 * var(--p)); display: flex; flex-direction: column; align-items: center; font-size: calc(9.5 * var(--p)); line-height: calc(14 * var(--p)); color: #949494; }
.cr-mbars i { width: calc(18 * var(--p)); height: calc(var(--h) * var(--p)); margin-bottom: calc(5 * var(--p)); border-radius: calc(5 * var(--p)); background: rgba(71, 199, 187, 0.36); }
.cr-mbars .cr-mb--now { font-weight: 500; color: #0E0D0D; }
.cr-mb--now i { background: var(--teal); }
/* the two halves under a rule: what you are owed, what you owe; the label 11.5 with its chevron, the wallet 17, the figure 17/500 */
.cr-spend__half { display: flex; border-top: 1px solid #E4E9E8; }
.cr-spend__half > div { flex: 1; min-width: 0; padding: calc(11 * var(--p)) calc(10 * var(--p)) calc(12 * var(--p)) calc(14 * var(--p)); }
.cr-spend__half > div + div { border-left: 1px solid #E4E9E8; }
.cr-spend .cr-spend__a { margin-top: calc(4 * var(--p)); display: flex; align-items: center; gap: calc(7 * var(--p)); font-weight: 500; font-size: calc(17 * var(--p)); line-height: 1.5; color: #0E0D0D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-spend__a img { width: calc(17 * var(--p)); height: calc(17 * var(--p)); flex: none; }
/* Coming up: 22 above, the title 12 grey; a row 60 high at least, the date on a 42 tile, the title 13, the bell on a 30 circle */
.cr-hb .cr-cu__k { margin: calc(22 * var(--p)) 0 calc(8 * var(--p)); font-size: calc(12 * var(--p)); line-height: 1.5; color: #666E6B; }
.cr-cu { box-sizing: border-box; min-height: calc(60 * var(--p)); padding: calc(9 * var(--p)); margin-bottom: calc(8 * var(--p)); display: flex; align-items: center; gap: calc(12 * var(--p)); border-radius: calc(16 * var(--p)); background: #fff; border: 1px solid #E4E9E8; box-shadow: 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, 0.07); }
.cr-cu__d { flex: none; width: calc(42 * var(--p)); height: calc(42 * var(--p)); border-radius: calc(12 * var(--p)); background: #F3F5F5; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10 * var(--p)); line-height: 1.2; color: #949494; }
.cr-cu__d b { font-weight: 600; font-size: calc(15 * var(--p)); line-height: 1.2; color: #0E0D0D; }
.cr-cu__t { flex: 1; min-width: 0; display: grid; font-size: calc(11 * var(--p)); line-height: 1.5; color: #949494; white-space: nowrap; }
.cr-cu__t b { font-weight: 500; font-size: calc(13 * var(--p)); color: #0E0D0D; }
.cr-cu__r { flex: none; width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: 50%; background: #EAF8F6; display: grid; place-items: center; }
.cr-cu__r img { width: calc(15 * var(--p)); height: calc(15 * var(--p)); }

/* ---------- Tasks, the design of Crew 1.0.27 (task_page.dart, task_calendar_header.dart, task_list_tabs.dart,
   task_list_row.dart; surfaces: components/rilievo.dart, edge E4E9E8, radius 16) ---------- */
/* Day / Week / Month: a control surface (edge, shadow 5% blur 4 down 1), 3 of padding, segments 33 high, 2 apart */
.cr-seg { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(121 * var(--p)); box-sizing: border-box; padding: calc(3 * var(--p)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--p)); border-radius: calc(24 * var(--p)); background: #fff; border: 1px solid #E4E9E8; box-shadow: 0 calc(1 * var(--p)) calc(4 * var(--p)) rgba(0, 0, 0, 0.05); }
.cr-seg span { height: calc(33 * var(--p)); display: grid; place-items: center; border-radius: calc(24 * var(--p)); font-weight: 500; font-size: calc(13 * var(--p)); line-height: 1; color: var(--c-grey); }
.cr-seg .is-on { color: #fff; background: var(--teal) var(--btn) center / cover; }
/* the month to drag: 40 high, the month 22 semibold, its neighbours 15 at 36% of the width either side */
.cr-mon { position: absolute; left: 0; right: 0; top: calc(168 * var(--p)); height: calc(40 * var(--p)); }
.cr-mon > * { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.cr-mon b { left: 50%; font-weight: 600; font-size: calc(22 * var(--p)); line-height: 1.45; color: #000; }
.cr-mon span { left: 14%; font-size: calc(15 * var(--p)); line-height: 1.45; color: #949494; }
.cr-mon span:last-child { left: 86%; }
/* the week strip, a pager: 66 high, 12 from the sides, cells 2 apart with radius 8; weekday 12 at 11 from the top, the
   day 16 at 30; a bar 11 x 2.5, 5 from the bottom, under a day that has tasks. The chosen day sits on teal at 30%;
   a day before today is grey, the figure of today is teal and semibold */
.cr-strip { position: absolute; left: calc(12 * var(--p)); right: calc(12 * var(--p)); top: calc(212 * var(--p)); height: calc(66 * var(--p)); overflow: hidden; }
.cr-weeks { display: flex; width: 200%; }
.cr-week { width: 50%; box-sizing: border-box; padding: 0 calc(4 * var(--p)); display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(2 * var(--p)); }
.cr-dayc { position: relative; height: calc(66 * var(--p)); border-radius: calc(8 * var(--p)); color: #242424; }
.cr-dayc em, .cr-dayc b { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-weight: 400; }
.cr-dayc em { top: calc(11 * var(--p)); font-size: calc(12 * var(--p)); line-height: calc(17.4 * var(--p)); }
.cr-dayc b { top: calc(30 * var(--p)); font-size: calc(16 * var(--p)); line-height: calc(23.2 * var(--p)); }
.cr-dayc.is-past { color: #B4B8B8; }
.cr-dayc[data-sel="1"] { background: rgba(71, 199, 187, 0.3); color: #242424; }
.cr-dayc.is-today b { color: var(--teal); font-weight: 600; }
.cr-dayc.is-dot::after { content: ""; position: absolute; left: 50%; bottom: calc(5 * var(--p)); width: calc(11 * var(--p)); height: calc(2.5 * var(--p)); margin-left: calc(-5.5 * var(--p)); border-radius: calc(2 * var(--p)); background: var(--teal); }
/* the handle that pulls the month down: 36 x 4 in a band 22 high under the strip */
.cr-hand { position: absolute; left: 50%; top: calc(287 * var(--p)); width: calc(36 * var(--p)); height: calc(4 * var(--p)); margin-left: calc(-18 * var(--p)); border-radius: calc(2 * var(--p)); background: rgba(148, 163, 184, 0.45); }
/* the tabs: 50 high, 18 from the left, each 9 around its words and 6 apart; a label 14 (light, medium when chosen),
   its count 11, 4 after it; the filter is a 28 tile, radius 10 */
.cr-filt { position: absolute; left: 0; right: 0; top: calc(308 * var(--p)); height: calc(50 * var(--p)); box-sizing: border-box; padding-left: calc(18 * var(--p)); display: flex; align-items: center; gap: calc(6 * var(--p)); }
.cr-filt span { padding: 0 calc(9 * var(--p)); font-weight: 300; font-size: calc(14 * var(--p)); line-height: 1.5; color: var(--c-grey); white-space: nowrap; }
.cr-filt span i { margin-left: calc(4 * var(--p)); font-style: normal; font-weight: 400; font-size: calc(11 * var(--p)); font-variant-numeric: tabular-nums; }
.cr-filt .is-on { font-weight: 500; color: var(--teal); }
.cr-filt__f { position: absolute; right: calc(16 * var(--p)); top: 50%; width: calc(28 * var(--p)); height: calc(28 * var(--p)); margin-top: calc(-14 * var(--p)); border-radius: calc(10 * var(--p)); background: #F5F5F5; display: grid; place-items: center; }
.cr-filt__f img { width: calc(16 * var(--p)); height: calc(16 * var(--p)); }
/* a task (task_list_row.dart): a raised surface (edge, shadow 7% blur 10 down 2), the 4-wide category bar 8 from the
   left and 56% of the row high, the category 11 in its own colour over the title 16, the ring 12 from the right.
   --d is how far the task is done: the ring fills and takes its tick, the title is struck through and goes grey, the
   surface settles (F3F5F5, no edge, no shadow) */
.cr-tlist { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(375 * var(--p)); }
.cr-tk { --d: 0; position: relative; box-sizing: border-box; padding: calc(25 * var(--p)) calc(50 * var(--p)) calc(17 * var(--p)) calc(20 * var(--p)); margin-bottom: calc(12 * var(--p)); border-radius: calc(16 * var(--p)); border: 1px solid; border-color: color-mix(in srgb, transparent calc(var(--d) * 100%), #E4E9E8); background: color-mix(in srgb, #F3F5F5 calc(var(--d) * 100%), #fff); box-shadow: 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, calc(0.07 - 0.07 * var(--d))); }
.cr-tk__bar { position: absolute; left: calc(8 * var(--p)); top: 22%; bottom: 22%; width: calc(4 * var(--p)); border-radius: calc(3 * var(--p)); background: var(--bar); }
.cr-tk em { display: block; margin-bottom: calc(1 * var(--p)); font-style: normal; font-weight: 500; font-size: calc(11 * var(--p)); line-height: calc(13.2 * var(--p)); color: var(--lab); white-space: nowrap; }
.cr-tk b { display: block; font-weight: 400; font-size: calc(16 * var(--p)); line-height: calc(24.8 * var(--p)); color: color-mix(in srgb, #949494 calc(var(--d) * 100%), #0E0D0D); white-space: nowrap; }
.cr-tk b span, .cr-sh__t b span { background: linear-gradient(currentColor, currentColor) no-repeat 0 54% / calc(var(--d) * 100%) calc(1 * var(--p)); }
.cr-tk .cr-ck2 { position: absolute; right: calc(12 * var(--p)); top: 50%; margin-top: calc(-13 * var(--p)); }
/* the check (task_check_button.dart): a 26 ring, edge 1.5 teal; done, it fills teal, shows its tick and sits at 1.06 */
.cr-ck2 { --ck: 26; flex: none; box-sizing: border-box; width: calc(var(--ck) * var(--p)); height: calc(var(--ck) * var(--p)); border-radius: 50%; border: calc(1.5 * var(--p)) solid var(--teal); background: rgba(71, 199, 187, var(--d)); display: grid; place-items: center; scale: calc(1 + 0.06 * var(--d)); }
.cr-ck2 svg { width: 70%; height: 70%; fill: #fff; opacity: var(--d); }
/* the bar that says a task is checked off (task_undo_toast.dart): 0E0D0D, radius 14, 43 high, the words 13, Undo teal */
.cr-toast { position: absolute; box-sizing: border-box; min-height: calc(43 * var(--p)); padding: 0 calc(4 * var(--p)) 0 calc(16 * var(--p)); display: flex; align-items: center; justify-content: space-between; border-radius: calc(14 * var(--p)); background: #0E0D0D; font-size: calc(13 * var(--p)); line-height: calc(19 * var(--p)); color: #fff; white-space: nowrap; visibility: hidden; }
.cr-toast b { padding: 0 calc(12 * var(--p)); font-weight: 600; color: var(--teal); }
/* over the veil a lifted piece draws on a phone: the bar is the app speaking, it stays readable */
.cr-tasks .cr-toast { left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(716 * var(--p)); z-index: 6; }

/* the preview sheet of a task outside the phone (task_preview_sheet.dart, task_preview_parts.dart), a card there: the
   faces 44 with a ring of 3, 34 apart, half over its top edge; the handle at 28, who it is for at 42 (12); the title
   20 semibold with the 32 ring; the day and the category chip (24 high, the colour at 17%) 13; who added it 11; the
   bin (46, red at 10%) and Edit (46 high, F5F5F5, 14 semibold). --d is how far the task is done. A pager of two:
   this week and the next; the clip stays while they turn, and leaves room for their shadow */
.cr-shw { --p: 1px; width: 370px; clip-path: inset(-4px -18px -30px -18px); }
.cr-pgr { display: flex; width: calc(200% + 36px); gap: 36px; padding-top: 25px; }
.cr-sh { --d: 0; --teal: #47C7BB; position: relative; flex: 1; min-width: 0; box-sizing: border-box; padding: 0 20px 20px; border-radius: 24px; background: #fff; border: 1px solid #E4E9E8; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); font-family: "Poppins", var(--display); color: #0E0D0D; -webkit-font-smoothing: antialiased; }
.cr-sh__faces { position: absolute; left: 50%; top: -25px; transform: translateX(-50%); display: flex; }
.cr-sh__faces i { box-sizing: content-box; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: var(--av); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 17px; line-height: 1; }
.cr-sh__faces i + i { margin-left: -16px; }
.cr-sh__hand { position: absolute; left: 50%; top: 28px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(148, 163, 184, 0.4); }
.cr-sh__cap { padding-top: 42px; height: 18px; text-align: center; font-size: 12px; line-height: 18px; color: #949494; }
.cr-sh__t { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 14px; }
.cr-sh__t b { margin-top: 2px; font-weight: 600; font-size: 20px; line-height: 26px; color: color-mix(in srgb, #949494 calc(var(--d) * 100%), #000); }
.cr-sh__t .cr-ck2 { --ck: 32; }
.cr-sh__meta { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px !important; font-size: 13px; line-height: 19.5px; color: #949494; white-space: nowrap; }
.cr-sh__meta > span { display: flex; align-items: center; gap: 5px; }
.cr-sh__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cr-sh__meta .cr-sh__cat { height: 24px; padding: 0 11px 0 9px; border-radius: 99px; background: color-mix(in srgb, #2FA462 17%, transparent); font-weight: 500; font-size: 12px; line-height: 18px; color: #0E0D0D; }
.cr-sh__cat i { width: 9px; height: 9px; border-radius: 50%; background: #2FA462; }
.cr-sh__by { opacity: var(--d); }
.cr-sh__add { margin-top: 14px !important; font-size: 11px; line-height: 16.5px; color: #949494; }
.cr-sh__foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.cr-sh__bin { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(248, 38, 38, 0.1); display: grid; place-items: center; }
.cr-sh__bin svg { width: 20px; height: 20px; fill: none; stroke: #F82626; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cr-sh__edit { flex: 1; height: 46px; border-radius: 24px; background: #F5F5F5; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 21px; }
.cr-sh__edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Notes (notes_page.dart, note_widget.dart) ---------- */
.cr-search { position: absolute; left: calc(16 * var(--p)); right: calc(16 * var(--p)); top: calc(133 * var(--p)); display: flex; align-items: center; gap: calc(12 * var(--p)); }
.cr-search span { flex: 1; height: calc(48 * var(--p)); border-radius: calc(24 * var(--p)); background: #F2F2F2; display: flex; align-items: center; font-size: calc(14 * var(--p)); color: var(--c-grey); }
.cr-search span img { width: calc(20 * var(--p)); height: calc(20 * var(--p)); margin: 0 calc(12 * var(--p)); }
.cr-search i { flex: none; width: calc(46 * var(--p)); height: calc(46 * var(--p)); border-radius: 50%; background: #F2F2F2; display: grid; place-items: center; }
.cr-search i img { width: calc(24 * var(--p)); height: calc(24 * var(--p)); }
.cr-tabs--2 { top: calc(205 * var(--p)); grid-template-columns: repeat(2, 1fr); }
/* a note: 231 x 315, radius 12, padding 16 x 8, shadow AAAAAA at 50% blur 4; the one in the middle sits 33 higher,
   with the heart on its corner (a 243 x 327 stack) and the grey ellipse 35 under it */
.cr-nt { position: absolute; box-sizing: border-box; width: calc(231 * var(--p)); height: calc(315 * var(--p)); padding: calc(8 * var(--p)) calc(16 * var(--p)); border-radius: calc(12 * var(--p)); box-shadow: 0 0 calc(4 * var(--p)) rgba(170, 170, 170, 0.5); color: var(--c-ink); }
.cr-nt > b { display: block; font-weight: 400; font-size: calc(16 * var(--p)); line-height: 1.5; }
.cr-nt ul { margin: calc(10 * var(--p)) 0 0; padding: 0; list-style: none; font-size: calc(12 * var(--p)); line-height: 1.5; }
.cr-nt--l { left: calc(-171.5 * var(--p)); top: calc(385 * var(--p)); background: #F0ECFA; }
.cr-nt--r { left: calc(342.5 * var(--p)); top: calc(385 * var(--p)); background: #ADD4C5; white-space: nowrap; }
.cr-nt--r li { padding: calc(2 * var(--p)) 0; }
.cr-nt--r li::before { content: "\2022"; margin: 0 calc(8 * var(--p)) 0 calc(4 * var(--p)); }
.cr-note { position: absolute; left: calc(85.5 * var(--p)); top: calc(340 * var(--p)); width: calc(243 * var(--p)); height: calc(327 * var(--p)); }
.cr-nt--c { left: 0; top: calc(12 * var(--p)); background: #FFD9BB; }
.cr-todo li { --k: 0; display: flex; align-items: center; padding: calc(2 * var(--p)) calc(4 * var(--p)); }
.cr-todo li:nth-child(-n+4) { --k: 1; }
.cr-ck { position: relative; flex: none; width: calc(20 * var(--p)); height: calc(20 * var(--p)); margin-right: calc(10 * var(--p)); }
.cr-ck img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(1 - var(--k)); }
.cr-ck img + img { opacity: var(--k); }
.cr-todo span { background: linear-gradient(currentColor, currentColor) no-repeat 0 54% / calc(var(--k) * 100%) calc(1 * var(--p)); }
.cr-nt__by { position: absolute; left: calc(16 * var(--p)); bottom: calc(12 * var(--p)); display: flex; align-items: center; gap: calc(6 * var(--p)); }
.cr-nt__by i { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; background: var(--av); box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.12); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: calc(10 * var(--p)); line-height: 1; }
.cr-nt__by span { display: grid; gap: calc(1 * var(--p)); }
.cr-nt__by b { font-weight: 500; font-size: calc(12 * var(--p)); line-height: 1.5; }
.cr-nt__by small { font-size: calc(8 * var(--p)); line-height: 1.5; }
.cr-heart { position: absolute; right: 0; top: 0; width: calc(44 * var(--p)); height: calc(44 * var(--p)); border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 calc(4 * var(--p)) rgba(0, 0, 0, 0.16); display: grid; place-items: center; }
.cr-heart img { width: calc(20 * var(--p)); height: calc(20 * var(--p)); }
.cr-nell { position: absolute; left: calc(85.5 * var(--p)); top: calc(702 * var(--p)); width: calc(231 * var(--p)); height: calc(21 * var(--p)); }
.cr-dots { position: absolute; left: 0; right: 0; top: calc(739 * var(--p)); display: flex; justify-content: center; gap: calc(4 * var(--p)); }
.cr-dots i { width: calc(6 * var(--p)); height: calc(6 * var(--p)); border-radius: calc(4 * var(--p)); background: #A3E2DB; }
.cr-dots .is-on { width: calc(16 * var(--p)); background: var(--teal); }

/* ---------- live: the words sit at the top of their column, what they show comes in under them ---------- */
/* the words are never in the way of a click: on a desk they sit over the head's crumb before step 1 */
.sc[data-scene="crew"].is-live .sc-beats { pointer-events: none; }
.sc[data-scene="crew"] .sc-beat__s > span { text-wrap: balance; }
.sc[data-scene="crew"].is-live .sc-beat__s { max-width: 34ch; }
@media (min-width: 1000px) {
  .sc[data-scene="crew"].is-live .sc-beats { top: clamp(84px, 12.5vh, 128px); transform: translate(var(--sx, 0px), 0); }
  .sc[data-scene="crew"].is-live .sc-beat { transform: none; }
  /* two authored lines, the longest fourteen characters ("Nobody forgets") */
  .sc[data-scene="crew"].is-live .sc-beat__t { font-size: min(calc(var(--hw) / 8.2), 6rem); }
}

/* ---------- 740 to 999px, a tablet: the desk's composition, the head scrolled away above; the words and what they
   show in a column, the phone on the right ---------- */
@media (min-width: 740px) and (max-width: 999px) {
  .sc[data-scene="crew"] { --ph: min(calc(100svh - 170px), 640px); --cw: calc(100vw - 2 * var(--pad) - var(--ph) * 0.47 - 36px); }
  .sc[data-scene="crew"].is-live .sc-device { left: auto; right: var(--pad); top: calc(50% + 20px); bottom: auto; transform: translate(var(--sx, 0px), -50%); }
  .sc[data-scene="crew"].is-live .sc-beats { left: var(--pad); right: auto; width: var(--cw); transform: translateX(var(--sx, 0px)); }
  .sc[data-scene="crew"].is-live .sc-steps { left: var(--pad); transform: translateX(var(--sx, 0px)); }
  .sc[data-scene="crew"].is-live .sc-beat__t { font-size: min(3.4rem, calc(var(--cw) / 8.2)); }
}

/* ---------- below 740px, a phone: the phone is the stage, large; each piece lifts off its screen, over it ---------- */
@media (max-width: 739px) {
  .sc[data-scene="crew"] { --ph: min(calc(100svh - 246px), 640px, calc(74vw * 1341 / 620)); }
  .sc[data-scene="crew"].is-live .sc-device { left: 50%; transform: translateX(-50%); }
  .sc[data-scene="crew"].is-live .sc-beats, .sc[data-scene="crew"].is-live .sc-steps { left: var(--pad); }
  .sc[data-scene="crew"].is-live .cr-out { z-index: 3; }
  /* the form scrolls under its header there: it goes softly under it, not cut by a line no one can see (critic r4, 2) */
  .cr-new__body { clip-path: none; -webkit-mask-image: linear-gradient(to bottom, transparent calc(108 * var(--p)), #000 calc(126 * var(--p)), #000 calc(100% - 94 * var(--p)), transparent calc(100% - 94 * var(--p))); mask-image: linear-gradient(to bottom, transparent calc(108 * var(--p)), #000 calc(126 * var(--p)), #000 calc(100% - 94 * var(--p)), transparent calc(100% - 94 * var(--p))); }
}

/* the week strip outside the phone: the same strip on a piece of the screen's white */
.cr-tw > .cr-strip { background: #fff; border-radius: 10px; box-shadow: 0 0 0 8px #fff, 0 0 5px 8px rgba(0, 0, 0, 0.1); }

/* a figure that rolls (the count of today's tasks): the old one leaves upward, the new one rises in */
.cr-dg { position: relative; display: inline-block; overflow: hidden; vertical-align: top; height: 1.5em; }
.cr-dg b { display: block; font-weight: inherit; }
.cr-dg b + b { position: absolute; left: 0; top: 0; }
.sc:not(.is-live) .cr-dg b:first-child { transform: translateY(-100%); }
/* a phone: the screen steps back under a piece that has lifted off it, so nothing reads cut around the piece */
.cr-veil { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, 0.84); visibility: hidden; }
.sc[data-scene="crew"].is-live .sc-ln > span { white-space: nowrap; }