/* ─── partpicker.gr — design tokens ──────────────────────────────────── */
:root{
  /* Surfaces (dark default) */
  --bg-0: oklch(0.16 0.005 240);          /* page */
  --bg-1: oklch(0.20 0.006 240);          /* card */
  --bg-2: oklch(0.235 0.008 240);         /* raised */
  --bg-3: oklch(0.27 0.010 240);          /* hover */
  --line: oklch(0.32 0.010 240 / 0.6);    /* hairline */
  --line-2: oklch(0.40 0.012 240 / 0.5);  /* stronger hairline */

  /* Ink */
  --ink-0: oklch(0.97 0.005 95);          /* primary text */
  --ink-1: oklch(0.82 0.006 95);          /* secondary */
  --ink-2: oklch(0.65 0.008 95);          /* tertiary / labels */
  --ink-3: oklch(0.50 0.008 95);          /* placeholder */

  /* Accent */
  --acc: oklch(0.88 0.19 132);            /* electric lime */
  --acc-soft: oklch(0.88 0.19 132 / 0.14);
  --acc-line: oklch(0.88 0.19 132 / 0.45);
  --acc-ink: oklch(0.20 0.04 132);        /* text on acc */

  /* Semantic */
  --ok: oklch(0.82 0.17 150);
  --warn: oklch(0.84 0.16 75);
  --danger: oklch(0.72 0.20 28);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Type */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Roboto Mono', 'SF Mono', Menlo, monospace;

  /* Density */
  --row-pad-y: 14px;
  --row-pad-x: 16px;
  --gap: 16px;
}
:root[data-theme="light"]{
  --bg-0: oklch(0.985 0.003 95);
  --bg-1: oklch(1 0 0);
  --bg-2: oklch(0.97 0.004 95);
  --bg-3: oklch(0.94 0.005 95);
  --line: oklch(0.88 0.006 95);
  --line-2: oklch(0.80 0.008 95);
  --ink-0: oklch(0.18 0.005 240);
  --ink-1: oklch(0.32 0.006 240);
  --ink-2: oklch(0.48 0.008 240);
  --ink-3: oklch(0.62 0.008 240);
  /* In light mode the photo bg matches the canvas — blends in fully */
  --photo-bg: oklch(1 0 0);
  --photo-line: oklch(0.88 0.006 95);
}
:root[data-theme="dark"]{
  /* Dark theme: keep photo container near-white so supplier images blend.
     A subtle warm-pale instead of pure white avoids harsh hot-spots. */
  --photo-bg: oklch(0.94 0.004 95);
  --photo-line: oklch(0.78 0.006 95);
}
:root[data-density="compact"]{ --row-pad-y: 10px; --gap: 12px; }
:root[data-density="comfy"]{   --row-pad-y: 18px; --gap: 20px; }

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Plex OT: ss02 = single-storey a (modern); ss03 = alt g; zero = slashed 0 */
  font-feature-settings: "ss02", "zero";
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input,select,textarea{ font: inherit; color: inherit; }
img{ display:block; max-width:100%; }


    /* Standalone page — uses styles.css tokens but its own layout. */
    body{
      min-height: 100dvh;
      display: flex; flex-direction: column;
      background: var(--bg-0);
      overflow-x: hidden;
    }
    main.cs{
      flex: 1;
      display: flex; flex-direction: column; justify-content: center;
      padding: 56px 28px;
      position: relative;
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
    }

    /* Background atmosphere — subtle dot grid behind content */
    body::before{
      content: ""; position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      background-image:
        radial-gradient(circle at center, var(--ink-3) 0.5px, transparent 0.6px);
      background-size: 22px 22px;
      opacity: 0.18;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, black 30%, transparent 80%);
    }
    main.cs > *{ position: relative; z-index: 1; }

    /* Header strip */
    .cs-head{
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 40px;
    }
    .cs-head .logo-mark{
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--ink-0);
    }
    .cs-head .logo-mark svg{ display:block; flex-shrink:0; }
    .cs-head .wordmark{
      font-family: var(--font-sans);
      font-weight: 600; font-size: 18px; line-height: 1;
      /* Center the visible glyphs, accounting for Plex Sans font metrics. */
      transform: translateY(-2px);
      letter-spacing: -0.02em;
    }
    .cs-head .wordmark .tld{ color: var(--ink-3); font-weight: 400; }
    .cs-head .spacer{ flex: 1; }
    .cs-head .mode-flip{
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding: 6px 10px; border-radius: 6px;
      border: 1px solid var(--line); background: var(--bg-1);
      cursor: pointer;
    }
    .cs-head .mode-flip:hover{ color: var(--ink-1); background: var(--bg-2); }

    /* Headline */
    .cs h1{
      font-size: clamp(40px, 6vw, 72px);
      letter-spacing: -0.028em;
      line-height: 1.0;
      font-weight: 500;
      margin: 18px 0 0;
      max-width: 18ch;
      text-wrap: balance;
    }
    .cs h1 .acc{ color: var(--acc); }
    .cs .lede{
      font-size: 17px;
      line-height: 1.6;
      color: var(--ink-1);
      margin: 22px 0 0;
      max-width: 56ch;
      text-wrap: pretty;
    }

    /* Coming-soon: subscribe form */
    .subscribe{
      margin-top: 32px;
      display: flex; gap: 8px;
      max-width: 100%;
      flex-wrap: wrap;
    }
    .subscribe input{
      flex: 1; min-width: 0;
      background: var(--bg-1);
      border: 1px solid var(--line);
      color: var(--ink-0);
      padding: 12px 14px;
      border-radius: var(--r-md);
      font: inherit;
      outline: none;
      min-width: 220px;
    }
    .subscribe input:focus{
      border-color: var(--acc-line);
      box-shadow: 0 0 0 4px var(--acc-soft);
    }
    .subscribe input::placeholder{ color: var(--ink-3); }
    .subscribe button{
      padding: 12px 18px;
      border-radius: var(--r-md);
      background: var(--acc); color: var(--acc-ink);
      border: 0; font: inherit; font-weight: 500;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .subscribe button:hover{ filter: brightness(1.05); }
    .subscribe.sent{
      animation: bumpIn 320ms cubic-bezier(.2,.7,.2,1);
    }
    @keyframes bumpIn{ 0%{ transform: scale(0.98);} 60%{ transform: scale(1.01);} 100%{ transform: scale(1);} }

    /* Footer */
    .cs-foot{
      padding: 28px;
      border-top: 1px solid var(--line);
      display: flex; align-items: center; gap: 18px;
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-3);
      flex-wrap: wrap;
      max-width: 760px; margin: 0 auto; width: 100%;
    }
    .cs-foot a{
      color: var(--ink-1);
      border-bottom: 1px dashed var(--line-2);
      padding-bottom: 1px;
    }
    .cs-foot a:hover{ color: var(--acc); border-color: var(--acc); }
    .cs-foot .spacer{ flex: 1; }

    /* Mode-conditional show/hide */
    [data-mode="coming-soon"] .only-maintenance{ display: none !important; }
    [data-mode="maintenance"] .only-coming-soon{ display: none !important; }

/* Production form, accessibility, and narrow-screen refinements. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; --ink-3: oklch(0.48 0.008 95); }
:root[data-theme="dark"] { --ink-3: oklch(0.66 0.008 95); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.signup-details { flex-basis:100%; margin-top:10px; padding-top:16px; border-top:1px solid var(--line); }
.privacy-note { font-size:12px; line-height:1.5; color:var(--ink-2); margin:0; }
.privacy-note a { text-decoration:underline; text-underline-offset:3px; }
.challenge { min-height:0; margin-top:12px; }
.form-status { font-size:13px; color:var(--ink-1); margin:0; flex-basis:100%; }
.form-status[data-error="true"] { color:var(--danger); }
button:disabled { opacity:.65; cursor:wait; }
:focus-visible { outline:2px solid var(--ink-2); outline-offset:4px; }
.subscribe input:focus-visible { outline:2px solid var(--ink-2); outline-offset:3px; }
.cs-head .mode-flip { min-height:36px; }
.document h1 { font-size:clamp(36px,6vw,56px); }
.document h2 { font-size:20px; margin:28px 0 8px; }
.document p { color:var(--ink-1); }
.document .action { display:inline-block; margin-top:20px; padding:12px 20px; border-radius:var(--r-md); background:var(--acc); color:var(--acc-ink); font-weight:500; }
.document a:not(.action):not(.logo-mark) { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:540px) {
 main.cs { padding:32px 20px; }
 .cs-head { padding-bottom:32px; }
 .subscribe { max-width:100%; }
 .cs-foot { padding:24px 20px; gap:14px; font-size:10px; }
 .cs-foot .spacer { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }

.header-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }
.language-control { position:relative; display:inline-flex; color:var(--ink-1); }
.language-control::after { content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.language-select { appearance:none; font-family:var(--font-sans); font-size:12px; min-height:36px; max-width:110px; padding:6px 30px 6px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink-1); background:var(--bg-1); cursor:pointer; }
@media(forced-colors:active) {
  .language-control::after { display:none; }
  .language-select { appearance:auto; padding-right:8px; }
}
@media(max-width:540px) {
  .cs-head { flex-wrap:wrap; }
  .header-controls { flex-basis:100%; justify-content:flex-end; }
}

@media(max-width:700px) {
 .subscribe > input { min-width:0; width:100%; flex-basis:100%; }
 .subscribe > button { justify-content:center; width:100%; }
}
.subscribe button svg { flex-shrink:0; }