/* ============================================================
   costandprofitability.com - Worked-example table component
   Lote Enciclopédia (26 jun 2026). Praxis. Scoped under .cc-wtable.
   One component, replicated across 7 method pillars + the
   /build-a-tdabc-model/ guide. Shared dataset "CaP" (illustrative).
   Never blue. EN / PT-PT / ES-ES.
   ============================================================ */

.cc-wtable{
  --w-orange:#C75B22; --w-orange-br:#E2761A; --w-green:#1C7A57;
  --w-ink:#1A1714; --w-ink2:#4A4138; --w-muted:#756859; --w-muted2:#9A8E7E;
  --w-paper:#F3EEE4; --w-paper2:#EDE6D8; --w-surface:#FBF9F3; --w-surface2:#FAF7F0;
  --w-line:#DCD3C2; --w-line2:#C9BEAA; --w-dark:#14110D; --w-red:#B23A2E; --w-wheat:#E8DBC2;
  --w-mono:'IBM Plex Mono',ui-monospace,monospace;
  --w-serif:'Newsreader',Georgia,serif;
  --w-sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--w-sans);color:var(--w-ink);line-height:1.6;
  background:var(--w-surface);border:1px solid var(--w-line);border-radius:12px;
  overflow:hidden;margin:34px 0;-webkit-font-smoothing:antialiased;
}
.cc-wtable *{box-sizing:border-box;}

.cc-wtable .wt-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 24px 0;
}
.cc-wtable .wt-eyebrow{
  font-family:var(--w-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--w-orange);display:flex;align-items:center;gap:10px;
}
.cc-wtable .wt-eyebrow::before{content:"";width:18px;height:1px;background:var(--w-orange);display:inline-block;}
.cc-wtable .wt-illus{
  font-family:var(--w-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w-muted);border:1px solid var(--w-line2);border-radius:100px;padding:5px 11px;white-space:nowrap;
}
.cc-wtable .wt-intro{
  padding:12px 24px 4px;font-size:15px;line-height:1.62;color:var(--w-ink2);margin:0;max-width:74ch;
  text-wrap:pretty;
}
.cc-wtable .wt-intro strong{color:var(--w-ink);font-weight:600;}

/* ---------- table ---------- */
.cc-wtable .wt-scroll{padding:16px 24px 6px;overflow-x:auto;}
.cc-wtable table{
  width:100%;border-collapse:collapse;font-size:14px;min-width:440px;
  background:var(--w-surface);border:1px solid var(--w-line);border-radius:8px;overflow:hidden;
}
.cc-wtable thead th{
  background:var(--w-dark);color:var(--w-paper);font-family:var(--w-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 14px;text-align:left;white-space:nowrap;vertical-align:bottom;line-height:1.35;
}
.cc-wtable tbody td{
  padding:10px 14px;border-top:1px solid var(--w-line);color:var(--w-ink2);vertical-align:top;
  line-height:1.4;
}
.cc-wtable tbody tr:nth-child(even) td{background:var(--w-surface2);}
.cc-wtable td.num, .cc-wtable th.num{text-align:right;font-family:var(--w-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cc-wtable td.ctr, .cc-wtable th.ctr{text-align:center;}
.cc-wtable td.lbl{color:var(--w-ink);font-weight:500;}
.cc-wtable td.neg{color:var(--w-red);}
.cc-wtable td.neg strong{color:var(--w-red);}

/* emphasised (total / story) row */
.cc-wtable tr.emph td{
  background:var(--w-wheat) !important;border-top:1.5px solid var(--w-line2);
  color:var(--w-ink);font-weight:600;
}
.cc-wtable tr.emph td strong{color:var(--w-ink);}
.cc-wtable tr.emph td.neg, .cc-wtable tr.emph td.neg strong{color:var(--w-red);}
.cc-wtable tbody tr.emph:nth-child(even) td{background:var(--w-wheat) !important;}

/* ---------- takeaway ---------- */
.cc-wtable .wt-quote{
  margin:6px 0 0;padding:16px 24px 20px;border-top:1px solid var(--w-line);background:var(--w-surface2);
  font-family:var(--w-serif);font-size:17px;line-height:1.45;color:var(--w-ink);font-style:italic;
  display:flex;gap:14px;align-items:baseline;
}
.cc-wtable .wt-quote .ql{
  flex:none;font-family:var(--w-mono);font-size:9.5px;font-style:normal;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w-orange);padding-top:4px;
}
.cc-wtable .wt-quote b{font-style:normal;font-weight:600;color:var(--w-orange);}

@media(max-width:560px){
  .cc-wtable .wt-head, .cc-wtable .wt-intro, .cc-wtable .wt-scroll, .cc-wtable .wt-quote{padding-left:16px;padding-right:16px;}
  .cc-wtable .wt-quote{font-size:15.5px;flex-direction:column;gap:6px;}
}