/* apps/website/html/css/hub.css — the hub's own layout and components.

   The design system it is built from lives in css/system.css, which the page links first.
   Per §13 of the redesign spec each page gets its own layout decisions; per §8.6 none of them
   are allowed a private palette, webfont or radius ramp, so nothing here defines a colour.

   The hub has no header bar. Every other page frames its content with one; this page IS its
   content, so the wordmark sits in the composition rather than above it, and the whole block
   is centred in the window. That is what stops the leftover space reading as a shortfall: a
   centred object with air around it is deliberate, while a top-aligned page with a void under
   it looks like it failed to fill.

   Structure: mark and tagline on one baseline, then three ruled columns, one per group. The
   rules are what make it read as a board rather than three lists that happen to be adjacent.

   §4 still holds — nothing is filled, because the hub measures nothing; the only fill on the
   page is the hover lift. §5 still holds — no service carries a glyph.
*/

.h-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 24px }
.h-wrap { width:100%; max-width:1000px }

/* Version sits outside the composition — it is a fact about the page, not part of it. */
.h-corner { position:fixed; top:18px; right:22px; display:flex; align-items:center; gap:14px;
  font-size:11px; color:var(--ink-5) }

.h-brand { display:flex; align-items:baseline; gap:22px; margin-bottom:34px; flex-wrap:wrap }
.h-wm { font-size:54px; font-weight:700; color:var(--ink); letter-spacing:-.04em; line-height:1;
  white-space:nowrap; cursor:pointer; user-select:none }
.h-tag { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-5) }

.h-cols { display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); padding-top:22px }
.h-col { padding:0 22px; border-left:1px solid var(--line); min-width:0 }
.h-col:first-child { border-left:0; padding-left:0 }
.h-col:last-child { padding-right:0 }
.h-lg { display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4); font-weight:500; margin-bottom:13px }
.h-lg b { font-weight:500; color:var(--ink-5) }

.h-it { display:block; text-decoration:none; padding:6px 10px; text-align:left;
  transition:background 120ms ease }
.h-it:hover { background:var(--surface) }
.h-it .n { display:block; font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.005em }
.h-it .d { display:block; font-size:11px; color:var(--ink-5); margin-top:3px }
.h-it .note { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-5) }

/* The admin cell opens the tools in place rather than navigating, so it is a real <button>
   reset to look like its siblings — one weight lighter on the name, which is how it reads as
   different without taking a glyph. */
button.h-it { font:inherit; background:none; border:0; width:100%; cursor:pointer }
button.h-it .n { font-weight:500; color:var(--ink-2) }
button.h-it:hover .n { color:var(--ink) }

/* Media's tools, shown inside Media's own column so the other two never move. Seven names
   cannot carry descriptions in a column this narrow, so they pair up and go without — the
   column is briefly denser than its neighbours, which is the price of nothing else jumping. */
.h-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 8px }
.h-pair .h-it { padding:6px 9px }
.h-pair .n { font-size:15px; font-weight:500; color:var(--ink-2) }
.h-pair .h-it:hover .n { color:var(--ink) }

.h-back { font:inherit; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-5); background:none; border:0; padding:0 0 11px; cursor:pointer;
  display:block; transition:color 120ms ease }
.h-back:hover { color:var(--ink-2) }
[hidden] { display:none }

/* Sign-in lives in the Private column: the gate sits where the gated services will appear, so
   signing in fills the column it occupied and nothing else on the page moves. Inputs get a
   bottom rule rather than a box — the page has no boxes. */
.h-in { font:inherit; font-size:14px; color:var(--ink); background:none; width:100%;
  border:0; border-bottom:1px solid var(--line); padding:6px 0; margin-bottom:11px;
  outline:none; transition:border-color 120ms ease }
.h-in::placeholder { color:var(--ink-5) }
.h-in:focus { border-bottom-color:var(--edge) }
.h-go { font:inherit; font-size:14px; color:var(--ink-2); background:none; border:0;
  padding:5px 0; cursor:pointer; transition:color 120ms ease }
.h-go:hover { color:var(--ink) }
.h-err { display:block; font-size:11px; color:var(--err); margin-top:9px }
.h-note { font-size:11px; color:var(--ink-5); line-height:1.6 }
.h-out { margin-top:15px }

/* The name links to what the site is named after; it says so only when asked. */
.h-egg { font-size:12px; color:var(--ink-5); margin:-22px 0 30px; display:none }
.h-egg.show { display:block }
.h-egg a { color:var(--ink-4); text-decoration:none; border-bottom:1px solid var(--line) }
.h-egg a:hover { color:var(--ink-2); border-bottom-color:var(--edge) }

@media (max-width: 820px) {
  .h-wm { font-size:40px }
  .h-cols { grid-template-columns:1fr; padding-top:18px }
  .h-col { padding:0 0 20px; border-left:0 }
  .h-col + .h-col { border-top:1px solid var(--line-2); padding-top:18px }
}