:root {
    --paper:         #f5f0e8;
    --paper-light:   #faf6ee;
    --paper-warm:    #efe8d9;
    --ink:           #2b2a28;
    --ink-soft:      #625d53;
    --ink-faint:     #a59f93;
    --line:          #e7dfd1;
    --line-strong:   #d8cfbd;
    --accent:        #3d3d3d;
    --danger:        #b14b3a;
    --ok:            #5a7a4c;

    --color-none:       #faf6ee;
    --color-sage:       #cade78;
    --color-rose:       #edbcc5;
    --color-sky:        #9ecde8;
    --color-sand:       #a8b2e0;
    --color-mint:       #7accc0;
    --color-lavender:   #a8a0f2;
    --color-peach:      #fad8b0;
    --color-slate:      #c4cdd0;
    --color-butter:     #f0e07a;
    --color-coral:      #e88060;
    --color-dusk:       #c090b0;
    --color-moss:       #b0ca80;
    --color-stone:      #d4c0a0;
    --color-marigold:   #f5bc40;

    --f-display: "Iowan Old Style", "Charter", "Palatino Linotype", "Palatino", "Georgia", serif;
    --f-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --f-mono:    ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

    --shadow-sm: 0 1px 2px rgba(50, 38, 20, .07), 0 2px 4px rgba(50, 38, 20, .05);
    --shadow-md: 0 2px 4px rgba(50, 38, 20, .08), 0 8px 20px rgba(50, 38, 20, .06);
    --shadow-lg: 0 6px 12px rgba(50, 38, 20, .10), 0 24px 48px rgba(50, 38, 20, .08);

    --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 20px;
    --t-fast: 120ms cubic-bezier(.2,.8,.2,1);
    --t-med:  240ms cubic-bezier(.2,.8,.2,1);

    --sidebar-w: 248px;
  }

  /* ─────────── Dark theme ─────────── */
  body.dark {
    --paper:         #1c1a17;
    --paper-light:   #232019;
    --paper-warm:    #2a2720;
    --ink:           #f0ebe2;
    --ink-soft:      #bab2a6;
    --ink-faint:     #857d74;
    --line:          #302d28;
    --line-strong:   #3e3a33;
    --accent:        #d4cec4;
    --danger:        #c45542;
    --color-none:    #2a2720;
    --color-sage:     #2a3e10;
    --color-rose:     #3e1e28;
    --color-sky:      #123850;
    --color-sand:     #181c40;
    --color-mint:     #0e3830;
    --color-lavender: #181440;
    --color-peach:    #382c10;
    --color-slate:    #242c30;
    --color-butter:   #383208;
    --color-coral:    #3a1408;
    --color-dusk:     #301828;
    --color-moss:     #1e2e0e;
    --color-stone:    #302818;
    --color-marigold: #382600;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
    --shadow-md: 0 2px 4px rgba(0,0,0,.4),  0 8px 20px rgba(0,0,0,.3);
    --shadow-lg: 0 6px 12px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.35);
  }
  body.dark {
    background-image:
      radial-gradient(circle at 10% 20%, rgba(120, 90, 50, .05), transparent 50%),
      radial-gradient(circle at 85% 70%, rgba(120, 90, 50, .06), transparent 55%),
      radial-gradient(circle at 50% 90%, rgba(90, 70, 40, .04), transparent 50%);
  }
  body.dark .topbar         { background: rgba(28, 26, 23, .9); }
  body.dark .bottom-nav     { background: rgba(28, 26, 23, .95); }
  body.dark .editor-overlay { background: rgba(0, 0, 0, .6); }
  body.dark .sidebar-backdrop { background: rgba(0, 0, 0, .55); }
  body.dark .primary-button:hover { background: #ccc6bc; }
  body.dark .tool-button:hover { background: rgba(255,255,255,.08); }
  body.dark .tool-button.active { background: rgba(255,255,255,.12); }
  body.dark .color-chip { filter: brightness(2.2); }

  [hidden] { display: none !important; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(120, 90, 50, .04), transparent 50%),
      radial-gradient(circle at 85% 70%, rgba(120, 90, 50, .05), transparent 55%),
      radial-gradient(circle at 50% 90%, rgba(90, 70, 40, .03), transparent 50%);
    background-attachment: fixed;
  }
  input, textarea, button, select { font: inherit; color: inherit; }
  input, textarea, select { background: transparent; border: none; outline: none; }
  button { cursor: pointer; background: none; border: none; padding: 0; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* ─────────── Buttons ─────────── */
  .primary-button {
    padding: 8px 16px;
    background: var(--ink);
    color: var(--paper-light);
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    box-shadow: var(--shadow-sm);
  }
  .primary-button:hover { background: #1c1b19; transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .primary-button:active { transform: translateY(0); }
  .primary-button.danger { background: var(--danger); }
  .primary-button.danger:hover { background: #8e3b2c; }

  .ghost-button {
    padding: 6px 12px;
    color: var(--ink-soft);
    border-radius: var(--r-md);
    transition: background var(--t-fast), color var(--t-fast);
    font-size: 14px;
  }
  .ghost-button:hover { background: rgba(0,0,0,.04); color: var(--ink); }
  .ghost-button.danger { color: var(--danger); }
  .ghost-button.danger:hover { background: rgba(177, 75, 58, .1); color: var(--danger); }
  .ghost-button:disabled,
  .tool-button:disabled,
  .primary-button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

  .editor-trash-actions { display: flex; gap: var(--s-2); align-items: center; }
  .editor.readonly .editor-title,
  .editor.readonly .text-block textarea,
  .editor.readonly .checklist-item-text { background: transparent; }
  .editor.readonly .block-remove,
  .editor.readonly .block-convert,
  .editor.readonly .checklist-item .drag-handle,
  .editor.readonly .checklist-item-remove,
  .editor.readonly .editor-add-block { display: none !important; }

  .icon-button {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    color: var(--ink-soft);
    font-size: 18px;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .icon-button:hover { background: rgba(0,0,0,.05); color: var(--ink); }

  .link-button {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 0;
    font-size: 14px;
  }
  .link-button:hover { color: var(--ink); }

  .tool-button {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    color: var(--ink-soft);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .tool-button:hover { background: rgba(0,0,0,.05); color: var(--ink); }
  .tool-button.active { background: rgba(0,0,0,.08); color: var(--ink); }
  .tool-button.active .pin-fillable { fill: currentColor; }
  .tool-button.danger:hover { color: var(--danger); }
  .tool-button.tb-glyph { font-size: 19px; line-height: 1; }

  /* ─────────── Auth screen ─────────── */
  .auth-screen {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
  }
  .auth-card {
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s-7) var(--s-6);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
  }
  .pw-strength {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: -8px;
    margin-bottom: var(--s-2);
    font-size: 12px;
    color: var(--ink-soft);
  }
  .pw-strength-bars { display: flex; gap: 3px; flex: 1; }
  .pw-strength-bars > span {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(0,0,0,.08);
    transition: background var(--t-fast);
  }
  .pw-strength-label { min-width: 56px; text-align: right; }
  .pw-strength[data-score="0"] .pw-strength-label { color: var(--danger); }
  .pw-strength[data-score="1"] .pw-strength-bars > span:nth-child(1) { background: var(--danger); }
  .pw-strength[data-score="2"] .pw-strength-bars > span:nth-child(-n+2) { background: #c98c2c; }
  .pw-strength[data-score="3"] .pw-strength-bars > span { background: #4a7c4e; }

  .auth-card::before {
    content: "";
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    width: 54px; height: 20px;
    background: rgba(200, 170, 110, .55);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
    opacity: .7;
  }
  .brand {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1;
    color: var(--ink);
  }
  .brand::after {
    content: "·";
    display: inline-block;
    margin-left: 2px;
    color: var(--danger);
    transform: translateY(-4px);
  }
  .auth-card form { display: grid; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
  .auth-card input {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 12px 14px;
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .auth-card input:focus { border-color: var(--ink-soft); background: var(--paper-light); outline: none; }
  .auth-card button[type="submit"] {
    padding: 12px 20px;
    background: var(--ink);
    color: var(--paper-light);
    border-radius: var(--r-md);
    font-weight: 500;
    margin-top: var(--s-2);
    transition: background var(--t-fast);
  }
  .auth-card button[type="submit"]:hover { background: #1c1b19; }
  .auth-card button[type="submit"][disabled] { opacity: .5; cursor: not-allowed; }
  .auth-error {
    color: var(--danger);
    font-size: 14px;
    margin: var(--s-3) 0 var(--s-1);
  }

  /* ─────────── App layout ─────────── */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100svh;
  }
  .sidebar {
    background: var(--paper-warm);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: var(--s-5) var(--s-4);
    position: sticky;
    top: 0;
    height: 100svh;
    overflow-y: auto;
  }
  .sidebar-header { margin-bottom: var(--s-6); padding: 0 var(--s-2); }
  .sidebar-header .brand { font-size: 28px; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-5); }
  .nav-item {
    text-align: left;
    padding: 8px 12px;
    border-radius: var(--r-md);
    color: var(--ink-soft);
    font-size: 15px;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .nav-item:hover { background: rgba(0,0,0,.04); color: var(--ink); }
  .nav-item.active { background: var(--ink); color: var(--paper-light); }
  .tags-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-faint);
    padding: 0 var(--s-3);
    margin-bottom: var(--s-2);
    font-weight: 600;
  }
  .tags-scroll { flex: 1; overflow-y: auto; min-height: 0; }
  .tags-list {
    list-style: none;
    margin: 0 0 var(--s-2);
    padding: 0;
  }
  .tag-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-md);
    color: var(--ink-soft);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
  }
  .tag-item:hover { background: rgba(0,0,0,.04); color: var(--ink); }
  .tag-item.active { background: var(--ink); color: var(--paper-light); }
  .tag-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag-item-delete {
    opacity: 0; color: inherit;
    font-size: 14px;
    width: 18px; height: 18px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--t-fast), background var(--t-fast);
  }
  .tag-item:hover .tag-item-delete { opacity: .6; }
  .tag-item-delete:hover { opacity: 1 !important; background: rgba(0,0,0,.1); }
  .tag-item.active .tag-item-delete:hover { background: rgba(255,255,255,.15); }
  /* Shared tag-creation field (sidebar + editor tag popover). The input is a
     single-line <textarea> not an <input>: Chromium shows its autofill bar on
     inputs and ignores autocomplete=off, so we dodge it the same way as the
     note title. Paired with a visible Add button since a textarea has no native
     Enter-submit. */
  .tag-creator { display: flex; align-items: flex-start; gap: 6px; }
  .tag-creator-input {
    flex: 1; min-width: 0;
    padding: 6px 10px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    resize: none;
    overflow: hidden;
    transition: background var(--t-fast), border-color var(--t-fast);
  }
  .tag-creator-input::placeholder { color: var(--ink-faint); }
  .tag-creator-input:focus { background: var(--paper-light); border-color: var(--line-strong); outline: none; }
  .tag-creator-add {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .tag-creator-add:hover { background: rgba(0,0,0,.05); color: var(--ink); }
  .tag-options { margin-top: var(--s-2); }
  .sidebar-footer {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .sidebar-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }
  .username-chip {
    font-size: 13px;
    color: var(--ink-soft);
    padding: 4px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  /* ─────────── Main ─────────── */
  .main { display: flex; flex-direction: column; min-width: 0; }
  .topbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(245, 240, 232, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #menu-toggle { display: none; }
  .view-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 22px;
    margin: 0;
    letter-spacing: -.01em;
  }
  .topbar-spacer { flex: 1; }
  .sort-section { margin-bottom: var(--s-5); }
  .sidebar-select {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px 28px 8px 10px;
    color: var(--ink);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M3 4.5l3 3 3-3" stroke="%23625d53" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }
  .sidebar-select:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

  .notes-grid {
    --gap: var(--s-4);
    display: grid;
    gap: var(--gap);
    padding: var(--s-5);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-content: start;
    align-items: start;
  }

  /* ─────────── Note card ─────────── */
  .note-card {
    position: relative;
    background: var(--color-none);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
    word-break: break-word;
    animation: cardIn 320ms cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  .note-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .note-card[data-color="sage"]     { background: var(--color-sage); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="rose"]     { background: var(--color-rose); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="sky"]      { background: var(--color-sky); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="sand"]     { background: var(--color-sand); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="mint"]     { background: var(--color-mint); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="lavender"] { background: var(--color-lavender); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="peach"]    { background: var(--color-peach); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="slate"]    { background: var(--color-slate); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="butter"]   { background: var(--color-butter); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="coral"]    { background: var(--color-coral); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="dusk"]     { background: var(--color-dusk); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="moss"]     { background: var(--color-moss); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="stone"]    { background: var(--color-stone); border-color: rgba(0,0,0,.05); }
  .note-card[data-color="marigold"] { background: var(--color-marigold); border-color: rgba(0,0,0,.05); }

  /* The muted text tiers are tuned for the paper background; on a coloured note
     surface they lose contrast (worst on saturated coral/dusk, where --ink-faint
     was ~1:1 — invisible). Redefine them darker, scoped to coloured surfaces only,
     so the cascade lifts every faint/soft descendant at once. Plain "none" notes
     and all app chrome keep the lighter, more delicate values. */
  body:not(.dark) .note-card:not([data-color="none"]),
  body:not(.dark) .editor:not([data-color="none"]) {
    --ink-soft:  #4a463d;
    --ink-faint: #575249;
  }
  /* Dark theme: --ink-soft (#bab2a6) already clears ~5.6:1 on every dark colour
     variant, so only --ink-faint needs lifting. */
  body.dark .note-card:not([data-color="none"]),
  body.dark .editor:not([data-color="none"]) {
    --ink-faint: #a89f95;
  }
  .note-card.pinned::after {
    content: "";
    position: absolute;
    top: -5px; right: 16px;
    width: 14px; height: 14px;
    background: var(--danger);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 -2px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2);
  }
  .note-card.pinned { transform: rotate(-.4deg); }
  .note-card.pinned:hover { transform: rotate(-.4deg) translateY(-2px); }

  .note-card-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
  }
  /* Card preview wrapper. Was an inline style attr until the CSP dropped
     'unsafe-inline' — style attributes are blocked by style-src-attr. */
  .note-card-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .note-card-preview {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .note-card-checklist-preview {
    display: flex; flex-direction: column; gap: 3px;
    color: var(--ink-soft); font-size: 14px;
  }
  .note-card-checklist-preview-item {
    display: flex; align-items: flex-start; gap: 6px;
  }
  .note-card-checklist-preview-item.preview-indent { margin-left: 14px; }
  .note-card-checklist-preview-text {
    flex: 1;
    min-width: 0;                    /* let it shrink so the clamp/ellipsis engage inside the flex row */
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* long items cut to 2 lines + … ; shorter items unaffected */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;          /* a long unbroken string (URL) can't overflow the card */
  }
  .note-card-checklist-preview-checkbox {
    width: 13px; height: 13px;
    border: 1.5px solid var(--ink-faint);
    border-radius: 3px;
    margin-top: 3px;
    flex-shrink: 0;
  }
  .note-card-checklist-done {
    color: var(--ink-faint);
    font-size: 13px;
  }
  .note-card-tags {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding-top: 4px;
  }
  .note-card-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    color: var(--ink-soft);
  }
  .note-card-meta {
    font-size: 12px;
    color: var(--ink-faint);
    display: flex;
    gap: var(--s-3);
  }
  .note-card-trash-meta {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: var(--s-1);
    font-style: italic;
  }
  .note-card-trash-meta.at-risk { color: var(--danger); font-style: normal; }
  .note-card-actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
  .note-card-actions button {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--ink);
    transition: background var(--t-fast);
  }
  .note-card-actions button:hover { background: rgba(255,255,255,.8); }
  .note-card-actions button.danger { color: var(--danger); }
  .note-card-actions button.danger:hover { background: rgba(177, 75, 58, .1); }

  /* Manual-sort drag affordances */
  .note-card.draggable { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
  .note-card.draggable:active { cursor: grabbing; }

  .note-card.dragging { opacity: .35; }
  .note-card.dragging:hover { transform: none; }
  .note-card.pinned.dragging { transform: rotate(-.4deg); }
  .note-card-placeholder {
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: rgba(0,0,0,.03);
    pointer-events: none;
    flex-shrink: 0;
  }
  body.dark .note-card-placeholder { background: rgba(255,255,255,.04); }

  .note-card-ghost {
    position: fixed !important;
    pointer-events: none;
    z-index: 9999;
    opacity: .9;
    margin: 0;
    transform: rotate(1.5deg) scale(1.02) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    transition: none;
    animation: none;
  }
  body.dragging-card { user-select: none; }
  body.dragging-card * { cursor: grabbing !important; }
  body.dragging-card .note-card { animation: none; }
  body.dragging-card .note-card:hover { transform: none; }

  .empty-state {
    padding: var(--s-8) var(--s-5);
    text-align: center;
    color: var(--ink-faint);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 17px;
  }
  .empty-figure {
    width: 80px; height: 80px;
    margin: 0 auto var(--s-4);
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: repeating-linear-gradient(0deg, transparent, transparent 11px, var(--line) 11px, var(--line) 12px);
    opacity: .5;
  }

  /* ─────────── Editor ─────────── */
  .editor-overlay {
    position: fixed; inset: 0;
    background: rgba(30, 25, 20, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: var(--s-4);
    z-index: 100;
    animation: overlayIn var(--t-med);
  }
  @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
  .editor {
    background: var(--color-none);
    border-radius: var(--r-xl);
    width: min(720px, 100%);
    max-height: calc(100svh - var(--s-6));
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    animation: editorIn 320ms cubic-bezier(.2,.8,.2,1);
  }
  @keyframes editorIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .editor[data-color="sage"]     { background: var(--color-sage); }
  .editor[data-color="rose"]     { background: var(--color-rose); }
  .editor[data-color="sky"]      { background: var(--color-sky); }
  .editor[data-color="sand"]     { background: var(--color-sand); }
  .editor[data-color="mint"]     { background: var(--color-mint); }
  .editor[data-color="lavender"] { background: var(--color-lavender); }
  .editor[data-color="peach"]    { background: var(--color-peach); }
  .editor[data-color="slate"]    { background: var(--color-slate); }
  .editor[data-color="butter"]   { background: var(--color-butter); }
  .editor[data-color="coral"]    { background: var(--color-coral); }
  .editor[data-color="dusk"]     { background: var(--color-dusk); }
  .editor[data-color="moss"]     { background: var(--color-moss); }
  .editor[data-color="stone"]    { background: var(--color-stone); }
  .editor[data-color="marigold"] { background: var(--color-marigold); }

  .editor-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .editor-tools { display: flex; gap: var(--s-1); }
  .editor-body {
    padding: var(--s-5) var(--s-6) var(--s-6);
    overflow-y: auto;
    flex: 1;
  }
  .editor-title {
    width: 100%;
    padding: 0;
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: var(--s-4);
    background: transparent;
    line-height: 1.2;
    display: block;
    resize: none;
    overflow: hidden;
  }
  .editor-title::placeholder { color: var(--ink-faint); font-style: italic; font-weight: 500; }

  .editor-blocks { display: flex; flex-direction: column; gap: var(--s-4); }
  .block { position: relative; }
  .block .block-remove {
    position: absolute;
    top: 2px; right: -28px;
    opacity: 0;
    transition: opacity var(--t-fast);
  }
  .block:hover .block-remove, .block:focus-within .block-remove { opacity: .6; }
  .block .block-remove:hover { opacity: 1; }
  .block .block-convert {
    position: absolute;
    top: 38px; right: -28px;
    opacity: 0;
    transition: opacity var(--t-fast);
  }
  .block:hover .block-convert, .block:focus-within .block-convert { opacity: .6; }
  .block .block-convert:hover { opacity: 1; }
  .block .block-drag-handle {
    position: absolute;
    top: 2px; left: -28px;
    opacity: 0;
    transition: opacity var(--t-fast);
    cursor: grab;
    color: var(--ink-faint);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    touch-action: none;
    padding: 4px 6px;
  }
  .block:hover .block-drag-handle, .block:focus-within .block-drag-handle { opacity: .6; }
  .block .block-drag-handle:hover { opacity: 1; }
  .block .block-drag-handle:active { cursor: grabbing; }
  .block-placeholder {
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: rgba(0,0,0,.03);
    pointer-events: none;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  body.dark .block-placeholder { background: rgba(255,255,255,.04); }

  .text-block textarea {
    width: 100%;
    background: transparent;
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    resize: none;
    padding: 4px 0;
    min-height: 32px;
    overflow: hidden;
  }
  .text-block textarea::placeholder { color: var(--ink-faint); font-style: italic; }

  .checklist-block { padding: var(--s-2); }
  .checklist-items { display: flex; flex-direction: column; gap: 2px; }
  .checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
  }
  .checklist-item:hover { background: rgba(255,255,255,.35); }
  .checklist-item-indent { margin-left: 24px; }   /* == INDENT_STEP; indent only (guide line removed 2026-07-24 — too busy) */
  .checklist-item-placeholder {
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: rgba(0,0,0,.03);
    pointer-events: none;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  body.dark .checklist-item-placeholder { background: rgba(255,255,255,.04); }
  .drag-handle {
    cursor: grab;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1;
    margin-top: 5px;
    user-select: none;
    opacity: 0;
    transition: opacity var(--t-fast);
    touch-action: none;
    padding: 2px 4px;
  }
  .checklist-item:hover .drag-handle { opacity: .7; }
  .drag-handle:active { cursor: grabbing; }
  .checklist-item-remove {
    flex-shrink: 0;
    color: var(--ink-faint);
    font-size: 16px;
    line-height: 1;
    margin-top: 3px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity var(--t-fast);
  }
  .checklist-item:hover .checklist-item-remove { opacity: .6; }
  .checklist-item-remove:hover { opacity: 1; }
  @media (hover: none) {
    .drag-handle { opacity: .5; font-size: 14px; padding: 4px 6px; margin-top: 2px; }
    .block .block-drag-handle { opacity: .5; }
    .block .block-convert { opacity: .5; }
    .checklist-item-remove { opacity: .5; padding: 4px 6px; margin-top: 2px; }
  }
  .checklist-item input[type="checkbox"] {
    width: 20px; height: 20px;
    margin: 4px 0 0;
    accent-color: var(--ink);
    flex-shrink: 0;
  }
  .checklist-item-text {
    flex: 1;
    outline: none;
    min-height: 20px;
    line-height: 1.5;
    padding: 2px 0;
    word-break: break-word;
  }
  .checklist-item-text:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-faint);
    font-style: italic;
  }
  .checklist-item.checked .checklist-item-text { text-decoration: line-through; color: var(--ink-faint); }
  .checklist-completed { margin-top: var(--s-2); }
  .checklist-completed > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-faint);
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    list-style: none;
  }
  .checklist-completed > summary::before { content: "▸ "; display: inline-block; transition: transform var(--t-fast); }
  .checklist-completed[open] > summary::before { content: "▾ "; }

  .editor-add-block {
    display: flex; gap: var(--s-2);
    flex-shrink: 0;
    padding: var(--s-3) var(--s-6);
    border-top: 1px dashed rgba(0,0,0,.12);
  }

  /* ─────────── Popovers ─────────── */
  .popover-root { position: relative; }
  .popover {
    position: absolute;
    top: 42px; left: 0;
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s-2);
    box-shadow: var(--shadow-md);
    z-index: 50;
    min-width: 200px;
    animation: popoverIn 160ms cubic-bezier(.2,.8,.2,1);
  }
  @keyframes popoverIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .color-popover {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 210px;
  }
  .color-chip {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.12);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative;
  }
  .color-chip:hover { transform: scale(1.1); box-shadow: var(--shadow-sm); }
  .color-chip.active::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
  }
  .tags-popover { min-width: 220px; max-height: 280px; overflow-y: auto; }
  .tag-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--t-fast);
  }
  .tag-option:hover { background: rgba(0,0,0,.05); }
  .tag-option-check {
    width: 14px; text-align: center;
    color: var(--ok); font-weight: 700;
  }
  .tag-option-empty {
    padding: var(--s-3);
    color: var(--ink-faint);
    font-size: 13px;
    font-style: italic;
    text-align: center;
  }

  /* ─────────── Toast ─────────── */
  .toast {
    position: fixed;
    bottom: var(--s-5); left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper-light);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: var(--shadow-md);
    z-index: 200;
    animation: toastIn var(--t-med);
  }
  .toast.error { background: var(--danger); }
  @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }

  /* ─────────── Masonry grid ─────────── */
  .masonry-wrapper { grid-column: 1 / -1; display: flex; gap: var(--gap); align-items: flex-start; }
  .masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

  /* ─────────── Bottom nav (mobile only) ─────────── */
  .bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 240, 232, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    z-index: 10;
  }
  .bottom-nav-title {
    flex: 1;
    text-align: center;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em;
  }

  /* ─────────── Mobile ─────────── */
  @media (max-width: 720px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
      position: fixed; inset: 0 auto 0 0;
      width: min(280px, 80vw);
      /* dvh (not the base svh) so the drawer shrinks when the keyboard opens
         — with interactive-widget=resizes-content this lifts the new-tag field
         into view instead of leaving it hidden behind the keyboard. */
      height: 100dvh;
      transform: translateX(-100%);
      transition: transform var(--t-med);
      z-index: 90;
      box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    /* While creating a tag, the keyboard shrinks the dvh drawer; hide the footer
       (logout/export/theme — irrelevant mid-entry) so the input sits directly
       above the keyboard instead of being crowded behind the footer. */
    .sidebar.creating-tag .sidebar-footer { display: none; }
    .sidebar-backdrop {
      position: fixed; inset: 0;
      background: rgba(30, 25, 20, .4);
      z-index: 80;
      animation: overlayIn var(--t-med);
    }
    .topbar { display: none; }
    .bottom-nav { display: flex; }
    .notes-grid { padding: var(--s-4); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .toast { bottom: calc(72px + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
    .editor-body { padding: var(--s-4); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
    .editor-overlay { padding: 0; }
    .editor { border-radius: 0; height: 100dvh; max-height: 100dvh; width: 100%; align-self: start; }
    /* Mobile has no side gutter, so block controls live in a reserved strip at
       the TOP of the block itself. Previously they floated at top:-32px, which
       overshot the 16px inter-block gap and clipped into the block above, making
       it ambiguous which block a handle belonged to. padding-top reserves the
       strip; the controls sit on the block's own surface, directly above its
       content, so the association is unmistakable. */
    /* Keep the strip compact: 28px controls, a 30px reserved strip, and a tight
       inter-block gap so stacked blocks don't feel over-spaced on a small screen. */
    .editor-blocks { gap: var(--s-2); }
    .block { padding-top: 30px; }
    .block .block-remove  { right: 0;   top: 1px; width: 28px; height: 28px; font-size: 16px; }
    .block .block-convert { right: 30px; top: 1px; width: 28px; height: 28px; }
    .block .block-drag-handle { left: 2px; top: 3px; font-size: 18px; padding: 3px 8px; }
    .editor-add-block {
      position: absolute;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
      right: 16px;
      border: none;
      padding: 0;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      z-index: 5;
    }
    .editor-add-block .ghost-button {
      background: var(--paper-light);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
  }
  @media (max-width: 420px) {
    .notes-grid { grid-template-columns: repeat(2, 1fr); --gap: 6px; padding: 6px; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .note-card-preview { -webkit-line-clamp: 8; }
    .brand { font-size: 36px; }
    .view-title { font-size: 18px; }
    .primary-button { padding: 8px 12px; }
  }