/* Request flow and defenses screens. Uses only the tokens of index.html, so both themes work. */
.cx-lede{color:var(--ink-dim); max-width:78ch; margin:6px 0 var(--sp-4);}
.cx-notice{border:1px solid var(--warn-line); background:var(--warn-bg); color:var(--warn); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); line-height:var(--lh-snug); margin:var(--sp-3) 0;}
.cx-delivery{border:1px solid var(--accent); background:var(--accent-wash); color:var(--ink); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); line-height:var(--lh-snug); margin:var(--sp-3) 0;}
.cx-bar{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-4);}
.cx-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--sp-5); align-items:start;}
@media (max-width:980px){.cx-grid{grid-template-columns:1fr;}}
.cx-col{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0;}
.cx-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-1); min-width:0;}
.cx-card h3{margin:0 0 var(--sp-2); font-size:var(--fs-md); font-family:var(--display);}
.cx-card h4{margin:var(--sp-3) 0 var(--sp-1); font-size:var(--fs-sm); color:var(--ink-dim); text-transform:uppercase; letter-spacing:var(--tracking-caps);}
.cx-card p{margin:0 0 var(--sp-2); font-size:var(--fs-sm); line-height:var(--lh-snug); color:var(--ink-dim);}
.cx-card p strong{color:var(--ink);}
.cx-role{display:grid; gap:var(--sp-2);}
.cx-role > div{border-left:3px solid var(--line-strong); padding-left:var(--sp-3);}
.cx-role b{display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint);}
.cx-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--sp-3);}
.cx-form .field-wide{grid-column:1 / -1;}
.cx-rows{display:grid; gap:var(--sp-2);}
.cx-row{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:var(--sp-2); align-items:center;}
.cx-row input{min-width:0;}
.cx-list{display:grid; gap:var(--sp-2); margin:0; padding:0; list-style:none;}
.cx-item{display:flex; justify-content:space-between; gap:var(--sp-3); align-items:center; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); background:var(--surface-2); cursor:pointer; text-align:left; width:100%; font-size:var(--fs-sm);}
.cx-item:hover{border-color:var(--accent);}
.cx-item.on{border-color:var(--accent); background:var(--accent-wash);}
.cx-item small{color:var(--ink-faint); display:block;}
.cx-progress{display:flex; flex-wrap:wrap; gap:0; margin:var(--sp-3) 0; padding:0; list-style:none; counter-reset:cx;}
.cx-progress li{flex:1 1 90px; min-width:90px; font-size:var(--fs-xs); padding:6px 8px; border-top:3px solid var(--line-strong); color:var(--ink-faint);}
.cx-progress li.done{border-top-color:var(--good); color:var(--good);}
.cx-progress li.current{border-top-color:var(--accent); color:var(--accent); font-weight:600;}
.cx-progress li.error{border-top-color:var(--critical); color:var(--critical); font-weight:600;}
.cx-steps{margin:var(--sp-2) 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink-faint); max-height:150px; overflow:auto;}
.cx-kv{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:4px var(--sp-3); font-size:var(--fs-sm);}
.cx-kv dt{color:var(--ink-faint);}
.cx-kv dd{margin:0; min-width:0; overflow-wrap:anywhere;}
.cx-ref{display:flex; gap:var(--sp-2); align-items:center; font-family:var(--mono); font-size:var(--fs-xs); margin:2px 0;}
.cx-ref code{overflow-wrap:anywhere; flex:1;}
.cx-ref span{color:var(--ink-faint); min-width:150px;}
.cx-truth{font-size:var(--fs-xs); color:var(--ink-faint); margin-top:var(--sp-3);}
.cx-tabs{display:inline-flex; gap:0;}
.cx-literal{font-family:var(--mono); font-size:var(--fs-xs); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); overflow-wrap:anywhere; white-space:pre-wrap; margin:4px 0;}
.cx-share-url{width:100%; min-width:0; font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);}
.cx-def{display:grid; gap:var(--sp-4);}
.cx-attempt{border-top:1px dashed var(--line-strong); padding-top:var(--sp-3); margin-top:var(--sp-3);}
.cx-counts{font-size:var(--fs-xs); color:var(--ink-faint);}
.cx-banner{border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); margin:var(--sp-2) 0;}
.cx-banner.good{background:var(--good-bg); color:var(--good); border:1px solid var(--good-line);}
.cx-banner.bad{background:var(--critical-bg); color:var(--critical); border:1px solid var(--critical-line);}
.cx-error{color:var(--critical); font-size:var(--fs-sm); margin:var(--sp-2) 0;}
.cx-muted{color:var(--ink-faint); font-size:var(--fs-xs);}
/* Policy details: a fold that starts closed, so the case and the two run buttons are what a visitor sees first. */
.cx-policy{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); margin:var(--sp-3) 0; padding:0;}
.cx-policy > summary{cursor:pointer; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:600; color:var(--ink-dim); border-radius:var(--r-md);}
.cx-policy > summary:hover{color:var(--accent);}
.cx-policy[open] > summary{border-bottom:1px solid var(--line);}
.cx-policy > *:not(summary){margin-left:var(--sp-4); margin-right:var(--sp-4);}
.cx-policy > *:last-child{margin-bottom:var(--sp-4);}
.cx-policy > p.cx-muted{margin-top:var(--sp-3);}
/* The four layers of a case are content, not a log: they show in full instead of scrolling inside a 150 px box. */
.cx-layers{max-height:none; overflow:visible;}
/* Profiles: one card per party, read only. Cards stack in one column on a phone. */
.cx-pf-title{margin:0; font-size:var(--fs-lg); font-family:var(--display);}
.cx-pf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:var(--sp-4); margin-top:var(--sp-4);}
.cx-pf-card .cx-kv{grid-template-columns:1fr; gap:2px 0;}
.cx-pf-card .cx-kv dt{margin-top:var(--sp-2); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps);}
.cx-pf-card .cx-kv dd p{margin:var(--sp-1) 0 0;}
.cx-pf-card code{overflow-wrap:anywhere;}
.cx-pf-modes{margin:0; padding-left:var(--sp-4); font-size:var(--fs-sm); color:var(--ink-dim);}