/* The home page: the search, and one product shot of Pulse at work (home.js plays it once). The shot is a
   device pair on the page's own ground: Watching in a browser window, inset top-left and running off the bottom; an
   iPhone straddling its right edge. One thing happens, once: a watched price rolls under its limit, then the alert
   lands on the lock screen and stays. The HTML is the poster (the payoff), so no script or reduced motion shows it still.
   Every rule is scoped to .demo. */
.home-hero { position: relative; z-index: 3; padding: clamp(144px, 20vh, 200px) 0 0; text-align: center; }
.home-hero .hero-search { padding: 0 var(--gutter); color: var(--fg); }
.home-hero .paste-demo { max-width: 680px; margin-top: 0; text-align: left; }
/* The search is the page's one control: a larger glass field lifted off the sky by a rim of light, a deep shadow and a
   faint sky glow, which gathers into a sky focus ring while it has focus. */
.home-hero .link-bar { gap: 14px; padding: 12px 12px 12px 24px; font-size: 18px; background: rgb(255 255 255 / 9%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 16%) inset, 0 0 0 1px rgb(169 209 238 / 18%), 0 28px 60px -28px rgb(0 0 0 / 75%),
    0 0 80px -20px rgb(95 163 214 / 32%);
  transition: background-color .25s, box-shadow .25s; }
.home-hero .link-bar:hover { background: rgb(255 255 255 / 11%); }
.home-hero .link-bar:focus-within { background: rgb(255 255 255 / 12%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 18%) inset, 0 0 0 1px rgb(169 209 238 / 60%), 0 0 0 5px rgb(95 163 214 / 18%),
    0 28px 60px -28px rgb(0 0 0 / 75%), 0 0 96px -16px rgb(95 163 214 / 42%); }
.home-hero .link-bar .link-icon { width: 20px; height: 20px; }
.home-hero .link-bar .link-go { width: 44px; height: 44px; }
.home-hero .link-bar .link-go svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .home-hero { padding-top: 120px; }
  .home-hero .link-bar { gap: 12px; padding: 8px 8px 8px 18px; font-size: 16px; }
  .home-hero .link-bar .link-go { width: 40px; height: 40px; }
}
/* The search's suggestions float over the shot. */
.home-hero .hero-search { position: relative; z-index: 5; }

/* The stage: its design size (1080 × 620, or 358 × 460 on a phone) scaled to the column by home.js (--s). */
.demo { --s: 1; position: relative; width: min(1080px, 100% - 2 * var(--gutter)); margin: clamp(56px, 8vh, 80px) auto 0;
  height: calc(var(--h) * var(--s)); --w: 1080px; --h: 620px; }
.demo-stage { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform: scale(var(--s)); transform-origin: 0 0;
  overflow: hidden; text-align: left; contain: layout paint;
  /* The shot fades out at its foot, over filler only: the rows below the focus and the phone's empty wallpaper. */
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* ---- The window: Pulse's own Watching, at the site's real sizes ---- */
.demo-window { position: absolute; left: 40px; top: 40px; width: 900px; height: 760px; border-radius: 14px; overflow: hidden;
  background: #0d1622; box-shadow: 0 0 0 1px rgb(255 255 255 / 9%), 0 1px 0 rgb(255 255 255 / 8%) inset, 0 50px 100px -40px rgb(0 0 0 / 80%); }
.demo-chrome { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px;
  background: #111c2a; box-shadow: 0 1px 0 rgb(255 255 255 / 6%); }
.demo-lights { display: flex; gap: 8px; }
.demo-lights i { width: 12px; height: 12px; border-radius: 50%; background: rgb(255 255 255 / 14%); }
.demo-url { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); display: grid; place-items: center;
  width: 300px; height: 24px; border-radius: 8px; font-size: 12px; letter-spacing: 0; color: var(--label-2); background: rgb(255 255 255 / 6%); }
.demo-body { padding: 26px 28px 0; }
.demo-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.demo-title { margin-right: auto; font-size: 26px; font-weight: 500; letter-spacing: -.035em; color: var(--label-hover); }
/* The toolbar: Watching's own search, In stock and sort controls at their real height, their words as filler. */
.demo-shape { display: flex; flex: none; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px;
  color: var(--label-3); background: rgb(255 255 255 / 5%); box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset; }
.demo-shape svg { flex: none; width: 14px; height: 14px; }
.demo-shape .demo-bar { height: 6px; background: rgb(255 255 255 / 14%); }
.demo-bar { display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 10%); }
.demo-list { list-style: none; margin: 0; padding: 6px; border-radius: 20px; background: rgb(255 255 255 / 3.5%); box-shadow: 0 0 0 1px rgb(255 255 255 / 8%); }
.demo-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 80px; padding: 0 16px 0 12px; }
.demo-row + .demo-row { border-top: 1px solid rgb(255 255 255 / 6%); }
.demo-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; overflow: hidden; }
.demo-tile img { width: 82%; height: 76%; object-fit: contain; }
.demo-name { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: var(--label); }
.demo-pills { display: flex; gap: 6px; margin-top: 7px; }
.demo-pill { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; line-height: 26px; color: var(--label); background: var(--selected); }
.demo-price { display: grid; justify-items: end; gap: 1px; font-size: 13px; color: var(--label-2); }
.demo-price b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--label); font-variant-numeric: tabular-nums; }
.demo-row .demo-bar + .demo-bar { margin-top: 9px; }
.demo-price .demo-bar { width: 64px; height: 10px; }
.demo-price .demo-bar.from { width: 30px; height: 6px; margin-bottom: 6px; }

/* ---- The phone: an iPhone at true iOS points (402 × 874), scaled as one (--ps), black titanium on the dark page ---- */
.demo-phone { --ps: calc(288 / 430); position: absolute; left: 752px; top: 262px; width: 288px; height: calc(902px * var(--ps));
  border-radius: calc(69px * var(--ps)); padding: calc(4px * var(--ps));
  background: linear-gradient(135deg, #5b5c61, #2b2c2f 30%, #48494d 60%, #232427);
  box-shadow: 0 0 0 calc(1px * var(--ps)) rgb(255 255 255 / 12%) inset, 0 40px 80px -16px rgb(0 0 0 / 70%), 0 24px 48px -24px rgb(0 0 0 / 60%); }
.demo-glass { width: 100%; height: 100%; border-radius: calc(65px * var(--ps)); padding: calc(10px * var(--ps)); background: #0b0b0c; }
.demo-screen-clip { width: 100%; height: 100%; border-radius: calc(55px * var(--ps)); overflow: hidden; isolation: isolate; }
.demo-screen { position: relative; width: 402px; height: 874px; transform: scale(var(--ps)); transform-origin: 0 0;
  color: #fff; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.015em; -webkit-font-smoothing: antialiased;
  /* The wallpaper is Pulse's own dawn: ink at the top, the sky lifting toward the foot. */
  background:
    radial-gradient(110% 45% at 50% 62%, rgb(207 230 247 / 70%) 0%, rgb(159 200 232 / 40%) 35%, transparent 75%),
    linear-gradient(180deg, #0b1828 0%, #14304a 22%, #2a5679 42%, #4f86b3 60%, #8fbde0 78%, #cfe6f7 100%); }
.demo-status { position: absolute; inset: 0 0 auto; height: 62px; }
.demo-time { position: absolute; top: 21.5px; left: 0; width: 138.5px; text-align: center; font-size: 17.67px; line-height: 22px; font-weight: 590; letter-spacing: 0; }
.demo-island { position: absolute; top: 14px; left: 50%; width: 125px; height: 37px; border-radius: 18.5px; background: #000; transform: translateX(-50%); }
.demo-glyphs { position: absolute; top: 25px; left: 285px; display: flex; align-items: flex-start; gap: 7px; }
.demo-glyphs svg { display: block; }
/* No clock or date (owner, 3 Nov 2026): the alert alone, under the status bar. */
.demo-stack { position: absolute; top: 118px; left: 16px; right: 16px; }
/* An iOS 26 notification: Liquid Glass (a clear pane that bends the wallpaper: light fill, strong blur and saturation,
   a bright rim that catches the light at the top edge), 26pt corners, a 38pt icon 14pt in with 10pt continuous corners,
   12pt to the text, a 15pt semibold title and body on 20pt lines with 2pt between them. */
.demo-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 14px; border-radius: 26px; color: #fff;
  background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 9%));
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), inset 0 0 0 .5px rgb(255 255 255 / 28%), inset 0 -1px 0 rgb(255 255 255 / 8%),
    0 10px 30px rgb(4 18 36 / 22%); will-change: transform; }
.demo-note-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; }
.demo-note-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 20px; letter-spacing: -.02em; }
.demo-note-head { display: flex; align-items: baseline; gap: 8px; }
.demo-note-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.demo-note-time { flex: none; font-size: 13px; color: rgb(255 255 255 / 62%); }
.demo-note-body { color: rgb(255 255 255 / 94%); }

/* ---- The play (home.js): with script and motion, the shot opens before the drop (no alert yet) and home.js rolls the
   price and lands the alert once, then marks the stage .played and it rests on the poster. The price waits hidden until
   home.js has set the old one (.armed), so the new one never flashes first. ---- */
.demo-note { transition: transform .55s cubic-bezier(.2, .9, .25, 1), opacity .4s ease; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .demo-stage:not(.played) .demo-note { transform: translateY(-40px) scale(.96); opacity: 0; }
  .demo-stage:not(.armed, .played) [data-demo-price] { visibility: hidden; }
}

/* ---- Phone column: a second design (358 × 460). The window keeps the focus row; the phone stands in front of the
   rows below it, whole across, its banner whole. ---- */
.demo[data-layout="compact"] { --w: 358px; --h: 470px; width: 358px; max-width: calc(100% - 32px); }
.demo[data-layout="compact"] .demo-window { left: 16px; top: 16px; width: 400px; height: 560px; border-radius: 12px; }
.demo[data-layout="compact"] .demo-url { left: 196px; width: 200px; }
.demo[data-layout="compact"] .demo-body { padding: 18px 58px 0 16px; }
.demo[data-layout="compact"] .demo-top { margin-bottom: 12px; }
.demo[data-layout="compact"] .demo-title { font-size: 22px; }
.demo[data-layout="compact"] .demo-shape { display: none; }
.demo[data-layout="compact"] .demo-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; height: 72px; padding: 0 10px 0 8px; }
.demo[data-layout="compact"] .demo-tile { width: 48px; height: 48px; border-radius: 12px; }
.demo[data-layout="compact"] .demo-name { font-size: 15px; }
.demo[data-layout="compact"] .demo-pill:nth-child(2) { display: none; }
.demo[data-layout="compact"] .demo-price b { font-size: 16px; }
.demo[data-layout="compact"] .demo-phone { --ps: calc(272 / 430); left: 43px; top: 212px; width: 272px; }

@media (prefers-reduced-motion: reduce) {
  .demo-note { transition: none; }
}

/* ---- The results state (/search?q=; site.js "results state"): the bar at the top as the page's search field, the
   title and the shot gone, the results under it. While a transition runs, what leaves is lifted out of the flow at
   its own spot (.leaving, --at) so the new layout is measured at once and the bar travels to it. ---- */
.home-hero { --results-w: 960px; }
/* Search owns the screen: the nav (pill, country and Settings) rides up and away with the bar (site.js plays it), and
   hidden it is out of the tab order and the accessibility tree. The bar takes its place at the top; its glass becomes
   the way home. */
[data-view="results"] .nav { visibility: hidden; opacity: 0; }
[data-view="results"] .home-hero { padding-top: calc(24px + env(safe-area-inset-top)); }
.link-back { display: none; flex: none; place-items: center; width: 36px; height: 36px; margin: 0 -9px; padding: 0; border: 0;
  border-radius: 999px; color: white; background: none; cursor: pointer; transition: background-color .15s, transform .18s var(--ease-out); }
.link-back svg { width: 20px; height: 20px; }
.link-back:hover { background: rgb(255 255 255 / 10%); }
.link-back:active { transform: scale(.92); transition-duration: .06s; }
[data-view="results"] .link-back { display: grid; }
[data-view="results"] .link-bar .link-icon { display: none; }
[data-view="results"] .home-hero > .demo { display: none; }
[data-view="results"] .home-hero .paste-demo { max-width: var(--results-w); margin-top: 0; }
.home-hero > .leaving { display: block !important; position: absolute; left: 0; right: 0; top: var(--at); margin-top: 0 !important; pointer-events: none; }
.home-hero > .demo.leaving { margin: 0 auto !important; }
.results { width: min(var(--results-w), 100% - 2 * var(--gutter)); margin: 28px auto 0; text-align: left; }
.results.leaving { margin: 28px auto 0 !important; }

/* The alert card: the family's own row, on the accent, with Alert me where its price would be. */
.results-alert { margin-bottom: 22px; }
.results-alert .watch { padding: 14px 14px 14px 16px; border-radius: var(--r-card); background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgb(169 209 238 / 16%) inset; }
.results-alert .watch:hover { background: rgb(169 209 238 / 16%); }
.results-alert .product-track { position: relative; z-index: 2; padding: 11px 20px; }

/* The toolbar: the count on the left, the pills on the right. */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 0 2px 12px 6px; }
.results-count { font-size: 15px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.results-count > span:first-child { font-weight: 500; color: var(--label); }
.skel-count { width: 6em; }
.results-tools { display: flex; align-items: center; gap: 8px; }
.results-tools .sort-btn { padding: 9px 12px 9px 16px; gap: 6px; }
.results-tools .sort-btn svg { width: 14px; height: 14px; opacity: .7; }
.results-count, .results-tools .sort-btn { white-space: nowrap; }
.results-tools .pill-short, .results-tools .pill-icon { display: none; }

/* The result cards: the shared item row, one card each, with the arrow to its page. */
.results-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.results-list > li + li { box-shadow: none; }
.results-list .watch { grid-template-columns: 64px minmax(0, 1fr) auto 14px; gap: 18px; padding: 12px 18px 12px 12px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: 0 0 0 1px var(--rim) inset; }
.results-list .watch:hover { background: var(--hover); }
.results-list .watch::after { content: ''; width: 14px; height: 14px; background: var(--label-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease-out), background .2s; }
.results-list .watch:hover::after { transform: translateX(2px); background: var(--label-2); }
.results-list .watch-note { min-height: 1.3em; }
.results-list .watch-note .skel { width: 3.6em; }
.results-none { display: grid; justify-items: center; gap: 18px; padding: 48px 16px; text-align: center; color: var(--label-2); }
.results-none .chips { justify-content: center; }
.results-none .chip { text-decoration: none; }
.results-none .load-failed { padding: 0; }

@media (max-width: 720px) {
  [data-view="results"] .home-hero { padding-top: calc(16px + env(safe-area-inset-top)); }
  .results { margin-top: 20px; }
  /* The shared phone row (styles.css "Finish"): price at the end of the first line, here stacked over its store as on
     Alerts, and the arrow in its own column. */
  .results-alert .watch, .results-list .watch { padding: 10px 12px 10px 10px; gap: 6px 12px; }
  .results-list .watch { grid-template-columns: 52px minmax(0, 1fr) auto 10px; }
  .results-list .watch::after { grid-column: 4; grid-row: 1 / span 2; width: 10px; height: 10px; }
  .results-list .watch .watch-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .results-list .watch-name { font-size: 15px; }
  .results-alert .product-track { padding: 10px 16px; font-size: 14px; }
  /* The toolbar stays one line: short labels, and the sort pill's icon in place of "Sort:" and its chevron. */
  .results-bar { gap: 8px; margin-right: 0; }
  .results-tools { gap: 6px; }
  .results-tools .sort-btn { padding: 9px 12px; }
  .results-tools .pill-full, .results-tools .sort-btn:has(.pill-icon) > svg:not(.pill-icon) { display: none; }
  .results-tools .pill-short, .results-tools .pill-icon { display: inline; }
}