:root{
  --bg:#f5f6f7;
  --panel:#fff;
  --ink:#0b0b0b;
  --muted:#6b7280;
  --line:#e6e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
  --acc:#2563eb;
  --star:#f59e0b;
}

[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.45;
  font-size:14px;
}

.wrapper{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:calc(100vh - 60px);
}

.breadcrumbs{font-size:12.5px;color:var(--muted);}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs__sep{margin:0 4px;opacity:.6}
.breadcrumbs__current{color:var(--ink)}

.tool__header{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
}
.tool__title{font-size:20px;font-weight:700;letter-spacing:0}
.tool__desc{margin-top:6px;color:var(--muted);max-width:78ch;font-size:13px;}

.layout{
  display:grid;
  /* Use minmax to prevent overflow and ensure the right column can fully stretch */
  grid-template-columns: 350px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  margin-top:14px;
}

/* Fix: shared site styles may constrain generic `.content` width.
   Ensure the right column stretches to the full grid width. */
.layout > .content{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch;
  align-self:stretch;
  min-width:0;
}
.layout > .content > .card{width:100%;}
.tool__header{width:100%;max-width:none !important;}

/* rail */
.rail{
  position:sticky;
  top:74px;
  align-self:start;
  max-height: calc(100vh - 90px);
  overflow:auto;
  padding-right:2px;
}
.rail::-webkit-scrollbar{width:10px}
.rail::-webkit-scrollbar-thumb{background:#d9dbe2;border-radius:999px;border:3px solid transparent;background-clip:content-box}
.rail::-webkit-scrollbar-track{background:transparent}

.content{display:flex;flex-direction:column;gap:14px;min-width:0}

/* cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
}
.card{min-width:0}
.card__title{font-weight:600;margin-bottom:10px;font-size:13.5px;}
.hr{height:1px;background:var(--line);border:0;margin:14px 0;}

.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
}
.tinyBtn{
  font:inherit;
  font-weight:600;
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.tinyBtn:hover{border-color:#d7d9df}
.tinyBtn:active{transform:translateY(1px)}
.tinyBtn[disabled]{opacity:.55;cursor:not-allowed}

/* nav */
.navcard .card__title{font-weight:600;margin-bottom:10px;font-size:13.5px;}
.navlink{
  display:block;
  padding:9px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
}
.navlink:hover{background:#f1f2f4}
.navlink--primary{background:var(--ink);color:#fff;font-weight:600;}
.navlink--primary:hover{background:#000}

.navlink--sub{
  margin-top:2px;
  padding-left:22px;
  font-size:13px;
  color:rgba(17,17,17,.92);
}
.navlink--active{
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.14);
  font-weight:600;
}

/* forms */
.field{display:block;margin:10px 0}
.field__label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field__meta{font-size:12px;color:var(--muted);margin-top:6px}
.field--inline{margin:0}

.row{display:flex;align-items:center;gap:12px;margin-top:12px}
.row--wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}

input[type="text"], input[type="number"], input[type="file"], select{
  width:100%;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font:inherit;
}
select{cursor:pointer}
input[type="text"]:focus, input[type="number"]:focus, select:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input[type="range"]{width:100%}

.btn{
  border:1px solid var(--line);
  background:#fff;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  font-size:13.5px;
  font-size:13px;
}
.btn:hover{border-color:#d7d9df}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--primary{background:var(--acc);border-color:rgba(0,0,0,0);color:#fff;}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:transparent;}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;font-size:12px;color:var(--muted);background:#fff;
}
.hint{margin-top:10px;font-size:12px;color:var(--muted);}
.muted{color:var(--muted)}

.segmented{
  display:flex;background:#f1f2f4;border:1px solid var(--line);
  border-radius:14px;padding:4px;gap:4px;margin:10px 0;
}
.segmented__btn{
  flex:1;border:0;background:transparent;padding:10px 10px;border-radius:12px;
  cursor:pointer;font-weight:600;color:#111;
  font-weight:600;

  font-weight:600;
}
.segmented__btn.is-active{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08);}

.panel{display:none}
.panel.is-active{display:block}

.combo{position:relative}
.combo__input{padding-right:42px}

/* visual cue: dropdown caret in font pickers */
.combo--dropdown::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(17,17,17,.65);
  pointer-events:none;
}
.heatCombo.combo--dropdown::after{
  /* In heatmap pickers the combo includes a label above the input;
     shift caret down to align with the input's vertical center. */
  top:calc(50% + 12px);
}
.combo--dropdown .combo__input{padding-right:44px;}
.combo__list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;z-index:50;max-height:260px;overflow:auto;
}
.combo__item{padding:9px 12px;cursor:pointer;font-weight:600;}
.combo__item small{display:block;font-weight:500;color:var(--muted)}
.combo__item:hover{background:#f6f7f9}

.sample{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  min-height:110px;
  background:#fff;
  outline:none;
  white-space:pre-wrap;
  margin:0;
  text-indent:0;
}
.sample:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.big-input{font-size:16px;font-weight:600;letter-spacing:0;margin:0;text-indent:0;}

/* checkbox */
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:#111;margin-top:6px;}
.check input{transform:translateY(1px)}

/* progress */
.progress{
  margin-top:10px;height:10px;border-radius:999px;border:1px solid var(--line);
  background:#f1f2f4;overflow:hidden;
}
.progress__bar{
  height:100%;width:0%;
  background:linear-gradient(90deg, var(--acc), #7c3aed);
  border-radius:999px;transition:width .15s ease;
}

/* favorites + compare blocks */
.fav{margin-top:10px}
.fav__label{font-size:12px;color:var(--muted);margin:4px 0 8px;font-weight:600}
.favorites{display:flex;flex-direction:column;gap:12px}

.compareBlock{
  border:1px dashed #d7d9df;
  border-radius:14px;
  padding:14px 14px 12px;
  background:#fff;
  /* Prevent long, space-less strings from visually leaking outside cards */
  overflow:hidden;
}

.overlayText{
  position:relative;
  display:block;
  padding:0;
  margin:0;
  text-indent:0;
  min-height:84px;
}
.layer{
  position:relative;
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  margin:0;
  padding:0;
  text-indent:0;
}
.layer--ref{
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-stroke: 2px rgba(107,114,128,0.86);
  text-shadow: 0 0 0 rgba(107,114,128,0.35);
  pointer-events:none;
}
.layer--cand{color:#111111}

.cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.col{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.col__tag{font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600}
.col__text{white-space:pre-wrap;margin:0;padding:0;text-indent:0}

/* results */
.results{display:flex;flex-direction:column;gap:12px;}
.item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.item__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.item__name{font-weight:700;font-size:16px;}
.item__sub{font-size:12px;color:var(--muted);margin-top:2px}
.item__right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sfBadge{font-weight:600;color:#0f172a;background:#eef2ff;border:1px solid #e0e7ff;padding:6px 10px;border-radius:999px;font-size:12px;white-space:nowrap;}
.starBtn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid;place-items:center;
}
.starBtn:hover{border-color:#d7d9df}
.starBtn svg{display:block}
.starBtn.is-on{border-color:rgba(245,158,11,.35); box-shadow:0 0 0 4px rgba(245,158,11,.12);}
.starBtn.is-on svg path{fill:var(--star); stroke:var(--star);}
.starBtn svg path{fill:transparent; stroke:#111; stroke-width:1.6}

.iconBtn,
.heatBtn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid;place-items:center;
}
.iconBtn:hover,
.heatBtn:hover{border-color:#d7d9df}
.heatBtn svg{display:block}
.heatBtn svg path,
.heatBtn svg rect,
.heatBtn svg circle{fill:transparent; stroke:#111; stroke-width:1.6}

/* modal */
.modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.34)}
.modal__panel{
  --heatCell:72px;
  --heatGlyph:40px;
  position:relative;
  width:min(1100px, calc(100vw - 36px));
  max-height:min(86vh, 860px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  padding:16px;
}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.modal__title{font-weight:700;font-size:14px;}
.modal__sub{color:var(--muted);font-size:12px;margin-bottom:10px;}
.modal__progress{color:var(--muted);font-size:12px;margin:10px 0;}

.heatLegend{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px;}
.heatKey{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:#0f172a;background:#fff;}
.heatKey--low{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.22)}
.heatKey--mid{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.24)}
.heatKey--high{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22)}

.heatGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--heatCell),var(--heatCell)));gap:10px;justify-content:start;}
.heatCell{border:1px solid rgba(15,23,42,.10);border-radius:12px;width:var(--heatCell);height:var(--heatCell);position:relative;overflow:hidden;background:#fff;}
.heatCell--low{background:rgba(34,197,94,.10)}
.heatCell--mid{background:rgba(245,158,11,.12)}
.heatCell--high{background:rgba(239,68,68,.10)}
.heatCell__inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;}
/* Center glyphs in the cell so descenders (e.g. "у") don't clip and the overlay is visually balanced. */
.heatGlyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;font-size:var(--heatGlyph);transform:translateY(-0.06em);}
.heatGlyph--ref{color:rgba(15,23,42,.26);}
.heatGlyph--cand{color:#111;}
.heatCell__label{
  position:absolute;left:8px;top:6px;
  display:flex;flex-direction:column;gap:1px;
  line-height:1.12;
  color:rgba(15,23,42,.60);
  pointer-events:none;
}
.heatCell__labelMain{font-size:11px;}
.heatCell__labelSub{font-size:10px;color:rgba(15,23,42,.55);}

/* If labels overlap glyphs at the current cell/glyph scale (depends on screen + slider),
   hide the verbose second line so we don't cover the symbol. */
.heatGrid--compactLabels .heatCell__labelSub{display:none;}
.heatGrid--compactLabels .heatCell__labelMain{font-size:10px;}

.empty{
  padding:14px;
  border:1px dashed #d7d9df;
  border-radius:14px;
  color:var(--muted);
  background:#fff;
}

/* footer */
.footer{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.footer__inner{color:var(--muted);font-size:12px}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .rail{position:relative;top:auto;max-height:none;overflow:visible}
  .cols{grid-template-columns:1fr}
}


/* segmented control */
.segmented{
  display:flex;
  gap:2px;
  background:rgba(17,17,17,0.06);
  border:1px solid rgba(17,17,17,0.12);
  border-radius:12px;
  padding:2px;
}
.segmented__btn{
  flex:1;
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:10px;
  font-size:12.5px;
  color:rgba(17,17,17,0.75);
  cursor:pointer;
  font-weight:600;

  font-weight:600;
}
.segmented__btn.is-active{
  background:#fff;
  color:#111;
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
}

.searchPanel{display:block;}

.metricToggles{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-top:8px;
}
.metricToggles.metricToggles--col{
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:10px;
}
.metricCol--offset{
  padding-top:22px;
}


/* fixed glyph grid */
.glyphGrid{
  --cell:72px;
  display:grid;
  grid-template-columns:repeat(auto-fill, var(--cell));
  grid-auto-rows:var(--cell);
  gap:10px;
  justify-content:start;
}
.glyphCell{
  position:relative;
  width:var(--cell);
  height:var(--cell);
  border:1px solid rgba(17,17,17,0.08);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.glyphLayer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
}
.glyphLayer--ref{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(107,114,128,0.65);
  text-stroke:1.5px rgba(107,114,128,0.65);
}
.glyphLayer--cand{
  color:#111;
}


.heatControls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 10px;}
.heatControls .field__label{margin-bottom:6px}
.heatControls input[type="range"]{width:220px;max-width:calc(100vw - 120px);}
.heatControls .field__meta{margin-top:6px;}

.heatWeights{flex:1 1 520px;min-width:280px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.7);}
.heatWeights__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.heatWeights__title{font-weight:600;font-size:14px;}
.heatWeights__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.heatWeights__note{margin-top:8px;font-size:12px;}

.field--compact .field__label{font-size:12px;margin-bottom:4px;}
.field--compact input[type="range"]{width:200px;max-width:100%;}
.field--compact .field__meta{margin-top:4px;font-size:12px;}

@media (max-width: 720px){
  .heatWeights__grid{grid-template-columns:1fr;}
  .field--compact input[type="range"]{width:100%;}
}
.heatSections{display:flex;flex-direction:column;gap:14px;}
.heatSection{border:1px solid var(--line);border-radius:14px;padding:12px;}
.heatSection__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
.heatSection__title{font-weight:600;font-size:13px;color:#111;}
.heatSection__meta{font-size:12px;color:var(--muted);}


/* Controls normalization */
:root{
  --ctl-h: 40px;
  --ctl-radius: 12px;
}

.btn, #statusPill, input[type="text"], input[type="number"], select, textarea{
  min-height: var(--ctl-h);
  border-radius: var(--ctl-radius);
}

#statusPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: var(--ctl-radius);
}

.rail > .card{
  margin-bottom: 14px;
}
.rail > .card:last-child{
  margin-bottom: 0;
}

.heatControls{
  align-items: flex-start;
}

.heatWeights{
  max-width: 760px;
}

/* --- Heatmap modal: font pickers + per-font visualization + compact layout --- */
.modal__panel{
  --heatRefColor:#0f172a;
  --heatRefAlpha:.28;
  --heatCandColor:#111111;
  --heatCandAlpha:1;
}

.heatGlyph{mix-blend-mode:multiply;}
.heatGlyph--ref{color:var(--heatRefColor);opacity:var(--heatRefAlpha);}
.heatGlyph--cand{color:var(--heatCandColor);opacity:var(--heatCandAlpha);}

.heatControls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:6px 0 10px;}
.heatControls__left{flex:1 1 360px;min-width:280px;display:flex;flex-direction:column;gap:10px;}
.heatControls__right{flex:1 1 520px;min-width:280px;}

.heatFonts{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;}
.heatFonts .field__label{margin-bottom:4px;}
.heatFonts input[type="text"]{width:100%;}

.heatSwapBtn{width:34px;height:34px;margin-bottom:2px;}

.heatMiniRow{display:flex;gap:12px;align-items:flex-end;}
.heatMiniRow input[type="range"]{width:240px;max-width:100%;}

.heatViz{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.7);}
.heatViz__title{font-weight:600;font-size:13px;margin-bottom:8px;}
.heatViz__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.heatViz__label{font-weight:600;font-size:12px;color:var(--muted);margin-bottom:6px;}
.heatViz__row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:end;}
.heatViz input[type="color"]{width:100%;min-height:34px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;}
.heatViz input[type="range"]{width:100%;}

@media (max-width: 720px){
  .heatFonts{grid-template-columns:1fr;}
  .heatSwapBtn{justify-self:start;margin:4px 0;}
  .heatViz__grid{grid-template-columns:1fr;}
}

/* =========================================================
   Heatmap modal v2: compact + sticky settings + scrollable glyphs
   ========================================================= */

#heatModal .modal__panel{
  width: min(1320px, calc(100vw - 36px));
  max-height: min(88vh, 920px);
  overflow: hidden; /* scroll only glyph area */
  display: flex;
  flex-direction: column;
}

#heatModal .modal__actions{display:flex;align-items:center;gap:8px;}
#heatModal .modal__actions .iconBtn{width:34px;height:34px;}


#heatModal .heatTopBar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.85);
}

#heatModal .heatTopBar__fonts{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:8px;
  align-items:end;
  flex: 1 1 auto;
  min-width: 520px;
}

#heatModal .heatCombo{min-width:240px;}
#heatModal .heatSwapBtn{margin-bottom:2px;}

#heatModal .heatTopBar__scale input[type="range"]{
  width: 240px;
  max-width: 100%;
}

#heatModal .heatBody{
  display:grid;
  grid-template-columns: 270px 1fr;
  gap:12px;
  margin-top:10px;
  flex: 1 1 auto;
  min-height: 0;
}

#heatModal .heatSide{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.70);
  overflow:auto;
}

/* sidebar: make inner blocks truly fluid (avoid overflow/clipping) */
#heatModal .heatWeights{
  min-width:0;
  max-width:100%;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  flex:unset;
}
#heatModal .heatWeights__grid .field{margin:0;}
#heatModal .heatWeights__head{margin-bottom:8px;}

#heatModal .heatMain{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  overflow:auto;
  min-height:0;
}

#heatModal .heatLegend{position:static; z-index:auto; background:transparent; padding:0; margin:0 0 10px;}
#heatModal .modal__progress{position:static; z-index:auto; background:transparent; padding:0; margin:0 0 10px;}

/* compact accordion blocks */
#heatModal .heatBlock{border:1px solid var(--line); border-radius:14px; background:#fff; margin-bottom:10px; overflow:hidden;}
#heatModal .heatBlock:last-child{margin-bottom:0;}
#heatModal .heatBlock__summary{list-style:none; cursor:pointer; padding:10px 12px; font-weight:700; font-size:13px;}
#heatModal .heatBlock__summary::-webkit-details-marker{display:none;}
#heatModal .heatBlock__content{padding:10px 12px; border-top:1px solid rgba(15,23,42,.08);} 

/* heat font dropdown: show full list (no item cap) */
#heatModal .heatSuggest{max-height: min(70vh, 720px);} 

/* ensure per-font color/opacity overrides site-wide styles loaded after this file */
#heatModal .heatGlyph{mix-blend-mode:multiply;}
#heatModal .heatGlyph--ref{color:var(--heatRefColor) !important; opacity:var(--heatRefAlpha) !important;}
#heatModal .heatGlyph--cand{color:var(--heatCandColor) !important; opacity:var(--heatCandAlpha) !important;}

@media (max-width: 980px){
  #heatModal .heatTopBar{flex-direction:column; align-items:stretch;}
  #heatModal .heatTopBar__fonts{grid-template-columns:1fr; min-width:0;}
  #heatModal .heatBody{grid-template-columns:1fr;}
}

#heatModal .heatWeights__grid{grid-template-columns:1fr; gap:10px;}

/* fix: keep weights block within narrow left panel (no min-width overflow) */
#heatModal .heatWeights{
  min-width:0;
  max-width:100%;
  width:100%;
  padding:0;
  border:none;
  background:transparent;
}
#heatModal .heatWeights__head{margin-bottom:8px;}
#heatModal .heatWeights__grid .field{margin:0;}
#heatModal .heatWeights__grid input[type=range]{width:100%;}
#heatModal .heatWeights__note{margin-top:6px;}

#heatModal .heatViz__grid{grid-template-columns:1fr; gap:10px;}
#heatModal .heatViz__row{display:flex;flex-direction:column;gap:10px;}
#heatModal .heatViz__row .field{width:100%;}
#heatModal .heatViz__row input[type=range]{width:100%;}
#heatModal .heatViz__row input[type=color]{min-height:32px;}

#heatModal .heatSide .field--compact input[type=range]{width:100%;}
#heatModal .heatSide .field--compact{display:block;}

#heatModal.is-expanded .modal__panel{width:calc(100vw - 16px); max-height:calc(100vh - 16px);}
#heatModal.is-expanded .heatBody{grid-template-columns: 270px 1fr;}


.heatPosCheck{margin-top:10px;}

/* Similar-fonts: spacing under 'Кандидатов анализировать' input */
#limitFonts{margin-bottom:12px}

/* ===== Similar Fonts: show limit (range + number) ===== */
.showLimitRow{
  display:flex;
  align-items:center;
  gap:12px;
}
#limitFontsRange{ flex:1; min-width:0; }
#limitFonts{ width:84px; }

/* Hide coverage hint line when empty (prevents a lone "–" row) */
#coverageHint:empty{ display:none; }

/* ===== Similar Fonts: metric grid (Top mode) ===== */
.metricGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
  margin-top:8px;
}
.metricGrid__title{
  grid-column: 1 / -1;
  font-size:12px;
  color:var(--muted);
  margin-bottom:2px;
}
.metricGrid .check{ margin-top:0; }

/* ===== Similar Fonts: glyph stats controls ===== */
.glyphStatsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:8px;
}
@media (min-width: 520px){
  .glyphStatsGrid{ grid-template-columns: 1fr 1fr; }
  .glyphStatsGrid > :nth-child(3){ grid-column: 1 / -1; }
}
.glyphStatsLine{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.glyphWorst{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item.is-filtered-out{ display:none; }

/* Prevent long stats lines from pushing the score badge outside */
.item__top > div:first-child{min-width:0;}
.item__sub,.glyphStatsLine,.glyphWorst{overflow-wrap:anywhere;word-break:break-word;}
.glyphStatsLine{margin-top:6px;font-size:12px;color:var(--muted);}
.glyphWorst{margin-top:2px;font-size:12px;color:var(--muted);}

/* Sub-sections inside the "Поиск" card */
.subSectionSep{height:1px;background:var(--line);opacity:.6;margin:12px 0;}
.subSectionTitle{font-size:12px;font-weight:700;color:#0f172a;margin:4px 0 10px;}
/* Slightly differentiate hints from titles */
.hint{font-size:12px;line-height:1.4;}


/* v23: Collapsible glyph filter block */
.glyphFilter{
  border:0;
  padding:0;
  margin:0;
}
.glyphFilter__summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}

.glyphFilter__summary::-webkit-details-marker{display:none}
.glyphFilter__summary::before{
  content:"▸";
  font-size:12px;
  color:var(--muted);
  transform:translateY(-1px);
}
details[open].glyphFilter > .glyphFilter__summary::before{
  content:"▾";
}
.glyphFilter__content{
  padding-top:6px;
}
.glyphFilter__enable{
  margin:2px 0 10px;
}

.glyphFilter__enable--inline{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.glyphFilter__enable--inline span{
  font-size:12px;
  color:var(--muted);
}


/* v25: glyph filter header layout fixes */
.glyphFilter{ position: relative; }
.glyphFilter__summary{
  padding-right:72px; /* space for the right-side checkbox */
  min-height:34px; /* match icon button height for vertical centering */
}
.glyphFilter__summary::before{
  transform:none;
  width:14px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.glyphFilter__enable--inline{
  position:absolute;
  top:0;
  right:0;
  height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 2px;
}
/* ensure clicking checkbox does NOT toggle <details> */
.glyphFilter__enable--inline,
.glyphFilter__enable--inline *{
  cursor:pointer;
}

.glyphFilter__enable--inline{ margin:0; }


/* v26: glyph filter header (title near chevron + toggle always visible) */
.glyphFilter__summary{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding-right:0 !important;
  min-height:34px;
}
.glyphFilter__summary .subSectionTitle{
  margin:0 !important; /* subSectionTitle has bottom margin; breaks alignment inside summary */
}
.glyphFilter__title{
  display:inline-block;
}
.glyphFilter__summary::before{
  font-size:14px; /* a bit larger chevron */
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.glyphFilter__enable--inline{
  margin-left:auto !important;
  position:static !important;
  height:auto !important;
  padding:0 !important;
  gap:10px;
}


/* v29: prevent flicker during glyph-filter recompute */
.resultsUpdating{
  position: relative;
}
.resultsUpdating::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  z-index: 20;
  pointer-events: none;
}
.resultsUpdating::before{
  content:"Обновляю…";
  position:absolute;
  top:14px;
  right:16px;
  font-size: 13px;
  color: var(--muted);
  z-index: 21;
  pointer-events: none;
}

/* v29: equal line-height for 3 meta rows in cards */
.item__sub,
.glyphStatsLine,
.glyphWorst{
  line-height: 1.45;
}
.glyphStatsLine{
  margin-top: 2px;
}
.glyphWorst{
  margin-top: 2px;
}