/* ============================================================
   VALLORA . dashboard
   Deliberately its own stylesheet. The shop's CSS carries a cursor, a
   grain layer, magnetic buttons and scroll reveals, none of which belong
   in a tool you use with one hand while holding a phone. This is a
   console: dense, fast, and legible before it is beautiful.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

:root{
  --bg:#0a0a0a;
  --panel:#111;
  --panel-2:#171717;
  --fg:#f2f2f2;
  --dim:#8a8a8a;
  --line:#262626;
  --line-hi:#3a3a3a;
  --accent:#e8e8e8;
  --good:#5fbf7a;
  --warn:#d8a33d;
  --bad:#d95c4a;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 15px/1.55 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:Archivo,system-ui,sans-serif;font-weight:900;letter-spacing:-.01em;margin:0}
a{color:inherit}
button{font:inherit}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── the gate ─────────────────────────────────────────────── */

.gate{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:2rem;
}
.gate__box{width:min(26rem,100%);text-align:center}
.gate__mark{
  font-family:Archivo,sans-serif;font-weight:900;font-size:1.5rem;
  letter-spacing:.42em;text-indent:.42em;margin-bottom:.4rem;
}
.gate__sub{color:var(--dim);font-size:.82rem;margin:0 0 2rem}
.gate form{display:flex;gap:.5rem}
.gate input{flex:1}
.gate__err{color:var(--bad);font-size:.8rem;min-height:1.2rem;margin:.8rem 0 0}
#gateInvite form{display:flex;gap:.5rem;margin-top:1rem}
#gateInvite input{flex:1;font-family:var(--mono)}
.gate__link{
  background:none;border:0;padding:0;cursor:pointer;color:var(--dim);
  font:inherit;border-bottom:1px solid var(--line);
}
.gate__link:hover{color:var(--fg)}
.gate__note--tight{margin-top:1.4rem;border-top:0;padding-top:0}

.who{
  font-size:.7rem;color:var(--dim);font-family:var(--mono);
  max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.gate__note{
  color:var(--dim);font-size:.72rem;line-height:1.6;
  margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  text-align:left;
}

/* ── shell ────────────────────────────────────────────────── */

.bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,1.6rem);
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__mark{
  font-family:Archivo,sans-serif;font-weight:900;font-size:.85rem;
  letter-spacing:.3em;text-indent:.3em;
}
.bar__tabs{display:flex;gap:.25rem;margin-left:.5rem;flex-wrap:wrap}
.tab{
  background:none;border:1px solid transparent;color:var(--dim);
  padding:.4rem .8rem;border-radius:2px;cursor:pointer;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  transition:color .2s,border-color .2s,background .2s;
}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.tab__n{
  display:inline-block;margin-left:.4rem;padding:0 .32rem;
  background:var(--line-hi);color:var(--fg);border-radius:2px;
  font-size:.68rem;font-variant-numeric:tabular-nums;
}
.tab[aria-selected="true"] .tab__n{background:rgba(0,0,0,.18);color:var(--bg)}
.bar__end{margin-left:auto;display:flex;align-items:center;gap:.7rem}

.dirty{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);display:flex;align-items:center;gap:.4rem;
}
.dirty::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}

.wrap{max-width:78rem;margin:0 auto;padding:clamp(1.2rem,3vw,2rem)}

.panel__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;
}
.panel__head h2{font-size:clamp(1.3rem,3vw,1.8rem)}
.panel__head p{color:var(--dim);font-size:.82rem;margin:.35rem 0 0;max-width:46ch}

/* ── controls ─────────────────────────────────────────────── */

input,select,textarea{
  width:100%;
  background:var(--panel-2);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.55rem .7rem;
  font:400 .88rem/1.5 Inter,system-ui,sans-serif;
  transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line-hi)}
textarea{resize:vertical;min-height:5.5rem}
select{cursor:pointer}
input[type=file]{padding:.4rem;cursor:pointer;font-size:.78rem}

label{
  display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.35rem;
}
.field{margin-bottom:1rem}
.field__hint{color:var(--dim);font-size:.72rem;margin:.35rem 0 0}
.row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}

.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:1px solid var(--line-hi);color:var(--fg);
  padding:.5rem .9rem;border-radius:2px;cursor:pointer;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,opacity .2s;
}
.btn:hover{border-color:var(--fg)}
.btn--solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid:hover{opacity:.86}
.btn--bad{color:var(--bad);border-color:rgba(217,92,74,.4)}
.btn--bad:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn--sm{padding:.3rem .55rem;font-size:.68rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-hi);background:none;color:var(--fg)}
.btn--solid:disabled:hover{background:var(--fg);color:var(--bg)}

.acts{display:flex;gap:.5rem;flex-wrap:wrap}
.btn--big{padding:.75rem 1.6rem;font-size:.82rem}
.field__opt{
  text-transform:none;letter-spacing:0;font-size:.68rem;
  color:var(--dim);opacity:.7;
}

/* Everything a shop owner never needs to see, behind one disclosure. The file
   list used to sit in the open, which made publishing look like a developer
   task rather than a button. */
.advanced{
  border:1px solid var(--line);border-radius:3px;
  padding:.9rem 1.1rem;margin-top:1rem;background:var(--panel);
}
.advanced summary{
  cursor:pointer;font-size:.8rem;color:var(--dim);
  letter-spacing:.04em;
}
.advanced summary:hover{color:var(--fg)}
.advanced[open] summary{margin-bottom:.9rem;color:var(--fg)}
.advanced .acts{margin:.8rem 0}

/* ── products ─────────────────────────────────────────────── */

.split{display:grid;gap:1.4rem;grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.list{display:flex;flex-direction:column;gap:.4rem}
.list__item{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.55rem;cursor:pointer;color:inherit;
  transition:border-color .2s,background .2s;
}
.list__item:hover{border-color:var(--line-hi)}
.list__item[aria-current="true"]{border-color:var(--fg);background:var(--panel-2)}
.list__thumb{
  width:2.6rem;height:3.2rem;flex:none;object-fit:cover;
  background:var(--panel-2);border:1px solid var(--line);
}
.list__thumb--empty{display:grid;place-items:center;font-size:.6rem;color:var(--dim)}
.list__meta{min-width:0;flex:1}
/* both are spans so the whole row can stay one button: they have to be told
   to stack, or the name and the price run together on one line */
.list__name{
  display:block;
  font-weight:500;font-size:.85rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.list__sub{display:block;color:var(--dim);font-size:.7rem;font-family:var(--mono)}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1rem,2.4vw,1.5rem);
}
.card + .card{margin-top:1rem}
.card__title{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);
}

/* repeatable rows: facts, sizes, shots, lookbook */
.rep{display:flex;flex-direction:column;gap:.5rem}
.rep__row{
  display:grid;gap:.5rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
}
.rep__row--3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
.rep__row--look{grid-template-columns:3rem minmax(0,1fr) 8rem auto}
@media (max-width:640px){
  .rep__row,.rep__row--3,.rep__row--look{grid-template-columns:1fr;
    padding:.7rem;border:1px solid var(--line);border-radius:2px}
}
.rep__x{
  background:none;border:1px solid var(--line);color:var(--dim);
  width:2rem;height:2.15rem;border-radius:2px;cursor:pointer;flex:none;
  transition:color .2s,border-color .2s;
}
.rep__x:hover{color:var(--bad);border-color:var(--bad)}

/* the fit scale, mirrored from the shop so what you set is what they see */
.fits{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.fit{
  background:var(--panel-2);border:1px solid var(--line);border-radius:2px;
  padding:.5rem .3rem;cursor:pointer;color:var(--dim);
  font-size:.62rem;line-height:1.25;text-align:center;
  transition:border-color .2s,color .2s,background .2s;
}
.fit:hover{border-color:var(--line-hi);color:var(--fg)}
.fit.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fit.is-off{opacity:.32;text-decoration:line-through}
.fit__bar{display:block;height:3px;background:currentColor;margin:0 0 .4rem;opacity:.5}
.fit.is-on .fit__bar{opacity:1;height:5px}

/* which size each mark on the fit scale means */
.maps{display:grid;gap:.4rem}
.maps__row{
  display:grid;grid-template-columns:minmax(0,1fr) 9rem;gap:.6rem;
  align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:2px;
  padding:.4rem .5rem .4rem .7rem;
}
.maps__fit{font-size:.82rem}
.maps__row select{padding:.35rem .5rem;font-size:.8rem}
/* an unset mark is not an error, but it should be obvious at a glance which
   ones still need answering */
.maps__row.is-unset{border-left:2px solid var(--warn)}
.maps__row.is-unset .maps__fit{color:var(--dim)}

/* ── lookbook ─────────────────────────────────────────────── */

.looks{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.look{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.5rem;display:flex;flex-direction:column;gap:.45rem;
}
.look__frame{
  position:relative;aspect-ratio:3/4;background:var(--panel-2);
  border:1px solid var(--line);overflow:hidden;
}
.look__frame img{width:100%;height:100%;object-fit:cover;display:block}
.look__n{
  position:absolute;top:.3rem;left:.3rem;
  background:rgba(0,0,0,.7);padding:.1rem .35rem;border-radius:2px;
  font-family:var(--mono);font-size:.62rem;
}
.look__miss{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--dim);font-size:.62rem;text-align:center;padding:.4rem;
}
.look__alt{font-size:.7rem}
.look__foot{display:flex;gap:.25rem;align-items:center}
.look__foot select{padding:.25rem .35rem;font-size:.68rem}
.look__move{
  background:none;border:1px solid var(--line);color:var(--dim);
  width:1.7rem;height:1.7rem;border-radius:2px;cursor:pointer;flex:none;
  font-size:.7rem;line-height:1;
}
.look__move:hover{color:var(--fg);border-color:var(--line-hi)}
.look__move:disabled{opacity:.25;cursor:not-allowed}

/* On a phone the grid still fits two frames across, but that leaves the alt
   text box about twenty characters wide and you cannot read what you are
   writing. Seeing the running order matters less than being able to edit, so
   below this the card turns on its side: thumbnail left, the fields beside it.
   This has to come after .look itself or the base display:flex wins. */
@media (max-width:520px){
  .looks{grid-template-columns:1fr}
  .look{
    display:grid;
    grid-template-columns:5.5rem minmax(0,1fr);
    grid-template-areas:"frame alt" "frame foot";
    align-items:start;
    column-gap:.6rem;
  }
  .look__frame{grid-area:frame}
  .look__alt{grid-area:alt}
  .look__foot{grid-area:foot}
}

/* ── reviews ──────────────────────────────────────────────── */

.rev{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:1rem;display:grid;gap:.6rem;
  grid-template-columns:minmax(0,1fr) auto;align-items:start;
}
.rev + .rev{margin-top:.7rem}
.rev__who{font-weight:500;font-size:.88rem}
.rev__meta{color:var(--dim);font-size:.7rem;font-family:var(--mono);margin:.15rem 0 .5rem}
.rev__body{font-size:.85rem;color:#d4d4d4;margin:0;white-space:pre-wrap}
.rev__acts{display:flex;flex-direction:column;gap:.4rem}
.pill{
  display:inline-block;padding:.1rem .45rem;border-radius:2px;
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
}
.pill--live{background:rgba(95,191,122,.16);color:var(--good)}
.pill--held{background:rgba(216,163,61,.16);color:var(--warn)}
/* transcribed from a message rather than submitted through the form */
.pill--by{background:var(--line-hi);color:var(--dim)}

/* ── publish ──────────────────────────────────────────────── */

.files{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}
.file{
  display:flex;align-items:center;gap:.7rem;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.55rem .7rem;font-family:var(--mono);font-size:.76rem;
}
.file__path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file__tag{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}
.file__tag--new{color:var(--good)}
.file__tag--mod{color:var(--warn)}
.file__tag--bad{color:var(--bad)}
.file__size{color:var(--dim)}

.log{
  background:#080808;border:1px solid var(--line);border-radius:2px;
  padding:.8rem;margin-top:1rem;max-height:16rem;overflow:auto;
  font-family:var(--mono);font-size:.74rem;line-height:1.7;white-space:pre-wrap;
}
.log__ok{color:var(--good)}
.log__err{color:var(--bad)}
.log__dim{color:var(--dim)}

.note{
  border-left:2px solid var(--line-hi);padding:.1rem 0 .1rem .9rem;
  color:var(--dim);font-size:.78rem;line-height:1.65;margin:0 0 1.2rem;
}
.note b{color:var(--fg);font-weight:500}

.empty{
  border:1px dashed var(--line);border-radius:3px;
  padding:2.4rem 1.4rem;text-align:center;color:var(--dim);font-size:.85rem;
}
.empty h3{color:var(--fg);font-size:1rem;margin-bottom:.5rem}
.empty p{margin:0 auto;max-width:44ch;line-height:1.7}

.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1.4rem);
  background:var(--fg);color:var(--bg);padding:.6rem 1.1rem;border-radius:2px;
  font-size:.78rem;letter-spacing:.04em;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

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