/* Телефон, огляд (docs/15-design.md, «Телефон»): план на весь екран,
   згори плаваючі ☰ і картка заходу, знизу аркуш заявок із зачіпкою, над
   ним праворуч — синя «Neue Meldung». Лише огляд без смуги стану
   (.split.overview, .bar.floaty); решта екранів телефона як були. */
.split > .grab, .sidecol > .grab-band { display: none; }

@media (max-width: 760px) {
  /* Розгортання аркуша — рівномірно: плавний розгін, рівна середина, плавне
     гальмування (половина шляху — за половину часу). Крива з різким
     стартом робила рух ривком, хоч би яка була тривалість. */
  /* Рух — лише коли людина розгортає чи згортає (клас .moving, canvas.js):
     при зміні ширини вікна чи завантаженні аркуш, кант і кнопка стають на
     місце разом, без анімації — інакше кант випереджав аркуш. */
  .split.overview { --sheet-t: 0s; }
  .split.overview.moving { --sheet-t: .8s cubic-bezier(.45, 0, .55, 1); }
  .split.overview {
    /* Висота розгорнутого аркуша: між смугою й аркушем — місце під кнопку
       дії (смуга 52 + 12, кнопка 50 + 12 знизу й згори). */
    --open-h: calc(100dvh - max(10px, env(safe-area-inset-top)) - 168px);
    --tab: 36px; /* кант зі стрілкою — цілком над аркушем */ }
  /* План вписується між плаваючою смугою й аркушем (stage.js, readInsets). */
  .split.overview { position: fixed; inset: 0; display: block; height: auto;
    --fit-top: 72px; --fit-bottom: var(--h, 0px); }
  .split.overview > .canvas-host { height: 100%; }
  /* Аркуш розгорнуто — план гасне: між смугою й кнопкою не стирчать мітки. */
  .split.overview > .canvas-host { transition: opacity var(--sheet-t); }
  .split.overview.sheet-open > .canvas-host { opacity: 0; pointer-events: none; }
  /* Масштаб — двома пальцями; легенда й кнопки лише закривали б план. */
  .split.overview .stage-ui { display: none; }

  /* ─── плаваюча смуга ─── */
  .bar.floaty { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: auto;
    padding: max(10px, env(safe-area-inset-top)) 12px 0; gap: 10px; align-items: stretch;
    background: none; border: 0; pointer-events: none; }
  .bar.floaty > * { pointer-events: auto; }
  .bar.floaty .bar-title, .bar.floaty .bar-clock, .bar.floaty .grow, .bar.floaty > .brand { display: none; }
  .bar.floaty .bar-home { padding: 0; background: none; }
  .bar.floaty .icon-btn { width: 48px; height: 52px; border-radius: 12px;
    background: var(--raised); box-shadow: var(--shadow-sm); }
  .bar.floaty .projchip { flex: 1; max-width: none; height: 52px; padding: 0 14px;
    border-radius: 12px; background: var(--raised); box-shadow: var(--shadow-sm); }
  .bar.floaty .projchip .txt { flex: 1; flex-direction: column; align-items: flex-start; gap: 1px; }
  .bar.floaty .projchip .n { font-size: 15px; max-width: 100%; }
  .bar.floaty .projchip .st { display: block; font-size: 12.5px; }
  .bar.floaty .projchip .open { display: inline; }
  .bar.floaty .projchip .open::before { content: " · "; }

  /* ─── аркуш знизу ─── */
  /* Аркуш завжди висоти розгорнутого; згорнутий зсунутий донизу так, що
     видно --h. Рух — лише transform (плавно навіть на старому телефоні).
     Згорнутому знизу додано стільки ж відступу, щоб кінець списку можна
     було докрутити у видиму частину. */
  .split.overview > .sidecol { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; width: auto;
    height: var(--open-h); max-height: none; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(calc(var(--open-h) - var(--h, 44dvh)));
    padding-bottom: calc(var(--open-h) - var(--h, 44dvh) + env(safe-area-inset-bottom));
    transition: transform var(--sheet-t); will-change: transform; }
  .split.overview > .sidecol.open { transform: none; padding-bottom: env(safe-area-inset-bottom); }
  /* Стрілка: вгору — розгорнути, донизу — згорнути. Стоїть на опуклому
     канті цілком над верхнім краєм аркуша (160 × --tab, 2 px заходять на
     край, щоб не було шва) — туди влучає палець, а вміст аркуша під кант
     не підлазить (на iPhone липка смуга в аркуші не тримала). Кант їде
     разом з аркушем. Смуга згори в аркуші теж натискається. */
  .split.overview > .grab { display: grid; place-items: center; position: fixed; z-index: 16;
    left: 50%; bottom: calc(var(--open-h) - 2px); width: 160px; height: calc(var(--tab) + 2px);
    padding: 3px 0 0; border: 0; background: none; color: var(--muted); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate(-50%, calc(var(--open-h) - var(--h, 44dvh)));
    transition: transform var(--sheet-t); will-change: transform; }
  .split.overview.sheet-open > .grab { transform: translate(-50%, 0); }
  /* Без власної тіні: тінь лягала смугою на стик з аркушем, і кант
     виглядав окремим, темнішим шматком. Колір — той самий, що в аркуша. */
  .split.overview > .grab .grab-shape { position: absolute; inset: 0; color: var(--surface); }
  .split.overview > .grab .grab-shape svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .split.overview > .grab .ico { position: relative; width: 26px; height: 26px; transition: transform var(--sheet-t); }
  .split.overview > .grab:active .ico { color: var(--ink); }
  .split.overview.sheet-open > .grab .ico { transform: rotate(180deg); }
  .split.overview > .sidecol > .grab-band { display: block; flex: none; height: 14px; cursor: pointer; }
  .split.overview .sidecol-box { padding-top: 2px; }

  /* Відкрита картка над міткою — аркуш з'їжджає повністю вниз, видно лише
     кант зі стрілкою вгору (натиск закриває картку й повертає аркуш);
     кнопка дії ховається; картка виринає на видне місце, вище середини
     (pincard.js, .dock). План не рухається. */
  .split.overview.card-open > .sidecol { transform: translateY(calc(var(--open-h) + 2px)); }
  .split.overview.card-open > .grab { transform: translate(-50%, var(--open-h)); }
  .split.overview.card-open > .cta { opacity: 0; visibility: hidden; pointer-events: none; }

  /* Головна дія колонки пливе над аркушем праворуч (--h — висота аркуша). */
  .split.overview > .cta { position: fixed; right: 12px; bottom: calc(var(--h, 44dvh) + var(--tab) + 10px); z-index: 17;
    width: var(--cta-w, auto); min-height: 50px; padding: 0 20px; border-radius: 12px; box-shadow: var(--shadow);
    justify-content: center; white-space: nowrap;
    transition: transform var(--sheet-t), width var(--sheet-t), min-height var(--sheet-t),
      font-size var(--sheet-t), border-radius var(--sheet-t), opacity var(--sheet-t), visibility var(--sheet-t); }
  /* Аркуш розгорнуто — кнопка їде вгору разом з ним (той самий зсув і час)
     і плавно розтягується на всю ширину; висота та сама (замовник 25.10:
     100 px заввишки — непрактично). */
  .split.overview.sheet-open > .cta { transform: translateY(calc(var(--h, 44dvh) - var(--open-h)));
    width: calc(100vw - 24px); }
}