/* ==========================================================================
   01 · COMMENTSMART — soul
   Warm, human, never grovelling. Warm cream paper, terracotta accent.
   Motion budget: the copy-morph, and nothing else. Used dozens of times a day.

   DEVIATION FROM BRIEF (deliberate): the brief gives COMMENTSMART the accent
   #B4761A — the exact value the spine reserves for "low confidence, a human
   must check". Making the brand colour the safety colour would hide this
   product's own amber flag, which is its entire pitch. Terracotta is a
   red-brown clay, not an ochre, so #AF5636 is both truer to the name and
   keeps amber legible against it.
   ========================================================================== */
:root{
  --accent:#AF5636;
  --accent-rgb:175,86,54;
  --paper:#F7F5F1;          /* warm cream */
  --paper-rgb:247,245,241;
  --card:#FFFDFA;
}

/* ---------- the review being replied to ---------------------------------- */
.cb-review{padding:1.25rem;display:flex;flex-direction:column;gap:.9rem;}
.cb-review__top{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
.cb-stars{display:flex;gap:2px;color:var(--amber);}
.cb-stars i{width:13px;height:13px;display:block;background:currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.cb-stars i[data-off]{background:var(--line);}
.cb-review__who{font-weight:600;font-size:var(--t-small);}
.cb-review__when{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);margin-left:auto;}
.cb-review__text{margin:0;font-size:var(--t-small);line-height:1.7;color:var(--muted);}
.cb-review__text mark{background:rgba(var(--accent-rgb),.14);color:inherit;padding:0 .1em;border-radius:2px;}

/* ---------- the draft panel ---------------------------------------------- */
.cb-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--card);}
.cb-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:.7rem .95rem;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.cb-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);}
.cb-queue button:active{background:var(--surface-2);}
.cb-tab__dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);
  margin-left:.4rem;vertical-align:middle;opacity:0;transition:opacity var(--dur) var(--ease-out);}
.cb-tab[data-flagged="1"] .cb-tab__dot{opacity:1;}
/* A tab is pressable. Press feedback is the system responding, not decoration. */
.cb-tab:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .cb-tab:hover{color:var(--ink);} }

.cb-body{padding:1.15rem;min-height:16.5rem;display:flex;flex-direction:column;gap:.9rem;}
/* Crossfade the body, never slide. 160ms — long enough to read as a change,
   short enough that a manager flicking three tabs does not wait on us. */
.cb-text{
  margin:0;font-size:var(--t-small);line-height:1.75;white-space:pre-wrap;
  transition:opacity 160ms ease;flex:1;
}
.cb-text.is-out{opacity:0;}
.cb-caret{
  display:inline-block;width:.5ch;height:1em;vertical-align:-.14em;
  background:var(--accent);animation:cb-blink 1s steps(1) infinite;
}
@keyframes cb-blink{50%{opacity:0;}}

.cb-meta{
  display:flex;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
  border-top:1px dashed var(--line-soft);padding-top:.7rem;
}
.cb-meta b{font-weight:500;color:var(--ink);}

.cb-actions{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.85rem 1.15rem;border-top:1px solid var(--line);background:var(--surface);
}
.cb-actions__note{font-size:var(--t-micro);font-family:var(--font-mono);color:var(--faint);margin-left:auto;}
/* Label morph, not a toast: the button already has the user's attention. */
#cbCopy,.cb-copy{min-width:11.5rem;transition:background-color var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.cb-copy.is-done{background:var(--green);border-color:var(--green);color:#fff;}

/* ---------- tool: the review queue ---------------------------------------- */
.cb-queue{list-style:none;margin:0;padding:0;}
.cb-queue li{border-bottom:1px solid var(--line-soft);}
.cb-queue li:last-child{border-bottom:0;}
.cb-queue button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.7rem .9rem;display:grid;gap:.25rem;
  transition:background-color var(--dur) var(--ease-out);
}
.cb-queue button[aria-current="true"]{background:rgba(var(--accent-rgb),.08);}
.cb-queue__hd{display:flex;align-items:center;gap:.5rem;}
.cb-queue__name{font-size:var(--t-small);font-weight:600;}
.cb-queue__snip{font-size:var(--t-micro);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (hover:hover) and (pointer:fine){ .cb-queue button:hover{background:var(--surface);} }

.cb-edit{
  width:100%;min-height:11rem;resize:vertical;
  font-family:var(--font-body);font-size:var(--t-small);line-height:1.75;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem;
}
.cb-edit:focus{outline:2px solid var(--accent);outline-offset:1px;}
.cb-done{
  display:flex;gap:.55rem;align-items:center;font-family:var(--font-mono);
  font-size:var(--t-micro);color:var(--green);letter-spacing:.06em;
}

/* ---------- sample-data marker + first-time tone hint (rebrand additions) - */
.cb-sample-badge{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
  padding:1px .5rem;border-radius:20px;margin-left:.5rem;white-space:nowrap;vertical-align:middle;
}
.cb-tone-hint{
  margin:0;padding:.55rem 1.15rem 0;font-size:var(--t-micro);color:var(--faint);
}