/* LOMSAI: shared tokens and the persistent action bar of the phone. Spacing comes from one 4 px scale (4/8/12/16/24/32/48/64/96) as --t-space-* tokens. */
:root{--t-space-1:4px;--t-space-2:8px;--t-space-3:12px;--t-space-4:16px;--t-space-5:24px;--t-space-6:32px;--t-space-7:48px;--t-space-8:64px;--t-space-9:96px}
.lm-dock{display:none}
@media(max-width:719px){
  body.lm{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .lm-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--lm-dock-bg,var(--graphite,#22252A));color:var(--lm-dock-fg,#fff);padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--lm-dock-line,rgba(255,255,255,.2))}
  .lm-dock a,body.th .lm-dock a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 8px;white-space:nowrap;color:var(--lm-dock-fg,#fff);text-decoration:none!important;font:500 .95rem/1.2 var(--f-body,inherit);text-align:center}
  .lm-dock a:hover,body.th .lm-dock a:hover{color:var(--lm-dock-fg,#fff);text-decoration:none}
  .lm-dock a.pri,body.th .lm-dock a.pri,body.th .lm-dock a.pri:hover{flex:2 1 0;background:var(--lm-dock-pri-bg,#fff);color:var(--lm-dock-pri-fg,var(--graphite,#22252A));font-weight:600}
  .lm-dock .ic{width:1.25em;height:1.25em}
  .lm-dock a:focus-visible{outline:3px solid var(--lm-dock-fg,#fff);outline-offset:-4px}
}
/* the original hero: its text stays inside the page margins on a phone (.hero-in reset the .wrap padding) */
.hero-in.wrap{padding-left:16px;padding-right:16px}
@media(min-width:768px){.hero-in.wrap{padding-left:28px;padding-right:28px}}
/* the live seat strip: every machine dot is a 48 px target (the dots share the row on a phone) and the footer's cookie-settings button keeps a 48 px target */
.dots{gap:0}.dots li{flex:0 0 48px;max-width:48px}
@media(max-width:480px){.strip-in{padding-inline:0}.strip-t{padding-inline:16px}.dots{width:100%}.dots li{flex:1 1 0;max-width:none}}
.ck-foot{min-height:48px;min-width:48px;padding:0 8px}
.hd-tools .tool{min-height:48px;min-width:48px}
/* status blocks keep colour + icon + words, with a full 2 px outline instead of a coloured bar on one side */
.note.ok,.note.warn,.note.fail,.note.info{border-width:2px}
/* the original header: the wordmark gets clear space above and below (the footbar still stands on the rail) */
.hd-row{padding-top:var(--t-space-3)}.brand .bt{padding-bottom:var(--t-space-3)}.brand b{font-size:1.6rem}
.card>.chip{margin:0 var(--t-space-2) var(--t-space-2) 0}
.hd nav a.nl{white-space:nowrap}
@media(min-width:1024px) and (max-width:1279px){.hd nav a.nl{padding:0 8px;font-size:.92rem}.hd .cta{padding:0 16px;white-space:nowrap}}