/* ═══════════════════  TermNotes · терминал + пиксели  ═══════════════════ */
:root {
  --bg:#f4f3ee; --bg-2:#eae8df; --panel:#fbfbf7;
  --line:#c9c5b6; --line-soft:#ded9c9;
  --text:#23231f; --text-2:#6b6858; --text-3:#97927f;
  --accent:#1f7a3d; --sel:#cfe8d6;
  --st-backlog:#8a8778; --st-urgent:#c8342b; --st-in_progress:#b9770e; --st-done:#1f7a3d;
  --dot-r:#e0524b; --dot-y:#daa520; --dot-g:#3a9d4b;
  --card:#ffffff;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --px:3px;
}
:root[data-theme="dark"] {
  --bg:#0b0e14; --bg-2:#070a0f; --panel:#0e131b;
  --line:#2b313d; --line-soft:#1c222c;
  --text:#cdd6e3; --text-2:#7b8494; --text-3:#545c6b;
  --accent:#3fb950; --sel:#14361f;
  --st-backlog:#6e7681; --st-urgent:#f85149; --st-in_progress:#d29922; --st-done:#3fb950;
  --dot-r:#ff5f57; --dot-y:#febc2e; --dot-g:#28c840;
  --card:#161c26;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--mono); font-size:13px; line-height:1.6;
  color:var(--text); background:var(--bg-2);
  background-image:repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--text) 4%, transparent) 3px 4px);
  -webkit-font-smoothing:antialiased;
  padding:clamp(0px, 2vw, 22px);
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, textarea { font:inherit; color:inherit; }
::selection { background:var(--sel); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--line); }
.muted { color:var(--text-3); }
.spacer { flex:1; }
.blink { animation:blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ───────────────────────  анимации  ─────────────────────── */
@keyframes bootIn { from { opacity:0; transform:scale(.994); filter:brightness(1.6); } }
@keyframes animIn { from { opacity:0; transform:translateY(5px); } }
@keyframes popIn  { from { opacity:0; transform:scale(.96) translateY(-3px); } }
@keyframes taskIn { from { opacity:0; transform:translateX(-6px); } }
@keyframes cardIn { from { opacity:0; transform:translateY(8px) scale(.985); } }
@keyframes pop    { 40% { transform:scale(1.35); } }
.boot { animation:bootIn .32s ease-out; }
.anim-in { animation:animIn .18s ease-out; }
.anim-pop { animation:popIn .13s ease-out; }
.task-in { animation:taskIn .14s ease-out; }
.tbox.pop svg { animation:pop .28s ease-out; }

/* ───────────────────────  пиксельная рамка  ─────────────────────── */
.frame {
  max-width:1180px; margin:0 auto;
  height:calc(100vh - clamp(0px, 4vw, 44px));
  background:var(--line); padding:var(--px);
  display:flex; flex-direction:column; overflow:hidden;
  clip-path:polygon(
    0 9px,3px 9px,3px 3px,9px 3px,9px 0,
    calc(100% - 9px) 0,calc(100% - 9px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 9px,100% 9px,
    100% calc(100% - 9px),calc(100% - 3px) calc(100% - 9px),calc(100% - 3px) calc(100% - 3px),calc(100% - 9px) calc(100% - 3px),calc(100% - 9px) 100%,
    9px 100%,9px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 9px),0 calc(100% - 9px));
}
.frame-bar {
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; background:var(--panel);
  border-bottom:var(--px) solid var(--line); user-select:none;
}
.frame-bar .dot {
  width:12px; height:12px; border-radius:50%; padding:0; flex:none;
  display:grid; place-items:center; position:relative;
  transition:transform .12s ease;
}
.frame-bar .dot .g {
  font-size:9px; line-height:1; color:rgba(0,0,0,.55); opacity:0;
  transition:opacity .12s;
}
.frame-bar:hover .dot .g { opacity:1; }
.frame-bar .dot:hover { transform:scale(1.18); }
.d-red { background:var(--dot-r); }
.d-yellow { background:var(--dot-y); }
.d-green { background:var(--dot-g); }
.frame-title { color:var(--text-2); font-size:12px; margin-left:5px; }
.bar-btn { width:26px; height:22px; display:grid; place-items:center; color:var(--text-2); font-size:12px; border-radius:2px; }
.bar-btn:hover { color:var(--text); background:var(--bg-2); }

.frame-body { flex:1; display:flex; min-height:0; background:var(--panel); }

/* ───────────────────────  левый рельс  ─────────────────────── */
.rail {
  width:210px; flex:none; min-height:0;
  border-right:var(--px) solid var(--line); background:var(--bg-2);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .2s ease, opacity .16s ease;
}
.rail > * { transition:opacity .12s; }
.frame.rail-collapsed .rail, .frame.zen .rail { width:0; opacity:0; border-right-width:0; }
.frame.grid-mode .rail { width:0; opacity:0; border-right-width:0; }

.rail-head { padding:10px 12px 6px; color:var(--text-3); font-size:11px; white-space:nowrap; }
.rail-head b { color:var(--accent); }
.rail-list { flex:1; padding:2px 6px; overflow-y:auto; }
.rail-item {
  width:100%; text-align:left; display:flex; gap:7px; align-items:baseline;
  padding:5px 7px; color:var(--text-2);
}
.rail-item .caret { color:var(--text-3); flex:none; }
.rail-item .ri-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-item:hover { color:var(--text); background:var(--line-soft); }
.rail-item.active { color:var(--text); background:var(--sel); }
.rail-item.active .caret { color:var(--accent); }
.rail-item .frac { margin-left:auto; font-size:11px; color:var(--text-3); flex:none; }
.rail-new { margin:6px; padding:7px; text-align:left; color:var(--accent); border:var(--px) dashed var(--line); white-space:nowrap; }
.rail-new:hover { background:var(--sel); }
.rail-filters { border-top:var(--px) solid var(--line); padding:8px 6px; display:flex; flex-wrap:wrap; gap:4px; }

.chip {
  font-size:11px; padding:2px 7px; color:var(--text-2);
  border:1px solid var(--line); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.chip:hover { border-color:var(--text-3); color:var(--text); }
.chip.active { background:var(--sel); border-color:transparent; color:var(--text); }
.chip .pd { width:7px; height:7px; background:var(--cc, var(--text-3)); }
.chip.arch { color:var(--text-3); }

/* ───────────────────────  сцена  ─────────────────────── */
.stage { flex:1; display:flex; min-width:0; min-height:0; }
.doc, .grid { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.doc-scroll { flex:1; overflow-y:auto; padding:20px clamp(14px, 4vw, 44px) 40vh; transition:max-width .2s ease, padding .2s ease; }
.frame.zen .doc-scroll { max-width:760px; margin:0 auto; padding-top:40px; }

.doc-titlerow { display:flex; align-items:center; gap:10px; }
.hash { color:var(--accent); font-size:18px; flex:none; }
.doc-title {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--mono); font-size:18px; font-weight:600; color:var(--text); padding:2px 0;
}
.doc-title::placeholder { color:var(--text-3); }

.doc-sub { display:flex; align-items:center; gap:12px; margin:8px 0 4px 26px; font-size:11px; color:var(--text-3); flex-wrap:wrap; }
.pbar { display:inline-flex; gap:2px; }
.pbar i { width:6px; height:10px; background:var(--line); display:inline-block; }
.pbar i.on { background:var(--st-done); }
.doc-sub .lnk { color:var(--text-2); cursor:pointer; }
.doc-sub .lnk:hover { color:var(--accent); }
.doc-sub .lnk.danger:hover { color:var(--st-urgent); }
.doc-tags { display:inline-flex; gap:6px; }
.doc-tags .t { color:var(--text-2); }
.kb-hint { margin:22px 0 0 26px; font-size:10.5px; color:var(--text-3); }

/* ───────────────────────  задачи  ─────────────────────── */
.tasks { margin:14px 0 0; list-style:none; }
.task { border-radius:2px; }
.task .trow { display:flex; align-items:flex-start; gap:10px; padding:3px 6px; margin:0 -6px; }
.task .trow:hover { background:var(--line-soft); }
.task.dragover { box-shadow:inset 0 2px 0 var(--accent); }
.task.d1 { margin-left:26px; }
.task.d1 .tbox svg { transform:scale(.86); }
.task.selected .trow { background:var(--sel); box-shadow:inset 2px 0 0 var(--accent); }

.thandle { flex:none; width:14px; color:var(--text-3); cursor:grab; opacity:0; text-align:center; user-select:none; margin-top:2px; font-size:11px; touch-action:none; }
.task:hover .thandle, .task.selected .thandle, .head:hover .thandle, .head.selected .thandle { opacity:1; }
.task.selected .thandle, .head.selected .thandle { color:var(--accent); }
.head .hh { cursor:grab; touch-action:none; }
body.dragging, body.dragging * { cursor:grabbing !important; user-select:none; }
.drag-src { opacity:.4; }
.drop-line { height:0; border-top:2px solid var(--accent); margin:-1px 0; list-style:none; box-shadow:0 0 6px var(--accent); }
.tbox { flex:none; width:17px; height:17px; margin-top:2px; display:grid; place-items:center; cursor:pointer; }
.tbox svg { width:17px; height:17px; display:block; shape-rendering:crispEdges; transition:transform .1s; }
.tbox:hover svg { transform:scale(1.12); }

.ttext { flex:1; outline:none; min-height:1.6em; line-height:1.6; word-break:break-word; }

/* форматирование текста */
.ttext b, .tnote b, .tk-text b, .tk-note b { font-weight:700; color:var(--text); }
.ttext i, .tnote i, .tk-text i, .tk-note i { font-style:italic; }
.ttext s, .tnote s, .tk-text s, .tk-note s { opacity:.6; }
.ttext code, .tnote code, .tk-text code, .tk-note code {
  background:var(--bg-2); border:1px solid var(--line); border-radius:3px;
  padding:0 3px; font-size:.9em;
}
.ttext:empty::before { content:attr(data-ph); color:var(--text-3); }
.task.s-done .ttext { color:var(--text-3); text-decoration:line-through; }

.tnote {
  margin:1px 0 4px 44px; padding:4px 8px;
  border-left:2px solid var(--line); color:var(--text-2);
  font-size:12px; white-space:pre-wrap; outline:none; min-height:1.4em;
}
.task.d1 .tnote { margin-left:70px; }
.tnote.empty:not(:focus) { display:none; }
.tnote:empty::before { content:attr(data-ph); color:var(--text-3); }
.tnote:focus { border-left-color:var(--accent); }

/* раздел-заголовок внутри списка */
.head { display:flex; align-items:baseline; gap:8px; margin:26px 0 4px; }
.head:first-child { margin-top:6px; }
.head .thandle { margin-top:0; }
.head .hh { color:var(--accent); font-size:12px; flex:none; opacity:.7; }
.head .htext {
  flex:1; outline:none; font-weight:800; font-size:16.5px; letter-spacing:-.02em;
  color:var(--text); word-break:break-word; min-height:1.4em;
}
.head .htext:empty::before { content:attr(data-ph); color:var(--text-3); font-weight:400; }

.task-add { margin:14px -6px 0; padding:5px 6px; color:var(--text-3); display:flex; gap:8px; align-items:center; }
.task-add span { cursor:pointer; }
.task-add span:hover { color:var(--text); }
.ta-plus { width:17px; text-align:center; }
.ta-sep { cursor:default; opacity:.5; }
.ta-head { color:var(--text-3); }

/* ───────────────────────  GRID — все списки  ─────────────────────── */
.grid-head { display:flex; align-items:center; gap:6px; padding:14px clamp(14px,4vw,40px) 10px; border-bottom:var(--px) solid var(--line); flex-wrap:wrap; }
.grid { background:var(--bg-2); }
.grid-cards {
  flex:1; overflow-y:auto; padding:18px clamp(14px,4vw,40px) 20vh;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; align-content:start;
}
.card {
  position:relative; background:var(--card); border:var(--px) solid var(--line);
  padding:12px 13px; cursor:pointer; overflow:hidden;
  animation:cardIn .2s ease-out backwards; animation-delay:calc(var(--i) * 22ms);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  touch-action:pan-y;
}
.card:hover { border-color:var(--text-3); box-shadow:4px 4px 0 var(--line); }
.card.pinned { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card.sw-left { background:color-mix(in srgb, var(--st-in_progress) 20%, var(--card)); }
.card.sw-right { background:color-mix(in srgb, var(--accent) 20%, var(--card)); }
.card-top { display:flex; align-items:baseline; gap:8px; }
.card-title { flex:1; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-frac { font-size:11px; color:var(--text-3); flex:none; }
.card-bar { margin:8px 0 6px; height:5px; background:var(--line); }
.card-bar i { display:block; height:100%; background:var(--st-done); transition:width .3s; }
.card-segs { display:flex; flex-wrap:wrap; gap:8px; font-size:10.5px; color:var(--text-3); min-height:14px; }
.card-segs .seg { display:inline-flex; align-items:center; gap:3px; }
.card-segs .seg .sd { width:7px; height:7px; background:var(--cc); border-radius:50%; }
.card-tag { color:var(--text-2); }
.card-act { position:absolute; top:8px; right:8px; display:flex; gap:3px; opacity:0; transition:opacity .13s; }
.card:hover .card-act, .card:focus-within .card-act { opacity:1; }
.card-act button { width:22px; height:20px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); color:var(--text-2); font-size:11px; }
.card-act button:hover { color:var(--text); border-color:var(--text-3); }
.card-act button.danger:hover { color:var(--st-urgent); border-color:var(--st-urgent); }

/* ───────────────────────  меню статуса  ─────────────────────── */
.menu {
  position:fixed; z-index:60; min-width:190px; background:var(--panel);
  border:var(--px) solid var(--line); box-shadow:6px 6px 0 rgba(0,0,0,.18); padding:3px;
}
.menu button { width:100%; display:flex; align-items:center; gap:9px; padding:7px 9px; text-align:left; color:var(--text-2); }
.menu button:hover, .menu button.sel { background:var(--sel); color:var(--text); }
.menu .mdot { width:10px; height:10px; flex:none; background:var(--cc); border-radius:50%; }
.menu .mk { margin-left:auto; font-size:10px; color:var(--text-3); }

/* ───────────────────────  палитра / оверлеи  ─────────────────────── */
.overlay {
  position:fixed; inset:0; background:color-mix(in srgb, var(--bg-2) 78%, transparent);
  display:flex; justify-content:center; align-items:flex-start; padding-top:14vh; z-index:100;
  animation:animIn .12s ease-out;
}
.palette { width:min(560px, 92vw); background:var(--panel); border:var(--px) solid var(--line); box-shadow:8px 8px 0 rgba(0,0,0,.2); }
.palette-in { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:var(--px) solid var(--line); }
.palette-in .p { color:var(--accent); }
.palette-in input { flex:1; background:none; border:none; outline:none; font-size:14px; }
.palette-res { max-height:46vh; overflow-y:auto; padding:4px; }
.palette-res .row { width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; text-align:left; color:var(--text-2); }
.palette-res .row.sel { background:var(--sel); color:var(--text); }
.palette-res .row .g { width:16px; text-align:center; color:var(--text-3); }
.palette-res .row .sub { margin-left:auto; font-size:10px; color:var(--text-3); }
.palette-sec { font-size:10px; letter-spacing:.1em; color:var(--text-3); padding:7px 10px 3px; }

.selbar {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; max-width:92vw;
  background:var(--panel); border:var(--px) solid var(--line);
  box-shadow:5px 5px 0 rgba(0,0,0,.25); padding:8px 12px; z-index:120;
}
.selbar .sb-n { font-weight:700; color:var(--accent); }
.selbar .sb-sep { color:var(--text-3); }
.selbar .chip.danger { color:var(--st-urgent); border-color:var(--st-urgent); }

.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:8px 14px; font-size:12px; z-index:200;
  box-shadow:4px 4px 0 rgba(0,0,0,.25); animation:popIn .14s ease-out; transition:opacity .2s, transform .2s;
}
.toast.out { opacity:0; transform:translateX(-50%) translateY(6px); }
.toast-btn { color:var(--bg); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.toast-btn:hover { opacity:.8; }

/* ───────────────────────  auth  ─────────────────────── */
.auth { min-height:100%; display:grid; place-items:center; }
.auth .frame { min-height:auto; width:min(400px, 94vw); }
.auth form { padding:26px; }
.auth h1 { font-size:17px; margin-bottom:3px; }
.auth h1 .hash { display:inline; font-size:17px; }
.auth p.sub { color:var(--text-3); font-size:11px; margin-bottom:20px; }
.auth label { display:block; font-size:11px; color:var(--text-3); margin:12px 0 4px; }
.auth input { width:100%; padding:9px 11px; background:var(--bg-2); border:var(--px) solid var(--line); outline:none; }
.auth input:focus { border-color:var(--accent); }
.auth .go { width:100%; margin-top:18px; padding:10px; background:var(--accent); color:var(--bg); font-weight:700; }
.auth .go:hover { filter:brightness(1.08); }
.auth .alt { text-align:center; margin-top:13px; font-size:12px; color:var(--text-3); }
.auth .err { color:var(--st-urgent); font-size:12px; margin-top:11px; min-height:15px; text-align:center; }
.auth .pdn { margin-top:16px; padding-top:13px; border-top:1px solid var(--line); font-size:10.5px; color:var(--text-3); line-height:1.6; }

/* ───────────────────────  публичная страница  ─────────────────────── */
.share-page { background:var(--bg-2); }
.share-frame { max-width:720px; }
.share-frame .frame-body { display:block; padding:26px clamp(16px,5vw,40px) 40px; }
.doc-meta { color:var(--text-3); font-size:11px; margin:4px 0 16px; }
.share-frame .doc-title { font-size:22px; }
.tasklist { list-style:none; }
.tasklist .tk { padding:3px 0; }
.tasklist .tk-head { font-weight:800; font-size:16.5px; letter-spacing:-.02em; margin:24px 0 6px; color:var(--text); }
.tasklist .tk-head:first-child { margin-top:0; }
.tasklist .tk.d1 { margin-left:22px; }
.tasklist .tk-row { display:flex; align-items:baseline; gap:10px; }
.tasklist .tk-dot { width:11px; height:11px; flex:none; border-radius:50%; border:1.5px solid var(--sc); background:var(--sc); align-self:center; }
.tasklist .tk-backlog .tk-dot { background:transparent; }
.tasklist .tk-in_progress .tk-dot { background:linear-gradient(90deg, var(--sc) 50%, transparent 50%); }
.tasklist .tk-text { flex:1; }
.tasklist .tk-done .tk-text { color:var(--text-3); text-decoration:line-through; }
.tasklist .tk-tag { font-size:10px; color:var(--text-3); }
.tasklist .tk-note { margin:2px 0 4px 21px; padding-left:8px; border-left:2px solid var(--line); color:var(--text-2); font-size:12px; white-space:pre-wrap; }
.doc-foot { margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--text-3); }

/* ───────────────────────  моб  ─────────────────────── */
@media (max-width: 780px) {
  body { padding:0; }
  .frame { clip-path:none; height:100vh; height:100dvh; }
  .frame-body { flex-direction:column; }
  .rail { width:auto; border-right:none; border-bottom:var(--px) solid var(--line); max-height:38vh; flex:none; }
  .frame.rail-collapsed .rail { max-height:0; }
  .doc-scroll { padding-bottom:30vh; }
  .grid-cards { grid-template-columns:1fr 1fr; }
}