/* Cross-file buildability — same tokens and tab mechanism as planner/ and
   validator/, self-contained for the same reason: three standalone pages that
   share a stylesheet are three pages one restyle can break. */

:root{--ink:#17201d;--muted:#65706b;--paper:#f4f1e9;--panel:#fffdfa;--line:#d9d5ca;--green:#1e604c;--lime:#b9d96b;--orange:#e87842;--red:#9c3527;--blue:#3b4a75;--shadow:0 14px 35px #1a292012}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Inter,Segoe UI,sans-serif}
header{padding:20px 4vw;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--ink);color:#fff}
h1,h2,p{margin-top:0}
h1{font:700 33px/1.1 Georgia,serif;margin:4px 0}
.eyebrow,.kicker{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--green)}
header .eyebrow{color:var(--lime)}
.privacy{padding:9px 14px;border:1px solid #ffffff38;border-radius:20px;font-size:13px}
.privacy span{display:inline-block;width:8px;height:8px;background:var(--lime);border-radius:50%;margin-right:7px}

nav.tabs{padding:0 4vw;background:var(--ink);display:flex;gap:5px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.tab{border:0;background:transparent;color:#bfc7c2;padding:13px 16px;font-weight:700;font-size:14px;cursor:pointer;border-bottom:3px solid transparent}
.tab.active{color:#fff;border-color:var(--lime)}
.tab:disabled{color:#6d7873;cursor:not-allowed}
.tab-hide{display:none!important}
[hidden]{display:none!important}

main{max-width:1560px;margin:auto;padding:28px 4vw 70px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow);margin-bottom:22px}
.panel h2{font:700 24px/1.25 Georgia,serif}
.panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap}
.setup[hidden]{display:none}
.table-hint{margin:8px 0 14px;color:var(--muted);font-size:13px}
.rates-head{margin:20px 0 8px;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.level-count{padding:7px 11px;border-radius:16px;background:#edf2e5;color:var(--green);font-size:12px;font-weight:800;white-space:nowrap}
button,.button{cursor:pointer}
.primary,.button{border:0;border-radius:8px;background:var(--green);color:#fff;padding:12px 18px;font-weight:800;text-align:center}
.primary:disabled{opacity:.65;cursor:wait}
.link-button{border:0;background:none;padding:0;color:var(--green);font-weight:800;font-size:13px;text-decoration:underline;cursor:pointer}

/* --------------------------------- start ---------------------------------- */
.setup-head{margin-bottom:20px}
.setup-head h2{margin-bottom:10px}
.lede-plain{margin-bottom:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:14px 16px 14px 48px;background:#eef0ea;border-radius:10px}
.steps li::before{content:counter(step);position:absolute;left:15px;top:14px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font:800 12px/1 Inter,Segoe UI,sans-serif}
.steps b{display:block}
.steps span{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);align-items:start}
.grid-form label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.grid-form label small{display:block;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.grid-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.form-wide{grid-column:1/-1}
/* One picker, two buttons — see wirePicker() in main.js for why it is two
   inputs underneath. The dashed edge says "put something here" without
   promising a drop target the page does not implement. */
/* TWO COLUMNS, because one left two thirds of the panel empty.
   The instruction and the buttons are what a reader acts on; the note about
   what the browser will call it is what they read while deciding. Side by side
   they fill the width and sit where each is wanted -- stacked, the note pushed
   the buttons up the page and the panel was mostly blank to the right of both.
   Placement is explicit rather than by source order, so the hidden inputs
   between them cannot claim a cell. */
.picker{border:1px dashed var(--line);border-radius:12px;padding:18px 20px;background:#fbfaf6;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start}
.picker-head{grid-column:1/-1;grid-row:1}
.picker-head{margin:0;font-weight:800;font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0}
.picker-sub{margin:6px 0 14px;color:var(--muted);font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;max-width:none;grid-column:1;grid-row:2}
/* The browser calls it an upload. Said where the button is, because the
   dialog appears the moment it is pressed and the privacy note is further
   down the page than a reader gets before deciding. */
.picker-upload{border-left:3px solid var(--green);padding-left:13px;margin:0;
  grid-column:2;grid-row:2/4;max-width:none;align-self:start}
@media(max-width:1000px){
  .picker{grid-template-columns:minmax(0,1fr)}
  .picker-head,.picker-sub,.picker-actions,.picker-upload{grid-column:1;grid-row:auto}
  .picker-upload{margin-top:14px}
}
.picker-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;grid-column:1;grid-row:3}
.picker-actions .button{cursor:pointer}
.picker-actions .button{background:transparent;color:var(--green);border:1.5px solid var(--green);padding:10px 16px}
.picker-actions .button:hover{background:var(--green);color:#fff}
.picker-picked{color:var(--muted);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}
.picker-picked.has{color:var(--green);font-weight:800}
.setup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:4px}
.setup-actions .or-demo{margin:0}
.setup-actions .or-demo small{display:block;color:var(--muted);font-size:12px}
.import-message{grid-column:1/-1;margin:0;color:var(--green);font-weight:700}
.import-message.error{color:var(--red)}
.privacy-note{margin:22px 0 0;padding:14px 17px;border-left:4px solid var(--green);background:#edf2e5;border-radius:0 10px 10px 0;font-size:13px;line-height:1.6}
.setup-more{margin:14px 0 0;font-size:13px;color:var(--muted)}
.plain-list{columns:2;column-gap:44px;margin:0 0 8px;padding-left:19px}
.plain-list li{break-inside:avoid;margin-bottom:9px}

/* -------------------------------- toolbar --------------------------------- */
.toolbar{padding:16px 22px}
.controls-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.status{padding:10px 14px;border-radius:8px;background:#edf2e5;color:var(--green);font-weight:800}
.status.bad{background:#f9e3d8;color:#963f26}
.controls-head .button{margin-left:auto}
#scope-note{margin:12px 0 0}

/* ------------------------------- dashboard -------------------------------- */
.verdict-lede{font:400 17px/1.65 Georgia,serif;max-width:none;margin:8px 0 18px}
.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:6px}
.metric-grid article{background:#fbfaf6;border:1px solid var(--line);border-top:4px solid var(--ink);padding:16px;border-radius:12px}
.metric-grid span,.metric-grid small{display:block;color:var(--muted);font-size:12px}
.metric-grid strong{display:block;font:700 28px/1.1 Georgia,serif;margin:12px 0 5px}
.metric-grid article.tone-ok{border-top-color:var(--green)}
.metric-grid article.tone-bad{border-top-color:var(--red)}
.metric-grid article.tone-warn{border-top-color:var(--orange)}
.callout{border-left:4px solid var(--orange);background:#fff1e8;padding:12px 15px;font-weight:700;margin-top:14px}

.verdict-pill{display:inline-block;padding:3px 9px;border-radius:12px;font:800 11px/1.5 Inter,Segoe UI,sans-serif;white-space:nowrap}
.verdict-pill.bad{background:#f7dcd6;color:var(--red)}
.verdict-pill.warn{background:#f9e3d8;color:#963f26}
.finding{border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:10px;background:#fbfaf6}
.finding.tone-ok{border-left-color:var(--green)}
.finding.tone-bad{border-left-color:var(--red)}
.finding.tone-warn{border-left-color:var(--orange)}
.finding-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.finding-id{color:var(--muted);font:600 11px Consolas,monospace}
.finding-body{margin:0;font-size:13.5px}

/* ------------------------------- the tables ------------------------------- */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:9px;vertical-align:top}
th{background:var(--panel);color:var(--muted);font-size:11px;text-transform:uppercase;white-space:nowrap}
td small,th small{display:block;color:var(--muted);font-weight:600;font-size:11px;text-transform:none;letter-spacing:0}
code{background:#eef0ea;border-radius:4px;padding:1px 5px;font:600 11.5px Consolas,monospace}
.row-warn td{background:#fff8f4}
.chip{display:inline-block;padding:2px 8px;border-radius:10px;color:#fff;font:800 11px Inter,sans-serif}

/* The coverage matrix. Parameters down, blocks across — the shape that makes a
   missing discipline a visible column of holes rather than a list of rows. */
.matrix th:first-child{width:34%}
.matrix tbody th{text-align:left;font-weight:700;text-transform:none;font-size:13px;background:var(--panel)}
td.cov{font-size:11px;line-height:1.35}
td.cov b{display:block;font-size:12px}
td.cov small{color:var(--muted)}
td.cov-ok{background:#eef5ee}
td.cov-warn{background:#fdf2e9}
td.cov-bad{background:#f9e6e2}
td.cov-bad b{color:var(--red)}

/* ------------------------------ the diagrams ------------------------------ */
.chart-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 12px;font-size:12px;color:var(--muted)}
.chart-tools label{display:flex;align-items:center;gap:6px;font-weight:700}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.legend .key{display:flex;align-items:center;gap:5px;font-weight:700}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.canvas-wrap{border:1px solid var(--line);border-radius:12px;background:#fbfaf6;overflow:hidden}
svg{display:block;width:100%;touch-action:none}

.link{stroke:#c9cdbb;stroke-width:1.2}
.link-shares_storey{stroke:#7a9a53;stroke-width:1.6}
.link-bad{stroke:#9c3527;stroke-width:2;stroke-dasharray:4 3}
.node{cursor:grab}
.node circle{stroke:#fffdfa;stroke-width:1.5}
.node circle.ring-bad{stroke:#9c3527;stroke-width:2.5}
.node-label{font:600 10px Inter,Segoe UI,sans-serif;fill:var(--muted);pointer-events:none}
.node-project .node-label,.node-block .node-label{font-weight:800;fill:var(--ink);font-size:11px}

.tile{stroke:#fffdfa;stroke-width:1}
.tile-group{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.5}
.tile-label{font:800 11px Inter,Segoe UI,sans-serif;fill:#fff;pointer-events:none}
.tile-value{font:600 10px Inter,Segoe UI,sans-serif;fill:#ffffffcc;pointer-events:none}
.tile-block{font:800 12px Georgia,serif;fill:var(--ink);pointer-events:none}

.branch{fill:none;stroke:#c9cdbb;stroke-width:1.3}
.branch-absent{stroke:#e0ddd2;stroke-dasharray:3 3}
.twig{stroke:#fffdfa;stroke-width:1}
.twig-absent{stroke:#b9b4a6;stroke-dasharray:2 2}
.twig-label{font:600 11px Inter,Segoe UI,sans-serif;fill:var(--ink)}
.twig-label-absent{fill:#a49e90;font-style:italic}
.twig-label-bad{fill:var(--red);font-weight:800}

.tooltip{position:fixed;z-index:60;max-width:300px;background:var(--ink);color:#fff;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:var(--shadow)}

.provenance{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.provenance summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--green)}
.provenance ul{margin:12px 0 0;padding-left:19px}
.provenance li{margin-bottom:9px}

#toast{position:fixed;right:25px;bottom:25px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:9px;box-shadow:var(--shadow);display:none;max-width:460px;z-index:70}
#toast.error{background:var(--red)}

@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .steps,.grid-form{grid-template-columns:1fr}
  .grid-form>*{grid-column:1/-1}
  .plain-list{columns:1}
  .matrix th:first-child{width:auto}
}
@media(max-width:700px){
  h1{font-size:26px}
  main{padding:18px 4vw 48px}
  .panel{padding:17px}
  nav.tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px}
  .tab{white-space:nowrap;padding:12px 12px;font-size:13px}
  input{font-size:16px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .verdict-lede{font-size:16px}
  .legend{margin-left:0}
  #toast{left:16px;right:16px;bottom:16px;max-width:none}
  /* The matrix is the one table that must NOT stack: it is read as a grid, and
     a column of holes is the finding. It scrolls sideways inside its wrapper
     instead, which is why every table here lives in a .table-wrap. */
  .matrix{min-width:640px}
}

@media print{
  nav.tabs,#toast,.controls-head .button,.panel-head button,.setup-more,.chart-tools{display:none!important}
  body{background:#fff}
  header{background:#fff;color:#000;border-bottom:2px solid #000}
  header .eyebrow{color:#000}
  main{max-width:none;padding:0}
  .panel,.finding{box-shadow:none;break-inside:avoid}
  .table-wrap{overflow:visible}
  tr,.finding{break-inside:avoid}
}

.twig-label-muted{fill:var(--muted);font-style:italic}
.twig-label-code{font-weight:800}

/* ------------------------------ traceability -------------------------------
   A layered graph, read left to right, one column per link in the chain. The
   columns are labelled at the top because twelve layers is more than anyone
   holds in their head, and a node's colour alone will not say which one it is
   in.

   `fill:none` on the links is load-bearing and was missing: an SVG path fills
   black by default, so several hundred overlapping bezier curves rendered as
   solid black wedges between the columns rather than as lines. */
.layer-band{fill:#00000006}
/* Title Case, not SHOUTED. All caps cost the column its word shapes -- the
   thing a reader recognises a heading by without reading it -- and cost it
   width, which is what put "Buildability item" into "Property" in the first
   place. Capitalising the source's sentence case gives "Building Block" and
   "Buildability Item" without a second list of labels to keep in step. */
.layer-title{font:800 10px Inter,Segoe UI,sans-serif;fill:var(--muted);letter-spacing:.045em;text-transform:capitalize}
.trace-link{fill:none;stroke:#b9c0ae;stroke-width:1;opacity:.45}
.trace-link.on{stroke:var(--green);stroke-width:2;opacity:1}
.trace-link.fail{stroke:var(--red);opacity:.8}
.trace-link.dim{opacity:.06}
.trace-node{cursor:pointer}
.trace-node rect{stroke:#fffdfa;stroke-width:1;rx:3}
.trace-node.dim{opacity:.18}
.trace-node.on rect{stroke:var(--ink);stroke-width:2}
.trace-label{font:600 10px Inter,Segoe UI,sans-serif;pointer-events:none}
.trace-count{font:600 9px Inter,Segoe UI,sans-serif;pointer-events:none}

/* The ontology, radial: a hub, its classes, and what each was exported as. */
.onto-link{stroke:#5a6b7a;stroke-width:1;opacity:.5;fill:none}
.onto-label{font:700 11px Inter,Segoe UI,sans-serif;fill:#e8ecef;pointer-events:none}
.onto-sub{font:600 9.5px Inter,Segoe UI,sans-serif;fill:#9fb0bd;pointer-events:none}
.onto-rel{font:600 8px Inter,Segoe UI,sans-serif;fill:#7c8b98;pointer-events:none}
.onto-dark{background:#1b232b}

/* The selected path, written out under the diagram — a picture of a chain is
   not quotable and a submission needs the sentence. */
.path-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;font-size:12.5px}
.path-step{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:#fbfaf6;border:1px solid var(--line)}
.path-step i{width:9px;height:9px;border-radius:2px;display:inline-block}
.path-step b{font-weight:800}
.path-step small{color:var(--muted)}
.path-arrow{color:var(--muted);font-weight:800}
.path-step.fail{border-color:var(--red);background:#f9e6e2}
.path-step.pass{border-color:var(--green);background:#eef5ee}

/* Twelve columns will not squeeze into a panel, so the canvas keeps its width
   and the wrapper scrolls. The page itself never scrolls sideways. */
.canvas-wrap{overflow-x:auto;overflow-y:hidden}
@media(max-width:700px){.trace-label{font-size:9px}}


/* ------------------------------- the inspector -----------------------------
   Under the graph, not beside it: the graph is already twelve columns wide and
   a side panel would cost it one. */
.inspector{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.inspector-empty{margin:0;color:var(--muted);font-size:13px;font-style:italic}
.inspector-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.inspector-head i{width:12px;height:12px;border-radius:3px;display:inline-block}
.inspector-head b{font:700 17px/1.3 Georgia,serif}
.inspector-head span{padding:3px 9px;border-radius:12px;background:#edf2e5;color:var(--green);font:800 11px Inter,sans-serif}
.inspector-table th{width:180px;text-align:left;background:transparent;text-transform:none;font-size:12px;color:var(--muted);white-space:normal}
.inspector-table td{font-size:13px}
.inspector-table td small{display:block;color:var(--muted);font-size:11.5px;font-style:italic;margin-top:2px}
.val{display:inline-flex;align-items:center;gap:5px;margin:0 5px 4px 0;padding:2px 7px;border-radius:6px;background:#eef0ea;font-size:12px}
.val b{color:var(--muted);font:700 10.5px Inter,sans-serif}
@media(max-width:700px){.inspector-table th{width:auto}}


/* Full names for everything the graph had to shorten. Folded, because it is a
   reference list and not a finding — but open by default, because a reader
   looking at a truncated label wants it now. */
.metadata{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.metadata>summary{cursor:pointer;font-size:13px;color:var(--green);letter-spacing:.02em}
.metadata>summary small{margin-left:9px;color:var(--muted);font-weight:600}
.meta-group{margin-top:12px}
.meta-group .rates-head{margin-bottom:4px}
.meta-group .rates-head small{text-transform:none;letter-spacing:0;font-weight:600}
.meta-table td{padding:6px 9px;font-size:12.5px}
.meta-table td small{display:block;color:var(--muted);font-size:11px}
.meta-table .meta-num{text-align:right;white-space:nowrap;color:var(--muted);font-weight:700}
.meta-table .verdict-pill{margin-left:7px}

/* ------------------------------------------------- one left edge, always ---
   The header, the tabs and the panels all start at the same x, at every width.
   They did not: the two dark bars were padded 4vw from the viewport while
   `main` was a centred column, so on a wide screen the title sat far left of
   the content it names, and the distance between them changed as the window
   did. `max()` gives the bars the column's own left edge once the viewport is
   wider than the column, and the plain gutter below that.

   `scrollbar-gutter` is the other half of the same complaint. Switching to a
   short tab used to remove the scrollbar and move every centred thing on the
   page sideways by its width; the space is reserved now whether a tab needs it
   or not, so nothing moves when the content changes. */
:root{--page:1560px;--gutter:4vw}
html{scrollbar-gutter:stable}
header,nav.tabs{padding-left:max(var(--gutter),calc((100% - var(--page))/2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100% - var(--page))/2 + var(--gutter)))}
main{max-width:var(--page);padding-left:var(--gutter);padding-right:var(--gutter)}

/* ------------------------------------------------------ the answer, first ---
   Same block as the planner's, for the same reason: the question in the
   heading has one answer and it was the sixth box in a row of six. */
.answer{display:flex;gap:26px;align-items:center;margin:14px 0 20px;padding:18px 24px;
  background:#f1f5ec;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:12px}
.answer-figure{min-width:132px;text-align:center}
.answer-figure strong{display:block;font:700 48px/1 Georgia,serif;color:var(--green)}
.answer-figure small{display:block;margin-top:2px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.answer-text p{margin:0}
.answer-text #dash-lede{font:400 17px/1.55 Georgia,serif}
.answer-text #answer-sub{margin-top:7px;font-size:13px;color:var(--muted)}

/* ------------------------------------------------- a panel that is folded ---
   The coverage matrix and the file table are reference: opened when a finding
   is being checked, in the way every other time. */
.fold-panel{padding:0}
.fold-panel > summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 12px;border-radius:14px}
.fold-panel > summary::-webkit-details-marker{display:none}
.fold-panel > summary::before{content:'▸';color:var(--green);font-size:13px;margin-right:2px}
.fold-panel[open] > summary::before{content:'▾'}
.fold-panel > summary b{font:700 20px/1.25 Georgia,serif}
.fold-panel > summary .fold-kicker{flex-basis:100%;font-size:11px;letter-spacing:.16em;font-weight:800;
  color:var(--green);margin-left:16px}
.fold-panel > summary small{color:var(--muted);font-size:13px}
.fold-panel > summary:hover b{text-decoration:underline}
.fold-panel > *:not(summary){margin-left:24px;margin-right:24px}
.fold-panel > *:last-child{margin-bottom:22px}
.fold-actions{display:flex;justify-content:flex-end}
/* One repeated defect, listed once with its instances inside it. */
.finding-more{margin:8px 0 0}
.finding-more > summary{cursor:pointer;color:var(--green);font-weight:800;font-size:12px}
.finding-more p{margin:8px 0 0}
@media(max-width:700px){.answer{flex-direction:column;align-items:start;gap:12px}
  .answer-figure{text-align:left;min-width:0}.answer-figure strong{font-size:40px}}
/* The exports are what a reader takes away, so they do not live inside a
   disclosure they would have to guess at. */
.dash-exports{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  margin:0 0 22px;padding:14px 24px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);font-size:13px;color:var(--muted)}

/* --------------------------------------- what the delivery says it is ------
   IfcProject.LongName, read from whichever file states it, beside what the set
   turned out to hold. A claim and not a verdict. */
.title-block:empty{display:none}
.title-block{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.title-line{font:400 15px/1.5 Georgia,serif;margin:0 0 6px}
.title-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--muted)}
.title-meta b{color:var(--ink)}
.claim{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border-radius:12px;background:#eef0ea;font-size:12px}
.claim.agrees{background:#dcebdc;color:#24633f}
.claim.differs{background:#f9e3d8;color:#963f26}
.claim b{font-weight:800}

/* The line under the claim is the counted one. It is set apart from the claim
   pills above it because it is a different kind of fact: those are read out of
   a sentence a person wrote, this is counted from the file. */
.title-measured{margin:8px 0 0;font-size:12px;color:var(--muted)}
.title-measured b{color:var(--ink)}