/* ============================================================
   GP Team Hub - leadchart.css

   The market mix over the lead table: a ring, a ranked bar, and the row
   the section folds to.

   The section sits in the page, so it wears the page tokens the rest of
   the lead table wears: the surfaces and the ink.

   The ring wears the planner's own hues, the ones .plnr-k-* fills its
   chart key with and .plnr-seg-* paints its blocks with. Six of them
   are named below in an order that keeps neighbours apart, and a
   seventh value takes --ink-faint, which is the muted ink the planner's
   own key uses for its admin slot.

   Distance is the one thing drawn on a scale instead of in slots, so it
   takes six steps of one blue. Those six are the only literal colors
   here; everything else is a token the site already defines.

   Doc: docs/notes/new/css/leadchart.css.md
   ============================================================ */

.lch{
  /* The planner's hues, in an order that keeps neighbours apart. */
  --lch-1:var(--pl-hv);
  --lch-2:var(--pl-fol);
  --lch-3:var(--pl-train);
  --lch-4:var(--pl-ent);
  --lch-5:var(--hue-green-btn);
  --lch-6:var(--pl-eve);
  /* The remainder, in the theme's own neutral. It is the one slice
     that names nothing in particular, and a light grey says that where
     a seventh hue would have read as a seventh thing. The token moves
     with the theme; the value is not written here. */
  --lch-rest:var(--hue-grey);
  /* The rows a fact has not been read on yet. The theme's stronger
     line grey: dark on the dark themes, light on the light ones, and
     a slice a reader sees either way. */
  --lch-none:var(--line-strong);

  /* The distance scale, near to far. Stepped away from the card so the
     nearest band is the one that reads loudest on each surface. */
  --lch-d1:#8fcbfe;
  --lch-d2:#55b4fe;
  --lch-d3:#319eec;
  --lch-d4:#0988d4;
  --lch-d5:#0072b5;
  --lch-d6:#055e95;

  margin-bottom:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
[data-theme="light"] .lch,
[data-theme="white"] .lch{
  --lch-d1:#014b79;
  --lch-d2:#00619a;
  --lch-d3:#0775b9;
  --lch-d4:#128bd8;
  --lch-d5:#35a1f0;
  --lch-d6:#5db7ff;
}

/* The row it folds to, which is also the press that opens it. */
.lch-strip{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;cursor:pointer;text-align:left;
  background:transparent;border:0;
  color:var(--ink-soft);font:inherit;font-size:.86rem;
}
.lch-strip:hover{color:var(--ink);background:var(--surface-hover);}
.lch-strip:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent-ring);}
.lch-strip-t{font-weight:600;}
.lch-strip-s{margin-left:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.lch-caret{transition:transform .15s ease;color:var(--ink-faint);}
.lch-shut .lch-caret{transform:rotate(-90deg);}

.lch-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;
  padding:6px 14px 18px;
}
/* A class beats the hidden attribute's own rule, so the folded section
   keeps its height without this. */
.lch-body[hidden]{display:none;}

.lch-one{min-width:0;display:flex;flex-direction:column;}
.lch-one-ring{flex-direction:row;align-items:flex-start;gap:18px;}

/* ---- The ring ---- */
.lch-ring{position:relative;flex:none;width:200px;height:200px;color:var(--ink-faint);}
.lch-ring svg{width:200px;height:200px;display:block;}
.lch-ring circle{transition:opacity .12s ease;}
.lch-one:has(.lch-lit) .lch-ring circle:not(.lch-lit){opacity:.28;}
.lch-mid{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.lch-mid-n{font-size:2.1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.lch-mid-l{margin-top:4px;font-size:.72rem;color:var(--ink-faint);}

/* ---- The key beside the ring ---- */
.lch-key{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.lch-pick .sel-in{font-size:.8rem;padding:4px 26px 4px 9px;}
/* Seven rows, then it scrolls. Eleven of them ran the card far enough
   down the page that the ring beside it had scrolled off the top. */
.lch-list{
  --lch-rows:7;
  --lch-row-h:1.35rem;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;
  max-height:calc(var(--lch-rows) * var(--lch-row-h)
                  + (var(--lch-rows) - 1) * 2px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong, var(--line)) transparent;
}
.lch-list::-webkit-scrollbar{width:8px;}
.lch-list::-webkit-scrollbar-track{background:transparent;}
.lch-list::-webkit-scrollbar-thumb{
  background:var(--line-strong, var(--line));
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  background-clip:content-box;
}
.lch-list::-webkit-scrollbar-thumb:hover{background-color:var(--ink-faint);background-clip:content-box;}
.lch-row{
  display:flex;align-items:center;gap:8px;
  padding:3px 5px;border-radius:var(--radius-sm);
  font-size:.8rem;color:var(--ink-soft);
}
.lch-row:hover,.lch-row.lch-lit{background:var(--surface-hover);color:var(--ink);}
.lch-dot{flex:none;width:10px;height:10px;border-radius:2px;}
.lch-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lch-v{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.lch-p{flex:none;width:38px;text-align:right;color:var(--ink-faint);font-variant-numeric:tabular-nums;}

/* ---- The ranked bar ---- */
.lch-bars-h{margin-bottom:10px;}
.lch-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.lch-brow{
  display:grid;grid-template-columns:minmax(76px,32%) 1fr auto;
  align-items:center;gap:10px;
  padding:2px 4px;border-radius:var(--radius-sm);
  font-size:.8rem;color:var(--ink-soft);
}
.lch-brow:hover,.lch-brow.lch-lit{background:var(--surface-hover);color:var(--ink);}
.lch-bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The track carries the baseline every bar starts from. */
.lch-bt{position:relative;height:14px;background:var(--surface-high);border-radius:3px;overflow:hidden;}
.lch-bf{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .18s ease;}
.lch-bv{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}

/* What carried no answer for this fact, counted and said out loud. */
.lch-none{padding:5px;font-size:.8rem;color:var(--ink-faint);}

@media (max-width:980px){
  .lch-body{grid-template-columns:1fr;gap:18px;}
}
@media (max-width:560px){
  .lch-one-ring{flex-direction:column;align-items:stretch;gap:12px;}
  .lch-ring{align-self:center;}
}