/* ==========================================================================
   Cliff Hwang — Components  v0.2
   Depends on tokens.css + base.css
   Every dimension below is a multiple of 4. Changes from the measured
   original are marked [was: N].
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.ch-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--ch-z-nav);
  padding: var(--ch-space-6) var(--ch-space-4) var(--ch-space-4) var(--ch-space-6);
  border-radius: var(--ch-radius-3xl);
}

.ch-nav__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ch-space-8);
  min-height: var(--ch-nav-height);      /* 72px  [was: 70] */
  padding: var(--ch-space-4);
  border-radius: var(--ch-radius-full);
  background: var(--ch-bg-nav);
  backdrop-filter: var(--ch-blur-nav);
  -webkit-backdrop-filter: var(--ch-blur-nav);
  box-shadow: var(--ch-glass-edge-light);
}

.ch-nav__links {
  display: flex;
  align-items: center;
  gap: var(--ch-space-8);
}

.ch-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ch-space-1);                /* [was: 5] */
  font-size: var(--ch-nav-size);
  line-height:normal;
  letter-spacing: var(--ch-nav-ls);
  font-weight: var(--ch-weight-medium);
  color: var(--ch-text);
}
.ch-nav__link:hover { color: var(--ch-accent-hover); }

/* Resume — no longer a bespoke button. It is the shared button component:
   .ch-btn .ch-btn--ghost .ch-btn--pill. The .ch-nav__button class survives as
   a selector alias on those same rules (see the BUTTON section below), so
   existing markup renders identically without carrying its own CSS.

   It lands on the default 40px height, which is exactly the nav pill's inner
   box: 72px min-height minus 2 x 16px padding. The measured original was 36px
   tall with radius 36 — already a pill, just 4px off the control ladder. */

/* --------------------------------------------------------------------------
   CHIP / TAG
   Padding 10/14 → 12/16 pushes the height 40 → 44, which also clears the
   44px minimum touch target.
   -------------------------------------------------------------------------- */
.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ch-space-3);                                     /* [was: 10] */
  height: var(--ch-chip-height);                                                /* [was: 40] */
  padding: var(--ch-space-3) var(--ch-space-4)
           var(--ch-space-3) var(--ch-space-3);              /* [was: 10 14 10 10] */
  border-radius: var(--ch-radius-sm);
  background: var(--ch-bg-strong);
  color: var(--ch-text);
  font-size: var(--ch-chip-size);
  line-height:normal;
  letter-spacing: var(--ch-chip-ls);
  font-weight: var(--ch-weight-regular);
  white-space: nowrap;
}
.ch-chip__icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* No leading icon — symmetric padding */
.ch-chip--bare { padding: var(--ch-space-3) var(--ch-space-4); }

.ch-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ch-space-3);                                     /* [was: 10] */
}

/* --------------------------------------------------------------------------
   GLASS CARD
   -------------------------------------------------------------------------- */
.ch-glass {
  position: relative;
  border-radius: var(--ch-radius-2xl);
  background: var(--ch-bg-glass);
  backdrop-filter: var(--ch-blur-glass);
  -webkit-backdrop-filter: var(--ch-blur-glass);
  box-shadow: var(--ch-glass-edge-light);
  overflow: hidden;
}

.ch-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--ch-glass-sheen);
  opacity: 0.35;
  pointer-events: none;
}
.ch-glass > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   PROJECT CARD
   -------------------------------------------------------------------------- */
.ch-project-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ch-grid-gap);
}

.ch-project {
  display: flex;
  flex-direction: column;
  gap: var(--ch-stack-gap);
  color: inherit;
}

.ch-project__cover {
  position: relative;
  border-radius: var(--ch-radius-2xl);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--ch-bg-subtle);
}
.ch-project__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ch-project__body {
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-4);
}

/* The inline "View Project" CTA (.ch-cta / .ch-cta__icon) was removed in v0.6:
   the home-page redesign dropped it from every project card, and no other page
   used it. Its --ch-cta-* tokens are gone from tokens.css too. Recover from git
   if a text-link CTA is wanted again. */

/* --------------------------------------------------------------------------
   TOOL CARD
   -------------------------------------------------------------------------- */
.ch-tool {
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-2);
  padding: var(--ch-space-6) var(--ch-space-8);
  border-radius: var(--ch-radius-lg);
  background: var(--ch-bg-subtle);
}
.ch-tool__kicker {
  font-size: var(--ch-chip-size);
  line-height:normal;
  letter-spacing: var(--ch-chip-ls);
  color: var(--ch-text-muted);
}
.ch-tool__title {
  font-size: var(--ch-subhead-size);
  line-height:normal;
  font-weight: var(--ch-weight-semibold);
  color: var(--ch-text);
}
.ch-tool__desc {
  font-size: var(--ch-body-size);
  line-height:normal;
  color: var(--ch-text-secondary);
}

.ch-tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-6);
}

/* --------------------------------------------------------------------------
   QUOTE — pull quote / research testimonial

   ADDITION, not a measurement. The live Framer pages render research quotes as
   plain italic copy with no rule, no fill and no accent; the accent bar here is
   a deliberate house addition so a quote reads as a distinct block rather than
   as another paragraph.

   The bar picks up --ch-case-accent when the quote sits inside a case study
   (amber on /tdo, green on /dls, red on /snap) and falls back to the brand
   accent everywhere else, so one component covers every page.

   The stroke is 8px (--ch-space-2). At that weight it reads as a deliberate
   bar rather than a hairline, and it lands on the spacing ladder, so unlike
   .ch-btn's 1px hairline it does not need to be a raw value.

   Stroke and radius are equal at 8px, which means the inner corner radius
   resolves to 0: the outer edge of the bar curves, the inner edge stays
   square. That is the correct rendering, and it matches Figma.
   -------------------------------------------------------------------------- */
/* Structure, in Figma terms: an auto-layout frame wrapping the text, with
   padding, a corner radius, and a stroke on the left edge only. Because the
   radius is on the frame, the stroke is clipped by it — the bar tapers into
   the top-left and bottom-left corners instead of ending square. That falls
   out of CSS for free: a border-inline-start plus a border-radius on the same
   box curves the border into the corners exactly the way Figma does. */
.ch-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-2);
  margin: 0;
  padding: var(--ch-space-3) var(--ch-space-4);
  border-inline-start: var(--ch-space-2) solid var(--ch-case-accent, var(--ch-accent));
  border-radius: var(--ch-radius-sm);
  font-style: italic;
  font-size: var(--ch-body-size);
  line-height: normal;
  color: var(--ch-text-secondary);
}

/* The quotation itself. Kept as its own element so the attribution can sit
   outside it without inheriting the italic. */
.ch-quote__text { margin: 0; }

/* Attribution, for the block form. OPTIONAL: /tdo keeps its "— Participant"
   inline at the end of the quotation, the way the live page sets it, so it
   uses .ch-quote__text alone. Reach for __cite when the attribution should
   read as a separate byline (a name and a role on their own line). */
.ch-quote__cite {
  font-style: normal;
  font-size: var(--ch-chip-size);
  color: var(--ch-text-muted);
}

/* Larger pull quote for when the quote is the point of the section, not
   supporting evidence inside one. */
.ch-quote--lg { font-size: var(--ch-body-lg-size); }   /* was --ch-card-body-size, removed v0.6 → body-lg is the canonical role */

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
/* Re-measured 2026-08-13 on the live home page and /tdo: the band is
   160px top / 60px bottom. v0.1 recorded these the other way round. */
.ch-footer {
  background: var(--ch-bg);
  padding: var(--ch-space-40) 0 var(--ch-space-16);   /* [was: 160 / 60] */
  text-align: center;
}
.ch-footer__copy {
  font-size: var(--ch-body-size);
  line-height:normal;
  color: var(--ch-text-secondary);
}

/* ==========================================================================
   SHADCN-DERIVED CONTROLS

   Everything above this line was measured from the live Framer site.
   Everything below is ported from shadcn/ui — its variant x size taxonomy,
   its state conventions (focus-visible ring, disabled opacity, no
   pointer-events when disabled), and its class-name shape — rebuilt on the
   tokens in this system.

   shadcn itself is React + Tailwind + Radix and is not installed here; this
   is the same API expressed in vanilla CSS, so a later React port maps 1:1.

   Deviations from stock shadcn, and why:
     · height ladder 32/40/48 instead of 32/36/40 — keeps every step on the
       4px grid and gives the default a real touch target
     · font-weight 600 and 14px, matching the site's measured nav button,
       rather than shadcn's font-medium
     · radius 8px (--ch-radius-sm) to match the measured chip, with a
       .ch-btn--pill modifier since the site's own nav button is a pill
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON
   Bare .ch-btn is the primary variant, matching shadcn where <Button> with
   no props renders variant="default".
   -------------------------------------------------------------------------- */
.ch-btn,
.ch-nav__button {          /* alias — the nav Resume button IS this component */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ch-space-2);
  height: var(--ch-control-h);
  padding-inline: var(--ch-space-4);
  border: 1px solid transparent;
  border-radius: var(--ch-radius-sm);
  font-family: var(--ch-font-body);
  font-size: var(--ch-chip-size);
  line-height: normal;
  font-weight: var(--ch-weight-semibold);
  letter-spacing: var(--ch-chip-ls);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--ch-duration-fast) var(--ch-ease),
              border-color     var(--ch-duration-fast) var(--ch-ease),
              color            var(--ch-duration-fast) var(--ch-ease);

  /* default / primary */
  background: var(--ch-accent);
  color: var(--ch-text-on-solid);
}
.ch-btn:hover  { background: var(--ch-accent-hover); color: var(--ch-text-on-solid); }
.ch-btn:active { background: var(--ch-accent-pressed); }

.ch-btn:disabled,
.ch-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ch-btn__icon { width: 1rem; height: 1rem; flex: none; }

/* ---- variants ---- */
.ch-btn--secondary {
  background: var(--ch-bg-strong);
  color: var(--ch-text);
}
.ch-btn--secondary:hover  { background: var(--ch-neutral-500); color: var(--ch-text); }
.ch-btn--secondary:active { background: var(--ch-neutral-700); }

.ch-btn--outline {
  background: transparent;
  border-color: var(--ch-border-strong);
  color: var(--ch-text);
}
.ch-btn--outline:hover  { background: var(--ch-white-a08); color: var(--ch-text); }
.ch-btn--outline:active { background: var(--ch-white-a16); }

/* Ghost hovers to the AMBER tint, not a neutral one. That is a deliberate
   departure from stock shadcn (where ghost hovers to a neutral surface):
   amber is this site's interaction colour — every link already hovers to it —
   and the measured nav Resume button did exactly this. Making it the variant's
   behaviour is what lets the nav button reuse the component with no overrides. */
.ch-btn--ghost,
.ch-nav__button {
  background: transparent;
  color: var(--ch-text);
}
.ch-btn--ghost:hover,
.ch-nav__button:hover  { background: var(--ch-accent-subtle); color: var(--ch-accent-hover); }
.ch-btn--ghost:active,
.ch-nav__button:active { background: var(--ch-amber-a20); }

.ch-btn--destructive {
  background: var(--ch-danger-solid);
  color: var(--ch-text-on-solid);
}
.ch-btn--destructive:hover  { background: var(--ch-danger-text); color: var(--ch-text-on-solid); }
.ch-btn--destructive:active { background: var(--ch-red-500); }

.ch-btn--link {
  height: auto;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--ch-accent);
  text-underline-offset: 0.25rem;
}
.ch-btn--link:hover { background: transparent; color: var(--ch-accent-hover); text-decoration: underline; }

/* ---- sizes ---- */
.ch-btn--sm {
  height: var(--ch-control-h-sm);
  padding-inline: var(--ch-space-3);
}
.ch-btn--lg {
  height: var(--ch-control-h-lg);
  padding-inline: var(--ch-space-6);
  font-size: var(--ch-body-size);
  border-radius: var(--ch-radius-md);
}
/* flex: none is load-bearing — without it an icon button used as a flex item
   shrinks to the width of its glyph the moment the row runs tight.
   shadcn guards the same case with shrink-0. */
.ch-btn--icon {
  width: var(--ch-control-h);
  padding-inline: 0;
  flex: none;
}
.ch-btn--icon.ch-btn--sm { width: var(--ch-control-h-sm); }
.ch-btn--icon.ch-btn--lg { width: var(--ch-control-h-lg); }

/* ---- shape ---- */
/* Full 9999px radius. The site's own nav Resume button is a pill, so this is
   a first-class modifier on both button and chip, not an override. */
.ch-btn--pill,
.ch-nav__button { border-radius: var(--ch-radius-full); }
.ch-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   CHIP VARIANTS
   The base .ch-chip above is measured and unchanged — 44px, #3b3b3b,
   radius 8 — and .ch-chip--bare (used 20x across the pages) still works.
   These add shadcn's badge taxonomy on top.
   -------------------------------------------------------------------------- */
.ch-chip--accent {
  background: var(--ch-accent);
  color: var(--ch-text-on-solid);
}

.ch-chip--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ch-border-strong);
  color: var(--ch-text);
}

/* Status chips — surface + text + hairline, one per status role */
.ch-chip--success {
  background: var(--ch-success-surface);
  box-shadow: inset 0 0 0 1px var(--ch-success-border);
  color: var(--ch-success-text);
}
.ch-chip--warning {
  background: var(--ch-warning-surface);
  box-shadow: inset 0 0 0 1px var(--ch-warning-border);
  color: var(--ch-warning-text);
}
.ch-chip--danger {
  background: var(--ch-danger-surface);
  box-shadow: inset 0 0 0 1px var(--ch-danger-border);
  color: var(--ch-danger-text);
}
.ch-chip--info {
  background: var(--ch-info-surface);
  box-shadow: inset 0 0 0 1px var(--ch-info-border);
  color: var(--ch-info-text);
}

/* Compact size — closer to a stock shadcn badge */
.ch-chip--sm {
  height: var(--ch-chip-h-sm);
  padding: 0 var(--ch-space-3);
  gap: var(--ch-space-2);
}
.ch-chip--sm .ch-chip__icon { width: 0.875rem; height: 0.875rem; }

/* Pill shape */
.ch-chip--pill { border-radius: var(--ch-radius-full); }

/* Interactive chip — only when it is a link or button */
a.ch-chip,
button.ch-chip {
  cursor: pointer;
  transition: background-color var(--ch-duration-fast) var(--ch-ease),
              color            var(--ch-duration-fast) var(--ch-ease);
}
a.ch-chip:hover,
button.ch-chip:hover { background: var(--ch-neutral-500); color: var(--ch-text); }
a.ch-chip--accent:hover,
button.ch-chip--accent:hover { background: var(--ch-accent-hover); color: var(--ch-text-on-solid); }