/* ui.css — компоненты, добавленные поверх базовой системы из app.css.
   Токены (--accent, --surface, --radius-*) берутся оттуда же, ничего нового не заводим. */

/* ---------- общее ---------- */

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--accent-contrast);
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;font-size:13.5px;text-decoration:none;}
.skip-link:focus{left:0;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.btn-danger{background:transparent;border-color:color-mix(in srgb, var(--critical) 45%, transparent);color:var(--critical);}
.btn-danger:hover{background:var(--critical-tint);border-color:var(--critical);}
.btn-quiet{background:none;border:none;color:var(--text-2);padding:7px 10px;font-size:13px;font-weight:500;border-radius:8px;}
.btn-quiet:hover{background:var(--surface-2);color:var(--text);}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border-radius:10px;border:1.5px solid transparent;background:none;color:var(--text-2);transition:background .12s,color .12s,border-color .12s;}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.icon-btn.active{background:var(--accent-tint);color:var(--accent-strong);}

.spinner{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- авторизация ---------- */

.auth-wrap{width:100%;max-width:412px;}
.auth-card{padding:28px 26px;}

.auth-steps{display:flex;align-items:center;gap:6px;margin-bottom:18px;}
.auth-step-dot{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .25s;}
.auth-step-dot.on{background:var(--accent);}

.field{margin-bottom:14px;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.input-wrap{position:relative;display:flex;}
.input-wrap input{flex:1;padding-right:44px;}
.reveal-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-3);border-radius:8px;}
.reveal-btn:hover{color:var(--text);background:var(--surface-2);}

.field input[aria-invalid="true"]{border-color:var(--critical);background:var(--critical-tint);}
.field-error{display:flex;align-items:flex-start;gap:6px;color:var(--critical);font-size:12px;margin-top:6px;line-height:1.4;}
.field-error svg{flex-shrink:0;margin-top:1px;}
.field-hint{color:var(--text-3);font-size:12px;margin-top:6px;line-height:1.45;}

.form-error{display:flex;align-items:flex-start;gap:9px;background:var(--critical-tint);
  border:1px solid color-mix(in srgb, var(--critical) 35%, transparent);color:var(--critical);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;line-height:1.45;margin-bottom:16px;}
.form-error svg{flex-shrink:0;margin-top:1px;}

.form-ok{display:flex;align-items:flex-start;gap:9px;background:var(--good-tint);
  border:1px solid color-mix(in srgb, var(--good) 35%, transparent);color:var(--good);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;line-height:1.45;margin-bottom:16px;}
.form-ok svg{flex-shrink:0;margin-top:1px;}

.strength{display:flex;gap:4px;margin-top:8px;}
.strength-bar{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .2s;}
.strength-bar.on-1{background:var(--critical);}
.strength-bar.on-2{background:var(--warn);}
.strength-bar.on-3{background:var(--good);}
.strength-label{font-size:11.5px;color:var(--text-3);margin-top:6px;}

.code-row{display:flex;gap:8px;justify-content:space-between;margin-bottom:6px;}
.code-input{width:100%;min-width:0;aspect-ratio:3/4;max-height:56px;text-align:center;font-size:20px;font-weight:600;
  font-family:var(--font-display);border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);transition:border-color .15s,background .15s;padding:0;}
.code-input:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.code-input[aria-invalid="true"]{border-color:var(--critical);background:var(--critical-tint);}

.dev-mail{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:16px;font-size:12.5px;color:var(--text-2);line-height:1.5;}
.dev-mail-top{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;margin-bottom:7px;}
.dev-mail-code{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:.22em;
  color:var(--accent-strong);margin:4px 0 6px;}

.auth-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;flex-wrap:wrap;}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--text-2);}
.auth-switch .link-muted{margin-left:5px;}
.auth-note{text-align:center;color:var(--text-3);font-size:11.5px;margin-top:16px;line-height:1.5;}
/* ---------- «Скоро в Опоре» ---------- */

.nav-badge{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-contrast);}
.pill-progress{background:var(--accent-tint);color:var(--accent);}
.roadmap-grid{margin-bottom:28px;}
.roadmap-card{padding:18px;display:flex;flex-direction:column;gap:8px;}
.roadmap-card h3{margin:4px 0 0;font-size:16px;}
.roadmap-card p{margin:0 0 6px;font-size:13.5px;line-height:1.55;color:var(--text-2);flex:1;}
.roadmap-card .btn{align-self:flex-start;}
.roadmap-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.roadmap-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent);}
.roadmap-done{padding:6px 18px;}
.roadmap-done-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.roadmap-done-row:last-child{border-bottom:0;}
.roadmap-done-icon{color:var(--good);flex-shrink:0;margin-top:2px;}
.roadmap-done-date{font-size:12px;color:var(--text-3);margin-bottom:2px;}
.roadmap-done-text{font-size:13.5px;color:var(--text-2);line-height:1.5;margin-top:2px;}
.roadmap-teaser{display:flex;align-items:center;gap:12px;width:100%;margin-top:20px;padding:14px 16px;text-align:left;
  background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-md);
  color:var(--text);font:inherit;cursor:pointer;}
.roadmap-teaser:hover{border-color:var(--accent);}
.roadmap-teaser-text{flex:1;font-size:13.5px;line-height:1.5;color:var(--text-2);}
.roadmap-teaser-text b{color:var(--text);}
.soon-note{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 12px;
  border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-2);
  color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;}
.soon-note:hover{border-color:var(--accent);color:var(--text);}
.soon-note svg:first-child{color:var(--accent);flex-shrink:0;}

/* ---------- демо и окно оплаты ---------- */

.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--accent-tint);border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;}
.demo-banner-text{font-size:13.5px;line-height:1.5;color:var(--text);flex:1 1 260px;}
.demo-banner .btn{flex-shrink:0;}

.paywall-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 6px;}
.paywall-amount{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--accent);line-height:1.1;}
.paywall-once{font-size:13px;color:var(--text-2);}
.paywall-lead{font-size:14px;line-height:1.6;color:var(--text-2);}
.paywall-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px;}
.paywall-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;}
.paywall-list li svg{color:var(--good);flex-shrink:0;margin-top:2px;}
.modal .paywall-list + .form-ok{margin-bottom:14px;}

.auth-divider{text-align:center;color:var(--text-3);font-size:12.5px;margin:18px 0;line-height:1.5;}

.check-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-2);margin:4px 0 16px;}
.check-row input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;}

/* ---------- верхняя панель: поиск и действия ---------- */

.topbar-search{position:relative;display:flex;align-items:center;flex:1;max-width:320px;}
.topbar-search svg{position:absolute;left:11px;color:var(--text-3);pointer-events:none;}
.topbar-search input{width:100%;padding:8px 32px 8px 34px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;transition:border-color .15s;}
.topbar-search input:focus{outline:none;border-color:var(--accent);}
.topbar-search input::placeholder{color:var(--text-3);}
.search-clear{position:absolute;right:5px;width:24px;height:24px;border:none;background:none;
  color:var(--text-3);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.search-clear:hover{background:var(--surface-2);color:var(--text);}

/* Кнопка-лупа нужна только там, где строка поиска прячется. */
#searchToggle{display:none;}

@media (max-width:880px){.topbar-search{max-width:none;}}
@media (max-width:600px){
  #searchToggle{display:inline-flex;}
  .topbar-search{position:absolute;left:0;right:0;top:100%;max-width:none;padding:10px 16px;
    background:var(--bg);border-bottom:1px solid var(--border);display:none;}
  .topbar-search.open{display:flex;}
  .topbar-search svg{left:27px;}
  .topbar-search .search-clear{right:21px;}
}

/* ---------- кнопки добавления в заголовках блоков ---------- */

.block-head{gap:12px;}
.block-head-left{display:flex;align-items:baseline;gap:9px;min-width:0;}
.add-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);
  border:1.5px dashed var(--border-strong);background:none;color:var(--text-2);font-size:12.5px;
  font-weight:600;font-family:var(--font-body);flex-shrink:0;transition:border-color .15s,color .15s,background .15s;}
.add-btn:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-tint);border-style:solid;}

.card-add{display:flex;align-items:center;justify-content:center;gap:8px;min-height:92px;
  border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);background:none;
  color:var(--text-3);font-size:13px;font-weight:600;font-family:var(--font-body);
  transition:border-color .15s,color .15s,background .15s;}
.card-add:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-tint);}

.empty-state{border:1.5px dashed var(--border);border-radius:var(--radius-md);padding:26px 20px;
  text-align:center;color:var(--text-3);font-size:13px;line-height:1.55;grid-column:1/-1;}
.empty-state b{display:block;color:var(--text-2);font-weight:600;font-size:13.5px;margin-bottom:4px;}

/* ---------- карточки: действия при наведении ---------- */

.item-card{position:relative;}
.card-actions{position:absolute;top:9px;right:9px;display:flex;gap:3px;opacity:0;transition:opacity .15s;}
.item-card:hover .card-actions,
.item-card:focus-within .card-actions{opacity:1;}
@media (hover:none){.card-actions{opacity:1;}}
.card-action{width:28px;height:28px;border-radius:8px;border:none;background:var(--surface-2);
  color:var(--text-3);display:flex;align-items:center;justify-content:center;}
.card-action:hover{background:var(--border);color:var(--text);}
.card-action.danger:hover{background:var(--critical-tint);color:var(--critical);}
.goal-title,.habit-title{padding-right:62px;}
.note-card-body{padding-right:34px;}

/* Чекбоксы дней: прошедшие дни тоже редактируются */
.day-cell.editable{cursor:pointer;}
.day-cell.editable:not(.done):hover{background:var(--accent-tint);border-color:var(--accent);}

/* ---------- модалка: режим редактирования ---------- */

/* Кнопки прилипают к низу модалки: список связей длинный, и без этого
   «Сохранить» приходилось бы искать прокруткой внутри окна. */
.modal-foot{display:flex;align-items:center;gap:10px;margin-top:24px;padding:18px 0 0;
  border-top:1px solid var(--border);position:sticky;bottom:-24px;
  background:var(--surface);box-shadow:0 -12px 16px -12px rgba(0,0,0,.18);}
.modal-foot .spacer{flex:1;}
@media (max-width:600px){.modal-foot{bottom:-20px;}}

.modal textarea{width:100%;padding:11px 13px;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-size:14px;font-family:inherit;line-height:1.55;
  resize:vertical;min-height:104px;transition:border-color .15s;}
.modal textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);}

.range-row{display:flex;align-items:center;gap:14px;}
.range-row input[type="range"]{flex:1;accent-color:var(--accent);height:22px;}
.range-val{font-family:var(--font-display);font-weight:600;font-size:17px;min-width:52px;
  text-align:right;font-variant-numeric:tabular-nums;}

.link-picker{max-height:188px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px;background:var(--surface-2);}
.link-group{margin-bottom:12px;}
.link-group:last-child{margin-bottom:0;}
.link-group-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.link-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface);border:1.5px solid var(--border);font-size:12px;color:var(--text-2);
  font-weight:500;font-family:var(--font-body);max-width:100%;transition:border-color .15s,background .15s,color .15s;}
.chip-toggle:hover{border-color:var(--border-strong);color:var(--text);}
.chip-toggle[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong);font-weight:600;}
.chip-toggle .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- тост с действием ---------- */

.toast{max-width:calc(100vw - 32px);}
.toast-action{background:none;border:none;color:var(--accent);font-family:inherit;font-size:13.5px;
  font-weight:700;padding:2px 4px;margin-left:4px;border-radius:6px;flex-shrink:0;}
.toast-action:hover{text-decoration:underline;}
.toast.danger{background:var(--critical);color:#fff;}
.toast.danger .toast-action{color:#fff;}

/* ---------- поиск: результаты ---------- */

.result-group{margin-bottom:26px;}
.result-group-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-size:13.5px;
  font-weight:600;color:var(--text-2);}
.result-count{color:var(--text-3);font-weight:500;font-size:12.5px;}
mark{background:var(--accent-tint);color:var(--accent-strong);border-radius:3px;padding:0 2px;font-weight:600;}

/* ---------- настройки ---------- */

.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.settings-card h2{font-size:15px;margin-bottom:4px;}
.settings-card>p{color:var(--text-2);font-size:13px;line-height:1.5;margin-bottom:16px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-top:1px solid var(--border);flex-wrap:wrap;}
.settings-row:first-of-type{border-top:none;padding-top:0;}
.settings-row-text{min-width:0;flex:1;}
.settings-row-text b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px;}
.settings-row-text span{color:var(--text-3);font-size:12.5px;line-height:1.45;}

.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:3px;gap:2px;flex-shrink:0;}
.segmented button{border:none;background:none;padding:6px 14px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:600;font-family:var(--font-body);color:var(--text-2);transition:background .15s,color .15s;}
.segmented button:hover{color:var(--text);}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--accent-strong);box-shadow:var(--shadow-sm);}

/* ---------- мобильные правки, которых не хватало ---------- */

@media (max-width:880px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .22s ease;}
  .sidebar.open{transform:translateX(0);}
  .hamburger-btn{display:flex;}
  .topbar{padding:14px 16px;}
  .content{padding:20px 16px 72px;}
}
@media (max-width:600px){
  .topbar{position:relative;}
  .stat-row{grid-template-columns:1fr;}
  .notes-grid{grid-template-columns:1fr;}
  .role-pill span{display:none;}
  .modal{padding:20px 18px;max-height:90vh;}
  .modal-foot{flex-wrap:wrap;}
  .modal-foot .btn{flex:1;}
  .auth-card{padding:22px 18px;}
}

@media (prefers-reduced-motion: reduce){
  .spinner{animation-duration:1.6s;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}