/*
 * DueBoard website. Uses the same four study themes as the dashboard (src/entrypoints/dashboard/dashboard.css):
 * Morning Dew, Noon Cafe, Dusk Lullaby and Nightowl. theme.js picks one by the time of day (like Automatic in the
 * extension) or the visitor's choice; without JavaScript the page follows the system light/dark setting.
 * Any element can carry data-theme, so the theme preview cards render in their own palette.
 */
:root,
[data-theme='morning-dew'] {
  --page: #eef5f3;
  --glow-a: rgb(206 231 225 / 0.58);
  --glow-b: rgb(214 230 242 / 0.54);
  --shell: rgb(253 255 254 / 0.97);
  --surface: #ffffff;
  --subtle: #f3f8f6;
  --ink: #263330;
  --muted: #5f6f6a;
  --faint: #7c8b86;
  --line: #e2ece8;
  --accent: #5e9a89;
  --accent-strong: #3f7a6a;
  --btn: #3f7a6a;
  --on-btn: #ffffff;
  --accent-soft: #dcece7;
  --hover: #eaf3f0;
  --next-a: #dfeee9;
  --next-b: #e2edf6;
  --timer: #f6edcf;
  --course-1: #e2f0eb;
  --course-2: #e3edf5;
  --course-3: #f6edcf;
  --course-4: #e9e5f3;
  --countdown: #477d70;
  --overlay: rgb(255 255 255 / 0.56);
  --shadow: rgb(65 58 87 / 0.1);
  color-scheme: light;
}

[data-theme='noon-cafe'] {
  --page: #f5efe5;
  --glow-a: rgb(239 205 163 / 0.48);
  --glow-b: rgb(223 191 159 / 0.4);
  --shell: rgb(255 252 246 / 0.97);
  --surface: #fffdf9;
  --subtle: #f8f1e7;
  --ink: #43372f;
  --muted: #74645a;
  --faint: #8f7f72;
  --line: #eadfd2;
  --accent: #b26f48;
  --accent-strong: #965a37;
  --btn: #965a37;
  --on-btn: #ffffff;
  --accent-soft: #f2ddcc;
  --hover: #f4e7da;
  --next-a: #f2dfca;
  --next-b: #f3cdb8;
  --timer: #efe4c8;
  --course-1: #eee0c8;
  --course-2: #f3d2bf;
  --course-3: #e7d8c5;
  --course-4: #d9e3d5;
  --countdown: #9a5d3c;
  --overlay: rgb(255 255 255 / 0.56);
  --shadow: rgb(65 58 87 / 0.1);
  color-scheme: light;
}

[data-theme='dusk-lullaby'] {
  --page: #281724;
  --glow-a: rgb(190 99 112 / 0.3);
  --glow-b: rgb(137 82 124 / 0.34);
  --shell: rgb(53 31 49 / 0.98);
  --surface: #452c42;
  --subtle: #51364d;
  --ink: #faedf0;
  --muted: #d4b6bd;
  --faint: #b898a2;
  --line: #68465f;
  --accent: #e09aa9;
  --accent-strong: #f0b0bb;
  --btn: #e09aa9;
  --on-btn: #281724;
  --accent-soft: #684252;
  --hover: #5c3d56;
  --next-a: #684052;
  --next-b: #59405b;
  --timer: #60483f;
  --course-1: #564250;
  --course-2: #683f55;
  --course-3: #634b3f;
  --course-4: #55405f;
  --countdown: #f0b0bb;
  --overlay: rgb(255 255 255 / 0.08);
  --shadow: rgb(0 0 0 / 0.25);
  color-scheme: dark;
}

[data-theme='nightowl'] {
  --page: #11131d;
  --glow-a: rgb(82 75 151 / 0.28);
  --glow-b: rgb(58 101 122 / 0.24);
  --shell: rgb(24 26 39 / 0.98);
  --surface: #202334;
  --subtle: #292c40;
  --ink: #eef0fa;
  --muted: #aeb3c9;
  --faint: #8f94ac;
  --line: #34384f;
  --accent: #8f86e8;
  --accent-strong: #a69fff;
  --btn: #8f86e8;
  --on-btn: #11131d;
  --accent-soft: #343353;
  --hover: #30334a;
  --next-a: #292b48;
  --next-b: #233947;
  --timer: #343044;
  --course-1: #253a3d;
  --course-2: #352e49;
  --course-3: #3b3540;
  --course-4: #27384c;
  --countdown: #a69fff;
  --overlay: rgb(255 255 255 / 0.09);
  --shadow: rgb(0 0 0 / 0.28);
  color-scheme: dark;
}

/* No JavaScript: follow the system setting with Nightowl for dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page: #11131d; --glow-a: rgb(82 75 151 / 0.28); --glow-b: rgb(58 101 122 / 0.24); --shell: rgb(24 26 39 / 0.98);
    --surface: #202334; --subtle: #292c40; --ink: #eef0fa; --muted: #aeb3c9; --faint: #8f94ac; --line: #34384f;
    --accent: #8f86e8; --accent-strong: #a69fff; --btn: #8f86e8; --on-btn: #11131d; --accent-soft: #343353; --hover: #30334a; --next-a: #292b48;
    --next-b: #233947; --timer: #343044; --course-1: #253a3d; --course-2: #352e49; --course-3: #3b3540;
    --course-4: #27384c; --countdown: #a69fff; --overlay: rgb(255 255 255 / 0.09); --shadow: rgb(0 0 0 / 0.28);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  background:
    radial-gradient(circle at 8% 5%, var(--glow-a), transparent 25%),
    radial-gradient(circle at 92% 88%, var(--glow-b), transparent 27%),
    var(--page);
  color: var(--ink);
  line-height: 1.6;
  font-family: 'Geist Variable', Geist, Inter, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 1.4s ease, color 1.4s ease;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent-strong); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
code, .mono { font-family: 'Geist Mono Variable', 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* The page sits in the same rounded shell as the dashboard. */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--shell);
  box-shadow: 0 22px 70px var(--shadow);
  transition: background-color 1.4s ease, border-color 1.4s ease, box-shadow 1.4s ease;
}

/* ---------- Header ---------- */
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.top-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
nav { display: flex; flex-wrap: wrap; gap: 2px; }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 10px; transition: background-color 180ms ease, color 180ms ease; }
nav a:hover { background: var(--hover); color: var(--ink); }
nav a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-strong); }

.theme-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--subtle); color: var(--ink);
  padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 650;
  transition: transform 180ms ease, background-color 1.4s ease, color 1.4s ease, border-color 1.4s ease;
}
.theme-switch:hover { background: var(--hover); transform: translateY(-1px); }
.theme-switch[hidden] { display: none; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--course-1); box-shadow: inset 0 0 0 1px var(--line); }
.dots i:nth-child(2) { background: var(--course-2); }
.dots i:nth-child(3) { background: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 12px 20px; border: 1px solid transparent; border-radius: 12px;
  background: var(--btn); color: var(--on-btn); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease, box-shadow 300ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--shadow); }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: var(--overlay); color: var(--ink); border-color: var(--line); }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: 14px; border-radius: 10px; }

/* ---------- Home: hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: 40px 0 48px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 600; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; margin: 0 0 20px; letter-spacing: -0.045em; font-weight: 650; }
.hero h1 em { font-style: normal; color: var(--countdown); }
.hero p { font-size: 18px; color: var(--muted); margin: 0 0 28px; max-width: 560px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .note { font-size: 13px; color: var(--faint); margin: 16px 0 0; }

/* Live preview built from the dashboard's next-deadline card and focus timer. */
.preview { display: grid; gap: 14px; animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.card {
  position: relative; overflow: hidden; border-radius: 20px; padding: 22px 24px; color: var(--ink);
  transition: background-color 1.4s ease;
}
.card::after {
  position: absolute; top: -38px; right: 10%; width: 125px; height: 125px;
  border: 24px solid var(--overlay); border-radius: 50%; content: ''; pointer-events: none;
}
.next-card { background: radial-gradient(circle at 88% 25%, var(--overlay), transparent 28%), linear-gradient(135deg, var(--next-a), var(--next-b)); }
.timer-card { background: var(--timer); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.card > * { position: relative; z-index: 1; }
.label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-strong); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pulse::before { position: absolute; inset: 0; border-radius: 50%; background: currentColor; content: ''; animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.02em; }
.swatch { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: #e0699a; box-shadow: 0 0 0 3px var(--overlay); }
.card .sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.countdown { display: block; margin: 14px 0 16px; color: var(--countdown); font-size: clamp(34px, 4.6vw, 52px); font-weight: 560; line-height: 1; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clock { color: var(--countdown); font-size: clamp(30px, 3.6vw, 42px); font-weight: 520; line-height: 1; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; }
.modes { display: inline-flex; gap: 4px; margin: 0 0 10px; padding: 3px; border-radius: 999px; background: var(--overlay); }
.modes button { border: 0; border-radius: 999px; background: transparent; color: var(--muted); padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.modes button[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }

/* Screenshot in a browser-style frame. */
.shot-frame { margin: 0 0 72px; border: 1px solid var(--line); border-radius: 20px; background: var(--subtle); overflow: hidden; box-shadow: 0 24px 60px var(--shadow); }
.shot-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot { display: none; width: 100%; height: auto; }
/* Show the screenshot of whichever theme the page is in. */
:root:not([data-theme]) .shot[data-shot='morning-dew'],
[data-theme='morning-dew'] .shot[data-shot='morning-dew'],
[data-theme='noon-cafe'] .shot[data-shot='noon-cafe'],
[data-theme='dusk-lullaby'] .shot[data-shot='dusk-lullaby'],
[data-theme='nightowl'] .shot[data-shot='nightowl'] { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot[data-shot='morning-dew'] { display: none; }
  :root:not([data-theme]) .shot[data-shot='nightowl'] { display: block; }
}

/* ---------- Home: sections ---------- */
.section-head { margin: 0 0 20px; }
.section-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; font-weight: 650; }
.section-head h2::after { margin-left: 8px; color: var(--faint); content: '›'; }
.section-head p { margin: 6px 0 0; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 72px; }
.feature {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  background: var(--course-1); transition: transform 200ms ease, box-shadow 200ms ease, background-color 1.4s ease;
}
.feature:nth-child(4n + 2) { background: var(--course-2); }
.feature:nth-child(4n + 3) { background: var(--course-3); }
.feature:nth-child(4n + 4) { background: var(--course-4); }
.feature::after {
  position: absolute; top: -24px; right: -24px; width: 92px; height: 92px;
  border: 18px solid var(--overlay); border-radius: 50%; content: ''; pointer-events: none;
}
.feature > * { position: relative; z-index: 1; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shadow); }
.feature h3 { position: relative; font-size: 17px; margin: 0 0 8px; letter-spacing: -0.01em; }
.feature p { position: relative; margin: 0; color: var(--muted); font-size: 15px; }
.feature .new { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--surface); color: var(--accent-strong); font-size: 11px; font-weight: 700; vertical-align: 2px; }

/* Theme gallery: each card renders in its own palette. */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 72px; }
.theme-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 200px;
  padding: 20px; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; text-align: left; font: inherit;
  background:
    radial-gradient(circle at 10% 0%, var(--glow-a), transparent 45%),
    radial-gradient(circle at 100% 100%, var(--glow-b), transparent 50%),
    var(--page);
  color: var(--ink);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.theme-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shadow); }
.theme-card[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--accent), 0 14px 28px var(--shadow); }
.theme-card .time { color: var(--muted); font-size: 13px; }
.theme-card strong { font-size: 18px; letter-spacing: -0.02em; }
.theme-card .mini { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--next-a), var(--next-b)); }
.theme-card .mini span { display: block; color: var(--countdown); font-size: 22px; font-weight: 560; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.theme-card .chips { display: flex; gap: 6px; }
.theme-card .chips i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--course-1); }
.theme-card .chips i:nth-child(2) { background: var(--course-2); }
.theme-card .chips i:nth-child(3) { background: var(--course-3); }
.theme-card .chips i:nth-child(4) { background: var(--accent); }
.themes-note { margin: -56px 0 72px; color: var(--faint); font-size: 14px; }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn[aria-pressed='true'] { color: var(--faint); text-decoration: none; cursor: default; }

.privacy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 20px; padding: 28px; margin-bottom: 56px; background: var(--accent-soft);
}
.privacy h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.02em; }
.privacy p { margin: 0; color: var(--muted); max-width: 640px; }

footer { border-top: 1px solid var(--line); padding: 24px 0 32px; color: var(--faint); font-size: 13px; }

/* ---------- Privacy policy page ---------- */
.doc { max-width: 760px; padding-bottom: 64px; }
.doc h1 { font-size: clamp(30px, 4.5vw, 40px); letter-spacing: -0.03em; margin: 24px 0 8px; }
.doc h2 { font-size: 20px; margin: 36px 0 8px; letter-spacing: -0.01em; }
.doc .lang { color: var(--faint); font-size: 14px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.doc code, .guide code { font-size: 0.9em; background: var(--subtle); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }

/* ---------- Install guide ---------- */
.guide { max-width: 760px; margin: 0 auto; padding-bottom: 48px; }
.guide h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1; letter-spacing: -0.035em; margin: 24px 0 12px; }
.guide .lede { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.steps { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; }
.step { counter-increment: step; position: relative; padding: 0 0 40px 56px; }
.step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 4px var(--shell); font-weight: 700; display: grid; place-items: center; }
.step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; background: var(--line); }
.step h2 { font-size: 20px; margin: 4px 0 8px; letter-spacing: -0.01em; }
.step p, .step ul { margin: 0 0 12px; }
.step ul { padding-left: 20px; }
.step .btn { margin-top: 4px; }
.tip { font-size: 14px; color: var(--faint); }
.step figure { margin: 16px 0 0; }
.step figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px var(--shadow); background: #fff; }
.step figure img.narrow { max-width: 480px; }
.step figcaption { font-size: 14px; color: var(--faint); margin-top: 8px; }
.inline-icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--muted); }
.tree { margin: 12px 0 0; padding: 14px 16px; background: var(--subtle); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; }
.tree .row { padding: 3px 0 3px 22px; position: relative; }
.tree .row::before { position: absolute; left: 0; }
.tree .folder::before { content: '📁'; }
.tree .file::before { content: '📄'; }
.tree .in1 { margin-left: 22px; }
.tree .in2 { margin-left: 44px; color: var(--muted); }
.tree .pick { font-weight: 600; }
.tree .tag { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.faq h2 { font-size: 22px; margin: 8px 0 12px; }
.faq details { background: var(--subtle); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
::view-transition-old(root) { animation: fade-out 700ms ease-in-out both; }
::view-transition-new(root) { animation: fade-in 700ms ease-in-out both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
}
@media (max-width: 600px) {
  body { padding: 8px; }
  .wrap { border-radius: 22px; padding: 0 16px; }
  header.top { padding: 16px 0; }
  nav a { padding: 8px 9px; }
  .card { padding: 18px; }
  .step { padding-left: 46px; }
  .step::before { width: 30px; height: 30px; }
  .step:not(:last-child)::after { left: 14px; top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}