/* Визия „monument“ (Настройки → Моят акаунт → Визия на сайта). Активна е само при <html data-skin="monument">.
   По макета „ArchTracks Monument“: топъл каменен фон, тъмна горскозелена лента вляво (на компютър), тъмнозелен основен бутон,
   пясъчен акцент в тъмната тема. Оформлението (лента, карти, полета, долно меню) идва от atlas.css – тук са само цветовете и шрифтът.
   Шрифт за заглавия, числа и логото: „Вилка“ (VilkaVF, Светлин Балездров, SIL OFL 1.1 – public/vilka/OFL.txt), има кирилица;
   обикновеният текст остава Onest, за да се чете лесно в таблиците. */
@font-face{font-family:Vilka;font-style:normal;font-weight:400 900;font-display:swap;src:url(/vilka/VilkaVF.woff2) format('woff2')}
:root[data-skin=monument]{color-scheme:light;--bg:#F2EEE6;--card:#FBF9F5;--pop:#fff;--inp:#fff;--tx:#1B211D;--mu:#6B6A61;--ac:#1F3B30;--ach:#152B22;--onac:#fff;--ac2:#E6E8DF;--bd:#DDD7CB;--ok:#2F7A52;--wn:#9C6410;--bad:#B23B2C;--seg:#E8E3D8;--hd:#13241D;--mk:#C9B48A;--onst:#fff;--pbg:#1B3329;--ptx:#F6F3EC;--glow:rgba(31,59,48,.2);--sh:none;--obj1:#EEECE3;--obj2:#EEECE3;--objb:#D6D1C3;--lime:#2F4D3F;--onlime:#fff;--side:#13241D;--sidetx:#B8C2B9;--sidehv:#1D3329;--sideln:#2A3F35;--mbtn:#CFC8B9;--mfont:Vilka,"Onest",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root[data-skin=monument]:not([data-theme=light]){color-scheme:dark;--bg:#0F1411;--card:#161D19;--pop:#1B231F;--inp:#0F1411;--tx:#ECE8DF;--mu:#A29F94;--ac:#CDB78C;--ach:#DDCBA6;--onac:#17140E;--ac2:rgba(205,183,140,.12);--bd:#29312C;--ok:#62C08C;--wn:#E0AC4C;--bad:#EE7B67;--seg:#222A25;--hd:#0A0F0C;--onst:#0B110E;--pbg:#E9E2D3;--ptx:#13201A;--glow:rgba(205,183,140,.25);--obj1:rgba(205,183,140,.08);--obj2:rgba(205,183,140,.05);--objb:rgba(205,183,140,.22);--lime:#CDB78C;--onlime:#17140E;--side:#0A0F0C;--sidetx:#A3ACA4;--sidehv:#16201B;--sideln:#1F2A24;--mbtn:#36403A}}
:root[data-skin=monument][data-theme=dark]{color-scheme:dark;--bg:#0F1411;--card:#161D19;--pop:#1B231F;--inp:#0F1411;--tx:#ECE8DF;--mu:#A29F94;--ac:#CDB78C;--ach:#DDCBA6;--onac:#17140E;--ac2:rgba(205,183,140,.12);--bd:#29312C;--ok:#62C08C;--wn:#E0AC4C;--bad:#EE7B67;--seg:#222A25;--hd:#0A0F0C;--onst:#0B110E;--pbg:#E9E2D3;--ptx:#13201A;--glow:rgba(205,183,140,.25);--obj1:rgba(205,183,140,.08);--obj2:rgba(205,183,140,.05);--objb:rgba(205,183,140,.22);--lime:#CDB78C;--onlime:#17140E;--side:#0A0F0C;--sidetx:#A3ACA4;--sidehv:#16201B;--sideln:#1F2A24;--mbtn:#36403A}
/* шрифтът „Вилка“: широк и наклонен – за заглавия, логото, числата в обобщенията и избрания раздел */
:root[data-skin=monument] :is(h1,h2,h3,.pgt,.brand b,.stat b,.lg-form h1,.lg-form h2){font-family:var(--mfont);font-weight:400;letter-spacing:.01em}
:root[data-skin=monument] :is(h1,h2,h3) :is(.badge,.meta,small,button){font-family:"Onest",system-ui,sans-serif}
:root[data-skin=monument] .pgt{font-weight:450;font-size:calc(var(--fs-x) + 4px)}
:root[data-skin=monument] .brand b{font-weight:550;letter-spacing:.03em}
:root[data-skin=monument] .stat b{font-weight:450}
/* на телефона имената на проектите са малко по-дребни – шрифтът е широк */
@media(max-width:600px){:root[data-skin=monument] .task h3{font-size:var(--fs-b)}:root[data-skin=monument] :is(h1,h2,h3,.pgt){overflow-wrap:anywhere}:root[data-skin=monument] .lg-form :is(h1,h2){font-size:var(--fs-l)}}
:root[data-skin=monument] .hd .ini{background:#C9B48A;color:#13241D}
:root[data-skin=monument] .lg-art{--mk:#C9B48A}
/* малко по-меки ъгли от atlas, както в макета */
:root[data-skin=monument] :is(.cx,.ph,.attn,.fc,.stats,.empty,.kcat,.gt,.sgd,details.ctg,.mod,.tw,.note,.dlg,.spb,.ump,.nfp,.tr-pop,.ar-p){border-radius:8px}
:root[data-skin=monument] :is(.task,.kt>*,.kcard,.sgc,.sgh,.sub){border-radius:6px}
:root[data-skin=monument] .btn{border-radius:6px;border-color:var(--mbtn)}
:root[data-skin=monument] .btn.p:hover{filter:brightness(1.25)}
:root[data-skin=monument] .kt>.on{box-shadow:0 0 0 2px var(--mk)}
:root[data-skin=monument] .note{border-left-color:var(--mk)}
:root[data-skin=monument] .of-obj{border-left-color:#9C8A64}
:root[data-skin=monument] th{letter-spacing:.1em}
/* избраният раздел в лентата: по-светло зелено с бял текст (в тъмна тема – пясъчно) */
:root[data-skin=monument] .nav button.on{border-bottom-color:var(--mk)}
/* поздрав над проектите: „Добре дошли, Име“ с каменна сграда с арки (рисунка, следва темата) и числата под него */
:root[data-skin=monument]{--mh-k:#EFE7DA;--mh-u:#F7F1E6;--mh-s:#D9CDB7;--mh-s2:#C3B497;--mh-o:#5F4C38;--mh-d:#9C8C70;--mh-t:#5D6B4B;--mh-g:#CFC2A9}
@media(prefers-color-scheme:dark){:root[data-skin=monument]:not([data-theme=light]){--mh-k:#18201C;--mh-u:#26302A;--mh-s:#3B3C34;--mh-s2:#2E2F28;--mh-o:#0E120F;--mh-d:#4E4D42;--mh-t:#2F3D2E;--mh-g:#222520}}
:root[data-skin=monument][data-theme=dark]{--mh-k:#18201C;--mh-u:#26302A;--mh-s:#3B3C34;--mh-s2:#2E2F28;--mh-o:#0E120F;--mh-d:#4E4D42;--mh-t:#2F3D2E;--mh-g:#222520}
:root[data-skin=monument] :is(.mh-a,.mc-art) .k{fill:var(--mh-k)}:root[data-skin=monument] :is(.mh-a,.mc-art) .u{fill:var(--mh-u)}
:root[data-skin=monument] :is(.mh-a,.mc-art) .s{fill:var(--mh-s)}:root[data-skin=monument] :is(.mh-a,.mc-art) .s2{fill:var(--mh-s2)}
:root[data-skin=monument] :is(.mh-a,.mc-art) .o{fill:var(--mh-o)}:root[data-skin=monument] :is(.mh-a,.mc-art) .d{fill:var(--mh-d)}
:root[data-skin=monument] :is(.mh-a,.mc-art) .t{fill:var(--mh-t)}:root[data-skin=monument] :is(.mh-a,.mc-art) .g{fill:var(--mh-g)}
:root[data-skin=monument] .mc-art .l{stroke:var(--mh-s2);stroke-width:3;fill:none}
:root[data-skin=monument] .mh{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:230px;background:var(--card);border:1px solid var(--bd);border-bottom:0;border-radius:8px 8px 0 0;overflow:hidden}
:root[data-skin=monument] .mh-t{padding:34px 32px 26px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
:root[data-skin=monument] .mh-k{font-size:var(--fs-s);letter-spacing:.32em;text-transform:uppercase;color:var(--mu)}
:root[data-skin=monument] .mh-n{font-family:var(--mfont);font-size:clamp(34px,5vw,58px);font-weight:400;line-height:1.05;margin:8px 0 12px;overflow-wrap:anywhere}
:root[data-skin=monument] .mh-t p{margin:0;color:var(--mu);font-size:var(--fs-m)}
:root[data-skin=monument] .mh-a{width:100%;height:100%;display:block}
:root[data-skin=monument] .stats.mh-s{border-radius:0 0 8px 8px;margin-bottom:18px}
:root[data-skin=monument] .mh-s .stat{border-radius:0;box-shadow:none;flex:none;background:none;border:0;border-right:1px solid var(--bd);text-align:left;font:inherit;color:inherit;cursor:pointer;padding:16px 22px}
:root[data-skin=monument] .mh-s .stat:last-child{border-right:0}
:root[data-skin=monument] .mh-s .stat:hover{background:var(--ac2)}
:root[data-skin=monument] .mh-s .stat b{font-size:var(--fs-h)}
@media(max-width:700px){
:root[data-skin=monument] .mh{grid-template-columns:1fr;min-height:0}
:root[data-skin=monument] .mh-t{padding:22px 20px 14px}
:root[data-skin=monument] .mh-a{height:120px}
:root[data-skin=monument] .stats.mh-s{grid-template-columns:1fr 1fr}
:root[data-skin=monument] .mh-s .stat{padding:12px 16px;border-bottom:1px solid var(--bd)}
:root[data-skin=monument] .mh-s .stat:nth-child(2n){border-right:0}
:root[data-skin=monument] .mh-s .stat:nth-child(n+3){border-bottom:0}
:root[data-skin=monument] .mh-s .stat b{font-size:var(--fs-x)}
}
/* дъска: един статус наведнъж, проектите са карти с рисунка и лента за напредък */
:root[data-skin=monument] .mb-k{margin:8px 0 14px;flex-wrap:wrap}
:root[data-skin=monument] .mb-k .kn{opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
:root[data-skin=monument] .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
:root[data-skin=monument] .mgrid.one{grid-template-columns:1fr}
:root[data-skin=monument] .mcard{background:var(--card);border:1px solid var(--bd);border-radius:8px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
:root[data-skin=monument] .mcard:hover{border-color:var(--mu)}
:root[data-skin=monument] .mcard:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
:root[data-skin=monument] .mcard.late{box-shadow:inset 0 3px 0 var(--bad)}:root[data-skin=monument] .mcard.soon{box-shadow:inset 0 3px 0 var(--wn)}
:root[data-skin=monument] .mc-art{display:block;width:100%;height:130px}
:root[data-skin=monument] .mc-b{padding:14px 16px 14px;display:flex;flex-direction:column;gap:4px}
:root[data-skin=monument] .mc-b>b{font-family:var(--mfont);font-weight:400;font-size:var(--fs-m);line-height:1.3}
:root[data-skin=monument] .mc-b>b .meta{font-family:"Onest",system-ui,sans-serif}
:root[data-skin=monument] .mc-p{height:4px;background:var(--seg);border-radius:2px;margin-top:10px;overflow:hidden}
:root[data-skin=monument] .mc-p i{display:block;height:100%;background:var(--ac);border-radius:2px}
:root[data-skin=monument] .mc-f{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-s);color:var(--mu)}
:root[data-skin=monument] .mcard .kmv{margin-top:8px}
/* раздели на проекта и изгледите – хапчета, избраното е плътно тъмнозелено (в тъмна тема – светло) */
:root[data-skin=monument] .tabs.tg{border-bottom:0;gap:6px 16px}
:root[data-skin=monument] .tabs button{border:1px solid transparent;border-radius:6px;color:var(--mu);padding:7px 14px}
:root[data-skin=monument] .tabs button:hover:not(.on){background:var(--seg);color:var(--tx)}
:root[data-skin=monument] .tabs button.on{background:var(--pbg);color:var(--ptx);border-color:var(--pbg);font-weight:600}
:root[data-skin=monument] .tgl{padding:0 4px;letter-spacing:.2em}
/* лентата вляво: името и ролята до знака на профила, както в макета */
@media(min-width:1061px){
:root[data-skin=monument] .hd:has(.nav) .who .umw{display:flex;align-items:center;gap:10px;flex:1 1 100%;order:-1;margin-bottom:6px}
:root[data-skin=monument] .hd:has(.nav) .who .um-n{display:flex;flex-direction:column;min-width:0;color:#EEF0EA;font-size:var(--fs-b);line-height:1.25}
:root[data-skin=monument] .hd:has(.nav) .who .um-n small{color:var(--sidetx);font-size:var(--fs-s)}
}
:root[data-skin=monument] .um-n{display:none}
:root[data-skin=monument] .mb-k .kn{border:0;background:none;color:inherit;padding:0;min-width:0}
:root[data-skin=monument] .mc-f .due{display:inline;text-align:left;font-size:var(--fs-s);margin:0}
/* снимки от папка „3D“ на диска: върху рисунката, при няколко – плавно се сменят */
:root[data-skin=monument] .mc-ph{position:relative;height:130px;overflow:hidden;background:var(--mh-k)}
:root[data-skin=monument] .mc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
:root[data-skin=monument] .mc-ph img.on{opacity:1}
@media(prefers-reduced-motion:reduce){:root[data-skin=monument] .mc-ph img{transition:none}}
/* „Всички“ в дъската: малък етикет със статуса на всяка карта */
:root[data-skin=monument] .mc-st{display:inline-block;font-size:var(--fs-s);font-weight:600;color:var(--tx)}
:root[data-skin=monument] .mc-st.mc-wip{color:var(--wn)}:root[data-skin=monument] .mc-st.mc-rdy{color:var(--ac)}:root[data-skin=monument] .mc-st.mc-dlv{color:var(--ok)}
/* „Изисква внимание“ – компактен ред вместо каре */
:root[data-skin=monument] .mattn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-6px 0 14px;font-size:var(--fs-b)}
:root[data-skin=monument] .mattn-h{font-size:var(--fs-s);letter-spacing:.2em;text-transform:uppercase;color:var(--mu);font-weight:600;margin-right:4px}
:root[data-skin=monument] .mat{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--fs-b);color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:4px 12px;cursor:pointer;min-height:0}
:root[data-skin=monument] span.mat{cursor:default}
:root[data-skin=monument] button.mat:hover{border-color:var(--mu)}
:root[data-skin=monument] .mat.on{border-color:var(--tx)}
:root[data-skin=monument] .mat .dot{width:8px;height:8px;border-radius:50%;flex:none}
:root[data-skin=monument] .mattn-s{margin-left:auto;font-size:var(--fs-s)}
@media(max-width:700px){:root[data-skin=monument] .mattn-s{margin-left:0;flex-basis:100%}}