/* 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 - 232px) !important; z-index: 1; } /* the five header icons need 220px */
  .top:has(#btn-chat:not([hidden])) > .ck-hello { max-width: calc(100vw - 274px) !important; } /* a sixth icon: chikutik Chat, for people in a team */
  .ck-hello i { width: 34px !important; height: 34px !important; }
  /* each line of the greeting stays on one line: with six icons "Selamat siang," wrapped and pushed the name under the filter row */
  .ck-hello small, .ck-hello b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ck-hello > span { min-width: 0; }
  .top:has(#btn-chat:not([hidden])) > .ck-hello small { display: none; }
  .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; }
  /* while one project is shown, say so at the start of the row (at its end it sat off the screen behind the four chips) */
  .proj-filter.on { order: -2; max-width: 44vw; }
  .proj-clear { order: -1; width: 30px; height: 30px; margin: 0 2px 0 -2px; }
  .tl-team { padding: 6px 12px; font-size: 13.5px; margin-left: 0; }
  .tl-team-x em { display: none; } /* the number alone on a phone; the full words are its label */

  /* ---------- 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: 1fr 1fr 70px 1fr 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[data-view="projects"] { grid-column: 4; } .views button[data-view="ledger"] { grid-column: 5; } /* the middle slot holds the round + */
  .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 .nav-new { top: 3px; right: calc(50% - 24px); }
  .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 + docked in the middle of the tabs (it used to float over the page and cover buttons); its menu opens upwards */
  .menu-wrap { position: fixed; left: 50%; margin-left: -29px; bottom: calc(var(--safe-b) + 10px); z-index: 56; }
  #btn-new { width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
  #btn-new::before { content: ''; width: 22px; height: 22px; background: linear-gradient(currentColor, currentColor) center / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 22px no-repeat; } /* a drawn +, so it sits dead centre in every font */
  .menu-wrap .menu { position: absolute; right: auto; left: 50%; translate: -50% 0; bottom: 70px; top: 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; }
  .page-tools .g-lockb { flex: 0 0 auto; }
  /* Gantt and Calendar: the lock is its icon (its words stay for screen readers), so month, Today and the lock share one row */
  #view-gantt .page-tools { align-items: center; }
  #view-gantt .g-lockb { margin-left: auto; padding: 8px 10px; order: 1; }
  /* the lock shares the first row with Gantt / Calendar; zoom and Go to today (or the month) take the second: it stood alone on a third */
  #view-gantt .page-tools > .seg.g-only, #view-gantt .page-tools > #btn-today, #view-gantt .page-tools > .cal-nav { order: 2; }
  #view-gantt .page-tools > #btn-today { flex: 0 1 auto; }
  #view-gantt .g-lockb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #view-gantt .cal-nav { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
  #view-gantt .cal-nav .btn { flex: 0 0 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; }
  /* Back to now waits above the bottom tabs at the right, in the room the panel keeps free for the round +; on the rail it covered
     the last row's title, and it moved up another 44 px under the Getting started bar */
  .tl-now { position: fixed !important; top: auto !important; bottom: calc(var(--tabs-h) + var(--safe-b) + 14px) !important;
            right: 12px !important; left: auto !important; height: 36px; padding: 0 14px; font-size: 13px; z-index: 30;
            border-radius: 18px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }

  /* 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-allbtn { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 9px 12px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; position: sticky; left: 0; z-index: 1; cursor: pointer; }
  .pj-allbtn[hidden] { display: none; }
  .pj-list { scroll-padding-left: 96px; } /* chips come to rest beside the All projects chip, never under it */
  .pj-allbtn { box-shadow: 8px 0 10px -6px var(--paper), -16px 0 0 var(--paper); }
  .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-on { margin-left: 6px; color: inherit; } .pj-on span { display: none; } /* chips are narrow: the dot and the number */
  .pj-row.sel .pj-on i { box-shadow: 0 0 0 2px currentColor; }
  .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; }
  /* the head of a project is short on a phone, so what the tab holds starts higher (it began two thirds down the screen) */
  .pjd-title { font-size: 24px; margin: 0 0 2px; }
  .pjd-cat, .pjd-share { font-size: 12px; }
  .pjd-actions { margin-top: 4px; gap: 4px; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .pjd-actions::-webkit-scrollbar { display: none; }
  .pjd-actions .btn.small { flex: none; padding: 6px 10px; font-size: 13px; min-height: 0; }
  .pjt-bar { margin-top: 10px !important; }
  .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-bar { margin: 0 0 10px; justify-content: flex-start; }
  .ledger-sum button { flex: none; min-width: 132px; padding: 12px 14px 10px 0 !important; }
  .ledger-sum button + button { padding-left: 14px !important; }
  .ledger-sum .ls-owe { min-width: 190px; }
  .ledger-sum .ls-owe .ls-amt { font-size: 24px; }
  .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); } /* app.js fitChat sets the real height */
  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, .ckl:not(.open) .ckl-head { padding: 9px 16px 8px; } .ckl:not(.open) { width: auto; } .ckl:not(.open) .ckl-t { font-size: 14px; }
  .ckl:not(.open) .ckl-chev { transform: rotate(45deg); margin-bottom: 3px; } .ckl.open .ckl-chev { transform: rotate(-135deg); margin-bottom: -3px; } /* the bar is at the top here, so the list drops down */
  body.ckl-on .view { margin-top: 44px; }
  html { scroll-padding-top: calc(var(--top-h) + var(--safe-t) + 8px); } /* a row scrolled into view lands below the fixed header, not under it */
  html.ckl-on { scroll-padding-top: calc(var(--top-h) + var(--safe-t) + 100px); } /* and below the Getting started bar under the filter row */
  body.ckl-on.on-timeline .ckl, body.ckl-on.on-gantt .ckl { top: calc(var(--top-h) + var(--safe-t) + 46px); } /* under the filter row, not behind it */
  .p-actions kbd { display: none; } /* key names mean nothing on a phone */
  .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; }
}

/* petty cash on phones: the dialogs use the whole width, the month facts wrap, review rows stay readable */
@media (max-width: 720px) {
  .modal.cs-review { width: calc(100vw - 16px); }
  .cs-note .btn { margin-left: 0; }
  .cs-month b { min-width: 0; flex: 1; }
  .rv-scroll { max-height: 52vh; }
  .cs-cats li { grid-template-columns: minmax(70px, 110px) minmax(30px, 1fr) auto; }
  .modal.cs-pivot { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; }
  .cs-pivot form { max-height: none; height: 100%; padding: 16px 14px; }
  .pv-table .pv-n { width: 120px; min-width: 120px; max-width: 120px; }
  .pv-table .pv-t { position: static; }
  .pv-table thead .pv-t { position: sticky; left: auto; }
}
/* the fund's ledger on a phone: no sideways scrolling. Each entry is date, what, and on the right the amount (+ for
   money in) with the balance after it underneath */
@media (max-width: 560px) {
  .cs-fund .cs-scroll { overflow-x: visible; }
  .cs-fund .cs-table, .cs-fund .cs-table tbody { display: block; }
  .cs-fund .cs-table thead { display: none; }
  .cs-fund .cs-table tr { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 0 8px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; }
  .cs-fund .cs-table td { border: 0; padding: 0; }
  .cs-fund .cs-table td:empty { display: none; }
  .cs-fund .cs-table .cs-d { grid-column: 1; grid-row: 1 / span 3; }
  .cs-fund .cs-table .cs-w { grid-column: 2; grid-row: 1 / span 3; min-width: 0; overflow-wrap: anywhere; }
  .cs-fund .cs-table .cs-in, .cs-fund .cs-table .cs-out, .cs-fund .cs-table .cs-bal, .cs-fund .cs-table .cs-x { grid-column: 3; text-align: right; }
  .cs-fund .cs-table .cs-in::before { content: '+'; }
  .cs-fund .cs-table .cs-bal { font-size: 11.5px; font-weight: 400; color: var(--mute); }
  .cs-fund .cs-table .cs-bal.neg { color: var(--red); }
  .cs-fund .cs-table .cs-x { margin-top: 4px; }
  .cs-fund .cs-table .cs-d .cs-code { max-width: 100%; padding: 0 4px; font-size: 10.5px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; } /* the fund's code (MERSI-) ran over the title: the card already names the fund */
  .cs-fund .cs-table .cs-d .cs-code .cc-f { display: none; }
  .cs-fund .cs-table .cs-d .cs-code::before { content: '#'; }
}

/* very narrow phones (a Galaxy Fold closed is 344 px, small Androids 360): what did not fit at 390 */
@media (max-width: 380px) {
  .ck-hello small { display: none; }                                  /* the greeting wrapped to three lines and hid the name */
  .ck-hello b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .views button { font-size: 10.5px !important; letter-spacing: -.01em; }  /* "Pembukuan" ran off the edge */
  .cs-fund .cs-table .cs-mk { white-space: normal; }                  /* a long mark ran under the amounts */
  .dec li { grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; }  /* the title had a sliver beside the three actions */
  .dec li .dec-acts { grid-column: 2; margin-left: -7px; flex-wrap: wrap; }
}

/* From your team: above the bottom tabs, the width of the screen (app.css .tn-card) */
@media (max-width: 760px) {
  .tn-card { left: 10px; right: 10px; width: auto; max-width: none; bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); max-height: calc(100dvh - var(--tabs-h) - var(--top-h) - var(--safe-b) - var(--safe-t) - 30px); transform-origin: 50% 100%; }
  body:has(.tn-card) .toasts { bottom: calc(var(--tabs-h) + var(--safe-b) + var(--tn-h, 260px) + 20px) !important; }
}

/* touch screens have no hover to show a cut name: list names and audit lines take two lines instead of ending in "..." (phone audit, 9 Oct 2026) */
@media (hover: none) {
  .pt-name, .au-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: anywhere; } /* three lines: a long name (a GoFood order, an invitation's topic) read whole without opening it */
}

/* Reminder form on a phone: the quarter-hour rail stood 300 px above What, the field everyone fills first. A shorter rail keeps
   the big clock and three slots each side; the date and time fields below set the time as well. */
@media (max-width: 760px) {
  #reminder-modal .picker { gap: 6px; }
  #reminder-modal .picker-col { height: 176px; }
  #reminder-modal .picker-heading b { font-size: 32px; }
}

/* the report's four periods (week, 7 days, this month, last month): two by two, each on one line */
@media (max-width: 760px) {
  #week-modal .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #week-modal .seg button { white-space: nowrap; padding: 0 8px; }
  .week-text { white-space: pre-wrap; }
  #week-modal .row-actions { position: static; margin: 0 0 10px; padding: 0; border: 0; } /* the periods sit under the title: the sticky foot rule left a band of empty space above them */ /* a phone reads it here: no sideways scroll for a long line */
}

/* Pick several on a phone: the dialog is the screen, the list scrolls between the head and the bar (13 Oct 2026) */
@media (max-width: 760px) {
  dialog.pm-modal form.pm-form { height: 100%; min-height: 0 !important; max-height: none; padding-bottom: 0 !important; }
  .pm-list { margin: 0 -16px; padding: 0 16px; }
  .pm-bar { margin: 0 -16px; padding: 10px 16px calc(12px + var(--safe-b)); }
  .pm-row { grid-template-columns: auto auto minmax(0, 1fr); padding: 11px 2px; }
  .pm-row input { width: 22px; height: 22px; }
  .pm-w { grid-column: 3; text-align: left; }
  .pm-acts { width: 100%; }
  .pm-acts .btn { flex: 1 1 auto; min-height: 42px; }
  .pm-acts .btn.primary { flex-basis: 100%; order: -1; }
  .pm-proj { max-width: none; }
}