/* ============================================================
   Pipezoom - css/leadchart.css, the market mix at the foot of the market column.
   A ring, a ranked bar, and the summary row the details element folds
   to, painted in the page tokens of the lead table. The ring is painted
   in the planner's own hues, the ones .plnr-k-* fills its chart key
   with, in an order that puts unlike hues side by side; a seventh takes
   --hue-grey. Distance is the only fact drawn on a scale, in 6 steps of
   1 blue, the only literal colors here.
   Defines the --lch- tokens and the classes under .lch.
   Notes: docs/notes/app.pipezoom.com/css/leadchart.css.md
   ============================================================ */

.lch{
  /* The planner's hues, in an order that puts unlike hues side by side. */
  --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: the only slice that names
     nothing in particular, in a light gray that reads as no category.
     The token moves with the theme, and no value is written here. */
  --lch-rest:var(--hue-grey);
  /* The rows a fact has not been read on yet. The theme's stronger
     line gray: dark on the dark themes, light on the light ones,
     visible either way. */
  --lch-none:var(--line-strong);

  /* The distance scale, near to far. The nearest band is the furthest
     step from the card and reads loudest on each background. */
  --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, the details summary: the press that opens it.
   The browser's own marker is taken off; the caret is the marker. */
.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;
  list-style:none;
}
.lch-strip::-webkit-details-marker{display:none;}
.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:not([open]) .lch-caret{transform:rotate(-90deg);}

.lch-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;
  padding:6px 14px 18px;
}

.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;}
/* 7 rows, then it scrolls, and the ring beside it stays on screen. */
.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;}

/* The rows with no answer for this fact, counted and named. */
.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;}
}

/* In the market column from 1100px: 1 frame with the column, the
   summary on the column's edge, and the ring over its key over the
   bar, 1 under another. */
@media (min-width:1100px){
  .lds-side .lch{
    margin:0;padding-top:10px;
    background:none;border:0;border-top:1px solid var(--line);border-radius:0;
    overflow:visible;
  }
  .lds-side .lch-strip{width:calc(100% + 16px);margin:0 -8px;padding:6px 8px;border-radius:var(--radius-sm);}
  .lds-side .lch-body{grid-template-columns:1fr;gap:16px;padding:10px 0 4px;}
  .lds-side .lch-one-ring{flex-direction:column;align-items:stretch;gap:12px;}
  .lds-side .lch-ring{align-self:center;}
  .lds-side .lch-brow{grid-template-columns:minmax(64px,46%) 1fr auto;}
}