:root {
  --bar: rgba(118, 118, 128, .16);
  --build: 55;
  --bg: #ffffff; --panel: #ffffff; --text: #202124; --muted: #5f6368; --line: #dadce0; --search: #f1f3f4;
  --accent: #f6b400; --accent-text: #202124; --hover: rgba(60,64,67,.08); --sel: #feefc3; --danger: #c5221f;
  --c-yellow: #fff475; --c-green: #ccff90; --c-blue: #aecbfa; --c-pink: #fdcfe8;
  --shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-hi: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bar: rgba(235, 235, 245, .16);
    --bg: #202124; --panel: #202124; --text: #e8eaed; --muted: #9aa0a6; --line: #5f6368; --search: #525355;
    --accent: #f6b400; --hover: rgba(232,234,237,.1); --sel: #41331c; --danger: #f28b82;
    --c-yellow: #5c4b00; --c-green: #345920; --c-blue: #1e3a5f; --c-pink: #5b2245;
    --shadow: 0 1px 2px 0 rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35);
    --shadow-hi: 0 1px 3px 0 rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 "Google Sans", Roboto, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; border-radius: 12px; padding: 8px 14px; font-weight: 500; }
button:hover { background: var(--hover); }
button.primary { background: var(--accent); color: var(--accent-text); } button.primary:hover { filter: brightness(1.05); }
button.icon { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; color: var(--muted); flex: none; }
button.icon:hover { background: var(--hover); color: var(--text); }
button.icon.on { color: var(--text); background: var(--hover); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; stroke: none; }

/* top bar */
#topbar { height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 12px; flex: none; }
.logo { display: flex; align-items: center; gap: 8px; width: 216px; padding-left: 4px; font-size: 22px; color: var(--muted); }
.logo-img { width: 36px; height: 36px; border-radius: 22%; }
.logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; }
.search { flex: 0 1 720px; display: flex; align-items: center; gap: 8px; background: var(--search); border-radius: 26px; padding: 0 18px; height: 48px; color: var(--muted); margin-left: 12px; }
.search:focus-within { background: var(--panel); box-shadow: var(--shadow); color: var(--text); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.status { font-size: 12px; color: var(--muted); max-width: 260px; text-align: right; line-height: 1.2; }
.status.bad { color: var(--danger); }
.status button { padding: 4px 10px; margin-left: 6px; }
button.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* layout */
#app { display: flex; flex: 1; min-height: 0; }
#sidebar { width: 280px; flex: none; padding-top: 8px; overflow-y: auto; transition: width .15s; }
.nav-item { display: flex; align-items: center; gap: 28px; width: 100%; text-align: left; border-radius: 26px; margin: 0 12px; width: calc(100% - 24px); padding: 0 12px 0 14px; height: 48px; font-weight: 500; }
.nav-item svg { color: var(--muted); }
.nav-item.active { background: var(--sel); } .nav-item.active svg { color: var(--text); }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .count { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.nav-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 18px 24px 6px; }
.rail #sidebar { width: 76px; }
.rail .nav-item { padding-left: 14px; }
.rail .nav-item span, .rail .nav-title { display: none; }
#main { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 24px 60px; }
.composer { max-width: 600px; margin: 0 auto 28px; display: flex; align-items: center; background: var(--panel); border-radius: 28px; box-shadow: var(--shadow); padding: 0 8px 0 0; }
.composer-text { flex: 1; text-align: left; height: 48px; padding: 0 22px; border-radius: 28px; color: var(--muted); font-size: 15px; font-weight: 500; }
.composer-text:hover { background: transparent; }

/* cards (masonry) */
.group-title { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin: 18px 6px 8px; max-width: 1400px; margin-inline: auto; padding-left: 8px; }
.grid { display: flex; gap: 16px; align-items: flex-start; max-width: 1400px; margin: 0 auto 8px; padding: 0 8px; }
.col { flex: 1; min-width: 0; }
.card { margin: 0 0 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 14px 18px 8px; cursor: default; position: relative; }
.card:hover { box-shadow: var(--shadow-hi); }
.card.c-yellow { background: var(--c-yellow); border-color: transparent; } .card.c-green { background: var(--c-green); border-color: transparent; }
.card.c-blue { background: var(--c-blue); border-color: transparent; } .card.c-pink { background: var(--c-pink); border-color: transparent; }
@media (prefers-color-scheme: light) { .card.c-yellow, .card.c-green, .card.c-blue, .card.c-pink { color: #202124; } }
.card.dragging { opacity: .35; }
.card.drop-before::before, .card.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--accent); border-radius: 2px; z-index: 2; }
.card.drop-before::before { top: -10px; } .card.drop-after::after { bottom: -10px; }
.card h4 { margin: 0 28px 6px 0; font-size: 16px; font-weight: 500; word-break: break-word; }
.card p { margin: 0 0 8px; font-size: 14px; max-height: 17.5em; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.chip { font-size: 11px; background: var(--hover); border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; line-height: 22px; color: var(--muted); }
.card .pin { position: absolute; top: 6px; right: 6px; opacity: 0; width: 36px; height: 36px; }
.card .pin:hover { opacity: 1; color: var(--text); }
.card .acts { display: flex; gap: 0; opacity: 0; height: 32px; margin-left: -8px; }
.card:hover .acts { opacity: 1; }
.card .acts button { width: 32px; height: 32px; } .card .acts svg { width: 18px; height: 18px; }
.card .dot { position: absolute; bottom: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.card .dot.err { background: var(--danger); }
.none { color: var(--muted); text-align: center; padding: 80px 10px; font-size: 20px; }
.none svg { width: 96px; height: 96px; opacity: .3; display: block; margin: 0 auto 12px; stroke-width: 1.2; }

/* editor modal */
.modal { position: fixed; inset: 0; background: rgba(32,33,36,.5); z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; }
.modal[hidden] { display: none; }
.sheet { width: 600px; max-width: 100%; background: var(--panel); border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 12px 12px 8px; display: flex; flex-direction: column; }
.sheet.c-yellow { background: var(--c-yellow); } .sheet.c-green { background: var(--c-green); }
.sheet.c-blue { background: var(--c-blue); } .sheet.c-pink { background: var(--c-pink); }
@media (prefers-color-scheme: light) { .sheet.c-yellow, .sheet.c-green, .sheet.c-blue, .sheet.c-pink { color: #202124; } }
.sheet-head { display: flex; align-items: center; }
.title { flex: 1; border: 0; background: transparent; outline: none; font-size: 22px; font-weight: 500; padding: 8px 10px; min-width: 0; }
.title::placeholder, textarea::placeholder { color: var(--muted); }
.body { padding: 0 10px; }
textarea { width: 100%; min-height: 220px; max-height: 55vh; resize: none; border: 0; outline: none; background: transparent; font: 14.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 4px 0; tab-size: 4; display: block; }
.body.only-preview textarea { display: none; }
.preview { min-height: 220px; max-height: 55vh; overflow-y: auto; padding: 4px 0; font-size: 15px; }
.preview[hidden] { display: none; }
.preview h1, .preview h2, .preview h3, .preview h4 { margin: .8em 0 .3em; line-height: 1.25; }
.preview h1 { font-size: 1.6em; } .preview h2 { font-size: 1.35em; } .preview h3 { font-size: 1.15em; }
.preview p { margin: .4em 0; }
.preview pre { background: var(--hover); padding: 10px 12px; border-radius: 14px; overflow-x: auto; }
.preview code { background: var(--hover); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.preview pre code { background: none; padding: 0; }
.preview blockquote { margin: .5em 0; padding: 2px 12px; border-left: 3px solid var(--accent); color: var(--muted); }
.preview hr { border: 0; border-top: 1px solid var(--line); }
.preview a { color: #1a73e8; }
.li { display: flex; gap: 8px; margin: 3px 0; }
.li .mark { color: var(--muted); font-weight: 500; min-width: 1.1em; text-align: center; }
.li.task input { margin: 4px 0 0; accent-color: var(--text); width: 16px; height: 16px; }
.li.task.done span { text-decoration: line-through; color: var(--muted); }
.label-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 10px; }
.label-row .chip { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }
.label-row .chip button { padding: 0; width: 16px; height: 16px; line-height: 1; color: var(--muted); border-radius: 50%; font-weight: 400; }
.label-row input { border: 0; outline: none; background: transparent; font-size: 12px; min-width: 110px; padding: 3px 0; }
.meta { color: var(--muted); font-size: 11px; padding: 2px 10px 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; padding: 0 0 4px; }
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.colors { display: inline-flex; gap: 6px; margin: 0 8px 0 4px; }
.colors button { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 1px solid var(--line); }
.colors button.sel { outline: 2px solid var(--text); outline-offset: 1px; }
.close { font-size: 14px; }
.banner { background: var(--sel); color: var(--text); border-radius: 16px; padding: 8px 12px; margin: 4px 4px 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.banner[hidden] { display: none; }
.banner .msg { flex: 1 1 260px; }

dialog { border: 0; border-radius: 28px; background: var(--panel); color: var(--text); width: min(560px, 94vw); padding: 20px 24px; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(32,33,36,.5); }
dialog h2 { margin: 0 0 8px; font-weight: 500; } dialog h3 { margin: 18px 0 6px; font-size: 14px; }
dialog label { display: block; font-size: 13px; color: var(--muted); }
dialog label.check { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
dialog label.check input { width: auto; margin: 0; }
dialog input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0; } .hint code { word-break: break-all; }
.row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .row.end { justify-content: flex-end; }
.toast { position: fixed; left: 24px; bottom: 24px; background: #323232; color: #fff; padding: 12px 20px; border-radius: 16px; display: flex; gap: 24px; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 30; }
.toast[hidden] { display: none; }
.toast button { background: none; color: #8ab4f8; padding: 0; font-weight: 500; }

@media (max-width: 900px) {
  .logo-text, .status { display: none; } .logo { width: auto; }
  #sidebar { position: fixed; z-index: 15; top: 64px; bottom: 0; left: 0; width: 280px; background: var(--bg); border-radius: 0 24px 24px 0; transform: translateX(-100%); transition: transform .18s; box-shadow: 4px 0 16px rgba(0,0,0,.25); }
  body.sidebar-open #sidebar { transform: none; }
  .rail #sidebar { width: 280px; } .rail .nav-item span, .rail .nav-title { display: initial; }
  #main { padding: 16px 12px 60px; }
}
@media (max-width: 600px) {
  .modal { padding: 0; } .sheet { width: 100%; min-height: 100%; border-radius: 0; }
  .search { border-radius: 24px; }
  textarea, .preview { max-height: none; min-height: 50vh; }
}

.fmt { display: flex; gap: 2px; padding: 0 10px 6px; }
.fmt[hidden] { display: none; }
.fmt button { min-width: 34px; height: 30px; padding: 0 8px; border-radius: 10px; color: var(--muted); font-weight: 500; }
.fmt button:hover { color: var(--text); }

/* visual editor */
.rich { --step: 28px; --grip: 22px; padding-left: var(--grip) !important; margin-left: calc(-1 * var(--grip)); min-height: 220px; max-height: 55vh; overflow-y: auto; outline: none; font-size: 15px; line-height: 1.6; padding: 4px 0; word-break: break-word; cursor: text; }
.rich[data-empty="1"] .ln:first-child[data-t="p"]::after { content: var(--ph, "Заметка…"); color: var(--muted); position: absolute; left: var(--grip); top: 0; pointer-events: none; }
.rich .ln { position: relative; min-height: 1.6em; margin-left: calc(-1 * var(--grip)); padding-left: calc(var(--grip) + var(--lvl, 0) * var(--step)); white-space: pre-wrap; }
.rich .ln[data-t="task"][data-done]::before { background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--text); }
.rich .ln[data-t="task"][data-done] { text-decoration: line-through; color: var(--muted); }
.rich .ln[data-t="quote"] { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); }
.rich .ln[data-t^="h"] { font-weight: 700; line-height: 1.3; margin-top: .5em; margin-bottom: .15em; }
.rich .ln[data-t="h1"] { font-size: 1.6em; } .rich .ln[data-t="h2"] { font-size: 1.35em; } .rich .ln[data-t="h3"] { font-size: 1.15em; }
.rich .ln[data-t="code"] { font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--hover); padding: 0 10px; }
.rich code { font: .92em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--hover); padding: 1px 5px; border-radius: 6px; }
.rich a { color: #1a73e8; }
.rich[contenteditable="false"] { cursor: default; }
textarea { min-height: 220px; }

[hidden] { display: none !important; }

.rich { --ic-note: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2230%22 height=%2216%22 viewBox=%220 0 30 16%22 fill=%22none%22 stroke=%22%2380868b%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M5 3v10M0.8 8h8.4%22/%3E%3Cpath d=%22M18.5 3h9.5M14 8h14M14 13h14%22/%3E%3C/svg%3E"); --al-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2380868b%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H6M11 7l-5 5 5 5%22/%3E%3C/svg%3E"); --al-off: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23d5d7db%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H6M11 7l-5 5 5 5%22/%3E%3C/svg%3E"); --ar-on: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2380868b%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h13M13 7l5 5-5 5%22/%3E%3C/svg%3E"); --ar-off: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23d5d7db%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h13M13 7l5 5-5 5%22/%3E%3C/svg%3E"); }
/* row buttons (shown while the pointer is over the row or the caret is in it): ← outdent  → indent  +≡ add a note  × delete; a greyed arrow = not possible here */
.rich .ln[data-t="bullet"], .rich .ln[data-t="number"], .rich .ln[data-t="task"] { padding-right: calc(5 * var(--step)); --al: var(--al-off); --ar: var(--ar-off); }
.rich .ln[data-co] { --al: var(--al-on); }
.rich .ln[data-ci] { --ar: var(--ar-on); }
.rich .ln[data-t="note"] { padding-right: calc(2 * var(--step) + 24px); }
.rich .ln[data-t="bullet"]::after, .rich .ln[data-t="number"]::after, .rich .ln[data-t="task"]::after, .rich .ln[data-t="note"]::after { content: var(--al) " " var(--ar) " " var(--ic-note) " ×"; white-space: pre; word-spacing: 4px; font-family: ui-monospace, Menlo, monospace; box-sizing: border-box; padding-right: 8px; text-indent: 0; position: absolute; right: 0; top: 0; width: calc(5 * var(--step) - 2px); height: 1.6em; display: flex; align-items: center; justify-content: flex-end; line-height: 1; padding-bottom: 2px; font-size: 20px; color: var(--muted); opacity: 0; cursor: pointer; user-select: none; transition: opacity .12s; }
/* the × shows only while the pointer is over the row or the caret is in it (editing) */
.rich .ln[data-t="bullet"]:hover::after, .rich .ln[data-t="number"]:hover::after, .rich .ln[data-t="task"]:hover::after, .rich .ln[data-t="note"]:hover::after,
.rich .ln.current[data-t="bullet"]::after, .rich .ln.current[data-t="number"]::after, .rich .ln.current[data-t="task"]::after, .rich .ln.current[data-t="note"]::after { opacity: .7; }
.rich .ln[data-t="note"]::after { content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%2380868b%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M5.5 3h9M1.5 8h13M1.5 13h13%22/%3E%3C/svg%3E") " ×"; width: calc(2 * var(--step) + 24px); }   /* a note row: the lines icon marks it, × deletes just this note */
.rich[contenteditable="false"] .ln::after { display: none; }

.cmd { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.cmd code { flex: 1; background: var(--hover); border-radius: 10px; padding: 8px 12px; font: 13px ui-monospace, "SF Mono", Menlo, monospace; overflow-x: auto; white-space: nowrap; }
.cmd button { flex: none; background: var(--hover); }


/* list markers live in the text line (inline-block, vertical-align: middle), so they centre on the lowercase letters in any font */
.rich .ln[data-t="bullet"], .rich .ln[data-t="number"], .rich .ln[data-t="task"] { padding-left: calc(var(--grip) + (var(--lvl, 0) + 1) * var(--step)); text-indent: calc(-1 * var(--step)); }
.rich .ln[data-t="bullet"]::before, .rich .ln[data-t="number"]::before, .rich .ln[data-t="task"]::before { display: inline-block; text-indent: 0; box-sizing: border-box; width: var(--step); vertical-align: baseline; color: var(--muted); }
.rich .ln[data-t="bullet"]::before { content: "•"; text-align: center; }
.rich .ln[data-t="number"]::before { content: attr(data-n) "."; text-align: right; padding-right: 6px; }
.rich .ln[data-t="task"]::before { content: ""; width: 16px; height: 16px; margin: 0 7px 0 5px; vertical-align: middle; border: 2px solid var(--muted); border-radius: 5px; cursor: pointer; }

.build { position: fixed; left: 8px; bottom: 6px; z-index: 40; font: 10px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); opacity: .6; pointer-events: none; user-select: none; }

/* quote stripe moved off the border so it sits at the text column, not at the grip gutter */
.rich .ln[data-t="quote"] { border-left: 0; padding-left: calc(var(--grip) + 12px); background: linear-gradient(var(--accent), var(--accent)) var(--grip) 0 / 3px 100% no-repeat; }
/* grip dots on hover (list items only) */
.rich .ln[data-t="bullet"]:hover, .rich .ln[data-t="number"]:hover, .rich .ln[data-t="task"]:hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' fill='%239aa0a6'%3E%3Ccircle cx='3' cy='3' r='1.4'/%3E%3Ccircle cx='7' cy='3' r='1.4'/%3E%3Ccircle cx='3' cy='8' r='1.4'/%3E%3Ccircle cx='7' cy='8' r='1.4'/%3E%3Ccircle cx='3' cy='13' r='1.4'/%3E%3Ccircle cx='7' cy='13' r='1.4'/%3E%3C/svg%3E") 6px center / 10px 16px no-repeat; }
.rich .ln.dragging { opacity: .35; }
.drop-ind { position: fixed; height: 3px; background: var(--accent); border-radius: 2px; z-index: 50; pointer-events: none; }
.drop-ind[hidden] { display: none; }
/* list-item drag: a dimmed copy of the dragged item follows the pointer, the insertion line shows where it lands */
.rich.drag-ghost { position: fixed; z-index: 60; margin: 0; min-height: 0; max-height: 240px; overflow: hidden; padding-top: 2px; padding-bottom: 2px; background: var(--panel); border-radius: 12px; opacity: .6; box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: none; user-select: none; }
.rich.drag-ghost[hidden] { display: none; }
.rich.drag-ghost .ln::after, .rich.drag-ghost .ln { pointer-events: none; }
.rich.drag-ghost .ln::after { display: none; }

.to-top { position: fixed; left: 24px; bottom: 36px; z-index: 12; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-hi); display: grid; place-items: center; }
.to-top:hover { filter: brightness(1.06); background: var(--accent); }
.to-top[hidden] { display: none; }

/* "note for a day" */
.expiry { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0 10px 8px; padding: 5px 13px 5px 10px; border-radius: 999px; background: var(--bar); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--text); }
.expiry:hover { background: var(--bar); filter: brightness(.96); }
.expiry svg { width: 16px; height: 16px; flex: none; }
.expiry .arrow { opacity: .55; }
.expiry[hidden] { display: none; }
.chip.exp { display: inline-flex; align-items: center; gap: 4px; background: var(--bar); border-color: transparent; color: var(--text); }
.chip.exp svg { width: 12px; height: 12px; }

/* spoiler headings (docs/spoilers.md) */
.rich .ln[data-hidden], .rich .ln[data-dhidden] { display: none; }
.rich .ln[data-fold]::before { content: "▾"; display: inline-block; width: 1.3em; font-size: .75em; text-indent: 0; text-align: center; vertical-align: .1em; color: var(--muted); cursor: pointer; }
.rich .ln[data-fold="closed"]::before { content: "▸"; }
.rich .ln[data-fold="closed"] { color: var(--muted); }

/* capsule: date button + tiny × in the top-right corner + hidden native date-time picker */
.expiry { position: relative; padding: 0; gap: 0; }
.expiry .exp-date { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 999px; font: inherit; font-weight: 500; color: inherit; background: transparent; }
.expiry .exp-date:hover { background: var(--hover); }
.expiry .exp-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1; background: var(--panel); color: var(--muted); border: 1px solid var(--line); box-shadow: var(--shadow); }
.expiry .exp-x:hover { color: var(--text); background: var(--panel); }
.expiry .exp-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* failed task ([f], docs/task-states.md): grey filled box with a white cross; text dimmed, not struck through */
.rich .ln[data-t="task"][data-failed]::before { background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--muted); }
.rich .ln[data-t="task"][data-failed] { color: var(--muted); }

/* "done to the bottom" flag under a to-do list (docs/checklist-autosort.md) */
.rich .ln[data-t="flag"] { padding-left: calc(var(--grip) + var(--step)); margin-top: 2px; margin-bottom: 4px; min-height: 0; user-select: none; }
.rich .flagchip { display: inline-flex; align-items: center; gap: 7px; padding: 2px 11px 2px 9px; border-radius: 999px; background: var(--bar); font-size: 12px; line-height: 1.5; color: var(--muted); cursor: pointer; text-indent: 0; }
.rich .flagchip::before { content: ""; width: 22px; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); background-image: radial-gradient(circle, #fff 4.5px, transparent 5px); background-size: 12px 12px; background-repeat: no-repeat; background-position: 0 0; transition: background-position .12s, background-color .12s; flex: none; }
.rich .ln[data-flag="on"] .flagchip { color: var(--text); }
.rich .ln[data-flag="on"] .flagchip::before { background-color: var(--accent); background-position: 10px 0; }
.rich .flagchip svg { flex: none; }
.rich .addchip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; margin-right: 6px; border-radius: 999px; background: var(--bar); color: var(--muted); cursor: pointer; vertical-align: top; text-indent: 0; }
.rich .addchip:hover { color: var(--text); filter: brightness(.96); }
.rich[contenteditable="false"] .addchip { display: none; }
.rich .ln[data-dhost="bottom"] { margin-bottom: 30px; }
.rich .ln[data-dhost="top"] { margin-top: 30px; }
.rich .drow { position: absolute; left: calc(var(--grip) + (var(--rl, 0) + 1) * var(--step)); display: inline-flex; align-items: center; gap: 6px; text-indent: 0; user-select: none; }
.rich .ln[data-dhost="bottom"] > .drow { bottom: -27px; }
.rich .ln[data-dhost="top"] > .drow { top: -28px; }
.rich .drow .addchip { margin-right: 0; }
.rich .ln[data-t="flag"][data-drow] > .addchip { display: none; }   /* only the flags line's own "+", not the one inside the row that hangs on it */
.rich .dhead { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 7px; border-radius: 999px; background: var(--bar); color: var(--text); font-size: 12px; line-height: 1.5; cursor: pointer; }
.rich .dhead::after { content: attr(data-n); font-weight: 600; margin-left: 2px; }
html[data-hide-done-count] .rich .dhead::after { display: none; }
.rich[contenteditable="false"] .dhead { cursor: default; }
.rich .ln[data-t="flag"][data-kind="fold"] { display: none; }
.rich[contenteditable="false"] .flagchip { cursor: default; }

.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* item notes: an explanation line under a list item, aligned with the item's text (docs/item-notes.md) */
.rich .ln[data-t="note"] { color: var(--muted); font-size: .92em; }

/* ---- wide screens (>= 600 px): the note opens in a panel beside the list; a second note can float (docs/tablet-windows.md) ---- */
.pane-bar { display: none; justify-content: flex-end; align-items: center; height: 36px; padding: 0 2px; }
body.wide #modal .pane-bar { display: flex; }
body.wide .modal { position: static; inset: auto; z-index: auto; background: none; display: flex; flex-direction: column; flex: 1.25 1 0; min-width: 0; padding: 0; overflow: hidden; }
body.wide .modal[hidden] { display: none; }
body.wide .modal .sheet { width: 100%; max-width: none; height: 100%; border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); }
/* the note panel takes the whole height beside the list: flush with the top bar and the window bottom */
body.wide #main { flex: 1 1 0; }
body:not(.wide) .float-act { display: none; }
.float { position: fixed; z-index: 25; width: 380px; height: 490px; max-height: calc(100vh - 8px); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(0,0,0,.35); }
.float[hidden], body:not(.wide) .float { display: none; }
.float-head { display: flex; align-items: center; gap: 2px; height: 44px; flex: none; padding: 0 6px 0 16px; background: var(--bar); cursor: grab; touch-action: none; user-select: none; }
.float-head:active { cursor: grabbing; }
.float-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.float-head button { width: 32px; height: 32px; }
.float-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.float.min { height: auto; }
.float.min .float-body { display: none; }
.float .sheet { width: 100%; max-width: none; border-radius: 0; box-shadow: none; padding: 4px 8px 4px; }
.float .pane-bar { display: none; }
/* only the text scrolls; the tool row and the close button stay in view, however long the note is */
body.wide .sheet { flex: 1 1 auto; min-height: 0; max-height: 100%; }
body.wide .sheet .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.wide .rich, body.wide textarea { max-height: none; }
body.wide .sheet-foot .close { display: none; }   /* the × in the top row closes the pane */

/* links to other notes (docs/note-links.md) */
.rich a[href^="note:"] { color: var(--accent-link, #1a73e8); text-decoration: underline dotted; text-underline-offset: 3px; }
.link-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.link-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 8px 12px; border-radius: 12px; font-weight: 400; }
.link-item b { font-weight: 500; }
.link-item span { color: var(--muted); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-item.sel, .link-item:hover { background: var(--sel); }
.link-none { color: var(--muted); padding: 12px; }

dialog select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }

button.danger { color: var(--danger, #d93025); }
.icon.danger:hover { color: var(--danger, #d93025); }
dialog button.danger { font-weight: 500; }

.fmt button:disabled { opacity: .3; cursor: default; }
.fmt button:disabled:hover { color: var(--muted); }
.fmt button svg { display: block; margin: 0 auto; }

/* select mode and bulk actions (docs/multi-select.md) */
.selbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 600px; margin: 0 auto 16px; padding: 6px 12px 6px 6px; border-radius: 28px; background: var(--bar); box-shadow: var(--shadow); }
.selbar[hidden] { display: none; }
.sel-count { font-weight: 500; margin-right: 4px; }
.sel-actions { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.selbar button:disabled { opacity: .4; cursor: default; }
.trashbar { max-width: 600px; margin: -12px auto 16px; display: flex; justify-content: flex-end; }
.trashbar[hidden] { display: none; }
body.selecting .card { cursor: pointer; padding-top: 38px; }   /* room for the round mark in the corner */
body.selecting .card .acts, body.selecting .card .pin { display: none; }
.card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.selmark { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); background: var(--panel); display: grid; place-items: center; z-index: 2; }
.selmark svg { width: 16px; height: 16px; }
.card.selected .selmark { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.conf-view { flex: 1 1 100%; max-height: 200px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--panel); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.history-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.hist pre { margin: 4px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--hover); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.hist-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.hist-head button { margin-left: auto; }

.ctx-menu { position: fixed; z-index: 70; min-width: 160px; padding: 6px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-hi); border: 1px solid var(--line); }
.ctx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.ctx-menu button:hover { background: var(--hover); }
.ctx-menu svg { width: 20px; height: 20px; flex: none; }