/* ─────────────────────────────────────────── тема */

:root,
[data-theme="light"]{
  --bg:#fbf7f8;
  --surface:#ffffff;
  --surface-2:#f6f1f3;
  --line:#ece2e6;
  --line-soft:#f3ecef;
  --text:#2c2630;
  --dim:#8d8492;
  --faint:#b6adb8;
  --teal:#14a08b;
  --teal-soft:#e3f5f1;
  --blush:#ef8fb0;
  --blush-soft:#fdeaf1;
  --red:#d4635c;
  --shadow:0 1px 2px rgba(44,38,48,.05), 0 8px 24px rgba(44,38,48,.05);
  --cat-op:.62;
}

[data-theme="dark"]{
  --bg:#1a171c;
  --surface:#221e25;
  --surface-2:#2a252e;
  --line:#332d38;
  --line-soft:#2b2630;
  --text:#eae4ec;
  --dim:#9a90a2;
  --faint:#6d6375;
  --teal:#3ec7ab;
  --teal-soft:#183530;
  --blush:#e884a8;
  --blush-soft:#33212a;
  --red:#e08078;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
  --cat-op:.35;
}

:root{
  --radius:12px;
  --radius-lg:18px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.grow{flex:1}
.dim{color:var(--dim)}
.mono{font-family:var(--mono);font-size:11.5px}
.error{color:var(--red);font-size:13px}
a{color:var(--teal)}

button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ─────────────────────────────────────────── коты на фоне */

.cats{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--cat-op);
  background-image:url("/static/img/cat-sleep.png");
  background-repeat:no-repeat;
  background-position:right -26px bottom -6px;
  background-size:440px auto;
}
@media (max-width:820px){
  .cats{background-position:right -50px bottom 30px;background-size:300px auto}
}

/* ─────────────────────────────────────────── элементы */

.btn{
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:8px 15px;border-radius:var(--radius);cursor:pointer;
  transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--red);border-color:transparent;background:transparent}
.btn.danger:hover{border-color:var(--red)}
.btn.block{width:100%}
.btn.compact{padding:7px 13px;font-size:14px;white-space:nowrap}

.icon{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:17px;line-height:1;padding:6px 9px;border-radius:9px;
}
.icon:hover{color:var(--text);background:var(--surface-2)}

.link{background:none;border:none;color:var(--teal);cursor:pointer;padding:0;font-size:13px;text-decoration:none}
.link:hover{text-decoration:underline}

.field{
  width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 12px;
}
.field:focus{border-color:var(--teal)}
.field::placeholder{color:var(--faint)}
.field.narrow{width:auto}

/* ─────────────────────────────────────────── вход */

.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg)}
.gate-card{width:min(340px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}
.gate-cat{width:180px;margin:0 auto -10px;opacity:.8}
.gate-card h1{font-family:var(--serif);font-weight:500;font-size:32px;margin:0}
.gate-card p{margin:0;font-size:14px}

/* ─────────────────────────────────────────── каркас */

.app{display:flex;min-height:100%;padding-bottom:34px;position:relative;z-index:1}

.sidebar{
  width:262px;flex:none;border-right:1px solid var(--line);
  background:var(--surface);padding:16px 12px 46px;
  display:flex;flex-direction:column;gap:16px;
  height:100vh;position:sticky;top:0;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 8px;border-bottom:1px solid var(--line-soft)}
.avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--blush));color:#fff;
  font-family:var(--serif);font-size:17px;
}
.brand-name{font-weight:700;font-size:17px;letter-spacing:.01em}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:10px;color:var(--text);font-size:14.5px;
}
.nav-item:hover{background:var(--surface-2)}
.nav-item.active{background:var(--teal-soft);color:var(--teal);font-weight:600}
.nav-item .ico{font-size:15px;width:20px;text-align:center}

.side-block{display:flex;flex-direction:column;gap:8px}
.side-head{
  display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  padding:6px 4px;color:var(--text);font-weight:700;font-size:14px;
  border-bottom:1px solid var(--line-soft);
}
.side-head .chev{color:var(--faint);font-size:11px;transition:transform .15s}
.side-head.closed .chev{transform:rotate(-90deg)}

#cal-body{position:relative;padding-bottom:92px}
#cal-body::after{
  content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:176px;height:78px;pointer-events:none;
  background:url("/static/img/cat-pet.png") no-repeat center/contain;
  opacity:.75;
}
[data-theme="dark"] #cal-body::after{opacity:.4}

.cal-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.cal-head span{font-size:13px;font-weight:600;color:var(--dim)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:center;padding-bottom:2px}
.cal-day{
  aspect-ratio:1;border:none;background:transparent;color:var(--dim);
  border-radius:9px;font-size:12.5px;cursor:pointer;position:relative;
}
.cal-day:hover{background:var(--surface-2);color:var(--text)}
.cal-day.has::after{
  content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--blush);
}
.cal-day.today{color:var(--teal);font-weight:700}
.cal-day.sel{background:var(--teal);color:#fff}
.cal-day.sel::after{background:#fff}
.cal-day.blank{visibility:hidden}

.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.tag{
  background:var(--surface-2);border:1px solid transparent;color:var(--dim);
  border-radius:99px;padding:3px 11px;font-size:12.5px;cursor:pointer;
}
.tag:hover{color:var(--text)}
.tag.active{background:var(--blush-soft);border-color:var(--blush);color:var(--blush)}

.side-spacer{flex:1;min-height:8px}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;padding:0 4px}

/* ─────────────────────────────────────────── шапка и лента */

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:12px 26px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
}
.burger{display:none}
.topbar-title{min-width:0}
.topbar-title h1{font-size:17px;font-weight:700;margin:0;line-height:1.2}
.topbar-title .sub{font-size:12.5px;color:var(--dim);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.file-tabs{display:flex;gap:4px}
.file-tabs button{
  background:none;border:1px solid transparent;border-radius:9px;
  padding:5px 11px;font-size:13px;color:var(--dim);cursor:pointer;
}
.file-tabs button:hover{background:var(--surface-2);color:var(--text)}
.file-tabs button.active{background:var(--teal-soft);color:var(--teal);font-weight:600}

.search-bar{
  display:flex;gap:12px;align-items:center;
  max-width:800px;width:100%;margin:0 auto;padding:16px 26px 0;
}

.feed{max-width:800px;width:100%;margin:0 auto;padding:22px 26px 40px;display:flex;flex-direction:column;gap:16px}
.feed-end{text-align:center;padding:0 0 60px;font-size:13px;color:var(--faint)}

.empty{text-align:center;padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.empty-cat{width:240px;max-width:70vw;opacity:.9;margin-bottom:8px}
.empty h2{font-size:20px;margin:0;font-weight:700}
.empty p{margin:0 0 12px}

/* карточка записи */
.entry{
  background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow);position:relative;
}
.entry.pinned{border-color:var(--blush)}
.entry-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.entry-meta .date{font-weight:600;color:var(--teal)}
.entry-meta .chip{background:var(--surface-2);border-radius:99px;padding:1px 9px}
.entry-meta .chip.pin{background:var(--blush-soft);color:var(--blush)}
.entry-title{font-family:var(--serif);font-size:24px;font-weight:500;margin:6px 0;cursor:pointer;line-height:1.25}
.entry-title:hover{color:var(--teal)}

.prose{font-family:var(--serif);font-size:16.5px;line-height:1.7}
.prose h1,.prose h2,.prose h3{font-weight:600;line-height:1.3;margin:1.1em 0 .4em}
.prose h1{font-size:21px}.prose h2{font-size:19px}.prose h3{font-size:17px}
.prose p{margin:.65em 0}
.prose ul,.prose ol{margin:.55em 0;padding-left:1.3em}
.prose li{margin:.2em 0}
.prose blockquote{margin:.8em 0;padding:2px 0 2px 14px;border-left:3px solid var(--blush);color:var(--dim)}
.prose code{font-family:var(--mono);font-size:13px;background:var(--surface-2);padding:1px 6px;border-radius:5px}
.prose pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose hr{border:none;border-top:1px solid var(--line);margin:1.3em 0}
.prose a{text-decoration:underline;text-underline-offset:2px}

.data-table{width:100%;border-collapse:collapse;margin:14px 0;font-family:var(--sans);font-size:14px}
.data-table caption{text-align:left;font-size:12px;font-weight:600;color:var(--dim);padding-bottom:6px}
.data-table th,.data-table td{border:1px solid var(--line);padding:7px 11px;text-align:left}
.data-table th{background:var(--surface-2);font-weight:600}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-top:14px}
.media-cell{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;position:relative;
}
.media-cell:hover{border-color:var(--teal)}
.media-cell img,.media-cell video{width:100%;height:120px;object-fit:cover;display:block;background:var(--surface-2)}
.media-cell .cap{padding:6px 9px;font-size:12px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-cell.doc{display:flex;align-items:center;gap:9px;padding:12px;font-size:13px}
.media-cell .badge{
  position:absolute;top:7px;left:7px;background:rgba(20,16,24,.6);color:#fff;
  font-size:10px;padding:2px 7px;border-radius:6px;
}
.entry-actions{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* галерея «Файлы» */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.gcard{
  background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;
}
.gcard:hover{border-color:var(--teal)}
.gcard img,.gcard video{width:100%;height:130px;object-fit:cover;display:block}
.gcard .ph{height:130px;display:grid;place-items:center;font-size:30px;background:var(--surface-2)}
.gcard .info{padding:8px 10px}
.gcard .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .sub{font-size:11.5px;color:var(--dim)}

/* ─────────────────────────────────────────── редактор */

.editor{position:fixed;inset:0;background:rgba(30,24,34,.42);z-index:20;overflow-y:auto;
  backdrop-filter:blur(3px);padding:24px 16px}
.editor-sheet{
  max-width:840px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(30,24,34,.22);
  display:flex;flex-direction:column;overflow:hidden;
}
.editor-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.pin{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);cursor:pointer}
.editor-body{padding:16px 22px 22px;display:flex;flex-direction:column;gap:13px}

.title-field{
  width:100%;background:none;border:none;font-family:var(--serif);
  font-size:27px;font-weight:500;padding:2px 0;
}
.title-field::placeholder{color:var(--faint)}

.toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:4px;background:var(--surface-2)}
.toolbar button{
  background:none;border:none;cursor:pointer;color:var(--dim);
  min-width:32px;height:30px;border-radius:8px;font-size:13.5px;
}
.toolbar button:hover{background:var(--surface);color:var(--text)}
.toolbar button.on{background:var(--teal);color:#fff}
.toolbar .sep{width:1px;height:18px;background:var(--line);margin:0 5px}

.body-field{
  width:100%;min-height:300px;resize:vertical;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  font-family:var(--serif);font-size:16.5px;line-height:1.7;
}
.body-field:focus{border-color:var(--teal)}
.preview{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-height:300px}

.block{border-top:1px solid var(--line-soft);padding-top:14px}
.block-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.block-head h3{font-size:13px;color:var(--dim);font-weight:700;margin:0}

.tbl-edit{border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin-bottom:12px}
.tbl-edit-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.tbl-edit table{width:100%;border-collapse:collapse}
.tbl-edit td,.tbl-edit th{border:1px solid var(--line);padding:0}
.tbl-edit input{width:100%;background:none;border:none;padding:7px 9px;font-size:14px}
.tbl-edit th input{font-weight:600;background:var(--surface-2)}
.tbl-edit-head{flex-wrap:wrap}
.tbl-hint{font-size:11.5px;color:var(--faint);margin-top:8px;line-height:1.45}
.tbl-edit td.row-del{border:none;width:32px}
.tbl-edit input:focus{background:var(--teal-soft);outline:none}

.drop{
  border:1.5px dashed var(--line);border-radius:var(--radius);padding:20px;
  text-align:center;color:var(--dim);font-size:13px;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:10px}
.file-chip{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px;
  display:flex;flex-direction:column;gap:6px;font-size:12px;
}
.file-chip img,.file-chip video{width:100%;height:80px;object-fit:cover;border-radius:8px}
.file-chip .row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.file-chip input{background:none;border:none;border-bottom:1px solid var(--line);width:100%;font-size:12px;padding:2px 0}

.editor-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);
  padding:13px 18px;background:var(--surface-2)}

/* ─────────────────────────────────────────── просмотр медиа */

.lightbox{position:fixed;inset:0;background:rgba(22,18,26,.92);z-index:40;
  display:flex;align-items:center;justify-content:center;padding:22px}
.lightbox img,.lightbox video{max-width:100%;max-height:88vh;display:block;border-radius:10px}
.lb-close{position:absolute;top:14px;right:16px;font-size:24px;color:#fff}
.lb-close:hover{background:rgba(255,255,255,.15);color:#fff}

/* ─────────────────────────────────────────── строка состояния */

.statusbar{
  position:fixed;left:0;right:0;bottom:0;height:34px;z-index:15;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--surface);border-top:1px solid var(--line);font-size:12px;
}
.sb-name{font-weight:700}
.sb-ver{color:var(--dim)}

.toast{
  position:fixed;left:50%;bottom:52px;transform:translateX(-50%);
  background:var(--text);color:var(--bg);border-radius:99px;
  padding:9px 20px;font-size:13px;z-index:60;box-shadow:var(--shadow);
}

/* ─────────────────────────────────────────── мобильные */

@media (max-width:820px){
  .burger{display:block}
  .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:30;width:min(85vw,290px);
    transform:translateX(-100%);transition:transform .22s ease;height:100vh;
  }
  .sidebar.open{transform:none;box-shadow:0 0 0 100vw rgba(30,24,34,.45)}
  .topbar{padding:10px 14px}
  .feed,.search-bar{padding-left:14px;padding-right:14px}
  .entry{padding:16px;border-radius:14px}
  .entry-title{font-size:21px}
  .editor{padding:0}
  .editor-sheet{border-radius:0;border:none;min-height:100%}
  .editor-body{padding:14px}
  .title-field{font-size:23px}
  .file-tabs{display:none}
  #new-entry-top .lbl{display:none}
  #new-entry-top{font-size:18px;padding:6px 14px}
  .media-cell img,.media-cell video{height:104px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ─────────────────────────────────────────── файлы внутри текста */

.inline-media{margin:16px 0;font-family:var(--sans)}
.inline-media img,.inline-media video{
  width:100%;max-height:520px;object-fit:contain;display:block;
  border-radius:var(--radius);background:var(--surface-2);cursor:zoom-in;
}
.inline-media video{cursor:default}
.inline-media figcaption{
  font-size:12.5px;color:var(--dim);text-align:center;padding-top:6px;
}
.inline-media.audio audio{width:100%}
.inline-media.file{
  display:flex;align-items:center;gap:10px;font-size:14px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 14px;
}
.inline-media.file .dim{margin-left:auto;font-size:12px}

.body-field.drag{border-color:var(--teal);background:var(--teal-soft)}

/* ─────────────────────────────────────────── настроения */

.mood-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mood-label{font-size:13px;color:var(--dim);font-weight:700}

.mood-picker{display:flex;gap:6px;flex-wrap:wrap}
.mood-btn{
  --day:var(--line);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:2px solid transparent;border-radius:14px;
  padding:4px 5px 5px;cursor:pointer;line-height:1;
  filter:grayscale(.35) opacity(.75);transition:filter .15s, border-color .15s, background .15s;
}
.mood-btn img{width:38px;height:38px;display:block}
.mood-name{font-size:10.5px;color:var(--dim);white-space:nowrap}
.mood-btn:hover{filter:none;background:var(--surface-2)}
.mood-btn.on{filter:none;border-color:var(--day);background:var(--surface-2)}
.mood-btn.on .mood-name{color:var(--text);font-weight:600}

.entry-meta .chip.mood{
  display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 3px;
  border:1px solid var(--line);background:var(--surface-2);
}
.mood-ico{width:24px;height:24px;display:block}

/* день в календаре окрашивается по настроению */
.cal-day.mood{
  background:color-mix(in srgb,var(--day) 42%,transparent);
  color:var(--text);
}
.cal-day.mood:hover{background:color-mix(in srgb,var(--day) 65%,transparent)}
.cal-day.mood.has::after{background:color-mix(in srgb,var(--day) 70%,#4a4450)}
.cal-day.mood.sel{background:var(--teal);color:#fff}
[data-theme="dark"] .cal-day.mood{background:color-mix(in srgb,var(--day) 30%,transparent)}

@media (max-width:820px){
  .mood-btn img{width:34px;height:34px}
  .mood-name{display:none}
}

/* ─────────────────────────────────────────── задачи с галочками */

.prose li.task{
  list-style:none;margin-left:-1.3em;padding-left:0;
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  -webkit-user-select:none;user-select:none;
}
.prose li.task input{
  appearance:none;flex:none;width:17px;height:17px;margin-top:5px;
  border:2px solid var(--faint);border-radius:5px;background:var(--surface);
  cursor:pointer;position:relative;pointer-events:none;
  transition:background .12s, border-color .12s;
}
.prose li.task:hover input{border-color:var(--teal)}
.prose li.task input:checked{background:var(--teal);border-color:var(--teal)}
.prose li.task input:checked::after{
  content:"";position:absolute;left:4px;top:0.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.prose li.task.done > span{text-decoration:line-through;color:var(--dim)}

/* вложенные списки чуть плотнее */
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:.15em 0}

/* в предпросмотре галочки только показываются, отмечать их можно в самой записи */
#preview li.task{cursor:default}
#preview li.task input{pointer-events:none;opacity:.85}

/* ─────────────────────────────────────────── перетаскивание задач */

.prose li.task{position:relative}
.prose li.task .grip{
  flex:none;width:20px;height:24px;margin-left:-24px;margin-top:2px;
  background:none;border:none;padding:0;color:var(--faint);
  font-size:14px;line-height:24px;text-align:center;
  cursor:grab;opacity:.3;transition:opacity .12s, color .12s;
  touch-action:none;
}
.prose li.task:hover .grip,
.prose li.task .grip:focus-visible{opacity:1}
.prose li.task .grip:hover{color:var(--teal)}
.prose li.task .grip:active{cursor:grabbing}

.prose li.task.dragging{
  background:var(--teal-soft);border-radius:8px;
  box-shadow:0 4px 14px rgba(44,38,48,.12);
}
.prose.reordering{user-select:none}
.prose.reordering li.task{transition:none}

/* на сенсорных экранах наведения нет — ручка видна всегда */
@media (hover:none){
  .prose li.task .grip{opacity:.55;width:26px;margin-left:-28px}
}
@media (max-width:820px){
  .prose li.task{margin-left:-0.6em}
  .prose li.task .grip{margin-left:0;margin-right:2px}
}

/* в предпросмотре двигать нечего */
#preview li.task .grip{display:none}

/* ─────────────────────────────────────────── перетаскивание раздела */

.prose{position:relative}
.prose h1.sect,.prose h2.sect,.prose h3.sect{display:flex;align-items:center;gap:0}
.prose h1.sect .grip,.prose h2.sect .grip,.prose h3.sect .grip{
  flex:none;width:20px;margin-left:-24px;
  background:none;border:none;padding:0;color:var(--faint);
  font-size:14px;line-height:1;cursor:grab;opacity:.3;
  transition:opacity .12s,color .12s;touch-action:none;
}
.prose h1.sect:hover .grip,.prose h2.sect:hover .grip,.prose h3.sect:hover .grip,
.prose h1.sect .grip:focus-visible,.prose h2.sect .grip:focus-visible,.prose h3.sect .grip:focus-visible{opacity:1}
.prose h1.sect .grip:hover,.prose h2.sect .grip:hover,.prose h3.sect .grip:hover{color:var(--teal)}

.unit-dragging{opacity:.4}

.drop-line{
  position:absolute;left:0;right:0;height:2px;background:var(--teal);
  border-radius:2px;opacity:0;pointer-events:none;transition:top .06s linear;
}
.drop-line.on{opacity:1}
.drop-line::before{
  content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--teal);
}

@media (hover:none){
  .prose h1.sect .grip,.prose h2.sect .grip,.prose h3.sect .grip{opacity:.55;width:26px;margin-left:-28px}
}
#preview .sect .grip{display:none}

/* ─────────────────────────────────────────── вход и аккаунт */

.gate-card form{display:flex;flex-direction:column;gap:10px}
.gate-tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:12px;padding:4px;margin-bottom:4px}
.gate-tab{
  flex:1;background:none;border:none;padding:8px;border-radius:9px;
  color:var(--dim);cursor:pointer;font-size:14px;
}
.gate-tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow)}

.who{
  display:flex;align-items:center;gap:9px;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;cursor:pointer;text-align:left;margin-bottom:8px;
}
.who:hover{border-color:var(--faint)}
.who-ava{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--blush));color:#fff;font-size:13px;font-weight:600;
}
.who-name{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-more{color:var(--dim);font-size:13px}

.narrow-sheet{max-width:540px}
.col-form{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.col-form .field{width:100%}
.col-form .btn{align-self:flex-start}

.users-list{display:flex;flex-direction:column;gap:8px}
.user-row{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2);
}
.user-info{flex:1;min-width:0}
.user-name{font-size:14px;font-weight:600}
.danger-link{color:var(--red)}