/* =========================================================================
   CampReady - Spiral Notebook / Expedition Field Journal Theme
   ========================================================================= */

:root {
  /* Wood Table Background */
  --desk-bg: #26180d;
  --desk-gradient: radial-gradient(ellipse at 50% 30%, #3d2716 0%, #1f130a 75%, #130a05 100%);
  --desk-wood-planks: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 140px);

  /* Aged Kraft / Field Journal Paper */
  --paper-bg: #e8dfcb;
  --paper-card: #e2d7c0;
  --paper-card-hover: #dacfb5;
  --paper-grid: rgba(145, 125, 95, 0.20);
  --paper-margin-line: rgba(195, 75, 60, 0.45);

  /* Pen & Pencil Borders & Text */
  --border-ink: #c9bca2;
  --border-ink-strong: #96876e;
  --text-primary: #1f1b16;
  --text-muted: #5e5142;
  --text-subtle: #8c7d6c;

  /* Checkbox & Graphite Pencil Marks */
  --pencil-box: #3d342a;
  --pencil-box-bg: rgba(255, 255, 255, 0.25);
  --pencil-mark: #1a1612;
  --pencil-strikethrough: rgba(45, 35, 25, 0.75);

  /* Vintage Rubber Stamp Inks */
  --stamp-spruce: #2d663b;
  --stamp-spruce-bg: rgba(45, 102, 59, 0.12);
  --stamp-spruce-border: #2d663b;

  --stamp-rust: #993322;
  --stamp-rust-bg: rgba(153, 51, 34, 0.12);
  --stamp-rust-border: #993322;

  --stamp-amber: #b45309;
  --stamp-amber-bg: rgba(180, 83, 9, 0.12);
  --stamp-amber-border: #d97706;

  --stamp-sky: #1d4ed8;
  --stamp-sky-bg: rgba(29, 78, 216, 0.12);
  --stamp-sky-border: #2563eb;

  --stamp-purple: #7e22ce;
  --stamp-purple-bg: rgba(126, 34, 206, 0.12);
  --stamp-purple-border: #9333ea;

  --stamp-teal: #0f766e;
  --stamp-teal-bg: rgba(15, 118, 110, 0.12);
  --stamp-teal-border: #0d9488;

  --accent-ink: #2d663b;
  --tab-active-top: #2d663b;
}

/* =========================================================================
   Light Theme: Sunlit Cedar Desk & Warm Cream Paper
   ========================================================================= */
body.theme-light {
  --desk-bg: #dcd2c3;
  --desk-gradient: radial-gradient(circle at 50% 25%, #eae2d5 0%, #dbd0c0 80%, #c5b8a5 100%);

  --paper-bg: #faf7ef;
  --paper-card: #f3eee3;
  --paper-card-hover: #eae3d4;
  --paper-grid: rgba(0, 0, 0, 0.045);
  --paper-margin-line: rgba(220, 38, 38, 0.38);

  --border-ink: #ded4c5;
  --border-ink-strong: #b8a896;
  --text-primary: #231f1a;
  --text-muted: #6b5f52;
  --text-subtle: #9c8e80;

  --pencil-box: #55473b;
  --pencil-box-bg: #ffffff;
  --pencil-mark: #1a1613;
  --pencil-strikethrough: #8c7f72;

  --stamp-spruce: #1b5e20;
  --stamp-spruce-bg: rgba(27, 94, 32, 0.08);
  --stamp-spruce-border: #2e7d32;

  --stamp-rust: #9e2a2b;
  --stamp-rust-bg: rgba(158, 42, 43, 0.08);
  --stamp-rust-border: #b71c1c;

  --stamp-amber: #b45309;
  --stamp-amber-bg: rgba(180, 83, 9, 0.08);
  --stamp-amber-border: #d97706;

  --stamp-sky: #1d4ed8;
  --stamp-sky-bg: rgba(29, 78, 216, 0.08);
  --stamp-sky-border: #2563eb;

  --stamp-purple: #7e22ce;
  --stamp-purple-bg: rgba(126, 34, 206, 0.08);
  --stamp-purple-border: #9333ea;

  --stamp-teal: #0f766e;
  --stamp-teal-bg: rgba(15, 118, 110, 0.08);
  --stamp-teal-border: #0d9488;

  --accent-ink: #059669;
  --tab-active-top: #059669;
}

/* =========================================================================
   Night-Vision Theme: Campfire / Astronomy Red Notebook
   ========================================================================= */
body.theme-night {
  --desk-bg: #090202;
  --desk-gradient: radial-gradient(circle at 50% 25%, #160404 0%, #0a0202 80%, #030000 100%);

  --paper-bg: #150404;
  --paper-card: #200707;
  --paper-card-hover: #2d0b0b;
  --paper-grid: rgba(255, 60, 60, 0.04);
  --paper-margin-line: rgba(255, 60, 60, 0.45);

  --border-ink: #440d0d;
  --border-ink-strong: #6b1515;
  --text-primary: #ff5555;
  --text-muted: #b83232;
  --text-subtle: #751f1f;

  --pencil-box: #851c1c;
  --pencil-box-bg: rgba(0, 0, 0, 0.4);
  --pencil-mark: #ff3333;
  --pencil-strikethrough: #992222;

  --stamp-spruce: #ff4444;
  --stamp-spruce-bg: rgba(255, 68, 68, 0.15);
  --stamp-spruce-border: #ff2222;

  --stamp-rust: #ff6644;
  --stamp-rust-bg: rgba(255, 102, 68, 0.15);
  --stamp-rust-border: #ff4422;

  --stamp-amber: #ff8833;
  --stamp-amber-bg: rgba(255, 136, 51, 0.15);
  --stamp-amber-border: #ff6611;

  --stamp-sky: #ff6666;
  --stamp-sky-bg: rgba(255, 102, 102, 0.15);
  --stamp-sky-border: #ff3333;

  --stamp-purple: #ff5577;
  --stamp-purple-bg: rgba(255, 85, 119, 0.15);
  --stamp-purple-border: #ff3355;

  --stamp-teal: #ff7755;
  --stamp-teal-bg: rgba(255, 119, 85, 0.15);
  --stamp-teal-border: #ff5533;

  --accent-ink: #ff2222;
  --tab-active-top: #ff2222;
}

/* =========================================================================
   Base Layout & Reset
   ========================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--desk-gradient);
  background-color: var(--desk-bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
}

/* =========================================================================
   The Spiral Notebook Wrapper & Spine
   ========================================================================= */
.notebook-desk {
  width: 100%;
  min-height: 100vh;
  padding: 16px 12px 64px 12px;
  display: flex;
  justify-content: center;
}

.notebook-book {
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
  background-color: var(--paper-bg);
  border-radius: 4px 16px 16px 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-ink);
  overflow-x: hidden;
}

/* Left Spiral Spine with Authentic Punched Holes & Double-Loop Wire Rings */
.notebook-spine {
  width: 42px;
  flex-shrink: 0;
  background-color: var(--paper-bg);
  border-right: 1px solid var(--border-ink);
  position: relative;
  z-index: 30;
  pointer-events: none;
  background-size: 42px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='36' viewBox='0 0 42 36'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%233a3d42'/%3E%3Cstop offset='22%25' stop-color='%23ffffff'/%3E%3Cstop offset='45%25' stop-color='%23838a94'/%3E%3Cstop offset='75%25' stop-color='%23dbe0e7'/%3E%3Cstop offset='100%25' stop-color='%2322252a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='28' y='7' width='6.5' height='22' rx='1.8' fill='%23120f0c' stroke='%233a3024' stroke-width='0.75'/%3E%3Cline x1='28.5' y1='29' x2='34.5' y2='29' stroke='rgba(255,255,255,0.45)' stroke-width='0.8'/%3E%3Cpath d='M29 13.5 L7 13.5 C3 13.5, 3 17.5, 7 17.5 L29 17.5' fill='none' stroke='rgba(0,0,0,0.32)' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M29 24 L7 24 C3 24, 3 28, 7 28 L29 28' fill='none' stroke='rgba(0,0,0,0.32)' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M30 11.5 L7 11.5 C3 11.5, 3 15.5, 7 15.5 L30 15.5' fill='none' stroke='url(%23m)' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M29 10.8 L7 10.8 C3.6 10.8, 3.6 13.5, 7 13.5' fill='none' stroke='rgba(255,255,255,0.95)' stroke-width='0.8'/%3E%3Cpath d='M30 22 L7 22 C3 22, 3 26, 7 26 L30 26' fill='none' stroke='url(%23m)' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M29 21.3 L7 21.3 C3.6 21.3, 3.6 24, 7 24' fill='none' stroke='rgba(255,255,255,0.95)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: left top;
}

/* Notebook Page Sheet */
/* Notebook Page Sheet */
.notebook-page {
  flex: 1;
  min-width: 0;
  position: relative;
  background-color: var(--paper-bg);
  background-image: 
    linear-gradient(to right, var(--paper-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  padding: 16px 14px 40px 14px;
  overflow-x: hidden;
}

/* Vertical Red Margin Rule Line */
.notebook-margin-rule,
.notebook-margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 1.5px;
  background-color: var(--paper-margin-line);
  pointer-events: none;
  z-index: 10;
}


/* =========================================================
   Journal Header & Navigation
   ========================================================= */
.glass-panel {
  background-color: var(--paper-bg);
  border-bottom: 2px dashed var(--border-ink);
  transition: background-color 0.2s ease;
}

/* Stamped Journal Tags & Badges */
.journal-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1.5px solid var(--border-ink-strong);
  background: rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.theme-light .journal-tag {
  background: rgba(0, 0, 0, 0.04);
}

/* =========================================================
   Camper Vintage Rubber Stamp Inks
   ========================================================= */
.camper-stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1.5px 6px;
  border-radius: 3px;
  border: 1.5px solid;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.camper-stamp-0, .stamp-spruce {
  color: var(--stamp-spruce);
  border-color: var(--stamp-spruce-border);
  background-color: var(--stamp-spruce-bg);
}

.camper-stamp-1, .stamp-rust {
  color: var(--stamp-rust);
  border-color: var(--stamp-rust-border);
  background-color: var(--stamp-rust-bg);
}

.camper-stamp-2, .stamp-amber {
  color: var(--stamp-amber);
  border-color: var(--stamp-amber-border);
  background-color: var(--stamp-amber-bg);
}

.camper-stamp-3, .stamp-sky {
  color: var(--stamp-sky);
  border-color: var(--stamp-sky-border);
  background-color: var(--stamp-sky-bg);
}

.camper-stamp-4, .stamp-purple {
  color: var(--stamp-purple);
  border-color: var(--stamp-purple-border);
  background-color: var(--stamp-purple-bg);
}

.camper-stamp-5, .stamp-teal {
  color: var(--stamp-teal);
  border-color: var(--stamp-teal-border);
  background-color: var(--stamp-teal-bg);
}

.camper-stamp-anyone, .stamp-anyone {
  color: var(--stamp-spruce);
  border-color: var(--stamp-spruce-border);
  background-color: var(--stamp-spruce-bg);
}

.camper-stamp.active-camper-pill {
  box-shadow: 0 0 0 2px var(--stamp-spruce), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  transform: translateY(-1px);
}

.packed-by-anyone {
  border-left: 2.5px solid var(--stamp-spruce) !important;
}

.packed-camper-anyone {
  border-color: var(--stamp-spruce) !important;
  background-color: rgba(45, 106, 79, 0.15) !important;
}
.packed-camper-anyone:checked {
  background-color: var(--stamp-spruce) !important;
}

/* =========================================================
   Checklist Item Cards & Ruled Lines
   ========================================================= */
.checklist-rows {
  display: flex;
  flex-direction: column;
}

.item-card {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid var(--border-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.12s ease;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 9px 4px !important;
}

.item-card:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

body.theme-night .item-card:hover {
  background-color: rgba(255, 60, 60, 0.06) !important;
}

.item-card.packed {
  opacity: 0.72;
}

.item-card.packed .item-name {
  text-decoration: line-through;
  text-decoration-thickness: 1.8px;
  text-decoration-color: var(--pencil-strikethrough);
  color: var(--text-muted);
}

/* Packed border accents for each camper */
.item-card.packed-by-camper-0, .item-card.packed-by-dave { border-left: 3.5px solid var(--stamp-spruce) !important; padding-left: 6px !important; }
.item-card.packed-by-camper-1, .item-card.packed-by-lisa { border-left: 3.5px solid var(--stamp-rust) !important; padding-left: 6px !important; }
.item-card.packed-by-camper-2 { border-left: 3.5px solid var(--stamp-amber) !important; padding-left: 6px !important; }
.item-card.packed-by-camper-3 { border-left: 3.5px solid var(--stamp-sky) !important; padding-left: 6px !important; }
.item-card.packed-by-camper-4 { border-left: 3.5px solid var(--stamp-purple) !important; padding-left: 6px !important; }
.item-card.packed-by-camper-5 { border-left: 3.5px solid var(--stamp-teal) !important; padding-left: 6px !important; }

/* =========================================================
   Pencil Checkbox & Hand-Drawn Graphite Mark
   ========================================================= */
.camp-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 2px;
  border: 2px solid var(--pencil-box);
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.12s ease;
  flex-shrink: 0;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.08);
}

.camp-checkbox:hover {
  border-color: #1a1612;
}

.camp-checkbox:checked {
  background-color: transparent;
  border-color: var(--pencil-box);
}

.camp-checkbox:checked::after {
  content: '✓';
  font-size: 1.55rem;
  font-weight: 900;
  font-family: 'Patrick Hand', 'Architects Daughter', cursive, sans-serif;
  color: var(--pencil-mark);
  display: block;
  line-height: 1;
  transform: translateY(-2px) rotate(-6deg);
}

/* Individual Camper Checked Ink Colors */
.camp-checkbox.packed-camper-0:checked, .camp-checkbox.packed-dave:checked {
  border-color: var(--stamp-spruce) !important;
}
.camp-checkbox.packed-camper-0:checked::after, .camp-checkbox.packed-dave:checked::after {
  color: var(--stamp-spruce) !important;
}

.camp-checkbox.packed-camper-1:checked, .camp-checkbox.packed-lisa:checked {
  border-color: var(--stamp-rust) !important;
}
.camp-checkbox.packed-camper-1:checked::after, .camp-checkbox.packed-dave:checked::after {
  color: var(--stamp-rust) !important;
}

.camp-checkbox.packed-camper-1:checked, .camp-checkbox.packed-lisa:checked {
  border-color: var(--stamp-rust) !important;
}
.camp-checkbox.packed-camper-1:checked::after, .camp-checkbox.packed-lisa:checked::after {
  color: var(--stamp-rust) !important;
}

.camp-checkbox.packed-camper-2:checked { border-color: var(--stamp-amber) !important; }
.camp-checkbox.packed-camper-2:checked::after { color: var(--stamp-amber) !important; }

.camp-checkbox.packed-camper-3:checked { border-color: var(--stamp-sky) !important; }
.camp-checkbox.packed-camper-3:checked::after { color: var(--stamp-sky) !important; }

.camp-checkbox.packed-camper-4:checked { border-color: var(--stamp-purple) !important; }
.camp-checkbox.packed-camper-4:checked::after { color: var(--stamp-purple) !important; }

.camp-checkbox.packed-camper-5:checked { border-color: var(--stamp-teal) !important; }
.camp-checkbox.packed-camper-5:checked::after { color: var(--stamp-teal) !important; }

@media (max-width: 640px) {
  .camp-checkbox {
    width: 1.35rem;
    height: 1.35rem;
  }
  .camp-checkbox:checked::after {
    font-size: 1.05rem;
  }
}

/* =========================================================
   Right-Edge Stitched Fabric / Leather Tabs (Mockup Match)
   ========================================================= */
.notebook-desk-container {
  display: flex;
  position: relative;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

.right-tabs-stack {
  width: 50px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 36px;
  z-index: 25;
}

.fabric-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 76px;
  border-radius: 0 10px 10px 0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  cursor: pointer;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-left: none;
  transition: transform 0.15s ease, filter 0.15s ease;
  position: relative;
  user-select: none;
}

.fabric-tab::after {
  content: '';
  position: absolute;
  inset: 3px 3px 3px 0;
  border-right: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-top: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 0 8px 8px 0;
  pointer-events: none;
}

.fabric-tab:hover {
  transform: rotate(180deg) translateX(-4px);
  filter: brightness(1.1);
}

.fabric-tab.active {
  transform: rotate(180deg) translateX(-7px);
  box-shadow: 5px 6px 14px rgba(0, 0, 0, 0.55);
  filter: brightness(1.18);
  z-index: 10;
}

/* Left-side tab orientation support */
.notebook-desk-container.tabs-left {
  flex-direction: row-reverse;
}
.notebook-desk-container.tabs-left .fabric-tab {
  border-radius: 10px 0 0 10px;
  border-right: none;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.4);
}
.notebook-desk-container.tabs-left .fabric-tab::after {
  inset: 3px 0 3px 3px;
  border-right: none;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-top: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 8px 0 0 8px;
}
.notebook-desk-container.tabs-left .fabric-tab:hover {
  transform: rotate(180deg) translateX(4px);
}
.notebook-desk-container.tabs-left .fabric-tab.active {
  transform: rotate(180deg) translateX(7px);
}

.tab-all     { background-color: #383028; }
.tab-shelter { background-color: #4d634f; }
.tab-kitchen { background-color: #8c6742; }
.tab-tools   { background-color: #555d66; }
.tab-safety  { background-color: #9c4535; }
.tab-power   { background-color: #8a6c31; }
.tab-sleep   { background-color: #5d4a6b; }

/* Handwritten & Architectural Sketch Elements */
.handwritten-h1 {
  font-family: 'Patrick Hand', 'Architects Daughter', 'Caveat', 'Segoe Print', cursive, sans-serif;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 2.2px solid var(--text-primary);
  display: inline-block;
  padding-bottom: 2px;
  max-width: 100%;
}

.handwritten-subtitle {
  font-family: 'Architects Daughter', 'Patrick Hand', cursive, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sketched-tree-svg {
  width: 40px;
  height: 48px;
  flex-shrink: 0;
  color: var(--text-primary);
}

/* =========================================================
   Fabric & Leather Bookmark Tabs (Categories & Views)
   ========================================================= */
.view-tab {
  transition: all 0.15s ease;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}

.view-tab:hover {
  color: var(--text-primary);
}

.view-tab.active-view-tab {
  color: var(--accent-ink) !important;
  border-bottom: 2.5px solid var(--accent-ink) !important;
}

.cat-tab-btn {
  padding: 5px 12px;
  border-radius: 6px 6px 0 0;
  border: 1.5px solid var(--border-ink);
  border-bottom: none;
  background: rgba(0, 0, 0, 0.15);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

body.theme-light .cat-tab-btn {
  background: rgba(0, 0, 0, 0.05);
}

.cat-tab-btn.active {
  background: var(--paper-bg);
  border-color: var(--border-ink-strong);
  border-top: 3px solid var(--accent-ink);
  color: var(--text-primary);
}

/* Filter buttons */
.filter-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  border-radius: 6px;
  border: 1.5px solid var(--border-ink);
  background-color: var(--paper-card);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  cursor: pointer;
}

.filter-btn:hover {
  border-color: var(--border-ink-strong);
  color: var(--text-primary);
}

.filter-btn.active-filter {
  background-color: var(--accent-ink) !important;
  color: #ffffff !important;
  border-color: var(--accent-ink) !important;
}

/* =========================================================
   Hero Card (Field Manifest Header)
   ========================================================= */
#heroCard {
  background-color: var(--paper-card);
  border: 1.5px solid var(--border-ink);
  border-radius: 12px;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Surveyor Ruler / Progression Bar */
.split-progress-bar {
  height: 9px;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-ink);
  display: flex;
  width: 100%;
}

body.theme-light .split-progress-bar {
  background-color: rgba(0, 0, 0, 0.08);
}

.bar-dave {
  height: 100%;
  background: var(--stamp-spruce);
  transition: width 0.4s ease;
}

.bar-lisa {
  height: 100%;
  background: var(--stamp-rust);
  transition: width 0.4s ease;
}

/* Touch Scrolling Containers */
.touch-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
}

.touch-scroll-x::-webkit-scrollbar {
  display: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--paper-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-ink-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-ink);
}

/* =========================================================
   PIN Lock Screen (Field Journal Leather Cover)
   ========================================================= */
#pinLockOverlay {
  background-color: var(--desk-bg);
  background-image: var(--desk-gradient);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.hidden-toast {
  display: none !important;
}

.pin-journal-cover {
  background: var(--paper-card);
  border: 2px solid var(--border-ink-strong);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 360px;
}

.pin-dot-filled {
  background-color: var(--accent-ink) !important;
  border-color: var(--accent-ink) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
  transform: scale(1.2);
}

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}

.pin-shake {
  animation: pin-shake 0.35s ease-in-out;
}

/* Keypad tactile typewriter keys */
.pin-key-btn {
  background: #ede3cc;
  border: 1.5px solid #a69880;
  color: #2b2319;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  transition: all 0.12s ease;
}

body.theme-light .pin-key-btn {
  background: #ffffff;
  border-color: #cfc2af;
}

.pin-key-btn:hover {
  background: #f7eed8;
  border-color: #8c7d65;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.pin-key-btn:active {
  transform: scale(0.96);
  background: var(--accent-ink);
  color: #ffffff;
}

/* =========================================================
   Modal Dialogs (Expedition Field Overlay Cards)
   ========================================================= */
.modal-card {
  background: #191614;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 4px 20px rgba(0, 0, 0, 0.6);
  color: #f5f5f4;
}

.modal-card input[type="text"],
.modal-card input[type="password"],
.modal-card input[type="number"],
.modal-card select,
.modal-card textarea {
  background-color: rgba(28, 25, 23, 0.9);
  color: #f5f5f4;
  border: 1.5px solid #44403c;
}

.modal-card input[type="text"]:focus,
.modal-card input[type="password"]:focus,
.modal-card input[type="number"]:focus,
.modal-card select:focus,
.modal-card textarea:focus {
  border-color: #10b981;
  outline: none;
}

/* =========================================================
   Mobile Screen Adjustments: Fits 100% of viewport without clipping
   ========================================================= */
@media (max-width: 640px) {
  .notebook-desk {
    padding: 6px 2px 40px 2px !important;
  }
  .notebook-desk-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .notebook-book {
    max-width: calc(100% - 30px) !important;
    border-radius: 4px 12px 12px 4px !important;
    box-shadow: 
      -2px 6px 16px rgba(0, 0, 0, 0.45),
      3px 8px 24px rgba(0, 0, 0, 0.35) !important;
  }
  .notebook-spine {
    width: 34px !important;
    background-size: 34px 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='36' viewBox='0 0 34 36'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%233a3d42'/%3E%3Cstop offset='22%25' stop-color='%23ffffff'/%3E%3Cstop offset='45%25' stop-color='%23838a94'/%3E%3Cstop offset='75%25' stop-color='%23dbe0e7'/%3E%3Cstop offset='100%25' stop-color='%2322252a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='22' y='7' width='6' height='22' rx='1.8' fill='%23120f0c' stroke='%233a3024' stroke-width='0.75'/%3E%3Cline x1='22.5' y1='29' x2='28' y2='29' stroke='rgba(255,255,255,0.45)' stroke-width='0.8'/%3E%3Cpath d='M24 13.5 L5.5 13.5 C2.2 13.5, 2.2 17.5, 5.5 17.5 L24 17.5' fill='none' stroke='rgba(0,0,0,0.32)' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M24 24 L5.5 24 C2.2 24, 2.2 28, 5.5 28 L24 28' fill='none' stroke='rgba(0,0,0,0.32)' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M25 11.5 L5.5 11.5 C2.2 11.5, 2.2 15.5, 5.5 15.5 L25 15.5' fill='none' stroke='url(%23m)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M24 10.8 L5.5 10.8 C2.8 10.8, 2.8 13.5, 5.5 13.5' fill='none' stroke='rgba(255,255,255,0.95)' stroke-width='0.8'/%3E%3Cpath d='M25 22 L5.5 22 C2.2 22, 2.2 26, 5.5 26 L25 26' fill='none' stroke='url(%23m)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M24 21.3 L5.5 21.3 C2.8 21.3, 2.8 24, 5.5 24' fill='none' stroke='rgba(255,255,255,0.95)' stroke-width='0.8'/%3E%3C/svg%3E") !important;
  }
  .notebook-page {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 5px 32px 5px !important;
  }
  .notebook-page > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .notebook-margin-rule,
  .notebook-margin-line {
    left: 8px !important;
    opacity: 0.35 !important;
  }
  .right-tabs-stack {
    width: 42px !important;
    padding-top: 18px !important;
    gap: 4px !important;
  }
  .fabric-tab {
    width: 40px !important;
    height: 64px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.09em !important;
    border-radius: 0 8px 8px 0 !important;
  }
  .notebook-desk-container.tabs-left .fabric-tab {
    border-radius: 8px 0 0 8px !important;
  }
  .sketched-tree-svg {
    width: 26px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .handwritten-h1 {
    font-size: 17px !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
  }
  .handwritten-subtitle {
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
  }
  .field-meta-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
}

/* =========================================================
   Web App Download Button & Header Sharing Styles
   ========================================================= */
.web-download-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #183324 0%, #0d1e15 100%);
  border: 1.5px solid #2e7d32;
  border-radius: 999px;
  padding: 5px 12px;
  color: #e8f5e9;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.web-download-action-btn:hover {
  background: linear-gradient(135deg, #224733 0%, #132a1e 100%);
  border-color: #4caf50;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
  transform: translateY(-1px);
}
.web-download-action-btn:active {
  transform: scale(0.97);
}
.download-btn-icon {
  font-size: 14px;
  line-height: 1;
}
.download-btn-label {
  font-family: system-ui, -apple-system, sans-serif;
  white-space: nowrap;
}

.group-share-btn {
  background-color: var(--paper-card);
  border: 1px solid var(--border-ink);
  color: var(--stamp-spruce);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 800;
  transition: all 0.15s ease;
}
.group-share-btn:hover {
  background-color: var(--paper-card-hover);
  border-color: var(--stamp-spruce);
  transform: translateY(-0.5px);
}
.share-badge-tag {
  background-color: rgba(45, 102, 59, 0.15);
  color: var(--stamp-spruce);
}

/* =========================================================
   Print Stylesheet
   ========================================================= */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
  }
  .no-print {
    display: none !important;
  }
  .notebook-spine {
    display: none !important;
  }
  .notebook-margin-rule {
    display: none !important;
  }
  .notebook-book {
    border: none !important;
    box-shadow: none !important;
  }
  .print-header {
    display: block !important;
    border-bottom: 2px solid #000;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
  .item-card {
    background: transparent !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    box-shadow: none !important;
    padding: 6px 10px !important;
  }
  .camp-checkbox {
    border: 1.5px solid #000 !important;
    background: #fff !important;
  }
}