/* ===========================================================
   THE LEDGER — design tokens
   Palette: ink navy / aged paper / brass / stamp red / sage
=========================================================== */
:root{
  --ink:        #1F2D3D;
  --ink-light:  #4A5A6B;
  --paper:      #F1E9D8;
  --paper-dark: #E4D8BE;
  --paper-card: #FBF7ED;
  --brass:      #B8863B;
  --brass-dark: #8F6A2C;
  --stamp-red:  #A6432E;
  --sage:       #6E7F5C;
  --line:       rgba(31,45,61,0.14);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(31,45,61,0.08), 0 6px 16px -8px rgba(31,45,61,0.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--brass); color:var(--paper); }

/* subtle paper texture via layered gradients */
body{
  background-image:
    radial-gradient(circle at 15% 8%, rgba(184,134,59,0.06), transparent 40%),
    radial-gradient(circle at 85% 92%, rgba(110,127,92,0.07), transparent 40%);
}

#app{ min-height:100vh; display:flex; flex-direction:column; }

/* ===================== HEADER / SPINE ===================== */
.spine{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 24px;
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--brass);
  flex-wrap:wrap;
}
.spine-brand{ display:flex; align-items:center; gap:12px; }
.spine-mark{ width:34px; height:34px; flex:none; }
.spine-title h1{
  font-family:var(--font-display); font-weight:600; font-size:1.35rem;
  margin:0; letter-spacing:0.01em;
}
.spine-sub{
  margin:0; font-size:0.72rem; color:rgba(241,233,216,0.6);
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em;
}
.spine-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.search-wrap{ position:relative; }
.search-wrap input{
  background:rgba(241,233,216,0.08);
  border:1px solid rgba(241,233,216,0.25);
  color:var(--paper);
  border-radius:999px;
  padding:9px 14px 9px 36px;
  width:230px; font-size:0.88rem;
  transition:border-color .15s, background .15s;
}
.search-wrap input::placeholder{ color:rgba(241,233,216,0.45); }
.search-wrap input:focus{ outline:none; border-color:var(--brass); background:rgba(241,233,216,0.14); }
.icon-search{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:rgba(241,233,216,0.55); pointer-events:none; }

.btn-stamp{
  background:var(--brass); color:var(--ink); border:none;
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:0.88rem;
  letter-spacing:0.01em;
  box-shadow:0 2px 0 var(--brass-dark);
  transition:transform .1s, box-shadow .1s;
}
.btn-stamp:hover{ transform:translateY(-1px); }
.btn-stamp:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--brass-dark); }

.btn-ghost-icon{
  background:transparent; border:1px solid rgba(241,233,216,0.3); color:var(--paper);
  width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.btn-ghost-icon svg{ width:18px; height:18px; }
.btn-ghost-icon:hover{ background:rgba(241,233,216,0.1); border-color:var(--brass); }

/* ===================== TABS ROW ===================== */
.ledger-tabs{
  display:flex; align-items:center; gap:6px; padding:10px 24px;
  background:var(--paper-dark);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.tab{
  background:transparent; border:1px solid transparent; color:var(--ink-light);
  padding:7px 14px; border-radius:999px; font-size:0.86rem; font-weight:600;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.tab:hover{ background:rgba(31,45,61,0.05); }
.tab.active{ background:var(--ink); color:var(--paper); }
.tab-count{
  font-family:var(--font-mono); font-size:0.72rem;
  background:rgba(0,0,0,0.12); padding:1px 6px; border-radius:999px;
}
.tab.active .tab-count{ background:rgba(241,233,216,0.2); }
.tab-divider{ width:1px; height:22px; background:var(--line); margin:0 6px; flex:none; }

.category-select{
  border:1px solid var(--line); background:var(--paper-card); color:var(--ink);
  padding:7px 12px; border-radius:999px; font-size:0.84rem; font-weight:500;
}

/* ===================== BODY SPLIT ===================== */
.ledger-body{ flex:1; display:grid; grid-template-columns:1.15fr 1fr; min-height:0; }
.map-pane{ position:relative; background:var(--ink); }
#map{ position:absolute; inset:0; }
.map-hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(31,45,61,0.85); color:var(--paper);
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.02em;
  padding:7px 14px; border-radius:999px; z-index:500; pointer-events:none;
  border:1px solid rgba(184,134,59,0.5);
}
.btn-locate{
  position:absolute; bottom:20px; right:16px; z-index:500;
  width:42px; height:42px; border-radius:999px; border:none;
  background:var(--paper-card); color:var(--ink); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
}
.btn-locate svg{ width:20px; height:20px; }

.cards-pane{ overflow-y:auto; padding:18px; background:var(--paper); }
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; }

.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 20px; color:var(--ink-light);
}
.empty-illustration{ width:56px; height:56px; margin-bottom:14px; opacity:0.5; }
.empty-state h3{ font-family:var(--font-display); margin:0 0 6px; color:var(--ink); }
.empty-state p{ margin:0; font-size:0.9rem; max-width:280px; }

/* ===================== PLACE CARD (signature element) ===================== */
.place-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:14px 14px 12px;
  position:relative;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
  overflow:hidden;
}
.place-card:hover{ transform:translateY(-2px); box-shadow:0 4px 4px rgba(31,45,61,0.08), 0 10px 22px -10px rgba(31,45,61,0.32); }
.place-card::before{
  /* stitched top edge like a ledger page */
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background-image:repeating-linear-gradient(90deg, var(--brass) 0 6px, transparent 6px 12px);
  opacity:0.55;
}
.card-photo{
  width:100%; height:110px; object-fit:cover; border-radius:4px; margin-bottom:10px;
  background:var(--paper-dark);
}
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.card-name{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; margin:0; line-height:1.25; }
.card-cat{
  font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-light); margin:3px 0 8px;
}
.card-stars{ color:var(--brass); font-size:0.85rem; letter-spacing:1px; }
.card-notes{ font-size:0.82rem; color:var(--ink-light); margin:8px 0 0; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.card-tag{
  font-size:0.68rem; background:rgba(110,127,92,0.14); color:var(--sage);
  padding:2px 8px; border-radius:999px; font-weight:600;
}
.card-who{
  position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:0.62rem;
  color:var(--ink-light); background:rgba(31,45,61,0.06); padding:2px 7px; border-radius:999px;
}

/* passport-style "visited" stamp */
.card-stamp{
  position:absolute; bottom:10px; right:10px;
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--stamp-red); color:var(--stamp-red);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-14deg);
  font-family:var(--font-mono); font-size:0.58rem; font-weight:700; text-align:center;
  letter-spacing:0.03em; opacity:0.85; line-height:1.15;
  pointer-events:none;
}

/* ===================== DRAWER / MODAL ===================== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(31,45,61,0.55);
  display:flex; justify-content:flex-end; z-index:1000;
  backdrop-filter:blur(2px);
}
.drawer{
  width:min(440px, 100%); height:100%; background:var(--paper);
  display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,0.25);
  animation:slidein .22s ease-out;
}
@keyframes slidein{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.detail-drawer{ width:min(480px,100%); }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--brass);
}
.drawer-head h2{ font-family:var(--font-display); margin:0; font-size:1.15rem; }
.drawer-head .btn-ghost-icon{ border-color:rgba(241,233,216,0.3); }

.drawer-form{ padding:20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:0.78rem; font-weight:600; color:var(--ink-light); text-transform:uppercase; letter-spacing:0.03em; }
.field-hint{ font-weight:400; text-transform:none; letter-spacing:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.field input[type="text"], .field select, .field textarea, .field input[type="file"]{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; background:var(--paper-card); color:var(--ink); font-size:0.92rem;
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; }

.star-input{ display:flex; gap:4px; }
.star-input button{
  background:none; border:none; font-size:1.6rem; color:var(--line); line-height:1; padding:2px;
}
.star-input button.filled{ color:var(--brass); }

.chip-select{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:var(--paper-card); color:var(--ink-light);
  padding:7px 14px; border-radius:999px; font-size:0.84rem; font-weight:600;
}
.chip.selected{ background:var(--sage); border-color:var(--sage); color:var(--paper-card); }

.photo-preview{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.photo-thumb{ position:relative; width:64px; height:64px; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-thumb button{
  position:absolute; top:1px; right:1px; width:18px; height:18px; border-radius:50%;
  background:rgba(31,45,61,0.75); color:#fff; border:none; font-size:0.7rem; line-height:1;
}

.drawer-actions{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line); margin-top:6px; }
.drawer-actions-right{ display:flex; gap:10px; margin-left:auto; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); padding:10px 16px; border-radius:999px; font-weight:600; font-size:0.88rem; }
.btn-text-danger{ background:none; border:none; color:var(--stamp-red); font-weight:600; font-size:0.84rem; }

/* ===================== DETAIL VIEW ===================== */
.detail-body{ padding:20px; overflow-y:auto; flex:1; }
.detail-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-bottom:16px; }
.detail-photos img{ width:100%; height:100px; object-fit:cover; border-radius:6px; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 16px; font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-light); }
.detail-meta span{ background:var(--paper-dark); padding:4px 10px; border-radius:999px; }
.detail-notes{ font-size:0.95rem; line-height:1.6; color:var(--ink); white-space:pre-wrap; }
.detail-stars{ color:var(--brass); font-size:1.3rem; letter-spacing:2px; margin-bottom:6px; }
.detail-actions{ display:flex; gap:10px; margin-top:20px; }

/* ===================== LEAFLET OVERRIDES ===================== */
.leaflet-popup-content-wrapper{ background:var(--paper-card); color:var(--ink); border-radius:6px; }
.leaflet-popup-tip{ background:var(--paper-card); }
.pin-marker{
  width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2px solid var(--paper-card); box-shadow:0 2px 4px rgba(0,0,0,0.35);
}
.pin-marker.cat-restaurant{ background:var(--stamp-red); }
.pin-marker.cat-trip{ background:var(--brass); }
.pin-marker.cat-activity{ background:var(--sage); }
.pin-marker.cat-other{ background:var(--ink-light); }
.pin-marker.status-saved{ opacity:0.55; border-style:dashed; }

/* ===================== KIOSK MODE ===================== */
body.kiosk-mode .spine-sub{ display:none; }
body.kiosk-mode .search-wrap input{ width:180px; }
body.kiosk-mode .ledger-body{ grid-template-columns:1.4fr 1fr; }
body.kiosk-mode .cards-grid{ grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
body.kiosk-mode .place-card{ padding:18px; }

/* ===================== RESPONSIVE / MOBILE ===================== */
@media (max-width: 880px){
  .ledger-body{ grid-template-columns:1fr; grid-template-rows:44vh 1fr; }
  .spine{ padding:12px 14px; }
  .spine-sub{ display:none; }
  .search-wrap input{ width:150px; }
  .ledger-tabs{ padding:8px 14px; }
  .cards-pane{ padding:14px; }
  .drawer, .detail-drawer{ width:100%; }
}

@media (max-width: 480px){
  .spine-title h1{ font-size:1.1rem; }
  .field-row{ grid-template-columns:1fr; }
  .search-wrap input{ width:120px; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}