/* The Hub on a phone (Hallmark phone pass, 3 November 2026; review/hallmark/phone-rethink.html, approved with every mockup on 2 November).
   Only the look on a phone (up to 860px): the header, the floating pill bar, the floating find bar, More and its phone bar picker, the
   sheets from the bottom, the press-and-hold menu and "Open this on a computer". What a press does is unchanged (app.js, phonekit.js,
   rowmenu.js, desk.js). Loaded last so it can sit over the older phone rules (app.css, cadence.css). */
@media (max-width:860px){
  /* ---- the header: the page's colour, a plain back arrow, the title, then Search · the bell · Escalate · Kasper (his menu holds Feedback) ---- */
  html body:not(.on-home) .mhead:not(#_):not(#_){position:sticky;top:0;z-index:30;min-height:calc(58px + env(safe-area-inset-top,0px));padding:calc(env(safe-area-inset-top,0px) + 4px) 184px 6px 16px;background:var(--c-bg,var(--bg));border-bottom:1px solid transparent;transition:border-color .22s cubic-bezier(.16,1,.3,1)}
  html[dir="rtl"] body:not(.on-home) .mhead:not(#_):not(#_){padding-left:184px;padding-right:16px}
  html body.mh-scrolled:not(.on-home) .mhead:not(#_):not(#_){border-bottom-color:var(--border)}
  /* a page that is white under its header (Chat's list, a page's "Open this on a computer") keeps the header the same white */
  html body:is(:has(#p-ch.on .cx-list.cx-phone),:has(.dk.dk-page)):not(.on-home) .mhead:not(#_):not(#_){background:var(--surface)}
  html body:not(.on-home) .mhead .logo:not(#_):not(#_){min-height:48px;padding:0;align-items:center;gap:2px}
  html body:not(.on-home) #mTitle:not(#_):not(#_){font-family:Archivo,var(--font-sans),sans-serif;font-size:21px;line-height:1.25;font-weight:650;letter-spacing:-.015em;color:var(--c-ink,var(--ink));padding-inline-start:4px}
  html body .mhead #mBack:not(#_):not(#_){width:44px;height:44px;margin-inline-start:-10px;border-radius:999px;background:transparent;color:var(--c-ink,var(--ink))}
  html body .mhead #mBack:active:not(#_):not(#_){background:var(--surface-hover)}
  html body .mhead #mBack svg:not(#_):not(#_){width:22px;height:22px;stroke-width:1.8}
  /* the icons: round, 44px, the ink colour (the mockup's flag is plain, not red), level with the title */
  html body:not(.on-home) .mhead .mh-r:not(#_):not(#_):not(#_){display:block!important}
  html body .mhead .mh-r>.av:not(#_):not(#_){display:none!important}
  html body:not(.on-home) #mSearch:not(#_):not(#_){position:fixed;top:calc(env(safe-area-inset-top,0px) + 7px);inset-inline-end:140px;z-index:41;width:44px;height:44px;border-radius:999px;color:var(--c-ink,var(--ink))}
  html body:not(.on-home) #mSearch svg:not(#_):not(#_){width:21px;height:21px;stroke-width:1.8}
  html body:not(.on-home) .tb-bell:not(#_):not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 7px);inset-inline-end:96px;width:44px;height:44px;color:var(--c-ink,var(--ink))}
  html body:not(.on-home) .tb-bell svg:not(#_):not(#_){width:21px;height:21px}
  html body:not(.on-home) .tb-bell i:not(#_):not(#_){top:4px;inset-inline-end:3px;min-width:18px;height:18px;padding:0 5px;font:700 11px/18px var(--font-sans);box-shadow:0 0 0 2px var(--c-bg,var(--bg))}
  html body:not(.on-home) .esc-fab:not(#_):not(#_):not(#_):not(#_),html body.fl-on:not(.on-home) .esc-fab:not(#_):not(#_):not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 7px)!important;inset-inline-end:52px!important;width:44px;height:44px!important;border-radius:999px;color:var(--c-ink,var(--ink))}
  /* Kasper lives in the header (Rami, 3 November 2026): his button is the dark square at the end, on every page, Home too, and his menu
     has Feedback, so the Feedback button leaves the header. The round floating Kasper is a computer's only */
  html body #mKasper:not([hidden]):not(#_):not(#_){display:grid;place-items:center;position:fixed;top:calc(env(safe-area-inset-top,0px) + 7px);inset-inline-end:6px;z-index:41;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--c-ink,var(--ink));cursor:pointer;-webkit-tap-highlight-color:transparent}
  html body.on-home #mKasper:not([hidden]):not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 9px);inset-inline-end:12px}
  html body #mKasper .mh-kb:not(#_){display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--c-ink,var(--ink));color:var(--surface);--eye:var(--c-ink,var(--ink))}
  html body #mKasper svg:not(#_){width:21px;height:21px}
  html body #mKasper:active .mh-kb:not(#_){transform:scale(.94)}
  html body #mKasper:focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:-2px}
  html body .fb-fab:not(#_):not(#_):not(#_):not(#_):not(#_),html body .pal:not(#_):not(#_):not(#_):not(#_):not(#_){display:none!important}
  html body.on-home .esc-fab:not(#_):not(#_):not(#_):not(#_){inset-inline-end:56px!important}
  /* where the header's other icons step aside (an open chat's own header, a document's sheet, the bell's sheet over Home), so does he */
  html body:is(:has(#chatPage.has-room),:has(.page.on .dc-sheet),.bd-full-on) #mKasper:not(#_):not(#_):not(#_),html.pop body #mKasper:not(#_):not(#_):not(#_){display:none!important}
  /* his menu: a sheet with four rows, an icon, the name and a line under it */
  html body aside.sp.kph .kph-list:not(#_){display:flex;flex-direction:column;padding:0 0 calc(8px + env(safe-area-inset-bottom,0px))}
  html body .kph-row:not(#_):not(#_){display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:10px 4px;border:0;border-top:1px solid var(--border);background:none;color:var(--c-ink,var(--ink));text-align:start;font:inherit;cursor:pointer}
  html body .kph-row:first-child:not(#_):not(#_){border-top:0}
  html body .kph-row:active:not(#_):not(#_){background:var(--surface-hover)}
  html body .kph-ic:not(#_){width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-muted)}
  html body .kph-t:not(#_){display:flex;flex-direction:column;gap:2px;min-width:0}
  html body .kph-t b:not(#_){font-size:17px;font-weight:650}
  html body .kph-t small:not(#_){font-size:14px;color:var(--ink-muted);line-height:1.3}
  html body:not(.on-home) .esc-fab svg:not(#_):not(#_):not(#_){width:21px;height:21px;stroke:currentColor!important}
  html body .mhead :is(#mSearch,#mBack):focus-visible:not(#_):not(#_),html body:not(.on-home) :is(.esc-fab,.tb-bell):focus-visible:not(#_):not(#_):not(#_){outline:2px solid var(--focus);outline-offset:-2px}

  /* ---- the floating pill bar: Home, up to four picked pages, More. The page you're on is the dark pill with its name ---- */
  html body .tabbar:not(#_):not(#_){display:flex;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:2px;padding:6px!important;border:0!important;border-radius:34px;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px rgba(17,18,20,.16),0 1px 3px rgba(17,18,20,.08),0 0 0 1px var(--border)}
  html body .tabbar a:not(#_):not(#_){position:relative;flex:1 1 0;min-width:42px;height:50px;min-height:50px;flex-direction:row;gap:7px;padding:0 8px;border-radius:26px;background:transparent!important;color:var(--ink-muted)!important;font-size:14px;transition:background-color .22s cubic-bezier(.16,1,.3,1)}
  html body .tabbar a.on:not(#_):not(#_){flex:0 0 auto;max-width:58%;padding:0 16px;background:var(--c-ink,var(--ink))!important;color:var(--surface)!important}
  html body .tabbar a:active:not(#_):not(#_){transform:scale(.96)}
  html body .tabbar a svg:not(#_):not(#_){width:24px;height:24px;stroke-width:1.7}
  html body .tabbar a .tb-t:not(#_):not(#_){display:none}
  html body .tabbar a.on .tb-t:not(#_):not(#_){display:block;min-width:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px;padding:0}
  html body #tabbar a .tb-n:not(#_):not(#_){top:6px;inset-inline-end:auto;inset-inline-start:calc(50% + 4px);box-shadow:0 0 0 2px var(--surface)}
  html body #tabbar a.on .tb-n:not(#_):not(#_){position:static;flex:none;box-shadow:none;background:color-mix(in srgb,var(--surface) 22%,transparent);color:var(--surface)}
  html body #tabbar a:focus-visible:not(#_):not(#_){outline:2px solid var(--focus);outline-offset:2px}

  /* ---- the floating find bar over a list: Quick find, Filter and + as three floating pieces above the bar ---- */
  html body .fl:not([hidden]):not(#_):not(#_){left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));gap:8px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  html body.sub-lv .fl:not([hidden]):not(#_):not(#_){bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  html body .fl .fl-q:not(#_):not(#_){height:50px;padding:0 16px;gap:10px;border-radius:26px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px rgba(17,18,20,.16),0 1px 3px rgba(17,18,20,.08),0 0 0 1px var(--border);color:var(--ink-muted)}
  html body .fl .fl-q:focus-within:not(#_):not(#_){box-shadow:0 10px 30px rgba(17,18,20,.16),0 0 0 2px var(--c-ink,var(--ink))}
  html body .fl .fl-b:not(#_):not(#_){width:50px;height:50px;border-radius:50%;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(17,18,20,.16),0 1px 3px rgba(17,18,20,.08),0 0 0 1px var(--border);color:var(--c-ink,var(--ink))}
  html body .fl .fl-b.fl-n:not(#_):not(#_){background:var(--c-ink,var(--ink));color:var(--surface);box-shadow:0 10px 30px rgba(17,18,20,.2)}
  html body .fl .fl-b.on:not(#_):not(#_)::after{top:10px;right:10px}
  html body.fl-on:not(.sub-lv) main:not(#_){padding-bottom:200px!important}

  /* ---- More: your card, then groups as cards, each with a small capital heading; rows with an icon, a line under the name and › ---- */
  html body #moPage .mo-me:not(#_){margin:6px 0 12px;padding:14px 16px;border:0;border-radius:16px;background:var(--surface);box-shadow:none}
  html body #moPage .mo-me .av:not(#_){width:52px;height:52px;font-size:18px}
  html body #moPage .mo-me b:not(#_){font-size:18px;font-weight:650}
  html body #moPage .mo-me small:not(#_){color:var(--accent-blue,#2f6fdf);font-weight:600;font-size:14px}
  html body #p-mo .mo-g:not(#_),html body #moPage .mo-g:not(#_){margin:0 0 12px;padding:2px 16px;border:0;border-radius:16px;background:var(--surface);box-shadow:none}
  html body #moPage .mo-g>h3:not(#_){margin:0;padding:14px 0 2px;font:700 12.5px/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
  html body #moPage .mo-row:not(#_){min-height:58px;gap:14px;border-top-color:var(--border)}
  html body #moPage .mo-ic:not(#_){width:22px;flex:none;color:var(--ink-muted);display:grid;place-items:center}
  html body #moPage .mo-t b:not(#_){font-weight:600;font-size:16px}
  html body #moPage .mo-t small:not(#_){font-size:13.5px;color:var(--ink-muted)}
  html body #moPage .mo-cnt:not(#_){flex:none;font-style:normal;font-size:13px;font-weight:700;padding:2px 8px;border-radius:10px;background:#d92d2d;color:#fff}
  html body #moPage .mo-cnt:empty:not(#_){display:none}
  /* Your phone bar: what the bar looks like now, then the pages to tick (a black tick box and the number of its place) */
  html body .mo-bar .mo-prev:not(#_){display:flex;gap:4px;padding:5px;margin:6px 0 12px;border-radius:30px;background:var(--c-bg,var(--bg));box-shadow:0 0 0 1px var(--border)}
  html body .mo-bar .mo-prev span:not(#_){flex:1;height:38px;border-radius:20px;display:grid;place-items:center;color:var(--ink-muted)}
  html body .mo-bar .mo-prev span.on:not(#_){background:var(--c-ink,var(--ink));color:var(--surface)}
  html body .mo-bar .mo-prev svg:not(#_){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  html body #setPage .mo-bar .mo-prev:not(#_){display:none}
  html body #moPage .mo-pick input:not(#_){width:24px;height:24px;accent-color:var(--c-ink,var(--ink))}
  html body #moPage .mo-pick .mo-no:not(#_){width:26px;height:26px;font-weight:700;background:var(--c-ink,var(--ink));color:var(--surface)}

  /* ---- sheets from the bottom (a Hub panel on a phone, the press-and-hold menu): rounded top, a grab line, the title and × ---- */
  html body aside.sp.in:not(#_):not(#_){border-radius:22px 22px 0 0}
  html body aside.sp.in>.sp-h:not(#_):not(#_)::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border);pointer-events:none}
  html body aside.sp.in>.sp-h:not(#_){position:relative}
  html body :is(.rm-menu.rm-sheet,.rm-sheet .rm-sub):not(#_):not(#_){border:0;border-radius:22px 22px 0 0;padding:8px 20px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 32px rgba(17,18,20,.16)}
  html body :is(.rm-menu.rm-sheet,.rm-sheet .rm-sub):not(#_):not(#_)::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--border);margin:0 auto 6px}
  html body .rm-sheet .rm-head:not(#_):not(#_){padding:8px 0 10px;font-size:19px;font-weight:650;color:var(--c-ink,var(--ink))}
  html body .rm-sheet .rm-it:not(#_):not(#_){min-height:54px;gap:14px;padding:6px 4px;border-radius:0;font-size:16px;font-weight:600;border-top:1px solid var(--border)}
  html body .rm-sheet .rm-head+.rm-it:not(#_):not(#_),html body .rm-sheet hr+.rm-it:not(#_):not(#_){border-top:0}
  html body .rm-sheet hr:not(#_):not(#_){margin:0;border-top:1px solid var(--border)}
  html body .rm-sheet .rm-i:not(#_):not(#_),html body .rm-sheet .rm-ch:not(#_):not(#_){width:22px;height:22px;stroke-width:1.7;color:var(--ink-muted)}
  html body .rm-sheet .rm-it.bad:not(#_):not(#_),html body .rm-sheet .rm-it.bad .rm-i:not(#_):not(#_){color:var(--bad,#b01e4f)}
  html body .rm-sheet .rm-it small:not(#_):not(#_){font-size:13.5px}

  /* ---- "Open this on a computer": a sheet with the screen icon in a soft square, the reason, Copy link and Close ---- */
  html body .dk:not(.dk-page) .dk-card:not(#_){border-radius:22px 22px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));gap:10px;justify-items:start}
  html body .dk:not(.dk-page) .dk-card:not(#_)::before{content:"";justify-self:center;width:40px;height:5px;border-radius:3px;background:var(--border);margin-bottom:10px}
  html body .dk .dk-ic:not(#_){box-sizing:border-box;width:56px;height:56px;padding:15px;border-radius:16px;background:var(--surface-hover,var(--soft));stroke:var(--c-ink,var(--ink))}
  html body .dk .dk-card h2:not(#_){font-size:19px;font-weight:650}
  html body .dk .dk-acts:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  html body .dk .dk-acts .btn-s:not(#_):not(#_){min-height:44px;justify-content:center;border-radius:8px}
  /* Copy link first, as an outline; Close (Back on a page) last, filled */
  html body .dk .dk-acts [data-dkcopy]:not(#_):not(#_){order:-1;background:var(--surface)!important;color:var(--c-ink,var(--ink))!important;border:1px solid var(--border-strong)!important}
  html body .dk .dk-acts :is([data-dkx],[data-dkback]):not(#_):not(#_){background:var(--c-ink,var(--ink))!important;color:var(--surface)!important;border-color:var(--c-ink,var(--ink))!important}
}