/* Review of the CB risk determination in the Claude Mythos 5.1 System Card · page-local styles, layered on /styles.css */

.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body p {
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.6em;
}

.post-body__heading {
  font-size: clamp(20px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.4em 0 1em;
}

.post-body strong {
  font-weight: 600;
  color: var(--ink);
}

.post-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  transition: background var(--t-fast);
}
.post-body a:hover { background: rgba(138, 206, 0, 0.18); }

/* Assessment callout — brat outline, ink type. The green is the frame only;
   never the foreground (contrast fails on white). */

.assessment {
  border: 1px solid var(--brat);
  background: rgba(138, 206, 0, 0.05);
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 32px);
  margin: 0 0 2.2em;
}

.post-body .assessment__title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1em;
}

.assessment .post-body__list {
  margin-bottom: 0;
}

/* The frame owns the green here, so the bullets go back to ink. */
.assessment .post-body__list li::before {
  background: var(--ink);
}

.post-body__list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
}

.post-body__list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.9em;
}

.post-body__list li:last-child { margin-bottom: 0; }

.post-body__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brat);
}

.post-figure {
  margin: clamp(32px, 4vw, 56px) 0;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color var(--t-fast);
}

/* The figure links out to the source system card. Cancel the body-link
   treatment — a brat underline and hover fill under a full-width image reads
   as a rule across the page — and borrow the .card affordance instead: the
   border darkens to ink on hover. */
.post-figure a {
  display: block;
  border-bottom: 0;
}
.post-figure a:hover {
  background: none;
}
.post-figure a:hover img {
  border-color: var(--ink);
}

.post-figure figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.post-body__sign-off {
  color: var(--ink-soft);
}

/* Footnotes */

.fn-ref {
  font-size: 11px;
  line-height: 0;
  vertical-align: super;
}

.fn-ref a {
  color: var(--ink-soft);
  border-bottom: 0;
}
.fn-ref a:hover { color: var(--ink); }

.footnotes {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.footnotes__list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
}

.footnotes__list li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1em;
}

.footnotes__list li:last-child { margin-bottom: 0; }

.footnotes__back {
  margin-left: 4px;
  border-bottom: 0 !important;
}

.post-body > *:last-child {
  margin-bottom: 0;
}

/* Footnote hover preview. Desktop-only — the JS is gated on a fine pointer, and
   the media query keeps the styles out of touch builds regardless. */

@media (hover: hover) and (pointer: fine) {
  .fn-pop {
    position: absolute;
    z-index: 60; /* above the sticky nav at 50 */
    top: 0;
    left: 0;
    max-width: 360px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-top: 2px solid var(--brat);
    box-shadow: 0 6px 24px rgba(10, 10, 10, 0.1);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  }

  .fn-pop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* The ref itself gets a hit area worth aiming at. */
  .fn-ref a {
    padding: 0 2px;
  }
  .fn-ref a:hover {
    background: rgba(138, 206, 0, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-pop { transition: none; transform: none; }
  .fn-pop.is-visible { transform: none; }
}

/* ---------- Adversarial review (collapsible) ----------
   Copied verbatim from china/styles.css, which is where this pattern was
   built. Those rules are page-local, so a second post needs its own copy;
   if a third one wants the box, promote the block to the root styles.css
   rather than making a third copy. Appended last on purpose: several of
   these tie on specificity with the .post-body rules above (.review__body p
   vs .post-body p are both 0,1,1) and need to win on source order. */

.review {
  margin-top: clamp(56px, 6vw, 88px);
  margin-bottom: clamp(56px, 6vw, 88px);
}

/* The outline is on the <details> itself, so the box is drawn whether it is
   open or closed — collapsed it should still read as a bordered object on the
   page, not as a bare line of text. Opening only darkens the border. */
.review__box {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color var(--t-med);
}
.review__box:hover,
.review__box[open] { border-color: var(--ink); }

/* display: block (not flex) — flex on a <summary> has historically broken the
   disclosure toggle in WebKit. The chevron is an inline-block instead. */
.review__summary {
  display: block;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: -0.015em;
  color: var(--ink);
  list-style: none;
}
/* kill the native disclosure triangle in both engines */
.review__summary::-webkit-details-marker { display: none; }
.review__summary::marker { content: ""; }
.review__summary:focus-visible { outline: 2px solid var(--brat); outline-offset: -2px; }

.review__chev {
  display: inline-block;
  margin-right: 12px;
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-mute);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-1px);
  transition: transform var(--t-fast);
}
.review__box[open] .review__chev { transform: translateY(-1px) rotate(90deg); }

.review__body {
  padding: 22px 22px 26px;
  border-top: 1px solid var(--rule);
}
.review__body p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1em;
  max-width: 78ch;
}
.review__body p:last-child { margin-bottom: 0; }
.review__body strong { font-weight: 600; }

.review__h {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 32px 0 14px;
}
/* Sits directly under the byline and introduces the whole box, so it carries
   the brat rule rather than reading as another body paragraph. */
.review__standfirst {
  color: var(--ink-soft) !important;
  border-left: 2px solid var(--brat);
  padding-left: 14px;
}

.review__byline {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--ink) !important;
  margin-bottom: 1.2em !important;
}
.review__byline-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ink-mute);
}

.review__findings {
  margin: 0 0 1em;
  padding-left: 22px;
  max-width: 78ch;
}
.review__findings li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 1em;
  padding-left: 4px;
}
.review__findings li::marker {
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .review__summary { padding: 16px 18px; }
  .review__body { padding: 18px 18px 22px; }
}