/* ============================================================
   ISENGARD - combat record + cost-per-effect (record.css)
   Onyx proof band and a light comparison table.
   Palette: onyx / bone / forge accent - no new colours.
   ============================================================ */

/* ---- combat record band ---- */
.record{background:var(--onyx);color:var(--cloud);padding:clamp(76px,12vh,140px) 0;position:relative}
.record::before{content:"";position:absolute;top:0;left:var(--edge);width:26px;height:26px;
  border-top:1.5px solid rgba(var(--accent-rgb),.75);border-left:1.5px solid rgba(var(--accent-rgb),.75)}
.record .eyebrow{color:rgba(255,255,255,.6)}
.record h2{color:var(--cloud);font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;margin-top:12px;max-width:26ch}
.record .r-sub{margin-top:18px;max-width:56ch;color:rgba(255,255,255,.72);font-size:var(--t-lead);line-height:1.4}

.rec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(44px,7vh,76px);
  border-top:1px solid rgba(255,255,255,.16)}
.rec-cell{padding:26px 26px 26px 0;border-right:1px solid rgba(255,255,255,.12)}
.rec-cell:last-child{border-right:none}
.rec-cell .v{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cloud)}
.rec-cell .v .u{font-size:.4em;font-weight:400;color:rgba(255,255,255,.55);margin-left:.3em;letter-spacing:.06em}
.rec-cell .l{margin-top:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.6}
.rec-cell .n{margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5}

/* withheld figures - click to reveal what is releasable.
   Resting fill must read against the black band: the site's usual .redact
   treatment is #000-on-light and vanishes here. */
.rec-cell .v .wh{display:inline-block;background:rgba(255,255,255,.14);color:transparent;
  outline:1px solid rgba(255,255,255,.24);padding:0 .3em;letter-spacing:.06em;
  cursor:pointer;user-select:none;transition:color .22s cubic-bezier(.23,1,.32,1),background .22s cubic-bezier(.23,1,.32,1),outline-color .22s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .rec-cell .v .wh:hover{background:rgba(255,255,255,.22);outline-color:rgba(255,255,255,.4)}
}
.rec-cell .v .wh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rec-cell .v .wh.on{background:transparent;outline-color:transparent;color:var(--cloud)}
.rec-foot{margin-top:clamp(32px,5vh,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.rec-foot .live{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78)}
.rec-foot .live i{width:7px;height:7px;background:#3f9d5f;box-shadow:0 0 8px rgba(63,157,95,.6)}
@media(prefers-reduced-motion:no-preference){
  .rec-foot .live i{animation:recPulse 3.2s ease-in-out infinite}
}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.45}}

@media(max-width:1000px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-cell:nth-child(2n){border-right:none}
  .rec-cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
@media(max-width:560px){.rec-grid{grid-template-columns:1fr}
  .rec-cell{border-right:none;border-top:1px solid rgba(255,255,255,.12)}
  .rec-cell:first-child{border-top:none}}

/* ---- cost per effect table ---- */
.cpe{margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--hair)}
.cpe-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(14px,2.5vw,32px);align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.cpe-row.head{padding:14px 0;border-bottom:1px solid var(--hair-strong,rgba(0,0,0,.28))}
.cpe-row.head span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.cpe-sys{min-width:0}
.cpe-sys b{display:block;font-size:1rem;font-weight:600;color:#0c0c0f;line-height:1.25}
.cpe-sys small{display:block;margin-top:4px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.cpe-cost{font-variant-numeric:tabular-nums;font-weight:600;color:#0c0c0f;font-size:.95rem;white-space:nowrap}
.cpe-cost.est{font-weight:400;color:var(--ink-soft)}
.cpe-bar{position:relative;height:10px;background:rgba(0,0,0,.07);overflow:hidden}
.cpe-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-soft);
  transition:width 620ms cubic-bezier(.23,1,.32,1)}
.cpe-row.isg .cpe-bar i{background:var(--accent)}
.cpe-row.isg .cpe-sys b{color:#0c0c0f}
.cpe-row.isg .cpe-cost{color:var(--accent-text)}
.cpe-note{margin-top:22px;font-size:.8rem;line-height:1.6;color:var(--ink-soft);max-width:70ch}
.cpe-note b{color:#0c0c0f;font-weight:600}
@media(max-width:760px){
  .cpe-row{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}
  .cpe-bar{grid-column:1/-1}
  .cpe-row.head{display:none}
}

/* ---- dispatches (field notes) ---- */
.disp{display:grid;gap:0;margin-top:clamp(36px,5vh,60px);border-top:1px solid var(--hair)}
.disp-item{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:26px 0;border-bottom:1px solid var(--hair);align-items:start;
  transition:background .18s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.disp-item:hover{background:rgba(0,0,0,.02)}}
.disp-meta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.9}
.disp-meta .tag{display:block;color:var(--accent-text)}
.disp-body{min-width:0}
.disp-body h3{font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600;letter-spacing:-.01em;
  color:#0c0c0f;line-height:1.28;margin:0}
.disp-body p{margin-top:10px;color:var(--ink-soft);font-size:.94rem;line-height:1.55;max-width:64ch;
  text-wrap:pretty}
.disp-body .more{display:inline-block;margin-top:14px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jetstream);
  border-bottom:1.5px solid transparent;transition:border-color .18s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.disp-item:hover .more{border-bottom-color:var(--jetstream)}}
@media(max-width:700px){.disp-item{grid-template-columns:1fr;gap:10px}}
.no-readtimes .disp-meta br,.no-readtimes .disp-meta{white-space:normal}
.no-readtimes .disp-meta{font-size:.6rem}