/* =====================================================================
   Приёмы из библиотек компонентов того же рода, что Arc Library. Все они на React + Tailwind,
   поэтому код не переносится: здесь та же разметка, состояния и движение, повторённые на CSS и чистом JS.
   - Radix Colors (https://www.radix-ui.com/colors) — шкалы цветов меток, файл radix-colors.css. MIT, (c) 2021 Radix.
   - Origin UI (https://coss.com/origin) — поля, селекты, загрузка файлов. MIT, (c) 2025 coss.com.
   - Animate UI (https://animate-ui.com) — Sliding Number, Accordion, Switch. MIT + Commons Clause, (c) 2025 Elliot Sutton.
   - Magic UI (https://magicui.design) — Border Beam, Confetti. MIT, (c) Magic UI.
   Тексты лицензий — *-LICENSE.txt рядом с этим файлом.
   Подключается последним, после beui.css.
   ===================================================================== */

/* ---------- Radix Colors: метки и колонки — фон шаг 3, рамка шаг 6, текст шаг 11 ---------- */
.tag[data-rx]{background:var(--rx3);color:var(--rx11);border-color:var(--rx6)}
.tag.col-tag[data-rx]{border-color:transparent}
.tag[data-rx] .dot{background:var(--rx9)!important}
.swatches{grid-template-columns:repeat(7,26px)}
.swatch{box-shadow:inset 0 0 0 1px oklch(0% 0 0 / .08)}
.swatch.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}

/* ---------- Origin UI: поля ввода и селекты ---------- */
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
/* своя стрелка вместо системной: одинаковая в светлой и тёмной теме */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
/* подсказка горячей клавиши внутри поля поиска (Input with kbd) */
.search .search-kbd{position:absolute;right:8px;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard)}
.search input:has(~ .search-kbd){padding-right:30px}
.search input:focus ~ .search-kbd,.search input:not(:placeholder-shown) ~ .search-kbd{opacity:0}
@media (max-width:820px){ .search .search-kbd{display:none} }

/* ---------- Origin UI: загрузка файлов (File upload) ---------- */
.dropzone{flex-direction:column;justify-content:center;text-align:center;gap:10px;min-height:132px;padding:20px;
  border:1.5px dashed var(--line-strong);border-radius:var(--r-panel);background:transparent;
  transition:background var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard)}
.dropzone:hover{background:var(--panel-2);border-color:var(--muted);color:var(--muted)}
.dropzone b{font-weight:600;color:var(--text)}
.dropzone u{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
.dropzone small{margin-top:3px}
.dz-ic{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  display:grid;place-items:center;color:var(--muted);transition:transform var(--spring-tip-dur) var(--spring-tip),color var(--dur)}
.dropzone:hover .dz-ic,.modal.file-over .dz-ic{transform:translateY(-2px);color:var(--text)}
.modal.file-over .dropzone{border-color:var(--text);background:var(--accent-soft)}
.field>label.dropzone{display:flex;font-size:inherit;font-weight:400;color:var(--muted);margin-bottom:0}
.dropzone.compact{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:12px 14px;border-radius:var(--r-control)}
.dropzone.compact .dz-ic{width:36px;height:36px}
/* в карточке задачи (вид «сбоку») — одна тихая строка, как и раньше */
.task-view .dropzone{flex-direction:row;min-height:0;padding:8px 12px;border-radius:var(--r-control)}
.task-view .dz-ic{width:auto;height:auto;border:0;background:none;box-shadow:none}
/* строки файлов: квадрат со значком типа, имя в одну строку, размер под ним */
.file-row{border-radius:var(--r-control);padding:7px 8px;gap:11px}
.file-row .thumb{border:1px solid var(--line);border-radius:9px}
.file-row .thumb[data-kind]{border-color:transparent}
.thumb[data-kind="img"]{background:var(--violet-3);color:var(--violet-11)}
.thumb[data-kind="sheet"]{background:var(--green-3);color:var(--green-11)}
.thumb[data-kind="arch"]{background:var(--amber-3);color:var(--amber-11)}
.thumb[data-kind="vid"]{background:var(--pink-3);color:var(--pink-11)}
.thumb[data-kind="aud"]{background:var(--cyan-3);color:var(--cyan-11)}
.thumb[data-kind="doc"]{background:var(--blue-3);color:var(--blue-11)}
.file-row .fmeta>a{font-weight:500;font-size:13.5px}
/* загрузка: проценты справа от имени и тонкая полоса под строкой */
#uploadProgress:not(:empty){display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.file-row.up-row{margin:0;font-size:13.5px}
.up-row .up-top{display:flex;gap:8px;align-items:baseline}
.up-row .up-name{font-weight:500}
.up-row .up-pct{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.file-row.up-row .bar{width:100%;height:4px;margin-top:6px}

/* ---------- Animate UI: Sliding Number ---------- */
.sliding{font-variant-numeric:tabular-nums}
.sn{display:inline-block;height:1lh;overflow:hidden;vertical-align:top}
.sn-s{display:flex;flex-direction:column;transform:translateY(calc(var(--d) * -1lh));transition:transform var(--spring-thumb-dur) var(--spring-thumb)}
.sn-s>span{height:1lh}
/* полосы прогресса доезжают до нового значения с пружиной (Progress) */
.bar>i{transition:width var(--spring-layout-dur) var(--spring-layout)}

/* ---------- Animate UI: Accordion — раскрывающиеся блоки плавно меняют высоту ---------- */
@supports selector(::details-content){
  details{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size var(--spring-panel-dur) var(--spring-panel),opacity var(--dur) var(--ease-standard),content-visibility var(--spring-panel-dur) allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
}

/* ---------- Animate UI: Switch — бегунок растягивается, пока кнопку держат ---------- */
input.switch::before{transition:translate var(--spring-thumb-dur) var(--spring-thumb),width var(--spring-swap-dur) var(--spring-swap),scale var(--spring-swap-dur) var(--spring-swap)}
input.switch:active::before{scale:none;width:21px}
input.switch:checked:active::before{translate:11px 0}

/* ---------- Magic UI: Border Beam — луч бежит по рамке там, где ждут новые заявки клиентов ---------- */
@property --beam-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.beam{position:relative;isolation:isolate}
.beam::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--beam-a),transparent 0 70%,color-mix(in oklab,var(--guest) 40%,transparent) 82%,var(--guest) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:beam-spin 5s linear infinite}
@keyframes beam-spin{to{--beam-a:360deg}}

/* ---------- Magic UI: Confetti ---------- */
canvas.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2000}

/* =====================================================================
   Единый стиль: каждый приём закреплён за одной ролью и повторяется везде, где эта роль встречается.
   1. Градиент Arc (--grad-ink) — «главное на экране»: заголовок страницы, логотип, заголовок обзора.
   2. Та же градиентная линия — «где я сейчас и сколько сделано»: активная вкладка, шаг мастера, нейтральный прогресс.
   3. Мягкий градиент (--grad-soft) — подсказки и сводки: все callout, полоса часов задачи.
   4. Пунктир + иконка в круге — «здесь пока пусто, сюда можно положить»: пустые состояния и зоны загрузки.
   5. Шеврон — все раскрывающиеся блоки одинаковые.
   ===================================================================== */
:root{--grad-mark:linear-gradient(135deg,oklch(50% .15 300),oklch(63% .14 50))}

/* 1. заголовки страниц и логотип */
.page-head h1,.rep-head h1{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.brand-mark{background:var(--grad-mark)!important}
.brand-mark svg{color:#fff}

/* 2. активная вкладка, шаг мастера и нейтральные полосы прогресса — одной градиентной линией */
.tabsbar .glider,.subnav .glider{background:var(--grad-ink)}
.tabsbar a.on,.subnav a.on{border-image:var(--grad-ink) 1}
.tabsbar.has-glider > a.on,.subnav.has-glider > a.on{border-image:none}
.stepper li.on{border-image:var(--grad-ink) 1}
.stepper li.on .n{background:var(--grad-ink)}
.bar>i{background:var(--grad-ink)}   /* «превышено» и «часы по задаче» остаются красными и зелёными — их правила специфичнее */

/* 3. подсказки — одна поверхность; предупреждение отличается только цветом заголовка */
.callout.warn{background:var(--grad-soft)}
.callout.warn b{color:var(--warn)}

/* 4. пустые состояния — как зона загрузки: пунктир и иконка в круге */
.empty{border:1.5px dashed var(--line-strong);background:transparent}
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8d8d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:var(--shadow)}

/* 5. раскрывающиеся блоки — шеврон, как у «Подробнее» в карточке */
details:not(.tv-more)>summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
details:not(.tv-more)>summary::-webkit-details-marker{display:none}
details:not(.tv-more)>summary::before{content:"";width:14px;height:14px;flex:none;background:currentColor;rotate:-90deg;transition:rotate var(--dur) var(--ease-standard);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
details:not(.tv-more)[open]>summary::before{rotate:0deg}

/* =====================================================================
   Контраст в обеих темах. Цвета проверены аудитом (Playwright + colorjs.io, APCA) и подобраны
   Adobe Leonardo: тёмная тема поднята до нормы APCA — обычный текст Lc 60+, приглушённый 70, бледный 62.
   Светлая тема проходила и осталась как в Arc.
   ===================================================================== */
:root{--on-solid:#fff}   /* текст на сплошной цветной заливке: кнопки, счётчики, отметки */
:root[data-theme="dark"]{
  --muted:oklch(83% 0 0); --faint:oklch(78.5% 0 0);
  --danger:oklch(80% .116 24); --danger-soft:oklch(80% .116 24 / .14);
  --guest:oklch(80% .113 293);
  --on-solid:oklch(18% 0 0);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --muted:oklch(83% 0 0); --faint:oklch(78.5% 0 0);
    --danger:oklch(80% .116 24); --danger-soft:oklch(80% .116 24 / .14);
    --guest:oklch(80% .113 293);
    --on-solid:oklch(18% 0 0);
  }
}
.btn.guest,.btn.danger-fill,.btn.accept-btn,.count-badge,.bell-count,.col.wip-over .cnt,.checklist .done .ck,.stepper li.done .n{color:var(--on-solid)}
/* выходной день — бледным цветом на подложке, а не прозрачностью всей плитки (прозрачность роняла контраст до Lc 23) */
.wk-day.off{opacity:1;background:var(--panel-2)}
.wk-day.off span,.wk-day.off b{color:var(--faint)}
.col-flag.guest{color:color-mix(in oklab,var(--guest) 78%,var(--text))}
/* мелкие цветные метки (11–11.5px): текст чуть подмешан к основному — в светлой теме темнее, в тёмной светлее;
   так они проходят и APCA (Lc 60), и WCAG (4.5:1), а оттенок остаётся */
.tag[data-rx]{color:color-mix(in oklab,var(--rx11) 80%,var(--text))}
.tag.guest{color:color-mix(in oklab,var(--guest) 80%,var(--text))}
.tag.warn{color:color-mix(in oklab,var(--warn) 75%,var(--text))}
.tag.ok,.col-flag.final{color:color-mix(in oklab,var(--ok) 80%,var(--text))}

/* ---------- группы доступа: матрица прав ---------- */
.acc-table td,.acc-table th{vertical-align:middle}
.acc-table .acc-col{text-align:center;width:150px}
.acc-table .acc-col input.switch{vertical-align:middle}
.acc-group td{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--panel-2)}
.acc-locked td b{color:var(--muted);font-weight:500}
.acc-lock{color:var(--faint);display:inline-flex}
.acc-yes{color:var(--ok);display:inline-flex}

/* на печати градиентный текст может пропасть — печатаем обычным цветом */
@media print{
  .page-head h1,.rep-head h1{background:none;color:#000}
  .empty::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .beam::after{animation:none;background:color-mix(in oklab,var(--guest) 45%,transparent)}
  .sn-s,.bar>i,.dz-ic{transition:none!important}
  details::details-content{transition:none!important}
}
@media print{ .beam::after{display:none} }