/* I Know · css/main.css — THE design system's base: the design tokens every page uses, typography, base elements, utilities and the
   app shell (side menu, top bar, page, bottom bar). (11.6) The colours, fonts, shapes, icons, navigation and pictures of a screen come
   from its THEME (components/theme.js: [data-theme] + [data-scheme] – light or dark), its sizes and density from its DISPLAY MODE
   (components/display-mode.js: [data-display]); the ONE Appearance Resolver (components/appearance.js) decides both. Every other style
   file uses only these tokens – no colour, font, corner or shadow of its own. */

/* ---------- Design tokens that are the same in every theme and mode ---------- */
:root{
  --paper:#FFFFFF;--media-bg:#000000;--on-media:#FFFFFF; /* documents and QR codes are paper, photos and videos sit on black – in every theme */
  -webkit-text-size-adjust:100%;
  /* type sizes (the display mode sizes the whole screen through the text size; the theme's headings their own factor) */
  --fs-page-title:1.625rem;--fs-section:1.125rem;--fs-card-title:1rem;--fs-body:.9375rem;--fs-small:.8125rem;--fs-label:.8125rem;
  --fs-helper:.75rem;--fs-th:.75rem;--fs-btn:.875rem;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --lh-tight:1.2;--lh:1.5;
  /* corners that are not the theme's own */
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
  /* motion */
  --dur-1:120ms;--dur-2:180ms;--dur-3:260ms;--ease:cubic-bezier(.2,.7,.2,1);
  /* layout */
  --side-w:252px;--rail-w:68px;--top-h:56px;--safe-b:env(safe-area-inset-bottom,0px);
}
/* derived from the theme and the display mode – again on every element that wears its own (a preview box: data-theme), so a soft
   background, a shadow or a space there follows that box's theme and mode */
html,[data-theme]{
  background:var(--bg-app);
  /* spacing: the theme's personality (airy … tight) × the display mode's density */
  --sp-1:calc(.25rem * var(--th-space,1) * var(--dm-space,1));--sp-2:calc(.5rem * var(--th-space,1) * var(--dm-space,1));
  --sp-3:calc(.75rem * var(--th-space,1) * var(--dm-space,1));--sp-4:calc(1rem * var(--th-space,1) * var(--dm-space,1));
  --sp-5:calc(1.25rem * var(--th-space,1) * var(--dm-space,1));--sp-6:calc(1.5rem * var(--th-space,1) * var(--dm-space,1));
  --sp-8:calc(2rem * var(--th-space,1) * var(--dm-space,1));--sp-10:calc(2.5rem * var(--th-space,1) * var(--dm-space,1));
  /* soft status backgrounds and readable status text (light and dark alike) */
  --success-soft:color-mix(in srgb,var(--success) 13%,var(--bg-surface));--success-text:color-mix(in srgb,var(--success) 82%,var(--text));
  --warning-soft:color-mix(in srgb,var(--warning) 14%,var(--bg-surface));--warning-text:color-mix(in srgb,var(--warning) 78%,var(--text));
  --danger-soft:color-mix(in srgb,var(--danger) 12%,var(--bg-surface));--danger-text:color-mix(in srgb,var(--danger) 85%,var(--text));
  --info-soft:color-mix(in srgb,var(--info) 12%,var(--bg-surface));--info-text:color-mix(in srgb,var(--info) 85%,var(--text));
  --neutral-soft:var(--bg-muted);--neutral-text:var(--text-2);
  --special-soft:color-mix(in srgb,var(--special) 13%,var(--bg-surface));--special-text:color-mix(in srgb,var(--special) 85%,var(--text));
  --accent-soft:color-mix(in srgb,var(--accent) 16%,var(--bg-surface));
  --primary-soft:color-mix(in srgb,var(--primary) 10%,var(--bg-surface));
  --primary-hover:color-mix(in srgb,var(--primary) 86%,var(--text));
  /* interaction */
  --hover:color-mix(in srgb,var(--text) 5%,transparent);--selected:var(--primary-soft);--focus:color-mix(in srgb,var(--primary) 55%,var(--accent));
  --disabled:.45;
  /* the programme's types */
  --t-activity:var(--success);--t-event:var(--warning);--t-show:var(--show);--t-live_music:var(--info);--t-special_event:var(--special);
  /* shadows: the theme's depth (--shadow-k: none … deep); only floating layers lift more */
  --shadow-1:0 1px 2px color-mix(in srgb,var(--shadow-ink) calc(var(--shadow-k,6%) * .8),transparent),0 4px 14px -6px color-mix(in srgb,var(--shadow-ink) var(--shadow-k,6%),transparent);
  --shadow-2:0 2px 4px -2px color-mix(in srgb,var(--shadow-ink) 8%,transparent),0 8px 20px -4px color-mix(in srgb,var(--shadow-ink) 14%,transparent);
  --shadow-3:0 24px 56px -12px color-mix(in srgb,var(--shadow-ink) 32%,transparent);
  --shadow-card:var(--shadow-1),var(--card-top,0 0 0 0 transparent);
  /* a soft tint inside the icons of the themes that have one */
  --icon-fill:color-mix(in srgb,currentColor var(--icon-tint,0%),transparent);
  /* the status chips: solid, soft or outlined (the theme's choice) – always a word and an icon, never a colour alone */
  --chip-k:var(--chip-mix,14%);
}
[dir=rtl]{--font-ui:'IBM Plex Sans Arabic',system-ui,sans-serif;--font-display:'IBM Plex Sans Arabic',system-ui,sans-serif;--font-label:var(--font-ui);--font-num:var(--font-ui)}

/* ---------- Base elements ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg-app);color:var(--text);font:var(--fw-regular) var(--fs-body)/var(--lh) var(--font-ui);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}
/* (11.6) the theme's headings: its face, weight, spacing, case and size */
h1{font:var(--fw-heading,600) calc(var(--fs-page-title) * var(--fs-head-k,1))/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-heading,0);text-transform:var(--tt-heading,none);margin:0 0 .5em;color:var(--text)}
h2{font:var(--fw-heading,600) calc(var(--fs-section) * var(--fs-head-k,1))/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-heading,0);text-transform:var(--tt-heading,none);margin:0 0 .5em;color:var(--text)}
h3{font:var(--fw-heading,600) calc(var(--fs-card-title) * var(--fs-head-k,1))/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-heading,0);text-transform:var(--tt-heading,none);margin:0 0 .5em;color:var(--text)}
section{margin:var(--sp-6) 0}
input,select{font:inherit;color:var(--text);background:var(--bg-input);border:solid var(--border-strong);border-width:var(--input-bw,1px);border-radius:var(--r-ctl);min-height:var(--control-h);padding:.45rem .7rem;width:100%;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
textarea{font:inherit;color:var(--text);background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--r-ctl);min-height:5.5rem;line-height:var(--lh);padding:.45rem .7rem;width:100%;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;min-height:0;padding:0;accent-color:var(--primary)}
input[type=color]{width:3rem;height:var(--control-h);padding:.2rem}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--primary)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--border-strong) 60%,var(--text))}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);outline:none}
input:disabled,select:disabled,textarea:disabled{opacity:var(--disabled);cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
code{background:var(--bg-muted);padding:.1rem .35rem;border-radius:var(--r-xs);font-size:.85em;word-break:break-all}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-4) 0}
::selection{background:color-mix(in srgb,var(--primary) 22%,transparent)}
/* a change of hotel or theme: the colours change softly (components/appearance.js) */
.theme-fade,.theme-fade *{transition:background-color var(--dur-3) var(--ease),color var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease)!important}
[hidden]{display:none!important} /* a hidden bar or field stays hidden, whatever its own display */
/* phones: a field of 16 px or more is never zoomed into */
@media (pointer:coarse){
  input,select,textarea{font-size:max(16px,var(--fs-body))}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Typography: the roles ---------- */
.t-card{font:var(--fw-semibold) var(--fs-card-title)/var(--lh-tight) var(--font-ui)}
.t-label{font:var(--fw-medium) var(--fs-label)/1.3 var(--font-label);color:var(--text-2);text-transform:var(--label-tt,none);letter-spacing:var(--label-ls,0)}
.t-helper{font-size:var(--fs-helper);color:var(--text-muted)}
.t-kpi{font:var(--fw-semibold) var(--fs-kpi)/1.1 var(--font-num);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.num,time,.tnum{font-variant-numeric:tabular-nums}

/* ---------- Utilities ---------- */
.muted{color:var(--text-muted)}
.small,small{font-size:var(--fs-small)}
.center{text-align:center}
.grow{flex:1;min-width:0}
.bad-t{color:var(--danger-text)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-3rem;inset-inline-start:var(--sp-3);z-index:80;padding:.5rem .9rem;border-radius:var(--r-ctl);background:var(--secondary);color:var(--on-secondary);text-decoration:none;font-weight:var(--fw-semibold)}
.skip:focus{top:var(--sp-3)}

/* ---------- The app shell ----------
   Desktop: the side menu (full or a rail of icons), the top bar over the page. Tablet: the rail. Phone: the top bar and the bottom bar. */
.shell{display:flex;min-height:100vh}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
/* the top bar – and the same bar in the manager's live preview (pages/appearance.js .pv-top) */
#top,.pv-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-2);min-height:var(--top-h);padding:.4rem var(--sp-4);padding-top:calc(.4rem + env(safe-area-inset-top,0px));background:var(--bg-header);color:var(--on-header);border-bottom:1px solid var(--header-border,var(--border))}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0;color:inherit}
.brand img{height:32px;width:auto;max-width:96px;object-fit:contain;flex:none}
/* I KNOW platform fallback icon: use the original square artwork, not a generated letter. */
.brand img.ik-brand-icon{width:36px;height:36px;max-width:36px;object-fit:cover;border-radius:9px;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.brand .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font:var(--fw-semibold) 1rem/1 var(--font-display);flex:none}
.brand span{display:flex;flex-direction:column;min-width:0}
.brand b{font:var(--fw-semibold) 1rem/1.15 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{color:color-mix(in srgb,var(--on-header) 68%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-helper)}
#top .brand{flex:1}
.top-r{display:flex;gap:var(--sp-1);align-items:center;margin-inline-start:auto}
/* the hotel / team switch: in the top bar (its own line on a phone) */
.ctx-sw{display:flex;gap:var(--sp-2);align-items:center;min-width:0;flex:0 1 auto}
.ctx-sw.static label{border-color:transparent;background:none;padding-inline-start:0}
.ctx-sw label{display:flex;align-items:center;gap:.35rem;min-width:0;border:1px solid var(--border);border-radius:var(--r-ctl);padding:0 .1rem 0 .55rem;background:var(--bg-surface);color:var(--text-2)}
.ctx-sw label .ico{color:var(--text-muted);width:1.1em;height:1.1em}
.ctx-sw select{border:0;background:transparent;min-height:calc(var(--control-h) - 6px);padding:.2rem .4rem;width:auto;max-width:13rem;font-weight:var(--fw-medium);box-shadow:none}
.ctx-sw .ctx-txt{font-weight:var(--fw-medium);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-search{display:none;align-items:center;gap:.5rem;min-width:12rem;max-width:22rem;flex:1 1 14rem;height:var(--control-h-sm);padding:0 .65rem;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg-muted);color:var(--text-muted);cursor:pointer;font-size:var(--fs-small);text-align:start}
.top-search span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-search kbd,.kbd{font:inherit;font-size:var(--fs-helper);border:1px solid var(--border);border-radius:var(--r-xs);padding:0 .3rem;background:var(--bg-surface)}
/* (11.6) a theme may paint its header dark (Aqua, Emerald, Midnight): everything in it takes the header's own ink */
#top .icon-btn,.pv-top .icon-btn{color:var(--on-header)}
#top .icon-btn:hover{background:color-mix(in srgb,var(--on-header) 12%,transparent);color:var(--on-header)}
#top .ctx-sw.static .ctx-txt,#top .ctx-sw.static label .ico{color:var(--on-header)}
#top .top-search{background:color-mix(in srgb,var(--on-header) 8%,var(--bg-header));border-color:color-mix(in srgb,var(--on-header) 22%,transparent);color:color-mix(in srgb,var(--on-header) 72%,transparent)}
#top .top-search kbd{background:transparent;border-color:color-mix(in srgb,var(--on-header) 30%,transparent)}
.preview-bar{background:var(--warning-soft);color:var(--warning-text);padding:.45rem var(--sp-4);display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;font-weight:var(--fw-medium);border-bottom:1px solid color-mix(in srgb,var(--warning) 30%,transparent)}
.closed-bar{background:var(--neutral-soft);color:var(--text);border-bottom:1px solid var(--border);padding:.45rem var(--sp-4);display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-small)}
.closed-bar>.ico{color:var(--text-2);flex:none}
#view{flex:1;min-width:0;padding:var(--sp-4) var(--sp-4) calc(5.5rem + var(--safe-b))}
.page{max-width:var(--content-max);margin:0 auto}
.page.narrow-page{max-width:var(--content-narrow)}

/* the side menu */
#side{display:none;flex:none;width:var(--side-w);height:100vh;position:sticky;top:0;flex-direction:column;background:var(--bg-nav);color:var(--on-nav);border-inline-end:1px solid color-mix(in srgb,var(--on-nav) 10%,var(--bg-nav))}
.side-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) var(--sp-3);min-height:var(--top-h)}
.side-head .brand small{color:color-mix(in srgb,var(--on-nav) 65%,transparent)}
.side-scroll{flex:1;overflow:auto;padding:0 var(--sp-3) var(--sp-3);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--on-nav) 25%,transparent) transparent}
.side-grp{margin:var(--sp-3) 0 0}
.side-grp h3{font:var(--fw-medium) var(--fs-helper)/1.2 var(--font-ui);color:color-mix(in srgb,var(--on-nav) 58%,transparent);margin:0 0 var(--sp-1);padding:var(--sp-1) var(--sp-2)}
.side-link{display:flex;align-items:center;gap:.7rem;min-height:36px;padding:.35rem .6rem;border-radius:var(--r-md);text-decoration:none;color:color-mix(in srgb,var(--on-nav) 88%,transparent);font-size:var(--fs-small);font-weight:var(--fw-medium);position:relative}
.side-link .ico{width:1.15rem;height:1.15rem;opacity:.85}
.side-link .ava{flex:none}
.side-link span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link:hover{background:color-mix(in srgb,var(--on-nav) 8%,transparent);color:var(--on-nav)}
.side-link.on{background:color-mix(in srgb,var(--on-nav) 13%,transparent);color:var(--on-nav);border-radius:var(--nav-r,var(--r-md))}
.side-link.on::before{content:"";position:absolute;inset-inline-start:-.75rem;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-link .badge{margin-inline-start:auto}
.side-foot{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) var(--sp-3);border-top:1px solid color-mix(in srgb,var(--on-nav) 10%,transparent)}
.side-foot .side-link{flex:1}
.side-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);border:0;background:transparent;color:color-mix(in srgb,var(--on-nav) 80%,transparent);cursor:pointer;flex:none}
.side-btn:hover{background:color-mix(in srgb,var(--on-nav) 8%,transparent);color:var(--on-nav)}
/* the rail: icons only (tablets, or chosen on a desktop) */
.rail #side{width:var(--rail-w)}
.rail .side-head .brand span:not(.mark),.rail .side-grp h3,.rail .side-link span,.rail .side-link .badge{display:none}
.rail .side-head{justify-content:center;padding-inline:0}
.rail .side-scroll{padding-inline:var(--sp-2)}
.rail .side-link{justify-content:center;padding:.5rem}
.rail .side-link.on::before{inset-inline-start:-.5rem}
.rail .side-grp{border-top:1px solid color-mix(in srgb,var(--on-nav) 10%,transparent);padding-top:var(--sp-2)}
.rail .side-grp:first-child{border-top:0}
.rail .side-foot{flex-direction:column}

/* the bottom bar (phones; guests on every screen) */
/* (11.6) the bottom bar wears the theme's navigation: a soft or solid pill, a line on top, a dot – its size is the display mode's */
/* the bottom bar – and the same bar in the live preview (.pv-tabbar) */
#tabbar,.pv-tabbar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;gap:2px;padding:4px 4px var(--safe-b);background:var(--tabbar-bg);border-top:1px solid var(--tabbar-border)}
#tabbar a,.pv-tabbar>span{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--tabbar-fg);position:relative;flex:1 1 0;min-width:0;min-height:calc(var(--tabbar-h) - 8px);padding:.35rem 0;border-radius:var(--nav-r,10px)}
#tabbar a span,.pv-tabbar>span>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(.8rem,3.2vw);font-weight:var(--fw-medium);line-height:1.2}
#tabbar a .ico,.pv-tabbar>span>.ico{width:var(--tabbar-ico);height:var(--tabbar-ico)}
#tabbar a.on,.pv-tabbar>span.on{color:var(--tabbar-on);background:var(--nav-on-bg)}
#tabbar a.on span,.pv-tabbar>span.on span{font-weight:var(--fw-bold)}
#tabbar a.on::before,.pv-tabbar>span.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--nav-ind-w);height:var(--nav-ind-h);border-radius:3px;background:var(--nav-ind-bg)}
#tabbar .badge{position:absolute;top:.3rem;inset-inline-start:calc(50% + .35rem)}

/* the whole menu (phone: "More"): the same groups as the side menu */
.menu-all section{margin:0 0 var(--sp-5)}
.menu-all h3{font:var(--fw-medium) var(--fs-small)/1.2 var(--font-ui);color:var(--text-muted);margin:0 0 var(--sp-2)}
.menu-all .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.menu-all a{display:flex;align-items:center;gap:.7rem;min-height:52px;padding:.6rem .85rem;text-decoration:none;color:var(--text);font-weight:var(--fw-medium);background:var(--bg-surface)}
.menu-all a:hover{background:var(--bg-muted)}
.menu-all a.on{color:var(--primary)}
.mi{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);flex:none}
.mi .ico{width:1.15rem;height:1.15rem}

#offline{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--warning);color:var(--text-inverse);text-align:center;padding:.35rem var(--sp-4);padding-top:calc(.35rem + env(safe-area-inset-top,0px));font-size:var(--fs-small);font-weight:var(--fw-medium)}

/* tablets and desktops: the side menu replaces the bottom bar (the rail on tablets or when chosen: body.rail, set by the menu) */
@media (min-width:768px){
  #side:not(:empty){display:flex}  /* (11.3) only a side menu with something in it: the guest app and the sign-in pages keep no empty column */
  body:has(#side:not(:empty)) #tabbar{display:none}
  body:has(#side:not(:empty)) #view{padding:var(--sp-6) var(--sp-6) var(--sp-8)}
  body:has(#side:not(:empty)) #top .brand{display:none}
}
/* (11.3) THE GUEST APP ON A BIGGER SCREEN. Tablet: the bottom bar's five sections sit together in the middle (not spread over the
   whole width). Computer: the five sections are in the top bar (icon + word, the open one underlined), the bottom bar goes, and the top
   bar's ends line up with the page, which is centred. */
.g-topnav{display:none}
@media (min-width:600px){
  html[data-app=guest] #tabbar{justify-content:center}
  html[data-app=guest] #tabbar a{flex:0 1 9rem}
}
@media (min-width:1024px){
  html[data-app=guest] #tabbar{display:none}
  html[data-app=guest] #view{padding:var(--sp-6) var(--sp-6) var(--sp-8)}
  html[data-app=guest] #top{padding-inline:max(var(--sp-6),calc(50% - var(--content-max) / 2));gap:var(--sp-4)}
  html[data-app=guest] #top .brand{flex:0 1 auto}
  .g-topnav{display:flex;flex:1 1 auto;justify-content:center;align-self:stretch;gap:var(--sp-1);min-width:0}
  .g-topnav a{display:flex;align-items:center;gap:.5rem;padding:0 .85rem;position:relative;text-decoration:none;color:color-mix(in srgb,var(--on-header) 78%,transparent);font-weight:var(--fw-medium);white-space:nowrap;border-radius:var(--r-md) var(--r-md) 0 0}
  .g-topnav a .ico{width:1.3rem;height:1.3rem;flex:none}
  .g-topnav a:hover{color:var(--on-header);background:color-mix(in srgb,var(--on-header) 8%,transparent)}
  .g-topnav a.on{color:var(--on-header)}
  .g-topnav a.on::after{content:"";position:absolute;inset-inline:.85rem;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--nav-ind-bg)}
  /* a wide screen: the search box in the top bar (else its icon) */
  .top-search{display:flex}
  .top-search-ic{display:none}
}

@media (max-width:767px){
  #top{flex-wrap:wrap;row-gap:.35rem}
  #top .ctx-sw{order:3;flex-basis:100%;padding-bottom:.1rem}
  #top .ctx-sw label{flex:1 1 0}
  #top .ctx-sw select{width:100%;max-width:none;min-width:0;text-overflow:ellipsis}
  :root{--fs-page-title:1.375rem}
}