/* Dorax Finance — the bell's panel on a phone in the summary's look (v316; the markup: features/phone/bell-land.js). On the forest the two parts and
   what is due in the next seven days; in the sheet each part with its title and no card round it, each reminder a row with its icon (v317: no circle beside it);
   a tap on the row shows what can be done as pills under it, the main one lime; For you one list with the quiet × on each
   notice; the buttons at the foot as a goal's panel has them (look-land-goal-view.css: .gv-foot). */
@media (max-width: 920px) {
  /* ---------- on the forest ---------- */
  :root.land #overlay .bn-land { display: flex; flex-direction: column; gap: 16px; }
  :root.land #overlay .bn-land > .bell-tabs { margin: 0; }
  :root.land #overlay .bn-land > .bell-tabs .seg { width: 100%; }
  :root.land #overlay .bn-land > .bell-tabs .seg button { flex: 1 1 0; min-height: 44px; font-size: 15px; }
  :root.land #overlay .bn-fig { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
  :root.land #overlay .bn-fig small { color: var(--lk-soft); font-size: 14px; }
  :root.land #overlay .bn-fig > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  :root.land #overlay .bn-fig b { color: #FFFFFF; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
  :root.land #overlay .bn-fig > span > span { color: var(--lk-soft); font-size: 15px; }
  :root.land #overlay .bn-none { margin: 2px 0 0; color: var(--lk-soft); font-size: 15px; }

  /* ---------- in the sheet: the parts, with no card round them ---------- */
  :root.land #overlay .bn-land .bq-sheet { gap: 26px; padding-bottom: 28px; }
  :root.land #overlay .bq-sheet .rem-group.bn-sec { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  :root.land #overlay .bn-sec .gq-h { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
  :root.land #overlay .bn-sec h3 { margin: 0; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
  :root.land #overlay .bn-sec .gq-h small { color: var(--bq-ink-2); font-size: 13px; }
  :root.land #overlay .bn-land > .bq-sheet > .empty.bn-empty { padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }

  /* ---------- a reminder: a row; the circle; the rest under it as pills ---------- */
  :root.land #overlay .bn-row { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :root.land #overlay .bn-row + .bn-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bq-line); }
  :root.land #overlay .bn-line { display: flex; align-items: center; gap: 8px; }
  :root.land #overlay :is(.bn-main, .bn-go) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; }
  :root.land #overlay .bn-go { width: 100%; }
  :root.land #overlay :is(.bn-main, .bn-go):active { opacity: .7; }
  :root.land #overlay :is(.bn-main, .bn-go, .bn-pill, .bn-clear):focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land #overlay .bn-ic { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; align-self: flex-start; margin-top: 2px; }
  :root.land #overlay .bn-row .bn-ic { align-self: center; margin-top: 0; }
  :root.land #overlay .bn-ic .dxi, :root.land #overlay .bn-ic > .cg.dx .dxi { width: 40px; height: 40px; }
  :root.land #overlay .bn-ic > .cg { width: 40px; height: 40px; }
  :root.land #overlay .bn-ic > .cg.dx { background: none; }
  :root.land #overlay .bn-ic > .cg:not(.dx):not(.pic) svg { width: 20px; height: 20px; }
  :root.land #overlay .bn-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land #overlay .bn-glyph svg { width: 18px; height: 18px; }
  :root.land #overlay .bn-glyph:has(> svg.ti-art) { background: none; }      /* v320: the look's drawing brings its own circle */
  :root.land #overlay .bn-glyph > svg.ti-art { width: 40px; height: 40px; }
  :root.land #overlay .bn-mark .inst { width: 40px; height: 40px; border-radius: 50%; }
  :root.land #overlay .bn-mark .inst img { display: block; width: 40px; height: 40px; border-radius: 50%; }
  :root.land #overlay .bn-row .rem-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.land #overlay .bn-row .rem-t b { color: var(--bq-ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
  :root.land #overlay .bn-row .rem-t .note { margin: 0; color: var(--bq-ink-2); font-size: 12.5px; line-height: 1.4; }
  :root.land #overlay .bn-row .rem-t .atag { vertical-align: -3px; }
  :root.land #overlay .bn-amt { flex: none; align-self: center; color: var(--bq-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  :root.land #overlay .bn-amt.neg { color: var(--bq-crit); }
  :root.land #overlay .bn-go .gq-go { flex: none; display: grid; color: var(--bq-ink-3); }
  :root.land #overlay .bn-go .gq-go svg { width: 16px; height: 16px; }
  /* v319: the menu is always there, folded: a tap slides it open (its height from nothing, the buttons coming down into place) and folds it again */
  :root.land #overlay .bn-drop { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 340ms cubic-bezier(.32, .72, 0, 1), opacity 220ms ease; }
  :root.land #overlay .bn-row.open > .bn-drop { grid-template-rows: 1fr; opacity: 1; }
  :root.land #overlay .bn-acts { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px; padding-left: 52px; }
  :root.land #overlay .bn-acts .bn-pill { flex: 1 1 auto; justify-content: center; margin-bottom: 14px; transform: translateY(-8px); transition: transform 340ms cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
  :root.land #overlay .bn-acts .bn-pill + .bn-pill { transition-delay: 40ms; }
  :root.land #overlay .bn-row.open .bn-acts .bn-pill { transform: none; }
  :root.land #overlay .bn-pill > span { white-space: normal; text-align: center; line-height: 1.25; }
  :root.land #overlay .bn-row .bn-main { transition: opacity .15s ease; }
  @media (prefers-reduced-motion: reduce) { :root.land #overlay :is(.bn-drop, .bn-acts .bn-pill) { transition: none; } }
  :root.land #overlay .bn-pill { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); font-size: 14px; font-weight: 600; }
  :root.land #overlay .bn-pill:active { opacity: .7; }
  :root.land #overlay .bn-pill.main { gap: 6px; background: var(--bq-accent); box-shadow: none; color: var(--bq-page); }      /* v317: what the circle did, first in the row's menu */
  :root.land.land-dark #overlay .bn-pill.main { background: var(--lk-lime); color: var(--lk-deep); }
  :root.land #overlay .bn-pill.main svg { width: 16px; height: 16px; stroke-width: 2.6; }
  /* what to set up is quiet; the other side's reminders a row like any other */
  :root.land #overlay .bn-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: -10px; color: var(--bq-ink-3); font-size: 13.5px; }
  :root.land #overlay .bn-land .bp-link { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--bq-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
  :root.land #overlay .bn-land .bp-link svg { width: 15px; height: 15px; }
  :root.land #overlay .bn-land .bp-link:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 10px; }
  /* what Dorax will remind next */
  :root.land #overlay .bn-nx { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; }
  :root.land #overlay .bn-nx + .bn-nx::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--bq-line); }
  :root.land #overlay .bn-nd { flex: none; width: 52px; color: var(--bq-ink-3); font-size: 13px; font-weight: 600; }
  :root.land #overlay .bn-nx .rem-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  :root.land #overlay .bn-nx .rem-t b { color: var(--bq-ink); font-size: 14.5px; font-weight: 600; }
  :root.land #overlay .bn-nx .rem-t .note { margin: 0; color: var(--bq-ink-2); font-size: 12.5px; }
  :root.land #overlay .bn-nx > .num { flex: none; color: var(--bq-ink); font-size: 14.5px; font-weight: 600; }
  :root.land #overlay .bn-next .bn-cal { margin-left: 64px; }

  /* ---------- For you ---------- */
  :root.land #overlay .bn-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  :root.land #overlay .bn-clear { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; color: var(--bq-ink-2); font-size: 14px; font-weight: 600; }
  :root.land #overlay .bn-clear svg { width: 16px; height: 16px; }
  :root.land #overlay .bq-sheet .bn-nt { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  :root.land #overlay .bq-sheet .bn-nt + .bn-nt::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bq-line); }
  :root.land #overlay .bn-ic.dx { background: none; }
  :root.land #overlay .bn-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--bq-accent); box-shadow: 0 0 0 2.5px var(--bq-page); }
  :root.land #overlay .bn-nt-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .bn-kind { color: var(--bq-ink-3); font-size: 12.5px; }
  :root.land #overlay .bn-nt-b > b { color: var(--bq-ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
  :root.land #overlay .bn-nt-b > p { margin: 0; color: var(--bq-ink-2); font-size: 14px; line-height: 1.45; }
  :root.land #overlay .bn-nt-b > .bp-link { margin-bottom: -10px; }
  :root.land #overlay .bn-nt .nt-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px 0 0; border-radius: 50%; color: var(--bq-ink-3); }
  :root.land #overlay .bn-nt .nt-x svg { width: 16px; height: 16px; }
  :root.land #overlay .bn-nt .nt-x:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: -2px; }

  /* ---------- the foot: two quiet buttons with their icons ---------- */
  :root.land #overlay .bn-foot .btn { gap: 8px; text-decoration: none; }
  :root.land #overlay .bn-foot .btn svg { width: 17px; height: 17px; }
}