/* YashPapa Website — static stylesheet.
   Design system: preset "developer", Poppins, primary #e5e7eb, sharp buttons,
   bordered cards, compact density, sidebar navigation, squircle components.
   Tokens are identical to frontend/app/globals.css.

   Theming: dark is the default palette in :root. The light palette uses the very
   same token names under html[data-theme="light"], so no component ever hard-codes
   a colour — change the palette here and both themes stay correct. A small inline
   script in every page's <head> writes the attribute before the first paint
   (saved choice in localStorage, otherwise the operating system preference) and
   script.js keeps it in sync when the visitor uses the toggle. */

:root {
  /* shape, type and layout — identical in both themes */
  --radius: 2px; --pad: 0.5rem; --shadow: none;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sidebar: 250px;

  /* ---- dark palette (default) ---- */
  --primary: #e5e7eb;            /* strong ink: buttons, links on hover */
  --secondary: #9ca3af;
  --accent: #f59e0b;             /* decoration: dots, borders, focus ring */
  --accent-ink: #f59e0b;         /* accent when it carries text */
  --bg: #0e0f12;                 /* page background */
  --bg-elevated: #131417;        /* sidebar, sticky bars */
  --bg-sunken: #0a0b0d;          /* terminal and command wells */
  --surface: #212225;            /* cards, inputs */
  --surface-2: #17181c;          /* terminal title bar */
  --text: #e8ecf8;
  --muted: #9aa4bf;
  --on-primary: #0e0f12;         /* text on a --primary filled button */
  --ok: #34d399;
  --ok-ink: #d1fae5;
  --backdrop: rgb(5 6 8 / .74);
  --line-color: color-mix(in srgb, var(--text) 40%, transparent);
  --hairline-color: color-mix(in srgb, var(--text) 14%, transparent);
  --hover-tint: color-mix(in srgb, var(--text) 6%, transparent);
  --press-tint: color-mix(in srgb, var(--text) 9%, transparent);
  --active-line: color-mix(in srgb, var(--text) 24%, transparent);
  color-scheme: dark;

  /* derived from the palette — no per-theme copy needed */
  --border: 2px solid var(--line-color);
  --hairline: 1px solid var(--hairline-color);
}

/* ---- light palette ---- */
html[data-theme="light"] {
  --primary: #16181d;
  --secondary: #4b5563;
  --accent: #d97706;
  --accent-ink: #b45309;
  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-sunken: #eceef2;
  --surface: #ffffff;
  --surface-2: #e6e9ee;
  --text: #14161c;
  --muted: #525c6e;
  --on-primary: #ffffff;
  --ok: #059669;
  --ok-ink: #065f46;
  --backdrop: rgb(20 24 31 / .45);
  --line-color: color-mix(in srgb, var(--text) 30%, transparent);
  --hairline-color: color-mix(in srgb, var(--text) 16%, transparent);
  color-scheme: light;
}

/* Same palette for a visitor whose operating system asks for light and who has no
   saved choice, in the rare case the head script did not run (JavaScript blocked).
   Intentionally a copy of the block above: a media query cannot share a selector. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --primary: #16181d;
    --secondary: #4b5563;
    --accent: #d97706;
    --accent-ink: #b45309;
    --bg: #f5f6f8;
    --bg-elevated: #ffffff;
    --bg-sunken: #eceef2;
    --surface: #ffffff;
    --surface-2: #e6e9ee;
    --text: #14161c;
    --muted: #525c6e;
    --on-primary: #ffffff;
    --ok: #059669;
    --ok-ink: #065f46;
    --backdrop: rgb(20 24 31 / .45);
    --line-color: color-mix(in srgb, var(--text) 30%, transparent);
    --hairline-color: color-mix(in srgb, var(--text) 16%, transparent);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55;
  display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--primary); }
code, pre, .mono { font-family: var(--mono); font-size: 0.86rem; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---------- components ---------- */

/* `hidden` has to win, and it needs !important to do it.

   The markup uses the attribute to keep the admin links out of the page until
   script.js has confirmed the panel answers on this origin. `hidden` is only
   `display: none` in the browser's own stylesheet, and any author declaration
   beats that: `.btn { display: inline-block }` further down did exactly that, so
   the sidebar "Admin login" button stayed on screen while script.js had already
   taken its href away. The result was a control that looked clickable and did
   nothing when clicked — worse than no control at all. */
[hidden] { display: none !important; }

.btn { display: inline-block; padding: calc(var(--pad) * .7) calc(var(--pad) * 1.4); border: 0; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.btn.secondary { background: transparent; color: var(--primary); border: var(--border); }
.btn.small { padding: 2px 10px; font-size: 0.8rem; }
.card { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: none; }
.input { width: 100%; padding: calc(var(--pad) * .7); border: var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
.input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
@supports (corner-shape: squircle) { .btn, .card, .input { corner-shape: round; } }

/* ---------- sidebar navigation ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 1.25rem 1rem;
  border-right: var(--hairline); background: var(--bg-elevated);
  display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-weight: 600; flex-wrap: wrap; }
.brand .mark { width: 26px; height: 26px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); border-radius: var(--radius); font-size: .8rem; }
.brand small { display: block; color: var(--muted); font-weight: 400; font-size: .7rem; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .label { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; margin: .4rem 0 .25rem; font-family: var(--mono); }
.nav a { padding: 6px 8px; border-radius: var(--radius); border: 1px solid transparent; font-size: .92rem; }
.nav a::before { content: "\203A\00a0"; color: var(--muted); }
.nav a:hover { background: var(--hover-tint); }
.nav a[aria-current="page"] { background: var(--press-tint); border-color: var(--active-line); font-weight: 600; }
.nav a[aria-current="page"]::before { color: var(--accent-ink); }
.side-foot { margin-top: auto; border-top: var(--hairline); padding-top: .9rem; font-size: .82rem; color: var(--muted); display: grid; gap: .3rem; }
.side-foot a { color: var(--muted); }
.side-foot a:hover { color: var(--text); }
.status { display: flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nav-toggle { display: none; }

/* ---------- theme toggle (sidebar brand row, on every page) ---------- */
.theme-toggle {
  margin-left: auto; flex: 0 0 auto; width: 34px; height: 26px; padding: 0;
  display: inline-grid; place-items: center; line-height: 1;
}
.theme-toggle .ico { display: none; }
.theme-toggle .ico-sun { display: block; }              /* dark page: offer the sun */
html[data-theme="light"] .theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon { display: block; }
.theme-toggle:hover { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }

/* ---------- admin entry point ----------
   The links carry `hidden` in the markup and script.js takes the attribute off
   only after the panel has answered a same-origin request on this page's own
   mount, so there is no dashed or disabled state to style here. */
.side-foot .admin-btn {
  margin-top: .5rem; text-align: center; color: var(--muted);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
.side-foot .admin-btn::before { content: "\1F512\00a0"; font-size: .72em; }
.side-foot .admin-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 55%, transparent); }
footer.site .admin-link { color: var(--muted); }

/* ---------- layout ---------- */
main { min-width: 0; padding: 0 2rem 4rem; }
.wrap { max-width: 880px; margin: 0 auto; }
section { padding: 2.5rem 0; border-bottom: var(--hairline); }
section:last-of-type { border-bottom: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: 0 0 .6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.4rem; margin: 0 0 .35rem; }
h3 { font-size: 1rem; margin: 0 0 .3rem; }
p { color: color-mix(in srgb, var(--text) 88%, transparent); }
.eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .8rem; }
.lead { font-size: 1.06rem; color: var(--muted); max-width: 62ch; }
.sec-head { margin-bottom: 1.1rem; }
.sec-head p { margin: 0; color: var(--muted); font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tagrow { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.tagrow li { font-family: var(--mono); font-size: .74rem; border: var(--hairline); border-radius: var(--radius); padding: 2px 8px; color: var(--muted); }

/* ---------- hero terminal ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem; align-items: center; padding-top: 3.2rem; }
.term { background: var(--bg-sunken); border: var(--border); border-radius: var(--radius); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: .45rem; padding: 6px 10px; background: var(--surface-2); border-bottom: var(--hairline); }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 30%, transparent); }
.term-bar span { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.term pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; line-height: 1.75; color: var(--muted); }
.term .p { color: var(--accent-ink); }
.term .cmd { color: var(--text); }
.term .out { color: var(--muted); }

/* ---------- copy command ---------- */
.cmdline { display: flex; align-items: center; gap: .6rem; border: var(--border); border-radius: var(--radius); background: var(--bg-sunken); padding: .55rem .7rem; flex-wrap: wrap; }
.cmdline code { color: var(--text); word-break: break-all; }
.cmdline .p { color: var(--accent-ink); }
.copy { margin-left: auto; }
.copy.done { color: var(--accent-ink); border-color: var(--accent); }

/* ---------- misc blocks ---------- */
.quote { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--text); }
.who { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.placeholder { font-family: var(--mono); font-size: .68rem; color: var(--muted); border: var(--hairline); padding: 1px 6px; border-radius: var(--radius); }
details { border: var(--border); border-radius: var(--radius); background: var(--surface); padding: calc(var(--pad) * .8) var(--pad); margin-bottom: .5rem; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: .5rem 0 0; color: var(--muted); }
dl.rows { margin: 0; display: grid; gap: .55rem; }
dl.rows div { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
dl.rows dt { font-family: var(--mono); font-size: .72rem; color: var(--muted); min-width: 110px; text-transform: uppercase; letter-spacing: .06em; }
dl.rows dd { margin: 0; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: .6rem; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--accent-ink); padding-top: 3px; }
.steps p { margin: 0; color: var(--muted); font-size: .92rem; }
.form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: .3rem; }
.field.wide { grid-column: 1 / -1; }
label { font-size: .8rem; color: var(--muted); }
.note { font-size: .8rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { border: var(--border); border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem; display: none; }
.alert.show { display: block; }
.alert.ok { border-color: color-mix(in srgb, var(--ok) 70%, transparent); color: var(--ok-ink); }
.alert.err { border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: color-mix(in srgb, var(--text) 92%, transparent); }
footer.site { border-top: var(--hairline); padding: 1.4rem 2rem; color: var(--muted); font-size: .82rem; }
footer.site a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
footer.site a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding-top: 2rem; }
  /* room on the right for the menu button, which floats at the top of the page */
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: var(--hairline); padding: .9rem 5rem 1rem 1rem; }
  .nav-toggle { display: inline-block; position: absolute; top: .95rem; right: 1rem; z-index: 5; }
  .nav { display: none; }
  body.nav-open .nav { display: flex; }
  .side-foot { margin-top: .6rem; }
  main, footer.site { padding-left: 1.1rem; padding-right: 1.1rem; }
}