/* chikutik on phones (iPhone and Android): one hand, thumbs at the bottom.
   - a slim bar on top (greeting or logo, calendar, alerts, language)
   - the four pages as tabs at the bottom, New as a round + above them
   - dialogs and the task panel as full-screen sheets, one column, the save button always in reach
   - short alerts above the tabs, the Ledger as cards, projects as a row you swipe
   Loaded after app.css; desktop and tablets are untouched. */
@media (max-width: 760px) {
  :root { --tabs-h: 60px; --top-h: 56px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(var(--tabs-h) + var(--safe-b)); }
  input, select, textarea { font-size: 16px !important; } /* iOS zooms into anything smaller */

  /* ---------- top bar ---------- */
  .top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; align-items: stretch; gap: 0;
         padding: calc(8px + var(--safe-t)) 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
  .top > .top-row:first-of-type { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-height: 44px; padding-bottom: 6px; }
  .top .brand { margin-right: auto; height: 36px; }
  .top .brand svg { height: 16px; width: auto; }
  .ck-hello ~ .top-row .brand, .top:has(.ck-hello) .brand { display: none; }
  .ck-hello { position: static !important; padding: 0 !important; margin-right: auto; max-width: none !important; }
  .top:has(.ck-hello) { flex-direction: column; }
  .top:has(.ck-hello) > .top-row:first-of-type { justify-content: flex-end; }
  .top:has(.ck-hello) > .ck-hello { position: absolute !important; left: 12px; top: calc(10px + var(--safe-t)); max-width: calc(100vw - 200px) !important; z-index: 1; }
  .ck-hello i { width: 34px !important; height: 34px !important; }
  .ck-hello small { font-size: 11.5px !important; } .ck-hello b { font-size: 15px !important; }
  .icon-btn { width: 40px; height: 40px; }
  #btn-quick, #btn-island { display: none !important; }
  .lang-btn { height: 40px; padding: 0 8px; }

  /* the second row (what the timeline shows, which project): one line you can swipe */
  .top > * { min-width: 0; max-width: 100%; }
  .top-row.sub { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0 12px 8px; margin: 0 -12px; width: calc(100% + 24px); max-width: none; }
  .top-row.sub::-webkit-scrollbar { display: none; }
  .filters { order: 0; width: auto; flex: none; overflow: visible; gap: 6px; }
  .filters button { flex: none; border: 1px solid var(--line); padding: 6px 12px !important; font-size: 13.5px !important; border-radius: 999px; }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .filters .nav-ind { display: none; }
  .proj-filter { flex: none; max-width: 48vw; font-size: 14px !important; }

  /* ---------- the four pages as tabs at the bottom ---------- */
  .views { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 !important;
           height: calc(var(--tabs-h) + var(--safe-b)); padding: 0 0 var(--safe-b); background: var(--paper); border-top: 1px solid var(--line); }
  .views .nav-ind { display: none; }
  .views button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px 4px !important;
                  font-size: 11.5px !important; color: var(--mute); position: relative; min-width: 0; }
  .views button::before { content: ''; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
  .views button[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .views button[aria-current="page"]::after { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--gold); }
  .views button[data-view="timeline"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h6M4 12h14M4 17.5h9'/%3E%3C/svg%3E"); }
  .views button[data-view="gantt"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16'/%3E%3Crect x='7' y='5.5' width='8' height='3.5' rx='1'/%3E%3Crect x='10' y='10.25' width='10' height='3.5' rx='1'/%3E%3Crect x='8' y='15' width='7' height='3.5' rx='1'/%3E%3C/svg%3E"); }
  .views button[data-view="projects"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
  .views button[data-view="ledger"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-2.5-1.5-2 1.5-1.5-1.5-1.5 1.5-2-1.5L6 20.5z'/%3E%3Cpath d='M9 8h6M9 11.5h6M9 15h3.5'/%3E%3C/svg%3E"); }
  .views .count { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; transform: scale(.85); }

  /* New: a round + above the tabs; its menu opens upwards */
  .menu-wrap { position: fixed; right: 16px; bottom: calc(var(--tabs-h) + var(--safe-b) + 16px); z-index: 56; }
  #btn-new { width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
  #btn-new::before { content: '+'; font-size: 32px; font-weight: 300; line-height: 1; }
  .menu-wrap .menu { position: absolute; right: 0; bottom: 70px; top: auto; left: auto; min-width: 230px; }
  .menu-wrap .menu button { padding: 14px 18px; font-size: 16px; }
  body:has(.drawer.open) .menu-wrap, body:has(dialog[open]) .menu-wrap { display: none; }

  /* the account strip moves into the greeting (cloud.js opens it as a menu) */
  .ck-acct { display: none !important; }
  .ck-acct.open { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; position: fixed !important; left: 12px !important; right: 12px !important;
                  top: calc(var(--top-h) + var(--safe-t)) !important; bottom: auto !important; padding: 6px 0 !important; border: 1.5px solid var(--ink) !important; z-index: 70 !important; }
  .ck-acct.open > * { display: block !important; padding: 13px 16px !important; font-size: 15px !important; text-align: left; border-bottom: 1px solid var(--line) !important; text-decoration: none !important; }
  .ck-acct.open > i { display: none !important; }
  .ck-acct.open .ck-acct-e { color: var(--mute); font-size: 13px !important; }
  .ck-acct.open > :last-child { border-bottom: 0 !important; border-top: 0 !important; margin-top: 0 !important; }
  .ck-mem { top: calc(var(--top-h) + var(--safe-t)) !important; }

  /* ---------- pages ---------- */
  .page { padding: calc(var(--top-h) + var(--safe-t) + 18px) 16px 96px !important; }
  .page.projects { padding-left: 0 !important; padding-right: 0 !important; }
  body.on-gantt .page, body.on-timeline .page { padding-top: calc(var(--top-h) + var(--safe-t) + 60px) !important; }
  .page-head { margin-bottom: 16px; gap: 10px; }
  .page-head h1 { font-size: 30px; }
  .page-tools { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .page-tools .btn { flex: 1 1 auto; }

  /* timeline: the rail on top, the details below it */
  .timeline { padding-top: calc(var(--top-h) + var(--safe-t) + 44px); }
  /* a shorter rail leaves room for the details; Back to now sits on the rail's bottom edge instead of floating over the
     details, and the details end with room for the round + so their last buttons are never under it */
  .timeline { --rail-h: max(250px, 40svh); }
  .tl-rail { margin-top: 0 !important; height: var(--rail-h); }
  .tl-panel { padding: 10px 16px calc(var(--tabs-h) + var(--safe-b) + 84px) !important; }
  .tl-panel .p-kind { font-size: 13px; margin-bottom: 2px; }
  .tl-panel .p-big { font-size: clamp(38px, 11vw, 52px); }
  .tl-panel .p-body:not(.long):not(.small) { font-size: 17px; margin-top: 12px; }
  .tl-panel .p-body.small { font-size: 14.5px; margin-top: 10px; }
  .tl-panel .p-span { margin-top: 14px; width: 100%; }
  .tl-panel .p-actions { width: 100%; margin-top: 18px; }
  .tl-panel .p-actions .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .tl-now { position: absolute !important; top: calc(var(--top-h) + var(--safe-t) + 44px + var(--rail-h) - 40px) !important; bottom: auto !important;
            right: 12px !important; left: auto !important; height: 32px; padding: 0 12px; font-size: 12.5px; z-index: 6; }

  /* gantt: narrower names, the chart fills the rest of the screen */
  .gantt { --label-w: 124px; --row-h: 44px; max-height: calc(100dvh - var(--top-h) - var(--tabs-h) - var(--safe-b) - 150px); }
  /* names get two lines instead of being cut after a few letters; the percentage is on the bar already */
  .g-label { padding-right: 8px; }
  .gl-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
  .g-row:not(.project) .gl-pct { display: none; }
  .g-row.project .gl-title { font-size: 15px; }
  .zoom, .g-zoom { flex-wrap: wrap; }

  /* projects: the list becomes a row of chips you swipe */
  .pj { display: block; min-height: 0; }
  .pj-list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px !important; border: 0 !important; scrollbar-width: none; scroll-snap-type: x proximity; }
  .pj-list::-webkit-scrollbar { display: none; }
  .pj-cat, button.pj-cat { display: none; } /* the group headers: the chips stay one row (button.pj-cat used to win and break the page width) */
  .pj-tools, .pj-found, .pj-pin { display: none !important; }
  .pj-rows, .pj-item { display: contents; }
  .pj-row { display: flex !important; flex-direction: column; flex: none; width: auto; min-width: 120px; max-width: 70vw; padding: 9px 14px !important; border: 1.5px solid var(--line); scroll-snap-align: start; gap: 2px; }
  .pj-row .pj-bar { display: none; }
  .pj-row.sel { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
  .pj-row.sel .pj-n { color: var(--faint) !important; }
  .pj-row.shared { border-color: var(--gold); }
  .pj-row.shared.sel { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
  .pj-row.shared.sel .pj-n { color: var(--on-gold) !important; opacity: .75; }
  .pj-row.sel .pj-tag { color: inherit; border-color: currentColor; } /* the TEAM tag stays readable on the selected card */
  .pj-name { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-n { font-size: 11.5px; white-space: nowrap; }
  .pj-addp { flex: none; align-self: center; margin: 0 !important; padding: 9px 14px; border: 1.5px dashed var(--faint); text-decoration: none; white-space: nowrap; }
  .pj-detail { padding: 4px 16px 32px !important; }
  .pj-detail.shared .pjd-head { margin-left: 0 !important; padding-left: 12px !important; border-left-width: 4px !important; }
  .pjd-title { font-size: 30px; }
  .pjd-actions { flex-wrap: wrap; }
  .pjd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .pjd-stats > div { padding: 10px 10px 10px 0 !important; border-bottom: 1px solid var(--line); }
  .pjd-stats > div:nth-child(2n) { border-right: 0; padding-left: 12px !important; }
  .pjd-stats > div:nth-child(2n+1) { padding-left: 0 !important; }
  .pjd-stats b { font-size: 19px; }
  .pjd-sec { margin-top: 24px; }
  .pjd-sec h2 { font-size: 17px; flex-wrap: wrap; }
  .pj-add { flex-wrap: wrap; }
  .pj-add input { flex: 1 1 100%; }
  .pj-add input[name="title"] { flex: 1 1 60%; }
  .lnk-addbox .lnk-plus { display: none; }
  .lnk-addbox input[name="title"] { flex: 1 1 100%; }
  .lnk-addbox select { flex: 1 1 0; }
  .lnk-find { order: 5; flex: 1 1 100%; width: auto; margin: 4px 0 0; height: 36px; }
  .lnk-find input { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .card-acts { opacity: 1 !important; }
  .gal { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .gal.masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; } /* two columns, like the squares' tight gaps */
  .gal.masonry > * { margin-bottom: 4px; }
  .gal-by { display: none; }

  /* ledger: the totals swipe, each claim is a card */
  .ledger-sum { display: flex !important; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
  .ledger-sum::-webkit-scrollbar { display: none; }
  .ledger-sum button { flex: none; min-width: 132px; padding: 12px 14px 10px 0 !important; }
  .ledger-sum button + button { padding-left: 14px !important; }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tfoot { display: block; }
  /* the first cell is the tick box: it sits left of the first two lines */
  .ledger tr { display: grid; grid-template-columns: 28px auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ledger td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  .ledger td.csel-td { grid-column: 1; grid-row: 1 / 3; width: auto; align-self: center; }
  .ledger input.csel { width: 22px; height: 22px; }
  .ledger td:nth-child(3) { grid-column: 2 / 5; grid-row: 1; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
  .ledger td:nth-child(6) { grid-column: 5; grid-row: 1; font-weight: 600; text-align: right; }
  .ledger td:nth-child(2), .ledger td:nth-child(4), .ledger td:nth-child(5) { grid-row: 2; font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ledger td:nth-child(7) { grid-column: 5; grid-row: 2; justify-self: end; font-size: 12.5px; }
  .ledger td:nth-child(8) { grid-column: 2 / 4; grid-row: 3; font-size: 13.5px; }
  .ledger td:nth-child(9) { grid-column: 4 / 6; grid-row: 3; justify-self: end; }
  .ledger td:nth-child(8):empty, .ledger td:nth-child(9):empty { display: none; }
  .ledger td[colspan] { grid-column: 1 / -1; }
  .ledger tfoot tr { grid-template-columns: 1fr auto; }
  .ledger tfoot td:empty { display: none; }
  .ledger tfoot td:nth-child(3) { grid-column: 1; grid-row: 1; font-size: 14px; }
  .ledger tfoot td:nth-child(6) { grid-column: 2; grid-row: 1; }
  .ledger tr.picked { background: color-mix(in srgb, var(--gold) 9%, transparent); }
  .ledger tr.picked td { background: none; }
  .csel-bar { bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); padding: 10px 12px; margin: 14px -4px 0; }
  .csel-acts { width: 100%; flex-wrap: wrap; }
  .csel-acts .btn { flex: 1 1 auto; }
  .csel-acts .btn.primary { flex-basis: 100%; order: -1; }
  /* while claims are ticked the round + steps aside, so it never covers the bar */
  body.chat-on .menu-wrap { opacity: 0; pointer-events: none; transform: scale(.8); }
  body.chat-on .chat { height: calc(100dvh - var(--top-h, 64px) - 150px); }
  body.csel-on .menu-wrap { opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .2s, transform .2s; }

  /* the getting-started list: a slim bar under the header that opens downwards, clear of the toasts and the round + */
  .ckl { left: 0; right: 0; bottom: auto; top: calc(var(--top-h) + var(--safe-t)); width: auto; border-width: 0 0 1px; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5); z-index: 45; }
  .ckl-head { padding: 9px 16px 8px; }
  body.ckl-on .view { margin-top: 44px; }
  .wl-card { padding: calc(14px + var(--safe-t)) 16px calc(14px + var(--safe-b)) !important; }
  .wl-body { min-height: 0; }
  /* ---------- dialogs and the task panel: full-screen sheets ---------- */
  dialog.modal, dialog.modal.wide { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; inset: 0; }
  dialog.modal[open] { animation: sheetUp .28s var(--ease); }
  dialog.modal form { padding: calc(10px + var(--safe-t)) 16px calc(12px + var(--safe-b)) !important; min-height: 100%; gap: 14px; }
  .modal-head { position: sticky; top: calc(-10px - var(--safe-t)); z-index: 2; background: var(--paper); margin: 0 -16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .modal-head h2 { font-size: 20px; }
  .modal .grid2, .drawer .grid2, .grid2 { grid-template-columns: 1fr !important; }
  .modal .row-actions { position: sticky; bottom: calc(-12px - var(--safe-b)); z-index: 2; margin: auto -16px 0; padding: 12px 16px calc(12px + var(--safe-b)); background: var(--paper); border-top: 1px solid var(--line); }
  .modal .row-actions .btn { flex: 1 1 auto; min-height: 46px; }
  .modal .row-actions .spacer { display: none; }
  .drawer { width: 100vw !important; border-left: 0 !important; padding: calc(12px + var(--safe-t)) 16px calc(28px + var(--safe-b)) !important; }
  .drawer .drawer-head { position: sticky; top: calc(-12px - var(--safe-t)); z-index: 2; background: var(--paper); padding: 8px 0; }
  .drawer form .row-actions, .drawer .form-actions { position: sticky; bottom: calc(-28px - var(--safe-b)); background: var(--paper); padding: 10px 0 calc(10px + var(--safe-b)); }
  .btn { min-height: 42px; }
  .btn.small { min-height: 36px; }

  /* ---------- alerts: short, above the tabs, at most two ---------- */
  /* leave the + button free on the right */
  .toasts { left: 10px !important; right: 84px !important; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px) !important; gap: 6px; }
  .toast { width: auto !important; grid-template-columns: 18px minmax(0, 1fr) 30px; gap: 8px; padding: 9px 4px 9px 0; }
  .toast::before { margin-top: 7px; height: 4px; }
  .toast .t-title { font-size: 14px; line-height: 1.3; }
  .toast .t-sub { font-size: 12.5px; }
  .toast:nth-last-child(n+3) { display: none; }
  .toast .t-actions { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .toast .t-actions .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .toast .t-actions .link, .toast .t-actions button.ghost { font-size: 13px; }
  /* a ringing reminder: one line with its buttons, the details stay in the app */
  .toast.alarm .t-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(dialog[open]) .toasts, body:has(.drawer.open) .toasts { right: 10px !important; bottom: calc(76px + var(--safe-b)) !important; }
  body:has(dialog[open]) .toast.alarm, body:has(.drawer.open) .toast.alarm { display: none; }
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* small phones turned sideways: the chart gets the space between the top bar and the tabs */
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  body.on-gantt .top-row.sub { display: none !important; }
  body.on-gantt .page { padding-top: calc(var(--top-h) + var(--safe-t) + 8px) !important; }
  .gantt { max-height: calc(100dvh - var(--top-h) - var(--safe-t) - var(--tabs-h) - var(--safe-b) - 8px); scroll-margin-top: calc(var(--top-h) + var(--safe-t) + 4px); }
}
@media (max-width: 760px) {
  /* Ledger parts on one line you can swipe, never two-line labels */
  .ledger-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ledger-tabs::-webkit-scrollbar { display: none; }
  .ledger-tabs button, .ledger-tabs a { flex: none; white-space: nowrap; }
}