@import url("./tokens/fonts.css");
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");
@import url("./tokens/effects.css");
@import url("./components/components.css");

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; }
body { background: var(--surface-page); margin: 0; }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

.ct-container {
  margin-inline: auto;
  max-width: var(--container-lg);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  width: 100%;
}

/* ============================================================
   LAYOUT PRIMITIVES - pick in this order

   A card is a container of LAST resort. Use it only for something that is
   genuinely a separate, liftable object: one clickable record, one modal
   surface. For everything else:

     1. .ct-measure   prose and single-subject content
     2. .ct-stack     vertical rhythm between siblings
     3. .ct-divide    a list of comparable items, hairline-separated
     4. .ct-table     dense operational data, comparison, deadlines
     5. .ct-card      only when the block must lift off the page

   Separation by hairline or whitespace reads as hierarchy. Separation by a
   rounded bordered box repeated N times reads as a generic dashboard, which
   readme.md section 9 forbids. If more than three sibling blocks would carry
   the same shape and the same weight, they are a list or a table, not cards.
   ============================================================ */

.ct-section + .ct-section { margin-top: var(--space-12); }

.ct-measure { max-width: var(--measure-prose); }
.ct-measure.narrow { max-width: var(--measure-narrow); }

.ct-stack > * + * { margin-top: var(--space-4); }
.ct-stack.tight > * + * { margin-top: var(--space-2); }
.ct-stack.loose > * + * { margin-top: var(--space-8); }

/* A list of comparable items. Hairlines, not boxes. */
.ct-divide > * { padding-block: var(--row-padding-y); }
.ct-divide > * + * { border-top: 1px solid var(--border-subtle); }
.ct-divide.tight > * { padding-block: var(--row-padding-y-tight); }

/* Label left, value right, baseline aligned. */
.ct-row {
  align-items: baseline;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}
.ct-row > :first-child { color: var(--text-muted); }

/* Dense operational data. */
.ct-table { border-collapse: collapse; width: 100%; }
.ct-table th {
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: var(--row-padding-y) var(--space-3);
  text-align: left;
}
.ct-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--row-padding-y) var(--space-3);
}
.ct-table tbody tr:last-child td { border-bottom: 0; }
.ct-table .numeric { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Vertex graphic devices (readme.md section 6) ---- */

.ct-trajectory {
  background: var(--violet-500);
  border: 0;
  height: 2px;
  margin: 0;
  width: var(--space-16);
}
.ct-trajectory.vertical { height: 100%; width: 2px; }

.ct-point {
  background: var(--violet-500);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(111, 43, 255, 0.12);
  height: 10px;
  width: 10px;
}

.ct-vortex {
  border-left: 2px solid var(--violet-200);
  border-top: 2px solid var(--precision-200);
}

/* Container of last resort. */
.ct-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.numeric { font-variant-numeric: tabular-nums; }