/* ullista.app shared styles.
   Colors are the app's own (ullista/lib/theme/app_theme.dart), so the site and
   the app look like one product: soft black #101010, lightness for depth,
   off-white text, calm grey, and the app's one rare accent, blue #2997FF,
   kept for links and focus.
   Display type: Bricolage Grotesque. Its heavy weights have soft, rounded ink
   traps that echo the thick rounded strokes of the U logo.
   Body type: the system stack, which is SF on Apple devices, the font the app
   itself uses. */

:root {
  --bg: oklch(0.163 0 0);          /* #101010 page */
  --surface: oklch(0.205 0 0);     /* #181818 cards */
  --raised: oklch(0.236 0 0);      /* #212121 controls */
  --line: oklch(0.285 0 0);        /* #2B2B2B hairlines */
  --dim: oklch(0.355 0 0);         /* #3A3A3A logo grey: not yet watched (shapes only) */
  --dim-text: oklch(0.52 0 0);     /* the same idea for words: still 3:1+ on the page, large text only */
  --ink: oklch(0.97 0.003 248);    /* #F3F5F7 off-white */
  --muted: oklch(0.69 0 0);        /* #9B9B9B secondary text */
  --accent: oklch(0.66 0.17 252);  /* #2997FF links and focus */
  --red: oklch(0.64 0.17 28);      /* #E0564C spoilers only */

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --radius: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--bg); }
img { max-width: 100%; display: block; }

.skip { position: absolute; left: -9999px; top: 12px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; z-index: 50; }
.skip:focus { left: 12px; }

/* Top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--gutter);
  /* The only blurred surface on the site: keeps the bar readable over
     whatever scrolls under it. */
  background: oklch(0.163 0 0 / 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid oklch(0.285 0 0 / 0.6);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font: 800 17px/1 var(--display); letter-spacing: 0.06em; }
.bar nav { display: flex; gap: 6px; }
.bar nav a {
  font-size: 15px; color: var(--muted); text-decoration: none;
  padding: 11px 14px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
}
.bar nav a:hover { color: var(--ink); background: var(--surface); }
/* Phones: the section links would crowd the name; Support and the
   language switch stay. */
@media (max-width: 560px) {
  .bar nav a.section { display: none; }
}
.bar nav a.lang { color: var(--ink); border: 1px solid var(--line); }

/* Arabic ---------------------------------------------------------------------
   The Arabic face is SF Arabic, Apple's own: every iPhone, iPad and Mac has it
   built in (reached through -apple-system / "SF Arabic"), so it is used where
   it is installed and never served from this site (Apple's license covers
   their platforms, not web hosting). Elsewhere: IBM Plex Sans Arabic, the
   closest free match in tone. The Latin wordmark and figures keep Bricolage.
   Arabic letters join, so no letter-spacing, and a taller line for the
   marks above and below the letters. */
:root:lang(ar) {
  --display: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Arabic Display", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
:root:lang(ar) body { line-height: 1.75; }
:root:lang(ar) :lang(ar) { letter-spacing: 0 !important; }
:root:lang(ar) h1, :root:lang(ar) h2, :root:lang(ar) h3 { font-weight: 700; line-height: 1.3; }
.brand span { font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif; }

/* Footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter) 48px;
  display: grid; gap: 22px;
  grid-template-columns: 1fr auto;
  align-items: start;
  color: var(--muted); font-size: 14px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; }
.foot nav a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot nav a:hover { color: var(--ink); }
.foot p { margin: 0; max-width: 46ch; }
.foot .tmdb { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .foot { grid-template-columns: 1fr; }
  .foot nav { justify-content: flex-start; }
}

/* Long-form pages: privacy, terms, delete account, open */
.doc { max-width: 720px; margin: 0 auto; padding: 128px var(--gutter) 88px; }
.doc h1 {
  font: 800 clamp(40px, 7vw, 68px)/0.98 var(--display);
  letter-spacing: -0.03em; margin: 0 0 18px;
}
.doc .updated { color: var(--muted); margin: 0 0 48px; font-size: 15px; }
.doc h2 { font: 700 22px/1.25 var(--display); letter-spacing: -0.01em; margin: 44px 0 10px; }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .lead { font-size: 20px; color: var(--ink); max-width: 34ch; }
.doc .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0; }
.doc .panel p { margin: 0 0 10px; }
.doc .panel p:last-child { margin: 0; }
.doc ol { padding-left: 22px; }
.doc ol li { margin: 6px 0; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none;
}
.pill:hover { color: var(--bg); background: oklch(0.88 0 0); }