/* Canton Fair Desk: design system.
   Layout concept: Samsung One UI "big title, reachable controls" + Apple HIG grouped lists, sheets and translucent bars.
   Mobile: stacked pages + bottom tab bar. >= 900px: left rail + wider pages + side panel for sheets. */
:root{
  --bg:#F1F2F6; --surface:#FFFFFF; --surface2:#F6F7FA; --surface3:#E8EAF0;
  --fg:#0C0E13; --fg2:#3A4050; --muted:#5F6779; --hair:rgba(12,14,19,.09); --hair2:rgba(12,14,19,.17);
  --accent:#0A52DB; --accent-fg:#FFFFFF; --accent-soft:rgba(10,82,219,.10); --accent-line:rgba(10,82,219,.28);
  --p1:#1D6FE8; --p2:#D97F00; --p3:#0B9A6A;
  --p1-soft:rgba(29,111,232,.12); --p2-soft:rgba(217,127,0,.13); --p3-soft:rgba(11,154,106,.12);
  --good:#0F8F5F; --warn:#B87200; --bad:#C42B25;
  --ai:linear-gradient(135deg,#0A52DB 0%,#00779F 100%); --ai-fg:#FFFFFF; --tl:24%;
  --p1t:color-mix(in srgb,var(--p1) 56%,var(--fg)); --p2t:color-mix(in srgb,var(--p2) 56%,var(--fg)); --p3t:color-mix(in srgb,var(--p3) 56%,var(--fg));
  --shadow:0 1px 2px rgba(12,14,19,.05),0 10px 28px rgba(12,14,19,.07);
  --shadow-up:0 -10px 40px rgba(12,14,19,.16);
  --bar:rgba(246,247,250,.82); --scrim:rgba(8,10,14,.42);
  --r-card:24px; --r-row:18px; --r-sm:12px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI",Roboto,"Noto Sans","PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.9,.24,1);
  --dur-1:120ms; --dur-2:220ms; --dur-3:340ms; --press:rgba(12,14,19,.06); --edge:#7F8697; --toast-act:#9CC0FF; --seg-track:var(--surface3); --seg-on:var(--surface); --seg-text:var(--accent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#14161B; --surface2:#1B1E25; --surface3:#262A33;
  --fg:#F3F5F9; --fg2:#C9CEDA; --muted:#8E97AA; --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.18);
  --accent:#5090FF; --accent-fg:#06122B; --accent-soft:rgba(77,141,255,.16); --accent-line:rgba(77,141,255,.36);
  --p1:#5B9BFF; --p2:#FFB04A; --p3:#37D6A0;
  --p1-soft:rgba(91,155,255,.17); --p2-soft:rgba(255,176,74,.16); --p3-soft:rgba(55,214,160,.15);
  --good:#37D6A0; --warn:#FFB04A; --bad:#FF6B63;
  --ai:linear-gradient(135deg,#4D8DFF 0%,#2EC8EE 100%); --ai-fg:#06122B; --tl:72%;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.45);
  --shadow-up:0 -10px 40px rgba(0,0,0,.6);
  --bar:rgba(20,22,27,.78); --scrim:rgba(0,0,0,.6); --press:rgba(255,255,255,.07); --edge:#6B7387; --toast-act:#0A52DB; --seg-track:var(--surface2); --seg-on:var(--surface3); --seg-text:#7FAEFF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#14161B; --surface2:#1B1E25; --surface3:#262A33;
  --fg:#F3F5F9; --fg2:#C9CEDA; --muted:#8E97AA; --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.18);
  --accent:#5090FF; --accent-fg:#06122B; --accent-soft:rgba(77,141,255,.16); --accent-line:rgba(77,141,255,.36);
  --p1:#5B9BFF; --p2:#FFB04A; --p3:#37D6A0;
  --p1-soft:rgba(91,155,255,.17); --p2-soft:rgba(255,176,74,.16); --p3-soft:rgba(55,214,160,.15);
  --good:#37D6A0; --warn:#FFB04A; --bad:#FF6B63;
  --ai:linear-gradient(135deg,#4D8DFF 0%,#2EC8EE 100%); --ai-fg:#06122B; --tl:72%;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.45);
  --shadow-up:0 -10px 40px rgba(0,0,0,.6);
  --bar:rgba(20,22,27,.78); --scrim:rgba(0,0,0,.6); --press:rgba(255,255,255,.07); --edge:#6B7387; --toast-act:#0A52DB; --seg-track:var(--surface2); --seg-on:var(--surface3); --seg-text:#7FAEFF; color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.42 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.cn{font-family:var(--font)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* ---------- shell ---------- */
#app{height:100%;display:flex;flex-direction:column;max-width:100vw}
.stage{position:relative;flex:1;min-height:0;overflow:hidden}
.page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.page.enter{animation:pgIn var(--dur-3) var(--ease) both;will-change:transform,opacity}
.page.leave{animation:pgOut var(--dur-2) var(--ease) both;pointer-events:none;will-change:transform,opacity}
.page.fade-in{animation:fdIn var(--dur-2) ease both}
@keyframes pgIn{from{transform:translateX(34%);opacity:.0}to{transform:none;opacity:1}}
@keyframes pgOut{from{transform:none;opacity:1}to{transform:translateX(34%);opacity:0}}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.navbar{flex:none;display:flex;align-items:center;gap:8px;min-height:calc(52px + var(--sat));padding:var(--sat) 14px 0;position:relative;z-index:3;background:transparent;transition:background var(--dur-2),box-shadow var(--dur-2)}
.navbar.solid{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--hair2)}
.navbar__title{position:absolute;left:0;right:0;text-align:center;font-weight:650;font-size:16.5px;opacity:0;transition:opacity var(--dur-1);pointer-events:none;padding:var(--sat) 120px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar.solid .navbar__title{opacity:1}
.navbar__sp{flex:1}
.nbtn{height:44px;min-width:44px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:15px;color:var(--accent);position:relative;z-index:1}
.nbtn:active{background:var(--accent-soft)}
.nbtn.ico{background:var(--surface);box-shadow:var(--shadow);color:var(--fg);padding:0}
.scroller{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:auto;padding-bottom:calc(24px + var(--sab))}
.scroller::-webkit-scrollbar{width:0}
.wrap{padding:0 16px;margin:0 auto;max-width:760px;width:100%}
.largetitle{padding:2px 16px 10px;margin:0 auto;max-width:760px;width:100%}
.largetitle h1{margin:0;font-size:34px;line-height:1.08;font-weight:760;letter-spacing:-.028em;text-wrap:balance}
.largetitle p{margin:6px 0 0;color:var(--muted);font-size:15px}
.tabbar{flex:none;display:flex;justify-content:space-around;align-items:flex-start;padding:7px 6px calc(7px + var(--sab));background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);box-shadow:0 -.5px 0 var(--hair2);position:relative;z-index:6}
.tab{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.01em;border-radius:14px;position:relative}
.tab svg{width:25px;height:25px}
.tab[aria-current="page"]{color:var(--accent)}
.tab .dot{position:absolute;top:1px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font-size:11px;line-height:17px;text-align:center;padding:0 4px;font-weight:700}
.tab--ai[aria-current="page"] svg{color:var(--accent)}
@media (min-width:900px){
  #app{flex-direction:row-reverse}
  .tabbar{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;width:92px;padding:calc(18px + var(--sat)) 8px 18px;box-shadow:.5px 0 0 var(--hair2)}
  .tab{max-width:none;flex:none;padding:10px 0}
  .stage{border-right:0}
  .largetitle h1{font-size:40px}
  .wrap,.largetitle{max-width:880px}
}

/* ---------- surfaces & lists ---------- */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.card.pad{padding:16px}
.group{background:var(--surface);border-radius:var(--r-row);overflow:hidden;box-shadow:0 0 0 .5px var(--hair)}
.group>*+*{box-shadow:inset 0 .5px 0 var(--hair2)}
.section{margin:22px 0 0}
.section__h{display:flex;align-items:baseline;justify-content:space-between;margin:26px 4px 8px}
.section__h h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.section__h button{color:var(--accent);font-weight:600;font-size:14px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;width:100%;text-align:left;position:relative;background:var(--surface)}
button.row:active,a.row:active{background:var(--surface2)}
.row__ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.row__ic svg{width:19px;height:19px}
.row__main{flex:1;min-width:0}
.row__t{font-weight:600;font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row__s{color:var(--muted);font-size:13.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__v{color:var(--muted);font-size:15px;flex:none}
.row__chev{flex:none;width:16px;height:16px;color:var(--hair2);stroke:var(--muted)}

/* stall row */
.stall{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 11px;background:var(--surface);width:100%;text-align:left;position:relative;min-height:76px}
.thumb{flex:none;border-radius:14px;background-color:var(--surface3);background-repeat:no-repeat;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .5px var(--hair2)}
.thumb--ph{display:grid;place-items:center;font-weight:700;color:var(--fg2);letter-spacing:-.02em}
.thumb--img>img{opacity:0;transition:opacity .2s ease-out}
.thumb--img>img.in{opacity:1}
.thumb--img{box-shadow:none}
.thumb--img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--hair2);pointer-events:none}
.phase-mos .thumb--img::after{box-shadow:none}
@media (prefers-reduced-motion:reduce){.thumb--img>img{transition:none}}
.stall__main{flex:1;min-width:0}
.stall__c{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.stall__m{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap;min-width:0}
.booth{font-family:var(--mono);font-size:12.5px;font-weight:600;padding:2.5px 7px;border-radius:7px;background:var(--surface3);color:var(--fg);white-space:nowrap;letter-spacing:-.01em}
.booth[data-p="1"]{background:var(--p1-soft);color:var(--p1t)}
.booth[data-p="2"]{background:var(--p2-soft);color:var(--p2t)}
.booth[data-p="3"]{background:var(--p3-soft);color:var(--p3t)}
.save{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.save svg{width:22px;height:22px}
.save[aria-pressed="true"]{color:var(--accent)}
.save[aria-pressed="true"] svg{fill:currentColor}
.save:active{background:var(--accent-soft)}

/* ---------- controls ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:650;background:var(--surface3);color:var(--fg2);white-space:nowrap}
.pill[data-p="1"]{background:var(--p1-soft);color:var(--p1t)} .pill[data-p="2"]{background:var(--p2-soft);color:var(--p2t)} .pill[data-p="3"]{background:var(--p3-soft);color:var(--p3t)}
.pill.sm{height:22px;padding:0 8px;font-size:11.5px}
.pill svg{width:14px;height:14px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 16px;margin:-4px -16px -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;position:relative;height:36px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 .5px var(--hair2);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--fg2);white-space:nowrap}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);box-shadow:none}
.chip small{font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"] small,.chip[aria-selected="true"] small{color:inherit;opacity:.92}
.seg{display:flex;background:var(--seg-track);border-radius:12px;padding:3px;gap:2px;position:relative}
.seg button{flex:1;height:34px;border-radius:9px;font-weight:620;font-size:14px;color:var(--fg2);position:relative;z-index:1;white-space:nowrap;padding:0 8px}
.seg button::before{content:"";position:absolute;inset:-6px -2px}
.seg button[aria-selected="true"]{background:var(--seg-on);box-shadow:0 1px 3px rgba(0,0,0,.14),inset 0 0 0 2px var(--accent);color:var(--seg-text);font-weight:700}
.btn{position:relative;height:48px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:680;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{filter:brightness(.92);transform:scale(.985)}
.btn.sec{background:var(--accent-soft);color:var(--accent)}
.btn.ghost{background:var(--surface3);color:var(--fg)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn.block{width:100%}
.btn svg{width:19px;height:19px}
.btn[disabled]{background:var(--surface3);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair2);opacity:1;filter:none;transform:none;pointer-events:none}
.field{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:14px;background:var(--surface3);color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge)}
.field svg{flex:none;width:20px;height:20px}
.field input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--fg)}
.field input::placeholder{color:var(--muted)}
.field:focus-within{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 2.5px var(--accent)}
.searchpill{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 14px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);width:100%;color:var(--muted);text-align:left;font-size:16px}
.searchpill svg{width:21px;height:21px;flex:none}
.searchpill span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aibtn{flex:none;height:34px;padding:0 12px 0 10px;border-radius:999px;background:var(--ai);color:var(--ai-fg);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:5px}
.aibtn svg{width:16px;height:16px}
.aitag{background:var(--ai);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:750}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--surface3);color:var(--fg2);white-space:nowrap}
.badge.gold{background:var(--p2-soft);color:var(--p2t)}
.badge.blue{background:var(--accent-soft);color:var(--accent)}
.badge.green{background:var(--p3-soft);color:var(--p3t)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 28px;color:var(--muted)}
.empty>svg{width:44px;height:44px;opacity:.5;margin-bottom:6px}   /* only the illustration glyph, not the icon inside the action button */
.empty b{color:var(--fg);font-size:18px}
.skel{background:linear-gradient(90deg,var(--surface3) 0%,var(--surface2) 50%,var(--surface3) 100%);background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:10px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:560}
hr.hair{border:0;height:.5px;background:var(--hair2);margin:0}

/* ---------- sheets / toast ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;animation:fdIn var(--dur-2) ease both}
.scrim.out{animation:fdOut var(--dur-2) ease both}
@keyframes fdOut{to{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:var(--kb,0px);max-height:min(92dvh,calc(var(--vvh,100dvh) - 12px));height:auto;z-index:41;background:var(--bg);border-radius:28px 28px 0 0;box-shadow:var(--shadow-up);display:flex;flex-direction:column;animation:shUp var(--dur-3) var(--ease) both;margin:0 auto;max-width:760px;overscroll-behavior:contain}
.sheet.full{height:92dvh}
.sheet.out{animation:shDown var(--dur-2) var(--ease) both}
@keyframes shUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes shDown{to{transform:translateY(100%)}}
.sheet__grab{flex:none;padding:9px 0 4px;touch-action:none;cursor:grab}
.sheet__grab i{display:block;width:38px;height:5px;border-radius:3px;background:var(--hair2);margin:0 auto}
.sheet__head{flex:none;display:flex;align-items:center;gap:8px;padding:2px 16px 8px;touch-action:none}
.sheet__head h3{flex:1;margin:0;font-size:18px;font-weight:720;letter-spacing:-.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet__body{flex:1;min-height:0;overflow-y:auto;padding:4px 16px calc(24px + var(--sab));-webkit-overflow-scrolling:touch}
@media (min-width:900px){
  .sheet{left:auto;right:12px;top:12px;bottom:12px;width:480px;max-width:480px;max-height:none;height:auto;border-radius:28px;animation:shIn var(--dur-3) var(--ease) both}
  .sheet.full{height:auto}
  .sheet.out{animation:shOut var(--dur-2) var(--ease) both}
  @keyframes shIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
  @keyframes shOut{to{transform:translateX(40px);opacity:0}}
  .sheet__grab{display:none}
}
.toast{width:max-content;position:fixed;left:50%;bottom:calc(86px + var(--sab));transform:translateX(-50%);z-index:60;background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:620;font-size:14.5px;box-shadow:var(--shadow);max-width:calc(100vw - 32px);animation:toastIn var(--dur-3) var(--ease) both;display:flex;gap:8px;align-items:center}
.toast.out{animation:fdOut var(--dur-2) ease both}
@keyframes toastIn{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ---------- splash / boot ---------- */
.splash{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.splash h1{margin:0;font-size:30px;font-weight:780;letter-spacing:-.03em}
.splash p{margin:0;color:var(--muted)}
.bar{width:min(260px,70vw);height:6px;border-radius:3px;background:var(--surface3);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ai);border-radius:3px;transition:width var(--dur-2)}
.logo{width:76px;height:76px;border-radius:22px;background:var(--ai);display:grid;place-items:center;color:#fff;box-shadow:0 14px 34px rgba(11,95,255,.34)}
.logo svg{width:40px;height:40px}



/* ================= FIX-B: shell, accessibility and motion (additions and overrides of the rules above; tokens live in :root) ================= */

/* icons: every CF.icon() glyph (and any 24-grid svg without width/height) has a size even when no component rule sets one */
:where(svg.ic,svg[viewBox="0 0 24 24"]:not([width]):not([height])){width:1.25em;height:1.25em;flex:none}
.ic--bold{stroke-width:2.4}
.nbtn svg{width:22px;height:22px}
.toast svg{width:18px;height:18px}
.searchpill .aibtn{flex:none}   /* the generic .searchpill span{flex:1} stretched the AI badge across the pill */

/* focus: programmatic focus on a heading or page root shows nothing; rows inside clipped groups get an inset ring */
h1[tabindex="-1"]:focus,.page[tabindex="-1"]:focus,.stage:focus{outline:none}
.group :focus-visible{outline-offset:-3px}

/* stall row: container + one primary button stretched over the row + a sibling save button (nothing nested) */
.stall__n{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-weight:620;font-size:15.5px;line-height:1.25}
.stall__open{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;min-width:0;text-align:left;font:inherit;color:inherit;background:none;padding:0;cursor:pointer}
.stall__open::after{content:"";position:absolute;inset:0}
.stall__open:focus-visible{outline:none}
.stall__open:focus-visible::after{outline:2.5px solid var(--accent);outline-offset:-3px;border-radius:var(--r-sm)}
.stall__open:active::after{background:var(--press)}
.stall .save{position:relative;z-index:1}
.booth[data-pl]::before{content:attr(data-pl) " ";font-weight:700;font-size:.85em;opacity:.8}

/* target size: the hit area reaches 44 px without making the control look bigger */
.chip::before{content:"";position:absolute;inset:-4px -2px}
.btn.sm::before{content:"";position:absolute;inset:-4px 0}
.section__h button{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:12px 4px;margin:-12px -4px}
.sheet__head button:not(.nbtn):not(.btn){min-width:44px;min-height:44px}

/* press and selection feedback (direct manipulation); durations from the tokens */
.btn,.save,.chip,.nbtn,.seg button{transition:transform var(--dur-1) var(--ease),background-color var(--dur-1),color var(--dur-1),filter var(--dur-1)}
.save svg{transition:transform var(--dur-2) var(--ease)}
.save[aria-pressed="true"] svg{transform:scale(1.1)}

/* sheets: scroll lock, tall variant (85 vh) that follows the on-screen keyboard (--kb, --vvh are set from visualViewport) */
html.cf-lock,html.cf-lock body{overflow:hidden}
.scrim{touch-action:none}
.sheet.tall{height:calc(var(--vvh,100dvh)*.85);max-height:calc(var(--vvh,100dvh) - 12px)}
@media (min-width:900px){.sheet.tall{height:auto;max-height:none;bottom:12px}}

/* toast: one persistent live-region host; a toast may carry an action (Undo); docked by ui.js above the topmost sheet */
.toasts{position:fixed;left:0;right:0;bottom:0;height:0;z-index:60;pointer-events:none}
.toast{pointer-events:auto}
.toast__t{min-width:0}
.toast__act{position:relative;min-height:44px;margin:-8px -12px -8px 4px;padding:0 14px;border-radius:999px;color:var(--toast-act);font-weight:700;font-size:14.5px}
.toast__act:focus-visible{outline-color:var(--toast-act);outline-offset:-3px}

/* scrolling: a focused control is never left under a sticky bar */
.scroller{scroll-padding-bottom:96px}

/* Chinese and Devanagari text (lang is set by CF.el / CF.cn) */
.cn{line-break:strict;text-wrap:pretty}
.cn:lang(zh),:lang(zh) .cn{line-height:1.5}
:lang(hi){line-height:1.6;font-family:"Kohinoor Devanagari","Noto Sans Devanagari","Nirmala UI",var(--font)}

/* very narrow viewports (200% zoom on a phone): give the text the width */
@media (max-width:260px){
  .stall>.thumb{display:none}
  .stall__open{display:inline;-webkit-line-clamp:unset}
  .stall__c,.row__s{white-space:normal}
  .row__t{-webkit-line-clamp:unset}
}

/* pointer devices only: hover feedback (none on touch) */
@media (hover:hover) and (pointer:fine){
  button.row:hover,a.row:hover{background:var(--surface2)}
  .stall__open:hover::after{background:var(--press)}
  .chip:not([aria-pressed="true"]):not([aria-selected="true"]):hover{background:var(--surface2)}
  .nbtn:hover{background:var(--accent-soft)}
  .nbtn.ico:hover{background:var(--surface2)}
  .tab:not([aria-current="page"]):hover{color:var(--fg)}
  .save:hover{background:var(--accent-soft)}
  .btn:hover{filter:brightness(.96)}
  .seg button:not([aria-selected="true"]):hover{color:var(--fg)}
}

/* user preferences: more contrast, less transparency, forced colours */
@media (prefers-contrast:more){:root{--muted:#434A5A;--fg2:#262B38;--hair:rgba(12,14,19,.3);--hair2:rgba(12,14,19,.55);--edge:#434A5A}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#B9C1D2;--fg2:#E2E6EF;--hair:rgba(255,255,255,.3);--hair2:rgba(255,255,255,.55);--edge:#B9C1D2}}
@media (prefers-contrast:more){:root[data-theme="dark"]{--muted:#B9C1D2;--fg2:#E2E6EF;--hair:rgba(255,255,255,.3);--hair2:rgba(255,255,255,.55);--edge:#B9C1D2}}
@media (prefers-reduced-transparency:reduce){.navbar.solid,.tabbar{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){
  :focus-visible{outline:2px solid Highlight}
  .chip[aria-pressed="true"],.seg button[aria-selected="true"],.save[aria-pressed="true"],.tab[aria-current="page"]{outline:2px solid Highlight}
}

/* motion: ONE global rule (page transitions, sheets, toasts, skeletons and every view stylesheet); JS timers read the same tokens through CF.motion.ms() */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important;scroll-behavior:auto!important}   /* transition:none, not .01ms: a view that sets a size and reads layout in the same tick (the hall map) must see the final value at once (W2-D3) */
  .skel{animation:none!important}
  :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms}
}