/* BookVault — hand-drawn field notebook skin (CSS + self-hosted fonts + rough.js frames) */

/* —— Self-hosted fonts (OFL) —— */
@font-face {
  font-family: "Architects Daughter";
  src: url("fonts/ArchitectsDaughter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shantell Sans";
  src: url("fonts/ShantellSans-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* —— Sketchbook palette (colored-pencil, low saturation) —— */
:root {
  --paper: #f4ecd8;
  --paper-elevated: #faf6ea;
  --paper-muted: #ebe2cc;
  --ink: #2b2b2b;
  --pencil: #6b6b6b;
  --pencil-soft: #8a8070;
  --grid-line: rgba(43, 43, 43, 0.055);
  --grid-line-strong: rgba(43, 43, 43, 0.08);
  --accent: #5a7a9a;          /* neural blue */
  --accent-hover: #466280;
  --accent-soft: rgba(90, 122, 154, 0.14);
  --ochre: #c8a24a;           /* dark yellow */
  --ochre-soft: rgba(200, 162, 74, 0.22);
  --terra: #b0553f;           /* ochre red */
  --terra-soft: rgba(176, 85, 63, 0.14);
  --chip-bg: rgba(90, 122, 154, 0.12);
  --chip-text: #3d5570;
  /* User-added tags: warm pencil annotation (distinct from catalog chips) */
  --user-chip-bg: rgba(200, 120, 60, 0.14);
  --user-chip-text: #8a4a28;
  --user-chip-border: rgba(176, 85, 63, 0.55);
  --figure: #5a7a9a;
  --table: #8a6a4a;
  --border: rgba(43, 43, 43, 0.22);
  --border-soft: rgba(43, 43, 43, 0.12);
  --shadow: 2px 3px 0 rgba(43, 43, 43, 0.06), 0 6px 16px rgba(60, 40, 10, 0.06);
  --shadow-lg: 3px 6px 0 rgba(43, 43, 43, 0.08), 0 14px 36px rgba(60, 40, 10, 0.12);
  --tape: rgba(200, 162, 74, 0.38);
  --sidebar-w: 280px;
  --topbar-h: 68px;
  --radius: 3px;
  --radius-sm: 2px;

  /* Pencil category tints */
  --cat-disease: #b0553f;
  --cat-system: #5a7a9a;
  --cat-imaging: #c8a24a;
  --cat-anatomy: #6a8a62;
  --cat-mechanism: #7a6a8a;
  --cat-default: #6b6b6b;

  /* Rough frames (set by app.js from pre-generated SVG data-URIs) */
  --rough-frame-a: none;
  --rough-frame-b: none;
  --rough-frame-c: none;
  --rough-frame-panel: none;
  --rough-frame-facet: none;
  --rough-frame-search: none;
  --rough-frame-btn: none;
  --rough-frame-chip: none;
  --rough-divider: none;

  /* Paper noise: embedded SVG feTurbulence (very subtle) */
  --paper-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.14 0 0 0 0 0.1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Architects Daughter", "Shantell Sans", cursive;
  --font-ui: "Shantell Sans", system-ui, sans-serif;
  --font-body: "Shantell Sans", "Segoe UI", system-ui, sans-serif;
  --font: var(--font-body);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --paper: #2a241c;
  --paper-elevated: #352e24;
  --paper-muted: #3d3428;
  --ink: #e8dcc8;
  --pencil: #b8a990;
  --pencil-soft: #9a8c74;
  --grid-line: rgba(232, 220, 200, 0.05);
  --grid-line-strong: rgba(232, 220, 200, 0.08);
  --accent: #7a9ab8;
  --accent-hover: #9ab4cc;
  --accent-soft: rgba(122, 154, 184, 0.16);
  --ochre: #d4b46a;
  --ochre-soft: rgba(212, 180, 106, 0.18);
  --terra: #c87860;
  --terra-soft: rgba(200, 120, 96, 0.16);
  --chip-bg: rgba(122, 154, 184, 0.14);
  --chip-text: #c8d8e8;
  --user-chip-bg: rgba(200, 120, 80, 0.18);
  --user-chip-text: #e8b090;
  --user-chip-border: rgba(200, 120, 96, 0.55);
  --figure: #7a9ab8;
  --table: #c8a878;
  --border: rgba(232, 220, 200, 0.2);
  --border-soft: rgba(232, 220, 200, 0.1);
  --shadow: 2px 3px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 3px 8px 0 rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.4);
  --tape: rgba(212, 180, 106, 0.28);
  --cat-disease: #c87860;
  --cat-system: #7a9ab8;
  --cat-imaging: #d4b46a;
  --cat-anatomy: #8aaa7a;
  --cat-mechanism: #a090b0;
  --cat-default: #b8a990;
  --paper-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  /* Aged paper + grid + noise + edge vignette — pure CSS, no image assets */
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at center, transparent 55%, rgba(80, 50, 20, 0.07) 100%),
    var(--paper-noise),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      var(--grid-line) 23px,
      var(--grid-line) 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      var(--grid-line) 23px,
      var(--grid-line) 24px
    );
  background-attachment: fixed;
}

button, input {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  display: none !important;
}

/* Handwritten headings */
.wordmark,
.wordmark-md,
.wordmark-sm {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.wordmark-sm {
  font-size: 1.05rem;
}

.wordmark-md {
  font-size: 1.25rem;
}

/* Long-form medical text: readable Shantell light, never fancy marker */
.prose {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--pencil);
  letter-spacing: 0.01em;
}

/* —— Gate —— */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at center, transparent 40%, rgba(80, 50, 20, 0.1) 100%),
    var(--paper-noise),
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--grid-line) 23px, var(--grid-line) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--grid-line) 23px, var(--grid-line) 24px);
}

.gate-card {
  position: relative;
  width: min(360px, 92vw);
  padding: 2rem 1.75rem;
  background: var(--paper-elevated);
  border: none;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.gate-card.rough-frame::after {
  content: "";
  position: absolute;
  inset: -4px;
  background-image: var(--rough-frame-panel);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.gate-card > * {
  position: relative;
  z-index: 2;
}

.gate-card h1 {
  margin: 0 0 0.35rem;
  font-size: 1.85rem;
  color: var(--ink);
}

.gate-hint {
  margin: 0 0 1.25rem;
  color: var(--pencil);
  font-size: 0.95rem;
  font-family: var(--font-ui);
}

#gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#gate-input {
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  outline: none;
  font-family: var(--font-ui);
}

#gate-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gate-error {
  margin: 0.75rem 0 0;
  color: var(--terra);
  font-size: 0.85rem;
}

/* —— App shell —— */
.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 0 1.1rem;
  background: color-mix(in srgb, var(--paper-elevated) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: none;
  box-shadow: none;
  /* hand-drawn bottom divider via CSS var (set by rough) */
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: var(--rough-divider);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong,
#brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

.brand-sub {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--pencil-soft);
}

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 640px;
  min-width: 0;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem;
  height: 42px;
  background: var(--paper-elevated);
  border: none;
  border-radius: 2px;
  transition: box-shadow 0.15s;
}

/* Pre-generated rough frame (shared SVG, stretched) — not per-instance canvas */
.search-box.rough-frame-inset::after {
  content: "";
  position: absolute;
  inset: -3px;
  background-image: var(--rough-frame-search);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.search-box > * {
  position: relative;
  z-index: 1;
}

.search-box:focus-within {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-icon {
  flex-shrink: 0;
  color: var(--pencil-soft);
}

#search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 400;
}

#search-input::placeholder {
  color: var(--pencil-soft);
  opacity: 0.85;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--paper-elevated);
  color: var(--pencil);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.icon-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  background-image: var(--rough-frame-chip);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.icon-btn:hover {
  background: var(--paper-muted);
  color: var(--ink);
}

.search-box .icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 1.25rem;
}

.search-box .icon-btn::after {
  display: none;
}

.topbar-actions {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--paper-elevated);
  border: none;
  border-radius: 2px;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 60;
}

.autocomplete::after {
  content: "";
  position: absolute;
  inset: -3px;
  background-image: var(--rough-frame-panel);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

.autocomplete li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--font-ui);
}

.autocomplete li:hover,
.autocomplete li[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.autocomplete .tag-name {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
}

.autocomplete .tag-count {
  color: var(--pencil-soft);
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* —— Layout —— */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
  overflow-y: auto;
  padding: 1rem 0.85rem 2rem;
  background: color-mix(in srgb, var(--paper-elevated) 88%, transparent);
  border-right: none;
  /* faint rule on the right */
  box-shadow: inset -1px 0 0 var(--border-soft);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}

.sidebar-head h2 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 400;
}

.text-btn {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  padding: 0.15rem 0.3rem;
}

.text-btn:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.28rem 0.6rem;
  border-radius: 2px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.76rem;
  font-family: var(--font-ui);
  font-weight: 500;
  border: none;
  cursor: pointer;
  line-height: 1.3;
}

.chip::after {
  content: "";
  position: absolute;
  inset: -2px;
  background-image: var(--rough-frame-chip);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.9;
}

.chip:hover {
  background: var(--accent-soft);
}

.chip.active {
  background: var(--accent);
  color: var(--paper);
}

.chip .chip-x {
  font-size: 0.95rem;
  opacity: 0.75;
  line-height: 1;
}

.chip .chip-x:hover {
  opacity: 1;
}

/* User-added tag chips — warm pencil annotation, dashed edge, distinct from catalog */
.chip.chip-user {
  background: var(--user-chip-bg);
  color: var(--user-chip-text);
  font-style: italic;
  gap: 0.28rem;
  border: 1.5px dashed var(--user-chip-border);
  border-radius: 3px;
  box-shadow: 1px 1px 0 rgba(176, 85, 63, 0.08);
}

.chip.chip-user::after {
  display: none; /* dashed CSS edge replaces rough solid frame */
}

.chip.chip-user:hover {
  background: rgba(200, 120, 60, 0.22);
  color: var(--user-chip-text);
}

.chip.chip-user .chip-pencil {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 0;
}

.chip.chip-user .chip-user-label {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-style: italic;
  cursor: pointer;
  padding: 0;
  margin: 0;
  max-width: 100%;
  text-align: left;
}

.chip.chip-user .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.1rem;
  padding: 0 0.12rem;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  border-radius: 2px;
  font-family: var(--font-display);
}

.chip.chip-user .chip-remove:hover {
  opacity: 1;
  background: rgba(176, 85, 63, 0.15);
}

/* Facets — colored-pencil category headings
   Frame: thin dedicated --rough-frame-facet (not chip/panel).
   Content padding keeps title + "Show more" clear of the stroke. */
.facet {
  position: relative;
  margin-bottom: 0.65rem;
  border: none;
  border-radius: 2px;
  background: var(--paper);
  overflow: visible;
  /* inner clearance so hand-drawn stroke never covers text */
  padding: 0.15rem 0.2rem 0.2rem;
}

.facet::after {
  content: "";
  position: absolute;
  /* sit on the box edge (not inset:-2px outside) so stroke stays off glyphs */
  inset: 0;
  background-image: var(--rough-frame-facet);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.facet > * {
  position: relative;
  z-index: 1;
}

.facet-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* extra horizontal + top pad: leave room for the thin frame line */
  padding: 0.6rem 0.85rem 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink);
}

.facet[data-prefix="disease"] .facet-toggle { color: var(--cat-disease); }
.facet[data-prefix="system"] .facet-toggle { color: var(--cat-system); }
.facet[data-prefix="imaging"] .facet-toggle { color: var(--cat-imaging); }
.facet[data-prefix="anatomy"] .facet-toggle { color: var(--cat-anatomy); }
.facet[data-prefix="mechanism"] .facet-toggle { color: var(--cat-mechanism); }

.facet-toggle:hover {
  background: var(--paper-muted);
}

.facet-toggle .chevron {
  color: var(--pencil-soft);
  font-size: 0.7rem;
  transition: transform 0.15s;
  font-family: system-ui, sans-serif;
}

.facet.collapsed .chevron {
  transform: rotate(-90deg);
}

.facet.collapsed .facet-body {
  display: none;
}

.facet-body {
  /* side/bottom pad keeps list + "Show more" inside the stroke */
  padding: 0 0.7rem 0.75rem;
}

.facet-search {
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--paper-elevated);
  font-size: 0.8rem;
  font-family: var(--font-ui);
  outline: none;
}

.facet-search:focus {
  border-color: var(--accent);
}

.facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.facet-list li {
  margin: 0;
}

.facet-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.32rem 0.4rem;
  border: none;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  color: var(--pencil);
}

.facet-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.facet-item.selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.facet-item .fname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

.facet-item .fcount {
  flex-shrink: 0;
  color: var(--pencil-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.facet-more {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.35rem 0.45rem 0.4rem;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
}

.facet-more:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
}

/* —— Main grid —— */
.main {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem 3rem;
}

.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.results-bar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.1rem;
  min-width: 0;
}

.result-count {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

.fallback-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  color: var(--pencil);
  cursor: pointer;
  user-select: none;
  min-height: 44px; /* touch-friendly */
  padding: 0.15rem 0;
}

.fallback-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.fallback-toggle:hover {
  color: var(--ink);
}

.view-hint {
  font-size: 0.8rem;
  font-family: var(--font-ui);
  color: var(--pencil-soft);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.15rem;
}

/* Photo taped into a notebook */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-elevated);
  border: none;
  border-radius: 2px;
  overflow: visible;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Shared rough SVG frames (pre-generated once; nth-child cycles variants) */
.card::after {
  content: "";
  position: absolute;
  inset: -4px;
  background-image: var(--rough-frame-a);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}

.card:nth-child(3n + 2)::after {
  background-image: var(--rough-frame-b);
}

.card:nth-child(3n + 3)::after {
  background-image: var(--rough-frame-c);
}

/* Optional tape strip at top */
.card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 16%;
  width: 46px;
  height: 13px;
  background: var(--tape);
  transform: rotate(-3deg);
  z-index: 4;
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 1px 2px rgba(43, 43, 43, 0.08);
}

.card:nth-child(even)::before {
  left: auto;
  right: 14%;
  transform: rotate(2.5deg);
  width: 42px;
}

.card:hover {
  transform: rotate(-0.7deg) translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card:nth-child(even):hover {
  transform: rotate(0.55deg) translateY(-3px);
}

.card:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

.card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px 1px 0 0;
  /* Content images: no filters, no style transfer */
  isolation: isolate;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* HARD RULE: never filter content images */
  filter: none;
  image-rendering: auto;
}

.card-body {
  padding: 0.7rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.badge {
  display: inline-block;
  padding: 0.14rem 0.48rem;
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--figure);
  border: 1px dashed color-mix(in srgb, var(--figure) 40%, transparent);
}

.badge.table {
  color: var(--table);
  background: color-mix(in srgb, var(--table) 12%, transparent);
  border-color: color-mix(in srgb, var(--table) 40%, transparent);
}

.card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--font-ui);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
}

.card-book {
  margin: 0;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--pencil-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.card-tags .chip {
  padding: 0.12rem 0.4rem;
  font-size: 0.68rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--pencil);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.empty-doodle {
  color: var(--pencil-soft);
  opacity: 0.75;
}

.sentinel {
  height: 1px;
  margin-top: 1rem;
}

/* —— Landing: Featured (browse mode only) —— */
.landing {
  margin-bottom: 1.75rem;
}

.landing-section {
  margin-bottom: 0;
}

.landing-heading {
  margin: 0 0 0.85rem;
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.35rem;
}

/* Larger featured cards — same tape/rough language as .card, scaled up */
.card.featured-card {
  min-height: 0;
}

.card.featured-card .card-thumb {
  aspect-ratio: 16 / 11;
  min-height: 180px;
}

.card.featured-card .card-title {
  font-size: 1rem;
  -webkit-line-clamp: 3;
}

.card.featured-card .card-body {
  padding: 0.85rem 0.9rem 1rem;
  gap: 0.4rem;
}

/* —— Lightbox (sketchbook paper panel) —— */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* Warm translucent veil — shadow on aged paper, not pure black */
.lb-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(90, 60, 25, 0.28) 0%, rgba(55, 38, 18, 0.55) 100%),
    rgba(70, 48, 22, 0.42);
  backdrop-filter: blur(2.5px);
}

.lb-panel {
  position: relative;
  z-index: 1;
  width: min(1200px, 96vw);
  max-height: 94vh;
  margin: auto;
  /* Same aged paper as the notebook page */
  background-color: var(--paper);
  background-image:
    var(--paper-noise),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      var(--grid-line) 23px,
      var(--grid-line) 24px
    );
  border-radius: 2px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-soft);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.lb-panel.rough-frame-lg::after {
  content: "";
  position: absolute;
  inset: -5px;
  background-image: var(--rough-frame-panel);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Hand-drawn close: marker ring + X (SVG), no digital white pill */
.lb-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 4;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.lb-close-svg {
  display: block;
  overflow: visible;
}

.lb-close-ring {
  opacity: 0.75;
  fill: none;
}

.lb-close-stroke {
  opacity: 0.95;
  fill: none;
}

/* Slight offset on second stroke — marker double-pass feel */
.lb-close-stroke-b {
  opacity: 0.88;
}

.lb-close:hover {
  color: var(--terra);
  background: var(--terra-soft);
  transform: rotate(-6deg) scale(1.06);
}

.lb-close:hover .lb-close-ring {
  opacity: 1;
}

.lb-close:active {
  transform: rotate(-2deg) scale(0.96);
  color: var(--terra);
}

/* Hand-drawn prev/next — large touch targets, vertical center of lightbox */
.lb-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(43, 43, 43, 0.06),
    0 4px 14px rgba(60, 40, 10, 0.12);
  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.lb-nav::after {
  content: "";
  position: absolute;
  inset: -3px;
  background-image: var(--rough-frame-btn);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

.lb-nav-prev {
  left: max(0.35rem, env(safe-area-inset-left, 0px));
}

.lb-nav-next {
  right: max(0.35rem, env(safe-area-inset-right, 0px));
}

.lb-nav-svg {
  display: block;
  overflow: visible;
}

.lb-nav:hover:not(:disabled) {
  color: var(--terra);
  background: var(--paper-elevated);
  transform: translateY(-50%) scale(1.05);
}

.lb-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
  color: var(--terra);
}

.lb-nav:disabled,
.lb-nav[aria-disabled="true"] {
  opacity: 0.32;
  cursor: default;
  color: var(--pencil-soft);
  pointer-events: none;
}

.lb-nav:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.lb-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  max-height: 94vh;
  overflow: hidden;
  border-radius: 2px;
}

/* Notebook page side for the photo — warm paper, not black mat */
.lb-media {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(250, 246, 234, 0.55) 0%, transparent 55%),
    var(--paper-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  max-height: 94vh;
  overflow: auto;
  padding: 1.35rem 1.15rem;
}

/* White photo paper under the real figure (no filter on the image) */
.lb-photo {
  position: relative;
  background: #fff;
  padding: 0.55rem 0.55rem 0.7rem;
  box-shadow:
    1px 2px 0 rgba(43, 43, 43, 0.06),
    0 8px 22px rgba(60, 40, 10, 0.12);
  max-width: 100%;
  max-height: calc(94vh - 2.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-tape {
  position: absolute;
  width: 48px;
  height: 14px;
  background: var(--tape);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(43, 43, 43, 0.1);
  opacity: 0.9;
}

.lb-tape-tl {
  top: -6px;
  left: 10%;
  transform: rotate(-4deg);
}

.lb-tape-tr {
  top: -5px;
  right: 12%;
  transform: rotate(3.5deg);
  width: 42px;
}

.lb-media img,
.lb-photo img {
  max-width: 100%;
  max-height: calc(94vh - 4rem);
  object-fit: contain;
  display: block;
  /* HARD RULE: content images never filtered */
  filter: none;
  image-rendering: auto;
}

.lb-meta {
  padding: 1.25rem 1.35rem 1.5rem;
  overflow-y: auto;
  max-height: 94vh;
  border-left: 1px dashed var(--border-soft);
  background: color-mix(in srgb, var(--paper-elevated) 92%, transparent);
}

.lb-type-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.lb-book {
  font-size: 0.8rem;
  font-family: var(--font-ui);
  color: var(--pencil-soft);
}

#lb-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

.lb-source {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--pencil);
  font-family: var(--font-ui);
  font-weight: 400;
}

.lb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  min-height: 44px; /* touch-friendly */
  border: none;
  border-radius: 2px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: var(--font-ui);
  cursor: pointer;
  margin-bottom: 0;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: -3px;
  background-image: var(--rough-frame-btn);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.95;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

.lb-section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border-soft);
}

.lb-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--pencil-soft);
  font-weight: 400;
  font-family: var(--font-display);
}

/* —— Lightbox: add user tags (local only) —— */
.lb-tags-section .chips {
  margin-bottom: 0.5rem;
}

.lb-add-tag {
  margin-top: 0.35rem;
}

.lb-add-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.65rem;
  border: 1.5px dashed var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--pencil);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.lb-add-tag-btn:hover {
  background: var(--ochre-soft);
  color: var(--ink);
  border-color: var(--ochre);
}

.lb-add-plus {
  font-size: 0.95rem;
  line-height: 1;
  font-family: var(--font-display);
}

.lb-add-tag-form {
  margin-top: 0.45rem;
  position: relative;
}

.lb-add-tag-form.hidden {
  display: none;
}

.lb-add-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.lb-tag-prefix {
  max-width: 8.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--paper-elevated);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
}

.lb-tag-slash {
  color: var(--pencil-soft);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.lb-tag-value {
  flex: 1 1 7rem;
  min-width: 6rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--paper-elevated);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78rem;
}

.lb-tag-value:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.lb-tag-submit {
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: 2px;
  background: var(--terra-soft);
  color: var(--terra);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.lb-tag-submit:hover {
  background: var(--terra);
  color: var(--paper);
}

.lb-tag-ac {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.2rem 0;
  max-height: 10rem;
  overflow-y: auto;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  box-shadow: var(--shadow);
  z-index: 5;
}

.lb-tag-ac.hidden {
  display: none;
}

.lb-tag-ac li {
  padding: 0.35rem 0.55rem;
  font-size: 0.76rem;
  font-family: var(--font-ui);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.lb-tag-ac li:hover,
.lb-tag-ac li[aria-selected="true"] {
  background: var(--accent-soft);
}

.lb-tag-ac .tag-count {
  color: var(--pencil-soft);
  font-size: 0.72rem;
}

.lb-tag-hint {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--pencil-soft);
  font-family: var(--font-ui);
  min-height: 1em;
}

.lb-tag-hint.is-error {
  color: var(--terra);
}

.lb-tag-local-note {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--pencil-soft);
  font-family: var(--font-ui);
  font-style: italic;
  opacity: 0.9;
}

/* Caption / summary: high readability (hard constraint) */
.lb-section p,
.lb-section .prose {
  margin: 0;
  font-size: 0.92rem;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.92;
  white-space: pre-wrap;
  letter-spacing: 0.01em;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  padding: 0.55rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--font-ui);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .brand-text {
    display: none;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .landing-heading {
    font-size: 1.4rem;
  }

  .lb-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
    max-height: 94vh;
  }

  .lb-media {
    max-height: 45vh;
    padding: 1rem 0.85rem;
  }

  .lb-photo {
    max-height: calc(45vh - 1.75rem);
  }

  .lb-media img,
  .lb-photo img {
    max-height: calc(45vh - 2.5rem);
  }

  .lb-meta {
    border-left: none;
    border-top: 1px dashed var(--border-soft);
    max-height: none;
  }

  /* Keep prev/next large enough for thumbs; slightly inset from edges */
  .lb-nav {
    width: 46px;
    height: 54px;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
    background: var(--paper-elevated);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: inline-flex;
  }
}

@media (min-width: 901px) {
  .sidebar-toggle {
    display: none;
  }
}

body.lb-open {
  overflow: hidden;
}

/* Fallback when rough frames not yet ready: thin dashed edge */
:root:not(.rough-ready) .card,
:root:not(.rough-ready) .search-box,
:root:not(.rough-ready) .gate-card,
:root:not(.rough-ready) .lb-panel,
:root:not(.rough-ready) .chip:not(.chip-user),
:root:not(.rough-ready) .icon-btn,
:root:not(.rough-ready) .btn-primary,
:root:not(.rough-ready) .lb-nav,
:root:not(.rough-ready) .facet {
  box-shadow: inset 0 0 0 1.5px var(--border), var(--shadow);
}

:root:not(.rough-ready) .card::after,
:root:not(.rough-ready) .search-box::after,
:root:not(.rough-ready) .gate-card::after,
:root:not(.rough-ready) .lb-panel::after,
:root:not(.rough-ready) .chip:not(.chip-user)::after,
:root:not(.rough-ready) .icon-btn::after,
:root:not(.rough-ready) .btn-primary::after,
:root:not(.rough-ready) .lb-nav::after,
:root:not(.rough-ready) .facet::after,
:root:not(.rough-ready) .topbar::after {
  display: none;
}