/* Pinboard — same design language as the rest of masano.casa:
   dark chrome, filament-orange accent, monospace details — wrapped
   around a warm cork surface. */

:root {
  --color-bg: oklch(16% 0.015 260);
  --color-bg-raise: oklch(21% 0.018 260);
  --color-surface: oklch(25% 0.02 260);
  --color-text: oklch(93% 0.01 260);
  --color-text-dim: oklch(65% 0.015 260);
  --color-accent: oklch(72% 0.18 55);
  --color-accent-deep: oklch(60% 0.19 45);
  --color-line: oklch(35% 0.02 260);

  --cork: oklch(66% 0.075 70);
  --cork-dark: oklch(58% 0.075 65);

  --radius: 14px;
  --duration-fast: 150ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --hand: "Bradley Hand", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive;

  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; overscroll-behavior: none; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* ===== Login ===== */
.login {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
  background:
    radial-gradient(70rem 30rem at 50% -10%, oklch(28% 0.05 55 / 0.35), transparent 60%),
    var(--color-bg);
}
.login-inner { width: min(26rem, 100%); text-align: center; }

.kicker {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.kicker::before { content: "▲ "; font-size: 0.6rem; vertical-align: 2px; }

.login h1 {
  font-size: clamp(2.4rem, 1.4rem + 5vw, 3.6rem);
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}
.login h1 em { font-style: normal; color: var(--color-accent); }
.sub { color: var(--color-text-dim); margin-top: 0.6rem; }

.user-grid {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.user-tile {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: var(--color-bg-raise);
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out-expo);
}
.user-tile:hover { border-color: var(--color-accent-deep); transform: translateY(-2px); }
.user-tile .face { font-size: 2rem; }
.user-tile .uname { font-size: 0.85rem; color: var(--color-text-dim); }
.user-tile.add .face { filter: grayscale(1); opacity: 0.7; }

.pin-form, .new-user { margin-top: 1.8rem; display: grid; gap: 0.9rem; justify-items: center; }
.pin-who { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-dim); }
.pin-who span:first-child { font-size: 1.6rem; }

#pinInput, #nuPin, #nuName, #linkUrl {
  width: 100%;
  max-width: 16rem;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  padding: 0.7rem 1rem;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  outline: 0;
}
#nuName, #linkUrl { letter-spacing: normal; font-size: 1.05rem; text-align: left; }
#pinInput:focus, #nuPin:focus, #nuName:focus, #linkUrl:focus { border-color: var(--color-accent-deep); }

.pin-row { display: flex; gap: 0.7rem; }
.pin-row button[type="submit"], .user-tile.primary {
  font-weight: 650;
  color: oklch(15% 0.03 55);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  border-radius: calc(var(--radius) - 4px);
  padding: 0.6rem 1.3rem;
}
button.ghost {
  color: var(--color-text-dim);
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 4px);
}
button.ghost:hover { color: var(--color-text); border-color: var(--color-accent-deep); }

.avatar-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; max-width: 20rem; }
.avatar-grid button {
  font-size: 1.5rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 2px solid transparent;
}
.avatar-grid button.sel { border-color: var(--color-accent); background: var(--color-bg-raise); }

.nu-title { color: var(--color-text-dim); font-size: 0.95rem; }
.login-error { margin-top: 1rem; min-height: 1.3em; color: oklch(70% 0.19 25); font-size: 0.9rem; }

/* ===== Chrome ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.9rem 0.5rem;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: oklch(16% 0.015 260 / 0.75);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
}
.brand-pin {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, oklch(85% 0.14 55), var(--color-accent-deep) 70%);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.5);
}
.top-actions { display: flex; gap: 0.5rem; }
.top-actions .ghost {
  background: oklch(16% 0.015 260 / 0.75);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

/* ===== Board ===== */
/* The backdrop pattern lives on the viewport and is driven by the camera
   (--zoom / --pan-x / --pan-y set from JS), so it tiles forever — zooming
   out never reveals an edge. The board div itself is an invisible plane. */
.viewport {
  --zoom: 0.5;
  --pan-x: 0px;
  --pan-y: 0px;
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  background-color: oklch(17% 0.018 260);
}
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90rem 45rem at 50% -12%, oklch(30% 0.03 260 / 0.35), transparent 65%);
}
.viewport.bg-slate {
  background-image: radial-gradient(var(--dot) max(1px, calc(1.7px * var(--zoom))), transparent max(1.4px, calc(2.4px * var(--zoom))));
  background-size: calc(58px * var(--zoom)) calc(58px * var(--zoom));
  background-position: var(--pan-x) var(--pan-y);
}
.dots-steel    { --dot: oklch(48% 0.025 250 / 0.55); }
.dots-pink     { --dot: oklch(63% 0.14 356 / 0.5); }
.dots-ember    { --dot: oklch(62% 0.13 55 / 0.5); }
.dots-mint     { --dot: oklch(62% 0.09 165 / 0.5); }
.dots-lavender { --dot: oklch(60% 0.1 295 / 0.5); }

.viewport.bg-cork {
  background-color: var(--cork);
  background-image:
    radial-gradient(oklch(48% 0.07 60 / 0.55) max(1px, calc(1.2px * var(--zoom))), transparent calc(1.7px * var(--zoom))),
    radial-gradient(oklch(78% 0.07 80 / 0.5) max(1px, calc(1px * var(--zoom))), transparent calc(1.5px * var(--zoom))),
    radial-gradient(oklch(42% 0.06 55 / 0.4) max(1px, calc(2px * var(--zoom))), transparent calc(2.7px * var(--zoom))),
    radial-gradient(oklch(72% 0.08 75 / 0.35) max(1px, calc(1.5px * var(--zoom))), transparent calc(2.1px * var(--zoom)));
  background-size:
    calc(41px * var(--zoom)) calc(37px * var(--zoom)),
    calc(23px * var(--zoom)) calc(29px * var(--zoom)),
    calc(71px * var(--zoom)) calc(61px * var(--zoom)),
    calc(53px * var(--zoom)) calc(47px * var(--zoom));
  background-position: var(--pan-x) var(--pan-y);
}
.viewport.bg-cork::after {
  background: radial-gradient(90rem 45rem at 50% -12%, oklch(45% 0.06 65 / 0.3), transparent 65%);
}

.world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* The working plane is invisible — the board reads as endless. */
.board {
  position: relative;
  width: 8000px;
  height: 5000px;
}

/* Yarn hangs behind whatever it ties together, so it never hides content. */
.yarn-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.yarn-layer path {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  pointer-events: stroke;
  filter: drop-shadow(0 2px 1.5px oklch(0% 0 0 / 0.35));
}
.yarn-layer path.sel { stroke-dasharray: 7 5; }
.yarn-red { stroke: oklch(55% 0.2 25); }
.yarn-orange { stroke: oklch(70% 0.17 55); }
.yarn-teal { stroke: oklch(62% 0.12 200); }
.yarn-purple { stroke: oklch(55% 0.17 305); }
.yarn-yellow { stroke: oklch(80% 0.15 95); }

/* ===== Items ===== */
.item {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.item.dragging { cursor: grabbing; }
.item.sel { outline: 3px solid oklch(72% 0.18 55 / 0.8); outline-offset: 4px; }
.item.yarn-src { outline: 3px dashed oklch(62% 0.12 200 / 0.9); outline-offset: 4px; }

.pinhead {
  position: absolute;
  top: -9px; left: 50%;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, oklch(90% 0.05 var(--pin-h, 25)), oklch(52% 0.19 var(--pin-h, 25)) 68%);
  box-shadow: 0 3px 4px oklch(0% 0 0 / 0.4), inset 0 -2px 3px oklch(0% 0 0 / 0.25);
  z-index: 2;
}

.note {
  width: 185px;
  min-height: 175px;
  /* A sticky note stays note-sized: long text scrolls rather than growing
     the paper into a tower. */
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 1.5rem 1rem 1rem;
  background:
    linear-gradient(160deg, oklch(100% 0 0 / 0.25), transparent 30%),
    var(--paper, oklch(90% 0.12 100));
  box-shadow: 0 8px 16px -6px oklch(0% 0 0 / 0.45);
  font-family: var(--hand);
  font-size: 1.05rem;
  line-height: 1.35;
  color: oklch(30% 0.03 80);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.paper-yellow { --paper: oklch(90% 0.12 100); }
.paper-pink   { --paper: oklch(87% 0.08 10); }
.paper-mint   { --paper: oklch(90% 0.09 155); }
.paper-blue   { --paper: oklch(88% 0.07 230); }
.note textarea {
  width: 100%;
  min-height: 130px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  resize: none;
}
.note .placeholder { opacity: 0.45; }

.link-card {
  width: 225px;
  background: oklch(97% 0.005 80);
  border-radius: 3px;
  box-shadow: 0 8px 16px -6px oklch(0% 0 0 / 0.45);
  overflow: hidden;
  color: oklch(25% 0.02 260);
}
.link-card img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  background: oklch(88% 0.01 80);
  pointer-events: none;
}
.link-card .lc-body { padding: 0.6rem 0.7rem 0.65rem; }
.link-card .lc-title {
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Once a card is selected its headline becomes editable on tap. */
.item.sel .link-card .lc-title { cursor: text; }
.item.sel .link-card .lc-title:hover { text-decoration: underline dotted oklch(60% 0.02 260); }
.link-card .lc-title[contenteditable="plaintext-only"] {
  display: block;
  outline: 0;
  background: oklch(100% 0 0 / 0.7);
  border-radius: 3px;
}
.link-card .lc-site {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: oklch(50% 0.02 260);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.link-card .lc-site::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}
/* Your own note under a link — handwritten, so it reads as yours rather
   than as something the site said. Hidden until there's something in it. */
.link-card .lc-caption {
  padding: 0.45rem 0.7rem 0.55rem;
  border-top: 1px dashed oklch(78% 0.01 80);
  background: oklch(94% 0.02 95);
  font-family: var(--hand);
  font-size: 0.95rem;
  line-height: 1.3;
  color: oklch(32% 0.03 80);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.link-card .lc-caption:empty { display: none; }
.link-card .lc-caption.editing { display: block; outline: 0; }
.link-card .lc-caption.editing:empty::before {
  content: "add a note…";
  opacity: 0.45;
}

.photo {
  width: 210px;
  padding: 10px 10px 8px;
  background: oklch(97% 0.005 80);
  box-shadow: 0 10px 20px -8px oklch(0% 0 0 / 0.5);
}
.photo img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: oklch(88% 0.01 80);
  pointer-events: none;
}
.photo .caption {
  min-height: 1.6rem;
  padding-top: 0.35rem;
  text-align: center;
  font-family: var(--hand);
  font-size: 0.95rem;
  color: oklch(35% 0.03 80);
}

.pin-item {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, oklch(92% 0.05 var(--pin-h, 25)), oklch(50% 0.2 var(--pin-h, 25)) 70%);
  box-shadow: 0 4px 6px oklch(0% 0 0 / 0.45), inset 0 -3px 4px oklch(0% 0 0 / 0.25);
}

/* ===== Floating controls ===== */
.toolbar {
  position: fixed;
  left: 50%;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: oklch(18% 0.015 260 / 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 40px -12px oklch(0% 0 0 / 0.7);
}
.toolbar button {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.toolbar button:hover { color: var(--color-text); background: oklch(28% 0.02 260 / 0.7); }
.toolbar button.on { color: oklch(15% 0.03 55); background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep)); }
.tb-ico { font-size: 1.15rem; }

.zoom {
  position: fixed;
  right: 0.9rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  gap: 0.3rem;
}
.zoom button {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--color-text-dim);
  border: 1px solid var(--color-line);
  background: oklch(18% 0.015 260 / 0.88);
  backdrop-filter: blur(10px);
}
.zoom button:hover { color: var(--color-text); border-color: var(--color-accent-deep); }

.itembar {
  position: fixed;
  z-index: 45;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: oklch(18% 0.015 260 / 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px oklch(0% 0 0 / 0.7);
}
.itembar button {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--color-text-dim);
}
.itembar button:hover { color: var(--color-text); background: oklch(28% 0.02 260 / 0.7); }
.itembar button.danger:hover { color: oklch(70% 0.19 25); }

/* ===== Dialog & toast ===== */
dialog {
  margin: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg-raise);
  color: var(--color-text);
  padding: 1.3rem 1.4rem;
  width: min(24rem, 92vw);
}
dialog::backdrop { background: oklch(0% 0 0 / 0.55); backdrop-filter: blur(3px); }
dialog form { display: grid; gap: 0.9rem; justify-items: center; }
.dlg-title { font-weight: 650; }
#linkUrl { max-width: none; width: 100%; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.2rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: oklch(20% 0.02 260 / 0.95);
  color: var(--color-text);
  font-size: 0.9rem;
  max-width: 88vw;
}

/* ===== Board tabs ===== */
.tabs {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 0.6rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: oklch(16% 0.015 260 / 0.75);
  backdrop-filter: blur(6px);
  max-width: min(34rem, 55vw);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--color-text-dim);
  white-space: nowrap;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.tabs button:hover { color: var(--color-text); }
.tabs button.on {
  color: oklch(15% 0.03 55);
  font-weight: 650;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
}
.tabs button.add-tab { font-size: 1rem; padding: 0.3rem 0.6rem; }

/* ===== Viewer (look-only) mode ===== */
body.viewer .toolbar,
body.viewer .itembar { display: none !important; }

/* ===== Settings ===== */
#settingsDialog { width: min(26rem, 94vw); }
.settings { display: grid; gap: 1.2rem; }
.settings section { display: grid; gap: 0.6rem; justify-items: start; }
.set-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.settings .pin-row { justify-self: center; }

.backdrop-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.backdrop-grid button {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 0.4rem;
  border-radius: 10px;
  border: 2px solid transparent;
  font-size: 0.68rem;
  color: var(--color-text-dim);
}
.backdrop-grid button.sel { border-color: var(--color-accent); }
.backdrop-grid .swatch {
  width: 3.4rem;
  height: 2.4rem;
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background-color: oklch(18% 0.018 260);
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.9px);
  background-size: 9px 9px;
}
.backdrop-grid .swatch.cork {
  background-color: var(--cork);
  background-image: radial-gradient(oklch(48% 0.07 60 / 0.6) 1.2px, transparent 1.8px);
  background-size: 9px 9px;
}

.user-list, .board-list { display: grid; gap: 0.45rem; width: 100%; }
.user-row, .board-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
}
.user-row .u-face { font-size: 1.25rem; }
.user-row .u-name, .board-row .b-name {
  flex: 1;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row select {
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
}
.user-row .mini, .board-row .mini {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  padding: 0.25rem 0.45rem;
  border-radius: 8px;
}
.user-row .mini:hover, .board-row .mini:hover { color: var(--color-text); background: oklch(30% 0.02 260 / 0.6); }
.user-row .mini.danger:hover, .board-row .mini.danger:hover { color: oklch(70% 0.19 25); }
button.ghost.small { font-size: 0.85rem; padding: 0.4rem 0.8rem; }

.nu-role {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.nu-role select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

/* ===== Board identity (top left) ===== */
.board-ident { max-width: 34vw; }
#boardTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A tight stack, capped so a big household doesn't crowd the board name. */
.board-users {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  cursor: pointer;
}
.board-users .face {
  font-size: 1rem;
  margin-left: -0.45rem;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.5));
}
.board-users .face:first-child { margin-left: 0; }
.board-users .more {
  margin-left: 0.15rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  color: var(--color-text-dim);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.1rem 0.35rem;
}

.people-pop {
  position: fixed;
  z-index: 50;
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: oklch(19% 0.017 260 / 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -15px oklch(0% 0 0 / 0.75);
}
.people-pop .who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
.people-pop .who small {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
a.ghost { text-decoration: none; display: inline-grid; place-items: center; }
.home-link svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* ===== Link-card open button ===== */
.lc-open {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  color: oklch(15% 0.03 55);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  box-shadow: 0 3px 8px oklch(0% 0 0 / 0.45);
}
.lc-open:hover { filter: brightness(1.1); }

/* ===== Trash drop zone ===== */
.trash {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  border-radius: 50%;
  border: 2px dashed var(--color-line);
  background: oklch(20% 0.02 260 / 0.92);
  backdrop-filter: blur(8px);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast), background var(--duration-fast);
}
.trash.hot {
  border-color: oklch(65% 0.19 25);
  background: oklch(32% 0.09 25 / 0.95);
  transform: scale(1.18);
}
body.dragging .chat-fab, body.dragging .zoom { opacity: 0; pointer-events: none; }

/* ===== Chat ===== */
.chat-fab {
  position: fixed;
  right: 0.9rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  z-index: 40;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: oklch(18% 0.015 260 / 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px oklch(0% 0 0 / 0.7);
  transition: opacity var(--duration-fast), border-color var(--duration-fast);
}
.chat-fab:hover { border-color: var(--color-accent-deep); }
.chat-dot {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: oklch(65% 0.2 25);
  box-shadow: 0 0 0 2px oklch(18% 0.015 260);
}

.chat {
  position: fixed;
  right: 0.8rem;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  z-index: 55;
  width: min(22rem, 94vw);
  height: min(26rem, 65vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: oklch(19% 0.017 260 / 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 60px -15px oklch(0% 0 0 / 0.75);
  overflow: hidden;
}
.chat header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.6rem 0.55rem 0.95rem;
  border-bottom: 1px solid var(--color-line);
  font-weight: 650;
  font-size: 0.95rem;
}
.chat header .mini { font-size: 0.9rem; color: var(--color-text-dim); padding: 0.2rem 0.5rem; border-radius: 8px; }
.chat header .mini:hover { color: var(--color-text); }
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.msg { display: grid; gap: 0.18rem; justify-items: start; max-width: 86%; }
.msg.mine { justify-self: end; justify-items: end; }
.msg .m-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}
.msg .m-text {
  padding: 0.45rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg.mine .m-text {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  border: 0;
  color: oklch(15% 0.03 55);
}
.chat form { display: flex; gap: 0.45rem; padding: 0.6rem; border-top: 1px solid var(--color-line); }
.chat form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  outline: 0;
}
.chat form input:focus { border-color: var(--color-accent-deep); }
.chat form button {
  font-weight: 650;
  font-size: 0.9rem;
  color: oklch(15% 0.03 55);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  border-radius: 10px;
  padding: 0.5rem 0.95rem;
}

/* ===== Colour picker on the item bar ===== */
.itembar .swatches {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0 0.15rem;
  border-left: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  margin: 0 0.15rem;
}
.itembar .swatches button {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.itembar .swatches button.sel { border-color: oklch(95% 0 0 / 0.9); }
.sw-paper-yellow { background: oklch(90% 0.12 100); }
.sw-paper-pink   { background: oklch(87% 0.08 10); }
.sw-paper-mint   { background: oklch(90% 0.09 155); }
.sw-paper-blue   { background: oklch(88% 0.07 230); }
.sw-red    { background: oklch(55% 0.2 25); }
.sw-orange { background: oklch(70% 0.17 55); }
.sw-teal   { background: oklch(62% 0.12 200); }
.sw-purple { background: oklch(55% 0.17 305); }
.sw-yellow { background: oklch(80% 0.15 95); }

/* ===== Inline editing inside settings ===== */
.row-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-accent-deep);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  outline: 0;
}
.confirm-msg {
  flex: 1;
  font-size: 0.82rem;
  color: oklch(72% 0.16 25);
}
.tab-input {
  font: inherit;
  font-size: 0.82rem;
  width: 7rem;
  color: var(--color-text);
  background: var(--color-bg-raise);
  border: 1px solid var(--color-accent-deep);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  outline: 0;
}

/* On a phone there isn't room for name + tabs + actions on one line, and
   squeezing the tabs into a sliver makes them unusable. Give them their own
   full-width row underneath. */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .brand { padding: 0.4rem 0.6rem; }
  .board-ident { max-width: none; flex: 1 1 auto; min-width: 0; }
  .tabs {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    width: 100%;
    margin: 0.4rem 0 0;
    justify-content: flex-start;
  }
  .tabs button {
    max-width: 45vw;
    padding: 0.42rem 0.95rem;   /* bigger touch target */
    font-size: 0.88rem;
  }
  .tabs button.add-tab { padding: 0.42rem 0.8rem; }
  .zoom { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
  .toolbar button { padding: 0.45rem 0.7rem; }
}

/* Very narrow phones: drop the avatar stack so the board name keeps its room. */
@media (max-width: 430px) {
  .board-users { display: none; }
  #boardTitle { max-width: 40vw; }
  .top-actions .ghost { padding: 0.4rem 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}