/* The welcome page (tryamora.app/date-night/welcome) and the account page
   (tryamora.app/account), from the Claude Design boards "Welcome Page" and
   "Account Page" (2026-10-12). Every value is the board's own. The boards
   measure their width with a container (cqi units, wide from 760px), so the
   page does too. Dark only; the tokens come from date-night.css. */

@font-face { font-family: "Open Runde"; src: url("/assets/fonts/open-runde-regular.woff2") format("woff2"); font-style: normal; font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("/assets/fonts/open-runde-semibold.woff2") format("woff2"); font-style: normal; font-weight: 600 700; font-display: swap; }

html:has(body.wa-body) { background: #0E1216; }
body.wa-body { margin: 0; background: #0E1216; font-family: var(--dn-font, "SF Pro Rounded", ui-rounded, "Open Runde", system-ui, sans-serif); }
.wa {
  container-type: inline-size;
  position: relative;
  min-height: 100vh; background: #0E1216; color: #E6EBEF;
  -webkit-font-smoothing: antialiased; overflow: clip;
}
.wa a { color: #FF6B9D; text-decoration: none; }
.wa a:hover { color: #E6EBEF; }
.wa button { font-family: inherit; }
.wa :focus-visible { outline: 2px solid #FF6B9D; outline-offset: 2px; }
.wa [hidden] { display: none !important; }
.wa-lockup { display: flex; }
.wa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Navigation */
.wa-nav { position: relative; border-bottom: 1px solid rgba(255,255,255,.06); }
.wa-nav-in {
  max-width: 1280px; margin: 0 auto; box-sizing: border-box;
  height: clamp(60px, 5cqi, 72px); padding: 0 clamp(16px, 2.8cqi, 40px);
  display: flex; align-items: center; justify-content: space-between;
}
.wa-home { display: flex; border-radius: 8px; }
.wa .wa-home:focus-visible { outline-offset: 4px; }
.wa-plans {
  height: 40px; padding: 0 14px; border-radius: 20px; display: flex; align-items: center;
  font-size: 14.5px; font-weight: 500;
}
.wa a.wa-plans { color: #A9B1BA; }
.wa a.wa-plans:hover { color: #E6EBEF; background: rgba(255,255,255,.05); }

/* Welcome: the nav stays on screen, glass over the page. */
.wa-nav.is-sticky {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14,18,22,.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.wa-nav.is-sticky .wa-nav-in { height: 60px; }
.wa-wide { display: none; }
.wa-me {
  height: 40px; padding: 0 4px 0 14px; border-radius: 20px; display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; background: #2A323A; transition: background-color 160ms ease;
}
.wa a.wa-me, .wa a.wa-me:hover { color: #E6EBEF; }
.wa a.wa-me:hover { background: #333C46; }
.wa-me img { width: 32px; height: 32px; display: block; flex: none; }

/* Welcome: signed in, the script sets data-stage="welcome" once it knows the
   names. Until then the page holds back everything below the nav (1.6 s at
   most, if the script never answers), so the heading does not change under
   the reader. */
.mx-js .wa:not([data-stage]) :is(.wa-me, .wa-hero, .wa-foot) { visibility: hidden; animation: wa-hold 0s 1.6s forwards; }
@keyframes wa-hold { to { visibility: visible; } }
.wa h1[tabindex]:focus { outline: none; }

/* Welcome: the two of you */
.wa-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 7.2cqi, 104px) clamp(16px, 2.8cqi, 40px) 0;
}
.wa-hero-glow {
  position: absolute; left: 0; right: 0; top: -72px; height: clamp(640px, 62cqi, 900px); pointer-events: none;
  background: radial-gradient(60% 55% at 50% 0%, rgba(233,30,99,.28), rgba(156,39,176,.12) 45%, transparent 78%);
}
.wa-avatars { --av: 96px; position: relative; display: flex; align-items: center; justify-content: center; height: 116px; }
.wa-halo {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; filter: blur(20px);
  background: radial-gradient(closest-side, rgba(233,30,99,.55), rgba(156,39,176,.25) 55%, transparent);
}
.wa-pop { position: relative; display: block; width: var(--av); height: var(--av); }
.wa-pop + .wa-pop { margin-left: 8px; }
.wa-pop dn-popcorn { display: block !important; width: 100% !important; height: 100% !important; }
/* Before both of you have picked a popcorn: the couple mark, never glowing. */
.wa-mark { position: relative; display: block; width: 116px !important; height: 116px !important; }
.wa-seat {
  position: relative; margin-left: -16px; width: var(--av); height: var(--av); border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; color: #7E8892; background: #161B20;
  border: 2px dashed #59636D; box-shadow: 0 0 0 4px #1A1418;
}
.wa-badge {
  position: absolute; left: 50%; bottom: -8px; width: 40px; height: 40px; margin-left: -20px; border-radius: 20px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #FF4F8B, #E91E63 40%, #9C27B0);
  box-shadow: 0 0 0 4px #1A1418, 0 8px 20px -6px rgba(233,30,99,.9);
}
.wa-badge svg, .wa-seat svg { display: block; }

.wa-words { position: relative; margin-top: clamp(32px, 2.8cqi, 40px); display: grid; gap: 16px; justify-items: center; max-width: 820px; }
.wa-words h1 { margin: 0; font-size: clamp(40px, 4.6cqi, 64px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.wa-who { display: flex; align-items: center; gap: 8px; font-size: clamp(17px, 1.4cqi, 20px); line-height: 1.4; font-weight: 600; }
.wa-pill {
  display: inline-flex; align-items: center; box-sizing: border-box; flex: none;
  height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #E91E63, #FF3D5E); box-shadow: 0 1px 4px rgba(233,30,99,.4);
}
.wa-solo-note { margin: 0; max-width: 440px; font-size: 15px; line-height: 22px; color: #A9B1BA; text-wrap: balance; }

/* Welcome: what to do next. Which block shows depends on the browser: the
   script says (data-browser on .wa); before it does, a laptop-wide window
   gets the Add button and a narrow one the "Chrome on a laptop" card. */
.wa-actions { position: relative; margin-top: 32px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wa-add, .wa-installed, .wa-other { display: none; }
.wa:not([data-browser]) .wa-other,
.wa[data-browser="new"] .wa-add,
.wa[data-browser="other"] .wa-other { display: contents; }
.wa[data-browser="installed"] .wa-installed { display: contents; }

.wa-pool { position: relative; display: inline-flex; }
.wa-pool::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -24px; height: 48px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233,30,99,.9), rgba(156,39,176,.4) 60%, transparent); filter: blur(12px);
}
.wa-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px 0 15px; border: 0; border-radius: 28px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #FF4F8B, #E91E63 40%, #9C27B0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px -8px rgba(80,0,60,.35), 0 2px 6px rgba(0,0,0,.35);
  transition: filter 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.wa .wa-cta, .wa .wa-cta:hover { color: #fff; }
.wa-cta:hover { filter: brightness(1.08); }
.wa-cta:active { transform: scale(.97); filter: brightness(.92); }
.wa-cta-logo { width: 26px; height: 26px; border-radius: 13px; background: #fff; display: grid; place-items: center; }
.wa-cta-logo img { width: 20px; height: 20px; display: block; }

.wa-ok { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.wa-ok span { display: flex; color: #3EDB7C; }
.wa-pin {
  margin-top: 20px; display: flex; align-items: center; gap: 24px; padding: 16px 20px 16px 16px; border-radius: 24px;
  background: #161B20; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); text-align: left; max-width: 640px;
}
.wa-chrome { width: 220px; flex: none; display: grid; gap: 6px; font-family: system-ui, -apple-system, sans-serif; }
.wa-chrome-bar { height: 30px; padding: 0 6px 0 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; background: #35363A; color: #BDC1C6; }
.wa-chrome-url { flex: 1; height: 20px; border-radius: 10px; background: #202124; }
.wa-chrome-ext {
  width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(138,180,248,.18); color: #8AB4F8; box-shadow: 0 0 0 1.5px #FF6B9D;
}
.wa-chrome-ext svg { display: block; }
.wa-chrome-menu { padding: 6px; border-radius: 10px; background: #292A2D; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.wa-chrome-row {
  height: 30px; padding: 0 6px; border-radius: 6px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); font-size: 11.5px; color: #E8EAED;
}
.wa-chrome-row img { width: 15px; height: 15px; display: block; }
.wa-chrome-row > span:nth-child(2) { flex: 1; }
.wa-chrome-pin { width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; color: #8AB4F8; box-shadow: 0 0 0 1.5px #FF6B9D; }
.wa-pin-words { display: grid; gap: 4px; }
.wa-pin-words strong { font-size: 15px; font-weight: 700; }
.wa-pin-words span { font-size: 14px; line-height: 20px; color: #A9B1BA; text-wrap: pretty; }

.wa-elsewhere {
  width: 100%; max-width: 560px; border-radius: 24px; padding: 24px; box-sizing: border-box; display: grid; gap: 20px; text-align: left;
  background: #161B20; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.wa-elsewhere-head { display: flex; gap: 16px; align-items: flex-start; }
.wa-tile { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #2A323A; }
.wa-elsewhere-words { display: grid; gap: 6px; }
.wa-elsewhere-words strong { font-size: 20px; line-height: 26px; font-weight: 700; text-wrap: balance; }
.wa-elsewhere-words span { font-size: 15px; line-height: 22px; color: #A9B1BA; text-wrap: pretty; }
.wa-elsewhere-buttons { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wa-pool-sm { position: relative; display: grid; }
.wa-pool-sm::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -20px; height: 40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233,30,99,.9), rgba(156,39,176,.4) 60%, transparent); filter: blur(12px);
}
.wa-email {
  position: relative; height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #FF4F8B, #E91E63 40%, #9C27B0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: filter 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.wa .wa-email, .wa .wa-email:hover { color: #fff; }
.wa-email:hover { filter: brightness(1.08); }
.wa-email:active { transform: scale(.97); }
.wa-copy {
  height: 50px; border-radius: 25px; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: #E6EBEF; background: #2A323A; cursor: pointer;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.wa-copy:hover { background: #333C46; }
.wa-copy:active { transform: scale(.97); background: #3B4550; }
.wa-copy-icon { display: flex; }
.wa-copy .wa-copied { display: none; color: #3EDB7C; }
.wa-copy.is-copied .wa-copied { display: flex; }
.wa-copy.is-copied .wa-to-copy { display: none; }

/* Footer */
.wa-foot { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 8.3cqi, 120px) clamp(16px, 2.8cqi, 40px) 40px; box-sizing: border-box; }
.wa-foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.06); }
.wa-foot-links { display: flex; gap: 4px; margin-left: -12px; }
.wa-foot-links a { height: 44px; padding: 0 12px; border-radius: 22px; display: flex; align-items: center; font-size: 14.5px; }
.wa .wa-foot-links a { color: #A9B1BA; }
.wa .wa-foot-links a:hover { color: #E6EBEF; background: rgba(255,255,255,.05); }
.wa-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wa-foot-amora { margin: 0; font-size: 13px; color: #7E8892; }
.wa-foot-amora a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wa-copyright { font-size: 13px; color: #7E8892; }

@container (min-width: 760px) {
  .wa-nav.is-sticky .wa-nav-in { height: 72px; }
  .wa-wide { display: flex; }
  .wa-narrow { display: none; }
  .wa-avatars { --av: 128px; height: 150px; }
  .wa-halo { width: 420px; height: 420px; }
  .wa-pop + .wa-pop { margin-left: 12px; }
  .wa-mark { width: 150px !important; height: 150px !important; }
  .wa-seat { margin-left: -22px; }
  .wa-badge { bottom: -4px; }
  .wa:not([data-browser]) .wa-other { display: none; }
  .wa:not([data-browser]) .wa-add { display: contents; }
  .wa-elsewhere-buttons { grid-template-columns: 1fr 1fr; }
}

/* Account */
.wa-account-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(233,30,99,.10), transparent 75%);
}
.wa-main {
  position: relative; max-width: 480px; margin: 0 auto; box-sizing: border-box; display: grid; gap: 24px;
  padding: clamp(48px, 5.5cqi, 80px) clamp(16px, 2.8cqi, 24px) 120px;
}
.wa-intro { display: grid; gap: 8px; text-align: center; }
.wa-intro h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.wa-intro p { margin: 0; font-size: 16px; line-height: 24px; color: #A9B1BA; }
.wa-card { border-radius: 24px; background: #242C34; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.wa-signin { padding: 24px; display: grid; gap: 12px; }
.wa-quiet {
  height: 50px; border-radius: 25px; border: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: #E6EBEF; background: #2A323A; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.wa-quiet:hover { background: #333C46; }
.wa-quiet:active { transform: scale(.97); background: #3B4550; }
.wa-quiet img { width: 18px; height: 18px; display: block; }
.wa-or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #7E8892; padding: 4px 0; }
.wa-or::before, .wa-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.10); }
.wa-field { display: grid; gap: 6px; }
.wa-field-label { font-size: 12px; font-weight: 500; color: #A9B1BA; }
.wa-input {
  height: 46px; border-radius: 16px; display: flex; align-items: center; gap: 8px; padding: 0 16px; box-sizing: border-box;
  background: #1C232A; box-shadow: inset 0 0 0 1px #6B7580;
}
.wa-input:focus-within { box-shadow: inset 0 0 0 2px #FF6B9D; }
/* Only the text field lights the box: the show-password button inside it
   has its own round ring, and both together read as a double ring. */
@supports selector(:has(*)) {
  .wa-input:focus-within { box-shadow: inset 0 0 0 1px #6B7580; }
  .wa-input:has(input:focus) { box-shadow: inset 0 0 0 2px #FF6B9D; }
}
/* The rounded box is the field's one focus ring; the input inside draws none. */
.wa .wa-input input:focus-visible { outline: none; }
/* Browser autofill keeps the dark field and light text (Chrome and Safari
   otherwise paint it pale yellow or blue). */
.wa-input input:-webkit-autofill, .wa-input input:-webkit-autofill:hover, .wa-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #E6EBEF; caret-color: #E6EBEF;
  -webkit-box-shadow: 0 0 0 1000px #1C232A inset; box-shadow: 0 0 0 1000px #1C232A inset;
  transition: background-color 600000s 0s;
}
.wa-input.has-eye { padding-right: 7px; }
/* width 0: Safari sizes an input by its own default width, which pushed the
   sign-in card past a phone's right edge; the flex fill sets the real width. */
.wa-input input {
  flex: 1; width: 0; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; outline: none;
  font: inherit; font-size: 14.5px; color: #E6EBEF;
}
.wa-input input::placeholder { color: #7E8892; opacity: 1; }
.wa-eye {
  width: 32px; height: 32px; border-radius: 16px; border: 0; padding: 0; display: grid; place-items: center;
  color: #A9B1BA; background: transparent; cursor: pointer;
}
.wa-eye:hover { background: rgba(255,255,255,.05); color: #E6EBEF; }
/* A 44 point tap area around the 32 point circle. */
.wa-eye { position: relative; }
.wa-eye::before { content: ""; position: absolute; inset: -6px; }
.wa-eye svg { display: block; }
.wa-pool-btn { position: relative; display: grid; }
.wa-pool-btn::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -22px; height: 44px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233,30,99,.9), rgba(156,39,176,.4) 60%, transparent); filter: blur(12px);
}
.wa-signin .wa-pool-btn { margin-top: 8px; }
.wa-primary {
  position: relative; height: 50px; border-radius: 25px; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #FF4F8B, #E91E63 40%, #9C27B0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px -8px rgba(80,0,60,.35), 0 2px 6px rgba(0,0,0,.35);
  transition: filter 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.wa .wa-primary, .wa .wa-primary:hover { color: #fff; }
.wa-primary:hover { filter: brightness(1.08); }
.wa-primary:active { transform: scale(.97); filter: brightness(.92); }
.wa button:disabled { cursor: default; opacity: .6; }

.wa-me-head { display: flex; align-items: center; gap: 16px; }
.wa-me-head > dn-popcorn, .wa-me-head > dn-moment, .wa-me-head > img { width: 64px !important; height: 64px !important; display: block !important; flex: none; }
.wa-me-words { display: grid; gap: 2px; min-width: 0; }
.wa-me-words h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.wa-me-words span { font-size: 14px; color: #A9B1BA; overflow-wrap: anywhere; }

.wa-rows { overflow: hidden; }
.wa-row {
  min-height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wa-row + .wa-row { border-top: 1px solid rgba(255,255,255,.06); }
.wa-row-label { font-size: 15px; color: #A9B1BA; }
.wa-row-value { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wa-small-pill {
  display: inline-flex; align-items: center; box-sizing: border-box; flex: none; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #E91E63, #FF3D5E); box-shadow: 0 1px 4px rgba(233,30,99,.4);
}
.wa-small-pill.is-pro { color: #3D2400; background: linear-gradient(90deg, #FFB347, #FFD700); box-shadow: 0 1px 4px rgba(255,179,71,.4); }
.wa-faces { display: flex; }
.wa-faces > * { width: 24px; height: 24px; display: block; flex: none; }
.wa-faces > * + * { margin-left: 2px; }

.wa-note {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px;
  background: #1C232A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 14.5px; line-height: 21px;
}
.wa-note-icon { display: flex; color: #A9B1BA; padding-top: 1px; }
.wa-note.is-error { background: rgba(224,100,92,.12); box-shadow: inset 0 0 0 1px rgba(224,100,92,.28); }
.wa-note.is-error .wa-note-icon { color: #FF8A80; }
.wa-manage {
  height: 56px; padding: 0 20px; border-radius: 20px; border: 0; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; color: #E6EBEF; background: #2A323A; cursor: pointer; width: 100%;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.wa-manage:hover { background: #333C46; }
.wa-manage:active { transform: scale(.98); background: #3B4550; }
.wa-manage span { display: flex; color: #A9B1BA; }
.wa-offer {
  border-radius: 24px; padding: 24px; display: grid; gap: 16px;
  background: radial-gradient(ellipse 90% 160px at 50% 0%, rgba(233,30,99,.2), transparent), #211A28;
  box-shadow: inset 0 0 0 1px rgba(255,107,157,.85), 0 0 6px rgba(255,79,139,.4), 0 0 26px rgba(233,30,99,.16);
}
.wa-offer-words { display: grid; gap: 4px; }
.wa-offer-words strong { font-size: 18px; line-height: 24px; font-weight: 700; }
.wa-offer-words span { font-size: 14.5px; line-height: 21px; color: #A9B1BA; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.wa-offer .wa-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px -8px rgba(80,0,60,.35); }
.wa-failed { padding: 40px 24px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.wa-failed-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #FF8A80; background: rgba(224,100,92,.14); }
.wa-failed strong { font-size: 16px; line-height: 22px; font-weight: 600; }
.wa-refresh {
  height: 44px; padding: 0 20px; border-radius: 22px; border: 0; display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: #E6EBEF; background: #2A323A; cursor: pointer;
}
.wa-refresh:hover { background: #333C46; }
.wa-refresh:active { transform: scale(.97); background: #3B4550; }
.wa-signout {
  justify-self: center; height: 44px; padding: 0 18px; margin-top: 8px; border-radius: 22px; border: 0;
  display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #A9B1BA; background: transparent; cursor: pointer;
}
.wa-signout:hover { background: rgba(255,255,255,.05); color: #E6EBEF; }
.wa-signout:active { transform: scale(.97); background: rgba(255,255,255,.08); }
.wa-main[aria-busy="true"] > .wa-wait { min-height: 240px; }

@media (prefers-reduced-motion: reduce) {
  .wa *, .wa *::before { transition: none !important; }
}

/* Under Open date night when Chrome would not open the popup (open-fallback.js). */
.dn-open-fallback { display: block; margin-top: 10px; font-size: 13.5px; line-height: 19px; color: var(--dn-text-2, #AAAAAA); text-align: center; text-wrap: balance; }

/* Korean breaks lines between words, never inside one. */
:lang(ko) { word-break: keep-all; }

/* What to watch together (DN-9, signed in): date night's shelves for a Max
   couple. Wide covers, because the services' own pictures are wide (Riley
   picked wide rows, 2026-10-23); each row scrolls sideways and the next cover
   peeks in at the edge. */
.wa-watch { display: grid; gap: 32px; margin-top: 8px; }
.wa-watch-group { display: grid; gap: 20px; }
.wa-watch-kind { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A9B1BA; }
.wa-watch-head { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.wa-watch-shelf { display: grid; gap: 10px; }
.wa-watch-name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.wa-watch-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 calc(-1 * clamp(16px, 2.8cqi, 24px)); padding: 0 clamp(16px, 2.8cqi, 24px);
  scroll-padding-inline: clamp(16px, 2.8cqi, 24px);
}
.wa-watch-row::-webkit-scrollbar { display: none; }
.wa .wa-watch-card { color: #E6EBEF; }
.wa-watch-card { flex: none; width: 172px; display: grid; gap: 8px; scroll-snap-align: start; text-decoration: none; border-radius: 10px; }
.wa-watch-card:focus-visible { outline: 2px solid #FF6B9D; outline-offset: 2px; }
.wa-watch-pic {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #2A323A center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform 160ms cubic-bezier(.23,1,.32,1), filter 160ms ease;
}
.wa-watch-card:hover .wa-watch-pic { transform: translateY(-2px); filter: brightness(1.06); }
.wa-watch-card:active .wa-watch-pic { transform: scale(.98); }
.wa-watch-rank {
  position: absolute; left: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box;
  border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(18,24,28,.55); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.wa-watch-pic-name { display: none; }
/* A picture that did not load: the show's name on the tile instead. */
.wa-watch-pic.is-broken { background: linear-gradient(160deg, #2A323A, #1F262D); }
.wa-watch-pic.is-broken .wa-watch-pic-name {
  position: absolute; inset: 0; padding: 10px 12px 28px; display: flex; align-items: flex-end;
  font-size: 15px; line-height: 19px; font-weight: 700; color: #E6EBEF; text-wrap: balance;
}
.wa-watch-mark { position: absolute; left: 9px; bottom: 8px; width: 9px; height: 16px; }
.wa-watch-line { font-size: 13px; line-height: 17px; color: #A9B1BA; font-variant-numeric: tabular-nums; margin-top: -4px; }
.wa-watch-title {
  font-size: 14px; line-height: 19px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .wa-watch-pic { transition: none; }
  .wa-watch-card:hover .wa-watch-pic, .wa-watch-card:active .wa-watch-pic { transform: none; }
}