/* The report surface. Full width, one ground, dense.
   It is a separate stylesheet rather than more rules in app.css because it is a different kind of
   page: app.css dresses a console of lists and drawers, and a report is read top to bottom. */

body.report{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
.mono{font-family:var(--mono)}

.rhead{display:flex;align-items:baseline;gap:18px;padding:14px 32px;border-bottom:1px solid var(--line);
       position:sticky;top:0;background:var(--paper);z-index:5}
.rhead .back{color:var(--muted);text-decoration:none;font-size:var(--t-data)}
.rhead .back:hover{color:var(--ink)}
.rhead .who{display:flex;align-items:baseline;gap:12px;min-width:0}
.rhead .sym{font-size:var(--t-page);font-weight:600;letter-spacing:-.01em}
.rhead .addr{font-size:var(--t-micro);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.rhead .addr a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line2)}
.rhead .addr a:hover{color:var(--ink)}
.rhead .rchain{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;align-self:center}
a.rchip{text-decoration:none;color:inherit}a.rchip:hover{border-color:var(--ink)}
.rhead .links{margin-left:auto;font-size:var(--t-micro);color:var(--muted);white-space:nowrap}
.rhead .links a{color:var(--muted);text-decoration:none;margin-left:14px}
.rhead .links a:hover{color:var(--ink)}

.loading{padding:60px 32px;color:var(--muted);font-size:var(--t-data)}

/* the verdict band: the first thing read, and the only element allowed to be loud */
.rband{border-left:4px solid var(--line2);background:var(--surface);padding:22px 28px}
.rband .lede{font-size:var(--t-micro);font-weight:500;color:var(--muted);margin-bottom:8px}
.rband .claim{font-size:var(--t-hero);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.rband .qual{font-family:var(--mono);font-size:var(--t-data);color:var(--muted);margin-top:8px;max-width:76ch}
.rband.beats{border-left-color:var(--beats)}.rband.beats .claim{color:var(--beats)}
.rband.worse{border-left-color:var(--worse)}.rband.worse .claim{color:var(--worse)}
.rband.undecided{border-left-color:var(--undecided)}.rband.undecided .claim{color:var(--undecided)}
.rband.flag{border-left-color:var(--flag)}.rband.flag .claim{color:var(--flag)}

/* the headline row: four figures, each with the sentence that derives it */
.rkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);
       border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rkpi{background:var(--paper);padding:20px 28px}
.rkpi .k{font-size:var(--t-micro);font-weight:500;color:var(--muted)}
.rkpi .v{font-family:var(--mono);font-size:var(--t-display);font-weight:500;line-height:1;margin:10px 0 4px;
         letter-spacing:-.02em}
.rkpi .v small{font-size:var(--t-section);color:var(--muted);letter-spacing:0}
.rkpi .sub{font-family:var(--mono);font-size:var(--t-data);color:var(--muted);margin-bottom:10px}
.rkpi .why{font-size:var(--t-data);line-height:1.55;color:var(--muted);max-width:44ch}
.rkpi.beats .v{color:var(--beats)}.rkpi.worse .v{color:var(--worse)}
.rkpi.undecided .v{color:var(--undecided)}.rkpi.unknown .v{color:var(--muted);font-size:var(--t-hero)}

.rchips{display:flex;flex-wrap:wrap;gap:7px;padding:16px 32px;border-bottom:1px solid var(--line)}
.rchip{font-family:var(--mono);font-size:var(--t-micro);padding:5px 11px;border:1px solid var(--line2);
       border-radius:13px;color:var(--ink-2)}
.rchip.flag{border-color:var(--flag);color:var(--flag)}
.rchip.beats{border-color:var(--beats);color:var(--beats)}
.rchip.muted{color:var(--muted)}

/* sections: an ordinal, a bold title, and the scope of what is in it */
.rsection{border-bottom:1px solid var(--line);padding:26px 32px}
.rsection>h2{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-size:var(--t-section);font-weight:600}
.rsection>h2 .ord{font-family:var(--mono);font-size:var(--t-data);font-weight:400;color:var(--line2)}
.rsection>h2 .scope{font-family:var(--mono);font-size:var(--t-micro);font-weight:400;color:var(--muted);margin-left:auto}

.rcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px 44px}
.rfield{display:grid;grid-template-columns:132px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);
        font-size:var(--t-data);align-items:baseline}
.rfield:last-child{border-bottom:0}
.rfield .k{color:var(--muted)}
.rfield .v{font-family:var(--mono);color:var(--ink);word-break:break-word}
.rfield .v.none{color:var(--muted);font-family:var(--sans)}

.legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:14px}
.legend .it{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-micro);color:var(--muted)}
.legend .sw{width:12px;height:12px;border-radius:2px;flex:none}
.legend .sw.ring{background:transparent;border:2px solid currentColor}

.rkey{padding:16px 32px 40px;font-size:var(--t-micro);color:var(--muted)}
.rkey summary{cursor:pointer;list-style:none}
.rkey summary::-webkit-details-marker{display:none}
.rkey summary::before{content:'\25B8 ';color:var(--line2)}
.rkey[open] summary::before{content:'\25BE '}
.rkey .body{font-size:var(--t-data);line-height:1.65;padding:10px 0 0;max-width:80ch}

@media(max-width:720px){
  .rhead,.rchips,.rsection,.rkey{padding-left:16px;padding-right:16px}
  .rband{padding:18px 16px}
  .rkpi{padding:16px}
  :root{--t-display:34px}
}

/* The Cabals page reuses the report sections; its prose is the only thing they did not already
   have a rule for -- a readable measure, not a table cell. */
.cabnote{font-size:var(--t-body);line-height:1.62;color:var(--muted);max-width:76ch;margin:14px 0 0}
.cabnote b{color:var(--ink);font-weight:600}

/* A table inside a report section: the same hairline grammar as the field rows above it, so a
   section that lists rows does not read as a different document from one that lists facts. */
.rtable{margin-top:18px;overflow-x:auto}
.rtable table{width:100%;border-collapse:collapse;font-size:var(--t-data)}
.rtable th{text-align:left;font-weight:500;color:var(--muted);font-size:var(--t-micro);
           padding:0 14px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.rtable td{padding:8px 14px 8px 0;border-bottom:1px solid var(--line)}
.rtable tr:last-child td{border-bottom:0}
.rtable .n{text-align:right;font-family:var(--mono)}
.rtable th.n{text-align:right}
.rtable .mono{font-family:var(--mono);color:var(--muted)}
.rtable .up{color:var(--beats)}
.rtable .dn{color:var(--worse)}
/* Prose inside a section: a readable measure, not a table cell. */
.rnote{font-size:var(--t-body);line-height:1.62;color:var(--muted);max-width:76ch;margin:16px 0 0}
.rnote b{color:var(--ink);font-weight:600}
.rtable tr.click{cursor:pointer}
.rtable tr.click:hover{background:var(--raised)}
.rtable a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
.rtable a:hover{border-bottom-color:currentColor}
.rfield.click{cursor:pointer}
.rfield.click:hover{background:var(--raised)}
.rfield .k a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
.rfield .k a:hover{border-bottom-color:currentColor}
a.ent{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
a.ent:hover{border-bottom-color:currentColor}

/* ---- the network report (Task 14) --------------------------------------------------------------------
   The role colours are app.css's theme tokens (dark and both light blocks), so nothing here needs a
   light-mode twin. A disposal bar is the Cabals other-side bar at row height. */
.rbtn{font:inherit;font-size:var(--t-micro);color:var(--ink);background:var(--field);border:1px solid var(--line);
  border-radius:4px;padding:3px 9px;cursor:pointer}
.rbtn:hover{border-color:var(--muted)}
.rbtn:disabled{opacity:.5;cursor:default}
.net-ring-lg{max-width:440px;margin:18px auto 0}
.net-part{margin-top:14px}
.netbar-sm{height:8px;min-width:120px}
.dp-collector{background:var(--role-collector)}
.dp-passed{background:var(--role-disperser)}
.dp-members{background:var(--role-farm)}
.dp-held{background:var(--role-untraced)}
.dp-other{background:var(--role-outside)}
.net-role{margin-top:18px}
.net-role h3{font-size:var(--t-data);font-weight:500;margin:0 0 6px}
.net-addrs{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:var(--t-micro);margin:0 0 8px}
.rlist{margin:12px 0 0;padding-left:18px}
.rlist li{margin-bottom:6px}