/* ==========================================================================
   78uikit.com — site-only layout.

   🔴 The kit owns the components. Nothing here re-styles a ._78-* internal;
   this file is page layout (hero, sections, footer) plus the few marketing
   pieces the kit has no component for. Every color, radius, space and font
   comes from a kit token, so the site re-themes with everything else.
   ========================================================================== */

/* A `[hidden] { display: none !important }` used to sit here, because a kit
   component that set its own `display` (._78-alert is flex) out-ranked the UA
   rule and stayed visible when hidden. The kit's reset carries that rule as of
   v0.2.0, so the workaround is gone — the form example's error summary is the
   page that proves it. */

/* --------------------------------------------------------------------------
   Page rhythm
   -------------------------------------------------------------------------- */
.site-section {
  padding: 64px var(--space-4);
}
.site-section + .site-section {
  border-top: 1px solid var(--border);
}
.site-section--tint { background: var(--bg2); }

.site-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}
.site-wrap--narrow { max-width: 780px; }

.site-section__head {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.site-section__head h1,
.site-section__head h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.2;
  margin: var(--space-2) 0 0;
}
.site-section__head p {
  color: var(--dim);
  margin: var(--space-3) 0 0;
}

/* --------------------------------------------------------------------------
   Topbar + footer nav — plain links, tinted by the accent on hover/current
   -------------------------------------------------------------------------- */
.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-right: var(--space-2);
}
.site-nav a {
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current] { color: var(--accent); }

.site-gh svg { width: 17px; height: 17px; }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: var(--space-5) var(--space-4);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__links a {
  color: var(--dim);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.site-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) var(--space-4) clamp(32px, 4vw, 48px);
  text-align: center;
}
/* A soft accent wash behind the headline — pure token, so it follows the theme */
.site-hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 420px;
  background: radial-gradient(ellipse at 50% 60%, var(--accent-lo), transparent 70%);
  pointer-events: none;
}
.site-hero > * { position: relative; }

.site-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
  max-width: 16ch;
  margin-inline: auto;
}
.site-hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.site-hero__pitch {
  max-width: 60ch;
  margin: var(--space-4) auto 0;
  color: var(--dim);
  font-size: clamp(1rem, 0.95rem + 0.3vw, var(--fs-lg));
}
.site-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   The live theme switcher in the hero — the sell, happening on screen
   -------------------------------------------------------------------------- */
.site-switch {
  max-width: 620px;
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg2);
  box-shadow: var(--shadow);
}
.site-switch__label {
  display: block;
  color: var(--dim);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
}
.site-switch__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* Swatches are real buttons: the accent is the button's own background, so the
   control demonstrates the token it sets. */
.site-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--swatch);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.site-swatch:hover { transform: translateY(-2px); }
.site-swatch:focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: 2px;
}
.site-swatch[aria-pressed="true"] {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg2) inset;
}

.site-switch__sep {
  width: 1px;
  height: 26px;
  background: var(--border);
}
.site-switch__note {
  margin: var(--space-3) 0 0;
  color: var(--dim);
  font-size: var(--fs-xs);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Code block — the kit has no code component, so it is site chrome for now.
   Rendered by includes/code.php, copy button wired in assets/docs.js.
   -------------------------------------------------------------------------- */
.site-code {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  overflow: hidden;
}
.site-code + .site-code { margin-top: var(--space-3); }

.site-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-h-sm);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--dim);
  font-size: var(--fs-xs);
}
.site-code pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  tab-size: 2;
}
.site-code code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
}
.site-code .tok-tag  { color: var(--accent); }
.site-code .tok-attr { color: var(--info); }
.site-code .tok-str  { color: var(--success); }
.site-code .tok-com  { color: var(--dim); }

/* --------------------------------------------------------------------------
   Proof strip + feature cards
   -------------------------------------------------------------------------- */
.site-proof {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .site-proof { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.site-feature h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
}
.site-feature p {
  margin: 0;
  color: var(--dim);
  font-size: var(--fs-sm);
}
.site-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  background: var(--accent-lo);
  color: var(--accent);
}
.site-feature__icon svg { width: 18px; height: 18px; }

.site-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-section { padding: 48px var(--space-4); }
}

/* ==========================================================================
   Docs — the app-shell pages
   ========================================================================== */

/* The site footer sits outside ._78-app-main, so it has to make the same room
   for the fixed sidebar. Mirrors the kit's own rules, including the 768px
   breakpoint where the sidebar becomes a drawer. */
:root[data-sidebar] .site-footer {
  margin-left: var(--sidebar-w);
  transition: margin-left var(--transition-slow);
}
:root[data-sidebar="rail"] .site-footer { margin-left: var(--rail-w); }
@media (max-width: 768px) {
  :root[data-sidebar] .site-footer,
  :root[data-sidebar="rail"] .site-footer { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.site-doc { max-width: 820px; }

.site-doc__title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 0;
}
.site-doc__lead {
  margin: var(--space-3) 0 0;
  color: var(--dim);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.site-doc section { margin-top: var(--space-6); }

.site-doc h2 {
  font-size: var(--fs-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.site-doc h3 {
  font-size: var(--fs-lg);
  margin: var(--space-5) 0 var(--space-2);
}
/* Prose rules are for the article's own text, never for a live demo or a kit
   alert: inside .site-example__preview (and any ._78-alert-body) the kit's own
   paragraph and list rhythm has to be what you see, or the page documents the
   site instead of the kit. (A bare
   `.site-doc p` out-ranked the kit's alert paragraph spacing and gave every
   demo paragraph a 12px bottom margin the kit doesn't have.) */
.site-doc p:not(.site-example__preview *, ._78-alert-body *),
.site-doc li:not(.site-example__preview *, ._78-alert-body *) { line-height: 1.7; }
.site-doc p:not(.site-example__preview *, ._78-alert-body *)  { margin: 0 0 var(--space-3); }

/* :not([class]) so a kit list class (_78-list-plain) is not out-ranked by prose styling. */
.site-doc ul:not([class]):not(.site-example__preview *, ._78-alert-body *) { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.site-doc li:not(.site-example__preview *, ._78-alert-body *) { margin-bottom: var(--space-2); }

/* Inline code inside prose — distinct from a .site-code block */
.site-doc :not(pre) > code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-lo);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.92em;
}
/* Prose links only. A bare `.site-doc a` would out-specify ._78-btn-primary's
   own color and paint a button's label accent-on-accent — restyling a kit
   internal by accident, which is exactly what this file must never do. Kit
   components always carry a class; prose links never do. */
.site-doc a:not([class]) { color: var(--accent); }

/* --------------------------------------------------------------------------
   Demo — a rendered component beside the markup that made it
   -------------------------------------------------------------------------- */
.site-demo {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}
@media (min-width: 980px) {
  .site-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}
.site-demo__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
}
.site-demo__preview ._78-card { flex: 1 1 100%; }

/* --------------------------------------------------------------------------
   Prev / next
   -------------------------------------------------------------------------- */
.site-doc__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   On this page — the contents rail

   The kit's own ._78-toc, filled by _78.toc (the site proved it out, then it
   moved into the kit). includes/doc-close.php writes the empty
   <aside class="_78-toc"> beside the article; .site-doc-layout carries
   ._78-toc-layout, whose container query swaps the rail for the dropdown.
   Nothing here restyles it — the kit owns the component.

   A second axis of navigation: the left sidebar says which page you are on,
   the rail says where you are in it. Deliberately NOT sub-items nested into
   the sidebar — the kit's nav is flat on purpose.
   -------------------------------------------------------------------------- */

/* Anchored headings must clear the fixed topbar when jumped to */
.site-doc section[id],
.site-doc h2[id],
.site-doc h3[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* --------------------------------------------------------------------------
   Live example — the rendered component, with its markup joined underneath
   -------------------------------------------------------------------------- */
.site-example { margin: 0 0 var(--space-5); }

.site-example__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg2);
}
/* Demos that lay themselves out (grids, tables, stacked cards) take the row */
.site-example__preview > ._78-kpi-grid,
.site-example__preview > ._78-card-grid,
.site-example__preview > ._78-grid,
.site-example__preview > ._78-card-stack,
.site-example__preview > ._78-form-inline,
.site-example__preview > ._78-table-wrap,
.site-example__preview > ._78-table-card,
.site-example__preview > ._78-card,
.site-example__preview > ._78-bar-list,
.site-example__preview > ._78-empty,
.site-example__preview > ._78-alert,
.site-example__preview > ._78-field,
.site-example__preview > ._78-tabs,
.site-example__preview > ._78-flex-col,
.site-example__preview > ._78-figure-row,
.site-example__preview > ._78-split-bar,
.site-example__preview > ._78-split-head,
.site-example__preview > ._78-split-legend,
.site-example__preview > ._78-details,
.site-example__preview > .site-demo-block { flex: 1 1 100%; }

.site-example .site-code {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: 0;
}

/* A neutral wrapper for demo markup that needs to own its own layout */
.site-demo-block > * + * { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Adapters — the live library examples
   -------------------------------------------------------------------------- */
.site-chart-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .site-chart-grid { grid-template-columns: 1.6fr 1fr; }
}
.site-chart-box {
  position: relative;
  height: 260px;
}

/* ==========================================================================
   Generator — layout for the theme tool.
   Site layout only: the controls and panes are kit components; this file
   just arranges them and styles the two native inputs the kit has no
   component for (a color well and a range slider).
   ========================================================================== */
.gen-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);   /* not 1fr: a wide child would set the track minimum */
  align-items: start;
}
@media (min-width: 1040px) {
  .gen-grid { grid-template-columns: 340px minmax(0, 1fr); }
}

.gen-panes {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);   /* not 1fr: a wide child would set the track minimum */
}
@media (min-width: 720px) {
  .gen-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A pane paints itself from the generated tokens, which are written onto it
   as inline custom properties — so the two schemes sit side by side on one
   page without either one touching the document's own theme. */
.gen-pane {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.gen-pane[data-scheme="light"] { color-scheme: light; }
.gen-pane[data-scheme="dark"]  { color-scheme: dark; }

.gen-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.gen-pane__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.gen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Accent well + hex field */
.gen-accent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gen-accent input[type="color"] {
  width: 44px;
  height: var(--control-h);
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  cursor: pointer;
  flex: 0 0 auto;
}
.gen-accent ._78-input { flex: 1 1 auto; min-width: 0; }

.gen-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.gen-preset {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--preset);
  cursor: pointer;
  transition: transform var(--transition);
}
.gen-preset:hover { transform: translateY(-2px); }
.gen-preset:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; }

/* Range slider — themed to match the kit's controls */
.gen-range {
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Token swatch strip inside a preview pane */
.gen-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
}
.gen-sw {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gen-sw i { display: block; height: 24px; }
.gen-sw span {
  display: block;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The generated CSS output */
.gen-out {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  white-space: pre;
}

.gen-ratio { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Examples — the standalone full-page showcases

   Layout only, again. Everything with color on those pages is a kit class or
   a kit token; these rules just place things on the screen.
   ========================================================================== */

/* Page header: title on the left, controls on the right, stacking on narrow. */
.ex-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ex-head__title {
  margin: var(--space-1) 0 var(--space-1);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.ex-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ._78-select is full-width by design — in a toolbar it should be its own size. */
.ex-select-auto { width: auto; min-width: 150px; }

/* Main column + side column, one column once there is no room for two. */
.ex-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
@media (max-width: 1000px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A canvas needs a sized box: Chart.js fills its parent, it does not measure. */
.ex-chart { position: relative; height: 300px; }
.ex-chart--sm { height: 190px; }

/* Toolbar above a grid — search grows, the rest keeps its size. */
.ex-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ex-toolbar__search { flex: 1 1 220px; max-width: 320px; }
.ex-toolbar__spacer { flex: 1 1 auto; }

/* Tabulator sizes itself; this is only the box it sits in. */
.ex-grid-wrap { min-height: 420px; }

/* The form example: fields in the main column, guidance beside them. */
.ex-form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .ex-form { grid-template-columns: minmax(0, 1fr); }
}
/* The aside follows you down a long form on a wide screen. */
@media (min-width: 901px) {
  .ex-form__aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}
.ex-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ex-form legend { padding: 0; }

/* A stack of checkboxes or radios reads as a group, not a paragraph. */
.ex-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The sticky action row at the foot of the form. */
.ex-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Closing strip: what the example is, and the way back out of it. */
.ex-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.ex-foot a { color: var(--accent); }
.ex-foot__sep { margin: 0 var(--space-2); color: var(--dim); }

/* The back button loses its label where the topbar gets tight. */
@media (max-width: 560px) {
  .ex-back { display: none; }
}

/* Lists inside an example: the validation summary and the "what happens next"
   steps. Both are prose in a component, which the kit deliberately leaves
   un-styled. */
.ex-summary-list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}
.ex-summary-list li + li { margin-top: var(--space-1); }
.ex-summary-list a { color: inherit; font-weight: 600; }

.ex-steps {
  margin: 0;
  padding-left: var(--space-4);
  line-height: 1.7;
}
.ex-steps li + li { margin-top: var(--space-2); }

/* Inline code in an example's prose — the docs rule is scoped to .site-doc. */
.ex-form code,
.ex-foot code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* A radio or check whose label is a heading plus an explanation. */
.ex-check-list ._78-check { align-items: flex-start; }
.ex-check-list ._78-check input { margin-top: 3px; }

/* --------------------------------------------------------------------------
   Brand mark
   -------------------------------------------------------------------------- */

/* The kit sizes a brand svg 20x20, which assumes a square mark. The [7][8]
   pair is 46x24, so it needs its own width — composed, not overridden:
   `._78-topbar-brand .site-mark` out-specifies `._78-topbar-brand svg`
   without reaching for !important. */
._78-topbar-brand .site-mark { width: 38px; height: 20px; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.site-404 { max-width: 620px; margin-inline: auto; }

/* The number, quiet — it is a label, not the message. */
.site-404__code {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: .28;
  margin-bottom: var(--space-2);
}
.site-404 .site-hero__cta { justify-content: center; }

/* Tones page — two panes, each carrying one theme's tokens inline (assets/tones.js) */
.site-tones { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin: var(--space-4) 0; }
.site-tones__pane {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.site-tones__pane ._78-alert { padding: var(--space-1) var(--space-2); }
.site-tones__pane ._78-progress { min-width: 80px; }

/* --------------------------------------------------------------------------
   Reference tables whose cells hold sentences (the Upgrading page). The kit
   centers cells vertically, which suits one-line data rows; a row whose cells
   run to different lengths reads better from a shared top line.
   -------------------------------------------------------------------------- */
.site-table-top td { vertical-align: top; }