/* hk-mobile.css: the mobile system (card 5728, M0; Fable ruling 2026-10-30). One sheet, loaded
   after hk-theme.css and hk-tokens.css by any page that adopts it (site_chrome.mobile_assets()).
   Nothing here restyles an existing selector: every rule is a new .hk-m-* class or the opt-in
   body[data-hk-action-bar] attribute, so loading the sheet changes no page until it opts in.
   Palette unchanged: the colours are the hk-theme.css names (cyan accent, Founding gold).
   The matching custom properties live in static/app/hk_simple_v1.css (html.hk-simple), pinned
   equal by tests/test_mobile_system_5728.py.
   System: type 32 / 22 / 17 / 15 / 13 (body 15 minimum), numbers in tabular monospace,
   16 px gutter, 8 px grid, 24 px between sections, 44 px minimum target, one Pro (gold) and one
   free (cyan) button, a More expander, the 3-cell wall grid and the sticky action bar. */
:root{
  --hk-m-fs-display:32px;
  --hk-m-fs-title:22px;
  --hk-m-fs-lead:17px;
  --hk-m-fs-body:15px;
  --hk-m-fs-caption:13px;
  --hk-m-font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --hk-m-grid:8px;
  --hk-m-gutter:16px;
  --hk-m-section:24px;
  --hk-m-target:44px;
  --hk-m-radius:10px;
  --hk-m-pro:#e3b84f;
  --hk-m-onpro:#231a05;
  --hk-m-free:#73d7ee;
  --hk-m-onfree:#09232c;
  --hk-m-wall-above:#73d7ee;
  --hk-m-wall-below:#f19aab;
  --hk-m-bar-h:60px;
}

/* type: five sizes, nothing below 13, body never below 15 */
.hk-m-display{margin:0;font:700 var(--hk-m-fs-display)/1.12 var(--hk-font-display,system-ui,sans-serif);letter-spacing:-.02em;color:var(--hk-ink,#f2f5f7)}
.hk-m-title{margin:0;font:650 var(--hk-m-fs-title)/1.25 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-ink,#f2f5f7)}
.hk-m-lead{margin:0;font:400 var(--hk-m-fs-lead)/1.45 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-ink,#f2f5f7)}
.hk-m-body{margin:0;font:400 var(--hk-m-fs-body)/1.55 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-muted,#b5bec7)}
.hk-m-caption{margin:0;font:400 var(--hk-m-fs-caption)/1.45 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-muted,#b5bec7)}
.hk-m-num{font-family:var(--hk-m-font-num);font-variant-numeric:tabular-nums;letter-spacing:0}

/* layout: 16 px gutter, 8 px grid, 24 px between sections */
.hk-m-gutter{padding-left:var(--hk-m-gutter);padding-right:var(--hk-m-gutter);box-sizing:border-box}
.hk-m-section{margin:0 0 var(--hk-m-section)}
.hk-m-stack{display:flex;flex-direction:column;gap:var(--hk-m-grid)}

/* targets: 44 px minimum for every tap (links, chips, checkboxes, footer and language links) */
.hk-m-target{display:inline-flex;align-items:center;min-height:var(--hk-m-target);min-width:var(--hk-m-target);box-sizing:border-box}

/* buttons: one Pro (gold) and one free (cyan) per screen */
.hk-m-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hk-m-grid);min-height:var(--hk-m-target);min-width:var(--hk-m-target);padding:0 calc(var(--hk-m-grid)*2);box-sizing:border-box;border:1px solid transparent;border-radius:var(--hk-m-radius);font:650 var(--hk-m-fs-body)/1.2 var(--hk-font-text,system-ui,sans-serif);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-m-btn-pro{background:var(--hk-m-pro);color:var(--hk-m-onpro);border-color:var(--hk-m-pro)}
.hk-m-btn-free{background:var(--hk-m-free);color:var(--hk-m-onfree);border-color:var(--hk-m-free)}
.hk-m-btn-quiet{background:transparent;color:var(--hk-ink,#f2f5f7);border-color:var(--hk-line,#323b43)}
.hk-m-btn:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:2px}
.hk-m-btn-block{display:flex;width:100%}
/* card 5730: a page's own link colour (.sales-page a{color:inherit}, one class and one element)
   outranks one button class, which painted the bar's Alert me white on cyan. The button text keeps
   its own colour on every page: dark on cyan and gold, ink on the quiet button. */
a.hk-m-btn.hk-m-btn-pro,a.hk-m-btn.hk-m-btn-pro:hover,a.hk-m-btn.hk-m-btn-pro:visited{color:var(--hk-m-onpro)}
a.hk-m-btn.hk-m-btn-free,a.hk-m-btn.hk-m-btn-free:hover,a.hk-m-btn.hk-m-btn-free:visited{color:var(--hk-m-onfree)}
a.hk-m-btn.hk-m-btn-quiet,a.hk-m-btn.hk-m-btn-quiet:hover,a.hk-m-btn.hk-m-btn-quiet:visited{color:var(--hk-ink,#f2f5f7)}

/* More expander: heading + three visible items, the rest behind one 44 px summary */
.hk-m-more{margin:var(--hk-m-grid) 0 0;border-top:1px solid var(--hk-line,#323b43)}
.hk-m-more>summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--hk-m-target);padding:0 2px;list-style:none;cursor:pointer;color:var(--hk-accent,#73d7ee);font:600 var(--hk-m-fs-body)/1.2 var(--hk-font-text,system-ui,sans-serif)}
.hk-m-more>summary::-webkit-details-marker{display:none}
.hk-m-more>summary::after{content:"+";font:600 var(--hk-m-fs-title)/1 var(--hk-m-font-num);color:var(--hk-muted,#b5bec7)}
.hk-m-more[open]>summary::after{content:"\2212"}
.hk-m-more>summary:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:2px}
.hk-m-more-body{padding:0 0 var(--hk-m-grid)}

/* wall grid: wall above / price / wall below, the same three columns at every width.
   Each cell is a size container, so a 7-digit price steps down the scale to fit its own cell
   (no overlap at 390 or 360). The two largest walls in the read carry .is-big and read brighter. */
.hk-m-walls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hk-m-grid);width:100%;max-width:720px;margin:0;padding:0;list-style:none;box-sizing:border-box}
.hk-m-wall{container:hk-m-wall/inline-size;min-width:0;margin:0;padding:var(--hk-m-grid);box-sizing:border-box;border:1px solid var(--hk-line,#323b43);border-radius:var(--hk-m-radius);background:var(--hk-surface,#191f25);overflow:hidden}
.hk-m-wall-label{display:block;margin:0 0 4px;color:var(--hk-muted,#b5bec7);font:600 var(--hk-m-fs-caption)/1.3 var(--hk-font-text,system-ui,sans-serif);letter-spacing:0}
.hk-m-wall-price{display:block;margin:0;white-space:nowrap;font-family:var(--hk-m-font-num);font-variant-numeric:tabular-nums;font-weight:700;line-height:1.2;font-size:var(--hk-m-fs-title);color:var(--hk-ink,#f2f5f7)}
/* the price steps down the type scale with its own cell. Up to 8 characters ($79,921): 22,
   then 15 below a 94 px cell. Longer (data-len="long", $1,234,567): 22, then 15 below 134 px
   (390 px phones), then 13 below 92 px (360 px phones). */
@container hk-m-wall (max-width:94px){.hk-m-wall-price{font-size:var(--hk-m-fs-body)}}
@container hk-m-wall (max-width:134px){.hk-m-wall-price[data-len="long"]{font-size:var(--hk-m-fs-body)}}
@container hk-m-wall (max-width:92px){.hk-m-wall-price[data-len="long"]{font-size:var(--hk-m-fs-caption)}}
.hk-m-wall-dist,.hk-m-wall-size{display:block;margin:2px 0 0;white-space:nowrap;font:400 var(--hk-m-fs-caption)/1.3 var(--hk-font-text,system-ui,sans-serif);font-variant-numeric:tabular-nums;color:var(--hk-muted,#b5bec7)}
.hk-m-wall-size{font-family:var(--hk-m-font-num)}
/* card 5730: the distance line wraps to a second line inside its cell instead of clipping at the edge
   (no fixed cell height; the cell lets the line show) */
.hk-m-wall{overflow:visible}
.hk-m-wall-dist{white-space:normal;overflow-wrap:anywhere}
.hk-m-wall[data-side="above"] .hk-m-wall-price{color:color-mix(in srgb,var(--hk-m-wall-above) 62%,var(--hk-muted,#b5bec7))}
.hk-m-wall[data-side="below"] .hk-m-wall-price{color:color-mix(in srgb,var(--hk-m-wall-below) 62%,var(--hk-muted,#b5bec7))}
.hk-m-wall[data-side="above"].is-big .hk-m-wall-price{color:var(--hk-m-wall-above)}
.hk-m-wall[data-side="below"].is-big .hk-m-wall-price{color:var(--hk-m-wall-below)}
.hk-m-wall.is-big{border-color:color-mix(in srgb,var(--hk-ink,#f2f5f7) 28%,var(--hk-line,#323b43))}
.hk-m-wall.is-big .hk-m-wall-size{color:var(--hk-ink,#f2f5f7)}
.hk-m-wall[data-side="price"]{border-color:color-mix(in srgb,var(--hk-ink,#f2f5f7) 40%,var(--hk-line,#323b43))}
.hk-m-wall[data-empty="true"]{background:transparent;border-style:dashed}

/* sticky action bar: a page opts in with body[data-hk-action-bar]; hk-mobile.js builds the bar.
   Phones only. The page reserves the bar's height up front (no layout shift), the bar keeps
   clear of the iOS home indicator, and it steps away while the consent bar is open
   (html[data-hk-privacy-open="true"], set by attribution-capture.js) or the visitor is signed
   in (html.hk-m-signed-in, from the hk_in session hint cookie; the dashboard sheet takes over). */
.hk-m-bar{display:none}
@media (max-width:760px){
  body[data-hk-action-bar]{padding-bottom:calc(var(--hk-m-bar-h) + env(safe-area-inset-bottom,0px));--hk-bar-lift:calc(var(--hk-m-bar-h) + env(safe-area-inset-bottom,0px))}
  body[data-hk-action-bar] .hk-m-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--hk-m-grid);position:fixed;left:0;right:0;bottom:0;z-index:200;box-sizing:border-box;min-height:var(--hk-m-bar-h);padding:var(--hk-m-grid) var(--hk-m-gutter) calc(var(--hk-m-grid) + env(safe-area-inset-bottom,0px));background:var(--hk-bg,#111519);border-top:1px solid var(--hk-line,#323b43);box-shadow:0 -8px 24px rgba(0,0,0,.5)}
  html.hk-m-signed-in body[data-hk-action-bar],html[data-hk-privacy-open="true"] body[data-hk-action-bar]{--hk-bar-lift:0px}
  html.hk-m-signed-in body[data-hk-action-bar]{padding-bottom:0}
  html.hk-m-signed-in .hk-m-bar,html[data-hk-privacy-open="true"] .hk-m-bar{display:none}
}
.hk-m-bar .hk-m-btn{width:100%}

/* ---- Mobile 2 shell (card 5745, Fable audit 2026-10-30): bottom sheet, snap rail, skeletons,
   customer tab bar and the first-screen type lock. Same rule as above: new .hk-m-* classes and
   opt-in attributes only. Every component is phone-only (max-width 767px); desktop keeps the
   page's own controls. */
:root{
  --hk-m-tabs-h:60px;
  --hk-m-sheet-radius:16px;
  --hk-m-chrome-bg:rgba(10,13,20,.96);
  --hk-m-motion:180ms;
}

/* bottom sheet: scrim, drag handle, title, scrollable body, 44 px rows (HKMobile.sheet). z-index 200,
   the chrome ceiling (landing_readability_lint R2): the scrim and the sheet are the last children of
   body, so they paint over the bar and the tabs at the same level, and those step away while open. */
.hk-m-sheet-scrim{position:fixed;inset:0;z-index:200;background:rgba(3,6,10,.62);opacity:0;transition:opacity var(--hk-m-motion) ease}
.hk-m-sheet{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;flex-direction:column;max-height:min(82svh,720px);box-sizing:border-box;
  padding:0 0 env(safe-area-inset-bottom,0px);background:var(--hk-surface,#191f25);color:var(--hk-ink,#f2f5f7);
  border:1px solid var(--hk-line,#323b43);border-bottom:0;border-radius:var(--hk-m-sheet-radius) var(--hk-m-sheet-radius) 0 0;
  box-shadow:0 -16px 40px rgba(0,0,0,.55);transform:translateY(100%);transition:transform var(--hk-m-motion) cubic-bezier(.2,.8,.2,1);
  font:400 var(--hk-m-fs-body)/1.45 var(--hk-font-text,system-ui,sans-serif);overscroll-behavior:contain}
.hk-m-sheet[data-open="true"]{transform:translateY(0)}
.hk-m-sheet-scrim[data-open="true"]{opacity:1}
.hk-m-sheet[data-dragging="true"]{transition:none}
.hk-m-sheet-grab{display:flex;align-items:center;justify-content:center;flex:0 0 auto;height:24px;touch-action:none;cursor:grab}
.hk-m-sheet-grab::before{content:"";width:36px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--hk-ink,#f2f5f7) 34%,transparent)}
.hk-m-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--hk-m-grid);flex:0 0 auto;padding:0 8px 0 var(--hk-m-gutter);touch-action:none}
.hk-m-sheet-title{margin:0;font:650 var(--hk-m-fs-lead)/1.3 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-ink,#f2f5f7)}
.hk-m-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:var(--hk-m-target);height:var(--hk-m-target);padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--hk-muted,#b5bec7);font:400 var(--hk-m-fs-title)/1 var(--hk-font-text,system-ui,sans-serif);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-m-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--hk-m-grid) 0 calc(var(--hk-m-grid)*2)}
.hk-m-sheet-section{margin:0 0 calc(var(--hk-m-grid)*2)}
.hk-m-sheet-label{display:block;margin:0 0 var(--hk-m-grid);padding:0 var(--hk-m-gutter);font:600 var(--hk-m-fs-caption)/1.3 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-muted,#b5bec7)}
.hk-m-sheet-row{display:flex;align-items:center;gap:var(--hk-m-grid);min-height:var(--hk-m-target);padding:0 var(--hk-m-gutter);box-sizing:border-box}
.hk-m-sheet-note{margin:var(--hk-m-grid) 0 0;padding:0 var(--hk-m-gutter);font:400 var(--hk-m-fs-caption)/1.45 var(--hk-font-text,system-ui,sans-serif);color:var(--hk-muted,#b5bec7)}
.hk-m-sheet :focus-visible,.hk-m-sheet-close:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:2px}
html.hk-m-sheet-open,html.hk-m-sheet-open body{overflow:hidden}
html.hk-m-sheet-open #hk-privacy-choices{visibility:hidden}
@media (prefers-reduced-motion:reduce){.hk-m-sheet,.hk-m-sheet-scrim{transition:none}}

/* segmented radio (two to four choices, 44 px): role=radiogroup / role=radio inside a sheet */
.hk-m-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 var(--hk-m-gutter);padding:4px;border:1px solid var(--hk-line,#323b43);border-radius:calc(var(--hk-m-radius) + 2px);background:var(--hk-bg,#111519)}
.hk-m-seg>button{min-height:var(--hk-m-target);border:0;border-radius:var(--hk-m-radius);background:transparent;color:var(--hk-muted,#b5bec7);
  font:650 var(--hk-m-fs-body)/1.2 var(--hk-font-text,system-ui,sans-serif);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-m-seg>button[aria-checked="true"]{background:var(--hk-m-free);color:var(--hk-m-onfree)}

/* the trigger pill: one 44 px control that names the current state and opens the sheet */
.hk-m-pill{display:none}
@media (max-width:767px){
  .hk-m-pill{display:inline-flex;align-items:center;gap:var(--hk-m-grid);min-height:var(--hk-m-target);padding:0 14px 0 var(--hk-m-gutter);box-sizing:border-box;
    border:1px solid var(--hk-line,#323b43);border-radius:999px;background:var(--hk-surface,#191f25);color:var(--hk-ink,#f2f5f7);
    font:650 var(--hk-m-fs-body)/1.2 var(--hk-font-text,system-ui,sans-serif);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hk-m-pill::after{content:"";width:8px;height:8px;margin:-4px 0 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.7}
  .hk-m-pill:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:2px}
}

/* snap rail: one horizontal row, snap points, 8 px gaps, a peek of the next item and a fading
   edge while more is off screen (HKMobile.rail sets data-hk-rail-edge) */
.hk-m-rail{display:flex;gap:var(--hk-m-grid);margin:0;padding:2px var(--hk-m-gutter);list-style:none;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--hk-m-gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.hk-m-rail::-webkit-scrollbar{display:none}
.hk-m-rail>*{flex:0 0 auto;scroll-snap-align:start}
.hk-m-rail[data-hk-rail-edge="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.hk-m-rail[data-hk-rail-edge="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.hk-m-rail[data-hk-rail-edge="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.hk-m-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:64px;min-height:var(--hk-m-target);padding:0 var(--hk-m-gutter);box-sizing:border-box;
  border:1px solid var(--hk-line,#323b43);border-radius:999px;background:var(--hk-bg,#111519);color:var(--hk-ink,#f2f5f7);
  font:650 var(--hk-m-fs-body)/1.2 var(--hk-font-text,system-ui,sans-serif);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-m-chip[aria-selected="true"]{background:var(--hk-m-free);border-color:var(--hk-m-free);color:var(--hk-m-onfree)}
.hk-m-chip[data-locked]{border-color:color-mix(in srgb,var(--hk-m-pro) 55%,var(--hk-line,#323b43));color:var(--hk-m-pro);background:color-mix(in srgb,var(--hk-m-pro) 8%,var(--hk-bg,#111519))}
.hk-m-chip[data-locked]::after{content:"Pro";padding:1px 6px;border-radius:999px;background:var(--hk-m-pro);color:var(--hk-m-onpro);font:700 var(--hk-m-fs-caption)/1.3 var(--hk-font-text,system-ui,sans-serif)}
.hk-m-chip:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:2px}

/* skeletons: a container that a script fills later carries .hk-m-skeleton plus a kind and
   reserves its final height while it is empty, so the first paint does not shift. Kinds: -map,
   -walls, -card, -list, -line. A filled container drops the reservation by itself (:empty stops
   matching). The -map kind wraps a frame: it shimmers until the page sets data-hk-loaded. */
.hk-m-skeleton:empty,.hk-m-skeleton-map:not([data-hk-loaded]){
  background:linear-gradient(90deg,var(--hk-surface,#191f25) 0%,color-mix(in srgb,var(--hk-ink,#f2f5f7) 7%,var(--hk-surface,#191f25)) 50%,var(--hk-surface,#191f25) 100%);
  background-size:200% 100%;animation:hk-m-shimmer 1.4s ease-in-out infinite;border-radius:var(--hk-m-radius)}
.hk-m-skeleton:empty{display:block;min-height:var(--hk-m-skel-h,44px);box-sizing:border-box}
.hk-m-skeleton-walls{--hk-m-skel-h:95px}
.hk-m-skeleton-card{--hk-m-skel-h:240px}
.hk-m-skeleton-map{--hk-m-skel-h:420px}
.hk-m-skeleton-line{--hk-m-skel-h:calc(2 * 1.45em)}
.hk-m-skeleton-list:empty{--hk-m-skel-h:calc(3 * var(--hk-m-target) + 2 * var(--hk-m-grid));
  background:repeating-linear-gradient(180deg,var(--hk-surface,#191f25) 0 var(--hk-m-target),transparent var(--hk-m-target) calc(var(--hk-m-target) + var(--hk-m-grid)));animation:none}
@keyframes hk-m-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.hk-m-skeleton:empty,.hk-m-skeleton-map:not([data-hk-loaded]){animation:none}}

/* customer bottom tab bar (HKMobile.tabs): HOME, MAPS, MARKETS, NEWS, plus MY TRADING on Pro.
   Same chrome as the owner TRADE / LIQ / BOTS / MORE bar (dark glass, hairline top, 44 px), but
   the labels are the text face, not monospace. The sticky action bar stacks above it. */
.hk-m-tabs{display:none}
@media (max-width:767px){
  html.hk-m-tabs-on .hk-m-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:200;box-sizing:border-box;
    min-height:calc(var(--hk-m-tabs-h) + env(safe-area-inset-bottom,0px));padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--hk-m-chrome-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hk-line,#323b43)}
  .hk-m-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:0;border-radius:var(--hk-m-radius);
    color:var(--hk-muted,#b5bec7);text-decoration:none;font:600 var(--hk-m-fs-caption)/1.15 var(--hk-font-text,system-ui,sans-serif);letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
  .hk-m-tab svg{width:22px;height:22px;flex:0 0 auto}
  .hk-m-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hk-m-tab[aria-current="page"]{color:var(--hk-m-free)}
  .hk-m-tab:focus-visible{outline:2px solid var(--hk-ink,#f2f5f7);outline-offset:-2px}
  /* !important: a page sheet may zero the body padding for its own bar (sales-design.css); the tabs must never cover content */
  html.hk-m-tabs-on body{padding-bottom:calc(var(--hk-m-tabs-h) + env(safe-area-inset-bottom,0px))!important}
  html.hk-m-tabs-on body[data-hk-action-bar]{padding-bottom:calc(var(--hk-m-tabs-h) + var(--hk-m-bar-h) + env(safe-area-inset-bottom,0px))!important;
    --hk-bar-lift:calc(var(--hk-m-tabs-h) + var(--hk-m-bar-h) + env(safe-area-inset-bottom,0px))}
  /* a signed-in visitor gets the tab bar (customer) or nothing (owner): lift floating buttons for
     the stack from the first paint, so the tabs arriving does not move them */
  html.hk-m-signed-in:not([data-hk-privacy-open="true"]) body[data-hk-action-bar]{--hk-bar-lift:calc(var(--hk-m-tabs-h) + var(--hk-m-bar-h) + env(safe-area-inset-bottom,0px))}
  html.hk-m-signed-in.hk-m-tabs-on body[data-hk-action-bar] .hk-m-bar{display:grid;bottom:calc(var(--hk-m-tabs-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:var(--hk-m-grid);box-shadow:none;border-top:1px solid var(--hk-line,#323b43)}
  html.hk-m-sheet-open .hk-m-tabs,html.hk-m-sheet-open .hk-m-bar{visibility:hidden}
}

/* type lock: inside .hk-m-screen a phone's first screen uses three sizes, title 22 (headings and
   the values on a card, .hk-m-value), body 15 and caption 13 (labels, stamps, small print). */
@media (max-width:767px){
  .hk-m-screen h1,.hk-m-screen h2,.hk-m-screen h3,.hk-m-screen h4,.hk-m-screen .hk-m-title{font-size:var(--hk-m-fs-title)!important;line-height:1.25!important;letter-spacing:-.01em}
  .hk-m-screen h1 *,.hk-m-screen h2 *,.hk-m-screen h3 *,.hk-m-screen h4 *{font-size:inherit!important}
  .hk-m-screen p,.hk-m-screen li,.hk-m-screen a,.hk-m-screen button,.hk-m-screen input,.hk-m-screen select,.hk-m-screen textarea,.hk-m-screen summary,.hk-m-screen legend{font-size:var(--hk-m-fs-body)}
  .hk-m-screen label,.hk-m-screen small,.hk-m-screen time,.hk-m-screen .hk-m-caption,.hk-m-screen [data-hk-type="caption"]{font-size:var(--hk-m-fs-caption)!important}
  .hk-m-screen .hk-m-value{font:700 var(--hk-m-fs-title)/1.2 var(--hk-m-font-num);font-variant-numeric:tabular-nums}
}