/* Journal, Results, Protocol, 404: the same lab sheet system as the cage. */
.page-head { padding: var(--s6) 0 var(--s5); display: grid; gap: var(--s2); }
.page-head h1 { margin: 0; font: 400 72px/1 var(--display); letter-spacing: -0.02em; text-wrap: balance; max-width: 18em; }
.page-head .lede-line { font-size: 18px; }
.page-head .lede-line a { color: var(--ink); }
.c-EAT { color: #9a6a00; } .c-HOARD { color: #2a6ea8; } .c-PRESS { color: var(--red); } .c-BURN_CAGE { color: #6c3a96; }
.err-line { margin: 0; color: var(--red-deep); font-size: 16px; }

/* filters: one row above the list */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; padding-bottom: var(--s3); position: relative; }
.filters::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.seg { display: flex; gap: var(--s1); flex-wrap: wrap; }
.seg button { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--ink); background: var(--paper); font: 600 16px/1 var(--sans); cursor: pointer; border-radius: 2px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:disabled { border-style: dashed; color: var(--ink-2); cursor: not-allowed; }
.flabel { font: 600 16px/1.2 var(--sans); }
.select { min-height: 48px; padding: 0 44px 0 18px; border: 1.5px solid var(--ink); background: var(--paper); font: 500 16px/1 var(--sans); border-radius: 2px; color: var(--ink); }
.count-line { margin: var(--s3) 0; font-size: 16px; color: var(--ink-2); }

/* the journal rows */
.jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.jrow { background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.jrow summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 170px 260px 1fr 190px; gap: var(--s3); align-items: start; padding: 22px 32px; }
.jrow summary::-webkit-details-marker { display: none; }
.j-n { font: 400 30px/1 var(--display); }
.j-n small { display: block; margin-top: 8px; font: 500 16px/1.2 var(--sans); color: var(--ink-2); }
.j-act { font: 400 26px/1.1 var(--display); }
.j-act small { display: block; margin-top: 8px; font: 500 16px/1.3 var(--sans); color: var(--ink-2); }
.j-why { font-size: 17px; line-height: 1.5; }
.j-more { font: 600 16px/1.2 var(--sans); text-align: right; white-space: nowrap; }
.j-more span { display: inline-block; padding: 12px 0; }
.jrow[open] .j-more span { color: var(--red); }
.jbody { padding: 0 32px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.jbody h3 { margin: 0 0 var(--s1); font: 600 16px/1.2 var(--sans); }
.jbody pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 400 16px/1.5 var(--mono); background: #fff; border: 1px solid var(--rule); padding: 16px 18px; max-height: 420px; overflow: auto; }
.jfacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 16px; color: var(--ink-2); margin: 0; }
.jfacts a { color: var(--ink); }
.jfacts .mono { font-size: 16px; }
.more-row { display: flex; justify-content: center; padding: var(--s5) 0 var(--s7); }

/* results */
.heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.hero-stat { display: grid; gap: var(--s1); align-content: start; }
.hero-stat .big { margin: 0; font: 400 80px/1 var(--display); }
.hero-stat .lbl { margin: 0; font: 600 16px/1.3 var(--sans); min-height: 2.6em; }
.hero-stat .note { margin: 0; font-size: 16px; color: var(--ink-2); }
.chart-block { margin-top: var(--s6); display: grid; gap: var(--s2); }
.chart-block h2 { margin: 0; font: 400 40px/1.1 var(--display); }
.chart-block .sub { margin: 0; color: var(--ink-2); max-width: 60em; }
.chart { position: relative; background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: var(--s4); }
.chart canvas { display: block; width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 var(--s2); padding: 0; list-style: none; font: 500 16px/1.2 var(--sans); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 16px/1.35 var(--sans); padding: 10px 16px; border-radius: 2px; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; opacity: 0; transition: opacity 120ms; z-index: 5; }
.tip.on { opacity: 1; }
.tview { margin-top: var(--s2); }
.tview summary { cursor: pointer; font: 600 16px/1.2 var(--sans); padding: 12px 0; display: inline-block; }
.tview table { border-collapse: collapse; width: 100%; font-size: 16px; margin-top: var(--s1); }
.tview th, .tview td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.tview th { font-weight: 600; }
.tview td.n { font-variant-numeric: tabular-nums; }

/* protocol */
.proto { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6); align-items: start; }
.proto-main { display: grid; gap: var(--s6); }
.proto section h2 { margin: 0 0 var(--s2); font: 400 40px/1.1 var(--display); }
.proto section p { margin: 0 0 var(--s2); max-width: 40em; }
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); counter-reset: s; }
.steps4 li { counter-increment: s; display: grid; gap: var(--s2); align-content: start; font-size: 17px; }
.steps4 img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ink); background: var(--ground); }
.steps4 b { display: block; font: 400 24px/1.15 var(--serif); }
.steps4 b::before { content: counter(s, decimal-leading-zero) "  "; color: var(--red); font-family: var(--display); }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; position: relative; }
.rules li { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3); padding: 16px 0; position: relative; }
.rules li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.rules b { font: 600 17px/1.4 var(--sans); }
.prompt pre { margin: 0 0 var(--s2); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 16px/1.55 var(--mono); background: #fff; border: 1px solid var(--ink); padding: 24px 28px; }
.side { position: sticky; top: var(--s3); display: grid; gap: var(--s3); }
.side .sheet h3 { margin: 0 0 var(--s1); font: 400 26px/1.15 var(--serif); }
.side .sheet p, .side .sheet li { font-size: 16px; }
.side .sheet ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.addr-line { font: 500 16px/1.4 var(--mono); overflow-wrap: anywhere; }
.split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s2) 0; }
.split3 .sheet .big { margin: 0; font: 400 56px/1 var(--display); }
.risk { margin: var(--s5) 0 0; font-size: 16px; color: var(--ink-2); }

/* 404 */
.lost { padding-top: var(--s5); padding-bottom: var(--s7); display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: var(--s5); align-items: center; }
.lost h1 { margin: 0 0 var(--s2); font: 400 80px/1 var(--display); }
.lost p { margin: 0 0 var(--s3); max-width: 30em; }
.lost img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%); }

@media (max-width: 1100px) {
  .jrow summary { grid-template-columns: 150px 220px 1fr; }
  .j-more { display: none; }
  .proto { grid-template-columns: 1fr; }
  .side { position: static; }
  .heroes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .page-head { padding: var(--s4) 0 var(--s4); }
  .page-head h1 { font-size: 48px; }
  .jrow summary { grid-template-columns: 1fr; gap: 10px; padding: 18px 28px; }
  .j-n { font-size: 24px; }
  .j-n small { display: inline; margin-left: 10px; }
  .jbody { grid-template-columns: 1fr; padding: 0 28px 24px; }
  .chart { padding: var(--s2); }
  .chart-block h2, .proto section h2 { font-size: 30px; }
  .hero-stat .big { font-size: 56px; }
  .steps4, .split3 { grid-template-columns: 1fr 1fr; }
  .rules li { grid-template-columns: 1fr; gap: 4px; }
  .lost { grid-template-columns: 1fr; }
  .lost h1 { font-size: 52px; }
  .prompt pre { padding: 22px 26px; overflow-wrap: anywhere; }
}
@media (max-width: 420px) { .side .ca-row { grid-template-columns: 1fr !important; } .steps4, .split3, .heroes { grid-template-columns: 1fr; } .seg button { padding: 0 16px; } }