@import url("print.css") print; /* shared black-on-white print / PDF rules */

/* ============================================================================
   BOOKMARK (standalone) — pin button + resume chip styles for pages that
   don't load the shared notes.css "Drafting Table" system (the handful of
   self-contained "island" pages with their own local design tokens).
   Uses its own private, theme-adaptive palette so it never clashes with a
   page's local CSS variables. Load alongside assets/notes.js.
   ========================================================================== */
:root {
  --bm-ink: #2a2018; --bm-ink-soft: #6a5c4e; --bm-card: #faf7f0; --bm-line: #e0d8ca;
  --bm-accent: #9a3324; --bm-accent-soft: rgba(154, 51, 36, 0.12);
  --bm-shadow: 0 14px 30px -18px rgba(40, 28, 18, 0.4);
  --bm-font: 'Newsreader', ui-serif, Georgia, serif;
  --bm-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bm-ink: #ede4d6; --bm-ink-soft: #b3a595; --bm-card: #2a2118; --bm-line: #443829;
    --bm-accent: #d98a5a; --bm-accent-soft: rgba(217, 138, 90, 0.18);
  }
}

.pin-toggle-float {
  position: fixed; top: 16px; right: 16px; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  color: var(--bm-ink-soft); background: var(--bm-card);
  border: 1px solid var(--bm-line); border-radius: 9px;
  box-shadow: var(--bm-shadow);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.pin-toggle-float:hover { color: var(--bm-accent); border-color: var(--bm-accent); transform: translateY(-1px); }
.pin-toggle-float svg { width: 17px; height: 17px; }
.pin-toggle-float.active { color: var(--bm-accent); background: var(--bm-accent-soft); border-color: var(--bm-accent); }
.pin-toggle-float.active svg path, .pin-toggle-float.active svg circle { fill: currentColor; }

.resume-chip {
  position: fixed; left: 16px; bottom: 18px; z-index: 69;
  display: inline-flex; align-items: center; gap: 9px;
  max-width: min(80vw, 360px);
  padding: 8px 9px 8px 13px;
  background: var(--bm-card); border: 1px solid var(--bm-line); border-radius: 999px;
  box-shadow: var(--bm-shadow);
  text-decoration: none; color: var(--bm-ink);
  font-family: var(--bm-font);
  transition: border-color .2s ease, transform .2s ease;
}
.resume-chip:hover { border-color: var(--bm-accent); transform: translateY(-2px); }
.resume-chip svg { width: 15px; height: 15px; flex: none; color: var(--bm-accent); }
.resume-chip .rc-text { min-width: 0; overflow: hidden; }
.resume-chip .rc-kind {
  display: block; font: 600 10px/1 var(--bm-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bm-ink-soft); margin-bottom: 2px;
}
.resume-chip .rc-label {
  display: block; font: 500 13px/1.3 var(--bm-font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resume-chip .rc-close {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--bm-ink-soft); border-radius: 50%; margin-left: 2px; background: none; border: 0; cursor: pointer;
}
.resume-chip .rc-close:hover { color: var(--bm-ink); background: rgba(120, 140, 160, 0.18); }
.resume-chip .rc-close svg { width: 12px; height: 12px; }
@media print { .resume-chip, .pin-toggle-float { display: none !important; } }