@import url(fonts.css);

/* ---------- themes ---------- */
:root, .theme-paper {
  --bg: #f3eee4;
  --bg-image: none;
  --string: #c8102e;
  --string-shadow: rgba(60, 30, 20, .28);
  --ink: #2b2622;
  --ui-bg: #fffdf8;
  --ui-line: #ddd5c6;
  --ui-ink: #2b2622;
  --ui-muted: #8a8174;
  --card-shadow: 0 1px 1px rgba(60,40,20,.10), 0 6px 14px rgba(60,40,20,.12);
}
.theme-cork {
  --bg: #c49a69;
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .19 0 0 0 0 .07 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --string: #b0001e;
  --string-shadow: rgba(40, 20, 5, .45);
  --card-shadow: 0 1px 1px rgba(40,20,5,.25), 0 8px 16px rgba(40,20,5,.28);
}
.theme-night {
  --bg: #23272e;
  --bg-image: radial-gradient(ellipse at 50% 40%, rgba(255,230,180,.10), transparent 65%);
  --string: #ff3b3b;
  --string-shadow: rgba(0,0,0,.6);
  --ink: #2b2622;
  --ui-bg: #2e333b;
  --ui-line: #444b55;
  --ui-ink: #ecebe8;
  --ui-muted: #9aa0a8;
  --card-shadow: 0 2px 2px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.45);
}
.theme-night .board { background-size: 100% 100%; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Inter, system-ui, sans-serif; color: var(--ui-ink); background: var(--bg); }

.board {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background-color: var(--bg); background-image: var(--bg-image);
}
.item { position: absolute; box-shadow: var(--card-shadow); color: var(--ink); }
.strings { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.strings path.s { fill: none; stroke: var(--string); stroke-width: 2.4; stroke-linecap: round; }
.strings path.sh { fill: none; stroke: var(--string-shadow); stroke-width: 3; stroke-linecap: round; filter: blur(1.6px); }
.strings path.s, svg path.s { stroke: var(--string); }
path.s.money { stroke: #1f8a4c; }
path.s.family { stroke: #2563c9; }
path.s.maybe { stroke-dasharray: 7 6; }
.pins { position: absolute; inset: 0; z-index: 11; pointer-events: none; }

/* ---------- pin ---------- */
.pin {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 2px, transparent 3.5px), var(--pin, #d9322b);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset, 2px 3px 3px rgba(0,0,0,.35);
}
.pin.sel { outline: 2px solid #3b82f6; outline-offset: 3px; }

/* ---------- photo frames ---------- */
.photo { background: #fff; }
.photo .img { position: relative; overflow: hidden; display: grid; place-items: center; }
.photo .img svg { position: absolute; bottom: 0; width: 78%; }
.photo .img .ini { position: relative; z-index: 1; font: 600 13px Inter; letter-spacing: .08em; color: rgba(255,255,255,.75); align-self: start; margin-top: 8px; }
.polaroid { padding: 10px 10px 0; }
.polaroid .cap { font: 700 22px/1 Caveat; text-align: center; padding: 8px 4px 10px; }
.print { padding: 5px; }
.print .cap { display: none; }
.mugshot { background: #e9e6df; padding: 0; }
.mugshot .img { background:
  repeating-linear-gradient(to bottom, transparent 0 19px, rgba(0,0,0,.35) 19px 20px), #b9b6ae !important; }
.mugshot .img::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(0,0,0,.5) 9px 10px); }
.mugshot .placard { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: #15171a; color: #f2f0ea; font: 700 10px/1.25 'Courier Prime'; padding: 4px 8px; text-align: center; white-space: nowrap; }
.mugshot .cap { font: 700 12px 'Courier Prime'; text-transform: uppercase; padding: 6px 8px; letter-spacing: .05em; }

/* ---------- post-it ---------- */
.postit { width: 160px; min-height: 150px; padding: 18px 14px; font: 400 25px/1.05 Caveat; background: #ffe27a;
  box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 10px 12px -6px rgba(0,0,0,.25); }
.postit.pink { background: #ffb3c7; } .postit.blue { background: #a9d8f5; } .postit.green { background: #bfe8a4; } .postit.orange { background: #ffc58a; }

/* ---------- index card ---------- */
.card { width: 230px; background:
  linear-gradient(to bottom, transparent 0 34px, #e8888a 34px 35px, transparent 35px),
  repeating-linear-gradient(to bottom, transparent 0 21px, #b7cde6 21px 22px) 0 13px / 100% 100% no-repeat,
  #fffefa; padding: 9px 14px 14px; font: 400 13px/22px 'Courier Prime'; }
.card h4 { margin: 0 0 4px; font: 700 15px/26px 'Courier Prime'; text-transform: uppercase; letter-spacing: .03em; }
.card p { margin: 0; }

/* ---------- clipping ---------- */
.clip { width: 260px; background: #efe8d6; padding: 14px 16px 18px; color: #1d1b18;
  clip-path: polygon(0 2%, 6% 0, 13% 1.5%, 21% 0, 30% 1.2%, 38% 0, 47% 1.6%, 55% .2%, 63% 1.4%, 72% 0, 80% 1.5%, 89% .3%, 100% 1.8%,
    99% 20%, 100% 41%, 98.8% 62%, 100% 84%, 99% 100%, 90% 98.5%, 81% 100%, 71% 98.4%, 62% 100%, 51% 98.7%, 42% 100%, 32% 98.3%, 22% 100%, 12% 98.6%, 0 100%, 1% 78%, 0 55%, 1.2% 30%);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); box-shadow: none; }
.clip .mast { font: 700 10px Inter; letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; border-bottom: 1px solid #1d1b18; padding-bottom: 3px; margin-bottom: 7px; }
.clip h3 { margin: 0 0 8px; font: 900 23px/1.05 'Playfair Display'; }
.clip p { margin: 0; font: 400 11px/1.4 'Old Standard TT'; column-count: 2; column-gap: 12px; hyphens: auto; }

/* ---------- document ---------- */
.doc { width: 220px; background: #fbfaf6; padding: 16px 16px 20px; font: 400 11px/1.6 'Special Elite'; }
.doc .hd { font-size: 12px; text-align: center; margin-bottom: 8px; letter-spacing: .1em; }
.doc .r { background: #111; color: transparent; padding: 0 2px; }

/* ---------- stamp ---------- */
.stamp { position: absolute; font: 400 26px/1 'Black Ops One'; letter-spacing: .06em; color: #c21d1d; border: 3px solid currentColor;
  padding: 6px 10px 4px; border-radius: 4px; box-shadow: 0 0 0 2px transparent, inset 0 0 0 2px transparent; opacity: .82; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0 40%, rgba(0,0,0,.65) 70%), repeating-radial-gradient(circle at 60% 50%, #000 0 2px, rgba(0,0,0,.7) 3px 4px);
  -webkit-mask-composite: source-in; }
.stamp.blue { color: #1f4fbf; } .stamp.black { color: #222; }
.theme-night .stamp { mix-blend-mode: normal; }
.theme-night .stamp.black { color: #d8d4cc; }

/* ---------- marker + tags ---------- */
.marker { position: absolute; pointer-events: none; overflow: visible; }
.marker path { fill: none; stroke: #d11; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.marker text { font: 400 30px 'Permanent Marker'; fill: #d11; }
.theme-night .marker path, .theme-night .marker text { stroke: #ff5a4f; }
.theme-night .marker text { fill: #ff5a4f; stroke: none; }
.tag { position: absolute; transform: translate(-50%, -50%); background: #fffdf3; border: 1px solid rgba(0,0,0,.15); padding: 1px 8px 2px;
  font: 700 17px/1.1 Caveat; color: #2b2622; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.18); border-radius: 2px; }

/* ---------- app chrome (toolbar etc) ---------- */
.topbar { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 10; }
.topbar > * { pointer-events: auto; }
.panel { background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); color: var(--ui-ink); }
.title { padding: 8px 12px; font: 600 14px Inter; display: flex; gap: 10px; align-items: center; }
.title .sub { font-weight: 400; color: var(--ui-muted); font-size: 12px; }
.tools { display: flex; padding: 4px; gap: 2px; }
.tool { width: 38px; height: 38px; border-radius: 7px; display: grid; place-items: center; color: var(--ui-ink); position: relative; }
.tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool.on { background: #fde2e2; color: #b0001e; }
.theme-night .tool.on { background: #4a2a2e; color: #ff8080; }
.tool .k { position: absolute; right: 3px; bottom: 1px; font: 500 9px Inter; color: var(--ui-muted); }
.sep { width: 1px; background: var(--ui-line); margin: 6px 3px; }
.btn { padding: 8px 12px; font: 500 13px Inter; border-radius: 8px; }
.btn.primary { background: #b0001e; color: #fff; border-color: #b0001e; }
.zoom { position: absolute; left: 14px; bottom: 14px; z-index: 10; display: flex; align-items: center; font: 500 12px Inter; }
.zoom span { padding: 8px 10px; }

/* ---------- map ---------- */
.mapobj { background: #fbf7ec; padding: 8px 8px 26px; position: relative; }
.mapobj .mapc { position: relative; overflow: hidden; }
.mapobj .folds { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 26px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 6px), rgba(0,0,0,.07) 33.3%, rgba(255,255,255,.25) calc(33.3% + 1px), transparent calc(33.3% + 8px)),
    linear-gradient(90deg, transparent calc(66.6% - 6px), rgba(255,255,255,.22) 66.6%, rgba(0,0,0,.06) calc(66.6% + 1px), transparent calc(66.6% + 8px)),
    linear-gradient(180deg, transparent calc(50% - 6px), rgba(0,0,0,.07) 50%, rgba(255,255,255,.22) calc(50% + 1px), transparent calc(50% + 8px)); }
.mapobj .maplab { position: absolute; left: 10px; bottom: 5px; font: 700 12px 'Courier Prime'; text-transform: uppercase; letter-spacing: .04em; color: #2b2622; }
.mapobj .osm { position: absolute; right: 10px; bottom: 7px; font: 400 8.5px Inter; color: #8a8174; }
.mapobj.map-vintage { background: #f3e6c6; }
.mapobj.map-night { background: #e9e6df; }
.mark { width: 60px; height: 44px; z-index: 3; }
.mark svg { width: 60px; height: 44px; overflow: visible; }
.mark path { fill: none; stroke: #d11; stroke-width: 3; stroke-linecap: round; }
.mark span { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); white-space: nowrap; font: 400 15px 'Permanent Marker'; color: #d11; text-shadow: 0 0 3px rgba(255,255,255,.8); }
.map-night .mark path { stroke: #ff5a4f; } .map-night .mark span { color: #ff5a4f; text-shadow: 0 0 3px rgba(0,0,0,.8); }

/* ---------- round 4: marks layer and legend ---------- */
svg.marks { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.legend p { font: 400 13px/22px 'Courier Prime'; }
.item.attach-target { outline: 2px dashed #3b82f6; outline-offset: 4px; }
.item.selected { outline: 1.5px solid #3b82f6; outline-offset: 3px; }
.attach-label { position: absolute; z-index: 1002; font: 600 11px Inter; background: #3b82f6; color: #fff; padding: 3px 7px; border-radius: 4px; pointer-events: none; display: none; white-space: nowrap; }