/* foodlife.app, in the app's own brand: FoodLife/FoodLife/FoodLifeTheme.swift and
   BrandMark.swift. Teal leads, pink is the accent, greys are tinted toward teal, never
   neutral. Light by default, and the app's dark palette under prefers-color-scheme. */
:root {
  --canvas:#F4F6F5; --surface:#FFFFFF; --separator:#E2E7E5;
  --ink:#16211F; --ink2:#5B6764; --ink3:#8A9693;
  --teal:#3E8E82; --teal-text:#2C6A60; --teal-tint:#EAF3F1; --pink:#D6336C;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:#0E1413; --surface:#18201F; --separator:#2C3735;
    --ink:#F2F5F4; --ink2:#A3AFAC; --ink3:#6F7B78;
    --teal:#5FB3A5; --teal-text:#5FB3A5; --teal-tint:#1B2A27;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:17px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
main { max-width:640px; margin:0 auto; padding:24px 16px 48px; }

.brand { display:flex; align-items:center; gap:12px; text-decoration:none; margin:0 0 36px; }
.brand img { height:22px; width:auto; }
.wordmark { font:700 30px/1 var(--rounded); letter-spacing:-0.03em; }
.wordmark .food { color:var(--pink); }
.wordmark .life { color:var(--teal); }

h1, h2, h3 { font-family:var(--rounded); color:var(--ink); }
h1 { font-size:28px; line-height:1.2; font-weight:700; margin:0 0 8px; }
h2 { font-size:22px; font-weight:600; margin:36px 0 12px; }
h3 { font-size:17px; font-weight:600; margin:0 0 4px; }
p { margin:0 0 14px; color:var(--ink2); }
.lede { font-size:17px; color:var(--ink2); }
strong { color:var(--ink); font-weight:600; }
a { color:var(--teal-text); text-underline-offset:3px; }

.card { background:var(--surface); border:1px solid var(--separator); border-radius:20px; padding:16px; margin:0 0 12px; }
.card p:last-child { margin-bottom:0; }
.button { display:block; text-align:center; background:var(--teal); color:#fff; text-decoration:none;
          font:600 17px/1 var(--rounded); border-radius:16px; padding:16px; margin:8px 0 14px; }
@media (prefers-color-scheme: dark) { .button { color:#0E1413; } }

.hero { text-align:center; padding:24px 0 8px; }
.hero .icon { width:120px; height:120px; border-radius:27px; display:block; margin:0 auto 24px;
              box-shadow:0 10px 30px rgba(22,33,31,.12); }
.hero h1 { font-size:34px; }
.hero .lede { max-width:460px; margin:0 auto 20px; }
.pill { display:inline-block; background:var(--teal-tint); color:var(--teal-text); border-radius:999px;
        padding:6px 14px; font:600 15px/1.2 var(--rounded); }
.quote { font-family:var(--rounded); font-size:19px; color:var(--ink); }

footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--separator); color:var(--ink3); font-size:14px; text-align:center; }
footer a { color:var(--ink3); }

/* The films, the preview page and the password screen. */
main.wide { max-width:960px; }
.center { text-align:center; }
.film { display:block; width:100%; height:auto; border-radius:20px; background:var(--surface);
        border:1px solid var(--separator); }
/* Sized by the film itself — width follows the height cap — so no card shows beside a
   vertical film that is narrower than the screen. */
.hero-film { width:auto; max-width:100%; max-height:80vh; margin:0 auto 24px; cursor:pointer;
             background:none; border:0; }
.films { display:grid; gap:16px; margin:0 0 12px; }
.wide-films { grid-template-columns:1fr; }
.tall-films { grid-template-columns:1fr 1fr; max-width:640px; }
@media (min-width: 900px) { .wide-films { grid-template-columns:1fr 1fr; } }
figure { margin:0; }
figcaption { font:600 15px/1.2 var(--rounded); color:var(--ink2); text-align:center; margin-top:8px; }

.gate { max-width:360px; padding-top:12vh; text-align:center; }
.gate .icon { width:88px; height:88px; border-radius:20px; display:block; margin:0 auto 16px; }
.gate .wordmark { margin:0 0 16px; }
.field { width:100%; font:17px var(--body); padding:14px 16px; border-radius:12px; border:1px solid var(--separator);
         background:var(--surface); color:var(--ink); margin:8px 0 4px; }
.field:focus { outline:2px solid var(--teal); outline-offset:1px; }
.error { color:var(--pink); font-size:15px; margin:6px 0 0; }
.gate .button { width:100%; border:0; cursor:pointer; }

/* The preview page's player: the film, a round play button while paused, a progress line and a
   full-screen button — nothing laid over the picture while it plays. */
.player { position:relative; }
.player .film { cursor:pointer; }
.player .play { position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
                border-radius:50%; background:rgba(22,33,31,.55); cursor:pointer; transition:opacity .2s; }
.player .play::after { content:""; position:absolute; left:26px; top:20px; border-style:solid;
                       border-width:12px 0 12px 20px; border-color:transparent transparent transparent #fff; }
.player.playing .play { opacity:0; pointer-events:none; }
.player .fullscreen { position:absolute; right:10px; bottom:12px; width:32px; height:32px; border:0; padding:0;
                      border-radius:8px; background:rgba(22,33,31,.45); cursor:pointer; opacity:.85; }
.player .fullscreen svg { width:16px; height:16px; display:block; margin:auto; }
.player.playing .fullscreen { opacity:.35; }
.player .progress { position:absolute; left:12px; right:12px; bottom:4px; height:3px; border-radius:2px;
                    background:rgba(127,127,127,.25); overflow:hidden; pointer-events:none; }
.player .progress span { display:block; height:100%; width:0; background:var(--teal); }