/* JB2 component and document styles. Every colour, size and offset comes from tokens.css; nothing here hard-codes a colour. */

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------ helpers */
.jb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-6); }
.jb-grid { display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-6) var(--space-6); }

.jb-link { color: var(--link); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: var(--border-thin); text-underline-offset: 4px; }
.jb-link:hover { color: var(--brand-ink); text-decoration-color: var(--brand-ink); }
.jb-link:focus-visible { outline: var(--border-bold) solid var(--focus); outline-offset: 3px; }

.jb-label { font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.jb-figure { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
/* a 10px square marker: filled for the current item, outlined for the rest */
.jb-mark { display: inline-block; flex: none; box-sizing: border-box; width: 10px; height: 10px; border: var(--border-bold) solid var(--ink); }
.jb-mark-on { background: var(--ink); }
.jb-code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; padding: 2px 6px; background: var(--surface-alt); color: var(--ink); border-radius: var(--radius-sm); }

/* --------------------------------------------------------------- Logo */
.jb-logo { display: inline-block; flex: none; vertical-align: middle; color: var(--ink); }
.jb-logo-ink { fill: currentColor; }
.jb-logo-letter { fill: var(--ground); }
.jb-logo-tile { fill: var(--brand); }
.jb-logo-num { fill: var(--on-brand); }

/* --------------------------------------------------------------- Icon */
.jb-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ------------------------------------------------------------- Button */
.jb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; height: 48px; padding: 0 var(--space-6);
  border: var(--border-bold) solid var(--ink); border-radius: var(--radius-none);
  background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear, border-color 100ms linear;
}
.jb-btn-sm { height: 36px; padding: 0 var(--space-4); font-size: 14px; }

.jb-btn-primary { background: var(--ink); color: var(--ground); }
.jb-btn-primary:hover, .jb-btn-primary:active { background: var(--ground); color: var(--ink); }

.jb-btn-secondary:hover, .jb-btn-secondary:active { background: var(--ink); color: var(--ground); }

.jb-btn-ghost { border-color: transparent; padding: 0 var(--space-1); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: var(--border-bold); text-underline-offset: 6px; }
.jb-btn-ghost:hover, .jb-btn-ghost:active { text-decoration-color: var(--ink); }

.jb-btn:focus-visible { outline: var(--border-bold) solid var(--focus); outline-offset: 3px; }

.jb-btn:disabled, .jb-btn[aria-disabled="true"] {
  background: var(--surface-alt); border-color: var(--line-strong); color: var(--ink-muted);
  text-decoration: none; cursor: not-allowed;
}

/* ---------------------------------------------------------------- Tag */
.jb-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  box-sizing: border-box; height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-none); background: var(--surface-alt); color: var(--ink);
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
.jb-tag-solid { background: var(--ink); color: var(--ground); }
.jb-tag-outline { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 var(--border-thin) var(--line-strong); }
.jb-tag-brand, .jb-tag-pink { background: var(--brand-soft); color: var(--brand-ink); }
.jb-tag-live { background: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------- Card */
.jb-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  box-sizing: border-box; padding: var(--space-6);
  background: var(--surface); color: var(--ink);
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-none);
  text-decoration: none;
  transition: transform 100ms linear, box-shadow 100ms linear, border-color 100ms linear;
}
.jb-card-featured { border: var(--border-bold) solid var(--ink); box-shadow: var(--double); }
.jb-card-link:hover { border-color: var(--ink); }
.jb-card-featured.jb-card-link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.jb-card-link:focus-visible { outline: var(--border-bold) solid var(--focus); outline-offset: 3px; }
.jb-card-featured.jb-card-link:focus-visible { outline-offset: 7px; }

/* the exponent: a small square on the top-right corner, as in the logo. The one place a card carries the brand colour. */
.jb-card-exp {
  position: absolute; top: calc(var(--space-4) * -1); right: calc(var(--space-4) * -1);
  display: grid; place-items: center; min-width: var(--space-8); height: var(--space-8); padding: 0 var(--space-1); box-sizing: border-box;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1;
  box-shadow: 0 0 0 var(--space-1) var(--ground);
}
.jb-card-eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.jb-card-title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -0.005em; color: var(--ink); }
.jb-card-body { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.jb-card-body > :first-child { margin-top: 0; }
.jb-card-body > :last-child { margin-bottom: 0; }
.jb-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

/* -------------------------------------------------------------- Field */
.jb-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.jb-field-label { font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.jb-field-input {
  box-sizing: border-box; width: 100%; height: 48px; padding: 0 var(--space-4);
  background: var(--surface); color: var(--ink);
  border: var(--border-bold) solid var(--line-strong); border-radius: var(--radius-none);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  transition: border-color 100ms linear;
}
.jb-field-textarea { height: auto; min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.jb-field-input::placeholder { color: var(--ink-muted); opacity: 1; }
.jb-field-input:hover { border-color: var(--ink); }
.jb-field-input:focus-visible { border-color: var(--ink); outline: var(--border-bold) solid var(--focus); outline-offset: 3px; }
.jb-field-input:disabled { background: var(--surface-alt); color: var(--ink-muted); cursor: not-allowed; }
.jb-field-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.jb-field-error .jb-field-input { border-color: var(--danger); }
.jb-field-error .jb-field-note { color: var(--danger); }
.jb-field-flag {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px;
  background: var(--danger); color: var(--ground);
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1;
}

/* ---------------------------------------------------------- Documents */
/* An A4 page: paper ground, ink text, a header and a footer. Sizes are the page tokens. */
.jb-page {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  width: var(--page-width); height: var(--page-height); overflow: hidden;
  padding: var(--page-top) var(--page-margin) var(--page-bottom);
  background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.jb-page h1, .jb-page h2, .jb-page h3, .jb-page p { margin: 0; }
.jb-page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--line); }
.jb-page-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-12); min-height: 0; }
.jb-page-section { display: flex; flex-direction: column; gap: var(--space-4); }
.jb-page-footer {
  display: flex; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--line);
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 16px; color: var(--ink-muted);
}

/* phase label: a solid tag for the phase, an outline tag for its status */
.jb-phase { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* fee table: figures in mono, right-aligned; one column may be raised on surface; one cell may be the highlight */
.jb-fees { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jb-fees th, .jb-fees td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-thin) solid var(--line); }
.jb-fees thead th, .jb-fees thead td {
  border-bottom-color: var(--ink); text-align: right; vertical-align: bottom;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.jb-fees tbody th { padding-left: 0; text-align: left; font-weight: 400; }
.jb-fees tbody td { text-align: right; font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 22px; }
.jb-fees .jb-fees-raised { background: var(--surface); color: var(--ink); }
.jb-fees tr.jb-fees-total th, .jb-fees tr.jb-fees-total td { border-top: var(--border-thin) solid var(--ink); border-bottom: 0; }
.jb-fees tr.jb-fees-total th { font-weight: 600; }
.jb-fees tr.jb-fees-total td { font-size: 16px; line-height: 26px; font-weight: 700; }
.jb-fees td.jb-fees-highlight { background: var(--brand); color: var(--on-brand); }
.jb-notes { margin: 0; padding-left: 18px; list-style-type: square; display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* numbered steps: mono figures in ink squares; filled for steps inside the commitment, outlined for optional ones */
.jb-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: jb-step; }
.jb-steps > li {
  counter-increment: jb-step; display: flex; align-items: flex-start; gap: var(--space-6);
  padding: var(--space-4) 0; border-top: var(--border-thin) solid var(--line);
  font-size: 20px; line-height: 30px;
}
.jb-steps > li:first-child { border-top-color: var(--ink); }
.jb-steps > li::before {
  content: counter(jb-step); flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: var(--space-8); height: var(--space-8); border: var(--border-bold) solid var(--ink);
  background: var(--ink); color: var(--ground);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1;
}
.jb-steps > li.jb-step-optional::before { background: transparent; color: var(--ink); }

/* proposal cover: the logo's construction at page scale */
.jb-cover { padding-top: var(--space-16); padding-bottom: 0; }
.jb-cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); }
.jb-page .jb-cover-title { margin-top: var(--space-24); font-size: 68px; line-height: 72px; font-weight: 700; letter-spacing: -0.03em; }
.jb-page .jb-cover-lead { margin-top: var(--space-6); max-width: 440px; font-size: 20px; line-height: 30px; }
.jb-cover-square {
  position: absolute; left: var(--page-margin); bottom: var(--space-24);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4); box-sizing: border-box;
  width: 288px; height: 288px; padding: var(--space-6);
  background: var(--surface); border: var(--border-bold) solid var(--ink);
  box-shadow: var(--space-3) var(--space-3) 0 var(--ink);
}
.jb-cover-tile {
  position: absolute; top: -72px; right: -72px; display: grid; place-items: center;
  width: 120px; height: 120px; background: var(--brand); color: var(--on-brand);
  box-shadow: 0 0 0 var(--space-3) var(--ground);
  font-family: var(--font-logo); font-weight: 900; font-size: 84px; line-height: 1;
}
.jb-cover-who { display: flex; flex-direction: column; }
.jb-cover-who b { font-weight: 600; }
.jb-cover-phases { position: absolute; left: 468px; right: var(--page-margin); bottom: var(--space-24); display: flex; flex-direction: column; gap: var(--space-6); }
.jb-cover-phase { display: flex; flex-direction: column; gap: var(--space-1); }
.jb-cover-phase > div { display: flex; align-items: center; gap: var(--space-2); }
.jb-cover-phase b { font-weight: 600; }
.jb-cover-phase span:last-child { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .jb-btn, .jb-card, .jb-field-input { transition: none; }
}
@media print {
  .jb-page { break-after: page; }
}