/* tp.alp — transfer pricing at arm's length.
   The 42 Pivot kit's palette and type on a light surface. Orange TEXT on a
   light surface is Ember (#B34D00); Primary Orange (#FF7A00) is for fills, the
   wordmark's full stop and the focus ring only. */

@font-face { font-family: "Inter"; src: url("/fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Delius Unicase"; src: url("/fonts/DeliusUnicase-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --orange: #FF7A00; --ember: #B34D00; --ink: #0B0B0B; --bone: #FAF7F2;
  --n-0: #FFFFFF; --n-100: #F0ECE4; --n-200: #DFDAD0; --n-300: #C4BFB4; --n-600: #6E6A62; --n-700: #4A473F;
  --bg: var(--bone); --raised: var(--n-0); --sunken: var(--n-100); --border: var(--n-200);
  --text: var(--ink); --muted: var(--n-600); --accent: var(--ember);
  --success: #2E7D4F; --warning: #8F5500; --danger: #C0341A; --info: #2B6CB0;
  --success-bg: #E4F1E9; --warning-bg: #FBEBD3; --danger-bg: #FBE4DF; --info-bg: #E1ECF7; --tint: #FFF6EC; --tint-line: #E0A566;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r: 8px; --focus: 0 0 0 3px rgba(255, 122, 0, 0.45);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 0.9375rem/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 700; } h2 { font-size: 1.125rem; font-weight: 650; } h3 { font-size: 0.9375rem; font-weight: 600; }
.hero { font-size: 2.1rem; max-width: 22ch; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
code { font-family: var(--mono); font-size: 0.8em; word-break: break-all; }
.muted { color: var(--muted); } .small { font-size: 0.8125rem; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lede { font-size: 1.0625rem; color: var(--n-700); margin-top: var(--s2); }
ul.plain { list-style: none; margin: 0; padding: 0; } ul.plain li { padding: 2px 0; }
blockquote { margin: var(--s2) 0 0; padding-left: var(--s3); border-left: 3px solid var(--tint-line); color: var(--n-700); }
.crumbs { margin: 0 0 var(--s2); }

/* frame */
.top { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; padding: var(--s3) var(--s5); background: var(--raised); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; }
.wordmark { font-family: "Delius Unicase", var(--font); font-weight: 700; letter-spacing: 0; font-size: 1.625rem; line-height: 1; }
.wordmark i { font-style: normal; color: var(--orange); }
.brand-words { display: flex; flex-direction: column; line-height: 1.25; padding-left: var(--s3); border-left: 1px solid var(--n-300); }
.brand-descriptor { font-weight: 600; font-size: 0.8125rem; } .brand-firm { color: var(--muted); font-size: 0.75rem; }
.nav { display: flex; gap: var(--s1); flex-wrap: wrap; }
.nav a { padding: var(--s1) var(--s3); border-radius: 999px; color: var(--n-700); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--sunken); color: var(--ink); } .nav a[aria-current="page"] { background: var(--ink); color: var(--bone); }
.badge { display: inline-block; margin-left: 6px; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 0.75rem; font-weight: 700; text-align: center; }
.who { margin: 0 0 0 auto; } .who label { display: flex; flex-direction: column; } .who select { font: inherit; padding: 4px 8px; border: 1px solid var(--n-300); border-radius: var(--r); background: var(--raised); max-width: 100%; }
.nav-toggle, .nav-button { display: none; }
.page { width: 100%; max-width: 920px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); flex: 1; }
.page-wide { max-width: 1240px; }
.page > * + * { margin-top: var(--s5); } .page > h1 + .lede { margin-top: var(--s2); }
.foot { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--s5); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8125rem; background: var(--raised); }
.foot .wordmark { font-size: 1rem; color: var(--ink); } .build { font-variant-numeric: tabular-nums; }
.flash { margin: 0; padding: var(--s3) var(--s5); } .flash.ok { background: var(--success-bg); color: #1d5a37; } .flash.bad { background: var(--danger-bg); color: #8a2512; }

/* components */
.card { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4) var(--s5); }
.card > * + * { margin-top: var(--s3); }
.note { background: var(--tint); border-color: var(--tint-line); }
.draft-card { background: var(--warning-bg); border-color: #d9a45f; } .ok-card { background: var(--success-bg); border-color: #8fc3a1; }
.btn, button { font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--n-300); background: var(--raised); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover, button:hover { background: var(--sunken); color: var(--ink); }
.primary { background: var(--ink); color: var(--bone); border-color: var(--ink); } .primary:hover { background: #2a2825; color: var(--bone); }
.btn.disabled { opacity: 0.45; pointer-events: none; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--sunken); color: var(--n-700); }
.pill-confirmed, .pill-accepted, .pill-received, .pill-within { background: var(--success-bg); color: #1d5a37; }
.pill-verified { background: var(--info-bg); color: #1d4a7d; } .pill-reviewed { background: var(--warning-bg); color: #6d4200; }
.pill-overdue, .pill-below, .pill-above, .pill-rejected { background: var(--danger-bg); color: #8a2512; } .pill-open { background: var(--sunken); }
.tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--tint-line); background: var(--tint); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ember); }
.tbc { background: var(--warning-bg); color: #6d4200; padding: 0 6px; border-radius: 4px; font-size: 0.8em; font-weight: 600; white-space: nowrap; }
.cite { font-size: 0.8125rem; } .cite-tbc { color: #6d4200; }
.ladder { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rung { display: inline-block; padding: 1px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; border: 1px dashed var(--n-300); color: var(--muted); }
.rung.on { background: var(--ink); color: var(--bone); border: 1px solid var(--ink); } .rung.stale { background: var(--danger-bg); color: #8a2512; border: 1px solid #e3a597; }
.spine { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .spine > div { display: flex; flex-direction: column; gap: 2px; } .spine small { color: var(--muted); } .arrow { color: var(--orange); font-weight: 700; font-size: 1.4rem; }
.steps { display: flex; gap: var(--s1); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--s3); }
.steps a { padding: 4px 12px; border-radius: 999px; text-decoration: none; color: var(--n-700); font-weight: 500; } .steps a:hover { background: var(--sunken); } .steps a[aria-current="page"] { background: var(--orange); color: var(--ink); font-weight: 700; }
.sign { border-left: 4px solid var(--orange); } .sign-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.reopened { background: var(--danger-bg); border-radius: var(--r); padding: var(--s3); }
.notice { background: var(--sunken); border-radius: var(--r); padding: var(--s2) var(--s3); }
.form label { display: block; font-weight: 600; margin-bottom: var(--s3); } .form input[type=text], .form textarea { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 6px 10px; border: 1px solid var(--n-300); border-radius: var(--r); font-weight: 400; }
.inline-form { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); } .inline-form input[type=text] { flex: 1; min-width: 160px; font: inherit; padding: 4px 8px; border: 1px solid var(--n-300); border-radius: var(--r); } .inline-form select { font: inherit; padding: 4px; }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.8125rem; }
pre.doc { white-space: pre-wrap; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); font-family: var(--mono); font-size: 0.8125rem; }

/* tables: heads stick under the header on a wide screen; on a phone the table scrolls inside its own box */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r); }
.table.narrow { max-width: 760px; }
.table th { position: sticky; top: 0; background: var(--sunken); text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--n-700); padding: 8px 12px; border-bottom: 1px solid var(--border); z-index: 1; }
.table th.num { text-align: right; }
.table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .table tr:last-child td { border-bottom: 0; }
.table tr.rejected td { opacity: 0.62; } .table tr.undecided td { background: var(--tint); } .table tr.mismatch td { background: var(--danger-bg); } .table tr.chosen td { background: var(--tint); } .table tr.tbc-row td { background: #fffaf2; }
.table .working td:first-child { font-weight: 500; }

@media (max-width: 860px) {
  .top { gap: var(--s3); padding: var(--s3); }
  .nav-button { display: inline-block; margin-left: auto; padding: 4px 12px; border: 1px solid var(--n-300); border-radius: 999px; }
  .nav { display: none; width: 100%; } .nav-toggle:checked ~ .nav { display: flex; }
  .who { margin: 0; width: 100%; } .who select { width: 100%; }
  .page { padding: var(--s5) var(--s3) var(--s6); } .hero { font-size: 1.6rem; }
  .table { display: block; overflow: auto; max-height: 80vh; } .card { padding: var(--s4); }
}
@media print { .top, .foot, .steps, .sign form { display: none; } body { background: #fff; } }