/* Direction: LaunchMate — electric blue + violet on soft grey, a crisp startup dashboard */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3f4fa;
  --surface: #ffffff;
  --surface-2: #e7e8ef;
  --border: #d2d4dc;
  --border-strong: #acaeb9;
  --ink: #111533;
  --muted: #5b6080;
  --accent: #2f55f5;
  --accent-hover: #2848d0;
  --accent-ink: #ffffff;
  --accent-text: #2242d6;
  --accent-strong: #2b4ee1;
  --accent-soft: #d8def9;
  --accent-border: #9bacf8;
  --success: #0e8a5f;
  --success-ink: #ffffff;
  --success-soft: #d8e7e7;
  --success-strong: #0b6c4a;
  --warning: #b45f06;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2dd;
  --warning-strong: #995006;
  --danger: #d02a45;
  --danger-ink: #ffffff;
  --danger-soft: #efdce4;
  --danger-strong: #b0243a;
  --chart-1: #2f55f5;
  --chart-2: #7c3aed;
  --chart-3: #0e8a5f;
  --chart-4: #d9822b;
  --chart-5: #d02a45;
  --chart-6: #0891b2;

  --x-violet: #7c3aed;
  --x-on-photo: #ffffff;
  --gradient-brand: linear-gradient(135deg, #2f55f5 0%, #7c3aed 100%);
  --gradient-bar: linear-gradient(90deg, #2f55f5, #7c3aed);
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(17, 21, 51, 0.05), 0 6px 20px -10px rgba(47, 85, 245, 0.18);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030712;
  --surface: #1c202a;
  --surface-2: #10131e;
  --border: #262a33;
  --border-strong: #4f5159;
  --ink: #f3f4fa;
  --muted: #93959d;
  --accent: #2f55f5;
  --accent-hover: #4e6ff7;
  --accent-ink: #ffffff;
  --accent-text: #6a86f9;
  --accent-strong: #5d7bf8;
  --accent-soft: #0d1844;
  --accent-border: #172a78;
  --success: #0e8a5f;
  --success-ink: #ffffff;
  --success-soft: #052423;
  --success-strong: #339c78;
  --warning: #b45f06;
  --warning-ink: #ffffff;
  --warning-soft: #2a1a0f;
  --warning-strong: #c0782c;
  --danger: #d02a45;
  --danger-ink: #ffffff;
  --danger-soft: #300f1d;
  --danger-strong: #da596f;
  --chart-1: #345cfc;
  --chart-2: #d343d7;
  --chart-3: #ee0c1f;
  --chart-4: #a78110;
  --chart-5: #159a3a;
  --chart-6: #169baa;
}

/* LaunchMate — app-specific pieces */
.grad-brand { background: var(--gradient-brand); color: var(--x-on-photo); }
.grad-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-link { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--muted); transition: background .15s, color .15s; }
.nav-link:hover { background: var(--accent-soft); color: var(--accent-strong); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.nav-link[aria-current="page"] svg { color: var(--accent-text); }

.tab-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0; font-size: .68rem; font-weight: 600; color: var(--muted); flex: 1; }
.tab-link[aria-current="page"] { color: var(--accent-text); }

.bar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--gradient-bar); transition: width .5s ease; min-width: 0; }
.bar-lg { height: .75rem; }
.bar-ok > span { background: var(--success); }
.bar-warn > span { background: var(--danger); }
.bar-stack { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.bar-stack > span:nth-child(1) { background: var(--success); }
.bar-stack > span:nth-child(2) { background: var(--accent); }
.bar-stack > span:nth-child(3) { background: var(--danger); }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pill-planning { background: var(--surface-2); color: var(--ink); }
.pill-progress { background: var(--accent-soft); color: var(--accent-strong); }
.pill-ready { background: color-mix(in srgb, var(--x-violet) 15%, transparent); color: var(--x-violet); }
.pill-launched { background: var(--success-soft); color: var(--success-strong); }
.pill-hold { background: var(--warning-soft); color: var(--warning-strong); }
.pill-high { background: var(--danger-soft); color: var(--danger-strong); }
.pill-medium { background: var(--warning-soft); color: var(--warning-strong); }
.pill-low { background: var(--success-soft); color: var(--success-strong); }
.pill-overdue { background: var(--danger); color: var(--danger-ink); }
html[data-theme="dark"] .pill-ready { color: color-mix(in srgb, var(--x-violet) 45%, var(--ink)); }

.meta-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--muted); }
.meta-chip svg { width: .95rem; height: .95rem; }

.task-row { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); transition: background .15s; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--surface-2); }
.task-row.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }

.check { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 8px; border: 2px solid var(--border-strong); display: grid; place-items: center; background: var(--surface); color: transparent; transition: all .15s; margin-top: 2px; cursor: pointer; }
.check:hover { border-color: var(--accent); }
.check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check svg { width: 1rem; height: 1rem; }
.check.is-done { background: var(--success); border-color: var(--success); color: var(--success-ink); }

.stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.stat-violet { background: color-mix(in srgb, var(--x-violet) 14%, transparent); color: var(--x-violet); }
.stat-ok { background: var(--success-soft); color: var(--success-strong); }
.stat-warn { background: var(--warning-soft); color: var(--warning-strong); }
.stat-bad { background: var(--danger-soft); color: var(--danger-strong); }

.donut { --p: 0; width: 11rem; height: 11rem; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(var(--success) calc(var(--p) * 1%), var(--surface-2) 0); }
.donut::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--surface); }
.donut > div { position: relative; z-index: 1; text-align: center; }

.avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--gradient-brand); color: var(--x-on-photo); }
.avatar-lg { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; }

.hero-login { background: var(--gradient-brand); color: var(--x-on-photo); position: relative; overflow: hidden; }
.hero-login::before, .hero-login::after { content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); }
.hero-login::before { width: 26rem; height: 26rem; right: -8rem; top: -8rem; }
.hero-login::after { width: 16rem; height: 16rem; left: -5rem; bottom: -4rem; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes lm-rise { from { transform: translateY(10px); } to { transform: none; } }
.rise { animation: lm-rise .45s ease both; }
html.reduced-motion .rise { animation: none; }
.launch-card { transition: transform .15s, box-shadow .15s; }
.launch-card:hover { transform: translateY(-2px); }
html.reduced-motion .launch-card:hover { transform: none; }