/* ---------- vector cursors (Chrome's bitmap ones blur on high-DPI screens) ---------- */
:root {
  --cur-ew: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%20256%20256'%3E%3Cg%20transform='rotate(0%20128%20128)'%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='30'%20stroke-linejoin='round'/%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 14 14, ew-resize;
  --cur-ns: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%20256%20256'%3E%3Cg%20transform='rotate(90%20128%20128)'%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='30'%20stroke-linejoin='round'/%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 14 14, ns-resize;
  --cur-nwse: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%20256%20256'%3E%3Cg%20transform='rotate(45%20128%20128)'%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='30'%20stroke-linejoin='round'/%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 14 14, nwse-resize;
  --cur-nesw: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%20256%20256'%3E%3Cg%20transform='rotate(135%20128%20128)'%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='30'%20stroke-linejoin='round'/%3E%3Cpath%20d='M237.66,133.66l-32,32A8,8,0,0,1,192,160V136H64v24a8,8,0,0,1-13.66,5.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,64,96v24H192V96a8,8,0,0,1,13.66-5.66l32,32A8,8,0,0,1,237.66,133.66Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") 14 14, nesw-resize;
  --cur-copy: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M2%202l10.5%209.5-4.6.6%202.7%206.1-2.4%201-2.7-6.1L2%2016.5z'%20transform='translate(7%200)'%20fill='%23fff'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3Cpath%20d='M2%202l10.5%209.5-4.6.6%202.7%206.1-2.4%201-2.7-6.1L2%2016.5z'%20transform='translate(0%207)'%20fill='%23fff'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 2 9, copy;
  --cur-hand: url("/img/cursor-hand.svg") 11 9, grab;   /* editable file: public/img/cursor-hand.svg */
}
:root {
  --inv: 1;
  --font: "Geist", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ink: #1e1e1e;
  --rule: #1e1e1e;
  --hair: #e6e6e6;
  --muted: #b8b8b8;
  --accent: #1a73e8;
  --danger: #d93025;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #fff; color: var(--ink); font-family: var(--font); overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { height: 100%; display: flex; flex-direction: column; }

/* ---------- top bar: legend (add) + tools ---------- */
#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: #1e1e1e; color: #fff; z-index: 10; }
#legend { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
#legend::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 4px; border: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; flex: none; touch-action: pan-x; color: var(--ink); }
.chip.light { color: #fff; }
.chip:active { transform: scale(.96); }
#tools { display: flex; gap: 2px; flex: none; align-items: center; }
.tb { height: 34px; min-width: 34px; border: 0; background: transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tb.txt { font-size: 12px; font-weight: 500; padding: 0 10px; }
.tb:active { background: rgba(255,255,255,.16); }
.tb:disabled { opacity: .3; }
.tb.on { background: #fff; color: #1e1e1e; }
.tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#modebar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #2c2c2c; color: #fff; font-size: 13px; }
#modebar .ghost { background: transparent; color: #fff; border-color: #555; }
#modebar span { flex: 1; }

/* ---------- canvas ---------- */
#viewport { position: relative; flex: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: #fff; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#tints, #grid, #selection, #blocks { position: absolute; left: 0; top: 0; }
#blocks { isolation: isolate; }   /* block z-order is relative to other blocks only, never the grid */
.dots { position: absolute; background-image: radial-gradient(circle, #e2e2e2 .9px, transparent 1.4px); pointer-events: none; }

.we { position: absolute; background: #f8f7f6; }
.vl { position: absolute; width: 1px; background: var(--hair); }
.hl { position: absolute; height: 2px; background: var(--rule); }
.hd { position: absolute; display: flex; align-items: flex-end; padding: 0 0 14px var(--inset, 16px); font-size: 27px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.hd.we { background: none; }
.wl { position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 14px var(--inset, 16px) 12px 8px; text-align: right; }
.wl .date { font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.wl.past .date { color: var(--muted); }
.wl .cap { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 26px; color: #cfcfcf; align-self: flex-end; line-height: 1; white-space: nowrap; }
.wl .bin { border: 0; background: transparent; padding: 6px; margin: 8px -6px 0 0; border-radius: 6px; color: #d0d0d0; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; float: right; }
.wl .bin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl .bin.confirm { color: #fff; background: var(--danger); padding: 6px 8px; font-weight: 500; }
.qpanel { position: absolute; }
.qpanel .qtitle { font-size: 14px; font-weight: 500; color: #9a9a9a; letter-spacing: .04em; text-transform: uppercase; padding: 0 0 10px 2px; }
.tint { position: absolute; opacity: .34; mix-blend-mode: multiply; pointer-events: none; }
#tints { pointer-events: none; }
.selday { position: absolute; border: 2px dashed var(--accent); background: rgba(26,115,232,.08); }

.block { position: absolute; border-radius: 4px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px 13px; font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; color: var(--ink); cursor: default; }
.block.light { color: #fff; }
.block.tbc { /* fill alpha is set inline (rgba); text stays fully opaque */ }
.block .txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 1); max-width: 100%; max-height: 100%; overflow: hidden; word-break: break-word; white-space: pre-wrap; outline: none; }
.block.editing .txt { display: block; -webkit-line-clamp: unset; }
.block.editing { cursor: text; }
.block.editing .txt { user-select: text; -webkit-user-select: text; min-width: 1em; min-height: 1em; cursor: text; }
.block.sel { outline: calc(1.5px * var(--inv)) solid var(--ink); outline-offset: calc(-1px * var(--inv)); }
.block.dragging { opacity: .9; }
#viewport.dragging, #viewport.dragging *, body.dragging, body.dragging * { cursor: var(--cur-hand) !important; }   /* hand only while actually moving a block */
body.alt .block:not(.editing) { cursor: var(--cur-copy); }   /* alt/option held: drag out a copy */
.block.ghost { pointer-events: none; }


/* ---------- floating toolbar for the selected block (dark, Figma-like) ---------- */
#seltb { position: fixed; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #1e1e1e; color: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.32); flex-wrap: wrap; max-width: calc(100vw - 16px); }
#tb-sw { display: flex; gap: 6px; }
#tb-sw .sw { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); padding: 0; }
#tb-sw .sw.on { border-color: #fff; }
#seltb .sep { width: 1px; height: 24px; background: rgba(255,255,255,.16); }
#tb-tbc { height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #cfcfcf; }
#tb-tbc.on { background: #fff; border-color: #fff; color: #1e1e1e; }
.ib { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ib:active { background: rgba(255,255,255,.16); }
.ib.danger { color: #ff8a78; }
.ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib.confirm { background: var(--danger); color: #fff; }
#seltb .hexlab { color: #9a9a9a; }
#seltb .hexlab input { background: #2c2c2c; color: #fff; border-color: #444; }
.hexlab { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; color: #777; }
.hexlab input { width: 58px; font: inherit; font-size: 12px; padding: 4px 5px; border: 1px solid #ddd; border-radius: 6px; text-transform: lowercase; }

/* ---------- generic ---------- */
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
button.ghost { border: 1px solid #ddd; background: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; }
button.ghost:active { background: #f0f0f0; }
button.danger { color: var(--danger); }
button.confirm { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }

/* ---------- tint picker ---------- */
#tintpicker { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 35; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.tp-title { font-weight: 500; font-size: 14px; }
#tp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#tp-swatches .sw { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #ddd; padding: 0; }

/* ---------- settings ---------- */
#settings { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.dlg { background: #fff; border-radius: 12px; padding: 14px 16px; width: min(92vw, 400px); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.st-section { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #999; margin-top: 6px; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.st-row input[type=number] { width: 64px; font: inherit; padding: 4px 6px; border: 1px solid #ddd; border-radius: 6px; }
.st-row code { font-size: 12px; color: #666; }
#st-legend { display: flex; flex-direction: column; gap: 2px; }
.lg-row { display: flex; align-items: center; gap: 8px; }
.lg-row input[type=text] { flex: 1; font: inherit; font-size: 14px; padding: 3px 8px; border: 1px solid #ddd; border-radius: 6px; }
.lg-row input[type=color] { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; overflow: hidden; cursor: pointer; }
.lg-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.lg-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.lg-row input[type=color]::-moz-color-swatch { border: 0; border-radius: 6px; }
.lg-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #666; white-space: nowrap; }

/* ---------- login + sync status ---------- */
#login { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; align-items: center; justify-content: center; }
.login-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px; text-align: center; }
.login-card img { border-radius: 16px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 600; }
#login-error { margin: 0; color: var(--danger); font-size: 13px; max-width: 320px; }
.btn-google { display: inline-block; padding: 10px 18px; border-radius: 8px; background: #1e1e1e; color: #fff; text-decoration: none; font-weight: 500; font-size: 14px; }
#sync { font-size: 11px; color: #ff8a78; padding: 0 8px; white-space: nowrap; }

/* ---------- small screens: tools on the first row, pills wrap underneath ---------- */
@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; row-gap: 6px; }
  #tools { order: 1; width: 100%; justify-content: flex-end; }
  #tools #sync { margin-right: auto; }
  #legend { order: 2; width: 100%; }   /* one scrollable row of pills under the tools */
}