/* ============================================================
   BLMLI STUDIO — ОСНОВА ОБОЛОЧКИ
   Палитра построена на токенах Material 3: пары «поверхность —
   текст на ней» и два акцента. Светлая тема в :root, тёмная —
   в блоке переключателя. Остальные файлы стилей пользуются
   только этими переменными.
   ============================================================ */
:root{
  /* акценты */
  --m-primary:#7c5c34;      --m-on-primary:#ffffff;
  --m-primary-c:#dbc4a7;    --m-on-primary-c:#2a1a05;
  --m-secondary:#3f6558;    --m-on-secondary:#ffffff;
  --m-secondary-c:#b4e0cf;  --m-on-secondary-c:#05201a;

  /* поверхности */
  --m-surface:#f2f2f2;
  --m-s-lowest:#ffffff;
  --m-s-low:#f6f6f5;
  --m-s-cont:#ececea;
  --m-s-high:#e6e6e4;
  --m-s-highest:#e0e0dd;

  --m-on-surface:#1b1b1a;
  --m-on-variant:#4b4842;
  --m-outline:#7d7970;
  --m-outline-var:#cbc7bf;
  --m-canvas:#fafaf9;

  --m-hover:rgba(27,27,26,.08);
  --m-press:rgba(27,27,26,.12);
  --m-e1:0 1px 2px rgba(0,0,0,.16), 0 1px 3px 1px rgba(0,0,0,.08);
  --m-e2:0 1px 2px rgba(0,0,0,.16), 0 2px 6px 2px rgba(0,0,0,.08);
  --m-e3:0 1px 3px rgba(0,0,0,.16), 0 4px 8px 3px rgba(0,0,0,.10);

  /* трёхмерная сцена: линии рёбер своим цветом в каждой теме */
  --canvas-line:#4a4a4a;
}

/* Тёмная тема — переключатель в шапке и кнопки на вкладке «Интерфейс» */
#theme:checked ~ .app{
  --m-primary:#e5c39b;      --m-on-primary:#452b0b;
  --m-primary-c:#63482a;    --m-on-primary-c:#f8dfc0;
  --m-secondary:#a4cdbb;    --m-on-secondary:#0b3629;
  --m-secondary-c:#27493f;  --m-on-secondary-c:#c0ecda;

  --m-surface:#14130f;
  --m-s-lowest:#0e0d0b;
  --m-s-low:#1c1b18;
  --m-s-cont:#201f1c;
  --m-s-high:#2b2926;
  --m-s-highest:#363330;

  --m-on-surface:#e8e2d9;
  --m-on-variant:#d1c8bb;
  --m-outline:#9a9287;
  --m-outline-var:#4d4840;
  --m-canvas:#1a1916;

  --m-hover:rgba(232,226,217,.08);
  --m-press:rgba(232,226,217,.12);
  --m-e1:0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
  --m-e2:0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.3);
  --m-e3:0 1px 3px rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.35);

  --canvas-line:#d8d2c8;
}

/* ------------------------------------------------------------
   ПСЕВДОНИМЫ
   Короткие имена, которыми пользуются остальные файлы стилей.
   Объявлены на .app, а не в :root: значение со ссылкой var()
   вычисляется там, где объявлено, и в :root оно навсегда осталось
   бы светлым — тёмная тема меняет токены уже на .app.
   ------------------------------------------------------------ */
.app{
  --ui-bg:var(--m-surface);
  --ribbon-bg:var(--m-surface);
  --tabstrip-bg:var(--m-surface);
  --palette-bg:var(--m-s-low);
  --row-bg:var(--m-s-low);
  --row-alt:var(--m-s-cont);
  --text:var(--m-on-surface);
  --muted:var(--m-on-variant);
  --accent:var(--m-primary);
  --accent-soft:var(--m-secondary-c);
  --hover:var(--m-hover);
  --border:var(--m-outline-var);
  --border-soft:var(--m-outline-var);
  --panel-line:var(--m-outline-var);
  --select:var(--m-secondary);
  --shadow:var(--m-e2);
  --canvas:var(--m-canvas);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--m-surface);
  font:14px/1.45 "Barlow","Segoe UI Variable Text",system-ui,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  letter-spacing:.01em;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.vh{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  background:var(--m-surface);
  color:var(--text);
  overflow:hidden;
}

/* Заголовки разделов набраны узким шрифтом в верхнем регистре */
.cap{
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.07em;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{
  flex:none;display:flex;align-items:center;gap:10px;
  height:32px;padding:0 12px;
}
.topbar .menu-btn{
  display:grid;place-items:center;width:24px;height:24px;border-radius:12px;
  cursor:pointer;color:var(--m-on-variant);flex:none;
}
.topbar .menu-btn:hover{background:var(--m-hover)}
.topbar .menu-btn svg{width:18px;height:18px}

.topbar .brand{
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.06em;
  color:var(--text);user-select:none;flex:none;
}
.topbar .crumb{
  display:flex;align-items:center;gap:6px;height:22px;padding:0 10px;
  background:var(--m-s-cont);border-radius:11px;
  font-size:12px;color:var(--m-on-variant);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:38vw;
}
/* Часть с файлом модели — обёртка ради скрытия целиком: точка и имя
   файла остаются отдельными элементами ряда, с тем же промежутком */
.topbar .crumb-model{display:contents}
.topbar .crumb-model[hidden]{display:none}
.topbar .spacer{flex:1}

/* Счётчик элементов модели */
.count-pill{
  display:flex;align-items:center;gap:6px;height:22px;padding:0 11px;
  background:var(--m-secondary-c);color:var(--m-on-secondary-c);
  border-radius:11px;font-size:12px;font-weight:600;white-space:nowrap;
}
.count-pill::before{content:"";width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.8}

/* Переключатель языка */
.lang{display:flex;height:22px;border-radius:11px;overflow:hidden;background:var(--m-s-cont)}
.lang button{
  min-width:40px;height:22px;padding:0 11px;border:0;cursor:pointer;
  background:transparent;color:var(--m-on-variant);
  font:600 12px/1 "Barlow",system-ui,sans-serif;
}
.lang button:hover{background:var(--m-hover)}
.lang button.on{background:var(--m-secondary-c);color:var(--m-on-secondary-c)}

.icon-btn{
  display:grid;place-items:center;width:26px;height:26px;border-radius:13px;
  border:0;background:transparent;color:var(--m-on-variant);cursor:pointer;flex:none;
}
.icon-btn:hover{background:var(--m-hover)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.on{background:var(--m-secondary-c);color:var(--m-on-secondary-c)}
.icon-btn:disabled{opacity:.35;cursor:default;pointer-events:none}

/* Значок темы: половинки меняются местами вместе с темой */
.theme-toggle .dark-lbl{display:none}
#theme:checked ~ .app .theme-toggle .dark-lbl{display:block}
#theme:checked ~ .app .theme-toggle .light-lbl{display:none}

/* ============================================================
   ВКЛАДКИ ЛЕНТЫ
   ============================================================ */
.tabstrip{
  flex:none;display:flex;align-items:stretch;gap:0;
  height:36px;padding:0 12px;
  border-bottom:1px solid var(--m-outline-var);
  overflow-x:auto;scrollbar-width:none;
}
.tabstrip::-webkit-scrollbar{display:none}
.tabstrip label{
  display:flex;align-items:center;padding:0 22px;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--m-on-variant);cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.tabstrip label:hover{color:var(--text);background:var(--m-hover)}

#t1:checked ~ .app .tabstrip label[for="t1"],
#t2:checked ~ .app .tabstrip label[for="t2"],
#t3:checked ~ .app .tabstrip label[for="t3"],
#t4:checked ~ .app .tabstrip label[for="t4"],
#t5:checked ~ .app .tabstrip label[for="t5"],
#t6:checked ~ .app .tabstrip label[for="t6"],
#t7:checked ~ .app .tabstrip label[for="t7"],
#t8:checked ~ .app .tabstrip label[for="t8"],
#t9:checked ~ .app .tabstrip label[for="t9"],
#t10:checked ~ .app .tabstrip label[for="t10"]{
  color:var(--m-primary);border-bottom-color:var(--m-primary);
}

/* ============================================================
   ЛЕНТА
   ============================================================ */
.ribbon{
  flex:none;display:flex;align-items:stretch;gap:0;
  padding:6px 8px 0;min-height:84px;
  overflow-x:auto;scrollbar-width:thin;
}
.ribbon .panels{display:none;gap:0}
#t1:checked ~ .app .ribbon #p1,
#t2:checked ~ .app .ribbon #p2,
#t3:checked ~ .app .ribbon #p3,
#t4:checked ~ .app .ribbon #p4,
#t5:checked ~ .app .ribbon #p5,
#t6:checked ~ .app .ribbon #p6,
#t7:checked ~ .app .ribbon #p7,
#t8:checked ~ .app .ribbon #p8,
#t9:checked ~ .app .ribbon #p9,
#t10:checked ~ .app .ribbon #p10{display:flex}

/* Группа кнопок: подпись снизу, разделитель справа */
.panel{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2px 14px 4px;position:relative;
}
.panel + .panel::before{
  content:"";position:absolute;left:0;top:6px;bottom:8px;
  border-left:1px solid var(--m-outline-var);
}
.panel-body{display:flex;align-items:flex-start;gap:2px}
.panel-cap{
  margin-top:2px;text-align:center;
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  font-size:10.5px;letter-spacing:.075em;text-transform:uppercase;
  color:var(--m-on-variant);
}

/* Кнопка ленты: значок в скруглённой площадке, подпись под ним */
.btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:80px;padding:4px 3px 5px;border:0;border-radius:12px;
  background:transparent;color:var(--m-on-variant);
  font:inherit;font-size:11px;line-height:1.15;text-align:center;
  cursor:pointer;position:relative;
}
.btn .pad{
  display:grid;place-items:center;width:44px;height:24px;border-radius:12px;
  color:var(--m-on-variant);
}
.btn .ico{width:22px;height:22px;display:block}
.btn .lbl{display:block;max-width:100%;overflow-wrap:normal;hyphens:auto}
.btn:hover .pad{background:var(--m-hover)}
.btn:hover{color:var(--text)}
.btn.on .pad,
.btn:active .pad{background:var(--m-secondary-c);color:var(--m-on-secondary-c)}
.btn.on{color:var(--text)}

/* Всплывающая подсказка кнопки */
.btn .tip{
  display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;
  width:230px;padding:8px 10px;text-align:left;
  background:var(--m-s-lowest);color:var(--text);
  border:1px solid var(--m-outline-var);border-radius:10px;box-shadow:var(--m-e2);
  font-size:11.5px;line-height:1.4;
}
.btn:hover .tip{display:block}
.btn .tip b{display:block;margin-bottom:3px;font-size:12px}
.btn .tip kbd{
  display:inline-block;margin-top:5px;padding:1px 5px;border-radius:4px;
  background:var(--m-s-cont);font:inherit;font-size:11px;color:var(--m-on-variant);
}

/* Вкладка без инструментов */
.ribbon .empty-tab{
  display:flex;align-items:center;padding:0 18px;
  color:var(--m-on-variant);font-size:13px;
}

/* ============================================================
   МЕНЮ ПРИЛОЖЕНИЯ
   Открывается чекбоксом #filemenu из шапки: затемнение и
   диалог по центру экрана.
   ============================================================ */
.fm-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.42);display:none}
#filemenu:checked ~ .app .fm-scrim{display:block}

.filemenu{
  position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);
  display:none;width:min(640px,94vw);max-height:86vh;overflow:auto;
  padding:22px 22px 18px;
  background:var(--m-s-high);color:var(--text);
  border-radius:28px;box-shadow:var(--m-e3);
}
#filemenu:checked ~ .app .filemenu{display:block}

.filemenu .fm-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.filemenu .fm-head .mark{
  display:grid;place-items:center;width:40px;height:40px;border-radius:20px;
  background:var(--m-secondary-c);color:var(--m-on-secondary-c);
}
.filemenu .fm-head .mark svg{width:20px;height:20px}
.filemenu .fm-head h3{flex:1;margin:0;font-size:21px;font-weight:500;letter-spacing:0}
.filemenu .fm-head .close{
  display:grid;place-items:center;width:36px;height:36px;border-radius:18px;
  font-size:16px;color:var(--m-on-variant);cursor:pointer;
}
.filemenu .fm-head .close:hover{background:var(--m-hover)}

.fm-cmds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fm-cmds button{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;
  text-align:left;font:inherit;font-size:14px;color:var(--text);
  background:var(--m-s-low);border:0;border-radius:16px;cursor:pointer;
}
.fm-cmds button:hover{background:var(--m-s-lowest)}
/* «Печать» вне вкладки листа (031) */
.fm-cmds button:disabled{opacity:.45;cursor:default;background:var(--m-s-low)}
.fm-cmds button svg{width:19px;height:19px;flex:none;color:var(--m-primary)}
.fm-cmds .div{grid-column:1 / -1;height:1px;margin:4px 2px;background:var(--m-outline-var)}

.fm-recent{margin-top:16px}
.fm-recent h4{
  margin:0 0 6px;padding:0 6px;
  font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-primary);
}
.fm-recent a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:6px 14px;border-radius:14px;
  color:var(--text);text-decoration:none;font-size:13.5px;
}
.fm-recent a:hover{background:var(--m-hover)}
.fm-recent a span{
  flex:none;max-width:52%;font-size:12px;color:var(--m-on-variant);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fm-foot{display:flex;justify-content:flex-end;padding-top:12px}
.fm-foot label{
  height:40px;padding:0 22px;display:grid;place-items:center;border-radius:20px;
  background:var(--m-primary);color:var(--m-on-primary);
  font-weight:600;font-size:14px;cursor:pointer;
}
.fm-foot label:hover{filter:brightness(1.08)}

/* ============================================================
   РАБОЧАЯ ОБЛАСТЬ И СТРОКА СОСТОЯНИЯ
   ============================================================ */
.workspace{
  flex:1;display:flex;gap:8px;padding:8px;min-height:0;position:relative;
}
.statusbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:28px;padding:0 16px;
  font-size:12.5px;color:var(--m-on-variant);
}
.statusbar .sb-left,.statusbar .sb-right{
  display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.statusbar .dot{display:inline-block;width:7px;height:7px;border-radius:4px;background:var(--m-secondary);flex:none}
.statusbar .sep{opacity:.5}
.app.no-status .statusbar{display:none}

/* Кнопка выдвижной панели и затемнение — только на телефоне */
.scrim{display:none}