/* Credence — operational UI.
 *
 * Tokens are the suite's, not new ones: the same slate/blue set Socintaker,
 * Relatio, Feed and Intaker share, so this reads as another Wendy tool rather
 * than as a visitor. The navy document palette stays where it belongs, in the
 * generated client report, which is a deliverable and not a screen you work in.
 */
:root{
  --bg:#f8fafc; --card:#ffffff; --border:#e2e8f0;
  --text:#1e293b; --text-muted:#64748b;
  --primary:#3b82f6; --primary-hover:#2563eb;
  --success:#22c55e; --error:#ef4444; --warning:#f59e0b;

  /* Stance semantics, aligned with the report so a colour means one thing across
   * the product: favourable is green, contrary red, anything unattributable grey. */
  --fav:#10b981; --fav-soft:#e7f8f1; --fav-ink:#047857;
  --con:#ef4444; --con-soft:#fdeaea; --con-ink:#b91c1c;
  --neu:#94a3b8; --neu-soft:#f1f5f9;
  --info-soft:#eff6ff; --info-ink:#1d4ed8; --info-line:#bfdbfe;
  --warn-soft:#fffbeb; --warn-ink:#92400e;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;}
/* The `hidden` attribute is how every panel in this app is shown and concealed,
 * and the UA rule that implements it loses to any class that sets `display`.
 * Two full-screen overlays do exactly that, so without this they are permanently
 * on top of the application. Stated once, globally, rather than remembered at
 * each overlay. */
[hidden]{display:none !important;}
body{margin:0; background:var(--bg); color:var(--text); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:.9rem; -webkit-font-smoothing:antialiased;}
a{color:var(--primary);}
.container{max-width:1100px; margin:0 auto; padding:0 1rem;}
.wide{max-width:1340px;}

/* ---------------------------------------------------------------- chrome */
header.top{background:var(--card); border-bottom:1px solid var(--border);
  padding:1rem 0 0;}
header.top h1{font-size:1.5rem; font-weight:600; margin:0;}
header.top .sub{font-size:.875rem; color:var(--text-muted); margin:.15rem 0 0;}
/* Wraps, because it does not fit. At 1000px the unwrapped row pushed the document
 * to 1104px and put the signed-in user behind a horizontal scrollbar. */
.headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;}
.headrow .nowrap{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;}
.tabs{display:flex; gap:.25rem; margin-top:1rem;}
.tab{padding:.5rem .9rem; border:none; background:none; cursor:pointer;
  font-size:.875rem; color:var(--text-muted); border-radius:6px 6px 0 0;
  border-bottom:2px solid transparent; font-family:inherit;}
.tab:hover{color:var(--text);}
.tab.on{color:var(--info-ink); font-weight:600; border-bottom-color:var(--primary);
  background:var(--info-soft);}
main{padding:1.25rem 0 4rem;}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1.25rem 1.5rem; margin-bottom:1rem;}
.card h2{font-size:1rem; font-weight:600; margin:0 0 .2rem;}
.card h2 + .hint-t{margin-top:0;}
.hint-t{color:var(--text-muted); font-size:.85rem; margin:0 0 1rem;}
.sect{font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:600; color:var(--text-muted); margin:0 0 .6rem;}

/* ---------------------------------------------------------------- bits */
.btn{border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:8px; padding:.5rem 1rem; font-size:.875rem; cursor:pointer;
  font-family:inherit; transition:all .15s;}
.btn:hover{border-color:var(--text-muted);}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-hover); border-color:var(--primary-hover);}
.btn-sm{padding:.3rem .65rem; font-size:.8rem;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
input[type=text],textarea,select{width:100%; padding:.5rem .6rem; font-size:.875rem;
  border:1px solid var(--border); border-radius:8px; font-family:inherit;
  background:var(--card); color:var(--text);}
textarea{resize:vertical; min-height:60px;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--info-line);
  outline-offset:-1px; border-color:var(--primary);}
label.f{display:block; font-size:.78rem; font-weight:600; color:var(--text-muted);
  margin:0 0 .3rem; text-transform:uppercase; letter-spacing:.03em;}
.stats{display:flex; gap:.75rem; flex-wrap:wrap;}
.stat{flex:1 1 130px; border:1px solid var(--border); border-radius:10px;
  padding:.7rem .9rem; background:var(--card);}
.stat .n{font-size:1.4rem; font-weight:700; line-height:1.1;}
.stat .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin-top:.15rem;}
.stat.alert .n{color:var(--error);}
.badge{display:inline-block; font-size:.7rem; font-weight:600; padding:.12rem .5rem;
  border-radius:999px; letter-spacing:.02em;}
.b-fav{background:var(--fav-soft); color:var(--fav-ink);}
.b-con{background:var(--con-soft); color:var(--con-ink);}
.b-neu{background:var(--neu-soft); color:var(--text-muted);}
.b-info{background:var(--info-soft); color:var(--info-ink);}
.b-warn{background:#fef3c7; color:var(--warn-ink);}
.b-err{background:#fee2e2; color:#991b1b;}
.b-twitter{background:#e0f2fe; color:#0369a1;}
.b-tiktok{background:#fce7f3; color:#be185d;}
.b-facebook{background:#e0e7ff; color:#3730a3;}
.b-youtube{background:#fee2e2; color:#991b1b;}
.hint{background:var(--info-soft); border:1px solid var(--info-line);
  color:var(--info-ink); border-radius:8px; padding:.7rem .9rem; font-size:.85rem;
  margin:.75rem 0;}
.hint.warn{background:var(--warn-soft); border-color:#fde68a; color:var(--warn-ink);}
.hint b{font-weight:700;}
.mono{font-family:var(--mono); font-size:.8rem;}
.muted{color:var(--text-muted);}
.right{text-align:right;} .nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums; text-align:right;}

/* ---------------------------------------------------------------- tables */
table{width:100%; border-collapse:collapse; font-size:.85rem;}
th{text-align:left; color:var(--text-muted); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.5rem .5rem;
  border-bottom:1px solid var(--border); white-space:nowrap;}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--text);}
th .arrow{opacity:.45; font-size:.65rem;}
td{padding:.55rem .5rem; border-bottom:1px solid var(--border); vertical-align:top;}
tbody tr:hover{background:#f8fafc;}
tbody tr.sel{background:var(--info-soft);}
tbody tr.clickable{cursor:pointer;}

/* Stacked stance bar, same semantics as the report's. */
.bar{height:8px; border-radius:4px; background:var(--border); overflow:hidden;
  display:flex; min-width:90px;}
.bar i{display:block; height:100%;}
.bar .f{background:var(--fav);} .bar .c{background:var(--con);}
.bar .u{background:var(--neu);} .bar .x{background:#cbd5e1;}

/* ---------------------------------------------------------------- editor */
.split{display:grid; grid-template-columns:minmax(0,1fr) 460px; gap:1rem;
  align-items:start;}
/* Below the two-column breakpoint the editor goes ABOVE the table rather than
 * 4,000px underneath it. A sticky sidebar that stacks is a sidebar you cannot find. */
@media (max-width:1100px){
  .split{grid-template-columns:1fr;}
  .panel{position:static; max-height:none; order:-1;}
}
.panel{position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto;}
.panel .card{margin-bottom:.75rem;}
.posttext{font-size:.85rem; background:#f8fafc; border:1px solid var(--border);
  border-radius:8px; padding:.7rem .85rem; max-height:220px; overflow:auto;
  white-space:pre-wrap; color:var(--text);}
.seg{display:flex; gap:.35rem; flex-wrap:wrap;}
.seg label{flex:1 1 auto; text-align:center; border:1px solid var(--border);
  border-radius:8px; padding:.4rem .6rem; font-size:.82rem; cursor:pointer;
  background:var(--card); white-space:nowrap;}
.seg label:hover{border-color:var(--text-muted);}
.seg input{position:absolute; opacity:0; width:0; height:0;}
/* Every click inside the label must land on the label, never on a child that
 * swallows it — the control is the whole box, not the invisible radio. */
.seg label span,.chip span{pointer-events:none;}
.seg input:checked + span{font-weight:600;}
.seg label:has(input:checked){background:var(--info-soft); border-color:var(--primary);
  color:var(--info-ink);}
.seg label.prop::after{content:"proposed"; display:block; font-size:.6rem;
  color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase;}
.field{margin-bottom:.9rem;}
.chips{display:flex; flex-wrap:wrap; gap:.3rem;}
.chip{display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--border);
  border-radius:999px; padding:.2rem .6rem; font-size:.8rem; cursor:pointer;
  background:var(--card);}
.chip:has(input:checked){background:var(--info-soft); border-color:var(--primary);
  color:var(--info-ink); font-weight:600;}
.chip.unsettled{border-style:dashed;}
.chip input{margin:0;}
.speaker{display:flex; gap:.35rem; margin-bottom:.35rem;}
.speaker input{flex:1 1 auto;}
.openq{border:1px dashed var(--warning); border-radius:8px; padding:.5rem .6rem;
  margin:.4rem 0; background:var(--warn-soft);}
.openq code{font-family:var(--mono); font-size:.8rem; font-weight:700;}
.openq.done{border-style:solid; border-color:var(--border); background:var(--card);}
.viol{font-size:.8rem; border-radius:8px; padding:.45rem .6rem; margin:.3rem 0;}
.viol.BLOCK{background:#fee2e2; color:#991b1b;}
.viol.WARN{background:var(--warn-soft); color:var(--warn-ink);}
details.more summary{cursor:pointer; font-size:.8rem; color:var(--primary);
  margin:.2rem 0;}
details.more .help{font-size:.82rem; color:var(--text-muted);
  border-left:2px solid var(--border); padding-left:.7rem; margin:.4rem 0;}
.effect{border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.effect .hd{background:#f8fafc; padding:.5rem .75rem; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  color:var(--text-muted); border-bottom:1px solid var(--border);}
.effect .bd{padding:.75rem;}
.kv{display:flex; justify-content:space-between; font-size:.85rem; padding:.15rem 0;}

/* ---------------------------------------------------------------- misc */
.toast{position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  background:var(--text); color:#fff; padding:.55rem 1rem; border-radius:8px;
  font-size:.85rem; box-shadow:0 4px 12px rgba(0,0,0,.12); z-index:50; opacity:0;
  transition:opacity .2s; pointer-events:none;}
.toast.show{opacity:1;}
.toast.err{background:var(--error);}
.filters{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  margin-bottom:.75rem;}
.filters input[type=text]{width:auto; flex:1 1 200px;}
/* Wraps rather than scrolls. Eight stages at a 150px floor overflow the container,
 * and the last one — Analysis, the stage you most want to see — sat off the edge
 * behind a scrollbar with nothing indicating it was there. */
.pipe{display:flex; flex-wrap:wrap; gap:.6rem; padding-bottom:.25rem;}
/* No grow: a leftover card on the wrapped row would otherwise stretch to the full
 * container width and stop looking like a peer of the cards above it. */
.step{flex:0 1 150px; min-width:150px; border:1px solid var(--border);
  border-radius:10px; padding:.7rem .8rem; background:var(--card);}
.step .n{font-size:1.15rem; font-weight:700;}
.step .l{font-size:.75rem; color:var(--text-muted);}
.step .d{font-size:.7rem; color:var(--text-muted); margin-top:.3rem;}
.step.off{opacity:.55;}
.step .dot{width:7px; height:7px; border-radius:50%; display:inline-block;
  margin-right:.35rem; background:var(--success);}
.step.off .dot{background:var(--border);}
iframe.report{width:100%; height:calc(100vh - 200px); border:1px solid var(--border);
  border-radius:12px; background:#fff;}
pre.rule{font-family:var(--mono); font-size:.75rem; background:#f8fafc;
  border:1px solid var(--border); border-radius:8px; padding:.75rem; overflow:auto;
  color:var(--text);}
.empty{text-align:center; color:var(--text-muted); padding:2.5rem 1rem;
  font-size:.9rem;}

/* ---------------------------------------------------------------- sign-in */
/* Full-screen because there is nothing to see behind it: every endpoint needs a
 * session, so a partially-rendered app under a login box would be a lie. */
.gate{position:fixed; inset:0; background:var(--bg); display:grid; place-items:center;
  z-index:50;}
.gatebox{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:2rem; width:min(360px,92vw); box-shadow:0 8px 30px rgba(15,23,42,.08);}
.gatebox h1{margin:0; font-size:1.6rem;}
.gsub{color:var(--text-muted); margin:.2rem 0 1.4rem; font-size:.85rem;}
.gatebox label{display:block; font-size:.8rem; color:var(--text-muted);
  margin-bottom:.85rem;}
.gatebox input{display:block; width:100%; margin-top:.25rem; padding:.55rem .65rem;
  border:1px solid var(--border); border-radius:8px; font:inherit;}
.gatebox .btn{width:100%; justify-content:center; margin-top:.4rem;}
.gerr{color:var(--con-ink); font-size:.8rem; min-height:1.2em; margin:.7rem 0 0;}

/* ---------------------------------------------------------------- chrome add-ons */
.who{font-size:.8rem; color:var(--text-muted); padding-left:.5rem;}
.sel{padding:.35rem .5rem; border:1px solid var(--border); border-radius:6px;
  font:inherit; font-size:.8rem; background:var(--card); color:var(--text);
  max-width:220px;}

.modal{position:fixed; inset:0; background:rgba(15,23,42,.45); display:grid;
  place-items:center; z-index:60; padding:1rem;}
.modalbox{background:var(--card); border-radius:12px; padding:1.5rem;
  width:min(560px,96vw); max-height:90vh; overflow:auto;}
.modalbox h2{margin-top:0;}

/* ---------------------------------------------------------------- forms */
.fld{display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:.75rem;}
.fld.inline{display:inline-block; margin-right:.75rem;}
.fld input, .fld textarea, .fld select{display:block; width:100%; margin-top:.2rem;
  padding:.45rem .55rem; border:1px solid var(--border); border-radius:7px;
  font:inherit; font-size:.85rem; color:var(--text); background:var(--card);}
.fld.inline input, .fld.inline select{width:auto;}
textarea#urls{width:100%; padding:.6rem; border:1px solid var(--border);
  border-radius:8px; font-family:var(--mono); font-size:.8rem; resize:vertical;}
label.inline{font-size:.8rem; color:var(--text-muted); margin-left:.6rem;}
tr.addrow td{background:var(--neu-soft);}
tr.addrow input, tr.addrow select{width:100%; padding:.3rem .4rem; font:inherit;
  font-size:.8rem; border:1px solid var(--border); border-radius:6px;}
.small{font-size:.78rem;}
/* Wraps into rows rather than scrolling sideways like the Overview strip: each
 * card here carries a button, and a control you have to scroll to find is a
 * control nobody uses. Without a flex rule the children ignored their own
 * `flex` basis and stacked full-width, eight screens tall. */
.steps{display:flex; flex-wrap:wrap; gap:.6rem;}
.steps .step{flex:0 1 210px; min-width:210px;}
.steps .step .btn{margin-top:.5rem; width:100%; justify-content:center;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}