/* JetMetrics Хаб знаний — раздел «Компиляции».
   Конфиг-driven вьюер: один движок (app.js) + этот style.css обслуживают
   любую подборку. Токены под .jm-comp, чтобы не течь в Tilda-страницу. */

@import url('https://jetmetrics-static.storage.yandexcloud.net/layout/fonts.css');

.jm-comp {
  --jm-green:#0E9C7D; --jm-green-press:#0B7D64; --jm-green-deep:#064D2B; --jm-green-tint:#E7F6F1;
  --jm-purple:#9370DB;
  --jm-ink:#080B0D; --jm-text:#20262E; --jm-muted:#6B7372; --jm-faint:#98A0A6;
  --jm-line:#E4E8EC; --jm-bg:#F6F8FA; --jm-surface:#FFFFFF;
  --jm-font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --jm-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --good-bg:#E7F6F1; --good-tx:#0B7D64; --mid-bg:#FFF4D6; --mid-tx:#9A7400; --bad-bg:#FDE9EA; --bad-tx:#D0353E;
  --e1:0 1px 2px rgba(8,11,13,.05); --e2:0 4px 14px rgba(8,11,13,.07); --e3:0 14px 36px rgba(8,11,13,.12);
  --ring:0 0 0 3px rgba(14,156,125,.28);
  --ease:cubic-bezier(.2,.6,.2,1); --dur:.17s;
  color-scheme:light;
  font-family:var(--jm-font); color:var(--jm-text); background:var(--jm-surface);
  max-width:1160px; margin:0 auto; padding:48px 24px 80px; box-sizing:border-box;
}
.jm-comp *,.jm-comp *::before,.jm-comp *::after{box-sizing:border-box;}

.jm-back{display:inline-flex; align-items:center; gap:6px; font-size:.9375rem; font-weight:600; color:var(--jm-muted); text-decoration:none; margin-bottom:18px; transition:color .15s;}
.jm-back:hover{color:var(--jm-green);}
.jm-back svg{flex:none;}
.jm-head{text-align:center; margin-bottom:28px;}
.jm-title{font-size:2rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0 0 8px; color:var(--jm-ink); text-wrap:balance;}
.jm-title .ac{color:var(--jm-green);}
.jm-sub{font-size:1.0625rem; color:var(--jm-muted); margin:0;}

.jm-controls{display:flex; flex-direction:column; gap:14px; margin-bottom:4px;}
.jm-search{position:relative; max-width:440px; margin:0 auto; width:100%;}
.jm-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--jm-faint); pointer-events:none;}
.jm-search input{width:100%; font-family:var(--jm-font); font-size:1rem; color:var(--jm-text); background:var(--jm-surface);
  padding:11px 16px 11px 40px; border:1px solid var(--jm-line); border-radius:var(--r-sm); outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.jm-search input::placeholder{color:var(--jm-faint);}
.jm-search input:focus{border-color:var(--jm-green); box-shadow:var(--ring);}

.jm-pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.jm-pill{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--jm-line);
  background:var(--jm-surface); color:var(--jm-muted); font-family:var(--jm-font); font-size:.875rem; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.jm-pill .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.jm-pill:hover{border-color:var(--jm-green); color:var(--jm-text);}
.jm-pill:focus-visible{outline:none; box-shadow:var(--ring);}
.jm-pill.active{background:var(--jm-green); border-color:var(--jm-green); color:#fff;}
.jm-pill.active .dot{background:#fff !important; opacity:.9;}

.jm-row2{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;}
.jm-selwrap{display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--jm-muted);}
.jm-selwrap select{font-family:var(--jm-font); font-size:.8125rem; color:var(--jm-text); background:var(--jm-surface);
  border:1px solid var(--jm-line); border-radius:var(--r-sm); padding:6px 26px 6px 10px; cursor:pointer; outline:none;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7372' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;}
.jm-selwrap select:focus{border-color:var(--jm-green); box-shadow:var(--ring);}

.jm-combo{position:relative; display:inline-flex;}
.jm-combo input{font-family:var(--jm-font); font-size:.8125rem; color:var(--jm-text); background:var(--jm-surface);
  border:1px solid var(--jm-line); border-radius:var(--r-sm); padding:6px 24px 6px 10px; width:170px; outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.jm-combo input::placeholder{color:var(--jm-faint);}
.jm-combo input:focus{border-color:var(--jm-green); box-shadow:var(--ring);}
.jm-combo-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none;
  color:var(--jm-faint); font-size:16px; line-height:1; cursor:pointer; padding:2px;}
.jm-combo-clear:hover{color:var(--jm-green);}
.jm-combo-clear[hidden]{display:none;}
.jm-combo-list{position:absolute; top:calc(100% + 4px); left:0; z-index:20; min-width:220px; max-height:260px; overflow-y:auto;
  background:var(--jm-surface); border:1px solid var(--jm-line); border-radius:var(--r-md); box-shadow:var(--e3); padding:4px;}
.jm-combo-list[hidden]{display:none;}
.jm-combo-opt{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:7px 10px; border-radius:var(--r-sm);
  font-size:.8125rem; color:var(--jm-text); cursor:pointer; white-space:nowrap;}
.jm-combo-opt:hover,.jm-combo-opt.hl{background:var(--jm-green-tint);}
.jm-combo-opt .cnt{color:var(--jm-faint); font-size:.75rem; font-variant-numeric:tabular-nums;}
.jm-combo-none{padding:8px 10px; font-size:.8125rem; color:var(--jm-faint);}

.jm-reset[hidden]{display:none;}
.jm-reset{background:none; border:none; color:var(--jm-muted); font-family:var(--jm-font); font-size:.8125rem; font-weight:500;
  cursor:pointer; padding:4px 8px; border-radius:6px;}
.jm-reset:hover{color:var(--jm-green); text-decoration:underline; text-underline-offset:3px;}

.jm-count{text-align:center; color:var(--jm-muted); font-size:.875rem; margin:22px 0 6px;}
.jm-count b{color:var(--jm-text); font-variant-numeric:tabular-nums;}

.jm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:18px; margin-top:14px;}
.jm-card{background:var(--jm-surface); border:1px solid var(--jm-line); border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; box-shadow:var(--e2); display:flex; flex-direction:column; text-align:left;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.jm-card:hover{transform:translateY(-2px); box-shadow:var(--e3); border-color:var(--jm-green);}
.jm-card:focus-visible{outline:none; box-shadow:var(--ring);}
.jm-card-body{padding:18px; display:flex; flex-direction:column; gap:9px; flex:1;}
.jm-eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:500; color:var(--jm-muted);}
.jm-eyebrow .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.jm-card-title{font-size:1.0625rem; font-weight:700; line-height:1.3; color:var(--jm-ink);}
.jm-card-desc{font-size:.875rem; line-height:1.5; color:var(--jm-muted); flex:1;}
.jm-card-foot{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px;}

.jm-badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px 3px 8px; border-radius:var(--r-pill);}
.jm-badge .bdot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.jm-badge.good{background:var(--good-bg); color:var(--good-tx);} .jm-badge.good .bdot{background:#12B48C;}
.jm-badge.mid{background:var(--mid-bg); color:var(--mid-tx);} .jm-badge.mid .bdot{background:#E0A400;}
.jm-badge.bad{background:var(--bad-bg); color:var(--bad-tx);} .jm-badge.bad .bdot{background:#FF5C60;}
.jm-badge.plain{background:var(--jm-bg); color:var(--jm-muted);} .jm-badge.plain .bdot{display:none;}

.jm-empty{max-width:420px; margin:64px auto; text-align:center; display:grid; gap:12px; justify-items:center;}
.jm-empty[hidden]{display:none;}
.jm-empty-ic{width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--jm-green-tint); color:var(--jm-green);}
.jm-empty h3{margin:0; font-size:1.125rem; font-weight:700; color:var(--jm-ink);}
.jm-empty p{margin:0; color:var(--jm-muted); font-size:.875rem;}

/* modal */
.jm-modal{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px;}
.jm-modal[hidden]{display:none;}
.jm-modal-bd{position:absolute; inset:0; background:rgba(8,11,13,.5); animation:jmfade .28s var(--ease);}
.jm-modal-ct{position:relative; background:var(--jm-surface); border-radius:var(--r-xl); max-width:620px; width:100%;
  max-height:88vh; overflow-y:auto; z-index:1; box-shadow:var(--e3); animation:jmpop .4s var(--ease);}
@keyframes jmfade{from{opacity:0}to{opacity:1}}
@keyframes jmpop{from{opacity:0; transform:scale(.98)}to{opacity:1; transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.jm-modal-bd,.jm-modal-ct{animation:none} .jm-card{transition:none}}
.jm-modal-close{position:absolute; top:16px; right:16px; background:var(--jm-bg); border:none; border-radius:50%;
  width:34px; height:34px; font-size:20px; line-height:1; cursor:pointer; color:var(--jm-muted); z-index:2;}
.jm-modal-close:hover{color:var(--jm-green); background:var(--jm-green-tint);}
.jm-modal-close:focus-visible{outline:none; box-shadow:var(--ring);}
.jm-modal-body{padding:32px 32px 28px; display:flex; flex-direction:column; gap:18px;}
.jm-modal-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:500; color:var(--jm-muted);}
.jm-modal-eyebrow .dot{width:8px; height:8px; border-radius:50%;}
.jm-modal-title{font-size:1.5rem; font-weight:800; line-height:1.15; color:var(--jm-ink); margin:0; letter-spacing:-.01em; text-wrap:balance;}
.jm-modal-desc{font-size:1rem; line-height:1.55; color:var(--jm-text); margin:0;}
.jm-sec{display:flex; flex-direction:column; gap:6px;}
.jm-sec-lbl{font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jm-faint);}
.jm-sec p{margin:0; font-size:.9375rem; line-height:1.6; color:var(--jm-text);}
.jm-example{background:var(--jm-green-tint); color:var(--jm-green-deep); border-radius:var(--r-md);
  padding:14px 16px; font-size:1rem; font-weight:600; line-height:1.4;}
.jm-metrics{display:flex; flex-wrap:wrap; gap:6px;}
.jm-metric{font-size:12px; font-weight:500; padding:4px 10px; border-radius:var(--r-pill); background:var(--jm-bg); color:var(--jm-text); border:1px solid var(--jm-line); cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);}
.jm-metric:hover{background:var(--jm-green-tint); border-color:var(--jm-green); color:var(--jm-green-deep);}
.jm-modal-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding-top:16px; border-top:1px solid var(--jm-line); font-size:.8125rem; color:var(--jm-muted);}
.jm-modal-meta b{font-weight:600; color:var(--jm-text);}
.jm-orig{display:inline-flex; align-items:center; gap:8px;}
.jm-orig .dots{display:inline-flex; gap:3px;}
.jm-orig i{width:7px; height:7px; border-radius:50%; background:var(--jm-line);}
.jm-orig i.on{background:var(--jm-purple);}

@media (max-width:520px){
  .jm-comp{padding:32px 16px 64px;}
  .jm-title{font-size:1.5rem;}
  .jm-grid{grid-template-columns:1fr; gap:14px;}
  .jm-modal-body{padding:28px 20px 24px;}
}