/* ================= tokens ================= */
*,*::before,*::after{box-sizing:border-box}
:root{
  --brown:#7A5222;          /* top bar */
  --brown-d:#5F3F19;
  --side:#4A2F11;           /* sidebar */
  --side-hi:#5E3D16;
  --side-on:#F6EDE0;
  --gold:#C58C36;
  --gold-d:#A97327;
  --page:#232323;           /* outer frame */
  --ink:#1B1712;
  --ink-2:#6B625A;
  --ink-3:#9A9089;
  --line:#E7E1D9;
  --line-2:#F2EEE8;
  --paper:#FFFFFF;
  --paper-2:#FAF8F5;
  --ok:#1F7A45; --warn:#B4741A; --bad:#B3392E; --idle:#6B7280;
  --r:10px;
  --shadow:0 18px 44px rgba(0,0,0,.28);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--ink);font:400 15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
[hidden]{display:none !important}

/* ================= scrollbars =================
   The default grey bar sits oddly against the warm palette, so every scrollable
   surface gets the same slim one. Firefox takes the two-value form; WebKit and Blink
   need the pseudo-elements. */
html{scrollbar-width:thin;scrollbar-color:#CFC5B6 transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#CFC5B6;border-radius:8px;
  /* a transparent border padded by background-clip keeps the thumb slim without
     shrinking the hit area */
  border:3px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:#B9AC98;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

/* dark surfaces need a light thumb instead */
.side,.lightbox{scrollbar-color:rgba(246,237,224,.32) transparent}
.side::-webkit-scrollbar-thumb,.lightbox::-webkit-scrollbar-thumb{background:rgba(246,237,224,.3)}
.side::-webkit-scrollbar-thumb:hover,.lightbox::-webkit-scrollbar-thumb:hover{background:rgba(246,237,224,.5)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap;
  padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  background:var(--brown);color:#fff;transition:background .18s,transform .12s,box-shadow .18s;
}
.btn:hover{background:var(--brown-d)}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#2A1B06}
.btn--gold:hover{background:var(--gold-d);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--paper-2);border-color:#D9D2C8}
.btn--danger{background:#fff;color:var(--bad);border:1px solid #E9C7C3}
.btn--danger:hover{background:#FDF3F2}
.btn--sm{padding:6px 12px;font-size:12.5px;border-radius:7px}
.btn--lg{padding:13px 18px;font-size:15px;width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

.sel,.inp,textarea.inp{
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;
  transition:border-color .16s,box-shadow .16s;width:100%;
}
.sel{width:auto;padding-right:30px;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B625A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center/12px}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
textarea.inp{resize:vertical;min-height:74px;line-height:1.5}

/* ================= login ================= */
.login{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;overflow:auto;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(197,140,54,.34), transparent 62%),
    radial-gradient(900px 620px at 108% 112%, rgba(197,140,54,.20), transparent 60%),
    linear-gradient(158deg, #6B451B 0%, #4A2F11 44%, #2A1908 100%);
}
.login::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000, transparent 72%);
}
.login__panel,.login__card{position:relative;z-index:1}

.login{grid-template-columns:auto auto;justify-content:center;align-content:center;
  gap:clamp(30px,6vw,78px)}
.login__panel{width:min(430px,40vw);justify-self:end;color:#F6EDE0}
.login__logo{width:min(300px,72%);height:auto;margin-bottom:16px}
.login__tag{
  margin:0 0 26px;font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(246,237,224,.62);padding-left:3px;
}
.login__points{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.login__points li{
  position:relative;padding-left:24px;font-size:13.5px;line-height:1.6;color:rgba(246,237,224,.82);
}
.login__points li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.22);
}

.login__card{
  width:min(382px,92vw);background:#fff;border-radius:16px;padding:32px 30px 26px;
  box-shadow:0 32px 74px rgba(0,0,0,.46);display:grid;gap:14px;align-content:start;
}
.login__card h1{font-size:23px;letter-spacing:-.02em}
.login__sub{margin:-8px 0 6px;font-size:13px;color:var(--ink-3)}
.fld{display:grid;gap:6px}
.fld>span{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14.5px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16);outline:none}
.login__err{margin:0;padding:10px 13px;border-radius:9px;background:#FDF0EE;color:var(--bad);font-size:13px}
.login__hint{margin:6px 0 0;text-align:center;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}

@media (max-width:820px){
  /* The card was sized in vw while the container also had side padding, so the two
     together ran past the edge of the screen and clipped the card. Inside the padded
     column, 100% is the right width. */
  .login{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 18px;justify-content:stretch}
  .login__panel{width:100%;max-width:380px;justify-self:center;text-align:center}
  .login__card{width:100%;max-width:400px;justify-self:center}
  /* a block-level image ignores text-align, so it needs auto margins to sit centred
     under the panel's centred text */
  .login__logo{width:min(215px,58%);margin-inline:auto}
  .login__points{display:none}
  .login__tag{margin-bottom:0;font-size:11px;letter-spacing:.28em}
}

@media (max-width:400px){
  .login{padding:20px 14px;gap:18px}
  .login__card{padding:24px 20px 20px;border-radius:14px}
  .login__card h1{font-size:21px}
  .login__logo{width:min(180px,54%);margin-inline:auto}
}

/* ================= app frame ================= */
.app{
  height:100%;display:grid;
  grid-template-columns:284px 1fr;
  grid-template-rows:64px 1fr;
  grid-template-areas:"top top" "side main";
}

/* ---- top bar ---- */
.topbar{
  grid-area:top;background:var(--brown);color:#fff;display:flex;align-items:center;gap:16px;
  padding:0 18px 0 20px;
}
.topbar__brand{flex:none;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
/* the artwork is 976x592 with the flame mark at x338 y0, 300x367 — crop to it */
.brandmark{
  flex:none;width:25px;height:31px;
  background:url("/assets/logo.png") no-repeat 0 0;
  background-size:calc(25px * 976 / 300) auto;
  background-position:calc(-338px * 25 / 300) 0;
}
.brandtext{display:flex;flex-direction:column;line-height:1.12}
.brandtext b{font-size:14.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.brandtext i{font-size:10px;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.topbar__burger{display:none;flex-direction:column;gap:4px;padding:8px;margin-left:-8px}
.topbar__burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.topbar__search{position:relative;flex:1;max-width:520px;margin-left:8px}
.topbar__search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:rgba(255,255,255,.62)}
.topbar__search input{
  width:100%;padding:8px 12px 8px 35px;border-radius:8px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.16);color:#fff;font-size:13.5px;
}
.topbar__search input::placeholder{color:rgba(255,255,255,.55)}
.topbar__search input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.24)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbtn{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:rgba(255,255,255,.88)}
.tbtn:hover{background:rgba(255,255,255,.13);color:#fff}
.who{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:20px;background:rgba(0,0,0,.16)}
.who__avatar{width:27px;height:27px;border-radius:50%;background:var(--gold);color:#2A1B06;display:grid;place-items:center;font-size:12.5px;font-weight:700}
.who__meta{display:flex;flex-direction:column;line-height:1.15}
.who__meta b{font-size:12.5px;font-weight:600}
.who__meta i{font-size:10.5px;font-style:normal;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.06em}

/* ---- sidebar ---- */
.side{
  grid-area:side;background:var(--side);color:var(--side-on);padding:26px 0 16px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.side__title{padding:0 26px 18px;font-size:25px;font-weight:400;letter-spacing:-.01em;color:#fff}
.side__nav{display:flex;flex-direction:column}
.side__link{
  display:flex;align-items:center;gap:10px;padding:11px 26px;text-align:left;font-size:16px;
  color:rgba(246,237,224,.86);border-left:3px solid transparent;transition:background .15s,color .15s;
}
.side__link:hover{background:var(--side-hi);color:#fff}
.side__link.is-on{background:var(--side-hi);color:#fff;border-left-color:var(--gold);font-weight:600}
.side__link b{font-weight:inherit;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side__count{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;
  background:rgba(0,0,0,.26);color:rgba(246,237,224,.7);
}
.side__link.is-on .side__count{background:var(--gold);color:#2A1B06}
.side__add{
  margin:14px 20px 0;padding:9px;border-radius:8px;border:1px dashed rgba(246,237,224,.32);
  color:rgba(246,237,224,.72);font-size:13px;font-weight:600;
}
.side__add:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(246,237,224,.6)}
.side__foot{margin-top:auto;padding:16px 26px 0;font-size:11.5px;color:rgba(246,237,224,.45);letter-spacing:.03em}
.side__scrim{display:none}

/* ---- main ---- */
.main{grid-area:main;background:var(--paper);overflow-y:auto;padding:26px 30px 60px}
.main__head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.main__head h1{font-size:26px}
.main__head p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.main__actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* ---- grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:18px;padding-top:22px}
.card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  text-align:left;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;
}
.card:hover{box-shadow:0 10px 26px rgba(60,42,20,.13);transform:translateY(-2px);border-color:#DFD7CB}
.card__img{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__ph{width:100%;height:100%;display:grid;place-items:center;color:#D3C9BB;background:repeating-linear-gradient(45deg,#FAF8F5,#FAF8F5 9px,#F4F0EA 9px,#F4F0EA 18px)}
.card__ph svg{width:30px;height:30px}
.card__n{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:20px;background:rgba(27,23,18,.72);color:#fff;font-size:11px;font-weight:600;backdrop-filter:blur(3px)}
.card__body{padding:11px 13px 13px;display:grid;gap:5px}
.card__title{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{font-size:12px;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap}
.card__meta span{display:inline-flex;align-items:center;gap:4px}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.card__date{font-size:11.5px;color:var(--ink-3)}

/* ---- store cards + breadcrumb ---- */
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.crumb button{color:var(--brown);font-weight:600;padding:0}
.crumb button:hover{text-decoration:underline}
.crumb span{color:var(--ink-3)}

.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px;padding-top:22px}
.store{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-align:left;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.store:hover{box-shadow:0 10px 26px rgba(60,42,20,.13);transform:translateY(-2px);border-color:#DFD7CB}
.store__img{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;position:relative}
.store__img img{width:100%;height:100%;object-fit:cover}
.store__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--side-on);
  background:linear-gradient(140deg,var(--brown),var(--side));font-size:30px;font-weight:600;letter-spacing:-.02em}
.store__body{padding:12px 14px 14px;display:grid;gap:3px}
.store__name{font-size:15.5px;font-weight:600}
.store__meta{font-size:12.5px;color:var(--ink-2)}
.store__go{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--brown);display:flex;align-items:center;gap:5px}
.store:hover .store__go{gap:9px}
.store--add{border:2px dashed var(--line);background:transparent;display:grid;place-items:center;
  min-height:170px;color:var(--ink-3);font-size:14px;font-weight:600;transition:border-color .18s,background .18s,color .18s}
.store--add:hover{border-color:var(--gold);background:#FDF8F0;color:var(--brown);transform:none;box-shadow:none}
.store--empty .store__ph{background:repeating-linear-gradient(45deg,#EFE9E1,#EFE9E1 9px,#E7E0D6 9px,#E7E0D6 18px);color:#B9AE9F}

/* ---- filter sheet ----
   On a wide screen this is pure scaffolding: `display:contents` drops the wrapper so the
   controls lay out in the toolbar exactly as they did. On a phone it becomes a bottom
   sheet, which keeps the toolbar down to two buttons. */
.sheet{display:contents}
.sheet__open,.sheet__head,.sheet__foot,.sheet__scrim{display:none}
.sheet__count{
  min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--gold);
  color:#2A1B06;font-size:11px;font-weight:700;display:grid;place-items:center;
}

/* ---- list view ---- */
.facets{display:contents}
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.viewtog button{padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--ink-3);background:#fff;transition:background .15s,color .15s}
.viewtog button+button{border-left:1px solid var(--line)}
.viewtog button:hover{background:var(--paper-2);color:var(--ink)}
.viewtog button.is-on{background:var(--brown);color:#fff}

.list{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--line-2);transition:background .15s}
.row:last-child{border-bottom:0}
.row:hover{background:var(--paper-2)}
.row__thumb{flex:none;width:66px;height:50px;border-radius:6px;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center;position:relative}
.row__thumb img{width:100%;height:100%;object-fit:cover}
.row__thumb svg{width:18px;height:18px;color:#D3C9BB}
.row__n{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:rgba(27,23,18,.75);
  color:#fff;font-size:9.5px;font-weight:700}
.row__main{flex:2 1 220px;min-width:0}
.row__title{font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row__cols{display:flex;gap:18px;flex:3 1 300px;min-width:0}
.row__col{flex:1;min-width:0}
.row__col b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.row__col span{display:block;margin-top:1px;font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__end{flex:none;display:flex;align-items:center;gap:10px}
.row__btn{padding:7px 13px;border-radius:7px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--brown);white-space:nowrap;transition:background .15s,border-color .15s}
.row:hover .row__btn{background:var(--brown);border-color:var(--brown);color:#fff}

@media (max-width:900px){
  .row{flex-wrap:wrap}
  .row__cols{flex-basis:100%;order:3;padding-left:80px;gap:14px;flex-wrap:wrap}
  .row__end{margin-left:auto}
}
@media (max-width:560px){
  .row__cols{padding-left:0}
  .row__col{flex:0 0 auto;min-width:86px}
}

.pill{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.pill--live{background:#E7F4EC;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
/* A quietly pulsing dot reads as "this is up right now". The ring is drawn with
   box-shadow so no extra element is needed. */
.pill--live::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok);
  animation:livePulse 2.4s ease-out infinite;
  /* rows and cards already carry a --i index for their entrance stagger; reusing it
     here keeps 153 dots from blinking in unison */
  animation-delay:calc(var(--i, 0) * 160ms);
}
@keyframes livePulse{
  0%   {box-shadow:0 0 0 0 rgba(31,122,69,.5)}
  55%  {box-shadow:0 0 0 5px rgba(31,122,69,0)}
  100% {box-shadow:0 0 0 0 rgba(31,122,69,0)}
}
.pill--planned{background:#FDF1DF;color:var(--warn)}
.pill--removed{background:#FBEBE9;color:var(--bad)}
.pill--archived{background:#EFEFEF;color:var(--idle)}

.empty{padding:70px 20px;text-align:center;color:var(--ink-3)}
.empty h3{font-size:17px;color:var(--ink-2);margin-bottom:6px}
.empty p{margin:0 0 16px;font-size:13.5px}

/* ================= modal ================= */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px}
.modal__scrim{position:absolute;inset:0;background:rgba(20,14,6,.55);backdrop-filter:blur(2px)}
.modal__box{
  position:relative;width:100%;max-width:880px;max-height:90vh;overflow:auto;background:#fff;
  border-radius:14px;box-shadow:var(--shadow);
}
.mhead{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:#fff;border-bottom:1px solid var(--line-2);
}
.mhead h2{font-size:17.5px;flex:1}
.mhead .x{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--ink-2);font-size:22px;line-height:1}
.mhead .x:hover{background:var(--paper-2);color:var(--ink)}
.mbody{padding:18px 20px}
.mfoot{
  position:sticky;bottom:0;display:flex;gap:9px;justify-content:flex-end;padding:14px 20px;
  background:#fff;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.mfoot .left{margin-right:auto}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.form-grid .wide{grid-column:1/-1}
.sect{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2)}
.sect__h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sect__h h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700}
.sect__h .line{flex:1;height:1px;background:var(--line-2)}

/* drop zone */
.drop{
  border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--ink-3);
  transition:border-color .16s,background .16s;cursor:pointer;
}
.drop:hover,.drop.is-over{border-color:var(--gold);background:#FDF8F0;color:var(--brown)}
.drop b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.drop small{font-size:12px}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:12px}
.thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb__x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(27,23,18,.75);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1}
.thumb__x:hover{background:var(--bad)}
.thumb__cover{position:absolute;left:4px;bottom:4px;padding:2px 6px;border-radius:5px;background:rgba(27,23,18,.75);color:#fff;font-size:10px;font-weight:600}
.thumb--file{display:grid;place-items:center;color:var(--ink-3);font-size:11px;padding:8px;text-align:center;word-break:break-all}
.thumb__camp{position:absolute;left:4px;top:4px;max-width:calc(100% - 32px);padding:2px 6px;border-radius:5px;
  background:rgba(197,140,54,.94);color:#2A1B06;font-size:10px;font-weight:700;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb__camp:hover{background:var(--gold-d);color:#fff}
.thumb__camp--none{background:rgba(27,23,18,.6);color:#fff;font-weight:600}
.gal__camp{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:4px 0 -2px;font-size:11.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.gal__camp::after{content:"";flex:1;height:1px;background:var(--line-2)}
.thumb.is-busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23C58C36' stroke-width='4' stroke-dasharray='70 30'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/26px no-repeat}

/* ---- detail view: photo first, details compact ---- */
.hero{
  margin:0;position:relative;border-radius:10px;overflow:hidden;background:#141110;
  display:grid;place-items:center;cursor:zoom-in;
  /* tall and wide photos both fit whole — nothing is cropped */
  min-height:min(38vh,300px);max-height:min(58vh,520px);
}
/* A portrait shot leaves empty space either side; fill it with a blurred copy of the
   same photo so the frame reads as deliberate rather than broken. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--hero-bg) center/cover no-repeat;
  filter:blur(30px) brightness(.42) saturate(1.1);transform:scale(1.2);
}
.hero img{position:relative;width:100%;height:100%;max-height:min(58vh,520px);object-fit:contain;display:block}
.hero__file{display:grid;place-items:center;padding:40px;color:rgba(246,237,224,.7);font-size:13px;text-align:center}
.hero__bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:9px 13px;font-size:12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.hero__bar b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero__bar span{margin-left:auto;flex:none;color:rgba(255,255,255,.72)}
.hero__camp{
  flex:none;padding:2px 8px;border-radius:20px;background:var(--gold);color:#2A1B06;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
}
.hero__zoom{
  position:absolute;top:10px;right:10px;padding:5px 10px;border-radius:7px;
  background:rgba(20,15,8,.62);color:#fff;font-size:11.5px;font-weight:600;
  backdrop-filter:blur(3px);pointer-events:none;
}

.strip{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:thin}
.strip__i{
  flex:0 0 auto;width:78px;height:58px;border-radius:7px;overflow:hidden;position:relative;
  border:2px solid transparent;background:var(--paper-2);transition:border-color .16s,transform .16s;
}
.strip__i img{width:100%;height:100%;object-fit:cover}
.strip__i:hover{transform:translateY(-2px)}
.strip__i.is-on{border-color:var(--gold)}
.strip__i .thumb--file{font-size:9.5px;padding:4px}

.nophoto{
  border:2px dashed var(--line);border-radius:10px;padding:38px 20px;text-align:center;
  color:var(--ink-3);font-size:13.5px;
}

/* details block, deliberately quieter than the photo */
.kv--tight{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 18px}
.kv--tight .kv__r{padding:5px 0;font-size:12.5px}
.kv--tight .kv__r dt{flex:0 0 44%;font-size:11.5px}

/* gallery in detail view */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.gal__i{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal__i:hover img{transform:scale(1.05)}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 18px}
.kv__r{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.kv__r dt{flex:0 0 42%;color:var(--ink-3);font-size:12.5px}
.kv__r dd{margin:0;flex:1;font-weight:500;word-break:break-word}

/* simple table (settings) */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:hover td{background:var(--paper-2)}
.tbl .act{text-align:right;white-space:nowrap}

.tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line-2);background:#fff;position:sticky;top:64px;z-index:2}
.tab{padding:10px 13px;font-size:13.5px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--brown);border-bottom-color:var(--gold)}

.note{padding:10px 13px;border-radius:8px;background:#FDF8F0;border:1px solid #F0E2CB;font-size:12.5px;color:var(--brown-d)}
.err{padding:9px 12px;border-radius:8px;background:#FDF0EE;color:var(--bad);font-size:13px;margin-bottom:12px}

/* ================= lightbox ================= */
.lightbox{
  position:fixed;inset:0;z-index:80;background:rgba(12,9,5,.94);
  display:grid;place-items:center;overflow:hidden;
  /* the chrome around the image: nav arrows on the sides, caption bar at the bottom */
  --lb-x:64px; --lb-y-top:56px; --lb-y-bottom:76px;
  padding:var(--lb-y-top) var(--lb-x) var(--lb-y-bottom);
}
/* Sized against the viewport rather than the grid track: a large image would otherwise
   stretch the track and spill past the edges instead of scaling down to fit. */
.lightbox img{
  max-width:calc(100vw - var(--lb-x) * 2);
  max-height:calc(100dvh - var(--lb-y-top) - var(--lb-y-bottom));
  width:auto;height:auto;min-width:0;min-height:0;
  object-fit:contain;border-radius:4px;
}
.lightbox__x{position:absolute;top:14px;right:18px;width:40px;height:40px;border-radius:9px;color:#fff;font-size:28px;line-height:1}
.lightbox__x:hover{background:rgba(255,255,255,.14)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:9px;color:#fff;font-size:36px;line-height:1}
.lightbox__nav:hover{background:rgba(255,255,255,.14)}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}
.lightbox__bar{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;display:flex;align-items:center;gap:14px;color:#fff;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lightbox__bar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.lightbox .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ================= motion ================= */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:translateY(6px) scale(.99)}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* staggered entrance for cards / rows / store tiles — capped so long lists stay snappy */
.row,.card,.store,.gal__i,.thumb{
  animation:riseIn .34s cubic-bezier(.22,.72,.16,1) backwards;
  animation-delay:calc(var(--i, 0) * 22ms);
}
.list,.grid,.stores{animation:fadeIn .22s ease both}
.main__head h1{animation:slideDown .3s cubic-bezier(.22,.72,.16,1) both}
.crumb{animation:fadeIn .25s ease both}
.side__link{transition:background .18s,color .18s,border-color .18s,padding-left .18s}
.side__link:hover{padding-left:29px}
.side__count{transition:background .2s,color .2s}

/* skeletons while a list loads */
.skel{display:grid;gap:10px;padding-top:22px}
.skel__row{
  height:72px;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(100deg,#F7F4EF 30%,#EFEAE2 48%,#F7F4EF 66%);
  background-size:200% 100%;animation:shimmer 1.15s linear infinite;
}
.skel--cards{grid-template-columns:repeat(auto-fill,minmax(214px,1fr))}
.skel--cards .skel__row{height:206px}

/* modal + lightbox */
.modal__scrim{animation:scrimIn .2s ease both}
.modal__box{animation:popIn .28s cubic-bezier(.22,.72,.16,1) both}
.modal.is-closing .modal__box{animation:popOut .15s ease both}
.modal.is-closing .modal__scrim{animation:scrimIn .15s ease reverse both}
.lightbox{animation:fadeIn .2s ease both}
.lightbox img{animation:zoomIn .28s cubic-bezier(.22,.72,.16,1) both}

/* interactive polish */
.btn,.tbtn,.row__btn,.tab,.viewtog button{transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn:active,.tbtn:active,.viewtog button:active{transform:translateY(1px) scale(.985)}
.thumb{transition:transform .18s,box-shadow .18s}
.thumb:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,42,20,.16)}
.pill{transition:background .2s,color .2s}
.who{transition:background .2s}
.who:hover{background:rgba(0,0,0,.26)}
.login__panel{animation:riseIn .5s cubic-bezier(.22,.72,.16,1) both}
.login__card{animation:popIn .48s cubic-bezier(.22,.72,.16,1) .08s both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .side__link:hover{padding-left:26px}
}

/* ================= custom select menu ================= */
select[data-cs-open]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,140,54,.16)}
.cs-menu{
  position:fixed;z-index:120;max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px rgba(38,26,10,.24),0 2px 6px rgba(38,26,10,.08);
  animation:popIn .16s cubic-bezier(.22,.72,.16,1) both;outline:none;
}
.cs-menu.is-closing{animation:popOut .12s ease both}
.cs-opt{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:7px;
  font-size:13.5px;line-height:1.35;text-align:left;color:var(--ink);
  animation:fadeIn .18s ease backwards;animation-delay:calc(var(--i,0) * 12ms);
  transition:background .14s,color .14s;
}
.cs-opt:hover,.cs-opt.is-hi{background:var(--paper-2)}
.cs-opt.is-on{color:var(--brown);font-weight:600}
.cs-opt.is-off{opacity:.45;pointer-events:none}
.cs-opt__tick{flex:none;width:14px;height:14px;display:grid;place-items:center}
.cs-opt.is-on .cs-opt__tick::before{
  content:"";width:12px;height:12px;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.6l3 3L12 3.4' fill='none' stroke='%237A5222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ================= toast ================= */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:99;
  padding:11px 18px;border-radius:9px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-bad{background:var(--bad)}

/* ================= responsive ================= */
@media (max-width:980px){
  /* iOS scrolls to the top when you tap the status bar, but only for the page itself —
     it cannot reach a scrolling <div>. On phones the document does the scrolling and the
     top bar sticks, so that gesture works and the address bar hides on scroll as usual. */
  html,body{height:auto;min-height:100%}
  .app{height:auto;min-height:100%;grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .topbar{position:sticky;top:0;z-index:45;padding-top:env(safe-area-inset-top)}
  .main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .sheet{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .main{overflow:visible}
  .side{top:0;padding-top:78px}
  .topbar__burger{display:flex}
  /* the wordmark will not fit beside the search box, but the mark on its own does */
  .topbar__brand{display:flex;gap:0}
  .brandtext{display:none}
  .topbar{gap:10px;padding:0 10px}
  .topbar__search{margin-left:0}
  .topbar__search input{font-size:16px}   /* 16px stops iOS zooming on focus */
  .side{
    position:fixed;bottom:0;left:0;width:min(270px,78vw);z-index:44;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .side__title{font-size:22px;padding:0 22px 14px}
  .side__link{padding:12px 22px}
  .side.is-open{transform:none;box-shadow:14px 0 40px rgba(0,0,0,.35)}
  .side__scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:43;opacity:0;pointer-events:none;transition:opacity .25s}
  .side__scrim.is-on{opacity:1;pointer-events:auto}
  .main{padding:20px 16px 50px}
  .main__actions{width:100%;margin-left:0}
  .who__meta{display:none}
  .who{display:none}          /* the avatar is decorative; settings and sign-out remain */
  .lightbox{--lb-x:12px; --lb-y-top:52px; --lb-y-bottom:72px}
}
/* ---- phones ---- */
@media (max-width:640px){
  .main{padding:12px 12px 40px}
  .main__head{padding-bottom:10px;gap:8px}
  .main__head h1{font-size:19px}
  .main__head p{margin-top:2px;font-size:12px}
  .crumb{margin-bottom:3px;font-size:12px}

  /* Six controls side by side read as clutter on a phone. The toolbar keeps only
     Filters and Add; everything else moves into a sheet. */
  .main__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .sheet__open{display:inline-flex;justify-content:center;gap:7px;padding:10px 12px}
  .sheet__open svg{width:16px;height:16px}
  #btnAddItem{justify-content:center;padding:10px 12px}

  .sheet{
    display:flex;flex-direction:column;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    max-height:82dvh;overflow-y:auto;padding:0 16px 16px;
    background:#fff;border-radius:18px 18px 0 0;
    /* the shadow reaches upward, so a closed sheet would still show a grey band along
       the bottom edge — keep it hidden until it opens */
    transform:translateY(101%);
    transition:transform .28s cubic-bezier(.22,.72,.16,1);
  }
  .sheet.is-open{
    transform:none;
    box-shadow:0 -18px 50px rgba(28,18,6,.34);
  }
  .sheet__head{
    display:flex;align-items:center;position:sticky;top:0;z-index:1;
    padding:14px 0 10px;background:#fff;border-bottom:1px solid var(--line-2);margin-bottom:2px;
  }
  .sheet__head h3{flex:1;font-size:16px}
  .sheet__head .x{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;font-size:22px;color:var(--ink-2)}
  .sheet__foot{display:block;position:sticky;bottom:0;padding:10px 0 0;background:#fff}
  .sheet .sel,.sheet .btn{width:100%}
  .sheet .sel{padding:11px 26px 11px 12px;background-position:right 10px center}
  .sheet__scrim{
    display:block;position:fixed;inset:0;z-index:74;background:rgba(20,14,6,.5);
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .sheet__scrim.is-on{opacity:1;pointer-events:auto}
  .viewtog{width:100%}
  .viewtog button{flex:1;padding:10px 0;text-align:center}
  .facets{display:contents}

  /* Two clean lines per entry: picture and title, then the values.
     Repeating CITY / SIZE / AGENCY on every row was louder than the values themselves,
     so on a phone the labels go and the values run together with separators. */
  .list{margin-top:14px}
  .row{
    display:grid;grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"thumb main end" "thumb cols cols";
    gap:3px 10px;padding:11px 12px;align-items:center;
  }
  .row__thumb{grid-area:thumb;width:52px;height:52px;align-self:center}
  .row__main{grid-area:main;align-self:end}
  .row__title{font-size:14px;-webkit-line-clamp:2;line-height:1.3}
  .row__cols{grid-area:cols;display:flex;flex-wrap:wrap;gap:0 7px;padding-left:0;flex:none;align-self:start}
  .row__col{flex:0 0 auto;display:flex;align-items:baseline;min-width:0}
  .row__col b{display:none}
  .row__col span{font-size:12px;margin-top:0;color:var(--ink-2);font-weight:400}
  .row__col + .row__col::before{content:"·";margin-right:7px;color:var(--ink-3)}
  .row__end{grid-area:end;align-self:center;gap:8px}
  /* the whole row is tappable, so a chevron says "open" more quietly than a button
     repeated 153 times */
  .row__btn{padding:0;border:0;background:none;font-size:0;line-height:0}
  .row__btn::after{content:"\203A";font-size:23px;line-height:1;color:var(--ink-3)}
  .row:hover .row__btn{background:none}
  .pill{font-size:9.5px;padding:2px 7px}

  .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .stores{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
  .store__name{font-size:14px}
  .store__meta,.store__go{font-size:11.5px}

  .modal{padding:0}
  /* openModal() sets an inline max-width for the desktop layout; on a phone the box
     should always fill the screen, so this has to win over it */
  .modal__box{max-height:100dvh;height:100%;border-radius:0;max-width:none !important}
  .mhead{padding:13px 14px}
  .mhead h2{font-size:16px}
  .mbody{padding:14px}
  .mfoot{padding:11px 14px;gap:7px}
  .mfoot .btn{flex:1;min-width:0}
  .mfoot .left{flex-basis:100%;margin-right:0;order:-1}

  .hero{min-height:min(34vh,240px);max-height:min(46vh,380px)}
  .hero img{max-height:min(46vh,380px)}
  .strip__i{width:64px;height:48px}
  .form-grid{grid-template-columns:1fr;gap:11px}

  /* wide tables cannot fit a phone — show each row as a stacked card instead */
  .tabs{padding:0 14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;padding:10px 11px;font-size:13px}
  .tbl thead{display:none}
  .tbl tr{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
  .tbl tr:hover td{background:none}
  .tbl td{display:block;padding:2px 0;border:0}
  .tbl td:first-child{font-weight:600;font-size:14px}
  .tbl td.act{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px}
  .tbl td.act .btn{flex:0 0 auto}

  .cs-menu{max-width:calc(100vw - 24px)}
  /* iOS zooms the whole page when a focused field is under 16px */
  .fld input,.fld select,.fld textarea,.inp,textarea.inp,.sel{font-size:16px}
  .fld>span{font-size:11.5px}
  .toast{left:12px;right:12px;transform:translateY(14px);max-width:none}
  .toast.is-on{transform:none}
}