/* Marshmallow Cloud (雲朵棉花糖). Light-native, dark on the style.css signals
   only (dark / modern / forest, and auto under a dark system scheme); there
   is no bare prefers-color-scheme block.

   The soft one, in the spirit of the couple and dating apps the audience
   already likes: warm milk ground, no hard lines anywhere, puffy white cards
   floating on a warm blurred shadow, very round corners, apricot for the
   thing to press, lavender and mint as the two quiet sweets beside it. 小釘,
   the mascot (mascot-cloud.svg), stands in for the brand pin, peeks over the
   headline and sits in empty states.

   Motion is gentle (200ms ease): cards float up a little under the pointer,
   buttons squish when pressed; off under reduced motion like every style.

   This style also dresses the app (app.css reads its tokens; the app's own
   extras are the "app" section at the end, all on body:not(.disc)). Every
   Discover-page rule carries .disc so none of it reaches the app.

   Contrast, measured (WCAG 2.x relative luminance):
     light  --ink on ground / ground-2          9.9 / 9.0
            --ink-dim on ground / ground-2 / row 5.2 / 4.7 / 5.5
            --link-ink on ground / row          5.2 / 5.4
            --accent-ink on --accent (apricot)   6.0
            --lav-ink on --lav                   5.8
            --mint-ink on --mint                 4.8
            --apricot-ink on --apricot           5.6
     dark   --ink on ground                    15.1
            --ink-dim on row                    8.5
            --link-ink on row                   8.6
            --accent-ink on --accent            9.2
            the three sweets                    9.0 - 9.5

   Fonts: Fredoka (display) and Nunito (body) are self-hosted Latin subsets
   (static/fonts/fonts.css); CJK falls through to the system sans. */

html[data-discover-style="cloud"] {
  color-scheme: light;
  --ground: #FFF8F3;
  --ground-2: #FDEBDD;
  --row-bg: #FFFFFF;
  --ink: #4A3A4F;
  --ink-dim: #76637C;
  --accent: #FFB38A;
  --accent-ink: #4A3A4F;
  --accent-deep: #F29A6C;
  --link-ink: #8A4FB5;
  --lav: #EDE4FF;
  --lav-ink: #5E47A8;
  --mint: #E2F5EC;
  --mint-ink: #2A7157;
  --apricot: #FFE3D1;
  --apricot-ink: #8A4A2A;
  --blush: #FF9EB5;
  --rule: rgba(74, 58, 79, .1);
  --focus: #7B4FD6;
  --radius: 24px;
  --puff: rgba(242, 154, 108, .18);
  --shadow: 0 8px 22px var(--puff);
  --mascot: url("/static/discover/mascot-cloud.svg");
  --font-display: 'Fredoka', 'PingFang TC', 'Noto Sans TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
  --font-body: 'Nunito', 'PingFang TC', 'Noto Sans TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
  --font-mono: 'Nunito', ui-monospace, Menlo, Consolas, 'Noto Sans TC', monospace;
  --backdrop: rgba(74, 58, 79, .32);
  --shadow-sm: rgba(242, 154, 108, .16);
  --shadow-md: rgba(120, 80, 110, .2);

  /* style.css's tokens, re-pinned so the app, the maps dialog and anything
     inherited from the app shell sit on this ground. They point at this
     style's own tokens, so the dark blocks below only swap the palette. */
  --bg: var(--ground);
  --bg-soft: var(--ground-2);
  --surface: var(--row-bg);
  --surface-alt: var(--ground-2);
  --text: var(--ink);
  --text-soft: var(--ink);
  --text-muted: var(--ink-dim);
  --text-faint: var(--ink-dim);
  --border: var(--rule);
  --border-strong: var(--rule);
  --divider: var(--rule);
  --accent-hover: var(--accent-deep);
  --accent-text: var(--accent-ink);
  --link: var(--link-ink);
}

/* After dark: a lavender night sky; the cards glow softly instead of
   casting a shadow. */
html[data-discover-style="cloud"][data-theme="dark"],
html[data-discover-style="cloud"][data-theme="modern"],
html[data-discover-style="cloud"][data-theme="forest"] {
  color-scheme: dark;
  --ground: #1E1A24;
  --ground-2: #26202D;
  --row-bg: #2C2533;
  --ink: #F6EEF8;
  --ink-dim: #CDBFD3;
  --accent: #FFB38A;
  --accent-ink: #2A1E22;
  --accent-deep: #FFC7A8;
  --link-ink: #D9B8FF;
  --lav: #3A3055;
  --lav-ink: #E4DAFF;
  --mint: #213B33;
  --mint-ink: #BDEFD9;
  --apricot: #4A3226;
  --apricot-ink: #FFD9C2;
  --rule: rgba(246, 238, 248, .12);
  --focus: #C8B6FF;
  --puff: rgba(0, 0, 0, .35);
  --backdrop: rgba(0, 0, 0, .6);
  --shadow-sm: rgba(0, 0, 0, .35);
  --shadow-md: rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  html[data-discover-style="cloud"][data-theme="auto"] {
    color-scheme: dark;
    --ground: #1E1A24;
    --ground-2: #26202D;
    --row-bg: #2C2533;
    --ink: #F6EEF8;
    --ink-dim: #CDBFD3;
    --accent: #FFB38A;
    --accent-ink: #2A1E22;
    --accent-deep: #FFC7A8;
    --link-ink: #D9B8FF;
    --lav: #3A3055;
    --lav-ink: #E4DAFF;
    --mint: #213B33;
    --mint-ink: #BDEFD9;
    --apricot: #4A3226;
    --apricot-ink: #FFD9C2;
    --rule: rgba(246, 238, 248, .12);
    --focus: #C8B6FF;
    --puff: rgba(0, 0, 0, .35);
    --backdrop: rgba(0, 0, 0, .6);
    --shadow-sm: rgba(0, 0, 0, .35);
    --shadow-md: rgba(0, 0, 0, .45);
  }
}

/* ------------------------------------------------------------------ type */
html[data-discover-style="cloud"] body.disc.disc { font-size: 16.5px; line-height: 1.7; }
html[data-discover-style="cloud"] .disc.disc :focus-visible { outline-width: 3px; outline-offset: 3px; }
html[data-discover-style="cloud"] .disc.disc h1,
html[data-discover-style="cloud"] .disc.disc h2 { font-weight: 600; letter-spacing: 0; }
html[data-discover-style="cloud"] .disc.disc h3 { font-weight: 700; }

/* ------------------------------------------------------------------ top bar */
html[data-discover-style="cloud"] .disc .topbar { border-bottom: 0; }
html[data-discover-style="cloud"] .disc .brand { font-weight: 600; font-size: 1.08rem; }
html[data-discover-style="cloud"] .disc .brand-pin { display: none; }
html[data-discover-style="cloud"] .disc .brand::before {
  content: ""; flex: none; width: 24px; height: 27px;
  background: var(--mascot) no-repeat center / contain;
}
html[data-discover-style="cloud"] .disc .topbar-login { font-weight: 700; color: var(--link-ink); }
html[data-discover-style="cloud"] .disc .style-pick > summary { border-radius: 50%; }
html[data-discover-style="cloud"] .disc .dots i { border: 0; }
html[data-discover-style="cloud"] .disc .dots i:nth-child(1) { background: var(--accent); }
html[data-discover-style="cloud"] .disc .dots i:nth-child(2) { background: var(--lav-ink); }
html[data-discover-style="cloud"] .disc .dots i:nth-child(3) { background: var(--mint-ink); }
html[data-discover-style="cloud"] .disc .style-panel {
  border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
}
html[data-discover-style="cloud"] .disc .sw-btn { border: 0; border-radius: 18px; box-shadow: 0 3px 10px var(--puff); }
html[data-discover-style="cloud"] .disc .sw-btn[aria-pressed="true"] { background: var(--apricot); box-shadow: inset 0 0 0 2px var(--accent); }
html[data-discover-style="cloud"] .disc .sw-cur { color: var(--apricot-ink); }
html[data-discover-style="cloud"] .disc .swatch { border-radius: 999px; overflow: hidden; border: 0; }

/* ------------------------------------------------------------------ masthead */
html[data-discover-style="cloud"] .disc .mh-copy { position: relative; }
html[data-discover-style="cloud"] .disc .mh-copy::after {
  content: ""; position: absolute; top: -2px; right: 0; width: 34px; height: 38px;
  background: var(--mascot) no-repeat center / contain; animation: cloud-bob 3.2s ease-in-out infinite;
}
html[data-discover-style="cloud"] .disc .kicker {
  display: flex; width: fit-content; align-items: center; gap: 6px; padding: 3px 14px; margin-bottom: 12px;
  background: var(--lav); color: var(--lav-ink); border-radius: 999px;
  font-weight: 700; font-size: .8rem; letter-spacing: .04em; animation: cloud-pop 200ms ease-out both;
}
html[data-discover-style="cloud"] .disc .kicker::before { content: "\2661" / ""; }
html[data-discover-style="cloud"] .disc .masthead h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem); line-height: 1.22; }
html[data-discover-style="cloud"] .disc .lede { color: var(--ink-dim); }
html[data-discover-style="cloud"] .disc .ticker-lead { font-weight: 700; color: var(--mint-ink); }

/* ------------------------------------------------------------------ buttons */
/* Apricot, puffy: a soft glow under it, and a tap squishes it a little. */
html[data-discover-style="cloud"] .disc .cta,
html[data-discover-style="cloud"] .disc .is-primary {
  border-radius: 999px; border: 0; font-weight: 700; padding: 0 26px;
  box-shadow: 0 6px 16px var(--puff); transition: transform 200ms ease, box-shadow 200ms ease;
}
html[data-discover-style="cloud"] .disc .cta:hover,
html[data-discover-style="cloud"] .disc .is-primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
html[data-discover-style="cloud"] .disc .cta:active,
html[data-discover-style="cloud"] .disc .is-primary:active { transform: scale(.96); box-shadow: 0 2px 6px var(--puff); }
html[data-discover-style="cloud"] .disc .cta-quiet,
html[data-discover-style="cloud"] .disc .save {
  border-radius: 999px; border: 0; background: var(--row-bg); font-weight: 700; box-shadow: 0 4px 12px var(--puff);
}
html[data-discover-style="cloud"] .disc .cta-quiet:hover,
html[data-discover-style="cloud"] .disc .save:hover { background: var(--lav); color: var(--lav-ink); }
html[data-discover-style="cloud"] .disc .maps-trigger.is-icon {
  border-radius: 50%; background: var(--apricot); color: var(--apricot-ink); transition: transform 200ms ease;
}
html[data-discover-style="cloud"] .disc .maps-trigger.is-icon:hover { transform: translateY(-2px); color: var(--apricot-ink); }

/* ------------------------------------------------------------------ chips */
html[data-discover-style="cloud"] .disc .chip {
  border: 0; border-radius: 999px; box-shadow: none; font-weight: 700;
  background: var(--lav); color: var(--lav-ink); transition: transform 200ms ease;
}
html[data-discover-style="cloud"] .disc .chip:nth-of-type(3n+2) { background: var(--mint); color: var(--mint-ink); }
html[data-discover-style="cloud"] .disc .chip:nth-of-type(3n) { background: var(--apricot); color: var(--apricot-ink); }
html[data-discover-style="cloud"] .disc .chip .n { color: inherit; opacity: .8; font-weight: 600; }
html[data-discover-style="cloud"] .disc .chip:hover { transform: translateY(-2px); }
html[data-discover-style="cloud"] .disc .chips .lbl { font-weight: 700; color: var(--ink-dim); }

/* ------------------------------------------------------------------ feed */
html[data-discover-style="cloud"] .disc .sec-head { align-items: center; margin-top: 10px; padding: 12px 0 10px; }
html[data-discover-style="cloud"] .disc .sec-head h2 { font-size: 1.35rem; }
html[data-discover-style="cloud"] .disc .sec-head h2::after { content: " \2727" / ""; color: var(--accent-deep); }
html[data-discover-style="cloud"] .disc .sec-head .n {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--apricot); color: var(--apricot-ink);
  font-weight: 700; font-size: .8rem; animation: cloud-pop 200ms ease-out both;
}

/* Rows are puffy cards floating on the ground: no outline, a warm blurred
   shadow under each, gaps instead of hairlines. */
html[data-discover-style="cloud"] .disc .venues { gap: 14px; margin-bottom: 8px; }
html[data-discover-style="cloud"] .disc .cta-band + .venues { margin-top: 14px; }
html[data-discover-style="cloud"] .disc .venue,
html[data-discover-style="cloud"] .disc .venue + .venue {
  padding: 14px 10px 14px 18px; border: 0; column-gap: 10px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
html[data-discover-style="cloud"] .disc .venue:hover { transform: translateY(-3px); box-shadow: 0 12px 28px var(--puff); }
html[data-discover-style="cloud"] .disc .venue-name { font-size: 1.08rem; font-weight: 700; }
html[data-discover-style="cloud"] .disc .venue-name a:hover { color: var(--link-ink); }
html[data-discover-style="cloud"] .disc .venue .meta { align-items: center; gap: 4px 10px; margin-top: 6px; }
html[data-discover-style="cloud"] .disc .cat {
  display: inline-block; padding: 1px 10px; border-radius: 999px;
  background: var(--mint); color: var(--mint-ink); font-weight: 700; font-size: .76rem;
}
html[data-discover-style="cloud"] .disc .venue:nth-child(3n+2) .cat { background: var(--lav); color: var(--lav-ink); }
html[data-discover-style="cloud"] .disc .venue:nth-child(3n) .cat { background: var(--apricot); color: var(--apricot-ink); }
html[data-discover-style="cloud"] .disc .venue .addr { color: var(--ink-dim); }

html[data-discover-style="cloud"] .disc .cta-band {
  margin: 20px 0; padding: 18px; background: var(--ground-2); border: 0; border-radius: var(--radius);
}
html[data-discover-style="cloud"] .disc .empty {
  padding: 24px 16px; color: var(--ink); background: var(--row-bg); text-align: center;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
html[data-discover-style="cloud"] .disc .empty-actions { justify-content: center; }
html[data-discover-style="cloud"] .disc .empty::before {
  content: ""; display: block; width: 56px; height: 63px; margin: 0 auto 10px;
  background: var(--mascot) no-repeat center / contain;
}
html[data-discover-style="cloud"] .disc .near-note { color: var(--mint-ink); font-weight: 600; }

/* ------------------------------------------------------------------ list + venue */
html[data-discover-style="cloud"] .disc .crumb a {
  color: var(--link-ink); font-weight: 600; text-decoration-style: dotted; text-decoration-color: var(--link-ink);
}
html[data-discover-style="cloud"] .disc .facts li > * {
  border: 0; border-radius: 999px; background: var(--lav); color: var(--lav-ink); font-weight: 700;
}
html[data-discover-style="cloud"] .disc .facts li:first-child > * { background: var(--mint); color: var(--mint-ink); }
html[data-discover-style="cloud"] .disc .facts li > a:hover { background: var(--apricot); color: var(--apricot-ink); }
html[data-discover-style="cloud"] .disc .ext { font-weight: 700; text-underline-offset: 4px; }
html[data-discover-style="cloud"] .disc .intro { font-size: 1.02rem; }
html[data-discover-style="cloud"] .disc .nearby-sec h2,
html[data-discover-style="cloud"] .disc .posts-sec h2 {
  display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--lav); color: var(--lav-ink);
}
html[data-discover-style="cloud"] .disc .nearby li { border-top: 1px solid var(--rule); }
html[data-discover-style="cloud"] .disc .nearby li:first-child { border-top: 0; }
html[data-discover-style="cloud"] .disc .nm { font-weight: 700; }
html[data-discover-style="cloud"] .disc .nmeta { color: var(--mint-ink); font-weight: 600; }
html[data-discover-style="cloud"] .disc .posts li { border-top: 1px solid var(--rule); }
html[data-discover-style="cloud"] .disc .howto {
  padding: 14px 18px; border-radius: var(--radius); background: var(--ground-2); color: var(--ink);
}

/* ------------------------------------------------------------------ picker foot + footer */
html[data-discover-style="cloud"] .disc .style-foot { border-top: 0; }
html[data-discover-style="cloud"] .disc .disc-foot { border-top: 0; }
html[data-discover-style="cloud"] .disc .foot-links a:hover { color: var(--link-ink); }

/* ------------------------------------------------------------------ slide to start */
html[data-discover-style="cloud"] .disc .start-slide { border-top: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -6px 20px var(--puff); }
html[data-discover-style="cloud"] .disc .start-slide-track { border: 0; background: var(--apricot); font-weight: 700; }

/* ------------------------------------------------------------------ maps chooser */
html[data-discover-style="cloud"] .disc #dlg-maps {
  background: var(--row-bg); border: 0; border-radius: 28px; box-shadow: 0 16px 40px var(--shadow-md);
}
html[data-discover-style="cloud"] .disc #dlg-maps h2 { font-weight: 600; }
html[data-discover-style="cloud"] .disc #dlg-maps .maps-chooser-list a { border: 0; border-radius: 999px; background: var(--ground-2); }
html[data-discover-style="cloud"] .disc #dlg-maps .maps-chooser-list a:hover,
html[data-discover-style="cloud"] .disc #dlg-maps .maps-chooser-list a:focus-visible { background: var(--lav); color: var(--lav-ink); }
html[data-discover-style="cloud"] .disc #dlg-maps button { border: 0; border-radius: 999px; background: var(--ground-2); font-weight: 700; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 767.98px) {
  html[data-discover-style="cloud"] .disc.disc--venue .actions {
    border-top: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -6px 20px var(--puff); padding-top: 12px; gap: 10px;
  }
}
@media (max-width: 720px) {
  html[data-discover-style="cloud"] .disc #dlg-maps { border-radius: 28px 28px 0 0; }
}

/* ------------------------------------------------------------------ tablet+ */
@media (min-width: 768px) {
  html[data-discover-style="cloud"] .disc .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  html[data-discover-style="cloud"] .disc .cta-band + .venues { margin-top: 18px; }
  html[data-discover-style="cloud"] .disc .cta-band { justify-content: flex-start; }
  html[data-discover-style="cloud"] .disc .cta-band > a { flex: 0 1 auto; }
  html[data-discover-style="cloud"] .disc .mh-copy::after { width: 48px; height: 54px; top: -10px; }
}

@media (min-width: 1200px) {
  html[data-discover-style="cloud"] .disc .mh-side {
    position: relative; padding: 18px 24px 20px; background: var(--row-bg);
    border-radius: 28px; box-shadow: var(--shadow);
  }
  html[data-discover-style="cloud"] .disc .ticker { position: relative; height: 1.7em; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
  html[data-discover-style="cloud"] .disc .ticker li:not(.dup) {
    position: absolute; inset: 0; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: cloud-float 12s ease-in-out infinite;
  }
  html[data-discover-style="cloud"] .disc .ticker li:nth-child(2) { animation-delay: 3s; }
  html[data-discover-style="cloud"] .disc .ticker li:nth-child(3) { animation-delay: 6s; }
  html[data-discover-style="cloud"] .disc .ticker li:nth-child(4) { animation-delay: 9s; }
}

@keyframes cloud-pop {
  0% { scale: .92; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
@keyframes cloud-float {
  0% { opacity: 0; transform: translateY(8px); }
  3%, 23% { opacity: 1; transform: translateY(0); }
  27%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes cloud-bob {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-discover-style="cloud"] .disc .ticker li:first-child { opacity: 1; }
  html[data-discover-style="cloud"] .disc .cta:hover,
  html[data-discover-style="cloud"] .disc .is-primary:hover,
  html[data-discover-style="cloud"] .disc .venue:hover,
  html[data-discover-style="cloud"] .disc .chip:hover,
  html[data-discover-style="cloud"] .disc .maps-trigger.is-icon:hover { transform: none; }
}

/* ================================================================== app
   The app's own extras on top of app.css (which already gives the app this
   style's colours, type and corners). Cloud has no lines, so app.css's
   rules come off and the puffy shadow takes their place. */
html[data-discover-style="cloud"] body:not(.disc) header { background: var(--ground); border-bottom: 0; box-shadow: 0 4px 16px var(--puff); }
html[data-discover-style="cloud"] body:not(.disc) .header-actions > button,
html[data-discover-style="cloud"] body:not(.disc) .header-actions > #menu-wrap > #btn-menu {
  background: var(--row-bg); border: 0; border-radius: 999px; box-shadow: 0 3px 10px var(--puff);
}
html[data-discover-style="cloud"] body:not(.disc) #sidebar { border: 0; }
html[data-discover-style="cloud"] body:not(.disc) .card,
html[data-discover-style="cloud"] body:not(.disc) .decide-card { border: 0; transition: transform 200ms ease, box-shadow 200ms ease; }
html[data-discover-style="cloud"] body:not(.disc) .card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--puff); }
/* The category filters paint their colour as an inline border-left; with no
   outline round the rest of the pill that edge reads as a stray "(", so the
   pill keeps a soft apricot outline for it to sit in. */
html[data-discover-style="cloud"] body:not(.disc) #filters .chip:not(.active) { background: var(--row-bg); border: 1.5px solid var(--apricot); }
html[data-discover-style="cloud"] body:not(.disc) #search,
html[data-discover-style="cloud"] body:not(.disc) #btn-tools { border-color: transparent; box-shadow: 0 3px 12px var(--puff); }
html[data-discover-style="cloud"] body:not(.disc) dialog { border: 0; box-shadow: 0 18px 44px var(--shadow-md); }
html[data-discover-style="cloud"] body:not(.disc) dialog button:not(.primary) { border-color: transparent; background: var(--ground-2); }
html[data-discover-style="cloud"] body:not(.disc) .leaflet-container { background: var(--ground-2); }
@media (max-width: 720px) {
  html[data-discover-style="cloud"] body:not(.disc) #bottom-tabs { border-top: 0; box-shadow: 0 -4px 18px var(--puff); }
  html[data-discover-style="cloud"] body:not(.disc) #sidebar { border-top: 0; box-shadow: 0 -6px 22px var(--puff); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-discover-style="cloud"] body:not(.disc) .card:hover { transform: none; }
}