/* BrandScan public app. One full-screen app; layout follows its width with container queries.
   One live shader sits behind every screen; glass floats over it. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/figtree-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/figtree-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/figtree-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/caveat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/caveat-latin-700-normal.woff2) format('woff2'); }
:root {
  --bg: #0B0B0D;
  --stage: #050507;
  --card: #17171B;
  --ink: #F5F5F7;
  --soft: #C9C9D1;
  --muted: #9A9AA3;
  --line: rgba(255,255,255,0.12);
  --glass: rgba(34,34,40,0.55);
  --glass-line: rgba(255,255,255,0.16);
  --yellow: #FFD60A;
  --link: #7DB8FF;
  --good: #7EE2A0;
  --font: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.32,.5,1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* the page itself never scrolls: with the keyboard open iOS scrolled the whole page up by its height, and after a
   category it stayed scrolled, pushing home's wordmark off the top. Fixed in place, iOS can only pan the view
   while typing, and that springs back when the keyboard closes */
html, body { position: fixed; inset: 0; width: 100%; }
body { background: var(--stage); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }


#app { position: relative; width: 100%; height: 100%; --rad: 0px; border-radius: var(--rad); overflow: hidden; background: var(--bg); isolation: isolate; }
/* Safari doesn't always clip moving or scrolling layers to the rounded corners, so each full-screen layer is clipped to the device shape too (the device edge itself stays outside the clip) */
#amb, #ambcss, .appgrain, .view, .zlayer, .sheetwrap, #tips, #sback { clip-path: inset(0 round var(--rad)); }

/* ambient shader behind everything, with film grain on top of it */
#amb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#ambcss { position: absolute; inset: 0; z-index: 0; background-size: 170% 170%; animation: drift 10s ease-in-out infinite alternate; }
.appgrain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: var(--grainsize, 128px); opacity: .55; mix-blend-mode: soft-light; }
@keyframes grainshift { 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
@keyframes drift { from { background-position: 0% 0%; } to { background-position: 70% 50%; } }

.glass { background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 32px rgba(0,0,0,0.45); }

.view { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
.scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.scroll::-webkit-scrollbar { display: none; }
.press { transition: transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.springing .bcard { transition: none; }
.press:active { transform: scale(0.97); }

/* flags */
.flag { position: relative; display: block; flex-shrink: 0; }
.flag-in { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.flag-in svg { display: block; width: 100%; height: 100%; }
.eu { position: absolute; right: -8%; bottom: -8%; width: 42%; height: 42%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--bg); }
.eu svg { display: block; width: 100%; height: 100%; }
.fblock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.fcode { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #D9D9DE; }

/* glowing cards with grain */
.grainy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--grain); background-size: var(--grainsize, 128px); opacity: .7; mix-blend-mode: soft-light; }
.bcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); overflow: hidden; cursor: pointer; text-align: left; width: 100%; box-sizing: border-box; }
.bcard::after, .owner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.14), transparent 60%); }
.bcard:hover::after, .bcard:active::after, .owner:hover::after, .owner:active::after { opacity: 1; }
.btext { position: relative; flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bname { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: #FFFFFF; }
.bown { font-size: 14px; color: rgba(255,255,255,0.8); }
.bcard.slim { padding: 18px; }
/* the gradients are set inline; stop them repeating into the 1px border on the right and bottom edges */
.bcard, .owner, .zbg { background-repeat: no-repeat !important; background-origin: border-box !important; }
.r-list .bcard, #pick .bcard { min-height: 106px; }
.dots { display: flex; gap: 6px; align-items: center; padding-top: 6px; }
.dot { width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.6px solid var(--c); background: conic-gradient(var(--c) 0 var(--f), transparent var(--f) 100%); }
.dsep { width: 1px; height: 13px; margin: 0 3px; background: rgba(255,255,255,0.25); }
.seal { flex-shrink: 0; }

/* home */
.wallmask { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(transparent 14%, #000 30%, #000 54%, transparent 78%); mask-image: linear-gradient(transparent 14%, #000 30%, #000 54%, transparent 78%); }
#home .wall { position: absolute; left: -150px; right: -150px; top: 150px; display: flex; flex-direction: column; gap: 12px; transform: perspective(900px) rotateX(24deg) rotate(-10deg); transform-origin: 50% 0; pointer-events: none; user-select: none; }
.mrow { display: flex; gap: 12px; width: max-content; animation: marquee var(--d, 80s) linear infinite; }
.mrow.rev { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.paused .mrow { animation-play-state: paused; }
.wcard { width: 214px; flex-shrink: 0; padding: 12px 14px; border-radius: 18px; gap: 10px; cursor: default; }
.wcard .bname { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .bown { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .dots { gap: 4px; padding-top: 3px; }
.dot.unknown { --c: rgba(255,255,255,0.18); --f: 0%; }
.wcard .dot { width: 9px; height: 9px; border-width: 1.3px; }
/* tilt-shift over the drifting cards: a sharp band through the middle, softening to blur above and
   below, so the wall reads as scenery rather than something to tap. Two layers give a gradual falloff. */
.tilt { position: absolute; inset: 0; pointer-events: none; }
.tilt i { position: absolute; inset: 0; }
.tilt .t1 { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(#000 26%, transparent 40%, transparent 54%, #000 66%); mask-image: linear-gradient(#000 26%, transparent 40%, transparent 54%, #000 66%); }
.tilt .t2 { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 34%, transparent 60%, #000 74%); mask-image: linear-gradient(#000 20%, transparent 34%, transparent 60%, #000 74%); }
.wshade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(11,11,13,0.6) 0%, rgba(11,11,13,0.4) 22%, transparent 40%); }
.wordmark { position: absolute; left: 0; right: 0; top: 74px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; }
/* explicit layers on home: WebKit (every iPhone browser) could draw the blur layers over the wordmark after
   coming back from another screen, so the order is set outright and the wordmark gets a layer of its own */
/* home never scrolls: iOS nudged it up to keep the search field above the keyboard, and the shift stayed after
   a category, pushing the wordmark off the top of the screen. clip (unlike hidden) can't be scrolled at all */
#home { overflow: clip; }
#home .wallmask { z-index: 0; }
#home .tilt { z-index: 1; }
#home .wshade { z-index: 1; }
#home #load { z-index: 2; }
#home .wordmark { z-index: 3; transform: translateZ(0); }
.wordmark h1 { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
/* beta pill hangs off the wordmark's top right, so the wordmark itself stays centred */
.wordmark h1 { position: relative; }
.beta { position: absolute; left: calc(100% + 6px); top: 2px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@container app (min-width: 600px) { .beta { top: 8px; left: calc(100% + 10px); padding: 4px 9px; font-size: 12px; } }
.tag { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }

/* tips after idle */
#tips { position: absolute; inset: 0; z-index: 44; pointer-events: none; opacity: 0; transition: opacity .45s; }
#tips.show { opacity: 1; pointer-events: auto; }
#tips .dim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.tip { position: absolute; font-family: var(--hand); font-weight: 700; color: #FFFFFF; line-height: 1; transform: translateY(10px); opacity: 0; transition: transform .6s var(--spring), opacity .4s; }
#tips.show .tip { transform: none; opacity: 1; }
.tip.t1 { left: 28px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); font-size: 34px; max-width: 210px; transition-delay: .1s; }
.tip.t2 { right: 22px; bottom: calc(300px + env(safe-area-inset-bottom, 0px)); font-size: 32px; text-align: right; max-width: 150px; transition-delay: .35s; }
.arrow { position: absolute; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
#tips.show .arrow { animation: draw .9s .3s var(--ease) forwards; }
#tips.show .arrow.a2 { animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* bar */
#bar { position: absolute; left: 16px; right: 16px; bottom: var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))); transition: bottom .35s var(--spring); display: flex; gap: 8px; align-items: center; z-index: 46; }
.pill { flex-grow: 1; min-width: 0; height: 64px; box-sizing: border-box; padding: 6px; border-radius: 32px; display: flex; gap: 6px; align-items: center; }
.field { position: relative; flex-grow: 1; min-width: 0; height: 52px; box-sizing: border-box; border-radius: 26px; background: rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; transition: box-shadow .25s; cursor: text; }
.field.focus { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
#q { flex-grow: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; outline: none; caret-color: var(--yellow); transition: opacity .2s; }
#q::placeholder { color: var(--muted); font-weight: 500; }
#q::-webkit-search-cancel-button { display: none; }
#barlabel { position: absolute; left: 46px; right: 44px; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: rise .3s var(--ease) both; }
.icon-btn { border: 0; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
#clr { width: 30px; height: 30px; border-radius: 15px; }
.round { width: 52px; height: 52px; border-radius: 26px; border: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
#act { background: var(--yellow); position: relative; overflow: hidden; }
/* desktop: small labels under the scan, back and share buttons on hover */
.btip { display: none; }
@container app (min-width: 1024px) {
  @media (hover: hover) and (pointer: fine) {
    .btip { display: block; position: absolute; z-index: 47; padding: 7px 12px; border-radius: 12px; white-space: nowrap; pointer-events: none;
      font-size: 13px; font-weight: 600; color: #FFFFFF; background: rgba(28,28,33,0.94); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      opacity: 0; transform: translate(var(--tx), -4px) scale(.96); transform-origin: 50% 0; transition: opacity .18s ease, transform .25s var(--spring); }
    /* centred under each button */
    #acttip { top: calc(100% + 4px); right: 32px; --tx: 50%; }
    #backtip { top: 98px; left: 56px; --tx: -50%; }
    #sharetip { top: 98px; right: 56px; --tx: 50%; }
    #bar:has(#act:hover:not(:disabled)) #acttip, #app:has(#backbtn:hover) #backtip, #app:has(#sharebtn:hover) #sharetip {
      opacity: 1; transform: translate(var(--tx), 0) scale(1); transition-delay: .25s; }
    .searching .btip, .menuopen #acttip { visibility: hidden; }
  }
}
.swap svg { position: absolute; transition: transform .45s var(--spring), opacity .25s; }
.swap .i2 { transform: rotate(-90deg) scale(.4); opacity: 0; }
.swap.on .i1 { transform: rotate(90deg) scale(.4); opacity: 0; }
.swap.on .i2 { transform: none; opacity: 1; }
#menu { position: relative; width: 64px; height: 64px; border-radius: 32px; }

#backbtn { position: absolute; left: 16px; bottom: calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 76px); z-index: 44; width: 64px; height: 64px; border-radius: 32px; overflow: hidden; }
#backbtn svg { display: block; }
.searching #backbtn, .menuopen #backbtn { opacity: 0; pointer-events: none; }
#backbtn, #sharebtn { transition: opacity .25s, background-color .2s, transform .2s var(--ease); }
#sharebtn { position: absolute; right: 16px; bottom: calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 76px); z-index: 44; width: 64px; height: 64px; border-radius: 32px; overflow: hidden; }
#sharebtn svg { display: block; grid-area: 1 / 1; transition: opacity .3s, scale .45s var(--spring); }
/* after copying a link the share icon gives way to a tick, then comes back */
#sharebtn .tick { opacity: 0; scale: .4; }
#sharebtn.copied svg:first-child { opacity: 0; scale: .4; }
#sharebtn.copied .tick { opacity: 1; scale: 1; }

.searching #sharebtn { opacity: 0; pointer-events: none; }
/* menu popover */
#pop { position: absolute; left: 16px; bottom: calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 76px); width: 270px; z-index: 47; border-radius: 22px; overflow: hidden; background: rgba(28,28,32,0.74);
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 12% 100%; pointer-events: none; transition: opacity .2s, transform .4s var(--spring); }
.menuopen #pop { opacity: 1; transform: none; pointer-events: auto; }
#popback { position: absolute; inset: 0; z-index: 43; pointer-events: none; }
.menuopen #popback { pointer-events: auto; }
.pitem { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.pitem + .pitem { border-top: 0.5px solid var(--line); }
.pitem:active { background: rgba(255,255,255,0.06); }
.pitem svg { flex-shrink: 0; margin-top: 2px; }
.pt { display: flex; flex-direction: column; gap: 2px; }
.pt b { font-size: 16px; font-weight: 700; }
.pt span { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* search */
#sback { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .3s; }
#sp { position: absolute; left: 16px; right: 16px; bottom: calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 76px); z-index: 42; border-radius: 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  /* from just above the bar to near the top of the app; --barb already includes the keyboard when it covers the page,
     and when Safari shrinks the page above the keyboard instead, 100% is already the visible height */
  /* at most about four and a half rows (the half row shows it scrolls), so it stays clear of the top of the screen */
  max-height: min(330px, calc(100% - var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) - 76px - 56px - env(safe-area-inset-top, 0px)));
  background: rgba(28,28,32,0.74); opacity: 0; transform: translateY(14px) scale(.98); transform-origin: 50% 100%; pointer-events: none; visibility: hidden; transition: opacity .25s, transform .4s var(--spring), visibility 0s .4s; }
/* visibility, not just opacity, and it only scrolls while open: Safari on iPad still sends swipes to an invisible scrolling panel */
#sp { overflow-y: hidden; }
.searching #sp { overflow-y: auto; }
.searching #sback { opacity: 1; pointer-events: auto; }
.searching #sp { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s, transform .4s var(--spring), visibility 0s; }
.sp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.sp-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--link); cursor: pointer; }
.sug { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; border: 0; background: transparent; text-align: left; cursor: pointer; animation: rise .35s var(--ease) both; }
.sug + .sug { border-top: 0.5px solid rgba(255,255,255,0.1); }
.sug:active { background: rgba(255,255,255,0.05); }
.sug .st { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sname { font-size: 17px; color: var(--soft); font-weight: 600; }
.sname b { color: #FFFFFF; font-weight: 800; }
.ssub { font-size: 13px; color: var(--muted); }
.ticon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); display: grid; place-items: center; flex-shrink: 0; }
.sempty { margin: 0; padding: 18px 16px; font-size: 15px; line-height: 1.5; color: var(--soft); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* results */
.r-head { position: relative; padding: 60px 22px 0; }
.r-head h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.r-count { margin-top: 6px; font-size: 16px; color: var(--soft); }
.r-list { padding: 22px 16px calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 64px + 12px + 64px + 20px); display: flex; flex-direction: column; gap: 10px; }
.r-list .bcard { animation: none; }   /* entrance runs from openResults */
.r-more { margin: 0; padding: 6px 6px 0; font-size: 13px; color: var(--muted); }
#filter { position: absolute; left: 92px; right: 16px; bottom: calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 82px); height: 52px; box-sizing: border-box; padding: 4px; border-radius: 26px; display: flex; z-index: 25; }
#filter[hidden] { display: none !important; }
.fopt { flex: 1; border: 0; background: transparent; color: var(--soft); font-size: 16px; font-weight: 700; border-radius: 22px; position: relative; z-index: 1; cursor: pointer; transition: color .25s; }
.fopt[aria-pressed="true"] { color: #FFFFFF; }
#fpill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 22px; background: rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .45s var(--spring); }

/* detail */
.d-head { position: relative; padding: 62px 22px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.d-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-name { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.d-co { font-size: 16px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.d-ind { color: var(--soft); font-weight: 600; }
.d-body { position: relative; padding: 24px 16px calc(var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) + 64px + 12px + 64px + 20px); display: flex; flex-direction: column; gap: 26px; }
.d-body > .in { animation: rise .5s var(--ease) both; }
.owner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; text-align: left; width: 100%; box-sizing: border-box; background-size: 170% 170%; animation: drift 8s ease-in-out infinite alternate; overflow: hidden; }
.o-text { position: relative; display: flex; flex-direction: column; gap: 2px; }
.o-lab { font-size: 14px; color: rgba(255,255,255,0.8); }
.o-co { font-size: 14px; color: rgba(255,255,255,0.78); }
.o-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #FFFFFF; }
.rows { display: flex; flex-direction: column; padding: 0; }
.srow, .grow { position: relative; overflow: hidden; border-radius: 14px; }
.srow::after, .grow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12), transparent 60%); }
.srow:hover::after, .srow:active::after, .grow:hover::after, .grow:active::after { opacity: 1; }
.srow:active, .grow:active { transform: scale(.985); }
.srow { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 10px; border: 0; background: transparent; text-align: left; cursor: pointer; transition: transform .2s var(--ease); }
.srow + .srow { border-top: 0.5px solid var(--line); }

.slab { flex-grow: 1; font-size: 17px; }
.bar3 { display: flex; gap: 3px; width: 40px; }
.seg { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; position: relative; }
.seg i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
.lit .seg i.on { transform: scaleX(1); }
.slv { width: 72px; text-align: right; font-size: 17px; font-weight: 800; }
.chev { flex-shrink: 0; }
.sec { display: flex; flex-direction: column; padding: 0; }
.sec .sec-lab { padding: 0 10px; }
.sec-lab { margin: 0 0 2px; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.owned { display: flex; flex-direction: column; gap: 10px; }
.owned .sec-lab { padding: 0 8px; margin-bottom: 0; }
.grow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 10px; transition: transform .2s var(--ease); border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 17px; font-weight: 600; }
.grow + .grow { border-top: 0.5px solid var(--line); }
.grow span { flex-grow: 1; }
.foot { display: flex; flex-direction: column; gap: 14px; padding: 0 6px; }
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips > span { font-size: 14px; color: var(--muted); margin-right: 2px; }
.chip { height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); font-size: 14px; font-weight: 600; cursor: pointer; }
.meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.meta .linkbtn { font-size: 13px; padding: 0; }

/* sheets */
.sheetwrap { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.sheetwrap .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .3s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; box-sizing: border-box; border-radius: 30px 30px 0 0; padding: 10px 22px calc(34px + env(safe-area-inset-bottom, 0px));
  background: rgba(28,28,33,0.97); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.14); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 -20px 50px rgba(0,0,0,0.4); transform: translateY(105%); transition: transform .5s var(--spring); display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.sheetwrap.open { pointer-events: auto; }
.sheetwrap.open .backdrop { opacity: 1; }
.sheetwrap.open .sheet { transform: translateY(0); }
/* a closed sheet is fully hidden once it has animated away, so Safari on iPad doesn't send swipes to it */
.sheetwrap:not(.open) .sheet { visibility: hidden; transition-property: transform, opacity, visibility; transition-delay: 0s, 0s, .5s; }
.sheetwrap.drag .sheet { transition: none; }
.sh-top { display: flex; justify-content: space-between; align-items: center; min-height: 34px; touch-action: none; cursor: grab; }
.grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); margin-left: calc(50% - 19px); }
.done { height: 34px; padding: 0 14px; border-radius: 17px; border: 0; background: rgba(255,255,255,0.12); font-size: 15px; font-weight: 700; cursor: pointer; }
.sh-lab { font-size: 15px; color: var(--soft); }
.sh-big { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
.fact { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 0.5px solid var(--line); animation: rise .4s var(--ease) both; }
.fact .t { font-size: 19px; font-weight: 600; line-height: 1.35; }
.fact .d { font-size: 16px; line-height: 1.45; color: var(--soft); }
.fact .m { font-size: 14px; color: var(--muted); }
.fact .m a { color: var(--link); text-decoration: none; }
.okline { display: flex; gap: 10px; margin: 0; padding: 16px 0; border-top: 0.5px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--soft); }
.shlink { align-self: flex-start; padding: 8px 0 0; }
.sh-h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sh-p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); }
textarea { width: 100%; box-sizing: border-box; min-height: 110px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--ink); font: inherit; font-size: 16px; resize: none; }
.primary { height: 52px; border: 0; border-radius: 26px; background: var(--yellow); color: #0B0B0D; font-size: 17px; font-weight: 800; cursor: pointer; }

/* scan */
#scan { background: #2A2622; }
.cam { position: absolute; inset: 0; overflow: hidden; background: #2A2622; transition: filter .4s; }
.cam.torch { filter: brightness(1.45) saturate(1.1); }
.cam span { position: absolute; border-radius: 30px; filter: blur(34px); }
.cam .c1 { left: -40px; top: 40px; width: 220px; height: 330px; background: #C77A35; opacity: .7; animation: camA 9s ease-in-out infinite alternate; }
.cam .c2 { right: -30px; top: 110px; width: 200px; height: 280px; background: #3E6E9C; opacity: .65; animation: camB 11s ease-in-out infinite alternate; }
.cam .c3 { left: 60px; top: 430px; width: 270px; height: 220px; background: #D9B54A; opacity: .5; animation: camA 13s ease-in-out infinite alternate-reverse; }
.cam .c4 { left: -20px; bottom: -40px; width: 430px; height: 240px; background: #141210; border-radius: 0; }
@keyframes camA { to { transform: translate(18px, -14px) scale(1.06); } }
@keyframes camB { to { transform: translate(-16px, 12px) scale(.95); } }
.camdim { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity .3s; }
#scan.asking .camdim { opacity: 1; }
.scan-title { position: absolute; left: 0; right: 0; top: 30px; margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
#torch { position: absolute; top: 18px; right: 16px; width: 48px; height: 48px; border-radius: 24px; box-sizing: border-box; }
#torch[aria-pressed="true"] { background: rgba(255,214,10,0.9); }
#torch[aria-pressed="true"] svg { stroke: #0B0B0D; }
.frame { position: absolute; left: 50%; top: 29%; width: 300px; height: 210px; margin-left: -150px; --fc: var(--yellow); cursor: pointer; border: 0; background: transparent; padding: 0; transition: transform .4s var(--spring); }
/* everything outside the frame is darkened, so it's clear only the code inside it is read */
.frame::before { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(0,0,0,0.6); pointer-events: none; }
.frame.found { transform: scale(.94); --fc: var(--good); }
.cn { position: absolute; width: 36px; height: 36px; border: 0 solid var(--fc); transition: border-color .3s; }
.cn.tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 16px; }
.cn.tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 16px; }
.cn.bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 16px; }
.cn.br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 16px; }
.sline { position: absolute; left: 20px; right: 20px; top: 14px; height: 2px; border-radius: 1px; background: var(--fc); box-shadow: 0 0 14px var(--fc); animation: sweep 1.9s ease-in-out infinite alternate; }
.frame.found .sline, .frame.fail .sline { opacity: 0; }
.frame.fail { --fc: rgba(255,255,255,0.35); }
@keyframes sweep { to { top: 194px; } }
.scan-under { position: absolute; left: 24px; right: 24px; top: calc(29% + 238px); display: flex; justify-content: center; }
.nosignal { width: 100%; max-width: 320px; box-sizing: border-box; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: rise .4s var(--ease) both; }
.nosignal b { font-size: 20px; font-weight: 800; }
.nosignal span { font-size: 15px; line-height: 1.45; color: var(--soft); }
.nosignal .primary { align-self: stretch; margin-top: 8px; }
.hint { margin: 0; max-width: 290px; text-align: center; font-size: 16px; line-height: 1.5; color: #E4E4EA; }
.status { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; box-sizing: border-box; border-radius: 22px; font-weight: 600; font-size: 15px; animation: rise .3s var(--ease) both; }
.spin { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: #FFFFFF; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* scan states */
#scan.asking .frame, #scan.asking .scan-under { opacity: 0; pointer-events: none; }
.scan-panel { position: absolute; left: 16px; right: 16px; top: 92px; display: flex; justify-content: center; }
.scard { width: 100%; box-sizing: border-box; padding: 26px 22px 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 14px; animation: rise .45s var(--ease) both; }
.scard h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.scard p, .scard ol { margin: 0; font-size: 16px; line-height: 1.5; color: var(--soft); }
.scard ol { padding-left: 20px; font-size: 15px; }
.scard .small { font-size: 14px; color: var(--muted); }
.scard .primary { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.scard .linkbtn { align-self: center; min-height: 40px; font-size: 15px; }
.sicon { width: 56px; height: 56px; border-radius: 28px; background: rgba(255,255,255,0.12); display: grid; place-items: center; }
.sicon.ok { background: rgba(126,226,160,0.15); }
.smsg { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.status svg { flex-shrink: 0; }
.nosignal .linkbtn { min-height: 40px; font-size: 15px; }
.torch-hint { position: absolute; top: 72px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--spring); }
.torch-hint.show { opacity: 1; transform: none; transition-delay: .5s; }
.torch-hint svg { margin-right: 6px; }
.torch-hint span { font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: 1; color: var(--yellow); white-space: nowrap; }
#torch.ring { animation: ring 1.6s ease-out .9s 3; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,214,10,.55); } 70% { box-shadow: 0 0 0 12px rgba(255,214,10,0); } 100% { box-shadow: 0 0 0 0 rgba(255,214,10,0); } }
.spin.dark { border-color: rgba(0,0,0,0.2); border-top-color: #0B0B0D; }
/* search, nothing found */
.sempty { display: flex; flex-direction: column; gap: 6px; }
.sempty b { color: #FFFFFF; font-size: 17px; }
.sactions { display: flex; gap: 18px; padding-top: 4px; }
/* corrections form */
.cform { display: flex; flex-direction: column; gap: 22px; }
.cf { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cf > label, .cf legend { font-size: 16px; font-weight: 700; padding: 0; }
.cf legend span { font-weight: 500; color: var(--muted); }
fieldset.cf label { font-size: 15px; font-weight: 600; margin-top: 6px; }
.chint { font-size: 14px; line-height: 1.5; color: var(--soft); }
.cform input, .cform textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .2s; }
.cform textarea { padding: 12px 14px; line-height: 1.5; min-height: 140px; }
.cform input:focus, .cform textarea:focus { border-color: rgba(255,255,255,0.5); }
.cform .bad { border-color: #FF8A80; }
.cform .good { border-color: var(--good); }
.cerr { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: #FF8A80; }
.cok { font-size: 14px; font-weight: 600; color: var(--good); }
.ccount { font-size: 13px; color: var(--muted); text-align: right; }
.cwrap { position: relative; }
.clist { position: absolute; left: 0; right: 0; top: 58px; z-index: 3; padding: 6px; border-radius: 16px; display: flex; flex-direction: column; background: rgba(36,36,42,0.92); }
.copt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.copt:hover, .copt:focus { background: rgba(255,255,255,0.08); }
.copt b { font-size: 15px; font-weight: 700; } .copt span { font-size: 13px; color: var(--muted); }
.cnone { padding: 10px; font-size: 14px; color: var(--soft); }
.cbanner { display: flex; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(234,50,40,0.9); font-size: 14px; line-height: 1.5; font-weight: 600; animation: rise .35s var(--ease) both; }
.cbanner svg { flex-shrink: 0; }
#c-send { display: flex; align-items: center; justify-content: center; gap: 10px; }
#c-send:disabled { background: rgba(255,255,255,0.12); color: var(--muted); cursor: not-allowed; }
.sent { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 10px; animation: rise .45s var(--ease) both; }
.about { display: flex; flex-direction: column; gap: 10px; }
.about h3 { margin: 14px 0 0; font-size: 17px; font-weight: 800; }
.about .primary { margin-top: 6px; }
.checked { margin: 0; padding: 12px 2px 0; font-size: 13px; color: var(--muted); }

/* draft brands: only what we have */
.pending { display: block; padding-top: 6px; font-size: 13px; color: var(--muted); }
.synopsis { margin: 0; padding: 0 6px; font-size: 16px; line-height: 1.5; color: var(--soft); }
.pending-note { margin: 0; padding: 18px 10px; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--soft); }
.d-own { padding: 24px 16px 0; }

/* prototype: screen size switch */

/* larger screens: the layout follows the width of the app itself */
#app { container: app / inline-size; }
@container app (min-width: 600px) {
  #bar, #sp { left: calc(50% - 290px); right: calc(50% - 290px); }
  #backbtn, #pop { left: calc(50% - 290px); }
  #sharebtn { right: calc(50% - 290px); }
  .r-head, .r-list, .d-wrap { max-width: 640px; margin: 0 auto; box-sizing: border-box; }
  .r-head { padding-top: 84px; }
  .d-head { padding-top: 84px; }
  #filter { left: 50%; right: auto; width: 380px; margin-left: -190px; }
  .tag { font-size: 13px; }
  #home .wall { top: 30%; }
  /* the drifting cards stop at a set width and fade out at the sides */
  .wallmask { left: 50%; right: auto; width: min(100%, 1180px); transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(transparent 14%, #000 30%, #000 54%, transparent 78%), linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(transparent 14%, #000 30%, #000 54%, transparent 78%), linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  #tips { display: none; }
  .scan-panel { left: 50%; right: auto; width: 440px; margin-left: -220px; top: 15%; }
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100% - 48px)); max-height: 82%; border-radius: 30px; border-bottom: 1px solid rgba(255,255,255,0.14);
    padding-bottom: 28px; opacity: 0; transform: translate(-50%, -46%) scale(.98); transition: transform .45s var(--spring), opacity .25s; }
  .sheetwrap.open .sheet { opacity: 1; transform: translate(-50%, -50%); }
  .grab { visibility: hidden; }
  .sh-top { cursor: default; }
}
/* tablet and up: search in the middle on home, under the wordmark, and at the top everywhere else */
@container app (min-width: 600px) {
  .wordmark { top: 16%; }
  .wordmark h1 { font-size: 84px; letter-spacing: -0.04em; }
  #bar { top: 24px; bottom: auto; }
  /* leave room for the back and share buttons in the top corners on narrower screens */
  #bar, #sp, #pop { left: max(100px, calc(50% - 290px)); }
  #bar, #sp { right: max(100px, calc(50% - 290px)); }
  [data-view="home"] #bar { top: calc(16% + 160px); }
  #backbtn { top: 24px; bottom: auto; left: 24px; }
  .menuopen #backbtn { opacity: 1; pointer-events: auto; }   /* the menu opens under it, not on it */
  #sharebtn { top: 24px; bottom: auto; right: 24px; }
  #pop, #sp { top: 100px; bottom: auto; transform-origin: 50% 0; }
  [data-view="home"] #pop, [data-view="home"] #sp { top: calc(16% + 236px); }
  #sp { max-height: min(560px, calc(100% - 140px)); }
  [data-view="home"] #sp { max-height: calc(84% - 270px); }
  .d-head { padding-top: 132px; }
  .d-body { padding-bottom: 60px; }
  .r-head { padding-top: 132px; }
  .r-list { padding-bottom: 150px; }
  #filter { bottom: 32px; }
  .scan-title { top: 112px; }
  #torch { top: 100px; right: 24px; }
  .torch-hint { top: 156px; }
  .scan-panel { top: 150px; }
  /* home: six rows of larger drifting cards fill the lower screen, softening into a blur towards the top so the wordmark and search stand clear */
  #home .wall { transform: perspective(1400px) rotateX(20deg) rotate(-7deg) scale(1.2); }
  [data-view="home"] #home .wall { top: max(calc(16% + 80px), calc(100% - 640px)); }
  /* limited in width, fading out softly at the sides */
  .wallmask { width: min(100%, 1200px);
    -webkit-mask-image: linear-gradient(transparent 4%, #000 34%, #000 86%, transparent 100%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(transparent 4%, #000 34%, #000 86%, transparent 100%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
  .tilt .t1 { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(#000 0%, #000 46%, transparent 78%); mask-image: linear-gradient(#000 0%, #000 46%, transparent 78%); }
  .tilt .t2 { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 0%, #000 36%, transparent 62%); mask-image: linear-gradient(#000 0%, #000 36%, transparent 62%); }
  .wshade { background: linear-gradient(rgba(11,11,13,0.7) 0%, rgba(11,11,13,0.5) 34%, transparent 62%); }
}
@container app (min-width: 1024px) {
  .wordmark { top: 16%; }
  .wordmark h1 { font-size: 104px; letter-spacing: -0.045em; }
  .tag { font-size: 15px; }
  .d-wrap { max-width: 1140px; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 600px); justify-content: center; column-gap: 64px; }
  .d-side { position: sticky; top: 0; align-self: start; }
  .d-head { padding: 96px 0 0; }
  .d-name { font-size: 64px; }
  .d-own { padding: 28px 0 0; }
  .d-body { padding-top: 96px; padding-left: 0; padding-right: 0; }
  .r-head, .r-list { max-width: 1060px; }
  .r-head { padding-top: 96px; padding-left: 30px; padding-right: 30px; }
  .r-head h1 { font-size: 64px; }
  .r-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; padding-left: 24px; padding-right: 24px; }
  .r-more { grid-column: 1 / -1; }
  .owned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owned .sec-lab { grid-column: 1 / -1; }
  /* home: a bigger wordmark, so the search and its panels sit lower */
  [data-view="home"] #bar { top: calc(16% + 190px); }
  [data-view="home"] #pop, [data-view="home"] #sp { top: calc(16% + 266px); }
  [data-view="home"] #sp { max-height: calc(84% - 300px); }
  /* clear the top bar (the padding rules above in this block would otherwise undo the tablet-and-up value) */
  .d-head, .d-body, .r-head { padding-top: 132px; }
  /* the flag sits level with the first line of the name (64px type, 1.04 line height) */
  .d-head > .flag { margin-top: calc((64px * 1.04 - 44px) / 2); }
}
/* zoom layer */
.zlayer { position: absolute; inset: 0; z-index: 55; pointer-events: none; }
.zbg { position: absolute; overflow: hidden; will-change: left, top, width, height, opacity; }
.zname { position: absolute; font-weight: 800; color: #FFFFFF; line-height: 1.04; text-wrap: balance; transform-origin: 0 0; will-change: transform, opacity; }
.zflag { position: absolute; will-change: left, top, width, height; }

#toast { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 80; width: max-content; max-width: 320px; padding: 12px 18px; border-radius: 22px; font-size: 15px; font-weight: 600; text-align: center;
  transform: translate(-50%, -160%); opacity: 0; visibility: hidden; transition: transform .5s var(--spring), opacity .3s, visibility 0s .5s; }
/* hidden toasts are fully hidden too, so an empty one can't peek in at the screen edge */
#toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s var(--spring), opacity .2s, visibility 0s; }
/* tablet and up: the search sits at the top, so messages come up from the bottom */
@container app (min-width: 600px) {
  #toast { top: auto; bottom: 32px; transform: translate(-50%, 160%); }
  #toast.show { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mrow, .owner, .cam span, .appgrain, #ambcss { animation: none !important; }
  .sline { animation-duration: 4s; }
}



/* ---------- real app additions ---------- */
html, body { margin: 0; padding: 0; }
body { height: 100dvh; }
[hidden]:not([hidden=until-found i]) { display: none !important; }
.flag-in img, .eu img, .zflag img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; pointer-events: none; }
/* live camera */
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cam.live { background: #000; }
.cam.live video { opacity: 1; }
.cam.live span { display: none; }
/* first visit: loading the brands */
#app.loading #bar, #app.loadfail #bar { opacity: .45; pointer-events: none; }
.load { position: absolute; left: 0; right: 0; top: 330px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.load span.lt { font-size: 16px; line-height: 1.45; color: var(--soft); }
.ldbar { position: relative; width: 160px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.ldbar span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--yellow); animation: ld 1.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ld { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ldbar span { animation: none; left: 30%; opacity: .7; } }
.loadfail-card { position: absolute; left: 35px; right: 35px; top: 290px; display: flex; justify-content: center; }
#wall { transition: opacity .9s; }
#wall.fresh { opacity: 0; }
.fact .m a { color: var(--link); }
.copybox { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.06); color: var(--ink); font: inherit; font-size: 15px; }

/* hover states, for mouse and trackpad only (touch screens keep their press states) */
.icon-btn.glass, #clr, .pitem, .sug, .chip, .done, .primary, .field, .cform input, .cform textarea { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .25s; }
#act { transition: background-color .2s, transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn.glass:hover { background-color: rgba(64,64,74,0.7); }
  #torch[aria-pressed="true"]:hover { background-color: #FFE14A; }
  #clr:hover { background-color: rgba(255,255,255,0.1); }
  #clr:hover svg { stroke: #FFFFFF; }
  #act:hover:not(:disabled), .primary:hover:not(:disabled) { background-color: #FFE14A; }
  .pitem:hover, .sug:hover { background-color: rgba(255,255,255,0.06); }
  .fopt:not([aria-pressed="true"]):hover { color: #FFFFFF; }
  .chip:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); }
  .done:hover { background-color: rgba(255,255,255,0.2); }
  .linkbtn:hover, .sheet a:hover, .fact .m a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .field:not(.focus):hover { background-color: rgba(255,255,255,0.11); }
  .cform input:not(:focus):not(.bad):not(.good):hover, .cform textarea:not(:focus):not(.bad):hover { border-color: rgba(255,255,255,0.3); }
}

/* Overlays that aren't in use are moved right off the screen once they've faded out, not just made invisible.
   Safari on iPad still sends swipes to invisible overlays, which stopped lists scrolling once their entrance animation
   had finished. `translate` is separate from `transform`, so each overlay's own animation is untouched. */
#sback, #popback, #sp, #pop { translate: 0 -300vh; }
#sback { transition: opacity .3s, translate 0s .35s; }
#sp { transition: opacity .25s, transform .4s var(--spring), visibility 0s .4s, translate 0s .45s; }
#pop { transition: opacity .2s, transform .4s var(--spring), translate 0s .45s; }
.searching #sback, .searching #sp, .menuopen #popback, .menuopen #pop { translate: none; }
.searching #sback { transition: opacity .3s, translate 0s; }
.searching #sp { transition: opacity .25s, transform .4s var(--spring), visibility 0s, translate 0s; }
.menuopen #pop { transition: opacity .2s, transform .4s var(--spring), translate 0s; }

/* version label: tiny and faint in the bottom left corner, above everything but never in the way of a tap */
#ver { position: absolute; left: 6px; bottom: calc(2px + env(safe-area-inset-bottom, 0px)); z-index: 90; font-size: 9px; line-height: 1; letter-spacing: .02em; color: rgba(255,255,255,0.28); pointer-events: none; user-select: none; white-space: nowrap; }

/* touch screens 1024px and up (an iPad held sideways, with or without a keyboard or trackpad): category results stay in
   one column, as on phones and tablets. On iPad Safari a drag that started on a card in the two-column grid wouldn't scroll. */
@container app (min-width: 1024px) {
  @media (any-pointer: coarse) {
    .r-head, .r-list { max-width: 640px; }
    .r-head { padding-left: 16px; padding-right: 16px; }
    .r-list { display: flex; flex-direction: column; gap: 10px; padding-left: 16px; padding-right: 16px; }
  }
}

/* one-line brand name field (Tell us about a brand) */
.sinput { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--ink); font: inherit; font-size: 17px; outline: none; transition: border-color .2s; }
.sinput:focus { border-color: rgba(255,255,255,0.5); }
.sinput::placeholder { color: var(--muted); }
/* phones: a typed search has no Recent heading, so four and a half rows is 270px */
@container app (max-width: 599px) {
  #sp.typed { max-height: min(270px, calc(100% - var(--barb, calc(22px + env(safe-area-inset-bottom, 0px))) - 76px - 56px - env(safe-area-inset-top, 0px))); }
}
/* Cloudflare's bot check: hidden unless it needs a tap; at the top, over the dimmed screen, so it never covers a form */
.tsbox{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);z-index:100}