/* Daily Life Doc: the shell inside the phone frame (round 6). The colour wash at the top of every place, the
   one-line header (the round initial that opens Atlas, or a back arrow; the title; the place with the weather; Call),
   the plus button that floats alone at the bottom centre (round 7: no bottom bar), the open main page, pages opened
   over the main view (with a back button), the slot of the call bar, the "Being rebuilt" card and the Place sheet.
   Panel mode (the Chrome extension) keeps its bar: the rules of .tabs and .tab below are the panel's.
   Drawn by js/shell.js and js/core/router.js. The frame itself: css/frame.css. Create account and Sign in:
   css/account.css. Rules of the look: LOOK.md. */

/* ---------- Layers ---------- */
/* --cb is the height of the call bar; it is 0 until .phone carries data-call="on" (js/shell.js sets it while a call
   is on). Every layer starts under the status bar and the call bar. */
.phone { --cb: 0px; --top: calc(var(--sb) + var(--cb)); }
.phone[data-call="on"] { --cb: 44px; }
.screen { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; padding: calc(var(--top) + 14px) var(--gut) calc(var(--foot-h) + 40px); scrollbar-width: none; }
.screen::-webkit-scrollbar, .full::-webkit-scrollbar, .pg-body::-webkit-scrollbar { display: none; }
.full { position: absolute; inset: 0; z-index: 38; background: var(--bg); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: calc(var(--top) + 10px) 18px 40px; }
.full.bare { z-index: 39; padding-bottom: 60px; }

/* The wash: the place's soft colour at the top of the screen, fading into the paper. Its colour eases when the place
   changes. One for the main view (#wash) and one drawn by every opened page (.pg::before). */
.wash, .pg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 250px; z-index: 0; pointer-events: none; background-color: var(--pc-bg);
  -webkit-mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .55) 38%, transparent 100%); mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .55) 38%, transparent 100%);
  transition: background-color 420ms ease; }

/* The slot of the call bar (js/call/call-bar.js draws into #callbar; css/call.css styles what is inside). */
.callbar { position: absolute; top: var(--sb); left: 0; right: 0; z-index: 44; height: 44px; }

/* ---------- Header: one line. The round initial (or a back arrow), the title over the quiet second line, Call ---------- */
.top { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 10px; }
.top-title { position: relative; flex: 1; min-width: 0; }
/* The title and, on another day, the quiet link "Today" beside the date. The date gives way before the link does. */
.top-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.top-h h1 { min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The second line: the place and the weather, or what the open page set (DD.shell.setSub). */
.top-sub { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 18px; font-size: var(--t-xs); font-weight: 500; color: var(--ink2); line-height: 1.4; white-space: nowrap; }
.top-sub:empty { display: none; }
.top-sub button { font-weight: 600; color: var(--ink2); }
.top-sub .top-word { flex: none; }
.top-sub .top-sep { flex: none; margin: 0 2px; font-style: normal; color: var(--ink3); }
.avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 15px;
  background: var(--surface); color: var(--pc-d); box-shadow: inset 0 0 0 2px var(--pc); transition: transform var(--m-press) var(--ease-out), box-shadow 420ms ease, color 420ms ease; }
.avatar:active { transform: scale(0.94); }
.avatar::after { content: ''; position: absolute; left: -4px; top: 0; width: 44px; height: 44px; } /* a 44 px target around the 36 px circle */
.avatar svg { width: 20px; height: 20px; }
.avatar.care { background: var(--care); color: var(--care-d); box-shadow: none; }
.avatar.sm { width: 36px; height: 36px; font-size: var(--t-s); }
.avatar.lg { width: 44px; height: 44px; font-size: var(--t-l); }
/* The back arrow of the header: to Today on Atlas; to Profiles before the patient's initial for the care team. The
   arrow and the initial arrive softly when the main page changes (js/shell.js draws the header again). */
.top .top-back + .avatar { margin-left: -2px; }
.top .top-in { animation: top-in 300ms var(--ease-out) both; }
@keyframes top-in { from { opacity: 0; transform: scale(.86); } }
/* The place and the weather of the shown day: one quiet line that is a button. */
.hplace { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; height: 18px; font-size: var(--t-xs); font-weight: 500; color: var(--ink2);
  transition: opacity var(--m-press) ease; }
/* Room for the finger around the place line only (fixer FT, WALK-4 fault 11: a target as wide as the title's column
   covered the experiment's name, whose tap opens the Progress page). */
.hplace::after { content: ''; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }
.top-sub .top-go { cursor: pointer; }
.top-sub .top-go:active { opacity: .6; }
.hplace:active { opacity: .6; }
.hplace svg { width: 13px; height: 13px; flex: none; }
.hplace span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hplace .chev { margin: 0 .5em .05em .1em; }
/* The care team's header on a narrow phone holds the patient's name, "Today ·", the place and the weather: the
   place is left out there, so no name is cut to "Bris…" (the weather stays, and still opens the Place sheet). */
@media (max-width: 360px) { .top[data-side="care"] .hplace > svg, .top[data-side="care"] .hplace > span, .top[data-side="care"] .hplace > .chev { display: none; } }
.hplace .wx { width: 15px; height: 15px; flex: none; color: var(--ink); }
.hplace .wx svg { width: 15px; height: 15px; }
.hplace b { flex: none; font-weight: 600; color: var(--ink); }
.wx[data-kind="sun"], .wx[data-kind="partcloud"], .hplace .wx[data-kind="sun"], .hplace .wx[data-kind="partcloud"] { color: var(--try-d); }
/* The Call button: 40 px, white, at the right. Its small dot shows on the day of an agreed call. */
.top .icon-btn { width: 40px; height: 40px; }
.top .icon-btn svg { width: 20px; height: 20px; }
.top .icon-btn::after { content: ''; position: absolute; inset: -4px; } /* a 48 px target */
.top .icon-btn .dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--pc-d); box-shadow: 0 0 0 2px var(--bg); animation: dd-pop 300ms var(--ease-spring); }
/* A small red count (panel mode's old Library uses none; kept for the care team's Profiles rows). */
.count-red { position: absolute; top: -4px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  background: var(--red); color: #fff; font-size: var(--t-2xs); font-weight: 600; line-height: 1; pointer-events: none; animation: dd-pop 300ms var(--ease-spring); }
.count-red.in { position: static; }

/* ---------- The open main page (Today or Atlas) ---------- */
.page { position: relative; min-height: 40vh; }
.tabview { position: relative; }
/* The main page that is leaving, held in place for the cross-slide (js/core/router.js). */
.tab-ghost { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; }

/* ---------- The plus button alone: floating at the bottom centre of Today and Atlas, above the phone's safe-area
   inset. The layer takes no taps; only the button does. The paper fades out behind the button, so words never run
   into the button. A page opened over the main view (z-index 40) covers the layer. ---------- */
.fab { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--foot-h) + 40px); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none; background: linear-gradient(transparent, var(--bg) 66%); }
.fab[hidden] { display: none; }
.fab .plus { pointer-events: auto; align-self: flex-end; width: var(--plus); height: var(--plus); margin-top: 0; box-shadow: 0 12px 22px -10px var(--shadow), 0 2px 6px -2px var(--shadow); }
.fab .plus svg { width: 28px; height: 28px; }

/* ---------- Panel mode's bar: Today · the raised plus button · Library. Quiet; the open tab is brown ---------- */
.tabs { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 30; height: 56px; padding: 0 5px; display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; }
/* The white bar itself is drawn by ::after, so that it lies over the fade of ::before (both under the buttons). */
.tabs::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 20px; background: var(--surface); box-shadow: 0 10px 28px -16px var(--shadow), 0 0 0 1px var(--line); }
/* The paper fades out under the bar, so words never run into the bar or the plus button. */
.tabs::before { content: ''; position: absolute; left: -12px; right: -12px; bottom: -12px; top: -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--bg) 52%); border-radius: 0; }
.tab { position: relative; z-index: 1; min-width: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px;
  font-size: var(--t-2xs); font-weight: 500; color: var(--ink3); transition: color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.tab:active { transform: scale(0.94); }
.tab i { position: relative; width: 24px; height: 24px; transition: transform var(--m-tab) var(--ease-spring); }
.tab span { line-height: 1.2; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--nav); font-weight: 600; }
.tab[aria-current="page"] i { transform: translateY(-1px) scale(1.06); }
/* The part of an icon that fills softly when its tab is open. */
.tab svg .f { fill: transparent; transition: fill var(--m-tab) ease; }
.tab[aria-current="page"] svg .f { fill: color-mix(in srgb, var(--nav) 22%, transparent); }
/* The plus button's look (also onboarding's round button, css/onboard.css): brown, round. In the panel's bar: 66 px,
   a third above the bar's top edge, with a ring of paper that cuts the button out of the bar. */
.plus { position: relative; z-index: 2; justify-self: center; align-self: start; width: 66px; height: 66px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nav); color: var(--on-nav); box-shadow: 0 10px 18px -8px var(--shadow), 0 0 0 4px var(--bg);
  transition: transform 160ms var(--ease-out), opacity 200ms ease; }
.plus:active { transform: scale(0.93); }
.plus svg { width: 30px; height: 30px; stroke-width: 2.3; transition: transform var(--m-add) var(--ease-spring); }
.phone:has(.sheet.on) .plus svg { transform: rotate(45deg); }

/* ---------- A page opened over the main view: a head (back, title, one optional control) and a scrolling body ---------- */
.pg { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); padding-top: var(--top);
  transform: translateX(100%); transition: transform var(--m-push) var(--ease-drawer); box-shadow: -18px 0 40px -30px var(--shadow); }
.pg.on { transform: none; }
.pg.out { transition-duration: var(--m-pop); }
.pg-head { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 10px; padding: 10px var(--gut) 10px; }
.pg-head h2 { flex: 1; min-width: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-act { flex: none; display: flex; align-items: center; gap: 8px; }
.pg-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px var(--gut) 96px; scrollbar-width: none; }
/* The main view steps back a little while a page lies over it. */
.screen, .tabs, .fab { transition: transform var(--m-push) var(--ease-drawer), opacity var(--m-push) ease; }
.phone[data-depth]:not([data-depth="0"]) > .screen { transform: translateX(-8%); opacity: .6; }

/* ---------- "Being rebuilt": a page whose draw threw ---------- */
.stub { padding: 22px 18px; border-radius: 22px; background: var(--surface); color: var(--ink2); font-size: var(--t-m); }
.stub b { display: block; color: var(--ink); font-size: var(--t-l); font-weight: 600; margin-bottom: 4px; }

/* ---------- The Place sheet: the place's name (the weather is real: nothing to pick) ---------- */