/* ============================================================================================
   Route Optimizer -- cartographic design system.
   Carries the artifact's identity: green-biased neutrals, route-green accent, mono for
   labels/coordinates. Theme-aware via prefers-color-scheme + data-theme overrides.
   ============================================================================================ */

:root {
  --paper:#eef2f0; --card:#ffffff; --panel:#f6f9f7; --raise:#ffffff;
  --ink:#152420; --muted:#47554f; --line:#d5ded9;
  --accent:#1f7a5a; --accent-soft:rgba(31,122,90,.11); --accent-line:rgba(31,122,90,.34);
  --info:#2f6fb0; --danger:#b0442f;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --radius:11px; --shadow:0 1px 2px rgba(20,36,32,.06),0 6px 18px rgba(20,36,32,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0e1614; --card:#141f1c; --panel:#101a17; --raise:#1a2723;
    --ink:#e6ece9; --muted:#adbbb5; --line:#26332e;
    --accent:#43b083; --accent-soft:rgba(67,176,131,.15); --accent-line:rgba(67,176,131,.36);
    --info:#5c98d8; --danger:#e08a76;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
  }
}
:root[data-theme="light"] {
  --paper:#eef2f0; --card:#ffffff; --panel:#f6f9f7; --raise:#ffffff;
  --ink:#152420; --muted:#47554f; --line:#d5ded9;
  --accent:#1f7a5a; --accent-soft:rgba(31,122,90,.11); --accent-line:rgba(31,122,90,.34);
  --info:#2f6fb0; --danger:#b0442f;
  --shadow:0 1px 2px rgba(20,36,32,.06),0 6px 18px rgba(20,36,32,.05);
}
:root[data-theme="dark"] {
  --paper:#0e1614; --card:#141f1c; --panel:#101a17; --raise:#1a2723;
  --ink:#e6ece9; --muted:#adbbb5; --line:#26332e;
  --accent:#43b083; --accent-soft:rgba(67,176,131,.15); --accent-line:rgba(67,176,131,.36);
  --info:#5c98d8; --danger:#e08a76;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.9em; background:var(--accent-soft); padding:.1em .35em; border-radius:4px; }
h1,h2,h3 { text-wrap:balance; }
.muted { color:var(--muted); }
:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
/* Placeholder/help text at full opacity in the muted tone -- legible, not browser-dim. */
::placeholder { color:var(--muted); opacity:1; }
.help { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; border:1.4px solid var(--line); color:var(--muted); font:600 10px var(--mono);
  cursor:help; vertical-align:middle; }
.help:hover, .help:focus-visible { color:var(--accent); border-color:var(--accent-line); }

/* ---- topbar ------------------------------------------------------------------------------ */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px,4vw,32px); border-bottom:1px solid var(--line); background:var(--paper); }
.brand { font-weight:650; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; gap:8px; }
.brand:hover { text-decoration:none; }
.brand-mark { color:var(--accent); }
.finch-mark { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.brand .finch-mark { width:24px; height:24px; }
.topnav { display:flex; align-items:center; gap:10px; }

/* ---- buttons ----------------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 .9rem/1 var(--sans); padding:10px 16px; border-radius:9px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .04s ease, filter .15s ease, background .15s ease; }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--accent-line); color:var(--accent); }
.btn-lg { padding:13px 22px; font-size:1rem; }
.btn-block { width:100%; }
.icon-btn { background:transparent; border:1.5px solid var(--line); border-radius:8px; color:var(--muted);
  width:38px; height:38px; cursor:pointer; font-size:1rem; }
.icon-btn:hover { color:var(--accent); border-color:var(--accent-line); }

.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }

/* ============================================================================================
   LANDING
   ============================================================================================ */
.landing { max-width:1040px; margin:0 auto; padding:clamp(32px,7vw,80px) clamp(16px,4vw,32px) 40px; }
.hero { max-width:640px; }
.hero h1 { font-size:clamp(2.1rem,5vw,3.2rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 16px; }
.hero .lede { font-size:1.12rem; color:var(--muted); margin:0 0 26px; max-width:52ch; }
.hero .lede strong { color:var(--ink); font-weight:600; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:14px 0 0; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:48px 0; }
.compare-card { margin:0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); }
.compare-card svg { width:100%; height:auto; display:block; }
.compare-card figcaption { font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted); margin-top:8px; text-align:center; }
.compare-card.good { border-color:var(--accent-line); }
.compare-card.good figcaption { color:var(--accent); }
.rt-bad { fill:none; stroke:var(--danger); stroke-width:2.4; opacity:.8; }
.rt-good { fill:none; stroke:var(--accent); stroke-width:2.8; }
.rt-dots circle { fill:var(--ink); }

.how { margin-top:20px; }
.how h2 { font-size:1.5rem; margin:0 0 20px; letter-spacing:-.01em; }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.steps li { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.step-n { font-family:var(--mono); font-size:.9rem; color:#fff; background:var(--accent); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.steps li b { font-size:1.02rem; }
.steps li span:last-child { color:var(--muted); font-size:.92rem; }

.site-footer { max-width:1040px; margin:0 auto; padding:26px clamp(16px,4vw,32px); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; font-size:.86rem; }

/* ============================================================================================
   AUTH
   ============================================================================================ */
.auth { min-height:calc(100vh - 63px); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 28px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:1.6rem; margin:0 0 6px; }
.auth-stub-note { font-size:.82rem; margin:0 0 20px; }
.auth-card form { display:flex; flex-direction:column; gap:14px; }
.auth-card label { display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--muted); }
.auth-card input { padding:11px 12px; border:1.5px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font:inherit; }
.auth-card input:focus { border-color:var(--accent-line); outline:none; }
.auth-alt { text-align:center; font-size:.86rem; margin:18px 0 0; }
.auth-error { color:var(--danger); background:rgba(176,68,47,.10); border:1px solid var(--danger);
  border-radius:8px; padding:9px 12px; font-size:.86rem; margin:0 0 16px; }

/* ============================================================================================
   APP WORKSPACE
   ============================================================================================ */
.page-app, body.page-app { height:100%; }
.workspace { display:grid; grid-template-columns:340px 1fr; gap:0; height:calc(100vh - 63px); }
.controls { border-right:1px solid var(--line); padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; background:var(--panel); }
.ctl-block h2 { font-size:1rem; margin:0 0 12px; display:flex; align-items:center; gap:9px; letter-spacing:-.01em; }
.step-chip { font-family:var(--mono); font-size:.78rem; color:#fff; background:var(--accent); width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.ctl-block textarea { width:100%; resize:vertical; padding:10px; border:1.5px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); font:.82rem/1.4 var(--mono); }
.ctl-block textarea:focus { border-color:var(--accent-line); outline:none; }
.ctl-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ctl-row .btn { padding:8px 12px; font-size:.82rem; }
.hint { font-size:.8rem; color:var(--muted); margin:8px 0 0; }
.count { font-family:var(--mono); font-size:.8rem; margin:8px 0 0; }
#stopCount.over { color:var(--danger); font-weight:700; }
.import-status { color:var(--muted); font-size:.78rem; margin:6px 0 0; min-height:1em; }
.cap-warn { color:var(--muted); font-size:.8rem; line-height:1.4; margin:6px 0 0; }
.cap-warn.over { color:var(--danger); }
.field { display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--muted); margin-bottom:12px; }
.field input { padding:9px 10px; border:1.5px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; }
.check { display:flex; align-items:center; gap:9px; font-size:.9rem; margin-bottom:8px; cursor:pointer; }
.advanced { margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
.advanced > summary { cursor:pointer; font-size:.84rem; font-weight:600; color:var(--muted);
  list-style:none; display:flex; align-items:center; gap:7px; }
.advanced > summary::-webkit-details-marker { display:none; }
.advanced > summary::before { content:"\25B8"; font-size:.7rem; }         /* ▸ collapsed */
.advanced[open] > summary::before { content:"\25BE"; }                    /* ▾ open */
.advanced > summary:hover { color:var(--accent); }
.advanced .field { margin-top:14px; margin-bottom:0; }

.progress { margin-top:4px; }
.progress-bar { height:8px; background:var(--line); border-radius:5px; overflow:hidden; }
.progress-bar span { display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
.progress-msg { font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:8px 0 0; }

.result { display:flex; flex-direction:column; min-height:0; }
.map { flex:1 1 auto; min-height:280px; background:var(--panel); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--card); }
.stat { padding:12px 16px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child { border-right:none; }
.stat-n { display:block; font-size:1.3rem; font-weight:650; font-variant-numeric:tabular-nums; }
.stat-l { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

.result-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px; overflow-y:auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.card h3 { font-size:.98rem; margin:0 0 10px; }
.card h3 .muted { font-family:var(--mono); font-size:.72rem; font-weight:400; }
.stop-list { margin:0; padding-left:20px; max-height:260px; overflow-y:auto; }
.stop-list li { padding:5px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.stop-list li.empty { color:var(--muted); list-style:none; margin-left:-20px; border:none; }
.ls-name { font-size:.9rem; }
.ls-coord { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.sugg-stub { font-size:.86rem; }

.export { display:flex; flex-wrap:wrap; gap:10px; padding:0 14px 16px; }

/* ---- Leaflet marker skins ---------------------------------------------------------------- */
.pool-dot { color:var(--info); fill:var(--info); fill-opacity:.5; stroke:var(--info); }
.route-line { color:var(--accent); }
.home-dot { color:var(--accent); fill:var(--accent); fill-opacity:.85; stroke:#fff; }
.seq-marker { background:var(--accent); color:#fff; border:2px solid #fff; border-radius:50%;
  font:600 11px var(--mono); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.start-dot { color:var(--accent); fill:var(--accent); fill-opacity:.9; stroke:#fff; }
.end-dot { color:var(--info); fill:var(--info); fill-opacity:.9; stroke:#fff; }

/* ---- arrange (drag-to-reorder) pool list -- sets START/END, decides open vs closed --------- */
.arrange-hint { margin:0 0 8px; }
.arrange-item { flex-direction:row !important; align-items:center; gap:8px; list-style:none;
  margin-left:-20px; padding:7px 8px; border-radius:7px; cursor:grab; }
.arrange-item:hover { background:var(--accent-soft); }
.arrange-item.dragging { opacity:.45; cursor:grabbing; }
.arrange-item.drag-over { box-shadow:inset 0 2px 0 var(--accent); }
.arrange-item .ls-name { flex:1 1 auto; }
.drag-grip { color:var(--muted); font-size:.9rem; flex:0 0 auto; cursor:grab; }
.badge { font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; font-weight:700;
  padding:2px 7px; border-radius:999px; flex:0 0 auto; }
.badge-start { color:#fff; background:var(--accent); }
.badge-end { color:#fff; background:var(--info); }
.arrange-note { list-style:none; margin-left:-20px; border:none !important; color:var(--muted);
  font-size:.78rem; padding:6px 8px 2px; }

/* ============================================================================================
   HELP / DOC PAGE
   ============================================================================================ */
.doc { max-width:820px; margin:0 auto; padding:clamp(28px,6vw,56px) clamp(16px,4vw,32px) 60px; }
.doc h1 { font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0 0 14px; letter-spacing:-.015em; }
.doc-lede { color:var(--muted); font-size:1rem; max-width:66ch; margin:0 0 24px; }
.doc-lede b { color:var(--ink); }
.doc-pre { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px; overflow-x:auto; font:.8rem/1.55 var(--mono); color:var(--ink); white-space:pre; }
.doc h2 { font-size:1.05rem; margin:26px 0 8px; letter-spacing:-.005em; }
.doc p { margin:0 0 12px; max-width:66ch; }
.doc-scroll { overflow-x:auto; }
.doc-table { width:100%; border-collapse:collapse; margin:4px 0 8px; font-size:.9rem; }
.doc-table th, .doc-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-table th { font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.doc-table td:nth-child(2) { white-space:nowrap; color:var(--muted); }
.doc-foot { margin-top:24px; }

/* ============================================================================================
   CONSTRUCTION / COMING-SOON
   ============================================================================================ */
.construction { min-height:calc(100vh - 63px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:40px 20px; }
.cc-logo .cc-scene { width:min(360px,84vw); height:auto; display:block; }
.construction h1 { font-size:clamp(2.4rem,6vw,3.6rem); margin:12px 0 6px; letter-spacing:-.02em; }
.cc-tag { color:var(--muted); font-size:1.1rem; margin:0 0 20px; }
.cc-status { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-line); border-radius:999px; padding:7px 16px; margin:0 0 26px; }

/* ---- responsive -------------------------------------------------------------------------- */
@media (max-width:820px) {
  .workspace { grid-template-columns:1fr; height:auto; }
  .controls { border-right:none; border-bottom:1px solid var(--line); }
  .map { min-height:360px; }
  .result-cols { grid-template-columns:1fr; }
  .compare, .steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}
/*  End of Script  */