/* Карта профессий CG. Значения ниже — запасные: цвета и скругления сайт берёт из админки
   («Карта профессий» → «Тексты и оформление» → «Оформление») и подставляет скриптом. */
.cgm{
  --font:'Golos Text',Arial,sans-serif;
  --accent:#43418a;--accent-light:#e9e9f5;--text:#111111;--muted:#6b6b6b;
  --card:#f1f1f1;--line:#111111;--ask-bg:#000000;--ask-text:#ffffff;--note-bg:#e9edf6;
  --map-bg:#ffffff;--frame-bg:#fafafa;--frame-border:#dddddd;
  --map-height:clamp(420px,74vh,760px);--radius:12px;--card-radius:0px;
}
body{margin:0;padding:28px 0 48px;background:#fff}
.cgm{color:var(--text);font-family:var(--font);max-width:1200px;margin:0 auto;padding:0 16px;box-sizing:border-box;position:relative}
.cgm *{box-sizing:border-box}
.cgm .ttl{font-size:clamp(22px,3.2vw,32px);margin:0 0 6px;font-weight:600;letter-spacing:-.01em;color:inherit}
.cgm .sub{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.4}
.cgm .wrap{position:relative}
.cgm .vp{position:relative;height:var(--map-height);border:1px solid var(--frame-border);border-radius:var(--radius);overflow:hidden;
  background:var(--frame-bg);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cgm .vp.drag{cursor:grabbing}
/* ширина сцены — по самой длинной строке карты, так что новые профессии не вылезают за край */
.cgm .stage{position:absolute;left:0;top:0;transform-origin:0 0;width:max-content;padding:14px;background:var(--map-bg);will-change:transform}
.cgm .grid{display:flex;gap:8px}
.cgm .ask{width:120px;flex:none;background:var(--ask-bg);color:var(--ask-text);font-weight:600;font-size:16px;overflow-wrap:break-word;line-height:1.2;
  display:flex;align-items:center;padding:0 14px}
.cgm .rows{flex:1;display:flex;flex-direction:column;gap:5px}
.cgm .row{display:flex;align-items:stretch;gap:6px;min-height:56px}
.cgm .arr{width:34px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px}
.cgm .int{width:168px;flex:none;border:2px solid var(--line);background:var(--map-bg);display:flex;align-items:center;
  justify-content:center;text-align:center;font-weight:600;font-size:14px;line-height:1.2;padding:6px 8px;cursor:pointer;
  font-family:inherit;color:inherit;transition:background .15s,color .15s}
.cgm .int:hover{background:var(--accent-light)}
.cgm .int.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.cgm .chips{display:flex;gap:6px;align-items:stretch}
.cgm .chip{display:flex;width:150px;background:var(--card);border:2px solid transparent;border-radius:var(--card-radius);cursor:pointer;padding:0;
  text-align:left;font-family:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.cgm .chip:hover{border-color:var(--accent)}
.cgm .chip.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.cgm .chip.dim{opacity:.35}
.cgm .chip .n{width:28px;flex:none;background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  display:flex;align-items:flex-start;justify-content:center;padding-top:6px}
.cgm .chip .t{min-width:0;overflow-wrap:break-word;hyphens:auto;padding:6px 7px;font-size:12px;font-weight:600;line-height:1.2;display:flex;flex-direction:column;justify-content:center}
.cgm .chip .t small{font-weight:400;color:var(--muted);font-size:10.5px;margin-top:3px;line-height:1.15}
.cgm .note{margin-top:10px;padding:6px 10px;background:var(--note-bg);font-size:12.5px;width:0;min-width:100%}
.cgm .tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.cgm .tools button{width:38px;height:38px;border-radius:10px;border:1px solid #ccc;background:#fff;font-size:20px;
  line-height:1;cursor:pointer;color:var(--text);font-family:inherit}
.cgm .tools button:hover{background:var(--accent-light)}
.cgm .hint{position:absolute;left:10px;top:10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.9);
  padding:4px 8px;border-radius:8px;z-index:3;pointer-events:none}
.cgm .mine{margin-top:12px;font-size:14px;min-height:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cgm .mine b{font-weight:600}
.cgm .mine .ph{color:var(--muted)}
.cgm .mine .chip{width:auto;font-size:13px}
.cgm .mine .chip .n{width:30px;align-items:center;padding:0}
.cgm .mine .chip .t{padding:5px 8px;flex-direction:row;align-items:center;gap:6px}
.cgm .mine .cnt{color:var(--muted);font-weight:400;font-size:12px}
.cgm .mine button.clr{border:0;background:none;color:var(--accent);cursor:pointer;font-size:13px;text-decoration:underline;font-family:inherit}
.cgm .panel{position:absolute;z-index:5;background:#fff;color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:auto;
  transition:transform .22s ease,opacity .22s ease;padding:22px 22px 20px;
  right:10px;top:10px;bottom:10px;width:min(400px,92%);border-radius:var(--radius);
  transform:translateX(24px);opacity:0;pointer-events:none}
.cgm .panel.open{transform:none;opacity:1;pointer-events:auto}
.cgm .panel .x{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f1f1;
  font-size:18px;cursor:pointer;font-family:inherit;color:var(--text)}
.cgm .panel .num{display:inline-block;background:var(--accent);color:#fff;font-weight:600;padding:3px 12px;font-size:16px}
.cgm .panel h3{margin:10px 28px 2px 0;font-size:22px;line-height:1.2;color:inherit}
.cgm .panel .en{color:var(--muted);font-size:14px;margin-bottom:12px}
.cgm .panel p{margin:0 0 14px;font-size:15.5px;line-height:1.5}
.cgm .panel .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 6px;font-weight:600}
.cgm .tag{display:inline-block;background:var(--accent-light);color:var(--accent);padding:4px 10px;border-radius:99px;font-size:13px;margin:0 6px 6px 0}
.cgm .tag.lnk{cursor:pointer;border:0;font-family:inherit}
.cgm .tag.lnk:hover{background:var(--accent);color:#fff}
.cgm .grp{font-size:13px;color:var(--muted);line-height:1.4}
.cgm .nav{display:flex;justify-content:space-between;gap:8px;margin-top:16px}
.cgm .nav button{flex:1;border:1px solid #ccc;background:#fff;border-radius:10px;padding:9px 6px;cursor:pointer;font-size:13px;font-family:inherit;color:var(--text)}
.cgm .nav button:hover{background:var(--accent-light)}
@media (max-width:700px){
  .cgm .panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:68vh;border-radius:16px 16px 0 0;position:fixed;
    transform:translateY(100%)}
  .cgm .panel.open{transform:none}
  .cgm .hint{display:none}
}