/* Teylo journal.
   Loaded *after* teylo.css and depends on its tokens. Adds only what the journal
   needs and redefines nothing, so teylo.css stays untouched and the pages that
   render from it — privacy and the three opt-in pages — cannot be affected.

   Colour rule of the house: a companion hue appears only where a companion
   actually speaks or is being offered. Pillars are typographic. The unsent
   message is stone, because it belongs to the reader. */

.kick {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 500;
}

/* the unsent message ---------------------------------------------------- */
.un {
  background: var(--bub);
  border-radius: 17px;
  border-bottom-left-radius: 6px;
  padding: 11px 15px;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  max-width: 32ch;
}
.unlab {
  display: block;
  font-size: 12.5px;
  color: var(--soft);
  margin-top: 9px;
}

/* recessed panel — the .vis pattern from how-it-works -------------------- */
.vis {
  background: var(--bg);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 196px;
}
.big {
  font-size: clamp(40px, 5.6vw, 62px);
  letter-spacing: -0.05em;
  font-weight: 700;
  line-height: 0.92;
}
.big span {
  display: block;
  font-size: 14.5px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--soft);
  margin-top: 8px;
}

/* index lead ------------------------------------------------------------ */
.lead {
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(26px, 3.4vw, 38px);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 34px;
  align-items: center;
}
.lead h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 9px 0 12px;
}
.lead p {
  color: var(--soft);
  line-height: 1.55;
  max-width: 46ch;
  font-size: 16.5px;
}
.lead .foot {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 14px;
  color: var(--soft);
  flex-wrap: wrap;
}
.lead .foot b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* three-up -------------------------------------------------------------- */
.three {
  margin-top: 14px;
}
.three .card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.three .card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--line),
    0 16px 30px -18px rgba(22, 24, 26, 0.26);
}
.three h3 {
  margin: 8px 0 7px;
  line-height: 1.25;
}
.three p {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.45;
}
.three .band {
  margin-top: auto;
  padding-top: 14px;
}
.three .un {
  font-size: 14.5px;
  max-width: none;
}

/* pillar rows — typographic, no companion colour ------------------------ */
.pillars {
  margin-top: clamp(52px, 7vw, 80px);
}
.prow {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.prow:first-of-type {
  border-top: 1px solid var(--line);
}
.prow b {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.prow .t {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.prow .t a {
  color: var(--ink);
  text-decoration: none;
}
.prow .t a:hover {
  color: var(--soft);
}
.prow b a {
  color: inherit;
  text-decoration: none;
}
.prow b a:hover {
  color: var(--soft);
}
.prow .n {
  font-size: 14px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

/* post ------------------------------------------------------------------ */
.post .phead {
  padding-bottom: 26px;
}
.post h1 {
  font-size: clamp(30px, 4.1vw, 48px);
  line-height: 1.03;
}
.byl {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--soft);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.byl i {
  font-style: normal;
  opacity: 0.45;
}
.epi {
  margin: 30px 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: center;
}
.epi .why {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.55;
  max-width: 40ch;
}

/* evidence -------------------------------------------------------------- */
.evi {
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--line);
  padding: 26px 24px;
  margin: 34px 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: center;
}
.evi .n2 {
  font-size: 44px;
  letter-spacing: -0.05em;
  font-weight: 700;
  line-height: 0.9;
}
.evi .n2 span {
  display: block;
  font-size: 13.5px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--soft);
  margin-top: 7px;
}
.evi p {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.evi p b {
  color: var(--ink);
  font-weight: 500;
}

/* comparison ------------------------------------------------------------ */
.ctab {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.crow {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 15px;
  min-width: 560px;
}
.crow.h {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 500;
}
.crow b {
  font-weight: 500;
}
.crow span {
  color: var(--soft);
}
.crow .self {
  color: var(--ink);
  font-weight: 600;
}

/* compare — Teylo vs. one competitor, three columns instead of /meet's five --------------
   Same .ctab/.crow grid the /meet index reuses for its own 5-column trait table (see that
   block's comment above), narrowed to a label plus two entities. Each cell is a small stack —
   the claim itself, then its provenance line — so the citation travels with the fact instead of
   sitting in a separate legend a reader has to cross-reference. */
.crow.two {
  grid-template-columns: 1.3fr 1fr 1fr;
  min-width: 460px;
  align-items: start;
}
.ccell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccell .prov {
  font-size: 12px;
  color: var(--soft);
  line-height: 1.4;
}
/* .ccell is itself a span, so the pre-existing `.crow span { color: var(--soft) }` rule (used
   for /meet's header row) would otherwise be inherited by every value inside it, documented and
   untested alike — this rule exists so a documented claim reads as a stated fact (bold ink) by
   default, not because it happened to sit inside a span. */
.ccell b {
  color: var(--ink);
  font-weight: 600;
}
/* an untested row must never read like the documented rows around it — italic, muted, and
   still carrying the word "Untested" baked into the value itself (comparison.ts renderClaim),
   so the distinction survives even if this rule is never loaded. Higher specificity than
   .ccell b above, so this wins only where .unt is also present. */
.ccell.unt b {
  color: var(--soft);
  font-weight: 500;
  font-style: italic;
}

/* the conflict-of-interest line — above every /compare table, never inside it ------------ */
.coi {
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line);
  padding: 20px 22px;
  margin: 26px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--soft);
}
.coi b {
  color: var(--ink);
  font-weight: 500;
}

/* the honest concession — recessed, sits into the page ------------------ */
.lose {
  margin-top: 26px;
  background: var(--bg);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.lose h3 {
  margin-bottom: 9px;
}
.lose p {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 9px;
}
.lose p b {
  color: var(--ink);
  font-weight: 500;
}
.lose p:last-child {
  margin-bottom: 0;
}

/* the one moment of companion colour ------------------------------------ */
.close {
  margin-top: clamp(52px, 7vw, 80px);
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(26px, 3.4vw, 36px);
}
.close h3 {
  margin-bottom: 8px;
}
.close p {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.55;
  max-width: 52ch;
}
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border-radius: 99px;
  padding: 8px 16px 8px 8px;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.chip:hover {
  background: var(--bub);
}
.chip i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  flex: none;
}

/* one scripted moment, matching the homepage's restraint ---------------- */
@keyframes jrise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rise {
  animation: jrise 0.5s cubic-bezier(0.22, 0.61, 0.24, 1) both;
}
.three .rise:nth-child(1) {
  animation-delay: 0.06s;
}
.three .rise:nth-child(2) {
  animation-delay: 0.13s;
}
.three .rise:nth-child(3) {
  animation-delay: 0.2s;
}

@media (max-width: 820px) {
  .lead,
  .epi,
  .evi {
    grid-template-columns: 1fr;
  }
  .prow {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* trait bars — /meet (spec §5) -------------------------------------------
   One component, two contexts. `.traits`/`.trait` lists a single companion's
   eight traits as labelled rows (pages/meet/companion.njk); the /meet/ index
   (pages/meet/index.njk) reuses the .ctab/.crow comparison grid above and
   drops a bare .tbar into each cell instead, so all four companions' values
   for the same trait sit on one screen.

   `--own` is the one place a companion hue marks something outside .chips —
   companion.njk sets it, inline, only on that companion's own .traits block;
   every other page (including /meet/'s own index) never sets it, so .tbar i
   falls back to var(--ink). html-invariants.ts's MEET_COMPANION_PAGE enforces
   that this is the only page a given companion's hue may appear on outside
   .chips — see its comment for the exact scope. */
.traits {
  margin: 22px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trait {
  display: grid;
  grid-template-columns: 172px 1fr 40px;
  gap: 14px;
  align-items: center;
}
.tlabel {
  font-size: 14px;
  color: var(--soft);
}
.tbar {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--bg);
  overflow: hidden;
}
.tbar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--own, var(--ink));
}
.tval {
  font-size: 13px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.crow .tcell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.crow .tcell .tbar {
  flex: 1;
}

/* a real exchange — static transcript, /meet/<slug> only. No JS: this is
   markup, not the homepage's interactive modal (Global Constraints —
   "static transcripts only, never an interactive chat demo"). */
.transcript {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 28px;
}
.tmsg {
  max-width: 30ch;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
}
.tmsg .twho {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 3px;
}
.tmsg.me {
  align-self: flex-end;
  background: var(--ink);
  color: var(--card);
}
.tmsg.me .twho {
  color: rgba(251, 251, 250, 0.6);
}
.tmsg.them {
  align-self: flex-start;
  background: var(--bub);
  color: var(--ink);
}

@media (max-width: 480px) {
  .trait {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .tval {
    text-align: left;
  }
}

/* the crisis boundary — someone-to-talk-to.njk only. Not .card: the four companion cards right
   above it on that page already own that shape, and this block has to read as categorically
   different, not a fifth one in the row (Task 4 review, F5). Full-ink text throughout, not
   .prose's muted --soft, and a ring heavier than .card's hairline so it registers before it's
   read. No hue — Global Constraints reserve companion colour to .chips, and this block doesn't
   use it. */
.crisis {
  margin-top: 48px;
  padding: 32px 28px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--ink);
}
.crisis h2 {
  margin: 0 0 12px;
}
.crisis p {
  color: var(--ink);
  margin-bottom: 12px;
}
.crisis p:last-child {
  margin-bottom: 0;
}

/* The counterweight to `.lose`.

   A page that lists three honest concessions and never states the other side
   reads as apologetic rather than fair — and a reader who came to compare is left
   to work out the case for us on their own. Same panel shape, on the card ground
   rather than the page ground, so the pair reads as two halves of one answer
   instead of a rebuttal bolted on. */
.win {
  margin-top: 14px;
  background: var(--card);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.win h3 {
  margin-bottom: 9px;
}
.win p {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 9px;
}
.win p b {
  color: var(--ink);
  font-weight: 500;
}
.win p:last-child {
  margin-bottom: 0;
}