/* Codeference portal stylesheet, built on the Provectus design system (spec 6.4).
   Tokens and the component rules marked "DS" are copied from provectus-ds.css;
   everything prefixed `portal-` is this app's own component built on those tokens.
   Fonts are self-hosted (no CDN), per context/product/architecture.md. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: local("Plus Jakarta Sans"), url("fonts/PlusJakartaSans-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: local("JetBrains Mono"), url("fonts/JetBrainsMono-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── DS tokens ───────────────────────────────────────────────────── */
:root {
  --pv-sage-50:  #EEF3F0;
  --pv-sage-100: #DCE8E2;
  --pv-sage-200: #B8CEC4;
  --pv-sage-400: #6B8B7B;
  --pv-sage-600: #3B5249;
  --pv-sage-700: #33473F;
  --pv-sage-800: #263831;
  --pv-ink-300:  #828598;
  --pv-ink-700:  #2A2D3F;
  --pv-ink-800:  #232636;
  --pv-ink-900:  #1C1F2E;
  --pv-charcoal-400: #8A9A8A;
  --pv-charcoal-500: #82827A;
  --pv-charcoal-700: #4A4A43;
  --pv-charcoal-800: #2C2B28;
  --pv-blue-600: #4255F9;
  --pv-slate: #828598;
  --pv-sienna-600: #B33A22;
  --pv-white:      #FFFFFF;
  --pv-cream:      #FDF8F4;
  --pv-sienna-bg:  #FBF1EE;
  --pv-near-white: #FAFAFA;
  --pv-body-light: #D4D2CC;
  --pv-muted:      #BFC1CA;
  --pv-sage-band:  #ECF1EB;
  --pv-stroke-divider:    #ECECEA;
  --pv-stroke-card-proof: #E8ECE8;
  --pv-stroke-card-sage:  #759283;
  --pv-stroke-dark:       #33332E;

  --pv-bg:                #FFFFFF;
  --pv-bg-secondary:      var(--pv-cream);
  --pv-bg-accent:         var(--pv-sage-50);
  --pv-text:              var(--pv-ink-900);
  --pv-text-secondary:    var(--pv-charcoal-700);
  --pv-text-tertiary:     var(--pv-charcoal-500);
  --pv-text-inverse:      var(--pv-near-white);
  --pv-text-accent:       var(--pv-sage-600);
  --pv-text-eyebrow:      var(--pv-slate);
  --pv-text-label:        var(--pv-sage-600);
  --pv-text-link:         var(--pv-sage-600);
  --pv-border:            var(--pv-stroke-divider);
  --pv-border-accent:     var(--pv-stroke-card-sage);

  --pv-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --pv-font-sans:    "Plus Jakarta Sans", system-ui, sans-serif;
  --pv-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pv-text-xs:    0.6875rem;
  --pv-text-sm:    0.8125rem;
  --pv-text-base:  0.9375rem;
  --pv-text-md:    1.0625rem;
  --pv-text-lg:    1.25rem;
  --pv-text-xl:    1.5rem;
  --pv-text-subsection: clamp(1.5rem, 3vw, 2rem);
  --pv-text-section:    clamp(1.75rem, 4vw, 2.5rem);
  --pv-text-hero:    clamp(2rem, 4vw, 3rem);
  --pv-text-hero-lg: clamp(2.5rem, 5vw, 4rem);

  --pv-leading-tight:   1.1;
  --pv-leading-snug:    1.25;
  --pv-leading-normal:  1.5;
  --pv-leading-relaxed: 1.65;
  --pv-tracking-tight:  -0.02em;
  --pv-tracking-wide:   0.04em;
  --pv-tracking-wider:  0.08em;
  --pv-tracking-widest: 0.12em;

  --pv-space-1:  0.25rem;
  --pv-space-2:  0.5rem;
  --pv-space-3:  0.75rem;
  --pv-space-4:  1rem;
  --pv-space-5:  1.25rem;
  --pv-space-6:  1.5rem;
  --pv-space-8:  2rem;
  --pv-space-10: 2.5rem;
  --pv-space-12: 3rem;
  --pv-space-16: 4rem;
  --pv-space-20: 5rem;

  --pv-radius-sm:   6px;
  --pv-radius-md:   8px;
  --pv-radius-lg:   12px;
  --pv-radius-xl:   16px;
  --pv-dur:  200ms;
  --pv-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--pv-bg);
  color: var(--pv-text-secondary);
  font-family: var(--pv-font-sans);
  font-size: var(--pv-text-base);
  line-height: var(--pv-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: var(--pv-text-link); text-decoration: none; }
a:hover { color: var(--pv-sage-700); text-decoration: underline; }
p { margin: 0 0 var(--pv-space-4); }
strong { color: var(--pv-text); font-weight: 700; }
code, pre, kbd { font-family: var(--pv-font-mono); }
code { font-size: 0.9em; color: var(--pv-text); }
pre {
  background: var(--pv-bg-secondary);
  border-radius: var(--pv-radius-md);
  padding: var(--pv-space-3) var(--pv-space-4);
  margin: var(--pv-space-2) 0 var(--pv-space-4);
  overflow-x: auto;
  font-size: var(--pv-text-sm);
  line-height: 1.6;
}
pre code { font-size: inherit; }

/* DS layout */
.ds-section { padding: var(--pv-space-12) var(--pv-space-4) var(--pv-space-16); background: var(--pv-bg); }
.ds-section--hero { padding-top: var(--pv-space-20); }
.ds-container { max-width: 1100px; margin: 0 auto; }
.portal-page { max-width: 44rem; }
.portal-page--wide { max-width: 60rem; }

/* DS typography */
.ds-eyebrow {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-text-xs);
  font-weight: 600;
  letter-spacing: var(--pv-tracking-widest);
  text-transform: uppercase;
  color: var(--pv-text-eyebrow);
  margin: 0 0 var(--pv-space-4);
}
.ds-eyebrow-accent { color: var(--pv-sage-600); }
.ds-heading-hero {
  font-family: var(--pv-font-display);
  font-size: var(--pv-text-hero);
  font-weight: 800;
  line-height: var(--pv-leading-tight);
  letter-spacing: var(--pv-tracking-tight);
  color: var(--pv-text);
  margin: 0 0 var(--pv-space-5);
}
.ds-heading-section {
  font-family: var(--pv-font-display);
  font-size: var(--pv-text-section);
  font-weight: 700;
  line-height: var(--pv-leading-snug);
  letter-spacing: var(--pv-tracking-tight);
  color: var(--pv-text);
  margin: 0 0 var(--pv-space-4);
}
.ds-heading-claim {
  font-family: var(--pv-font-display);
  font-size: var(--pv-text-subsection);
  font-weight: 700;
  line-height: var(--pv-leading-snug);
  letter-spacing: var(--pv-tracking-tight);
  color: var(--pv-text);
  margin: var(--pv-space-10) 0 var(--pv-space-3);
}
.ds-lede {
  font-size: var(--pv-text-md);
  line-height: var(--pv-leading-relaxed);
  color: var(--pv-text-secondary);
  margin: 0 0 var(--pv-space-8);
  max-width: 42rem;
}
.ds-hero-rule { border: 0; border-top: 1px solid var(--pv-border); margin: 0; }

/* DS buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  font-family: var(--pv-font-sans);
  font-size: var(--pv-text-sm);
  font-weight: 600;
  letter-spacing: var(--pv-tracking-wide);
  border: 0;
  border-radius: var(--pv-radius-md);
  padding: var(--pv-space-3) var(--pv-space-5);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}
.ds-btn:hover { text-decoration: none; }
.ds-btn-primary { background: var(--pv-sage-600); color: #FFFFFF; }
.ds-btn-primary:hover { background: var(--pv-sage-700); color: #FFFFFF; }
.ds-btn-ghost { background: transparent; color: var(--pv-text); border: 1px solid var(--pv-border); }
.ds-btn-ghost:hover { background: var(--pv-bg-accent); color: var(--pv-text-accent); }
.ds-btn-lg { padding: var(--pv-space-4) var(--pv-space-6); font-size: var(--pv-text-base); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
  background: var(--pv-sage-50);
  color: var(--pv-charcoal-500);
  cursor: not-allowed;
}
.ds-btn:focus-visible { outline: 3px solid var(--pv-sage-200); outline-offset: 2px; }

/* DS cards and lists */
.ds-card {
  background: var(--pv-bg);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-xl);
  padding: var(--pv-space-6);
}
.ds-card-featured { background: var(--pv-bg-secondary); border-radius: var(--pv-radius-xl); padding: var(--pv-space-6); }
.ds-card-tag {
  display: inline-flex;
  font-size: var(--pv-text-xs);
  font-weight: 600;
  letter-spacing: var(--pv-tracking-widest);
  text-transform: uppercase;
  color: var(--pv-text-label);
  margin-bottom: var(--pv-space-3);
}
.ds-list { list-style: none; padding: 0; margin: 0 0 var(--pv-space-4); display: flex; flex-direction: column; gap: var(--pv-space-3); }
.ds-list li { padding-left: var(--pv-space-5); position: relative; color: var(--pv-text); }
.ds-list li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: var(--pv-text-accent); }

/* DS form primitives */
.ds-field { display: flex; flex-direction: column; gap: var(--pv-space-2); margin: 0 0 var(--pv-space-5); }
.ds-label { font-family: var(--pv-font-display); font-size: var(--pv-text-sm); font-weight: 600; color: var(--pv-text); }
.ds-input {
  font-family: var(--pv-font-sans);
  font-size: var(--pv-text-base);
  color: var(--pv-text);
  background: var(--pv-bg);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  padding: var(--pv-space-3) var(--pv-space-4);
  width: 100%;
  max-width: 28rem;
  transition: border-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.ds-input:focus-visible {
  outline: none;
  border-color: var(--pv-sage-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv-sage-600) 25%, transparent);
}
.ds-check-row { display: flex; align-items: flex-start; gap: var(--pv-space-3); color: var(--pv-text); font-weight: 400; }
.ds-checkbox { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; flex: none; accent-color: var(--pv-sage-600); }
.ds-field-help { font-size: var(--pv-text-sm); color: var(--pv-text-tertiary); }
.ds-field-error {
  font-size: var(--pv-text-sm);
  color: var(--pv-sienna-600);
  background: var(--pv-sienna-bg);
  padding: var(--pv-space-1) var(--pv-space-2);
  border-radius: var(--pv-radius-sm);
  align-self: flex-start;
  margin: 0;
}

/* DS logo */
.ds-logo { display: inline-flex; align-items: center; height: 32px; color: var(--pv-text); line-height: 0; }
.ds-logo svg { height: 100%; width: auto; display: block; fill: currentColor; }
.ds-logo--footer { height: 18px; opacity: 0.7; }
.ds-logo:hover { text-decoration: none; color: var(--pv-text); }

/* ── Portal components ───────────────────────────────────────────── */

/* Navbar: light surface, ink logo, charcoal links (DS §10 web navbar). */
.portal-navbar { background: var(--pv-bg); border-bottom: 1px solid var(--pv-border); padding: 0 var(--pv-space-4); }
.portal-navbar__inner { display: flex; align-items: center; gap: var(--pv-space-5); min-height: 64px; }
.portal-navbar__event {
  font-size: var(--pv-text-sm);
  color: var(--pv-text-tertiary);
  border-left: 1px solid var(--pv-border);
  padding-left: var(--pv-space-5);
  line-height: 1.3;
}
.portal-nav { margin-left: auto; display: flex; align-items: center; gap: var(--pv-space-4); }
.nav-user { font-family: var(--pv-font-mono); font-size: var(--pv-text-sm); font-weight: 600; color: var(--pv-text); }
.portal-inline-form { display: inline; margin: 0; }
.portal-inline-form .ds-btn { padding: var(--pv-space-2) var(--pv-space-4); }

/* Notices (flashes) on a cream card; errors on the sienna chip. */
.portal-flashes { list-style: none; margin: 0 0 var(--pv-space-6); padding: 0; display: flex; flex-direction: column; gap: var(--pv-space-2); }
.portal-notice {
  background: var(--pv-bg-secondary);
  border-left: 3px solid var(--pv-sage-600);
  border-radius: var(--pv-radius-md);
  padding: var(--pv-space-3) var(--pv-space-4);
  color: var(--pv-text);
  margin: 0;
}

/* Status tag: sage label on the faint brand wash. */
.portal-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  font-size: var(--pv-text-xs);
  font-weight: 600;
  letter-spacing: var(--pv-tracking-widest);
  text-transform: uppercase;
  color: var(--pv-sage-700);
  background: var(--pv-sage-50);
  border-radius: var(--pv-radius-sm);
  padding: var(--pv-space-1) var(--pv-space-3);
}
.portal-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-sage-600); }

/* Identity line under a page heading. */
.portal-identity { color: var(--pv-text-tertiary); margin-bottom: var(--pv-space-8); }
.portal-identity code { color: var(--pv-text); }

/* Detail rows: hairline list with eyebrow labels. */
.portal-details { width: 100%; border-collapse: collapse; margin: 0 0 var(--pv-space-8); }
.portal-details th, .portal-details td { text-align: left; padding: var(--pv-space-3) 0; border-bottom: 1px solid var(--pv-border); vertical-align: top; }
.portal-details th {
  width: 11rem;
  font-size: var(--pv-text-xs);
  font-weight: 600;
  letter-spacing: var(--pv-tracking-widest);
  text-transform: uppercase;
  color: var(--pv-text-eyebrow);
  padding-top: var(--pv-space-4);
}
.portal-details td { color: var(--pv-text); font-weight: 500; }

/* Choice group (radios and checkboxes). */
.portal-choices { border: 0; padding: 0; margin: 0 0 var(--pv-space-5); display: flex; flex-direction: column; gap: var(--pv-space-2); }
.portal-choices legend { font-family: var(--pv-font-display); font-size: var(--pv-text-sm); font-weight: 600; color: var(--pv-text); padding: 0; margin-bottom: var(--pv-space-2); }
.portal-choices .ds-field-error { margin-top: var(--pv-space-1); }
.portal-actions { display: flex; flex-wrap: wrap; gap: var(--pv-space-3); align-items: center; margin: var(--pv-space-6) 0 0; }

/* Numbered content lists from content/*.md (setup steps). */
.portal-steps ol { padding-left: 0; margin: 0 0 var(--pv-space-4); counter-reset: step; list-style: none; }
.portal-steps ol > li { counter-increment: step; position: relative; padding-left: var(--pv-space-10); margin: 0 0 var(--pv-space-5); color: var(--pv-text); }
.portal-steps ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-sage-50);
  color: var(--pv-sage-700);
  font-family: var(--pv-font-mono); font-size: var(--pv-text-sm); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.portal-steps li > p { margin-bottom: var(--pv-space-2); }

/* CSS-only tabs: active tab is a sage 8px rectangle (never a pill). */
.tabs { margin: 0 0 var(--pv-space-8); }
.tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tabs > label {
  display: inline-flex; align-items: center;
  margin: 0 var(--pv-space-2) var(--pv-space-3) 0;
  padding: var(--pv-space-2) var(--pv-space-4);
  cursor: pointer;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-md);
  font-size: var(--pv-text-sm); font-weight: 600; letter-spacing: var(--pv-tracking-wide);
  color: var(--pv-text);
  transition: background var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}
.tabs > label:hover { background: var(--pv-bg-accent); color: var(--pv-text-accent); }
.tabs > input:checked + label { background: var(--pv-sage-600); border-color: var(--pv-sage-600); color: var(--pv-near-white); }
.tabs > input:focus-visible + label { outline: 3px solid var(--pv-sage-200); outline-offset: 2px; }
.tab-panel { display: none; background: var(--pv-bg-secondary); border-radius: var(--pv-radius-xl); padding: var(--pv-space-6) var(--pv-space-6) var(--pv-space-2); }
.tab-panel pre { background: var(--pv-bg); }
.tabs:has(#tab-macos:checked) #panel-macos,
.tabs:has(#tab-linux:checked) #panel-linux,
.tabs:has(#tab-windows:checked) #panel-windows { display: block; }

/* Footer */
.portal-footer { border-top: 1px solid var(--pv-border); padding: var(--pv-space-6) var(--pv-space-4); color: var(--pv-text-tertiary); font-size: var(--pv-text-sm); }
.portal-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-space-4); flex-wrap: wrap; }
.portal-footer p { margin: 0; }

@media (max-width: 640px) {
  .portal-navbar__event { display: none; }
  .ds-section { padding: var(--pv-space-8) var(--pv-space-4) var(--pv-space-12); }
  .portal-details th { width: 8rem; }
}