/*
  Columbus Dog Treat Trail — shared chrome for the secondary pages
  (neighborhoods, stop-detail, profile, routes, onboarding, trail-flier,
  moderation). Loaded after styles.css. index.html keeps its own inline
  copy of these same rules since it predates this file and already
  works — this file is for the pages added alongside the design system.
*/
*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);}
a{color:inherit;}

.icon{width:16px;height:16px;display:inline-block;vertical-align:-3px;flex-shrink:0;}
.icon-lg{width:22px;height:22px;}

.page{max-width:640px;margin:0 auto;padding:24px 20px 48px;display:flex;flex-direction:column;gap:16px;}
.page-wide{max-width:760px;}

.page-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.brand-lockup{display:flex;align-items:center;gap:10px;}
.brand-lockup .lockup{height:34px;width:auto;display:block;}
.brand-lockup .subtitle{
  font-family:var(--font-mono);font-size:var(--text-mono-label);color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
}

.btn{
  font-family:var(--font-body);font-size:var(--text-body);font-weight:600;
  padding:9px 14px;border-radius:var(--radius-md);border:var(--border-default) solid var(--ink);
  background:var(--white);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.btn:hover{background:var(--ink);color:var(--white);}
.btn:active{transform:scale(0.97);}
.btn.primary{background:var(--rust);color:var(--white);border-color:var(--rust);}
.btn.primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);}
.btn.small{padding:6px 10px;font-size:12px;}
.btn.report{color:var(--amber);border-color:var(--amber);}
.btn.report:hover{background:var(--amber);color:var(--white);}
.btn[disabled]{opacity:0.55;cursor:default;pointer-events:none;}

.nav-links{display:flex;gap:14px;flex-wrap:wrap;}
.nav-links a{
  font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);text-decoration:none;
  display:flex;align-items:center;gap:5px;
}
.nav-links a:hover{color:var(--ink);}

.panel{
  background:var(--white);border:var(--border-default) solid var(--ink);border-radius:var(--radius-lg);
  padding:14px 16px;box-shadow:var(--shadow-sm);
}
.panel-label{
  font-family:var(--font-mono);font-size:var(--text-mono-meta);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--ink-soft);margin-bottom:8px;
}

.badge{
  display:inline-block;padding:1px 6px;border-radius:var(--radius-sm);font-weight:700;
  font-size:var(--text-mono-badge);text-transform:uppercase;letter-spacing:var(--tracking-mid);
  font-family:var(--font-mono);
}
.badge.verified{background:var(--moss);color:var(--white);}
.badge.unverified{background:var(--amber);color:var(--white);}
.badge.seasonal{background:var(--ink-soft);color:var(--white);}

.stop-name{font-family:var(--font-display);font-weight:600;}
.meta-line{font-family:var(--font-mono);font-size:var(--text-mono-meta);color:var(--ink-soft);}

.empty-state{font-size:13px;color:var(--ink-soft);text-align:center;padding:24px 10px;}

.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:3000;
  display:flex;align-items:center;gap:10px;background:var(--white);
  border:var(--border-default) solid var(--moss);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:10px 14px;font-family:var(--font-body);
  font-size:13px;color:var(--ink);opacity:0;pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.toast.error{border-color:var(--rust);}
.toast.open{opacity:1;transform:translateX(-50%) translateY(-6px);}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--moss);flex-shrink:0;}
.toast.error .dot{background:var(--rust);}

.footer-note{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);text-align:center;
  opacity:0.85;
}

/* Last-updated build stamp, lower-left corner of every page. Hand-set to
   the real date/time of the most recent edit — bump it whenever a page
   changes, same manually-maintained pattern as the rest of this no-build-
   step site (there's no build pipeline to derive it automatically from). */
.build-stamp{
  position:fixed;bottom:8px;left:12px;z-index:1000;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-soft);opacity:0.75;
  background:rgba(251,249,243,0.6);padding:2px 6px;border-radius:var(--radius-sm);
  pointer-events:none;
}

.modal-backdrop{
  position:fixed;inset:0;background:var(--backdrop-scrim);z-index:2000;
  display:none;align-items:center;justify-content:center;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--white);border:var(--border-thick) solid var(--ink);border-radius:var(--radius-xl);
  padding:24px;width:min(360px, 90vw);box-shadow:var(--shadow-lg);
}
.modal h2{font-family:var(--font-display);font-size:var(--text-display-md);margin:0 0 6px;}
.modal p{font-size:var(--text-body);color:var(--ink-soft);line-height:var(--leading-normal);margin:0 0 16px;}

.share-icons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px;}
.share-icon-btn{
  width:42px;height:42px;border-radius:50%;border:var(--border-default) solid var(--ink);
  display:flex;align-items:center;justify-content:center;background:var(--white);
  cursor:pointer;text-decoration:none;color:var(--ink);transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.share-icon-btn:hover{background:var(--ink);color:var(--white);}
.share-icon-btn svg{width:20px;height:20px;}
.share-label{font-family:var(--font-mono);font-size:9px;text-align:center;color:var(--ink-soft);margin-top:4px;text-transform:uppercase;letter-spacing:var(--tracking-mid);}
.share-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.share-item{display:flex;flex-direction:column;align-items:center;}