/* Daily Life Doc: the phone frame (SPEC-R3 rule 1).
   On a window wider than a phone the app sits in a FIXED 390 × 844 phone in the middle of the window, with a status
   bar drawn at its top. On a real phone (480 px or narrower) there is no frame: the app fills the screen.
   THE FRAME IS THE CONTAINING BLOCK: `.phone` has `contain: layout`, so `position: fixed` inside it is placed
   against the frame, exactly like `position: absolute` on a direct child. Nothing inside can leave the frame, and
   `overflow: clip` cuts whatever tries. Nothing is drawn outside it. */
html, body { margin: 0; height: 100%; overflow: hidden; }
body { height: 100dvh; display: grid; place-items: center; background: var(--page-bg); color: var(--ink); font-family: var(--font);
  font-size: var(--t-m); line-height: 1.4; -webkit-font-smoothing: antialiased; transition: background-color 300ms ease; }

.phone { --sb: 44px; position: relative; width: 390px; height: min(844px, calc(100dvh - 24px)); border-radius: 46px; overflow: clip; background: var(--bg);
  box-shadow: 0 0 0 10px var(--frame), 0 30px 60px -20px var(--shadow); isolation: isolate; contain: layout; }

/* The status bar inside the frame: the time and three small shapes. A look only; taps pass through it. Words
   scrolled up the screen never show under the clock: the scrolling layers fade out under it (the last rule of the
   wide-window block below), which keeps the place's colour wash whole where a flat backing would cut a band in it. */
.sbar { position: absolute; top: 0; left: 0; right: 0; z-index: 90; height: 44px; padding: 6px 30px 0 34px; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-s); font-weight: 600; color: var(--ink); pointer-events: none; }
.sbar i { display: flex; align-items: center; gap: 5px; }
.sbar i::before { content: ''; width: 0; height: 0; border-left: 14px solid transparent; border-bottom: 10px solid currentColor; opacity: .8; }
.sbar i b, .sbar i::after { content: ''; width: 18px; height: 10px; border-radius: 3px; background: currentColor; opacity: .8; }
.sbar i::after { width: 24px; }

/* ---------- Shell layers the frame places (their look is in css/ui.css and css/lines.css) ----------
   js/shell.js says on .phone what stands at the foot: data-foot="plus" (the floating plus button, on Today and
   Atlas), "bar" (panel mode's bar) or "". The toast sits above either. */
.phone[data-foot="plus"] > .toast { bottom: calc(var(--foot-h) + 12px); }
.phone[data-foot="bar"] > .toast { bottom: calc(var(--foot-h) + 22px); }
.phone > .toast { right: 16px; }

/* Inside the frame on a wide window there is no phone keyboard: the bar that floats while a line is edited sits at
   the foot of the frame, above the plus button when it shows (js/ui/lines-bar.js places it by the window otherwise). */
@media (min-width: 481px) {
  .phone .lbar { left: 50% !important; top: auto !important; bottom: 18px; }
  .phone[data-foot="plus"] .lbar, .phone[data-foot="bar"] .lbar { bottom: calc(var(--foot-h) + 12px); }
  /* Onboarding has its main button at the foot of the frame: the bar sits above that button, never over it. */
  .phone:has(#bare:not([hidden])) .lbar { bottom: 88px; }
  /* With the round plus button above that button (onboarding's second step) the bar sits above the round button. */
  .phone:has(#bare:not([hidden]) .oa-fab) .lbar { bottom: 162px; }
  .phone .screen, .phone .full { -webkit-mask-image: linear-gradient(transparent calc(var(--sb) - 12px), #000 var(--sb)); mask-image: linear-gradient(transparent calc(var(--sb) - 12px), #000 var(--sb)); }
}

/* ---------- A real phone: no frame, the app fills the screen ---------- */
@media (max-width: 480px) {
  body { display: block; background: var(--bg); }
  .phone { --sb: 0px; width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; }
  .sbar { display: none; }
}

/* A narrow phone (under 350 px): the header's date and a page's title stay whole, and the Library's legend
   may take two lines. (A card's Number or Time row needs no rule any more: its value is words at the right.) */
@media (max-width: 350px) {
  .phone .top-h h1 { font-size: 16px; letter-spacing: -0.02em; }
  .phead h2 { font-size: 19px; }
  .lc-legend { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
}