/* Design tokens — source of truth mirrored from design/reference.html (approved v1). */
:root {
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: Georgia, "Times New Roman", Times, serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;
  --lh: 1.5;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 2px;
  --border-w: 2px;

  /* Light */
  --bg:        #f4f1e8;
  --surface:   #fbfaf5;
  --surface-2: #efe9d8;
  --ink:       #2b2823;
  --ink-soft:  #6b6455;
  --line:      #b8ae95;
  --line-soft: #d8d0bd;
  --link:      #1a4d8f;
  --link-visited: #5b3a8f;
  --accent:    #9a6a2f;
  --accent-bg: #f6ecd7;
  --good:      #3f7d3f;
  --warn-bg:   #f7e7d9;
  --warn-line: #c98a5e;
  --btn-face:  #ece6d5;
  --skeleton:  #e4ddca;
  --mine-bg:   #e9f0f6;
  --mine-line: #9db4c8;
  --theirs-bg: #f6ebdd;
  --theirs-line: #cbab88;
}

html[data-theme="dark"] {
  --bg:        #1e1c18;
  --surface:   #27241d;
  --surface-2: #302c23;
  --ink:       #e7e1d3;
  --ink-soft:  #a49a83;
  --line:      #4c4636;
  --line-soft: #3a3529;
  --link:      #8fb6ff;
  --link-visited: #c0a6ea;
  --accent:    #d9a95f;
  --accent-bg: #332b1c;
  --good:      #7dbf7d;
  --warn-bg:   #3a2a1f;
  --warn-line: #a8683f;
  --btn-face:  #322e24;
  --skeleton:  #34301f;
  --mine-bg:   #23303a;
  --mine-line: #44586a;
  --theirs-bg: #392f21;
  --theirs-line: #6b573c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh);
}
a { color: var(--link); }
a:visited { color: var(--link-visited); }

.app { max-width: 480px; margin: 0 auto; padding: var(--sp-4); }

.card {
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.muted { color: var(--ink-soft); font-size: var(--fs-sm); }
.center { text-align: center; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-3) 0; }

/* Buttons — beveled retro face */
.btn {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  color: var(--ink); background: var(--btn-face);
  border: 2px outset var(--line); border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer;
}
.btn:active { border-style: inset; }
.btn.primary { font-weight: 700; }
.btn.block { display: block; width: 100%; }
.btn.on { border-style: solid; border-color: var(--accent); background: var(--accent-bg); }

label.field { display: block; margin-bottom: var(--sp-3); }
label.field > span { display: block; font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-1); }
.input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--ink); background: var(--surface);
  border: 2px inset var(--line); border-radius: var(--radius); padding: 8px;
}
.textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-md);
  color: var(--ink); background: var(--surface);
  border: 2px inset var(--line); border-radius: var(--radius);
  padding: 8px; min-height: 110px; resize: vertical;
}
.pick { display: flex; gap: var(--sp-2); }
.pick .btn { flex: 1; }
.row { display: flex; gap: var(--sp-2); }

/* OTP code input */
.otp { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-4) 0; }
.otp input {
  width: 46px; height: 58px;
  border: 2px inset var(--line); background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: 28px; color: var(--ink);
  text-align: center;
}
.otp input:focus { outline: none; border-style: solid; border-color: var(--ink); }
.otp.error input { border-style: solid; border-color: var(--warn-line); color: var(--warn-line); background: var(--warn-bg); }
.err { color: var(--warn-line); font-size: var(--fs-sm); }

.brandline { font-weight: 700; letter-spacing: .5px; margin-bottom: var(--sp-4); }

/* Full-bleed board page: header + pannable canvas */
.board-page { display: flex; flex-direction: column; height: 100vh; max-width: none; margin: 0; padding: 0; }
.board-top { flex: none; padding: var(--sp-3) var(--sp-4); font-weight: 700; letter-spacing: .5px; border-bottom: var(--border-w) solid var(--line); background: var(--surface-2); }
.board-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }

/* Board canvas + note cards */
.board {
  position: relative;
  background: var(--surface);
  background-image: radial-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.note {
  position: absolute; margin: 0; cursor: grab;
  touch-action: none;  /* capture drag; empty board pans natively */
  border: var(--border-w) solid var(--line);
  background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-3); box-shadow: 2px 2px 0 rgba(0,0,0,.07);
  user-select: none;
}
.note.dragging { cursor: grabbing; box-shadow: 4px 4px 0 rgba(0,0,0,.12); z-index: 5; }
.mine   { background: var(--mine-bg);   border-color: var(--mine-line); }
.theirs { background: var(--theirs-bg); border-color: var(--theirs-line); }

/* Zoom controls */
.zoom { position: fixed; left: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 15; }
.zoom button { width: 42px; height: 42px; font-size: 20px; padding: 0; line-height: 1; }
.grip { position: absolute; top: 3px; right: 7px; color: var(--ink-soft); font-size: var(--fs-sm); }
.note-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.note-head .name { color: var(--ink); font-weight: 600; }
.note-body { font-family: var(--font-body); font-size: var(--fs-md); color: var(--ink); margin: 0; }
.note-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-soft); }
.seen { color: var(--good); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; border-radius: 50%; flex: none; }
.reactions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.chip { font-family: var(--font-ui); font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 3px 9px; color: var(--ink); cursor: pointer; }
.chip.on { border-color: var(--accent); background: var(--accent-bg); }
.drag-tip { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: var(--ink-soft); font-size: var(--fs-xs); pointer-events: none; }
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 15; }
.board-empty { position: fixed; inset: 0; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); padding: var(--sp-4); }
.board-empty .big { font-size: var(--fs-lg); color: var(--ink); }

/* Generic centered state (error pages, etc.) */
.state { text-align: center; color: var(--ink-soft); padding: var(--sp-6) var(--sp-4); }
.state .big { font-size: var(--fs-xl); color: var(--ink); margin-bottom: var(--sp-2); }
.error-box { border: 2px solid var(--warn-line); background: var(--warn-bg); border-radius: var(--radius); padding: var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-start; text-align: left; }

/* Transient save indicator (drag persistence) */
.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 6px 12px; box-shadow: 2px 2px 0 rgba(0,0,0,.1); z-index: 20;
}
.toast.err { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-line); }
.toast[hidden] { display: none; }