/* Live app additions on top of the prototype's tokens, app.css and screens.css (server-rendered forms). */
fieldset{border:0;margin:0;padding:0;min-width:0}
.appbar .out{display:flex;align-items:center;margin:0}
.login .lockup{margin-bottom:var(--s5)}
.login form{max-width:420px}
.flash{background:var(--paper);border:1px solid var(--pcg-separator);padding:10px 14px;border-radius:var(--r1);margin-bottom:var(--s4);font-size:14px}

/* Radio/checkbox choices that look like the prototype's choice buttons (selected = full red outline) */
.choice.plain label{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper);font-size:14px;color:var(--ink-2);cursor:pointer}
.choice.plain input{position:absolute;opacity:0;width:1px;height:1px}
.choice.plain label:has(input:checked){border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action);color:var(--ink);font-weight:700}
.choice.plain label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.choice.plain label:hover{color:var(--ink)}
.card .choice.plain{margin-bottom:var(--s4)}

/* Voice options as labelled radios */
.voice{cursor:pointer}
.voice:has(input:checked){border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.voice:has(input:checked) .dot{border:5px solid var(--action)}
.voice:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.blend .ent input{accent-color:var(--ink);width:15px;height:15px;margin:0}
.blend .ent label{cursor:pointer}

/* Canvas */
.issues{margin-top:var(--s3);display:grid;gap:6px}
.issues li{font-size:14px;color:var(--ink-2);list-style:disc;margin-inline-start:18px}
.issues li.red{color:var(--decision)}
.issues b{font-weight:700}
.need{margin-bottom:var(--s4)}
.need ul{margin:4px 0 6px;padding-inline-start:18px;list-style:disc}
.actions form{margin:0;display:inline-flex}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary[disabled]:hover{border-color:var(--action)}
.post-box .decide{margin-top:var(--s3)}
.paper[hidden]{display:none}
.helper-log p::before{content:none}
.helper-log p{padding-inline-start:0}
.seltool{inset-inline-start:12px}

/* Account page */
.post .go{display:flex;gap:var(--s2);align-items:flex-start;flex-wrap:wrap}
.post .go form{margin:0}
details.edited>summary{list-style:none}
details.edited>summary::-webkit-details-marker{display:none}
details.edited[open]{flex-basis:100%}
details.edited .textarea{min-height:90px}
.research-again{display:flex;gap:var(--s4);align-items:center;margin:0}

/* Batch */
.sp-wrap{width:100%}
.sp-body .post-box{padding:0 var(--s4) var(--s4)}
.sp-open .sp-body .paper{box-shadow:none;padding:24px 32px}

/* Admin */
.add-user{display:grid;grid-template-columns:1fr 200px auto;gap:var(--s4);align-items:end}
.inline{display:flex;gap:var(--s2);align-items:center;margin:0}
.inline .select{width:auto;min-height:36px;padding:4px 10px}
.textarea.json{font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;white-space:pre;overflow:auto}
.occ .decide ul{margin-top:4px;padding-inline-start:18px;list-style:disc}

@media (max-width:720px){
  .table-keep th:nth-child(n+3),.table-keep td:nth-child(n+3),.table td.keep,.table th.keep{display:table-cell}
  .add-user{grid-template-columns:1fr}
  .sp-open .sp-body .paper{padding:20px 16px}
  .sp-body .post-box{padding:0 var(--s3) var(--s3)}
  .appbar .out{order:4}
  .nav{gap:var(--s4)}
  .stickybar .keys{display:none}
}

/* Research: source domains per lane, «ما يجري الآن», reconnecting (task-13). Motion stays subtle; none with reduced motion. */
.track .hosts{display:flex;gap:10px;justify-content:flex-end;font:11px/1.4 var(--latin);color:var(--ink-3);min-height:15px;overflow:hidden;white-space:nowrap}
.track .hosts span{animation:hostin .5s var(--ease)}
.track .hosts span:not(:first-child){opacity:.55}
@keyframes hostin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lanes.settled .hosts{display:none}
.now{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4);display:grid;grid-template-columns:150px 1fr;gap:var(--s2) var(--s4)}
.now-h{font-size:13px;color:var(--ink-3);padding-top:4px}
.now-line{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--s3);font:19px/1.4 var(--display);padding-bottom:8px}
.now-line .now-d{font:13px var(--ui);color:var(--ink-2)}
.now-line .now-clock{margin-inline-start:auto;font:500 15px var(--latin);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* task-112: a still status dot (no pulsing rings, Badr) */
.now-line.idle .pulse{background:var(--rule-2)}
.pulse{flex:none;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--pcg-red)}
.now-past{grid-column:2;display:grid;gap:2px;font-size:13px;color:var(--ink-3)}
.now-past li{display:flex;align-items:baseline;gap:var(--s3);animation:hostin .4s var(--ease)}
.now-past li .d{color:var(--ink-2)}
.now-past li .num{margin-inline-start:auto}
.now-past li.fail{color:var(--decision)}
.now-past li:nth-child(n+3){opacity:.6}
.research.done .now-line{display:none}
.retrying{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--wait);margin-top:var(--s4)}
.retrying .pulse{background:var(--wait)}
.summary .going{margin-top:4px}
@media (prefers-reduced-motion:reduce){.track .hosts span,.now-past li{animation:none!important}}
@media (max-width:720px){.now{grid-template-columns:1fr}.now-past{grid-column:1}.now-line{font-size:17px}}

/* Review: the real research card and voice (task-13) */
.h3{font:17px/1.35 var(--display);margin:var(--s4) 0 var(--s2)}
.vlabel{display:grid;gap:2px;margin-bottom:var(--s3)}
.vlabel b{font:400 19px/1.35 var(--display)}
.vlabel span{font-size:13px;color:var(--ink-2)}
.cov{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s2) 0;margin-bottom:var(--s3)}
.cov b{font:500 17px var(--latin);color:var(--ink)}
.rules{display:grid;gap:var(--s3);counter-reset:r;margin-bottom:var(--s5)}
.rules li{counter-increment:r;display:grid;grid-template-columns:22px 1fr;gap:2px var(--s2);font-size:14px}
.rules li::before{content:counter(r);font:500 13px var(--latin);color:var(--ink-3);padding-top:2px}
.rules li>*{grid-column:2}
.rules .ev{margin:4px 0 0;font-size:13px;line-height:1.8;color:var(--ink-2)}
.says{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin:0 0 var(--s5)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:13px;border:1px solid var(--rule-2);border-radius:var(--r1);padding:2px 8px;background:var(--raised)}
.donts{display:grid;gap:8px;font-size:14px}
.donts small{display:block;font-size:12px;line-height:1.6}
.leaders .asof{display:block;font-size:12px;color:var(--ink-3)}
.leaders .stale{margin-inline-start:8px;color:var(--wait)}
.textarea.guides{min-height:84px;resize:vertical}
.kv .hint{font-size:12px;margin-top:4px}
.wait-note{display:grid;gap:var(--s3)}
.voice.off{opacity:.6;cursor:default}
@media (max-width:720px){.says{grid-template-columns:1fr}}

/* ---- task-28: the journey. Same tokens and type; red stays the one primary action. ---- */
/* Stages strip (A · B · C) and the one line that says what to do now */
.stages{margin:0 0 var(--s3)}
.stages ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);counter-reset:none}
.stages a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s3);align-items:baseline;text-decoration:none;padding:10px 12px;border-top:2px solid var(--rule);color:var(--ink-3)}
.stages .n{grid-row:1/3;font:22px/1 var(--display);color:var(--ink-3)}
.stages .t{font:17px/1.3 var(--display);color:var(--ink-2)}
.stages .s{font-size:12px;color:var(--ink-3)}
.stages li.done a{border-top-color:var(--ok)}
.stages li.done .s{color:var(--ok)}
.stages li.cur a{border-top-color:var(--ink)}
.stages li.cur .t,.stages li.cur .n{color:var(--ink)}
/* decision 69: a stage locked during the first setup is not a link */
.stages .lk{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s3);align-items:baseline;padding:10px 12px;border-top:2px dashed var(--rule);color:var(--ink-3);cursor:not-allowed}
.stages li.locked .t,.stages li.locked .n{color:var(--ink-3)}
.stages li.locked .s::before{content:'\1F512\FE0E  ';font-size:11px}
.stages li.here a{background:var(--paper)}
.stages a:hover .t{color:var(--ink)}
.now-step{font-size:15px;color:var(--ink);margin:0 0 var(--s5);padding:10px 14px;background:var(--pcg-panel);border:1px solid var(--pcg-separator);border-radius:var(--r1)}
.now-step b{font-weight:700;margin-inline-end:4px}
.flash.err{color:var(--decision);border-color:var(--decision)}
.done-note{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.wait-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--wait);margin-bottom:var(--s4)}
.wait-line .pulse{background:var(--wait)}
.small{font-size:12px}
.tag-edit,.tag-wait,.tag-ok{display:inline-block;font-size:11px;line-height:1.6;padding:0 6px;border-radius:var(--r1);vertical-align:middle;font-weight:400}
.tag-edit{background:var(--well);color:var(--ink-2)}
.tag-wait{background:var(--wait-wash);color:var(--wait)}
.tag-ok{background:var(--ok-wash);color:var(--ok-ink)}

/* Stage A: card v2 */
.card-head .logo{width:56px;height:56px;object-fit:contain;border-radius:var(--r1);background:var(--raised)}
.logo-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0 0 var(--s4);font-size:13px}
.logo-form .label{margin:0}
.file{font-size:13px;max-width:100%}
.grp{margin-top:var(--s5)}
.grp-h{display:flex;align-items:baseline;gap:var(--s2);font:19px/1.35 var(--display);margin-bottom:var(--s2)}
.grp-h .num{font:500 12px var(--latin);color:var(--ink-3);min-width:18px}
.fld{display:contents}
.fld .val{white-space:normal;overflow-wrap:anywhere}
.fld .val.empty,.val.empty{color:var(--ink-3)}
.src{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:12px;color:var(--ink-2);margin-top:4px}
.src a,.src span[dir]{font-family:var(--latin);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.src a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.src a.faded{opacity:.5}
.src.none{color:var(--ink-3)}
.items{display:grid;gap:var(--s3)}
.kv .items li::before{top:.85em}
.ev{margin:4px 0 0;font-size:13px;line-height:1.8;color:var(--ink-2)}
details.edit{margin-top:6px}
details.edit>summary{display:inline-block;list-style:none;font-size:13px}
details.edit>summary::-webkit-details-marker{display:none}
details.edit[open]>summary{margin-bottom:6px}
details.edit .textarea{min-height:90px;resize:vertical}
.suggest{margin-top:var(--s2);padding:8px 12px;background:var(--wait-wash);border-radius:var(--r1);font-size:14px}
.row-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:6px}
.save-row{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4)}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:4px}
.srcs{display:grid;gap:6px;font-size:13px;margin-bottom:var(--s5)}
.srcs li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:2px var(--s3);align-items:baseline;padding:4px 0;border-bottom:1px solid var(--rule)}
.srcs .id{color:var(--ink-3);font-size:11px}
.srcs .tt{overflow-wrap:anywhere}
.srcs .tt a{text-decoration:none}
.srcs .tt a:hover{text-decoration:underline}
.srcs .dm{color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.srcs .why,.srcs .tag-edit{grid-column:2/4;justify-self:start}
.srcs .why{color:var(--ink-3)}
.srcs li.dropped{opacity:.55}
.srcs li.dropped .tt{text-decoration:line-through;text-decoration-color:var(--rule-2)}
.add-src{border-top:1px solid var(--rule);padding-top:var(--s4)}
.add-src .h3{margin-top:0}
.reanalyze{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}

/* Stage B: the fork */
.fork{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
.fork .path{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5)}
.fork .path .go{margin-top:auto;padding-top:var(--s3)}
.fork .ents,.ctl .ents{display:flex;flex-wrap:wrap;gap:6px}
.ent{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 10px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper);font-size:14px;cursor:pointer}
.ent:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ent input{accent-color:var(--ink);margin:0}

/* Stage B: the dashboard */
.dash-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;font-size:13px;color:var(--ink-2);margin-bottom:var(--s4)}
.dash-meta .num{font:500 15px var(--latin);color:var(--ink)}
.conflicts{background:var(--wait-wash);border:1px solid var(--pcg-separator);padding:10px 14px;border-radius:var(--r1);margin-bottom:var(--s4);font-size:14px}
.dash{display:grid;gap:var(--s4)}
.ctls{display:grid;gap:0;padding-bottom:var(--s3)}
.ctls>.h2,.ctls>summary{margin-bottom:var(--s2)}
details.adv>summary{cursor:pointer;list-style:none}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::after{content:"＋";float:inline-end;color:var(--ink-3);font:15px var(--latin)}
details.adv[open]>summary::after{content:"－"}
.ctl{border-top:1px solid var(--rule);padding:var(--s4) 0;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s2) var(--s5)}
.ctl legend{float:inline-start;width:100%;font:17px/1.35 var(--display);padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.ctl legend+.hintp{grid-column:1}
.ctl .pid{font:500 11px var(--latin);color:var(--ink-3)}
.ctl .hintp{margin-top:2px}
.ctl-in{grid-column:2;grid-row:1/3;display:grid;gap:var(--s3);align-content:start;min-width:0}
.ctl-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3);font-size:12px;color:var(--ink-3)}
.ctl-meta a{color:var(--ink-2)}
.ctl.conflict{background:var(--wait-wash);padding-inline:var(--s3)}
.ctl .choice.plain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ctl .choice.plain .label{width:100%;margin:0;font-size:12px;color:var(--ink-3)}
.srct{display:inline-block;padding:0 6px;border-radius:var(--r1);background:var(--well);color:var(--ink-2)}
.srct.s-user{background:var(--ink);color:var(--paper)}
.srct.s-inspired{background:var(--ok-wash);color:var(--ok)}
.lock{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.lock input{accent-color:var(--ink);margin:0}
details.why{display:inline}
details.why>summary{display:inline;cursor:pointer;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2)}
details.why[open]{display:block;width:100%}
details.why p{margin-top:4px;color:var(--ink-2);font-size:13px;line-height:1.7}
/* a three-level slider made of radios: a track with three stops, keyboard = arrow keys */
.slider3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:420px;padding-top:18px}
.slider3::before{content:"";position:absolute;top:24px;inset-inline:16.66%;height:2px;background:var(--rule-2)}
.slider3 label{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;text-align:center}
.slider3 label::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--rule-2);position:relative;top:-12px;margin-bottom:-12px;transition:transform .15s var(--ease)}
.slider3 input{position:absolute;opacity:0;width:1px;height:1px}
.slider3 label:has(input:checked){color:var(--ink);font-weight:700}
.slider3 label:has(input:checked)::before{border-color:var(--ink);background:var(--ink);transform:scale(1.15)}
.slider3 label:has(input:focus-visible)::before{outline:2px solid var(--ink);outline-offset:3px}
.und{font-size:12px}
.und label{display:inline-flex;gap:4px;align-items:center;color:var(--ink-3);cursor:pointer}
.switch-t{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.switch-t input{appearance:none;width:38px;height:22px;border-radius:11px;background:var(--rule-2);position:relative;margin:0;cursor:pointer;transition:background .15s}
.switch-t input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);transition:inset-inline-start .15s var(--ease)}
.switch-t input:checked{background:var(--ink)}
.switch-t input:checked::after{inset-inline-start:19px}
.emojis{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.emojis .label{width:100%;margin:0;font-size:12px;color:var(--ink-3)}
.emo{cursor:pointer}
.emo input{position:absolute;opacity:0;width:1px;height:1px}
.emo span{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--rule);border-radius:var(--r1);background:var(--paper);font-size:18px}
.emo:has(input:checked) span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--raised)}
.emo:has(input:focus-visible) span{outline:2px solid var(--ink);outline-offset:2px}
.emo-more{width:140px;min-height:36px}
.mark-f{display:grid;gap:2px;max-width:320px}
.mark-f .label{margin:0;font-size:12px;color:var(--ink-3)}
.notes{display:grid;gap:var(--s2)}
.preview-box>summary,.adv>summary{cursor:pointer}
.preview-box>summary{list-style:none}
.preview-box>summary::-webkit-details-marker{display:none}
.pv-plats{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:14px;margin:var(--s3) 0}
.pv-plats a{text-decoration:none;color:var(--ink-2);border-bottom:2px solid transparent}
.pv-plats a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
pre.system{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--raised);border-radius:var(--r1);padding:var(--s4);font:14px/1.9 var(--ui);margin:0 0 var(--s4);max-height:420px;overflow:auto}
.manifest td{font-size:13px;vertical-align:top}
.vers{display:grid;gap:6px}
.vers li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);font-size:14px}
.vers li.here a{font-weight:700}
.vsum dt{font-size:13px}

/* Research: what we read, as it is read (real events only) */
.feed{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4);display:grid;grid-template-columns:150px 1fr;gap:var(--s2) var(--s4)}
.feed-h{font-size:13px;color:var(--ink-3);padding-top:2px}
.feed-list{display:grid;gap:4px;font-size:14px;min-width:0}
.feed-list li{display:flex;flex-wrap:wrap;gap:2px var(--s3);align-items:baseline;animation:hostin .45s var(--ease);min-width:0}
.feed-list li .f-t{overflow-wrap:anywhere;min-width:0}
.feed-list li .f-d{font:12px var(--latin);color:var(--ink-3)}
.feed-list li .f-w{font-size:12px;color:var(--ink-3)}
.feed-list li.f-post .f-t::before{content:"X ";font:500 11px var(--latin);color:var(--ink-3)}
.feed-list li.f-drop{opacity:.5}
.feed-list li.f-drop .f-t{text-decoration:line-through;text-decoration-color:var(--rule-2)}
.feed-list li:nth-child(n+5){opacity:.6}
.feed-list li.f-drop:nth-child(n+5){opacity:.35}
.research.done .feed{display:none}

/* Top bar: a running analysis, one click back to it */
.appbar .running{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);text-decoration:none;padding:4px 10px;border:1px solid var(--rule-2);border-radius:var(--r1);max-width:260px;white-space:nowrap;overflow:hidden}
.appbar .running .nm{overflow:hidden;text-overflow:ellipsis}
.appbar .running:hover{color:var(--ink);border-color:var(--ink)}
.brief-line.decision b{font-weight:700}
.brief-line.decision .sep{color:var(--ink-3)}

@media (max-width:720px){
  .stages a{grid-template-columns:1fr;padding:8px 6px}
  .stages .n{grid-row:auto;font-size:18px}
  .stages .t{font-size:14px}
  .fork{grid-template-columns:1fr}
  .ctl{grid-template-columns:1fr}
  .ctl-in,.ctl-meta{grid-column:1;grid-row:auto}
  .srcs li{grid-template-columns:28px minmax(0,1fr)}
  .srcs .dm{grid-column:2}
  .feed{grid-template-columns:1fr}
  .appbar .running .rt,.appbar .running .nm{display:none}
  .appbar .running{padding:6px}
  .slider3{max-width:none}
}
@media (prefers-reduced-motion:reduce){.feed-list li,.slider3 label::before{animation:none!important;transition:none!important}}

.more-src{margin:-12px 0 var(--s5)}
.more-src>summary{list-style:none;font-size:13px;margin-bottom:6px}
.more-src>summary::-webkit-details-marker{display:none}