/* ==========================================================================
   07 · STATEMENTSORT — soul
   Keyboard-first, spreadsheet-crisp, invisible. Navy accent, cool bone paper.

   MOTION BUDGET: ZERO. This is the deliberate one.
   A bookkeeper touches this grid several hundred times an hour. There is no
   row transition, no accept animation, no hover fade, no scroll easing and no
   toast. Selection, accept and reassign all repaint in the same frame as the
   keystroke. Every rule below that could have been a transition is written as
   an instant state change on purpose — the restraint is the feature, and it is
   the hardest thing in this whole set to leave alone.
   ========================================================================== */
:root{
  --accent:#1E3A5F;
  --accent-rgb:30,58,95;
  --paper:#F4F5F6;          /* cool bone */
  --paper-rgb:244,245,246;
  --card:#FFFFFF;
}

/* Belt and braces: nothing inside the grid may animate, ever, including
   anything a future hand adds to it. */
.cd-grid *,
.cd-grid *::before,
.cd-grid *::after{
  transition:none !important;
  animation:none !important;
}

/* ---------- the grid ------------------------------------------------------ */
.cd-grid{font-size:var(--t-small);}
.cd-hd,.cd-row{
  display:grid;
  grid-template-columns:5.4rem minmax(0,1fr) 6.5rem 8.5rem 3.6rem 5rem;
  gap:.75rem;align-items:baseline;
  padding:.34rem .75rem;
}
.cd-hd{
  position:sticky;top:0;z-index:3;background:var(--surface);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.cd-row{
  border-bottom:1px solid var(--line-soft);cursor:default;
  font-variant-numeric:tabular-nums;
}
.cd-row[data-conf="lo"]{background:rgba(var(--amber-rgb),.08);}
.cd-row[data-status="coded"]{color:var(--faint);}
.cd-row.is-cur{
  background:rgba(var(--accent-rgb),.13);
  box-shadow:inset 2px 0 0 var(--accent);
}
.cd-row[data-conf="lo"].is-cur{background:rgba(var(--amber-rgb),.2);}
.cd-date{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.cd-text{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-row[data-status="coded"] .cd-text{color:var(--faint);}
.cd-amt{font-family:var(--font-mono);text-align:right;}
.cd-amt[data-in="1"]{color:var(--green);}
.cd-acct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);}
.cd-gst{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.cd-state{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);text-align:right;}
.cd-row[data-status="coded"] .cd-state{color:var(--green);}
.cd-wait{color:var(--amber);}
@media (max-width:960px){
  .cd-hd{display:none;}
  .cd-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.15rem;padding:.5rem .75rem;}
  .cd-date{grid-column:1;} .cd-amt{grid-column:2;grid-row:1;}
  .cd-text{grid-column:1 / -1;} .cd-acct,.cd-gst,.cd-state{grid-column:auto;}
}

/* ---------- keyboard hints ------------------------------------------------ */
.cd-keys{
  display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;
  padding:.55rem .9rem;border-bottom:1px solid var(--line);background:var(--card);
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
}
.cd-keys b{font-weight:500;color:var(--ink);}
kbd{
  font-family:var(--font-mono);font-size:var(--t-micro);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:.05rem .3rem;background:var(--card);color:var(--ink);
}

/* ---------- the why-panel for a waiting row ------------------------------- */
.cd-why{
  padding:.7rem .9rem;border-top:1px solid var(--line);background:rgba(var(--amber-rgb),.07);
  font-size:var(--t-small);line-height:1.55;color:#6f4810;
}
.cd-why b{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:.2rem;font-weight:500;}
.cd-why--none{background:var(--surface);color:var(--faint);}

/* ---------- the reassign palette ------------------------------------------
   Appears instantly. No fade, no scale-in, no backdrop blur transition. A
   palette that animates is a palette you have to wait for. */
.cd-pal{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(var(--ink-rgb),.28);
  align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem;
}
.cd-pal.is-open{display:flex;}
.cd-pal__box{
  width:min(100%,34rem);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px -30px rgba(var(--ink-rgb),.5);
}
.cd-pal__in{
  width:100%;border:0;border-bottom:1px solid var(--line);
  padding:.8rem 1rem;font-family:var(--font-mono);font-size:var(--t-small);
  color:var(--ink);background:var(--card);
}
.cd-pal__in:focus{outline:none;}
.cd-pal__list{list-style:none;margin:0;padding:0;max-height:19rem;overflow:auto;}
.cd-pal__list li{
  display:grid;grid-template-columns:3.4rem 1fr auto;gap:.75rem;align-items:baseline;
  padding:.42rem 1rem;font-size:var(--t-small);cursor:pointer;
}
.cd-pal__list li.is-cur{background:rgba(var(--accent-rgb),.14);}
.cd-pal__code{font-family:var(--font-mono);color:var(--accent);}
.cd-pal__gst{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.cd-pal__foot{
  padding:.5rem 1rem;border-top:1px solid var(--line);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
  display:flex;gap:1rem;flex-wrap:wrap;
}

/* ---------- progress + BAS ------------------------------------------------ */
.cd-stats{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .cd-stats{grid-template-columns:repeat(4,minmax(0,1fr));} }
.cd-stats__c{background:var(--card);padding:.8rem .9rem;}
.cd-stats__n{font-family:var(--font-mono);font-size:1.5rem;font-variant-numeric:tabular-nums;
  line-height:1;display:block;}
.cd-stats__k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);display:block;margin-top:.4rem;}
.cd-stats__c--wait .cd-stats__n{color:var(--amber);}
.cd-out{
  width:100%;min-height:12rem;resize:vertical;white-space:pre;overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem;
}

/* label/value breakdown rows — plain divs filled by JS, no classes of
   their own, so this styles the shape directly. */
.gb-break > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-small);
}
.gb-break > div:last-child{border-bottom:0;}
.gb-break > div > span:first-child{color:var(--faint);}
.gb-break > div > span:last-child{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;flex:none;
}

/* ---- inside the capped walkthrough console ----
   .cd-grid is a header plus one scroller, not a row of columns, so it has to
   distribute its own height: the scroller's fixed --tbl-h would otherwise keep
   26rem inside a console that has less than that to give, and the bottom rows
   would be clipped rather than scrollable. */
@media (min-width:900px){
  #cdStage.wt-console--fit .cd-grid{display:flex;flex-direction:column;min-height:0;overflow:visible;}
  #cdStage.wt-console--fit .cd-grid .cd-hd{flex:none;}
  #cdStage.wt-console--fit .cd-grid .tbl__scroll{flex:1 1 auto;min-height:8rem;max-height:none;overflow:auto;}
}