/* ============================================================
   HealthCompass - editorial body layout (Phase E5).
   v2.45.0  -  REBUILT. Pilot: gut.html only.

   ------------------------------------------------------------
   WHY v2.43.0's ATTEMPT WAS BAD - recorded so it is not repeated
   ------------------------------------------------------------
   1. IT HALF-APPLIED. css/dark.css contains
        body.dark .gt-card { background: var(--hc-ink-550) !important }
      My `background: transparent` lost to that !important, but my
      `padding-left: 0` won. Result: text jammed against the left edge
      of a panel that was still there. I removed the padding of a card
      whose surface I had failed to remove.
   2. THE GRID WAS RAGGED. "first two span 6, rest span 4" on SIX items
      gives 2 / 3 / 1 - mismatched widths between rows and an orphaned
      last cell. That is not asymmetry, it is a broken grid.
   3. IT SUBTRACTED TWICE. The cards ALREADY had a 4px top accent rule.
      I thinned it to 2px while also deleting the card that framed it,
      so the treatment lost its only strong element.

   ------------------------------------------------------------
   WHAT THIS DOES INSTEAD
   ------------------------------------------------------------
   Work WITH the surface, not against it. The cell keeps a background
   (dark mode enforces one anyway), and the editorial character comes
   from geometry and hierarchy rather than from deletion:

   - Square corners, hairline border - Swiss, not SaaS.
   - A LEFT accent bar rather than a top rule. It reads like an index
     marker, it is distinct from anything else on the site, and it
     holds up at any cell size.
   - HIERARCHY THAT MEANS SOMETHING. The lead concept becomes a 2x2
     anchor cell with larger type; the rest are uniform satellites. The
     asymmetry earns its place instead of being arbitrary.

   The bento resolves cleanly for SIX items on three columns:
        [ A A ] [ B ]
        [ A A ] [ C ]
        [ D ] [ E ] [ F ]
   A spans 2 cols x 2 rows; B/C stack beside it; D/E/F close the block.
   No orphans, no mismatched widths.

   SCOPE: gated behind `.hc-editorial`, so it cannot reach the other
   15 guides while this is a pilot.
   ============================================================ */

:root {
  /* 8px base unit. Use these for NEW work; do not invent 1.15rem again. */
  --sp-1:  0.5rem;   /*  8px */
  --sp-2:  1rem;     /* 16px */
  --sp-3:  1.5rem;   /* 24px */
  --sp-4:  2rem;     /* 32px */
  --sp-6:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */

  --measure: 68ch;        /* 65-75ch reading guidance */
  --measure-tight: 46ch;
}

/* ---- 1. Section rhythm ------------------------------------------ */
.hc-editorial .gt-sec { margin-bottom: var(--sp-6); }

.hc-editorial .gt-wrap {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}

.hc-editorial .gt-sec > p { max-width: var(--measure); }

/* ---- 2. The bento bed ------------------------------------------- */
@media (min-width: 860px) {
  .hc-editorial .gt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: var(--sp-2);
  }

  /* The anchor cell: 2x2. */
  .hc-editorial .gt-grid > *:first-child {
    grid-column: span 2;
    grid-row: span 2;
    padding: var(--sp-4);
  }

  /* The anchor earns bigger type - hierarchy, not decoration. */
  .hc-editorial .gt-grid > *:first-child .gt-card-nm { font-size: 1.7rem; }

  .hc-editorial .gt-grid > *:first-child .gt-card-tag {
    font-size: .95rem;
    max-width: 34ch;
  }

  .hc-editorial .gt-grid > *:first-child .gt-card-ic { font-size: 2.4rem; }
}

/* ---- 3. The cell ------------------------------------------------ */
/* NOTE: background is deliberately NOT set here. dark.css enforces one
   with !important and light mode's #fff is correct. Fighting it is
   exactly what broke v2.43.0. Geometry carries the change instead. */
.hc-editorial .gt-card {
  border-radius: 0;                       /* Swiss: no decorative rounding */
  border: 1px solid var(--hc-surface-300);
  border-left: 3px solid var(--acc, var(--hc-teal));
  box-shadow: none;
  padding: var(--sp-3);                   /* restored on ALL sides */
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: border-left-width 160ms cubic-bezier(.25, 1, .5, 1),
              transform 160ms cubic-bezier(.25, 1, .5, 1),
              border-color 160ms cubic-bezier(.25, 1, .5, 1);
}

.hc-editorial .gt-card:hover,
.hc-editorial .gt-card:focus-visible {
  border-left-width: 8px;
  transform: translateY(-2px);
}

/* Footer to the bottom so cells of unequal height align along it. */
.hc-editorial .gt-card-foot {
  margin-top: auto;
  padding-top: var(--sp-1);
}

/* The page CSS gives .gt-card-tag `flex:1`, which in this flex column
   made the TAG absorb every spare pixel - opening a dead band between
   the tag and the excerpt in the anchor cell. The footer's margin-top:auto
   is what should push, not the tag's flex-grow. v2.47.0 */
.hc-editorial .gt-card-tag {
  max-width: var(--measure-tight);
  flex: none;
}

/* ---- 4. Dark mode ----------------------------------------------- */
/* dark.css sets border-color with !important, so the hairline and the
   accent edge must be re-stated at equal weight to survive. */
body.dark .hc-editorial .gt-card {
  border-color: var(--hc-slate-800) !important;
  border-left-color: var(--acc, var(--hc-teal)) !important;
}

/* ---- 5. Mobile --------------------------------------------------- */
@media (max-width: 859px) {
  .hc-editorial .gt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }

  .hc-editorial .gt-sec { margin-bottom: var(--sp-4); }
}

/* ---- 6. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hc-editorial .gt-card { transition: none; }

  .hc-editorial .gt-card:hover,
  .hc-editorial .gt-card:focus-visible { transform: none; }
}

/* ============================================================
   DELIBERATELY NOT DONE: the mass spacing retrofit. Snapping all 3,278
   existing spacing declarations onto the 8px scale would shift layout
   across 25 pages - invisible individually, able to break tight
   layouts, unverifiable without a browser. The tokens exist so NEW work
   stops adding drift; existing values stay until that code is being
   touched anyway.
   ============================================================ */

/* ============================================================
   v2.46.0 - substance, not just geometry.

   The v2.45.0 rebuild tiled correctly but read as plain, and the honest
   reason was that the 2x2 anchor held the SAME content as a small cell
   at larger type - title, one line, then ~180px of dead space above the
   pill. Dead space is not negative space. Size has to be earned.

   Four additions, each doing a job:
   - An EXCERPT in the anchor (js side), so the big cell has something
     to be big about.
   - An INDEX NUMERAL per cell. Editorial/index convention, gives the
     block structure, and costs nothing.
   - An EVIDENCE METER. This site's identity IS evidence tiering, so it
     should be scannable as a shape, not only readable as a pill. The
     pill stays beside it, so nothing is conveyed by shape alone.
   - A WATERMARK glyph in the anchor. The standing directive explicitly
     endorses type/graphic "as the background watermark element for
     container sections" - it fills the void with brand rather than
     with padding.
   ============================================================ */

/* ---- Index numeral ---------------------------------------------- */
.hc-editorial .gt-card {
  position: relative;
  overflow: hidden;              /* contains the watermark */
}

.hc-editorial .gt-card-idx {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--acc, var(--hc-teal));
  opacity: .55;
  pointer-events: none;
}

/* ---- Evidence meter --------------------------------------------- */
.hc-editorial .gt-card-ev {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.hc-editorial .gt-meter {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.hc-editorial .gt-meter-seg {
  width: 4px;
  height: 14px;
  background: currentColor;
  opacity: .18;                  /* empty segment */
  border-radius: 0;              /* Swiss: square */
  transition: opacity 160ms cubic-bezier(.25, 1, .5, 1);
}

.hc-editorial .gt-meter-seg.on {
  background: var(--acc, var(--hc-teal));
  opacity: 1;
}

/* ---- The anchor cell -------------------------------------------- */
/* A whisper of the accent, so the lead cell has depth the satellites
   do not. Transparent-to-transparent keeps dark mode's !important
   background intact underneath. */
.hc-editorial .gt-card-lead {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--acc, var(--hc-teal)) 10%, transparent) 0%,
    transparent 55%);
}

.hc-editorial .gt-card-excerpt {
  font-size: .95rem;
  line-height: 1.72;
  color: var(--hc-text-body);
  max-width: 46ch;
  margin: var(--sp-1) 0 0;
}

body.dark .hc-editorial .gt-card-excerpt {
  color: var(--hc-slate-300);
}

/* Oversized ghosted glyph filling the anchor's lower-right. */
.hc-editorial .gt-card-mark {
  position: absolute;
  right: -1.5rem;
  bottom: -2.5rem;
  font-size: 12rem;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  filter: grayscale(15%);
}

body.dark .hc-editorial .gt-card-mark { opacity: .09; }

/* Keep real content above the watermark. */
.hc-editorial .gt-card > *:not(.gt-card-mark) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hc-editorial .gt-meter-seg { transition: none; }
}

/* Below the bento breakpoint the anchor is just another cell, so the
   watermark and the excerpt's extra weight would only add noise. */
@media (max-width: 859px) {
  .hc-editorial .gt-card-mark { display: none; }
  .hc-editorial .gt-card-excerpt { font-size: .9rem; }
}