/* MomWalk · меню портала (v18.6): общее для index.html и gantt.html. Разметка — public/menu.js */
.top,.bnav,.bsheet{--deep:#0F5050;--teal:#19766D;--coral:#F47159;--coral-d:#E0583F;--ink:#173B4A;--white:#FFFFFF;--muted:#5B7078;--line:#E8DDD2;--line2:#F1E9E1;
  --teal-pale:#E6F2F0;--coral-pale:#FDE8E3;--green:#2E7D5B;--head:"Manrope",Arial,sans-serif;--shadow:0 10px 30px rgba(15,80,80,.08);font-family:"Inter",Arial,sans-serif;color:var(--ink)}
.top *,.bnav *,.bsheet *{box-sizing:border-box}
.top button,.bnav button{font:inherit;color:inherit;cursor:pointer}
.top{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0);box-shadow:0 2px 12px rgba(15,80,80,.05)}
.top-in{max-width:1180px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:54px;width:auto;display:block}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;text-decoration:none;color:var(--muted);padding:7px 13px;border-radius:999px;font:700 14px var(--head)}
.tabs a:hover{color:var(--deep);background:var(--teal-pale)}
.tabs a.on{background:var(--deep);color:#fff}
.tabs a .cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--coral);color:#fff;font-size:11px}
.me{flex:none;position:relative;margin-left:auto}
.me>button{background:var(--white);border:1.5px solid #BFD9D5;border-radius:999px;padding:5px 12px;color:var(--deep);font:600 13px var(--head)}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:210px;padding:6px;z-index:30}
.menu .who{padding:8px 10px 6px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line2);margin-bottom:4px}
.menu .who b{display:block;color:var(--ink);font-size:14px}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px}
.menu button:hover{background:var(--teal-pale)}
@media (max-width:640px){.top-in{flex-wrap:wrap;padding:8px 14px;gap:8px}.tabs{order:3;flex-basis:100%}.brand img{height:34px}}
/* шапка: компактные вкладки, справка — круглая кнопка «?» */
.top-in{gap:14px}
.tabs{gap:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:18px}
.tabs a{padding:7px 11px;font-size:14px}
.helpbtn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #BFD9D5;background:var(--white);color:var(--deep);font:800 16px var(--head);text-decoration:none}
.helpbtn:hover{background:var(--teal-pale)}
.helpbtn.on{background:var(--deep);border-color:var(--deep);color:#fff}
.me{margin-left:0}
@media (max-width:640px){.helpbtn{order:2;margin-left:auto}.me{order:2}}
@media (max-width:1240px) and (min-width:641px){.brand img{height:40px}.top-in{gap:10px;padding:8px 14px}.tabs a{padding:6px 8px;font-size:13px}.tabs a .cnt{margin-left:4px}}
/* v18.2: значки разделов справа и цветные цифры */
.icons{display:flex;gap:8px;flex:none}
.ibtn{flex:none;position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #BFD9D5;background:var(--white);font-size:16px;text-decoration:none}
.ibtn:hover{background:var(--teal-pale)}
.ibtn.on{background:var(--deep);border-color:var(--deep)}
.ibtn .cnt{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:#fff;font:700 11px/18px var(--head);text-align:center}
.cnt.red{background:var(--coral)!important;color:#fff!important}
.cnt.yellow{background:#E0A526!important;color:#fff!important}
@media (max-width:640px){.icons{order:2;margin-left:auto;gap:6px}.icons~.helpbtn{margin-left:0}.ibtn{width:32px;height:32px;font-size:15px}}
.tabs a{padding:7px 10px}
.me .ini{display:none}
@media (max-width:640px){.me .nm{display:none}.me .ini{display:inline}.me>button{padding:5px 9px}.icons{gap:4px}.ibtn{width:30px;height:30px;font-size:14px}.top-in{gap:8px}}
@media (max-width:640px){.top-in{gap:6px}.brand img{height:30px}}
/* v18.3: значки во вкладках, «живые» подсказки, нижняя панель на телефоне */
.tabs a{display:inline-flex;align-items:center;gap:6px}
.tabs a .ic{width:17px;height:17px;flex:none;opacity:.85}
.tabs a.on .ic{opacity:1}
.ibtn .ic{width:19px;height:19px;color:var(--deep)}
.ibtn.on .ic{color:#fff}
.ldot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:2px;flex:none}
.ldot.green{background:var(--green)}.ldot.yellow{background:#E0A526}.ldot.red{background:var(--coral)}
.live{margin-left:2px;padding:1px 7px;border-radius:9px;background:var(--teal-pale);color:var(--deep);font:700 11px/16px var(--head);white-space:nowrap}
.live.red{background:var(--coral-pale);color:var(--coral-d)}
.tabs a.on .live{background:rgba(255,255,255,.2);color:#fff}
.bnav,.bsheet{display:none}
@media (max-width:640px){
  .top .tabs{display:none}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(15,80,80,.06);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav a,.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;border:0;background:none;color:var(--muted);text-decoration:none;font:700 11px var(--head)}
  .bnav .ic{width:23px;height:23px}
  .bnav .on{color:var(--deep)}
  .bnav .on .ic{stroke-width:2.2}
  .bnav .cnt{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;font:700 10.5px/17px var(--head);text-align:center}
  .bnav .ldot{position:absolute;top:3px;left:calc(50% + 9px)}
  .bsheet:not([hidden]){display:block;position:fixed;left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:26;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px}
  .bsheet a{display:grid;grid-template-columns:26px auto 1fr;grid-template-areas:"i t c" "i s s";align-items:center;column-gap:8px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink)}
  .bsheet a+a{border-top:1px solid var(--line2)}
  .bsheet .ic{grid-area:i;width:22px;height:22px;color:var(--deep)}
  .bsheet b{grid-area:t;font:700 15px var(--head)}
  .bsheet .cnt,.bsheet .live,.bsheet .ldot{grid-area:c;justify-self:start}
  .bsheet .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 11px/18px var(--head);text-align:center}
  .bsheet small{grid-area:s;color:var(--muted);font-size:12px;line-height:1.35}
}
/* v18.3: одна строка — шапка во всю ширину экрана, логотип компактнее; где не хватает места, значки у вкладок прячутся, подсказки остаются */
@media (min-width:641px){
  .top-in{max-width:none;padding:8px 24px;gap:14px}
  .brand img{height:38px}
  .tabs{gap:2px}
  .tabs a{padding:7px 9px;gap:5px}
  .live{padding:1px 6px}
}
@media (min-width:641px) and (max-width:1499px){.tabs a .ic{display:none}}
@media (min-width:1025px) and (max-width:1279px){.tabs .live{display:none}.brand img{height:34px}.top-in{padding:8px 16px;gap:10px}}
/* планшет: как на телефоне — вкладки внизу экрана */
@media (min-width:641px) and (max-width:1024px){
  .top .tabs{display:none}
  .top-in{padding:8px 16px}
  .icons{margin-left:auto}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,80,80,.06);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav a,.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;border:0;background:none;color:var(--muted);text-decoration:none;font:700 12px var(--head)}
  .bnav .ic{width:24px;height:24px}
  .bnav .on{color:var(--deep)}
  .bnav .cnt{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;font:700 10.5px/17px var(--head);text-align:center}
  .bnav .ldot{position:absolute;top:3px;left:calc(50% + 9px)}
  .bsheet:not([hidden]){display:block;position:fixed;right:16px;width:360px;bottom:80px;z-index:26;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px}
  .bsheet a{display:grid;grid-template-columns:26px auto 1fr;grid-template-areas:"i t c" "i s s";align-items:center;column-gap:8px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink)}
  .bsheet a+a{border-top:1px solid var(--line2)}
  .bsheet .ic{grid-area:i;width:22px;height:22px;color:var(--deep)}
  .bsheet b{grid-area:t;font:700 15px var(--head)}
  .bsheet .cnt,.bsheet .live,.bsheet .ldot{grid-area:c;justify-self:start}
  .bsheet .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 11px/18px var(--head);text-align:center}
  .bsheet small{grid-area:s;color:var(--muted);font-size:12px;line-height:1.35}
}

