/* NotePebble live dock: the app's real desk behaviour, running on the page's right edge.
   Ported from the app (deck.css). Everything is scoped to .npdock so it can't touch the page. */
.npdock {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.32, 1.18, .42, 1);
  --dur: .38s;
  --tabW: 34px; --cardW: 300px; --cardH: 228px; --lblFont: 10.5px;
  --note-ink: #23272A; --note-muted: rgba(35, 39, 42, .55); --note-line: rgba(35, 39, 42, .1);
  --d-surface: #FFFFFF; --d-border: #E1E6EF; --d-accent: #2F6BF2;
  --c-yellow: #FCE9A6; --d-yellow: #E0A92A;
  --c-blue: #D2E4F8;   --d-blue: #4A8FD9;
  --c-green: #CFEFDB;  --d-green: #34A865;
  --c-purple: #E4D6F7; --d-purple: #8F5BD6;
  --c-pink: #F9D7E2;   --d-pink: #D9578A;
  --c-peach: #FBDFC3;  --d-peach: #E5863A;
  --c-teal: #C8ECE7;   --d-teal: #2A9F92;
  --c-gray: #E4E5E8;   --d-gray: #8A90A0;
  --font-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  position: absolute; left: 0; top: 0; right: 0; bottom: 48px; z-index: 4; pointer-events: none; overflow: hidden;
  font: 500 13.5px var(--font-ui); color: var(--note-ink); -webkit-font-smoothing: antialiased;
}
.npdock * { box-sizing: border-box; }
.npdock button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.npdock input { font: inherit; color: inherit; }
.npdock svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.npdock .hit { pointer-events: auto; }

/* note colours + fonts (same as the app) */
.npdock .c-yellow { --note: var(--c-yellow); --dot: var(--d-yellow); }
.npdock .c-blue   { --note: var(--c-blue);   --dot: var(--d-blue); }
.npdock .c-green  { --note: var(--c-green);  --dot: var(--d-green); }
.npdock .c-purple { --note: var(--c-purple); --dot: var(--d-purple); }
.npdock .c-pink   { --note: var(--c-pink);   --dot: var(--d-pink); }
.npdock .c-peach  { --note: var(--c-peach);  --dot: var(--d-peach); }
.npdock .c-teal   { --note: var(--c-teal);   --dot: var(--d-teal); }
.npdock .c-gray   { --note: var(--c-gray);   --dot: var(--d-gray); }
.npdock .f-handwritten { font-family: 'Architects Daughter', 'Segoe Print', cursive; }
.npdock .f-normal { font-family: 'Inter', 'Segoe UI', sans-serif; }

/* rich text */
.npdock .rt { outline: none; line-height: 1.55; font-size: 15px; color: var(--note-ink); user-select: text; overflow-wrap: anywhere; }
.npdock .rt p, .npdock .rt div { margin: 0; }
.npdock .rt ul, .npdock .rt ol { margin: 2px 0; padding-left: 22px; }
.npdock .rt li { margin: 1px 0; }
.npdock .rt b { font-weight: 800; }
.npdock .rt ul.checklist { list-style: none; padding-left: 2px; }
.npdock .rt ul.checklist > li { position: relative; padding-left: 26px; }
.npdock .rt ul.checklist > li::before {
  content: ''; position: absolute; left: 1px; top: .32em; width: 15px; height: 15px; border-radius: 5px;
  border: 1.6px solid rgba(35, 35, 43, .45); background: rgba(255, 255, 255, .45); cursor: pointer;
}
.npdock .rt ul.checklist > li[data-checked="true"] { color: var(--note-muted); text-decoration: line-through; text-decoration-color: rgba(35,35,43,.35); }
.npdock .rt ul.checklist > li[data-checked="true"]::before {
  background: var(--note-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--note-ink);
}

/* invisible strip that keeps the expanded tabs awake while moving between them */
.npdock .zone { position: absolute; right: 0; top: var(--zt, 40%); height: var(--zh, 20%); width: var(--zw, 20px); display: none; }
.npdock.st-tabs .zone { display: block; }

/* one sheet = tab strip + note card, full-height column */
.npdock .sheet {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--tabW) + var(--cardW));
  transform: translateX(var(--tx)); filter: drop-shadow(0 2px 3px rgba(20, 20, 10, .22));
  transition: transform var(--dur) var(--spring) var(--delay, 0ms), filter .3s ease;
  z-index: var(--z, 1); pointer-events: none;
}
.npdock .sheet.is-out { filter: drop-shadow(0 16px 26px rgba(20, 20, 10, .26)) drop-shadow(0 3px 7px rgba(20, 20, 10, .12)); }
.npdock .sh-in {
  position: absolute; inset: 0; pointer-events: auto;
  clip-path: inset(var(--ct) var(--cr2, 0px) var(--cb) var(--cl, 0px) round var(--cr));
  transition: clip-path var(--dur) var(--spring) var(--delay, 0ms);
}
.npdock .sheet.init, .npdock .sheet.init .sh-in, .npdock .sheet.init .card, .npdock .sheet.init .lbl { transition: none !important; }
.npdock .sheet.leaving { opacity: 0; transition: opacity .22s ease, transform .3s var(--ease); }
.npdock .strip {
  position: absolute; top: 0; bottom: 0; right: var(--cardW); width: var(--tabW); cursor: pointer;
  background: color-mix(in srgb, var(--note) 82%, var(--dot));
}
.npdock .sheet.is-tab .strip:hover { filter: brightness(1.04) saturate(1.1); }
.npdock .sheet.is-active .strip { box-shadow: inset 3px 0 0 rgba(35, 39, 42, .35); }
.npdock .lbl {
  position: absolute; left: 0; right: 0; top: var(--lt); height: var(--lh); opacity: var(--lo, 1);
  display: grid; place-items: center; overflow: hidden;
  transition: top var(--dur) var(--spring) var(--delay, 0ms), height var(--dur) var(--spring) var(--delay, 0ms), opacity .2s;
}
.npdock .lbl span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: calc(100% - 12px); font: 800 var(--lblFont) var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(35, 39, 42, .74);
}
.npdock .card {
  position: absolute; right: 0; width: var(--cardW); top: var(--card-top); height: var(--cardH);
  display: flex; flex-direction: column; background: var(--note); color: var(--note-ink); padding: 13px 15px 10px; cursor: pointer;
  transition: top var(--dur) var(--spring), height var(--dur) var(--spring);
}
.npdock .sheet.lifted .card { opacity: 0; transition: none; }
.npdock .c-head { display: flex; align-items: center; gap: 6px; }
.npdock .c-title { flex: 1; min-width: 0; font: 800 15px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npdock .c-when { font-size: 10.5px; color: var(--note-muted); white-space: nowrap; font-weight: 600; }
.npdock .c-body { flex: 1; min-height: 0; overflow: hidden; margin-top: 6px; -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.npdock .c-body .rt { font-size: 14px; }

/* new-note button under the last tab */
.npdock .add {
  position: absolute; right: 5px; top: var(--add-top, 60%); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--d-surface); color: var(--d-accent); border: 1px solid var(--d-border);
  box-shadow: 0 8px 22px -8px rgba(30, 30, 20, .3); opacity: 0; transform: scale(.4); pointer-events: none; z-index: 50;
  transition: opacity .2s, transform .3s var(--spring), top var(--dur) var(--spring), background .15s, color .15s;
}
.npdock .add svg { width: 14px; height: 14px; stroke-width: 2.6; }
.npdock.st-tabs .add { opacity: 1; transform: none; pointer-events: auto; }
.npdock .add:hover { background: var(--d-accent); color: #fff; border-color: var(--d-accent); }

/* floating open note */
.npdock .float {
  position: absolute; z-index: 60; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--note); color: var(--note-ink); transform-origin: 0 0;
  box-shadow: 0 28px 60px -18px rgba(20, 20, 10, .42), 0 6px 16px rgba(20, 20, 10, .12), inset 0 0 0 1px rgba(255,255,255,.35);
}
.npdock .float[hidden] { display: none; }
.npdock .f-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px 22px; margin-right: 6px; border-bottom: 1px solid var(--note-line); cursor: grab; }
.npdock .dragging .f-head { cursor: grabbing; }
.npdock .f-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.npdock .f-title { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; font: 800 17px var(--font-ui); color: var(--note-ink); }
.npdock .f-title::placeholder { color: var(--note-muted); }
.npdock .f-when { font-size: 11.5px; color: var(--note-muted); font-weight: 600; white-space: nowrap; }
.npdock .f-x { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; opacity: .55; }
.npdock .f-x:hover { opacity: 1; background: rgba(35, 39, 42, .08); }
.npdock .f-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 10px; cursor: text; }
.npdock .f-body .rt { font-size: 16px; min-height: 100%; }
.npdock .f-body .rt:empty::before { content: 'Write something…'; color: var(--note-muted); }
.npdock .f-tools { display: flex; align-items: center; gap: 2px; padding: 4px 14px 6px; }
.npdock .tb { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; opacity: .7; }
.npdock .tb svg.i { width: 15px; height: 15px; }
.npdock .tb:hover { background: rgba(35, 35, 43, .08); opacity: 1; }
.npdock .tb .t { font: 800 14px var(--font-ui); }
.npdock .sep { width: 1px; height: 16px; background: var(--note-line); margin: 0 5px; }
.npdock .f-foot { display: flex; align-items: center; gap: 4px; padding: 10px 14px 14px 22px; border-top: 1px solid var(--note-line); margin: 0 6px; }
.npdock .grow { flex: 1; }
.npdock .swatches { display: flex; gap: 6px; padding: 3px; }
.npdock .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--note); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .12s; }
.npdock .swatch:hover { transform: scale(1.18); }
.npdock .swatch.on { box-shadow: 0 0 0 2px var(--note), 0 0 0 3.5px var(--note-ink); }
.npdock .fq { height: 32px; padding: 0 12px; border-radius: 10px; font: 700 13px var(--font-ui); transition: background .15s, box-shadow .15s; }
.npdock .fq:hover { background: rgba(255, 255, 255, .6); box-shadow: 0 2px 8px rgba(20, 20, 10, .12); }
.npdock .fq.del { color: #C43545; }

/* undo toast */
.npdock .toast {
  position: absolute; bottom: 28px; right: 64px; display: flex; align-items: center; gap: 12px;
  padding: 9px 9px 9px 15px; border-radius: 14px; background: #1E2523; color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: all .3s var(--spring); overflow: hidden; max-width: 320px; z-index: 99;
}
.npdock .toast.show { transform: none; opacity: 1; pointer-events: auto; }
.npdock .toast .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npdock .toast button { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 800; }
.npdock .toast button:hover { background: rgba(255,255,255,.24); }
.npdock .toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: #6D9BFF; width: 100%; }

@media (prefers-reduced-motion: reduce) { .npdock { --dur: .01s; } }

/* website demo: a forgiving strip along the edge, and pills that breathe until first use */
.npdock .edgezone { position: absolute; right: 0; top: 0; bottom: 0; width: 30px; z-index: 0; }
.npdock .sheet { z-index: var(--z, 1); }
.npdock.attract .strip { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.12) saturate(1.3); } }