/* keep — note editor. Phone: full-screen sheet. Desktop: centred modal. Colours/tokens come from style.css. */
#editor-root:empty { display: none }
.ed-backdrop { position: fixed; inset: 0; z-index: 30; background: #0008; display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .18s; overscroll-behavior: contain }
.ed-backdrop:has(.ed.in) { opacity: 1 }
.ed-backdrop:has(.ed.out) { opacity: 0 }
.ed { position: relative; width: 100%; height: 100dvh; display: flex; flex-direction: column;
  transform: translateY(24px); opacity: 0; transition: transform .2s ease-out, opacity .18s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) }
.ed.tinted { background-color: var(--bg); background-image: linear-gradient(color-mix(in srgb, var(--c) var(--tint), transparent), color-mix(in srgb, var(--c) var(--tint), transparent)) }
.ed.in { transform: none; opacity: 1 }
.ed.out { transform: translateY(24px); opacity: 0 }

.ed-top { display: flex; align-items: center; gap: 2px; padding: 4px 6px 0; flex: none }
.ed-top .sp { flex: 1 }
.ed.ro .ed-top .ib[title=Pin], .ed.ro .ed-top .ib[title=Unpin], .ed.ro .ed-top .ib[title=Archive], .ed.ro .ed-top .ib[title=Unarchive] { display: none }

.ed-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 24px }
.ed-title { display: block; width: 100%; resize: none; overflow: hidden; font: 600 22px/1.25 var(--serif); letter-spacing: -.005em; padding: 8px 0 6px; font-variation-settings: 'opsz' 48 }
.ed-title::placeholder, .ed-text::placeholder { color: var(--dim); opacity: .7 }
.ed-text { display: block; width: 100%; resize: none; overflow: hidden; min-height: 96px; font: 16px/1.55 var(--sans); white-space: pre-wrap; padding: 4px 0 }

/* images */
.ed-images { display: grid; gap: 2px; margin: 0 -16px 8px }
.ed-images:empty { display: none }
.ed-images.n1 { grid-template-columns: 1fr }
.ed-images.n2 { grid-template-columns: 1fr 1fr }
.ed-images.n3 { grid-template-columns: 1fr 1fr 1fr }
.ed-img { max-height: 40vh; position: relative; margin: 0; overflow: hidden; background: var(--bg2) }
.ed-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; max-height: 55vh }
.ed-img .rm { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #0009; color: #fff; opacity: .85 }
.ed-img .rm .icon { width: 16px; height: 16px }
.lightbox { position: absolute; inset: 0; z-index: 5; background: #000d; display: grid; place-items: center; cursor: zoom-out }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain }
.lb-x { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; color: #fff }

/* labels */
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px }
.ed-chips:empty { display: none }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dim); letter-spacing: .02em }
.chip::before { content: '#'; opacity: .6 }
.chip .x .icon { width: 12px; height: 12px; opacity: .5 }
.chip:hover { color: var(--ink) } .chip:hover .x .icon { opacity: 1 }
.chip:disabled { cursor: default }

/* bottom bar */
.ed-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px; border-top: 1px solid var(--rule); min-height: 48px }
.ed-tools { display: flex; align-items: center }
.ed-meta { margin-left: auto; font-size: 11px; color: var(--dim); padding-right: 8px; white-space: nowrap }
.ed-closebtn { display: none; font-size: 12px; color: var(--ink); padding: 8px 10px; letter-spacing: .04em; text-transform: uppercase }
.ed-closebtn:hover { color: var(--cyan) }
.ed-trash { display: none; flex: none; align-items: center; gap: 20px; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 12px }
.ed-trash span { color: var(--dim); margin-right: auto }
.ed-trash button { text-transform: uppercase; letter-spacing: .05em; color: var(--cyan) }
.ed-trash .danger, .pop .danger { color: var(--danger) }
.ed.ro .ed-bar { display: none }
.ed.ro .ed-trash { display: flex }

/* popovers (floating menus need a surface; a hairline, no shadow) */
.pop { position: absolute; z-index: 6; left: 8px; bottom: calc(52px + env(safe-area-inset-bottom)); max-width: calc(100% - 16px); background: var(--bg2);
  border: 1px solid var(--rule); border-radius: 8px; padding: 6px; min-width: 200px; max-height: 50vh; overflow: auto }
.pop.colour { padding: 10px 12px }
.swatches { display: grid; grid-template-columns: repeat(6, 32px); gap: 10px 10px }
.sw { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 1.5px solid transparent; position: relative }
.sw[data-color=default] { background: none; border-color: var(--faint) }
.sw[aria-pressed=true]::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink) }
.sw:hover { transform: scale(1.08) }
.pop-in { width: 100%; padding: 8px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-size: 14px }
.pop-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; text-align: left; border-radius: 4px; font-size: 14px; cursor: pointer }
.pop-row:hover { background: var(--rule) }
.pop-row .icon { width: 18px; height: 18px; color: var(--dim) }
.pop-row.danger .icon { color: var(--danger) }
.pop-row input { accent-color: var(--cyan); width: 16px; height: 16px; margin: 0 }
.pop-row.create { color: var(--cyan) }
.pop-empty { padding: 10px 8px; font-size: 12px; color: var(--dim) }

/* checklist */
.cl-row { position: relative; display: flex; align-items: flex-start; gap: 0; min-height: 40px }
.cl-row[data-indent="1"] { padding-left: 32px }
.cl-row.shift { transition: transform .15s }
.cl-row.dragging { z-index: 2; background: color-mix(in srgb, var(--c, transparent) var(--tint), var(--bg2)); transition: none; opacity: .96 }
.cl-drag, .cl-h { flex: none; width: 24px; height: 40px; display: grid; place-items: center; color: var(--dim); opacity: .35; touch-action: none; cursor: grab; margin-left: -6px }
.cl-h { cursor: default }
.cl-drag .icon { width: 18px; height: 18px; stroke-width: 2 }
.cl-row:hover .cl-drag, .cl-row:focus-within .cl-drag { opacity: .8 }
.cl-row.dragging .cl-drag { cursor: grabbing; opacity: 1; color: var(--cyan) }
.cl-box { flex: none; width: 36px; height: 40px; display: grid; place-items: center; color: var(--dim) }
.cl-box:hover:not(:disabled) { color: var(--ink) }
.cl-row.checked .cl-box { color: var(--cyan) }
.cl-text { flex: 1; min-width: 0; resize: none; overflow: hidden; font: 16px/1.4 var(--sans); padding: 9px 0 9px 2px; white-space: pre-wrap; overflow-wrap: anywhere }
.cl-row.checked .cl-text { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--faint) }
.cl-ind, .cl-x { flex: none; width: 34px; height: 40px; display: none; place-items: center; color: var(--dim) }
.cl-ind .icon, .cl-x .icon { width: 16px; height: 16px }
.cl-ind:hover, .cl-x:hover { color: var(--ink) }
.cl-row:hover .cl-x, .cl-row:focus-within .cl-x, .cl-row:focus-within .cl-ind { display: grid }
@media (hover: hover) { .cl-ind { display: none !important } .cl-row:hover .cl-ind, .cl-row:focus-within .cl-ind { display: grid !important } }
.cl-add { display: flex; align-items: center; width: 100%; height: 40px; color: var(--dim); gap: 0; font-size: 15px; text-align: left }
.cl-add > span:first-child { width: 36px; display: grid; place-items: center; margin-left: 18px }
.cl-add .icon { width: 18px; height: 18px }
.cl-add:hover { color: var(--ink) }
.cl-head { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 12px 0 6px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--dim); letter-spacing: .03em; text-align: left }
.cl-head .car .icon { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s }
.cl-head[aria-expanded=true] .car .icon { transform: rotate(-270deg) }
.cl-head:hover { color: var(--ink) }

/* desktop: centred modal */
@media (min-width: 700px) {
  .ed-backdrop { align-items: center }
  .ed { width: 600px; height: auto; max-height: 85vh; padding: 0; transform: translateY(12px) scale(.985) }
  .ed.in { transform: none }
  .ed.out { transform: translateY(12px) scale(.985) }
  .ed-body { padding: 4px 24px 28px }
  .ed-images { margin: 0 -24px 10px }
  .ed-bar { padding: 2px 10px 2px 8px }
  .ed-meta { margin-left: auto }
  .ed-closebtn { display: block }
  .ed-title { font-size: 24px }
  .ed-text { font-size: 15.5px }
  .pop { bottom: 54px }
}
@media (prefers-reduced-motion: reduce) { .ed, .ed-backdrop, .cl-row.shift { transition: none } }