/* Drona — one case at a time.
   The conversation is the surface you live in; the claim sits beside it as a
   note in the margin. Two voices run through the page: everything faff writes
   is sans, everything the customer said is serif. */

:root{
  --teal:#015462; --teal-d:#013a44; --teal-l:#0a7d90; --teal-wash:#e8f0f1;
  --cream:#faf9f6; --paper:#ffffff; --paper2:#f4f3ee;
  --ink:#16282c; --mut:#5c6b6e; --dim:#9aa5a7;
  --line:#e8e6dd; --line2:#dcdad0;

  --high:#c8483c; --high-wash:#fbeeec;
  --med:#c99a1e;  --med-wash:#fdf6e4;
  --low:#8a9698;  --low-wash:#f1f2f0;
  --good:#0f7a63;

  --wa-paper:#efe7dd; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-meta:#667781;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bar-h:3.1rem;
  --shadow:0 1px 2px rgba(1,84,98,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  /* The page never scrolls — the two panes do. A flex column rather than a
     calc() against a guessed toolbar height, which breaks the moment the
     toolbar wraps to a second line. */
  height:100vh; overflow:hidden; display:flex; flex-direction:column;
}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal-l); outline-offset:2px}

/* ───────── bar ───────── */
.bar{
  flex:none; min-height:var(--bar-h); display:flex; align-items:center;
  gap:.6rem .55rem; flex-wrap:wrap; padding:.35rem 1rem;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.wordmark{font-family:var(--serif); font-size:1.45rem; font-weight:600; line-height:1; margin-right:.2rem}
.pick{
  border:1px solid var(--line2); background:var(--paper); border-radius:7px;
  padding:.26rem .5rem; font-size:.79rem; color:var(--mut); max-width:11rem;
}
.pick:hover{border-color:var(--teal-l)}
#kind{max-width:15rem}
.reviewer{width:8.5rem; color:var(--ink)}
.filters{display:flex; align-items:center; gap:.4rem}
.toggle{display:flex; align-items:center; gap:.3rem; font-size:.75rem; color:var(--mut); cursor:pointer; user-select:none; white-space:nowrap}
.toggle input{accent-color:var(--teal)}
.prog{display:flex; align-items:center; gap:.5rem; margin-left:auto; min-width:11rem}
.prog-track{flex:1; height:4px; background:var(--line); border-radius:99px; overflow:hidden}
.prog-fill{height:100%; width:0; background:var(--teal); transition:width .25s ease}
.prog-text{font-size:.72rem; color:var(--mut); white-space:nowrap; font-variant-numeric:tabular-nums}
.help-btn{
  width:1.75rem; height:1.75rem; flex:none; border-radius:50%; border:1px solid var(--line2);
  background:var(--paper); color:var(--mut); font-weight:700; line-height:1;
}
.help-btn:hover{border-color:var(--teal-l); color:var(--teal)}

/* ───────── two panes, full height ───────── */
/* min-height:0 all the way down. Without it a flex/grid child defaults to
   min-height:auto, grows to its content instead of shrinking, and the
   overflow-y:auto below never engages — the messages render but you cannot
   scroll to them. */
#app{
  flex:1; min-height:0;
  display:grid; grid-template-columns:23rem 1fr;
}

/* ───────── the claim ───────── */
.panel{
  border-right:1px solid var(--line); background:var(--cream);
  padding:1.15rem 1.15rem 1rem; overflow-y:auto; min-height:0;
  display:flex; flex-direction:column; gap:.55rem;
}
.p-top{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap}
.p-kind{
  flex-basis:100%; font-size:.86rem; font-weight:600; color:var(--teal);
  line-height:1.3; margin-top:.15rem;
}
.p-kind.ours::before{content:'⌁ '; opacity:.7}

.p-who{font-size:.8rem; color:var(--mut)}
.p-who b{color:var(--ink); font-weight:600; font-size:.92rem}
.p-title{font-family:var(--serif); font-size:1.55rem; font-weight:600; line-height:1.18; margin:.1rem 0 0; text-wrap:balance}
.p-line{font-size:.86rem; color:var(--mut); margin:0}
.p-quote{
  font-family:var(--serif); font-style:italic; font-size:1.12rem; line-height:1.38;
  border-left:2px solid var(--line2); padding-left:.7rem; margin:.15rem 0 0;
}
.panel.ours .p-quote{border-left-color:var(--teal-l); color:var(--teal-d)}
.p-pills{display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.1rem}
.pill{
  font-size:.63rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line2); border-radius:5px; padding:0 .35rem;
}
.pill.stated  {color:var(--good); border-color:var(--good)}
.pill.implied {color:var(--teal-l); border-color:var(--teal-l)}
.pill.inferred{color:var(--med); border-color:var(--med)}
.pill.repeat{color:var(--high); border-color:var(--high)}
.p-said{font-size:.72rem; color:var(--dim)}

/* verdict block pinned to the bottom of the panel */
.p-acts{margin-top:auto; padding-top:1rem; display:flex; flex-direction:column; gap:.4rem}
.p-row{display:flex; gap:.4rem}
.act{
  flex:1; border:1px solid var(--line2); background:var(--paper); color:var(--mut);
  border-radius:8px; padding:.5rem .45rem; font-size:.78rem; font-weight:600;
  line-height:1.25; text-align:center; transition:.12s;
  display:flex; align-items:center; justify-content:center; gap:.35rem; flex-wrap:wrap;
}
.act:hover{border-color:var(--teal-l); color:var(--teal)}
.act kbd{
  font:inherit; font-size:.64rem; opacity:.55;
  border:1px solid currentColor; border-radius:3px; padding:0 .22rem;
}
.act.noise.on {background:var(--high); border-color:var(--high); color:#fff}
.act.useful.on{background:var(--good); border-color:var(--good); color:#fff}
.act.known.on {background:var(--teal); border-color:var(--teal); color:#fff}
.note{
  border:1px solid var(--line2); background:var(--paper); border-radius:8px;
  padding:.4rem .6rem; font-size:.8rem; width:100%;
}
.note:focus{outline:none; border-color:var(--teal-l)}
.nav{display:flex; justify-content:space-between; font-size:.7rem; color:var(--dim); padding-top:.1rem}
.nav kbd{border:1px solid var(--line2); border-radius:3px; padding:0 .22rem; font-size:.66rem}

/* ───────── the conversation ───────── */
.chat-wrap{
  position:relative; display:flex; flex-direction:column;
  min-width:0; min-height:0; overflow:hidden; background:var(--wa-paper);
}
.chat-head{
  flex:none; display:flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; background:#f0f2f5; border-bottom:1px solid #d8dbdd;
  font-size:.82rem; color:var(--mut);
}
.chat-head b{color:var(--ink); font-size:.9rem}
.chat-head .count{margin-left:auto; font-size:.72rem; color:var(--dim)}

.chat{flex:1; min-height:0; overflow-y:auto; padding:.9rem 1.1rem 2.5rem; scroll-behavior:smooth}
.chat-day{display:flex; justify-content:center; margin:.55rem 0 .7rem}
.chat-day span{
  background:#e1d7cb; color:#5b5245; font-size:.65rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:.16rem .6rem; border-radius:6px;
}
.chat-day.now span{background:var(--teal); color:#fff}

/* Every message is three parts — an avatar, a name with a clock, and the
   bubble — which is what oyster's own console shows. A reviewer moving between
   the two consoles should be reading the same object, not translating. faff
   still mirrors to the right, because this is still a WhatsApp thread. */
.bub-row{display:flex; gap:.4rem; margin-bottom:.45rem; align-items:flex-start}
.bub-row.faff{flex-direction:row-reverse}
.bub-row.customer{flex-direction:row}
.bub-av{
  flex:none; width:1.6rem; height:1.6rem; margin-top:1rem; border-radius:50%;
  display:grid; place-items:center; font-size:.55rem; font-weight:700;
  background:#dfd6c9; color:#6b6152;
}
.bub-av.oy{background:var(--teal); color:#fff; letter-spacing:.03em}
.bub-col{display:flex; flex-direction:column; min-width:0; max-width:min(34rem,82%)}
.bub-row.faff .bub-col{align-items:flex-end}
.bub-head{
  display:flex; gap:.4rem; align-items:baseline; padding:0 .2rem .1rem; font-size:.62rem;
  color:var(--dim);
}
.bub-head b{font-size:.66rem; font-weight:700; color:var(--teal)}
.bub-row.customer .bub-head b{color:#8a5a2b}
.bub{
  max-width:100%; padding:.34rem .55rem .26rem; border-radius:8px;
  box-shadow:0 1px .5px rgba(0,0,0,.13); font-size:.87rem; line-height:1.4;
  display:flex; flex-direction:column; transition:box-shadow .2s;
}
.bub-row.customer .bub{background:var(--wa-in);  border-top-left-radius:2px}
.bub-row.faff     .bub{background:var(--wa-out); border-top-right-radius:2px}
/* An oyster message is also the way into the turn behind it — the whole bubble,
   as in oyster's own console, not just the line underneath it. */
.bub-row.agent .bub{cursor:pointer}
.bub-row.agent .bub:hover{background:#cdf7c4}
.bub-row.agent .bub:focus-visible{outline:2px solid var(--teal-l); outline-offset:1px}

/* the message under review — ringed, not recoloured, so it still reads as a
   message rather than a UI element */
.bub.cited{box-shadow:0 0 0 2px var(--med), 0 2px 6px rgba(201,154,30,.3)}
.bub.cited.pulse{animation:pulse 1.1s ease-out 2}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 2px var(--med), 0 2px 6px rgba(201,154,30,.3)}
  50%    {box-shadow:0 0 0 5px rgba(201,154,30,.35), 0 2px 10px rgba(201,154,30,.4)}
}

.bub-reply{
  border-left:3px solid var(--teal-l); background:rgba(0,0,0,.045); border-radius:4px;
  padding:.18rem .4rem; margin-bottom:.2rem; font-size:.75rem; color:#5b5245;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bub-body{white-space:pre-wrap; word-break:break-word; color:#111b21}
/* the customer's own words, in the serif, as everywhere else */
.bub-row.customer .bub-body{font-family:var(--serif); font-size:1.05rem; line-height:1.4}

/* What the turn behind an oyster message cost to produce, and the way in. */
.bub-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  padding:.16rem .25rem 0; font-size:.6rem; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.bub-why{
  font-family:var(--sans); font-size:.6rem; font-weight:600; color:var(--teal);
  background:var(--paper); border:1px solid var(--line2); border-radius:99px;
  padding:.06rem .45rem; line-height:1.5;
}
.bub-why:hover{background:var(--teal); border-color:var(--teal); color:#fff}

/* flags living on the conversation itself: what else Drona caught in this
   chat, what reviewers say it missed, and the way to say so */
.bub{position:relative}
.bub-flag{
  align-self:flex-start; margin:.28rem 0 .05rem; font-size:.66rem; font-weight:600;
  font-family:var(--sans); border-radius:99px; padding:.14rem .55rem; border:1px solid;
  line-height:1.3; text-align:left;
}
button.bub-flag{cursor:pointer}
.bub-flag.also{background:var(--teal-wash); border-color:var(--teal-l); color:var(--teal-d)}
button.bub-flag.also:hover{background:var(--teal); border-color:var(--teal); color:#fff}
.bub-flag.missed{background:var(--med-wash); border-color:var(--med); color:#7a5c10}
.miss-x{border:0; background:none; cursor:pointer; color:inherit; padding:0 0 0 .35rem; font-size:.7rem; line-height:1}
.miss-x:hover{color:var(--high)}
.bub-miss{
  position:absolute; right:.3rem; top:-.7rem; display:none; font-family:var(--sans);
  font-size:.6rem; font-weight:600; color:var(--mut); background:var(--paper);
  border:1px solid var(--line2); border-radius:99px; padding:.12rem .5rem;
  cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.14); white-space:nowrap; z-index:2;
}
.bub-row:hover .bub-miss{display:block}
.bub-miss:hover{color:var(--teal); border-color:var(--teal-l)}

.miss-acts{display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem}
.btn.ghost{background:none; color:var(--mut); border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--paper2); color:var(--ink)}
#missQuote{margin:.2rem 0 .9rem}
#miss .cat-list{margin-bottom:1rem}
.trunc{
  font-size:.64rem; color:#7d7364; text-align:center; padding:.35rem 0;
  letter-spacing:.09em; text-transform:uppercase; margin:0;
}

.recenter{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  background:var(--teal); color:#fff; border:none; border-radius:99px;
  padding:.42rem 1rem; font-size:.78rem; font-weight:600;
  box-shadow:0 4px 14px rgba(1,84,98,.28); display:flex; align-items:center; gap:.4rem;
}
.recenter kbd{border:1px solid rgba(255,255,255,.5); border-radius:3px; padding:0 .22rem; font-size:.66rem}
.recenter[hidden]{display:none}

/* ───────── empty / help / toast ───────── */
.blank{
  grid-column:1 / -1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; color:var(--mut); background:var(--cream);
}
.blank h2{font-family:var(--serif); font-size:2rem; margin:0; color:var(--ink)}

.sheet{position:fixed; inset:0; z-index:60; background:rgba(22,40,44,.4); display:grid; place-items:center; padding:1.5rem}
.sheet[hidden]{display:none}
.sheet-inner{background:var(--paper); border-radius:14px; padding:1.6rem 1.8rem; max-width:27rem; box-shadow:0 20px 50px rgba(1,84,98,.22)}
.sheet-inner h2{font-family:var(--serif); font-size:1.7rem; margin:0 0 .4rem}
.sheet-inner p{color:var(--mut); font-size:.87rem; margin:0 0 1rem}
.sheet-inner dl{display:flex; flex-direction:column; gap:.4rem; margin:0 0 1.1rem}
.sheet-inner dl > div{display:flex; gap:.8rem; align-items:baseline}
.sheet-inner dt{flex:none; width:2rem; text-align:center; font-size:.72rem; font-weight:700; border:1px solid var(--line2); border-radius:5px; background:var(--paper2); padding:.08rem 0}
.sheet-inner dd{margin:0; font-size:.87rem; color:var(--mut)}
.sheet-foot{font-size:.8rem!important}
.sheet-foot em{color:var(--ink); font-style:normal; font-weight:600}
.btn{background:var(--teal); color:#fff; border:none; border-radius:8px; padding:.45rem 1.1rem; font-size:.85rem; font-weight:600}
.btn:hover{background:var(--teal-d)}

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem);
  background:var(--teal-d); color:#fff; padding:.5rem 1.05rem; border-radius:99px;
  font-size:.82rem; opacity:0; pointer-events:none; transition:.2s; z-index:70;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:900px){
  body{overflow:auto}
  #app{grid-template-columns:1fr; height:auto}
  .panel{border-right:none; border-bottom:1px solid var(--line)}
  .chat{height:60vh}
  .filters{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto; animation:none!important}}

/* ───────── categories ───────── */
.cats{margin-top:.35rem}
.cats-head{display:flex; flex-direction:column; gap:.1rem; margin-bottom:.4rem}
.cats-head > span:first-child{
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.cats-hint{font-size:.72rem; color:var(--dim); line-height:1.3}
.cats-hint.changed{color:var(--med); font-weight:600}

.cat-list{display:flex; flex-direction:column; gap:.25rem}
.cat{
  text-align:left; border:1px solid var(--line2); background:var(--paper);
  color:var(--mut); border-radius:7px; padding:.32rem .55rem;
  font-size:.78rem; font-weight:500; line-height:1.25; transition:.12s;
  display:flex; align-items:center; gap:.45rem;
}
.cat::before{
  content:''; flex:none; width:.85rem; height:.85rem; border-radius:50%;
  border:1.5px solid var(--line2); background:var(--paper); transition:.12s;
}
.cat kbd{
  margin-left:auto; font:inherit; font-size:.64rem; opacity:.5;
  border:1px solid currentColor; border-radius:3px; padding:0 .22rem;
}
.cat:hover{border-color:var(--teal-l); color:var(--teal)}
.cat.on{border-color:var(--teal); background:var(--teal-wash); color:var(--teal-d); font-weight:600}
.cat.on::before{
  background:var(--teal); border-color:var(--teal);
  box-shadow:inset 0 0 0 3px var(--paper);
}
.cat.on kbd{opacity:.8}

/* the reasoning box, revealed only when the label set stops matching Drona's */
.why{display:flex; flex-direction:column; gap:.25rem}
.why[hidden]{display:none}
.why label{font-size:.72rem; font-weight:600; color:var(--mut)}
.why label span{font-weight:400; color:var(--dim)}
.why label.needed{color:var(--med)}
.why label .req{
  color:var(--med); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.62rem;
}
textarea.note{resize:vertical; min-height:2.6rem; font-family:inherit}

/* ═════════ home: the day as four decisions ═════════ */
body.home{overflow:hidden}
.board-wrap{flex:1; min-height:0; display:flex; flex-direction:column; padding:1rem 1.25rem 0}
.day-line{
  font-size:.9rem; color:var(--mut); padding-bottom:.85rem; flex:none;
}
.day-line .big{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink)}
.day-line b{color:var(--teal); font-weight:600}

.board{
  flex:1; min-height:0; display:grid; gap:.85rem;
  grid-template-columns:repeat(4, minmax(0,1fr)); padding-bottom:1rem;
}
.col{
  display:flex; flex-direction:column; min-height:0;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  border-top:3px solid var(--line2); overflow:hidden;
}
.col.escalations{border-top-color:var(--high)}
.col.hiccups    {border-top-color:var(--med)}
.col.wins       {border-top-color:var(--good)}
.col.ideas      {border-top-color:var(--teal-l)}

.col-head{flex:none; padding:.8rem .85rem .65rem; border-bottom:1px solid var(--line)}
.col-title{display:flex; align-items:baseline; gap:.5rem}
.col-title h2{font-family:var(--serif); font-size:1.35rem; font-weight:600; margin:0}
.col-n{
  font-size:.8rem; font-weight:700; color:var(--mut); font-variant-numeric:tabular-nums;
  background:var(--paper2); border-radius:20px; padding:.05rem .5rem;
}
.col-blurb{font-size:.76rem; color:var(--dim); margin:.25rem 0 .5rem; line-height:1.35}
.col-go{
  display:inline-block; font-size:.76rem; font-weight:600; color:var(--teal);
  text-decoration:none; border:1px solid var(--line2); border-radius:7px; padding:.2rem .6rem;
}
.col-go:hover{border-color:var(--teal); background:var(--teal-wash)}

.col-list{flex:1; min-height:0; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.4rem}
.col-empty{font-size:.8rem; color:var(--dim); text-align:center; padding:1.5rem .5rem; margin:0}

.case{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:8px;
  padding:.45rem .55rem; background:var(--paper); transition:.12s;
}
.case:hover{border-color:var(--teal-l); box-shadow:var(--shadow); transform:translateX(1px)}
.case.done{opacity:.45}
.case.done:hover{opacity:1}

.case-top{display:flex; align-items:center; gap:.4rem}
.case-who{font-size:.74rem; font-weight:600; color:var(--mut); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.case-tick{font-size:.7rem; font-weight:700}
.case-tick.yes{color:var(--good)}
.case-tick.no{color:var(--high)}
.case-title{font-size:.83rem; font-weight:600; line-height:1.3; margin:.1rem 0}
.case-kind{font-size:.7rem; color:var(--teal); line-height:1.25}

/* back link + scope chip on the reviewer */
.back{
  text-decoration:none; color:var(--mut); font-size:1.1rem; line-height:1;
  border:1px solid var(--line2); border-radius:7px; padding:.15rem .45rem;
}
.back:hover{border-color:var(--teal-l); color:var(--teal)}
.scope{
  font-size:.73rem; font-weight:600; color:var(--teal); background:var(--teal-wash);
  border-radius:20px; padding:.15rem .6rem;
}
.scope:empty{display:none}

@media (max-width:1100px){
  .board{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:640px){
  body.home{overflow:auto}
  .board{grid-template-columns:1fr; }
  .col{max-height:26rem}
}
.empty{
  grid-column:1 / -1; text-align:center; padding:4rem 1rem; margin:0;
  font-family:var(--serif); font-size:1.5rem; color:var(--mut);
}

/* ═════════ sign in ═════════ */
body.signin{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; overflow:auto; padding:2rem 1.25rem;
}
.signin-card{
  width:100%; max-width:23rem; background:var(--paper);
  border:1px solid var(--line); border-radius:14px;
  padding:2rem 1.9rem; box-shadow:0 12px 40px rgba(1,84,98,.08);
}
.wordmark.big{font-size:2.4rem; margin:0; line-height:1}
.signin-blurb{font-size:.85rem; color:var(--mut); margin:.5rem 0 1.4rem; line-height:1.45}
.signin-card form{display:flex; flex-direction:column; gap:.3rem}
.signin-card label{
  font-size:.7rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin-top:.6rem;
}
.signin-card input{
  border:1px solid var(--line2); border-radius:8px; padding:.5rem .65rem;
  font-size:.92rem; background:var(--paper2);
}
.signin-card input:focus{outline:none; border-color:var(--teal-l); background:var(--paper)}
.signin-error{
  background:var(--high-wash); color:var(--high); border-radius:7px;
  padding:.4rem .6rem; font-size:.8rem; margin:.8rem 0 0;
}
.signin-error[hidden]{display:none}
.btn.wide{width:100%; margin-top:1.1rem; padding:.6rem}
.btn:disabled{opacity:.6; cursor:default}

/* who is signed in, in the toolbar */
.reports{margin-left:auto}
.whoami{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--mut)}
.whoami b{color:var(--ink); font-weight:600}
.signout{
  border:1px solid var(--line2); background:var(--paper); color:var(--dim);
  border-radius:7px; padding:.16rem .5rem; font-size:.72rem; font-weight:600;
}
.signout:hover{border-color:var(--high); color:var(--high)}

/* ───────── what another reviewer decided ───────── */
.p-others{
  border:1px solid var(--line2); border-radius:9px; background:var(--paper);
  padding:.55rem .65rem; margin-top:.2rem;
}
.p-others-head{
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.35rem;
}
.p-other + .p-other{margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--line)}
.p-other-who{font-size:.76rem; font-weight:700; color:var(--ink); margin-right:.35rem}
.p-other-verdict{font-size:.7rem; font-weight:600}
.p-other-verdict.yes{color:var(--good)}
.p-other-verdict.no{color:var(--high)}
.p-other-moved{
  font-size:.65rem; font-weight:600; color:var(--teal); background:var(--teal-wash);
  border-radius:4px; padding:.05rem .35rem; margin-left:.35rem; white-space:nowrap;
}
.p-other-note{
  font-family:var(--serif); font-size:1rem; font-style:italic; line-height:1.35;
  color:var(--mut); margin-top:.2rem;
}

/* on the board: initials mean somebody else has looked, and it is still yours */
.case-seen{
  font-size:.6rem; font-weight:700; letter-spacing:.03em; color:var(--mut);
  background:var(--paper2); border:1px solid var(--line2);
  border-radius:20px; padding:.02rem .3rem;
}
.scope-toggle{
  margin-left:.9rem; border:1px solid var(--line2); background:var(--paper);
  color:var(--teal); border-radius:20px; padding:.14rem .6rem;
  font-size:.74rem; font-weight:600;
}
.scope-toggle:hover{border-color:var(--teal); background:var(--teal-wash)}

/* an attachment, shown as what it contained rather than as a placeholder */
.bub-media{
  background:rgba(0,0,0,.05); border-radius:6px; padding:.3rem .45rem;
  margin-bottom:.2rem; font-size:.78rem; color:#3b4a54; line-height:1.35;
}
.bub-media-kind{
  display:block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--teal); margin-bottom:.1rem;
}
.bub-media-open{font-weight:600; text-transform:none; letter-spacing:0; color:var(--teal-l)}
.bub-audio{display:block; width:16rem; max-width:100%; height:2.1rem; margin-top:.3rem}

/* ───────── Dumbledore's RCA ─────────
   Sits directly above the reviewer's own RCA box, because that is the order the
   work happens in: read what Dumbledore found, then write down the conclusion
   and who owns it. Same margin-note voice as the rest of the panel — one design
   system, not two. */
.dumb{
  display:flex; flex-direction:column; gap:.45rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--line);
}
.dumb-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  font-size:.72rem; font-weight:600; color:var(--mut)}
.dumb-hint{font-weight:400; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums}
.dumb-hint.ok{color:var(--teal)}
.dumb-hint.bad{color:var(--high)}
.dumb-hint.working{color:var(--med); font-weight:600}
.dumb-acts{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.dumb-run{padding:.35rem .8rem; font-size:.78rem}
.dumb-run:disabled{opacity:.55; cursor:default}
.dumb-toggle{
  border:1px solid var(--line2); background:var(--paper); color:var(--mut);
  border-radius:7px; padding:.28rem .6rem; font-size:.74rem; font-weight:600;
  display:flex; align-items:center; gap:.35rem;
}
.dumb-toggle:hover{border-color:var(--teal-l); color:var(--teal)}
.dumb-toggle[hidden]{display:none}
.dumb-toggle .caret{font-size:.7rem; opacity:.7}
.dumb-panel{
  border:1px solid var(--line2); border-radius:9px; background:var(--paper);
  padding:.6rem .7rem; max-height:26rem; overflow-y:auto;
}
.dumb-panel[hidden]{display:none}

/* the reviewer's note on the answer — the Your RCA box exactly, pulled in
   tighter because it hangs off the Dumbledore block rather than off the panel.
   display:none by hand: .rca-box sets display:flex, which outranks [hidden]. */
.dumb-fb{margin-top:.35rem; padding-top:.7rem}
.dumb-fb[hidden]{display:none}

/* the wait, which is most of the experience */
.dumb-wait p{font-size:.76rem; color:var(--mut); margin:.5rem 0 0; line-height:1.4}
.dumb-small{font-size:.7rem!important; color:var(--dim)!important}
.dumb-small.warn{color:var(--med)!important}
.dumb-bar{height:3px; border-radius:99px; background:var(--line); overflow:hidden}
.dumb-bar span{
  display:block; width:35%; height:100%; background:var(--med); border-radius:99px;
  animation:crawl 1.9s ease-in-out infinite;
}
/* waiting its turn reads slower and quieter than actually investigating */
.dumb-bar.queued span{background:var(--dim); animation-duration:3.4s}
@keyframes crawl{
  0%{transform:translateX(-100%)} 100%{transform:translateX(300%)}
}
.dumb-error{font-size:.78rem; color:var(--high)}
.dumb-error b{display:block; margin-bottom:.2rem}
.dumb-error p{margin:0; color:var(--mut); line-height:1.4}

/* the answer itself, in its fixed shape */
.rca-md{font-size:.8rem; line-height:1.5; color:var(--ink)}
.rca-md p{margin:.3rem 0}
.rca-md code{background:var(--paper2); border-radius:4px; padding:0 .25rem; font-size:.74rem}
.rca-h{
  font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin:.85rem 0 .25rem; padding-top:.5rem;
  border-top:1px solid var(--line);
}
.rca-h:first-child{margin-top:0; padding-top:0; border-top:none}
.rca-h.answer{color:var(--teal); font-size:.65rem}
.rca-h.responsible,.rca-h.fix{color:var(--good)}
.rca-h.gaps,.rca-h.caveats{color:var(--med)}
/* the chain is evidence, one step at a time — never a paragraph */
.rca-md ol,.rca-md ul{margin:.25rem 0; padding-left:1.15rem; display:flex;
  flex-direction:column; gap:.3rem}
.rca-md li{padding-left:.1rem}
.rca-md .src{
  display:inline-block; margin-left:.3rem; font-size:.66rem; font-weight:600;
  color:var(--teal-d); background:var(--teal-wash); border-radius:4px; padding:0 .3rem;
}
/* the WHY ladder: a → b → c, one rung per line */
.rca-ladder{display:flex; flex-direction:column; gap:.15rem; margin:.3rem 0}
.rca-ladder span{position:relative; padding-left:.9rem; font-size:.78rem; color:var(--mut)}
.rca-ladder span + span::before{
  content:'↳'; position:absolute; left:0; color:var(--teal-l);
}
.rca-ladder span:first-child{color:var(--ink); font-weight:600; padding-left:0}

.rca-box{
  display:flex; flex-direction:column; gap:.4rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--line);
}
.rca-head{display:flex; justify-content:space-between; align-items:baseline;
  font-size:.72rem; font-weight:600; color:var(--mut)}
.rca-hint{font-weight:400; color:var(--dim)}
.rca-hint.ok{color:var(--teal)}
.rca-hint.warn{color:var(--med)}
/* The two answers an RCA gives, and they look like two things because they
   are: which SERVICE failed, picked off the vocabulary, and WHO owns the fix,
   typed as a name.

   The category is a dropdown of checkboxes rather than sixteen chips in the
   page: sixteen chips are taller than the RCA box they sit in, and a control
   that takes any number of answers reads better closed with its answer on the
   line than open all the time. <details>/<summary> and real checkboxes, so it
   opens on Enter and walks on Tab with nothing written for either. Borders,
   radius and the open/closed caret are the ones .why already uses; the rows
   inside are the .cat picker's wash and weight, so nothing new is introduced.

   The name boxes are .note's border and radius on one line, because they are
   the same kind of thing the RCA text is: something somebody wrote. */
.rp{display:flex; flex-direction:column; gap:.3rem}
.rp-head{font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim)}
.rp-head span{font-weight:400; letter-spacing:0; text-transform:none}

.rp-drop{border:1px solid var(--line2); border-radius:8px; background:var(--paper)}
.rp-drop > summary{
  list-style:none; cursor:pointer; padding:.34rem .55rem;
  font-size:.78rem; color:var(--mut); display:flex; gap:.4rem;
}
.rp-drop > summary::-webkit-details-marker{display:none}
.rp-drop > summary::after{content:"▾"; margin-left:auto; color:var(--dim)}
.rp-drop[open] > summary::after{content:"▴"}
.rp-drop > summary:hover{color:var(--teal)}
.rp-drop[open]{border-color:var(--teal-l)}
/* Sixteen rows is more than an RCA box should grow by, so the menu scrolls
   inside itself rather than pushing the verdict buttons off the panel. */
.rp-menu{
  max-height:14rem; overflow-y:auto; padding:.25rem;
  display:flex; flex-direction:column; gap:.15rem;
  border-top:1px solid var(--line);
}
.rp-item{
  display:flex; align-items:baseline; gap:.45rem; cursor:pointer;
  padding:.26rem .4rem; border-radius:6px; font-size:.76rem; color:var(--mut);
}
.rp-item:hover{background:var(--teal-wash); color:var(--teal-d)}
.rp-item input{flex:none; accent-color:var(--teal); align-self:center}
.rp-item-name{font-weight:600; white-space:nowrap}
/* The meaning is here rather than only on title=, because the distinctions
   that matter -- QA is not Faffers -- only survive if they are readable at the
   moment somebody picks. Truncated: it is help, not a paragraph. */
.rp-item-means{
  font-size:.7rem; color:var(--dim); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.rp-item input:checked ~ .rp-item-name{color:var(--teal-d)}

.rp-names{display:flex; gap:.35rem; flex-wrap:wrap}
.rp-name{
  flex:1 1 8rem; min-width:0; border:1px solid var(--line2);
  background:var(--paper); border-radius:8px; padding:.3rem .55rem;
  font-size:.78rem;
}
.rp-name:focus{outline:none; border-color:var(--teal-l)}
.rp-name::placeholder{color:var(--dim)}
.rca-save{align-self:flex-start; padding:.35rem .8rem; font-size:.78rem}

/* ───────── what the thread cannot show ─────────
   Everything oyster was fed, everything it did about it, and the turns that
   produced no message at all. Centred, quiet and narrower than the bubbles:
   these are the record beside the conversation, never part of it. */
.sys{
  display:flex; align-items:center; gap:.4rem; margin:.25rem auto .4rem;
  max-width:min(38rem,88%); padding:.22rem .55rem; font-size:.68rem;
  border:1px solid var(--line2); border-radius:8px;
  background:rgba(255,255,255,.7); color:var(--mut);
}
.sys[data-turn]{cursor:pointer}
.sys[data-turn]:hover{background:#fff; border-color:var(--teal-l)}
.sys .dt{flex:none; width:.4rem; height:.4rem; border-radius:50%; background:var(--dim)}
.sys .tag{
  flex:none; font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
.sys-body{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sys.in .dt{background:#3b7bb5}
.sys.in .tag{color:#2f6390}
.sys.act .dt{background:var(--good)}
.sys.act .tag{color:var(--good)}
.sys.warn .dt{background:var(--med)}
.sys.warn .tag{color:#7a5c10}
.sys.bad{background:var(--high-wash); border-color:#e6bdb7}
.sys.bad .dt{background:var(--high)}
.sys.bad .tag{color:var(--high)}
.sys.mute{opacity:.72}
.sys.mute .tag{color:var(--dim)}

.agent-count{color:var(--teal)}
.agent-warn{color:#7a5c10; border-bottom:1px dotted #c9a227; cursor:help}

/* ───────── the turn behind a message ─────────
   A drawer rather than a page: the conversation stays where it was, and Esc
   puts you back in it. Everything in here is read-only. */
.drawer-scrim{position:fixed; inset:0; z-index:70; background:rgba(22,40,44,.35)}
.drawer-scrim[hidden]{display:none}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(46rem,94vw);
  display:flex; flex-direction:column; background:var(--cream);
  border-left:1px solid var(--line2); box-shadow:-10px 0 34px rgba(1,84,98,.2);
}
.drawer[hidden]{display:none}
.drawer-bar{
  flex:none; display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.drawer-bar b{font-size:.85rem}
.drawer-hint{margin-left:auto; font-size:.66rem; color:var(--dim)}
.drawer-hint kbd{border:1px solid var(--line2); border-radius:3px; padding:0 .22rem}
.drawer-close{border:0; background:none; font-size:1.4rem; line-height:1; color:var(--mut); padding:0 .2rem}
.drawer-close:hover{color:var(--ink)}
.drawer-body{flex:1; min-height:0; overflow-y:auto; padding:1rem 1.1rem 4rem; font-size:.8rem}
.drawer-none{color:var(--dim); font-size:.75rem; margin:.3rem 0}
.drawer-bad{
  background:var(--high-wash); border:1px solid #e6bdb7; border-left:3px solid var(--high);
  border-radius:6px; padding:.5rem .7rem; color:#7c2f26; margin:.4rem 0; font-size:.75rem;
}
.drawer-warn{
  background:var(--med-wash); border:1px solid #e8d49a; border-left:3px solid var(--med);
  border-radius:6px; padding:.5rem .7rem; color:#7a5c10; margin:.4rem 0; font-size:.75rem;
}
.drawer .soft{color:var(--dim)}
.drawer .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.drawer .num{font-variant-numeric:tabular-nums}
.drawer .grow{flex:1}
.drawer .ext{color:var(--teal-l); text-decoration:none; white-space:nowrap}
/* Story links sit inside reasoning and JSON, often several to a paragraph, so
   they read as an annotation on the token before them rather than as prose. */
.drawer .ext.story{
  font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.02em;
  background:var(--teal-wash); border-radius:99px; padding:.02rem .32rem;
}
.drawer .ext.story:hover{background:var(--teal); color:#fff; text-decoration:none}
.drawer .ext:hover{text-decoration:underline}

.tsec{
  margin:1.3rem 0 .45rem; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut);
}
.tsub{margin:1rem 0 .4rem; font-size:.7rem; font-weight:600; color:var(--mut)}
.tcard{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.3rem .7rem}
.tcard-hd{
  display:flex; justify-content:space-between; align-items:center;
  padding:.4rem 0 .35rem; border-bottom:1px solid var(--line);
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mut);
}
.tcard-hd .st{font-size:.6rem; padding:.1rem .45rem; border-radius:99px; background:var(--low-wash); color:var(--mut)}
.tcard-hd .st.delivered{background:#e4f4ee; color:var(--good)}
.tcard-hd .st.failed{background:var(--high-wash); color:var(--high)}
.kv{display:grid; grid-template-columns:11rem 1fr; gap:.7rem; padding:.35rem 0; border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{font-size:.68rem; color:var(--mut)}
.kv .v{min-width:0; font-size:.76rem; word-break:break-word}
.blob{
  background:var(--paper2); border:1px solid var(--line); border-radius:8px;
  padding:.6rem .7rem; margin:0 0 .5rem; font-size:.74rem; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; max-height:26rem; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.blob.said{background:var(--wa-out); border-color:#bfe6b4; font-family:var(--sans); font-size:.8rem}

/* the evidence chain: one card per step, on a spine, in the order it happened */
.chain{position:relative; padding-left:1.1rem}
.chain::before{content:''; position:absolute; left:.22rem; top:.4rem; bottom:.4rem; width:1px; background:var(--line2)}
.ev{position:relative; margin-bottom:.5rem}
.ev .pin{
  position:absolute; left:-1.1rem; top:.75rem; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--teal-l); border:2px solid var(--cream);
}
.ev .bd{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--teal-l); border-radius:8px; padding:.45rem .6rem}
.ev .lbl{
  display:inline-block; margin-bottom:.25rem; font-size:.6rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-d);
}
.ev .meta{float:right; font-size:.65rem; color:var(--dim); font-variant-numeric:tabular-nums}
.ev pre{
  margin:.25rem 0 0; font-size:.68rem; color:var(--mut); white-space:pre-wrap;
  word-break:break-word; max-height:13rem; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ev pre.bad{color:var(--high)}
.ev pre.result{border-top:1px solid var(--line); padding-top:.35rem; margin-top:.35rem}
.ev .think{font-style:italic; color:var(--mut); white-space:pre-wrap}
.ev .say{white-space:pre-wrap}

/* the langfuse panel: deliberately plainer than the chain above it — the chain
   is the story, this is the instrument reading */
.tp{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.55rem .75rem}
.thead{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding-bottom:.45rem; border-bottom:1px solid var(--line)}
.thead .ext{margin-left:auto}
.tg{font-size:.6rem; background:var(--teal-wash); color:var(--teal-d); border-radius:99px; padding:.05rem .4rem}
.tstep{border-top:1px solid var(--line); padding:.4rem 0}
.th2{display:flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.72rem}
.th2 b{font-weight:600}
.tt{font-size:.55rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); background:var(--paper2); border-radius:4px; padding:.05rem .3rem}
.tt.GENERATION{background:var(--teal-wash); color:var(--teal-d)}
.lvl{font-size:.6rem; color:var(--high)}
.tbar{position:relative; height:.28rem; margin:.25rem 0; background:var(--paper2); border-radius:99px}
.tbar i{position:absolute; top:0; height:100%; background:var(--teal-l); border-radius:99px}
.tmeta{font-size:.62rem; color:var(--dim); font-variant-numeric:tabular-nums}
.tmeta.bad{color:var(--high)}
.tdet{margin-top:.5rem}
.ph{display:flex; align-items:center; gap:.5rem; margin:.5rem 0 .25rem; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
.tlink{border:0; background:none; color:var(--teal-l); font-size:.62rem; text-decoration:underline; padding:0}
.msg{border:1px solid var(--line); border-radius:8px; margin-bottom:.4rem; overflow:hidden}
.msg .mh{background:var(--paper2); padding:.22rem .5rem; font-size:.62rem; color:var(--mut); border-bottom:1px solid var(--line)}
.msg .mb{padding:.4rem .5rem; font-size:.72rem; white-space:pre-wrap; word-break:break-word; max-height:22rem; overflow:auto}
.blk{
  border-left:3px solid var(--line2); padding:.2rem .5rem; margin:.3rem 0; font-size:.7rem;
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.blk.think{font-style:italic; color:var(--mut); border-left-color:var(--med)}
.blk .bt{display:block; font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-d); font-family:var(--sans)}


/* ── the two daily reports, from the header ──────────────────────────────── */
/* They sat behind URLs nobody had for a day. A report nobody can find is a
   report nobody reads. Shaped like .pick, because they belong to the day
   selector beside them. */
.reports{display:flex; gap:.4rem; align-items:center}
.reports a{
  border:1px solid var(--line2); background:var(--paper); border-radius:7px;
  padding:.26rem .6rem; font-size:.79rem; color:var(--mut); text-decoration:none;
  white-space:nowrap; transition:border-color .12s, color .12s;
}
.reports a:hover{border-color:var(--teal-l); color:var(--teal)}
@media (max-width:760px){.reports{display:none}}


/* ── why a flag exists ───────────────────────────────────────────────────── */
/* The model's reason, the gate's verdict and the rule that set the severity.
   Closed by default: the common case is a five-second verdict, and this is for
   the flag you want to argue with. */
.why{margin:.6rem 0 0; border:1px solid var(--line); border-radius:8px;
  background:var(--paper2)}
.why > summary{list-style:none; cursor:pointer; padding:.4rem .65rem;
  font-size:.76rem; color:var(--mut)}
.why > summary::-webkit-details-marker{display:none}
.why > summary::after{content:" ▾"; color:var(--dim)}
.why[open] > summary::after{content:" ▴"}
.why > summary:hover{color:var(--teal)}
.why-row{padding:.4rem .65rem .5rem; border-top:1px solid var(--line)}
.why-row b{display:block; font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); font-weight:600}
.why-row p{margin:.15rem 0 0; font-size:.84rem; color:var(--ink); line-height:1.5}
.why-trace{font-size:.8rem; color:var(--teal); text-decoration:none; font-weight:500}
.why-trace:hover{text-decoration:underline}
.why-note{display:block; font-size:.72rem; color:var(--dim); margin-top:.1rem}

/* The facts the model answered, split the way the severity rules read them:
   what could only raise the flag, what could only hold it down. For flags that
   predate the written reasoning this is the whole of the record, so it has to
   stand on its own rather than decorate a paragraph above it. */
.facts{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-top:.3rem}
.facts-lab{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-right:.15rem}
.fact{font-size:.76rem; line-height:1.35; color:var(--ink); background:var(--paper2);
  border:1px solid var(--line); border-radius:999px; padding:.16rem .55rem}
.fact-warn{border-color:var(--med); color:var(--med)}
.why-note{padding:0 .65rem .5rem}
.why-row .why-note{padding:0}