/* The one stylesheet of otterow.com: the pages Astro builds (site/) and the pages the Worker makes
   (src/index.js) both link it, so they share colours, type, header and footer. */
@font-face { font-family: Figtree; src: url(/fonts/figtree_medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree_semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree_bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree_extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
/* The app's own Fredoka, which has ń ś ć ź ż but not ą ę: those two fall through to Figtree, letter by letter. */
@font-face { font-family: Fredoka; src: url(/fonts/fredoka_semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Fredoka; src: url(/fonts/fredoka_bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #FFF6EA; --s1: #FFEEDB; --s2: #FDE4CC; --card: #FFFFFF; --on: #3A1F2B; --onv: #74505A; --line: #EED3C0;
  --pr: #C23E14; --cta: #FF6B3D; --oncta: #2E0E00; --prc: #FFDCC9; --onprc: #5A1800; --sun: #FFC53D; --sunc: #FFE9A8;
  --coral: #E8799A; --coralc: #FFD6E2; --good: #2E7D4F; --goodc: #D7F0DE; --me: #3A1F2B; --onme: #FFF6EA;
  --sh: 0 1px 2px rgba(58, 31, 43, .05), 0 10px 26px rgba(58, 31, 43, .08);
  /* A tile that sits on a card. In the dark theme a card is already --s1, so the tile steps up. */
  --tile: var(--s1);
  --display: Fredoka, Figtree, system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
}
/* Dark: when the system is dark and the theme button has not said light, or when the button said dark.
   The same values twice, because CSS has no way to share a block between a media query and a selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #23141B; --s1: #2F1D25; --s2: #39252E; --card: #2F1D25; --on: #FFE9DC; --onv: #E2C2C4; --line: #573C46;
    --pr: #FFA27F; --cta: #FF7A4D; --prc: #6E2A12; --onprc: #FFDCC9; --sunc: #4F3A10;
    --coral: #FF8FB1; --coralc: #6E1E3E; --good: #7FD69B; --goodc: #1E4A2C; --me: #FFE9DC; --onme: #23141B;
    --sh: 0 0 0 1px #452E38; --tile: var(--s2);
  
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --bg: #23141B; --s1: #2F1D25; --s2: #39252E; --card: #2F1D25; --on: #FFE9DC; --onv: #E2C2C4; --line: #573C46;
    --pr: #FFA27F; --cta: #FF7A4D; --prc: #6E2A12; --onprc: #FFDCC9; --sunc: #4F3A10;
    --coral: #FF8FB1; --coralc: #6E1E3E; --good: #7FD69B; --goodc: #1E4A2C; --me: #FFE9DC; --onme: #23141B;
    --sh: 0 0 0 1px #452E38; --tile: var(--s2);
  
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* A page shorter than the window still fills it: main takes the spare room and the footer rests on the bottom edge. */
body { min-height: 100dvh; display: flex; flex-direction: column; margin: 0; background: var(--bg); color: var(--on); font: 500 16px/1.5 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.6px; }
h2 { font-size: 24px; line-height: 1.2; }
p, ul, ol { margin: 0; }
a { color: var(--pr); }
a:hover { color: var(--on); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header and footer, the same on every page. */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.site-head .bar { max-width: 1120px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 40px); display: flex; align-items: center; gap: 8px; }
.wordmark { font: 700 26px var(--display); color: var(--pr); letter-spacing: -.5px; text-decoration: none; margin-right: auto; }
.wordmark:hover { color: var(--pr); }
.pill { min-height: 44px; padding: 0 18px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 16px var(--display); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; }
.pill svg { flex: none; }
.pill.go { background: var(--cta); color: var(--oncta); }
.pill.go:hover { filter: brightness(1.05); color: var(--oncta); }
.pill.dark { background: var(--on); color: var(--bg); font-size: 15px; padding: 0 16px 0 12px; }
.pill.dark:hover { color: var(--bg); }
.pill.line { background: transparent; color: var(--on); border: 1px solid var(--line); font: 700 14px Figtree, sans-serif; padding: 0 12px; }
/* The theme button shows where it stands: following the system, light, or dark. */
.theme { width: 44px; padding: 0; }
.theme svg { display: none; }
:root:not([data-theme]) .theme .auto, :root[data-theme="light"] .theme .sun, :root[data-theme="dark"] .theme .moon { display: block; }
/* A narrow phone: everything in the header a little smaller, and on the narrowest no theme button. */
@media (max-width: 419px) {
  .site-head .bar { gap: 6px; }
  .wordmark { font-size: 22px; }
  .pill { padding: 0 13px; font-size: 15px; }
  .pill.line { padding: 0 10px; }
  .theme { width: 40px; min-height: 40px; }
}
@media (max-width: 339px) { .theme { display: none; } }
.site-head details { position: relative; }
.site-head summary { list-style: none; }
.site-head summary::-webkit-details-marker { display: none; }
.sheet { position: absolute; right: 0; top: 52px; min-width: 170px; background: var(--card); border-radius: 18px; box-shadow: var(--sh), 0 10px 30px rgba(0, 0, 0, .12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 40; }
.sheet a { min-height: 44px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; font-weight: 600; font-size: 15px; color: var(--on); text-decoration: none; }
.sheet a:hover, .sheet a[aria-current] { background: var(--s1); }
.sheet a[aria-current]::after { content: "✓"; margin-left: auto; color: var(--pr); font-weight: 800; }
/* On a phone the way home is the arrow alone. */
@media (max-width: 719px) { .pill.dark span { display: none; } .pill.dark { padding: 0 12px; } }

.site-foot { border-top: 1px solid var(--line); color: var(--onv); font-weight: 600; font-size: 14px; }
.site-foot .bar { max-width: 1120px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.site-foot i { flex: 1; }
.site-foot a { color: var(--on); text-decoration: none; }
.site-foot a:hover { color: var(--pr); }

/* The store badges: labels for now (see storeBadges in src/chrome.js). */
.stores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.store { --badge: var(--bg); min-height: 48px; padding: 5px 16px 5px 12px; border-radius: 16px; border: 1px solid var(--line); color: var(--on); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.2; }
.store svg { flex: none; }
.store span { display: flex; flex-direction: column; }
.store small { font-weight: 600; font-size: 11.5px; color: var(--onv); }

/* The pages the Worker makes: a shared workout, a shared row, a room invite, and every "nothing here". One
   narrow column, with Pip and the button that matters on a phone's first screen. */
.share .site-head { position: static; }
.share .site-head .bar, .share .site-foot .bar { max-width: 640px; padding-left: 20px; padding-right: 20px; }
.share .site-foot .bar { justify-content: center; padding-top: 18px; font-size: 13.5px; gap: 8px 18px; }
body > main { flex: 1 0 auto; width: 100%; }
/* A column's children would otherwise grow as wide as their widest line (a row of tabs, a long German word). */
body > * { min-width: 0; max-width: 100%; }
main.page { max-width: 640px; margin: 0 auto; padding: 4px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.pip { display: block; flex: none; }
.pip img { display: block; width: 100%; height: 100%; }
.intro { display: flex; align-items: center; gap: 14px; }
.intro .pip { width: 84px; height: 84px; border-radius: 50%; background: var(--sunc); padding: 6px; }
.intro > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.intro h1, .hero h1, .gone h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.05; letter-spacing: -.5px; }
.say { padding: 7px 12px; border-radius: 16px 16px 16px 4px; background: var(--card); box-shadow: var(--sh); font-weight: 600; font-size: 14.5px; }
.mark { font: 700 20px var(--display); letter-spacing: -.3px; color: var(--pr); }
.lead { color: var(--onv); font-weight: 600; font-size: 15px; }
.fine { color: var(--onv); font-size: 13px; text-align: center; text-wrap: pretty; }
.card { background: var(--card); box-shadow: var(--sh); border-radius: 28px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.bars { height: 28px; display: flex; align-items: flex-end; gap: 3px; }
.bars i { border-radius: 6px; min-width: 3px; }
.phases { list-style: none; padding: 0; }
.phases li { display: flex; align-items: center; gap: 12px; min-height: 42px; border-top: 1px solid var(--line); }
.phases b { width: 10px; height: 28px; border-radius: 5px; flex: none; }
.phases span { flex: 1; font-weight: 600; }
.phases em { font-style: normal; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--onv); text-align: right; }
.more summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--pr); cursor: pointer; border-top: 1px solid var(--line); }
.more[open] summary { display: none; }
.cta { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 28px; background: var(--cta); color: var(--oncta); font: 600 18px var(--display); text-decoration: none; text-align: center; }
.cta:hover { filter: brightness(1.05); color: var(--oncta); }
.cta.dark, .try .cta { background: var(--on); color: var(--bg); min-height: 52px; font-size: 17px; }
.aside { display: flex; align-items: flex-end; gap: 10px; }
.aside .pip { width: 52px; height: 52px; }
.aside .say { background: var(--sunc); box-shadow: none; border-radius: 20px 20px 20px 6px; padding: 12px 16px; font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { min-width: 0; background: var(--tile); border-radius: 18px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.stats b { font-size: clamp(15px, 4.4vw, 22px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats span { color: var(--onv); font-size: clamp(11px, 3.1vw, 12.5px); font-weight: 600; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--goodc); color: var(--good); border-radius: 14px; padding: 6px 12px; font-size: 13.5px; font-weight: 700; }
.try { background: var(--prc); color: var(--onprc); border-radius: 28px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.try b { font: 600 22px/1.2 var(--display); }
.try p { font-size: 15px; }
/* On a phone Pip sits beside the invitation so the Join button stays on the first screen. */
.hero { display: flex; align-items: center; gap: 14px; }
.hero .pip { width: 76px; height: 76px; border-radius: 50%; background: var(--sunc); padding: 6px; }
.hero h1 { font-size: clamp(24px, 6.4vw, 40px); }
.room { font: 600 24px var(--display); }
.crew { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 14.5px; color: var(--onv); }
.faces { display: flex; padding-right: 8px; }
.faces i { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--card); margin-right: -8px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 15px; color: #3A1F2B; }
.codebox { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 8px 8px 8px 16px; border-radius: 20px; background: var(--tile); }
.codebox small { font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--onv); }
.codebox code { grid-row: 2; font: 700 24px ui-monospace, Menlo, monospace; letter-spacing: 3px; white-space: nowrap; }
.codebox .copy { grid-row: 1 / 3; grid-column: 2; }
.copy { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--card); color: var(--on); font: 700 14px Figtree, sans-serif; cursor: pointer; }
.when { font-size: 14px; line-height: 1.45; color: var(--onv); }
.gone { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-top: 16px; }
.gone .pip { width: 150px; height: 150px; border-radius: 50%; background: var(--s2); padding: 12px; }
.gone .lead { max-width: 420px; font-weight: 500; font-size: 16.5px; line-height: 1.55; }
.noapp { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; color: var(--onv); }
@media (min-width: 720px) {
  main.page { gap: 20px; padding-bottom: 48px; }
  .hero { flex-direction: column; text-align: center; gap: 12px; }
  .hero .pip { width: 150px; height: 150px; padding: 10px; }
  .stats { gap: 10px; }
}