/* =====================================================================
   Стиль в духе Arc Library (https://github.com/kuratlielia/arc-library)
   Палитра, радиусы, тени и кривые анимации взяты из registry/foundation.css
   и стилей компонентов Arc (button, card, dialog, segmented-control).
   Arc Library — MIT License, Copyright (c) 2026 Elia Kuratli.
   Подключается после app.css и переопределяет его переменные.
   ===================================================================== */

:root{
  /* Arc: нейтральная палитра oklch */
  --bg:oklch(98.4% 0 0); --panel:oklch(100% 0 0); --panel-2:oklch(97.8% 0 0); --col:oklch(96.4% 0 0);
  --text:oklch(15% 0 0); --muted:oklch(46% 0 0); --faint:oklch(54% 0 0);
  --line:oklch(93.5% 0 0); --line-strong:oklch(84% 0 0); --card-hover:oklch(86% 0 0);
  --accent:oklch(23% 0 0); --accent-h:oklch(33% 0 0); --accent-soft:oklch(33% 0 0 / .07); --accent-fg:oklch(100% 0 0);
  --danger:oklch(54% .21 25); --danger-soft:oklch(54% .21 25 / .09);
  --ok:oklch(49% .19 150); --ok-soft:oklch(49% .19 150 / .1);
  --warn:oklch(58% .18 75); --warn-soft:oklch(58% .18 75 / .12);
  --guest:#7747ff; --guest-soft:rgb(119 71 255 / .1);
  --cfg:oklch(47% .1 300); --cfg-soft:oklch(96.5% .022 300);
  --toast:oklch(20% 0 0); --overlay:oklch(10% 0 0 / .42);
  --rep-warn:oklch(97% .035 80); --rep-ok:oklch(97% .03 150); --rep-bad:oklch(96.5% .03 25);
  --shadow:0 1px 2px oklch(0% 0 0 / .035);
  --shadow-raised:0 6px 18px oklch(0% 0 0 / .065),0 1px 3px oklch(0% 0 0 / .035);
  --shadow-lg:0 20px 48px oklch(0% 0 0 / .105),0 3px 10px oklch(0% 0 0 / .045);
  /* фирменный градиент Arc: лавандовый → персиковый */
  --grad:linear-gradient(100deg,oklch(90% .045 300),oklch(92% .045 65));
  --grad-soft:linear-gradient(135deg,oklch(97.5% .016 300),oklch(98% .016 65));
  --grad-ink:linear-gradient(100deg,oklch(47% .1 300),oklch(50% .09 55));
  /* радиусы и анимация */
  --r:14px; --r-control:12px; --r-panel:20px; --r-surface:26px; --r-pill:9999px;
  --ease-enter:cubic-bezier(.16,1,.3,1); --ease-standard:cubic-bezier(.22,1,.36,1);
  --ease-spring:linear(0,.0213,.0739,.1443,.2235,.305,.3849,.4606,.5305,.594,.6508,.7011,.7452,.7836,.8168,.8454,.8699,.8907,.9084,.9234,.9361,.9467,.9557,.9632,.9694,.9747,.979,.9826,.9857,.9882,.9902,.992,.9934,.9946,.9955,.9963,1);
  --dur-fast:130ms; --dur:190ms; --dur-spring:420ms;
}
:root[data-theme="dark"]{
  --bg:oklch(17.5% 0 0); --panel:oklch(21.5% 0 0); --panel-2:oklch(24.5% 0 0); --col:oklch(19.5% 0 0);
  --text:oklch(96% 0 0); --muted:oklch(74% 0 0); --faint:oklch(64% 0 0);
  --line:oklch(29% 0 0); --line-strong:oklch(40% 0 0); --card-hover:oklch(42% 0 0);
  --accent:oklch(93% 0 0); --accent-h:oklch(100% 0 0); --accent-soft:oklch(80% 0 0 / .13); --accent-fg:oklch(19% 0 0);
  --danger:oklch(76% .2 25); --danger-soft:oklch(76% .2 25 / .14);
  --ok:oklch(78% .18 150); --ok-soft:oklch(78% .18 150 / .13);
  --warn:oklch(83% .17 80); --warn-soft:oklch(83% .17 80 / .13);
  --guest:#a78bff; --guest-soft:rgb(119 71 255 / .22);
  --cfg:oklch(82% .07 300); --cfg-soft:oklch(27% .03 300);
  --toast:oklch(30% 0 0); --overlay:oklch(0% 0 0 / .55);
  --rep-warn:oklch(28% .04 80); --rep-ok:oklch(27% .04 150); --rep-bad:oklch(27% .04 25);
  --shadow:0 1px 2px oklch(0% 0 0 / .18); --shadow-raised:0 8px 22px oklch(0% 0 0 / .22); --shadow-lg:0 22px 55px oklch(0% 0 0 / .34);
  --grad:linear-gradient(100deg,oklch(38% .05 300),oklch(40% .045 60));
  --grad-soft:linear-gradient(135deg,oklch(23.5% .016 300),oklch(24% .014 65));
  --grad-ink:linear-gradient(100deg,oklch(82% .07 300),oklch(86% .065 70));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:oklch(17.5% 0 0); --panel:oklch(21.5% 0 0); --panel-2:oklch(24.5% 0 0); --col:oklch(19.5% 0 0);
    --text:oklch(96% 0 0); --muted:oklch(74% 0 0); --faint:oklch(64% 0 0);
    --line:oklch(29% 0 0); --line-strong:oklch(40% 0 0); --card-hover:oklch(42% 0 0);
    --accent:oklch(93% 0 0); --accent-h:oklch(100% 0 0); --accent-soft:oklch(80% 0 0 / .13); --accent-fg:oklch(19% 0 0);
    --danger:oklch(76% .2 25); --danger-soft:oklch(76% .2 25 / .14);
    --ok:oklch(78% .18 150); --ok-soft:oklch(78% .18 150 / .13);
    --warn:oklch(83% .17 80); --warn-soft:oklch(83% .17 80 / .13);
    --guest:#a78bff; --guest-soft:rgb(119 71 255 / .22);
    --cfg:oklch(82% .07 300); --cfg-soft:oklch(27% .03 300);
    --toast:oklch(30% 0 0); --overlay:oklch(0% 0 0 / .55);
    --rep-warn:oklch(28% .04 80); --rep-ok:oklch(27% .04 150); --rep-bad:oklch(27% .04 25);
    --shadow:0 1px 2px oklch(0% 0 0 / .18); --shadow-raised:0 8px 22px oklch(0% 0 0 / .22); --shadow-lg:0 22px 55px oklch(0% 0 0 / .34);
    --grad:linear-gradient(100deg,oklch(38% .05 300),oklch(40% .045 60));
    --grad-soft:linear-gradient(135deg,oklch(23.5% .016 300),oklch(24% .014 65));
    --grad-ink:linear-gradient(100deg,oklch(82% .07 300),oklch(86% .065 70));
  }
}

body{letter-spacing:-.005em}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
a.btn,.tabsbar a,.mainnav a,.admin-nav a,.subnav a,.tile,.stat,.brand,.menu a{text-decoration:none}

/* ---------- кнопки и поля: Arc button / input ---------- */
.btn{border-radius:var(--r-control);font-weight:500;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard),transform var(--dur-spring) var(--ease-spring)}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:120ms}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);opacity:.9}
.btn.ghost:hover{box-shadow:none;background:var(--panel-2)}
.btn.guest{color:#fff}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{border-radius:var(--r-control);border-color:var(--line);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper li.on .n,.toast.info{color:var(--accent-fg)}
.toast{border-radius:var(--r-control);animation:toast-in var(--dur-spring) var(--ease-spring)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ---------- шапка: меню-«пилюля», как на uiarc.dev ---------- */
.topbar{background:color-mix(in oklab,var(--bg) 96%,transparent);border-bottom-color:var(--line)}
.mainnav{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.mainnav a{border-radius:var(--r-pill);padding:6px 13px;color:var(--muted);transition:color var(--dur-fast),background var(--dur-fast)}
.mainnav a.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.brand-mark{background:var(--accent)!important;border-radius:8px}
.brand-mark svg{color:var(--accent-fg)}
.tabsbar{background:color-mix(in oklab,var(--bg) 96%,transparent)}
.tabsbar a.on{color:var(--text);border-color:var(--text)}
.count-badge{background:var(--guest)}

/* ---------- поверхности ---------- */
.panel,.tile,.tbl-wrap,.empty,.sprint-bar,.stat,.kpi,.report,.admin-nav{border-radius:var(--r-panel)}
.tile:hover,.stat:hover{box-shadow:var(--shadow-raised);border-color:var(--line-strong)}
.callout{background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-panel)}
.callout.guest{background:var(--grad-soft)}
.page-head h1{letter-spacing:-.02em}
.tag{border-radius:var(--r-pill)}
.tag.cfg{background:var(--cfg-soft);color:var(--cfg)}
.choice{border-radius:var(--r-pill)}
.choice.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.choice.on .faint{color:inherit;opacity:.7}
.seg3 button{border-radius:var(--r-control)}
.seg3 button.on{border-color:var(--text);background:var(--panel);box-shadow:var(--shadow-raised)}
.toggle{border-radius:var(--r-pill)}
.toggle.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* ---------- доска и карточки ---------- */
.col{border-radius:var(--r-panel);background:var(--col)}
.col-h{border-radius:var(--r-panel) var(--r-panel) 0 0}
.cnt{border:1px solid var(--line)}
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur) var(--ease-standard),transform var(--dur-spring) var(--ease-spring)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.card:active{transform:scale(.985)}
.card.dragging{transform:rotate(1.5deg) scale(.98)}
.card-title{font-weight:500;letter-spacing:-.01em}
.card-top .no{font-variant-numeric:tabular-nums}
.col-add{border-radius:var(--r-panel)}
.bar>i{background:var(--text)}
.bar.over>i{background:var(--danger)}
.hrs .bar>i{background:var(--ok)}

/* ---------- окна: Arc dialog (размытый фон, мягкий подъём) ---------- */
.overlay{animation:ov-in var(--dur) var(--ease-enter)}
@keyframes ov-in{from{opacity:0}}
.modal{border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow-lg);animation:dlg-fade var(--dur-fast) var(--ease-enter) both,dlg-rise var(--dur-spring) var(--ease-spring) both}
@keyframes dlg-fade{from{opacity:0}}
@keyframes dlg-rise{from{transform:translateY(8px) scale(.96)}}
.modal-f{border-radius:0 0 var(--r-surface) var(--r-surface)}
.modal-h .btn.icon-only,.tv-close{border:1px solid var(--line);border-radius:var(--r-pill)}
.menu{border-radius:16px;box-shadow:var(--shadow-lg);animation:menu-in var(--dur) var(--ease-enter)}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu button,.menu a{border-radius:10px}
.menu .danger-item{color:var(--danger)}

/* ---------- вкладки внутри карточки: сегментный переключатель Arc ---------- */
.subtabs{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel-2);padding:3px;margin:20px 0 12px}
.subtabs button{border:0!important;border-radius:9px;padding:6px 12px;margin:0;color:var(--muted);transition:color var(--dur-fast),background var(--dur-fast)}
.subtabs button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow),0 0 0 1px var(--line)}

/* ---------- вход: мягкий градиент, как в hero uiarc.dev ---------- */
.login-wrap{background:radial-gradient(60% 50% at 85% 10%,oklch(85% .07 265 / .55),transparent 70%),radial-gradient(55% 45% at 10% 95%,oklch(88% .06 10 / .55),transparent 70%),radial-gradient(50% 40% at 55% 100%,oklch(92% .07 90 / .5),transparent 70%),var(--bg)}
.login{border-radius:var(--r-surface);box-shadow:var(--shadow-lg);background:color-mix(in oklab,var(--panel) 88%,transparent);backdrop-filter:blur(20px)}
.seg{border-radius:var(--r-control)}
.seg button{border-radius:9px}

/* ---------- тур и отчёты ---------- */
.tour-card{border-radius:var(--r-panel);border:1px solid var(--line)}
.tour-card h3{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.kpi{background:var(--panel)}
.rep-head h1,.page-head h1{letter-spacing:-.02em}

/* =====================================================================
   Новая карточка задачи
   ===================================================================== */
.modal.task-view{width:min(780px,100%);overflow:hidden}
.tv-head{display:flex;align-items:center;gap:10px;padding:14px 18px 12px 22px;border-bottom:1px solid var(--line);flex:none}
.tv-no{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.status-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-pill);padding:5px 10px 5px 11px;font-weight:500;cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-spring) var(--ease-spring)}
.status-pill .dot{background:var(--dot);width:9px;height:9px}
.status-pill:hover:not(:disabled),.status-pill.open{border-color:var(--line-strong);box-shadow:var(--shadow)}
.status-pill:disabled{cursor:default}
.status-pill:active:not(:disabled){transform:scale(.97)}
.tv-body{padding:18px 22px 24px;overflow:auto;flex:1;min-height:0}
.tv-title{display:block;width:100%;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:2px 0 14px -8px;padding:4px 8px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;resize:none;overflow:hidden;box-shadow:none!important}
textarea.tv-title:hover{background:var(--panel-2)!important}
textarea.tv-title:focus{border-color:var(--line-strong)!important;background:var(--panel)!important}
h2.tv-title{margin-left:0;padding-left:0!important}
.props{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.prop{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:118px;max-width:100%;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:7px 12px 8px;text-align:left;cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast),transform var(--dur-spring) var(--ease-spring)}
.prop-l{font-size:11.5px;color:var(--muted);font-weight:500}
.prop-v{display:flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.prop-v small{color:var(--muted);font-weight:400;margin-left:2px}
.prop:hover:not(:disabled),.prop.open{border-color:var(--line-strong);box-shadow:var(--shadow-raised)}
.prop:active:not(:disabled){transform:scale(.97)}
.prop:disabled{cursor:default;background:var(--panel-2)}
.prop.danger .prop-v{color:var(--danger)}
.prop.saved,.status-pill.saved,.hs-plan.saved{animation:saved-ring .9s var(--ease-standard)}
@keyframes saved-ring{0%{box-shadow:0 0 0 3px var(--ok-soft),0 0 0 1px var(--ok)}100%{box-shadow:none}}
.prio-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--faint)}
.prio-dot.p1{background:var(--danger)} .prio-dot.p2{background:var(--warn)} .prio-dot.p3{background:var(--faint)}
.av.xs{width:18px;height:18px;font-size:8.5px}
.hours-strip{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:6px 10px;border:1px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--grad-soft);margin-bottom:18px}
.hs-main{display:flex;align-items:baseline;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--text)}
.hs-num{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hs-plan{border:1px dashed var(--line-strong);background:var(--panel);border-radius:var(--r-pill);padding:3px 10px;font-weight:500;cursor:pointer;font-variant-numeric:tabular-nums}
.hs-plan:hover:not(:disabled),.hs-plan.open{border-style:solid;box-shadow:var(--shadow)}
.hs-plan:disabled{cursor:default;border-style:solid}
.hs-bar{height:6px;border-radius:3px;background:color-mix(in oklab,var(--text) 10%,transparent);overflow:hidden}
.hs-bar>i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width var(--dur-spring) var(--ease-spring)}
.hours-strip.over .hs-bar>i{background:var(--danger)}
.hs-note{font-size:12.5px;white-space:nowrap}
.tv-section{margin-bottom:14px}
.tv-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.tv-descr{white-space:pre-wrap;word-break:break-word;line-height:1.55;border-radius:12px;padding:8px 10px;margin:0 -10px}
.tv-descr.editable{cursor:text;transition:background var(--dur-fast)}
.tv-descr.editable:hover{background:var(--panel-2)}
.tv-descr.empty{color:var(--faint);display:flex;align-items:center;gap:6px}
#tvDescrEdit{min-height:150px}
.tv-edit-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.tv-more{border:1px solid var(--line);border-radius:14px;padding:0 14px;margin:6px 0 4px}
.tv-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:10px 0;color:var(--muted);font-weight:500;user-select:none}
.tv-more summary::-webkit-details-marker{display:none}
.tv-more summary .icon{transition:transform var(--dur) var(--ease-standard);transform:rotate(-90deg)}
.tv-more[open] summary .icon{transform:none}
.tv-more[open] #tvMoreBody{animation:more-in var(--dur) var(--ease-enter)}
@keyframes more-in{from{opacity:0;transform:translateY(-4px)}}
#tvMoreBody{padding-bottom:6px}
#tvMoreBody .kv:last-child{border-bottom:0}
.link-btn{border:0;background:none;padding:0;color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.link-btn:hover{text-decoration-color:currentColor}
#acceptBox .accept-box{border-radius:16px;margin-bottom:14px}
.task-view .files-box{margin-bottom:6px}
.task-view .dropzone{border-radius:14px;padding:10px}
/* всплывающий список свойства */
.pop{position:absolute;z-index:30;min-width:230px;max-width:min(320px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;animation:pop-in var(--dur) var(--ease-enter)}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.97)}}
.pop-list{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.pop-opt{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--text)}
.pop-opt small{display:block;color:var(--muted);font-size:11.5px;margin-left:4px}
.pop-opt:hover,.pop-opt:focus-visible{background:var(--panel-2);outline:none}
.pop-opt.on{font-weight:600}
.pop-check{margin-left:auto;color:var(--ok)}
.pop-search{display:flex;align-items:center;gap:6px;padding:4px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;color:var(--faint)}
.pop-search input{border:0!important;box-shadow:none!important;height:30px;padding:0 4px;flex:1;background:none}
.pop-pad{padding:8px}
.pop-pad input[type=date],.pop-pad input[type=text]{width:100%}
.pop-pad .choices{margin-top:8px}
@media (max-width:820px){
  .modal.task-view{width:100%}
  .tv-body{padding:14px 14px 22px}
  .prop{flex:1 1 calc(50% - 8px);min-width:0}
  .hours-strip{grid-template-columns:auto auto 1fr}
  .hs-note{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{ .overlay,.modal{animation:none} }
/* пустая зона файлов в карточке — одна тихая строка: файл можно бросить в окно куда угодно */
.task-view .dropzone{padding:8px 12px;justify-content:flex-start;gap:8px;font-size:13px;border-width:1.5px}
.task-view .dropzone small{display:none}
.task-view .dropzone .icon{width:14px;height:14px}

/* =====================================================================
   Карточка задачи: две колонки по ширине
   слева — название, описание, файлы, обсуждение; справа — паспорт задачи
   ===================================================================== */
.modal.task-view{width:min(1060px,100%)}
.tv-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"title side" "main side";column-gap:28px;align-items:start;padding:20px 24px 26px}
.tv-titlearea{grid-area:title}
.tv-main{grid-area:main;min-width:0}
.tv-side{grid-area:side;position:sticky;top:0;display:flex;flex-direction:column;gap:12px;padding-left:24px;border-left:1px solid var(--line);min-height:100%}
.tv-grid .tv-title{margin-bottom:10px}
/* свойства — список «название — значение» без лишних рамок */
.tv-side .props{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0;border:1px solid var(--line);border-radius:16px;padding:4px}
.tv-side .prop{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;border:0;border-radius:11px;background:none;padding:9px 10px;box-shadow:none}
.tv-side .prop:hover:not(:disabled),.tv-side .prop.open{background:var(--panel-2);box-shadow:none}
.tv-side .prop:disabled{background:none}
.tv-side .prop-l{font-size:13px;flex:none}
.tv-side .prop-v{justify-content:flex-end;max-width:170px;text-align:right}
.tv-side .prop-v small{display:none}
.tv-side .prop:not(:disabled) .prop-v::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg) translateY(-2px);margin-left:4px;opacity:0;transition:opacity var(--dur-fast)}
.tv-side .prop:hover .prop-v::after,.tv-side .prop.open .prop-v::after{opacity:1}
/* часы — компактный блок вверху паспорта */
.tv-side .hours-strip{grid-template-columns:auto auto 1fr;gap:8px 8px;margin:0;padding:12px 14px}
.tv-side .hs-bar{grid-column:1/-1;order:3}
.tv-side .hs-note{grid-column:1/-1;order:4;font-size:12px}
.tv-side .hs-num{font-size:24px}
.tv-side #acceptBox .accept-box{margin:0}
.tv-side .tv-more{margin:0}
.tv-side #tvMoreBody .kv{font-size:13px;flex-wrap:wrap}
.tv-side #tvMoreBody .kv b{font-weight:500;text-align:right}
/* левая колонка */
.tv-main .tv-section{margin-bottom:16px}
.tv-main .subtabs{margin-top:12px}
@media (max-width:860px){
  .tv-grid{grid-template-columns:1fr;grid-template-areas:"title" "side" "main";padding:14px 14px 22px}
  .tv-side{position:static;padding-left:0;border-left:0;margin-bottom:18px;min-height:0}
  .tv-side .prop-v{max-width:60%}
}
.tv-grid{grid-template-rows:auto 1fr}

/* Roboto: родной межбуквенный интервал (трекинг Arc рассчитан на Inter/Geist и сжимает Roboto) */
body,.card-title{letter-spacing:normal}
.tv-title,.page-head h1,.rep-head h1,.hs-num,.stat b,.kpi b{letter-spacing:-.005em}
h1,h2,h3{font-weight:600}

/* =====================================================================
   Заявки, нумерация и улучшения интерфейса
   ===================================================================== */
/* сегментный переключатель фильтров вкладки «Заявки» */
.seg-tabs{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel-2);padding:3px;margin-bottom:14px;flex-wrap:wrap}
.seg-tabs button{display:flex;align-items:center;gap:6px;border:0;background:none;border-radius:9px;padding:6px 12px;color:var(--muted);cursor:pointer;font-weight:500}
.seg-tabs button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.rq-table td{vertical-align:middle}
.rq-table .rq-title a{font-weight:600;text-decoration:none}
.rq-table .rq-title a:hover{text-decoration:underline}
.rq-table select{width:100%}
.num-preview{background:var(--grad-soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}
.num-preview b{font-size:15px;font-variant-numeric:tabular-nums}

/* поле числа ±0,5 */
.numfield{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel);overflow:hidden;height:36px}
.numfield:focus-within{border-color:var(--line-strong);box-shadow:0 0 0 3px var(--accent-soft)}
.numfield input{border:0!important;box-shadow:none!important;width:58px;text-align:center;height:34px;padding:0 2px;background:none;-moz-appearance:textfield}
.numfield input::-webkit-outer-spin-button,.numfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numfield button{border:0;background:none;width:30px;height:34px;cursor:pointer;color:var(--muted);font-size:16px;transition:background var(--dur-fast)}
.numfield button:hover{background:var(--panel-2);color:var(--text)}
.nf-suf{padding:0 10px 0 2px;color:var(--muted);font-size:13px}
.wl-form{grid-template-columns:140px auto 1fr auto}

/* кнопка подтверждения удержанием */
.btn.hold{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.hold-fill{position:absolute;inset:0;background:var(--danger-soft);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hold.holding .hold-fill{transform:scaleX(1);transition:transform .9s linear}
.hold-label{position:relative;display:inline-flex;align-items:center;gap:6px}
.menu .menu-hold{width:100%;justify-content:flex-start;border:0;background:none;border-radius:10px;padding:8px 10px;min-height:0;color:var(--danger);font-weight:400}
.menu .menu-hold:hover{background:var(--danger-soft);box-shadow:none}

/* скелетоны */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{padding:4px 0}
.skel .skel-bar,.skel .skel-card,.skel .skel-line,.skel .skel-row,.skel .skel-tile{position:relative;overflow:hidden;background:var(--panel-2);border-radius:14px}
/* блик едет трансформацией — без перерисовки страницы на каждом кадре */
.skel .skel-bar::after,.skel .skel-card::after,.skel .skel-line::after,.skel .skel-row::after,.skel .skel-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--line) 80%,transparent),transparent);transform:translateX(-100%);animation:skel-move 1.3s linear infinite}
@keyframes skel-move{to{transform:translateX(100%)}}
.skel-bar{height:58px;margin-bottom:16px}
.skel-cols{display:flex;gap:12px}
.skel-col{flex:0 0 272px;background:var(--col);border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:8px}
.skel-card{height:96px}
.skel-line{height:22px;margin-bottom:14px}
.skel-line.w30{width:30%}
.skel-row{height:44px;margin-bottom:8px}
.skel-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.skel-tile{height:130px;border-radius:20px}

/* сортировка таблиц */
th.sort-th{cursor:pointer;user-select:none;white-space:nowrap}
th.sort-th:hover{color:var(--text)}
th.sort-th{position:relative}
th.sort-th::after{content:"";position:absolute;top:calc(50% - 6px);right:2px;width:0;height:0;border:4px solid transparent;opacity:0;transition:opacity var(--dur-fast)}
th.num.sort-th::after{right:auto;left:2px}
th.sort-th:hover::after{opacity:.35;border-top-color:currentColor}
th.sort-th[data-dir="asc"]::after{opacity:1;border-bottom-color:currentColor;border-top-color:transparent;vertical-align:5px}
th.sort-th[data-dir="desc"]::after{opacity:1;border-top-color:currentColor}

/* фильтры с выбором нескольких значений */
.ms-btn{gap:6px}
.ms-btn.on{border-color:var(--text)}
.ms-btn .badge{background:var(--accent);color:var(--accent-fg)}
.ms-menu{left:0;right:auto;min-width:240px;max-height:360px;overflow:auto}
.ms-list{display:flex;flex-direction:column}
.ms-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;cursor:pointer}
.ms-opt:hover{background:var(--panel-2)}
.fchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-pill);padding:3px 4px 3px 10px;font-size:12.5px;color:var(--muted);animation:pop-in var(--dur) var(--ease-enter)}
.fchip b{color:var(--text);font-weight:500}
.fchip button{border:0;background:none;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.fchip button:hover{background:var(--panel-2);color:var(--text)}

/* контекстное меню карточки */
.ctx-menu{z-index:400;min-width:240px;max-height:80vh;overflow:auto}
.ctx-prio{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px}
.ctx-prio button{justify-content:center;gap:5px;font-size:12.5px;border:1px solid var(--line)!important;padding:6px 4px!important}
.ctx-prio button.on{border-color:var(--text)!important;font-weight:600}

/* свайп карточки на телефоне */
.card.swipe-r{box-shadow:inset 4px 0 0 var(--ok),var(--shadow-raised)}
.card.swipe-l{box-shadow:inset -4px 0 0 var(--warn),var(--shadow-raised)}

/* подсказка при наведении */
.hovercard{position:fixed;z-index:450;min-width:200px;max-width:280px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:12px 14px;font-size:13px;pointer-events:none;animation:pop-in var(--dur) var(--ease-enter)}
.hc-stats{display:flex;gap:14px;margin:8px 0 2px;color:var(--muted)}
.hc-stats b{color:var(--text);font-size:15px}

/* палитра цвета колонок */
.swatch-btn{width:36px;height:36px;flex:none;border-radius:11px;border:1px solid var(--line);background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 3px var(--panel);transition:transform var(--dur-spring) var(--ease-spring)}
.swatch-btn:hover{transform:scale(1.05)}
.color-pop{position:fixed;z-index:500;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;animation:pop-in var(--dur) var(--ease-enter)}
.swatches{display:grid;grid-template-columns:repeat(7,26px);gap:6px}
.swatch{width:26px;height:26px;border-radius:8px;border:0;background:var(--c);cursor:pointer;transition:transform var(--dur-spring) var(--ease-spring)}
.swatch:hover{transform:scale(1.12)}
.swatch.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--text)}
.swatch-custom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.swatch-custom input{width:32px;height:26px;padding:0;border-radius:6px}

/* история лентой */
.timeline{list-style:none;margin:4px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:1px}
.tl-item{display:flex;gap:12px;padding:6px 0;position:relative}
.tl-dot{width:28px;height:28px;flex:none;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);z-index:1}
.tl-status .tl-dot{color:var(--accent)}
.tl-accept .tl-dot{color:var(--ok);border-color:var(--ok)}
.tl-create .tl-dot{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.tl-text{font-size:13px;padding-top:4px}
.tl-text time{display:block;color:var(--faint);font-size:12px;margin-top:1px}

/* упоминания */
.mention{background:var(--accent-soft);color:var(--text);border-radius:6px;padding:0 4px;font-weight:600}
.mention.me{background:var(--warn-soft)}
.mention-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:20;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:5px;display:flex;flex-direction:column;animation:pop-in var(--dur) var(--ease-enter)}
.mention-pop button{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:7px 9px;border-radius:9px;cursor:pointer;color:var(--text)}
.mention-pop button.on,.mention-pop button:hover{background:var(--panel-2)}
.composer{position:relative}
.menu .notif-sound{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);cursor:pointer}

/* сворачивание длинного текста */
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.cm-body.clamp{-webkit-line-clamp:6}
.more-btn{border:0;background:none;padding:2px 0;color:var(--muted);font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more-btn:hover{color:var(--text)}

/* копирование */
button.copied{color:var(--ok)!important;border-color:var(--ok)!important}

/* карточка сбоку и шторкой */
.overlay.ov-drawer{justify-content:flex-end;align-items:stretch;padding:0}
.modal.task-view.drawer{width:min(980px,94vw);height:100vh;max-height:100vh;border-radius:26px 0 0 26px;animation:dlg-fade var(--dur-fast) var(--ease-enter) both,drawer-in var(--dur-spring) var(--ease-spring) both}
@keyframes drawer-in{from{transform:translateX(48px)}}
.overlay.ov-sheet{align-items:flex-end;padding:0}
.modal.task-view.sheet{width:100%;min-height:0;max-height:94vh;border-radius:22px 22px 0 0;animation:dlg-fade var(--dur-fast) var(--ease-enter) both,sheet-in var(--dur-spring) var(--ease-spring) both}
@keyframes sheet-in{from{transform:translateY(70px)}}
.modal.sheet .tv-head{position:relative;padding-top:20px}
.modal.sheet .tv-head::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;border-radius:2px;background:var(--line-strong);transform:translateX(-50%)}
@media (max-width:820px){ .wl-form{grid-template-columns:1fr auto} .wl-form #wlNote{grid-column:1/-1} }
.rq-table select{min-width:178px}
.rq-table td:nth-child(4){min-width:200px}