/* go.savino.me
   Anchors: Inkwell Violet #2B1F54 ink (PersonalStyleGuide) + gold buttons (Falconium),
   Buttons are lifted verbatim from the Falconium dashboard stylesheet.
   Light  = Slate,          built on Deep Slate Blue #E6EBF2 from the approved palette.
   Dark   = Midnight Violet.
   The phone picks; both are deliberate designs, not one derived from the other. */

:root{
  /* --- light: Slate --- */
  --paper:#E6EBF2; --panel:#FFFFFF; --panel2:#F1F4F8;
  --ink:#2B1F54; --muted:#5F5A7A;
  --accent:#8A6A1F;              /* gold as text — deepest that still passes contrast on white */
  --accent-soft:#F3EEDF;
  --on-accent:#2B1F54;
  --border:#CBD5E3;
  --bar:rgba(230,235,242,.94);
  --shadow:0 1px 2px rgba(43,31,84,.07);
  --gold:#C3A183;                /* Falconium --gold, verbatim */
  --btn-ink:#211b12;             /* Falconium button text, verbatim */
  --nav-h:60px;
}
@media (prefers-color-scheme:dark){
  :root{
    /* --- dark: Midnight Violet --- */
    --paper:#171430; --panel:#211D3E; --panel2:#2A2550;
    --ink:#EAE7F7; --muted:#9E98C4;
    --accent:#E0C271;
    --accent-soft:#2A2550;
    --on-accent:#2B1F54;
    --border:#332C5C;
    --bar:rgba(23,20,48,.94);
    --shadow:none;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 2rem);
  -webkit-tap-highlight-color:transparent}
body.home{padding-bottom:3rem}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;margin:0}
h1,.name,.cities .city{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
a{color:var(--accent)}

.crumb{padding:1.5rem 0 0;font-size:.85rem}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border);
  padding:.35rem 0;display:inline-block}
.crumb a:hover{color:var(--accent)}

/* masthead, closed by a gold rule — the signature element from the web style guide */
header{padding:1.2rem 0 1.4rem;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold)}
header.home{padding:3.4rem 0 1.6rem}
h1{font-size:2.4rem;line-height:1.07;margin-bottom:.5rem}
h1 em{font-style:italic;color:var(--accent)}
.stand{color:var(--muted);font-size:1.02rem;max-width:34em;margin:0 0 1.1rem}
.byline{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.topbar{position:sticky;top:0;z-index:30;background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  padding:.6rem 0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
#q{width:100%;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);color:var(--ink);font-size:16px;font-family:inherit;-webkit-appearance:none}
#q::placeholder{color:var(--muted)}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

/* navigation, thumb zone */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 16px;height:var(--nav-h);
  align-items:center;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:38px;padding:7px 14px;border-radius:4px;
  border:1px solid var(--border);background:transparent;color:var(--ink);
  font:inherit;font-size:13px;font-weight:400;cursor:pointer;white-space:nowrap;
  scroll-snap-align:center}
.tab:hover{background:var(--panel2)}

/* Buttons lifted verbatim from falconium_backend/apps/dashboard/static/falconium/web.css:
     .btn        background:var(--gold); color:#211b12; border:none; border-radius:4px; 600
     .btn.ghost  transparent; color:var(--ink); 1px solid var(--border); 400
   Only the touch height is added — Falconium's 7px padding is a desktop target. */
.tab[aria-pressed="true"],.btn.primary{
  background:var(--gold);color:var(--btn-ink);border:none;border-radius:4px;font-weight:600}
.tab.saved{font-variant-numeric:tabular-nums}
.tab.saved .n{display:none;margin-left:.15rem}
.tab.saved.has .n{display:inline}

main{padding-top:.4rem}
section{margin-bottom:2.6rem;scroll-margin-top:5rem}
h2{font-size:1.35rem;margin-bottom:.25rem}
.blurb{color:var(--muted);font-size:.94rem;margin:0 0 1.05rem;max-width:36em}
h3.sub{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin:1.5rem 0 .6rem}

.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:.85rem 1rem;margin-bottom:.6rem;box-shadow:var(--shadow)}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.name{font-size:1.09rem;font-weight:600;line-height:1.25}
.price{color:var(--muted);font-size:.86rem;white-space:nowrap;letter-spacing:.02em;padding-top:.15rem}
.meta{color:var(--muted);font-size:.83rem;margin-top:.12rem}
.note{margin:.42rem 0 0;font-size:.94rem}
.tags{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.tag{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;
  border-radius:5px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.tag.grey{background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:500}
a.map{margin-left:auto;font-size:.85rem;color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;white-space:nowrap;padding:.35rem 0 .2rem}
a.map:hover{opacity:.7}

.heart{flex:0 0 auto;width:44px;height:44px;margin:-.5rem -.55rem 0 0;padding:0;
  display:grid;place-items:center;background:none;border:0;cursor:pointer;
  color:var(--border);transition:transform .12s ease,color .12s ease}
.heart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.heart:hover{color:var(--muted)}
.heart[aria-pressed="true"]{color:var(--accent)}
.heart[aria-pressed="true"] svg{fill:currentColor}
.heart:active{transform:scale(.82)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.heart.pop{animation:pop .3s ease}

.prose{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.15rem;margin-bottom:.6rem}
.prose h4{margin:0 0 .3rem;font-size:1rem;font-weight:600}
.prose p{margin:0;font-size:.94rem}
.prose p+p{margin-top:.5rem}
.prose ul{margin:.45rem 0 0;padding-left:1.1rem;font-size:.94rem}
.warn{border-left:4px solid var(--gold)}

.hint{background:var(--panel2);border-left:4px solid var(--gold);
  padding:.8rem .95rem;font-size:.88rem;margin:0 0 1rem}
.hint strong{color:var(--accent)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.btn{font:inherit;font-size:13px;padding:7px 14px;min-height:44px;border-radius:4px;
  border:1px solid var(--border);background:transparent;color:var(--ink);cursor:pointer}
.btn:active{opacity:.75}

.cities{list-style:none;margin:1.4rem 0 0;padding:0}
.cities li{margin-bottom:.55rem}
.cities a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.cities a:hover{border-color:var(--accent)}
.cities .city{font-size:1.22rem;font-weight:600}
.cities .desc{color:var(--muted);font-size:.85rem;text-align:right}
.cities .saved-n{color:var(--accent);font-weight:600}

a.jump{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
a.jump::after{content:" ↓";font-size:.8em;opacity:.7}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--gold)}30%{box-shadow:0 0 0 3px var(--gold)}
  100%{box-shadow:0 0 0 0 rgba(195,161,131,0)}}
.card.flash{animation:flash 1.4s ease}

.empty{color:var(--muted);font-style:italic;padding:1.2rem 0;display:none}
footer{border-top:1px solid var(--border);margin-top:3rem;padding-top:1.2rem;
  color:var(--muted);font-size:.82rem}
::selection{background:var(--accent);color:var(--paper)}
@media print{.topbar,.navbar,.heart{display:none}.card,.prose{break-inside:avoid;box-shadow:none}
  body{padding-bottom:0}}