/* Freelance Guardian design system. Shared by landing, login and app.
   Light is the base; dark redefines only the tokens. The :not([data-theme="light"])
   guard lets an explicit Light choice win on a dark OS. */
:root{
  --paper:#FAF9F6; --ink:#171412; --muted:#6D665E; --line:#E5DFD7;
  --accent:#F26522; --accent-deep:#C64F0E; --accent-soft:#FDEEE5;
  --ok:#3E9B62; --no:#C64530; --no-soft:#FBEAE6; --r:4px;
  /* A permanently dark band, identical in both themes — used where the page
     deliberately inverts (the reasoning trace, the measured-facts section). */
  --dark:#151210; --dark-2:#1E1A17; --dark-line:#2E2924; --dark-mut:#9A9188;
  /* One content width per page. The masthead and the page body both read it,
     so the logo always sits on the same line as the content below it. */
  --page:1240px;
  --ui:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --tight:'Inter Tight','Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#151210; --ink:#EDE8E2; --muted:#9A9188; --line:#2E2924;
  --accent:#F26522; --accent-deep:#F58B4C; --accent-soft:#2A1D14;
  --ok:#4FBF7E; --no:#E8705A; --no-soft:#2C1815;
}}
:root[data-theme="dark"]{
  --paper:#151210; --ink:#EDE8E2; --muted:#9A9188; --line:#2E2924;
  --accent:#F26522; --accent-deep:#F58B4C; --accent-soft:#2A1D14;
  --ok:#4FBF7E; --no:#E8705A; --no-soft:#2C1815;
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#fff}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--tight);letter-spacing:-.02em;line-height:1.12;font-weight:700}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- masthead ---- */
nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:14px 18px;min-height:62px;flex-wrap:wrap;
  max-width:var(--page);margin:0 auto;padding:12px 28px}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--tight);
  font-weight:700;font-size:16.5px;text-decoration:none}

/* ---- logo mark ----
   A solid brand tile, not an outlined page: at 24px an outline collapses into a dark
   smudge. Lives here rather than in each page's <style> — it was duplicated across
   three files and a page rewrite silently dropped one copy, leaving an unstyled SVG
   that browsers fill black. */
.mark{width:24px;height:24px;flex-shrink:0;border-radius:6px}
.mark .bg{fill:var(--accent)}
.mark .lines path{stroke:#fff;stroke-width:1.7;stroke-linecap:round;opacity:.85;fill:none}
.mark .strike{stroke:#171412;stroke-width:2.4;stroke-linecap:round;fill:none;
  stroke-dasharray:16;stroke-dashoffset:16}
@media (prefers-reduced-motion:no-preference){
  .mark .strike{animation:strike .9s cubic-bezier(.2,.8,.3,1) .35s forwards}
  @keyframes strike{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){.mark .strike{stroke-dashoffset:0}}

.tabs{display:flex;gap:4px;margin-left:8px}
.tabs a{font-family:var(--ui);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:var(--r)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{background:var(--ink);color:var(--paper)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

#theme{background:transparent;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:6px 11px;white-space:nowrap}
#theme:hover{color:var(--ink);border-color:var(--ink)}

/* ---- primitives ---- */
.eyebrow{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);flex-shrink:0}
.eyebrow.sub{color:var(--muted);margin-top:30px}
.eyebrow.sub::before{background:var(--line)}

label{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input,textarea,select{width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;font-size:14px}
input,select{font-family:var(--ui);font-size:13px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}

.btn{display:inline-block;font-family:var(--ui);font-size:12.5px;letter-spacing:.04em;
  padding:11px 18px;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;transition:all .18s;white-space:nowrap}
.btn-p{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-p:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-g{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-g:hover{border-color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:11.5px}
.btn[disabled]{opacity:.5;cursor:progress}

.err{border-left:2px solid var(--no);background:var(--no-soft);padding:12px 16px;
  border-radius:var(--r)}
.err b{color:var(--no);font-weight:600}
.muted{color:var(--muted)}
.mono{font-family:var(--ui)}