/* Capital-Light Compounders page.
   Built on the Shareholder Yield page's rows, tiles and cards (css/shareholder-yield.css, loaded first, which in turn
   shares the hero, bands, controls and chips with css/sustainable-dividends.css). This file adds the "capital per $1
   of new profit" cell with its See's-to-typical track, the profit-and-capital chart, the three-business comparison
   from Buffett's letter, and the "try it" box.

   Colour: one blue family for "needed little capital" (the stronger the blue, the lighter the capital need), neutral
   grey for capital-hungry or not growing. Nothing here is red: a capital-hungry company is not a bad one, just not a
   dream one. Every state also carries a glyph and a word, and numbers stay in plain ink: colour is never the only signal. */

/* ---------------- rows ---------------- */
.cl-table .sy-head-row, .cl-table .cl-row{
  grid-template-columns: 40px minmax(180px, 1.3fr) 200px repeat(4, minmax(92px, 1fr)) 128px;
}
.cl-row .cl-main{ display:flex; flex-direction:column; gap:4px; min-width:0; cursor:help; }
.cl-main b{ display:flex; align-items:center; gap:7px; font-size:19px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; white-space:nowrap; }
.cl-main small{ font-size:11px; line-height:1.35; color: rgba(255,255,255,0.5); }
.cl-band{ display:inline-block; align-self:flex-start; padding:2px 9px; border-radius:var(--radius-pill); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.cl-band--sees, .cl-band--nocap{ border-color: rgba(57,135,229,0.7); background: rgba(57,135,229,0.22); }
.cl-band--fs{ border-color: rgba(143,184,240,0.55); background: rgba(143,184,240,0.14); }

.cl-glyph{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; font-style:normal; font-size:11px; line-height:1; color: rgba(255,255,255,0.55); }
.cl-glyph--sees, .cl-glyph--nocap{ color:#6CA8F2; }
.cl-glyph--fs{ color:#A9C9F4; }
.cl-glyph--hungry, .cl-glyph--notgrowing{ color: rgba(255,255,255,0.55); }

/* the track: zero on the left, a typical grower on the right; the three faint ticks are Buffett's three examples */
.cl-track{ position:relative; display:block; height:6px; margin:3px 0 1px; border-radius:3px; background: rgba(255,255,255,0.09); }
.cl-tick{ position:absolute; top:-3px; bottom:-3px; width:1px; background: rgba(255,255,255,0.3); }
.cl-mark{ position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#9AA0AA; border:2px solid #121220; box-shadow:0 0 0 1px rgba(255,255,255,0.55); }
.cl-mark--sees, .cl-mark--nocap{ background:#3987E5; }
.cl-mark--fs{ background:#8FB8F0; }

.cl-arrow{ color: rgba(255,255,255,0.45); font-weight:600; }
.cl-row .sy-c b{ font-size:14px; }
.cl-row .c-spark{ align-items:flex-end; }

/* the profit-and-capital chart: both in dollars on one scale */
.cl-chart{ display:block; overflow:visible; }
.cl-zero{ stroke: rgba(255,255,255,0.25); stroke-width:1; stroke-dasharray:2,3; }
.cl-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.cl-line--profit{ stroke:#6CA8F2; }
.cl-line--cap{ stroke: rgba(255,255,255,0.62); stroke-dasharray:4,3; }
.cl-dot--profit{ fill:#6CA8F2; }
.cl-dot--cap{ fill: rgba(255,255,255,0.8); }
.cl-key{ display:inline-block; width:18px; height:0; margin:0 3px 3px 4px; vertical-align:middle; border-top:2px solid #6CA8F2; }
.cl-key--cap{ border-top:2px dashed rgba(255,255,255,0.7); }

/* ---------------- Buffett's three businesses ---------------- */
.cl-three{ position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; margin:6px 0 0; padding:22px 24px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.cl-three-row{ display:grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) minmax(150px, 250px); align-items:center; gap:16px; }
.cl-three-name b{ display:block; font-size:14.5px; color:#fff; }
.cl-three-name small, .cl-three-val small{ display:block; font-size:11.5px; line-height:1.35; color: rgba(255,255,255,0.5); }
.cl-three-track{ position:relative; display:block; height:16px; border-radius:8px; background: rgba(255,255,255,0.07); overflow:hidden; }
.cl-three-fill{ display:block; height:100%; border-radius:8px; }
.cl-three-fill--sees{ background:#3987E5; }
.cl-three-fill--fs{ background:#8FB8F0; }
.cl-three-fill--hungry{ background:#8A909A; }
.cl-three-val b{ display:block; font-family:'Instrument Sans', sans-serif; font-size:24px; font-weight:600; line-height:1.1; color:#fff; font-variant-numeric: tabular-nums; }
.cl-source{ position:relative; z-index:1; margin:10px 2px 22px; font-size:12.5px; line-height:1.6; color: rgba(255,255,255,0.55); }
.cl-source a, .cl-how4 a{ color:#9CC3F5; }
.cl-how4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ---------------- try it ---------------- */
.cl-try{ position:relative; z-index:1; margin-top:18px; padding:20px 22px; border-radius:var(--radius-sm); background: rgba(57,135,229,0.10); border:1px solid rgba(57,135,229,0.35); }
.cl-try-head h3{ font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:20px; margin:0 0 4px; color:#fff; }
.cl-try-head p{ margin:0 0 14px; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.7); }
.cl-try-form{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.cl-try-form label{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.6); }
.cl-try-form input{ height:42px; padding:0 12px; border-radius:var(--radius-sm); font:inherit; font-size:16px; font-weight:700; color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); font-variant-numeric: tabular-nums; }
.cl-try-form input:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.cl-try-out{ margin:14px 0 0; font-size:14px; line-height:1.65; color:#fff; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px){
  .cl-table .sy-head-row, .cl-table .cl-row{ grid-template-columns: 34px minmax(150px, 1.2fr) 176px repeat(4, minmax(78px, 1fr)) 118px; column-gap:10px; }
}
@media (max-width: 1080px){
  .cl-how4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 960px){
  .cl-table .cl-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:14px; padding:18px 4px;
    grid-template-areas: "rank id main" "cells cells cells" "tail tail tail";
  }
  .cl-row .cl-main{ grid-area:main; align-self:start; min-width:150px; max-width:200px; }
  .cl-main b{ font-size:17px; }
  .cl-three-row{ grid-template-columns: minmax(0,1fr); gap:6px; }
  .cl-how4{ grid-template-columns: minmax(0,1fr); }
  .cl-try-form{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .cl-three{ padding:16px; }
  .cl-try{ padding:16px; }
  .cl-row .cl-main{ max-width:150px; min-width:120px; }
}