/* OOC public hub — set in the OOO Design System (design-system/).
   Tokens come from design-system/tokens/*.css; this sheet only lays out the
   hub's own surfaces (index of tools, expanded tool sheet, contact form) in
   that language. No new colours, one face, one weight, radius 0, no borders,
   no shadows; state is opacity. Hairlines are the token --hairline only. */

:root {
  /* The webfont first so every platform renders the same cut as ooo.io. */
  --font-core: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Reversed: white canvas, black ink (the system's light mode). The one
     filled surface goes to a light grey so inputs still read as fills. */
  --canvas: #ffffff; --canvas-invert: #000000; --surface-page: #ffffff;
  --ink: #000000; --ink-invert: #ffffff; --link: #000000; --text-body: #000000; --text-label: #000000;
  --canvas-soft: #ededed; --surface-fill: #ededed;
  --hairline: #e4e4e7; /* zinc-200, the ooo.io Rule */
  /* Tool glyphs knock shapes out against the surface they sit on. */
  --knockout: var(--canvas);
  --paper: var(--canvas);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); }
body { min-height: 100vh; }
button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; border-radius: var(--radius-none); text-align: left; }
a { text-decoration-thickness: 1px; }

.H-root { min-height: 100vh; display: flex; flex-direction: column; }

/* ─── Top: wordmark lockup (type, as on the site) + hub line ───────────── */
.H-top {
  /* ooo.io header: pt 0.75em (9px) at 12px, one 15px line, Rule 0.5em (6px) below → 31px tall. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 9px var(--gutter) 6px;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}
/* ooo.io header title: text-base 0.75rem / leading-tight = 12px / 15px, no tracking. */
.H-wordmark { grid-column: 1 / span 2; color: var(--ink); text-decoration: none; text-transform: uppercase; font-size: var(--index-md-size); line-height: var(--index-md-lh); letter-spacing: 0; }
.H-top-r { grid-column: 3 / span 3; display: flex; justify-content: flex-end; }
/* The mark at the site's header size (w-8 = 32px wide), right-aligned like ooo.io. */
.H-mark { width: 32px; height: auto; display: block; }

/* ─── Title block: one display line, then index-size copy ───────────────── */
.H-head { padding: var(--row-pitch) var(--gutter) 0; }
.H-head h1 { margin: 0; }
.H-head p { margin: var(--row-pitch) 0 0; max-width: 56ch; }
.H-head p + p { margin-top: 0; }

/* ─── Filter: words, active at 1, others at 0.3 ─────────────────────────── */
.H-filter {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 var(--gutter);
  margin-top: calc(var(--row-pitch) * 2);
  height: var(--row-pitch);
}
.H-filter-tabs { grid-column: 1 / span 4; display: flex; gap: var(--space-lg); }
.H-tab { opacity: var(--state-dim); white-space: nowrap; }
.H-tab.on { opacity: var(--state-active); }
.H-count { text-align: right; }

/* ─── Cards: a grid of index cells divided by hairlines (token --hairline) ── */
.H-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--row-pitch);
  border-top: 1px solid var(--hairline);
  flex: 1; align-content: start;
}
.H-card {
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 240px;
  padding: var(--row-pitch) var(--gutter);
  color: var(--ink);
  width: 100%;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.H-card:nth-child(3n) { border-right: none; }
.H-card-top { display: grid; grid-template-columns: 1fr 1fr; height: var(--row-pitch); }
.H-card-top span:last-child { text-align: right; opacity: var(--state-dim); }
.H-card-mid { height: calc(48px + var(--row-pitch) * 4); display: flex; align-items: center; }
.H-card-mid svg { display: block; }
.H-card-name { margin-top: 0; }
/* Four lines reserved so every card in the index is the same height whatever the filter. */
.H-card-desc { margin-top: 0; max-width: 34ch; min-height: calc(var(--index-md-lh) * 4); }
.H-card-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--row-pitch);
}

/* ─── CTAs: the inverted block for Launch, the one fill for Get in touch ──── */
.H-btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 28px; padding: 2px var(--space-md) 0; /* 1px down: Helvetica's ink sits above its line centre */
  background: var(--ink); color: var(--canvas);
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-none); border: none; cursor: pointer;
  font-family: var(--font-core); font-weight: 400; font-size: var(--index-md-size); line-height: var(--index-md-lh);
}
.H-btn--soft { background: var(--canvas-soft); color: var(--ink); }
.H-btn--lg { height: 32px; padding: 2px var(--space-lg) 0; }
.H-btn:hover { opacity: 0.8; }
/* Send: the ink block; hover inverts to the soft fill so the change is unmistakable */
.H-form-row .H-btn:hover { opacity: 1; background: var(--canvas-soft); color: var(--ink); }
.H-form-row .H-btn:disabled { opacity: 0.3; cursor: progress; }
.H-lock { display: inline-flex; margin-right: var(--space-xxs); }
.H-lock svg { display: block; transform: translateY(-1.5px); } /* Helvetica carries more space below the baseline than above the caps, so the ink centre sits ~1.5px above the line centre */
.H-card:hover .H-card-desc { opacity: var(--state-active); }

/* ─── Footer bar (five columns, as the site) ────────────────────────────── */
.H-foot {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: calc(var(--row-pitch) * 2) var(--gutter) var(--space-sm);
  margin-top: 0;
  background: var(--canvas);
}
.H-foot div { padding-right: var(--space-md); }
.H-foot div:last-child { text-align: right; padding-right: 0; }

/* ─── Spec sheet: the hub's object card on a dimmed index ───────────────── */
.H-sheet {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start;
  padding: calc(var(--row-pitch) * 1.5) var(--gutter);
  overflow-y: auto;
}
.H-spec {
  position: relative; width: 100%; max-width: 860px;
  background: var(--canvas); color: var(--ink);
  padding: var(--space-xl) var(--space-xl) var(--space-xl);
}
.H-close { position: absolute; top: var(--space-xl); right: var(--space-xl); }
.H-close .x { color: var(--accent-alert); }
.H-rule { height: 1px; background: var(--hairline); }
.H-rule--ink { background: var(--ink); }

.H-spec-num { margin-top: var(--space-sm); }
.H-spec-subhead { display: flex; justify-content: space-between; align-items: flex-end; margin-top: var(--space-xl); padding-bottom: var(--space-sm); }
.H-spec-mark { height: 20px; width: auto; display: block; }
.H-spec-title { margin-top: var(--space-xl); }
.H-spec-sub { margin-top: var(--space-xs); }

.H-cell .k { display: block; opacity: var(--state-dim); height: var(--row-pitch); }
.H-cell .v { display: block; }
.H-cell--desc .v { max-width: 64ch; }
.H-spec-hero { display: flex; align-items: center; gap: var(--space-xl); padding: var(--space-xl) 0; }
/* Some glyphs are wider than tall (previews 1.4×, soundcloud 1.45×): size to the glyph, never clip. */
.H-spec-hero-icon { flex-shrink: 0; min-width: 74px; display: grid; place-items: center; }
.H-spec-hero-icon svg { display: block; }

.H-spec-row1 { display: grid; grid-template-columns: 1fr 200px; gap: var(--space-xl); padding: var(--row-pitch) 0; }
.H-spec-summary { max-width: 48ch; }
.H-spec-row4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: var(--row-pitch) 0; }
.H-spec-row4 .H-cell { padding-right: var(--space-lg); }
.H-spec-row4 .H-cell + .H-cell { border-left: 1px solid var(--hairline); padding-left: var(--space-lg); }
.H-spec-row3 { grid-template-columns: repeat(3, 1fr); }

.H-spec-foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: var(--row-pitch); }
.H-spec-foot-r { display: flex; align-items: center; gap: var(--space-lg); }
.H-spec-foot-icon svg { display: block; }
.H-form-slot:not(:empty) { margin-top: calc(var(--row-pitch) * 2); padding-top: var(--row-pitch); border-top: 1px solid var(--hairline); }

/* ─── Contact form: fields left, message right, Send, then the note ──────── */
.H-rail-label { display: block; height: var(--row-pitch); }
.H-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); row-gap: var(--row-pitch); }
.H-form > .H-rail-label, .H-form > .H-form-row, .H-form > .H-form-note { grid-column: 1 / -1; }
.f-fields { display: flex; flex-direction: column; gap: var(--space-xs); }
.f-msg { display: flex; flex-direction: column; gap: var(--space-xs); }
.f-msg textarea { flex: 1; }
.H-form label { display: block; }
.H-form input, .H-form textarea {
  display: block; width: 100%;
  background: var(--canvas-soft); color: var(--ink);
  border: none; border-radius: var(--radius-none); outline: none;
  padding: 0 var(--space-xs); height: 20px;
  font-family: var(--font-core); font-weight: 400;
  font-size: var(--index-md-size); line-height: var(--index-md-lh);
}
.H-form textarea { height: auto; min-height: 60px; padding-top: 2px; resize: none; }
.H-form .hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.H-form-row { display: flex; gap: var(--space-lg); align-items: center; }
.H-form-status { min-height: var(--row-pitch); }
.H-form-status.err { color: var(--accent-alert); }
.H-form-note { opacity: var(--state-dim); }
.H-form-note a { color: var(--ink); }

/* ─── Responsive: the index collapses, the sheet stacks, the gutter holds ─ */
@media (max-width: 1100px) {
  .H-grid { grid-template-columns: repeat(2, 1fr); }
  .H-card:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .H-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 768px) {
  .H-top { grid-template-columns: 1fr 1fr; }
  .H-wordmark { grid-column: 1; }
  .H-top-r { grid-column: 2; }
  .H-filter { grid-template-columns: 1fr; height: auto; }
  .H-filter-tabs { grid-column: 1; flex-wrap: wrap; row-gap: 0; }
  .H-count { text-align: left; margin-top: var(--row-pitch); }
  .H-grid { grid-template-columns: 1fr; }
  .H-card, .H-card:nth-child(3n) { min-height: 0; border-right: none; }
  .H-card-mid { padding: var(--row-pitch) 0; }
  .H-foot { grid-template-columns: 1fr 1fr; row-gap: var(--row-pitch); }
  .H-foot div:last-child { text-align: left; }
  .H-sheet { padding: var(--row-pitch) 0 0; }
  .H-spec { padding: var(--row-pitch) var(--gutter); min-height: 100%; }
  .H-close { right: var(--gutter); }
  .H-spec-hero { flex-direction: column; align-items: flex-start; gap: var(--row-pitch); }
  .H-spec-row1 { grid-template-columns: 1fr; gap: var(--row-pitch); }
  .H-spec-row4, .H-spec-row3 { grid-template-columns: 1fr 1fr; row-gap: var(--row-pitch); }
  .H-spec-row4 .H-cell + .H-cell { border-left: none; padding-left: 0; }
  .H-spec-foot { flex-direction: column; align-items: flex-start; gap: var(--row-pitch); }
  .H-form { grid-template-columns: 1fr; }
  .f-msg textarea { min-height: 96px; }
  .H-tab, .H-card { min-height: 44px; }
  .H-btn { height: 36px; }
  .H-tab { display: inline-flex; align-items: center; }
}