/* ==========================================================================
   Sumarrry: light mode of the Linear theme.
   <html data-theme="linear" data-mode="light">. Viewers get it by default;
   signed-in people choose Light / Dark / System in Settings. The video player
   (and anything drawn on top of video) stays dark in both modes.
   ========================================================================== */

:root[data-theme="linear"][data-mode="light"] {
  --bg: #fbfbfc;
  --sidebar: #f5f5f7;
  --card: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f6f6f8;
  --text: #1b1c1f;
  --text-2: #5d6169;
  --text-3: #8a8e96;
  --border: rgba(16, 18, 24, .085);
  --border-strong: rgba(16, 18, 24, .13);
  --hover: rgba(16, 18, 24, .04);
  --hover-2: rgba(16, 18, 24, .07);
  --input: #ffffff;
  --blue: #5e6ad2;
  --blue-hover: #5260c8;
  --blue-soft: rgba(94, 106, 210, .11);
  --red: #d93f3f;
  --red-soft: rgba(217, 63, 63, .09);
  --green: #2f9e6e;
  --tooltip: #1c1d1f;
  --dd-bg: #ffffff;
  --card-shadow: 0 0 0 1px rgba(16, 18, 24, .08), 0 1px 2px rgba(16, 18, 24, .04);
  --card-shadow-hover: 0 0 0 1px rgba(16, 18, 24, .14), 0 8px 24px rgba(16, 18, 24, .1);
  --pop-shadow: 0 0 0 1px rgba(16, 18, 24, .08), 0 8px 16px rgba(16, 18, 24, .08), 0 24px 48px rgba(16, 18, 24, .12);
  color-scheme: light;
}

[data-mode="light"] body {
  background:
    radial-gradient(1200px 380px at 50% -140px, rgba(94, 106, 210, .08), transparent 70%),
    var(--bg);
}
[data-mode="light"] ::selection { background: rgba(94, 106, 210, .22); }

/* hairlines and fills that were white-on-dark */
[data-mode="light"] .sb-item.active { box-shadow: inset 0 0 0 1px rgba(16, 18, 24, .05); }
[data-mode="light"] .btn-outline { box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(16, 18, 24, .04); }
[data-mode="light"] .input:focus, [data-mode="light"] .textarea:focus { background: #fff; }
[data-mode="light"] .dd-opt.active { background: rgba(16, 18, 24, .06); }
[data-mode="light"] .seg { background: rgba(16, 18, 24, .04); }
[data-mode="light"] .seg::before { background: #fff; box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(16, 18, 24, .08); }
[data-mode="light"] dialog { background: #ffffff; }
[data-mode="light"] .toast { background: #1c1d1f; color: #f7f8f8; }
[data-mode="light"] .code { background: rgba(16, 18, 24, .04); color: #4651b8; }
[data-mode="light"] .progress { background: rgba(16, 18, 24, .07); }
[data-mode="light"] .tag { background: rgba(16, 18, 24, .05); }
[data-mode="light"] .vtab.on { background: #fff; box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(16, 18, 24, .05); }
[data-mode="light"] .vactions { background: #ffffff; box-shadow: var(--pop-shadow); }
[data-mode="light"] .thead { background: rgba(16, 18, 24, .025); }
[data-mode="light"] .trow:not(.thead):hover { background: rgba(16, 18, 24, .03); }
[data-mode="light"] .skel { background: linear-gradient(90deg, rgba(16,18,24,.04) 25%, rgba(16,18,24,.08) 37%, rgba(16,18,24,.04) 63%); background-size: 400% 100%; }
[data-mode="light"] .player { box-shadow: 0 0 0 1px rgba(16, 18, 24, .1), 0 18px 50px rgba(16, 18, 24, .16); }
[data-mode="light"] .react { background: #fff; }
[data-mode="light"] .react:hover { background: rgba(16, 18, 24, .05); }
[data-mode="light"] .comment:hover { background: rgba(16, 18, 24, .03); }
[data-mode="light"] .cform, [data-mode="light"] .watch-page .cform { background: #fff; }
[data-mode="light"] .t-working { background: rgba(16, 18, 24, .03); }
[data-mode="light"] .t-menu { background: #ffffff; box-shadow: var(--pop-shadow); }
[data-mode="light"] .stage { box-shadow: 0 0 0 1px rgba(16, 18, 24, .1), 0 18px 50px rgba(16, 18, 24, .16); }
[data-mode="light"] .mode { background: #fff; }
[data-mode="light"] .login-card { background: #ffffff; box-shadow: var(--pop-shadow); }
[data-mode="light"] .whisper-status { background: rgba(16, 18, 24, .03); }
[data-mode="light"] .ins-tile, [data-mode="light"] .ins-card { background: #fff; }
[data-mode="light"] .ins-tip { background: #fff; box-shadow: var(--pop-shadow); }
[data-mode="light"] .ins-bar:hover { background: rgba(16, 18, 24, .03); }
[data-mode="light"] .ins-country img { box-shadow: 0 0 0 1px rgba(16, 18, 24, .12); }
[data-mode="light"] .watch-page .title-row.editing .page-title { background: #fff; }
[data-mode="light"] .vlink-fav img { background: #fff; }
[data-mode="light"] .empty-mark { box-shadow: 0 0 0 1px rgba(16, 18, 24, .1), 0 10px 30px rgba(16, 18, 24, .12); }
[data-mode="light"] .cmdk-panel { background: #fff; }

/* accent text tuned for a light background */
[data-mode="light"] .chap-t,
[data-mode="light"] .watch-page .t-seg.on .t-time,
[data-mode="light"] .vlink-t { color: #4f5bc4; }
[data-mode="light"] .chap.on { background: rgba(94, 106, 210, .09); }
[data-mode="light"] .t-text mark { background: rgba(255, 196, 0, .35); }

/* panels on the watch page */
[data-mode="light"] .proc,
[data-mode="light"] .vedit,
[data-mode="light"] .watch-page .comments { background: #fff; }
[data-mode="light"] .update { background: #fff; }

/* the editor's film strip and timeline stay dark: they show video frames */
[data-mode="light"] .ve-scroll { background: #1b1c1f; }
[data-mode="light"] .ve-ruler span { background: rgba(255, 255, 255, .18); }
[data-mode="light"] .ve-ruler b { color: rgba(255, 255, 255, .55); }

/* smooth switch */
:root.theme-switching *, :root.theme-switching *::before { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease !important; }

/* top bar, dropdowns and dimmed backdrops */
[data-mode="light"] .topbar { background: rgba(251, 251, 252, .78); }
[data-mode="light"] .dd-pop { background: rgba(255, 255, 255, .98); }
[data-mode="light"] .overlay { background: rgba(16, 18, 24, .35); }
[data-mode="light"] dialog[open]::backdrop { background: rgba(16, 18, 24, .3); }

/* the player: a layered, soft shadow (close contact shadow + wide ambient + a faint
   indigo glow from the accent), instead of one flat blur */
[data-mode="light"] .player {
  box-shadow:
    0 0 0 1px rgba(16, 18, 24, .06),
    0 1px 1px rgba(16, 18, 24, .04),
    0 2px 4px rgba(16, 18, 24, .04),
    0 6px 12px -2px rgba(16, 18, 24, .05),
    0 16px 32px -6px rgba(16, 18, 24, .08),
    0 36px 72px -18px rgba(16, 18, 24, .18),
    0 40px 120px -40px rgba(94, 106, 210, .35);
}
[data-mode="light"] .stage {
  box-shadow:
    0 0 0 1px rgba(16, 18, 24, .06),
    0 2px 4px rgba(16, 18, 24, .04),
    0 16px 32px -6px rgba(16, 18, 24, .08),
    0 36px 72px -18px rgba(16, 18, 24, .18);
}
/* panels: a hairline plus a soft lift */
[data-mode="light"] .watch-page .comments,
[data-mode="light"] .proc,
[data-mode="light"] .vedit {
  box-shadow: 0 0 0 1px rgba(16, 18, 24, .07), 0 1px 2px rgba(16, 18, 24, .04), 0 8px 24px -12px rgba(16, 18, 24, .1);
}