/* TSS shared visual system. Load after surface styles on every active TSS page. */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
}
:root {
  --tss-font: 'DM Sans', sans-serif;
  --tss-black: #111113; --tss-dark-surface: #1c1c20;
  --tss-white: #ffffff; --tss-ground: #f5f5f6; --tss-soft: #ededf0;
  --tss-ink: #202024; --tss-muted: #62626b; --tss-line: #d9d9df;
  --tss-red: #d9233b; --tss-red-hover: #b91c32; --tss-red-soft: #fcecef;
  --tss-on-dark: #f5f5f6; --tss-muted-dark: #b8b8c1;
  --tss-radius: 4px;
  --ground: var(--tss-ground); --surface: var(--tss-white); --surface-2: var(--tss-soft);
  --ink: var(--tss-ink); --ink-2: var(--tss-muted); --ink-3: var(--tss-muted);
  --muted: var(--tss-muted); --rule: var(--tss-line); --rule-strong: #aaaab3;
  --line: var(--tss-line); --paper: var(--tss-white); --bg: var(--tss-ground);
  --accent: var(--tss-red); --accent-dark: var(--tss-red-hover); --accent-soft: var(--tss-red-soft);
  --teal: var(--tss-red); --soft: var(--tss-red-soft); --navy: var(--tss-black);
  --alert: var(--tss-red); --alert-wash: var(--tss-red-soft); --warn: var(--tss-red-hover);
  --focus: var(--tss-red); --red: var(--tss-red);
  --topbar: var(--tss-black); --topbar-ink: var(--tss-on-dark);
  --f-ui: var(--tss-font); --f-mono: var(--tss-font); --f-read: var(--tss-font);
  --c-void: var(--tss-black); --c-ink: var(--tss-dark-surface); --c-bone: var(--tss-on-dark);
  --c-ash: #d9d9df; --c-bodytext: var(--tss-muted-dark); --c-pebble: var(--tss-muted-dark);
  --c-steel: var(--tss-muted-dark);
  font-family: var(--tss-font); color-scheme: light;
}
/* One actual family for headings, figures, notes, controls and inherited utility classes. */
html, body, body *, body *::before, body *::after { font-family: var(--tss-font) !important; }
body { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--tss-font); }
input, select, textarea, button, .booking-link, .btn-red, .btn-ghost { border-radius: var(--tss-radius); }
:focus-visible { outline: 2px solid var(--tss-red); outline-offset: 3px; }
::selection { background: var(--tss-red-soft); color: var(--tss-ink); }
.tss-wordmark, .tss-site header a[aria-label='TSS Labs home'], .tss-site footer a[aria-label='TSS Labs home'], .tss-privacy .logo {
  font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -1.5px;
}
.tss-wordmark span, .tss-privacy .logo span { color: var(--tss-red); }
.portal-topbar, .topbar, .masthead, .tss-privacy header { background: var(--tss-black); color: var(--tss-on-dark); border-top: 3px solid var(--tss-red); }
.topbar { min-height: 66px; --topbar-h: 66px; }
.topbar .brand { font-size: 18px; font-weight: 750; letter-spacing: -.4px; }
.portal-topbar .portal-brand { font-size: 12px; letter-spacing: .07em; }
.portal-topbar .portal-subtitle, .portal-topbar .portal-brand small, .portal-topbar .nav-site { color: var(--tss-muted-dark); }
.network-header, .delivery-hero, .portal-footer { background: var(--tss-black); }
.network-header::before, .delivery-hero::before { background: radial-gradient(circle,#ffffff25 .7px,transparent 1px); background-size: 24px 24px; }
.network-description, .network-overview small, .delivery-hero .lede, .delivery-hero .freshness { color: var(--tss-muted-dark); }
.network-heading h1, .delivery-hero h1 { font-size: clamp(28px,3vw,38px); font-weight: 650; letter-spacing: -.04em; }
.network-header .eyebrow, .delivery-hero .eyebrow { color: var(--tss-muted-dark); }
.network-header .eyebrow::before, .delivery-hero .eyebrow::before { background: var(--tss-red); }
.portal-footer { border-top-color: var(--tss-red); }
.portal-footer p, .portal-footer-bottom, .portal-footer-bottom a { color: var(--tss-muted-dark); }
.portal-footer strong, .portal-footer .tss-wordmark, .footer-invitation a, .delivery-client .portal-footer .footer-invitation a { color: var(--tss-on-dark); }
.footer-invitation a span { color: var(--tss-red); }
.directory-context, .portfolio-note, .asset-label, .asset-date, .lp-kind, .ticket-context { color: var(--tss-muted); }
.lp-list th { background: var(--tss-soft); color: var(--tss-muted); }
.lp-list tbody tr:hover { background: var(--tss-ground); }
.header-filters .more-filters summary { background: var(--tss-dark-surface); border-color: #62626b; color: var(--tss-on-dark); }
.lp-scroll, .lp-frame, .conversation, .offer-panel, .metrics, .empty-state { border-color: var(--tss-line); border-radius: var(--tss-radius); }
.delivery-client .period-form .secondary, .btn-red { background: var(--tss-red); border-color: var(--tss-red); color: var(--tss-white); }
.delivery-client .period-form .secondary:hover, .btn-red:hover { background: var(--tss-red-hover); }
.delivery-sections a, .delivery-sections a span { color: var(--tss-muted-dark); }
.delivery-sections a:hover, .delivery-sections a:focus-visible { color: var(--tss-white); border-bottom-color: var(--tss-red); }
.status-pill { background: var(--tss-soft); color: var(--tss-ink); }
.status-pill.ready { background: var(--tss-soft); color: var(--tss-ink); }
.status-pill.declined { background: var(--tss-red-soft); color: var(--tss-red-hover); }
.metric strong, .kpi-n, time, .num { font-variant-numeric: tabular-nums; }
.tss-site .accent { font-style: normal; font-weight: 600; color: var(--tss-red); }
.tss-site .text-blood { color: var(--tss-red); }
.tss-site .eyebrow::before { background: var(--tss-red); }
.tss-site .btn-red { background: var(--tss-red); }
.tss-privacy { background: var(--tss-ground); }
.how-link { display: inline-flex; margin-top: 12px; color: var(--tss-on-dark); text-underline-offset: 4px; font-size: 13px; }
.how-it-works { margin: 32px 0; padding: 28px 0; border-top: 1px solid var(--tss-line); }
.how-it-works h2 { margin: 0 0 16px; font-size: 24px; letter-spacing: -.03em; }
.how-it-works ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.how-it-works li { counter-increment: steps; font-size: 14px; line-height: 1.55; }
.how-it-works li::before { content: '0' counter(steps); display: block; margin-bottom: 10px; color: var(--tss-red); font-size: 12px; font-weight: 700; }
.how-it-works strong { display: block; margin-bottom: 6px; }
.how-it-works p { color: var(--tss-muted); margin: 0; }
.how-it-works .commercial-note { margin-top: 20px; font-size: 12px; }
/* Shared interaction detail: a precise red underline, without moving the layout. */
.portal-nav a, .delivery-sections a, .nav-secondary a { text-decoration-thickness: 2px; text-underline-offset: 7px; }
.portal-nav a:hover, .nav-secondary a:hover { text-decoration: underline; text-decoration-color: var(--tss-red); }
@media(max-width:760px) {
  .how-it-works ol { grid-template-columns: 1fr; gap: 20px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .tss-wordmark { font-size: 28px; }
}

.masthead .wordmark, .masthead a { color: var(--tss-on-dark); }
.masthead .wordmark { font-size: 28px; letter-spacing: -1.5px; }
.login button, .edit-form button[type="submit"] { background: var(--tss-red); color: var(--tss-white); border-color: var(--tss-red); }

.work-switch { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.work-switch button { min-height:44px; padding:10px 18px; border:1px solid var(--tss-line); color:var(--tss-ink); background:var(--tss-white); font-size:14px; font-weight:600; }
.work-switch button[aria-selected="true"] { color:var(--tss-white); background:var(--tss-red); border-color:var(--tss-red); }
[role="tabpanel"][hidden] { display:none; }
#how-it-works { scroll-margin-top:100px; }

.topbar { height: auto; }
.portal-footer .tss-wordmark { font-size:28px; }
.tss-site #proof, .tss-site #problems { background:var(--tss-ground); border-color:var(--tss-line); }
.tss-site .result-card, .tss-site .contact-channel { background:var(--tss-white); }
.tss-site .bd-boundary { border-color:var(--tss-red); }
.tss-site .bd-step::before { color:var(--tss-muted-dark); }
.tss-site .mark::after { background:var(--tss-red); }

.topbar .brand { display:inline-flex; align-items:center; gap:16px; }
.topbar .brand-caption { font-size:12px; letter-spacing:.07em; padding-left:16px; border-left:1px solid #62626b; }
.topbar .tss-wordmark { font-size:28px; letter-spacing:-1.5px; }
.tss-site #proof, .tss-site #problems { --c-void:var(--tss-ground); --c-ink:var(--tss-white); --c-bone:var(--tss-ink); --c-ash:var(--tss-muted); --c-bodytext:var(--tss-muted); --c-pebble:var(--tss-muted); --c-line:var(--tss-line); }
.tss-site .lite-audit { background:var(--tss-dark-surface); border-color:var(--tss-muted); }
.tss-site .selected-offer { background:var(--tss-dark-surface); }

.delivery:not(.delivery-client) { min-height:100svh; display:flex; flex-direction:column; }
.delivery:not(.delivery-client) .access-main { flex:1; }
.delivery:not(.delivery-client) .portal-footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; max-width:1180px; margin:auto; padding:20px 24px; font-size:12px; }
.delivery:not(.delivery-client) .portal-footer-bottom a { color:var(--tss-on-dark); }
.tss-site .result-card { color:var(--tss-ink); border-color:var(--tss-line); }
.tss-site .result-category, .tss-site .result-context, .tss-site .results-caption { color:var(--tss-muted); }

.board-scroll:has(.lp-registry) { overflow-x:auto; }
.board-scroll:has(.lp-registry) .lp-registry thead th { position:static; }
.delivery:not(.delivery-client) > .masthead { width:100%; max-width:none; }

/* Keep the full brand together in compact headers and footers. */
.tss-wordmark, .masthead .wordmark, .tss-privacy .logo, .tss-site a[aria-label="TSS Labs home"] { white-space:nowrap; flex-shrink:0; text-transform:none; }
@media(max-width:480px) { .portal-brand > span:last-child { white-space:normal; line-height:1.35; } }
@media(max-width:360px) { .tss-site header > .site-shell { flex-wrap:wrap; row-gap:8px; } .tss-site header .nav-actions { margin-left:auto; } }
.delivery .delivery-main { width:100%; min-width:0; }