/* Tamper-Proof Chain (information-technology/tamper-proof-chain.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the five blocks in a row across the top (scrolling sideways inside
   themselves if the window is narrow), and under them what's happening and every copy of the ledger. On smaller
   screens the blocks stack and the page scrolls. Theme tokens only: a valid block --ok, a broken one --bad. */

.objective h4{margin:14px 0 6px;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.rp-main{gap:10px}
.seg-toggle.is-off{opacity:.45;pointer-events:none}

.tc-stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:auto}
.tc-strip{flex:none;padding:10px 12px;min-width:0}
.tc-strip-head{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:8px}
.tc-target{font:500 12.5px/1.3 var(--font-body);color:var(--ink-soft)}
.tc-target code{font:600 12.5px var(--font-mono);color:var(--ok)}
.tc-actions{margin-left:auto;display:flex;gap:6px}
.tc-blocks{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px}

/* a block */
.tc-block{flex:1 1 0;min-width:200px;display:flex;flex-direction:column;gap:5px;padding:9px 10px;border-radius:8px;border:2px solid var(--ok);background:var(--ok-tint);transition:border-color .2s,background .2s}
.tc-block.bad{border-color:var(--bad);background:var(--bad-tint)}
.tc-block.mining{border-color:var(--warn);background:var(--warn-tint)}
.tc-bhead{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tc-bhead h3{margin:0;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.tc-badge{font:700 10.5px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:var(--ok);color:var(--on-viz)}
.tc-block.bad .tc-badge{background:var(--bad)}
.tc-block.mining .tc-badge{background:var(--warn)}
.tc-f{display:flex;flex-direction:column;gap:2px}
.tc-f > span{font:600 10px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tc-block textarea,.tc-block input{width:100%;font:13px/1.35 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:4px;padding:4px 6px;resize:none}
.tc-block input{font-family:var(--font-mono)}
.tc-block textarea:focus,.tc-block input:focus{outline:2px solid var(--focus);outline-offset:0}
.tc-hash{font:500 11.5px/1.35 var(--font-mono);color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:3px 6px;word-break:break-all;min-height:2.7em}
.tc-hash .z{color:var(--ok);font-weight:700}
.tc-hash .nz{color:var(--bad);font-weight:700}
.tc-hash.broken{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.tc-why{font-size:12px;line-height:1.35;color:var(--bad);min-height:1.35em}
.tc-block:not(.bad) .tc-why{color:var(--ok)}
.tc-mine{align-self:stretch;justify-content:center}
.tc-link{flex:none;width:26px;display:flex;align-items:center;justify-content:center;font:700 20px/1 var(--font-mono);color:var(--ok)}
.tc-link.broken{color:var(--bad)}

/* underneath */
.tc-lower{flex:1;min-height:190px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.tc-say-box,.tc-peers{min-height:0;overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.tc-say{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.tc-say p{margin:0 0 6px}
.tc-say b{color:var(--ink)}
.tc-peer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tc-peer{display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2)}
.tc-peer b{font:700 12.5px/1.2 var(--font-display);color:var(--ink)}
.tc-peer code{font:500 11.5px var(--font-mono);color:var(--ink-soft)}
.tc-peer.you{border:2px solid var(--accent)}
.tc-peer.differs code{color:var(--bad)}
.tc-peer-say{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.tc-peer-say b{color:var(--ink)}

/* uses & limits */
.tc-uses{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tc-col{min-height:0;overflow:auto;padding:12px 14px}
.tc-col h2{margin-bottom:8px}
.tc-col h3{margin:12px 0 6px;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tc-list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.tc-list li{margin-bottom:6px}
.tc-list b{color:var(--ink)}
table.tc-cmp{font-size:12.5px;margin-bottom:10px}
table.tc-cmp th,table.tc-cmp td{padding:6px 6px;line-height:1.35}
table.tc-cmp thead th{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink);background:var(--panel-2)}
table.tc-cmp th[scope=row]{font-size:10.5px}
.tc-quiz{flex:1;min-height:0;display:flex;flex-direction:column}
.tc-quiz .cq{flex:1}

@media (min-width:901px) and (max-width:1250px){
  .tc-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-uses .tc-col:last-child{grid-column:1/-1}
  .tc-uses{overflow:auto}
}
@media (min-width:901px) and (max-height:680px){
  .tc-block{gap:3px;padding:6px 8px}
  .tc-why{display:none}
}
@media (max-width:900px){
  .tc-stage,.tc-uses{display:flex;flex-direction:column}
  .tc-blocks{flex-direction:column;overflow:visible}
  .tc-block{min-width:0}
  .tc-link{width:auto;height:22px;transform:rotate(90deg)}
  .tc-lower{display:flex;flex-direction:column}
  .tc-say-box,.tc-peers,.tc-col{overflow:visible}
  .btn,.seg-toggle button{min-height:40px}
  .tc-block textarea,.tc-block input{font-size:15px;padding:8px}
  .tc-actions{margin-left:0}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .tc-peer-list{grid-template-columns:1fr}
}