/* ============================================================
   MY INVENTORY — styles
   Unknown Motion house look: dark by default, black + purple,
   lots of space, stillness with clean transitions.
   ============================================================ */

:root {
  --ground:      #0c0a12;
  --panel:       #15121e;
  --panel-2:     #1c1729;
  --panel-3:     #241e33;
  --ink:         #f2eff8;
  --ink-2:       #b7b1c8;
  --muted:       #7d7691;
  --line:        rgba(216, 208, 240, .13);
  --line-soft:   rgba(216, 208, 240, .07);
  --accent:      #a98cff;
  --accent-ink:  #14101f;
  --accent-soft: rgba(169, 140, 255, .14);
  --danger:      #ff6b7a;
  --danger-soft: rgba(255, 107, 122, .12);
  --ok:          #5ee0b0;

  /* The ground a cutout sits on. Its own token because it is the
     one surface the product image is judged against, and Scott
     wants it to follow the theme. */
  --cutout-bg:   #ffffff;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Light theme, when the device asks for it. Note the cutout ground
   FLIPS to a soft dark card — a white product on a white card is
   invisible, which is the whole reason this is a token. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #f6f4fa;
    --panel:       #ffffff;
    --panel-2:     #f1eef8;
    --panel-3:     #e8e3f4;
    --ink:         #16121f;
    --ink-2:       #4a4459;
    --muted:       #7d7691;
    --line:        rgba(30, 20, 60, .14);
    --line-soft:   rgba(30, 20, 60, .07);
    --accent:      #6d43e0;
    --accent-ink:  #ffffff;
    --accent-soft: rgba(109, 67, 224, .10);
    --cutout-bg:   #ffffff;
  }
}
:root[data-theme="light"] {
  --ground:      #f6f4fa;
  --panel:       #ffffff;
  --panel-2:     #f1eef8;
  --panel-3:     #e8e3f4;
  --ink:         #16121f;
  --ink-2:       #4a4459;
  --muted:       #7d7691;
  --line:        rgba(30, 20, 60, .14);
  --line-soft:   rgba(30, 20, 60, .07);
  --accent:      #6d43e0;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(109, 67, 224, .10);
  --cutout-bg:   #ffffff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Viewport lock: the page itself never scrolls or rubber-bands —
   only the inner panes do. House standard across every UM app. */
html, body {
  margin: 0; padding: 0;
  height: 100%; height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

#root { height: 100dvh; display: flex; flex-direction: column; min-height: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- app bar ---------- */

.bar {
  flex: 0 0 auto;
  padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 16px) 10px calc(var(--safe-l) + 16px);
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ground);
}
.bar h1 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 0; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }

.iconbtn {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scroll pane ---------- */

.pane {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(var(--safe-b) + 96px);
}

/* ---------- search ---------- */

.searchwrap { padding: 12px calc(var(--safe-r) + 16px) 4px calc(var(--safe-l) + 16px); }
.search {
  width: 100%; padding: 11px 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink);
  transition: border-color .16s var(--ease);
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: none; border-color: var(--accent); }

/* ---------- category rows ---------- */

.cat { margin: 18px 0 0; }
.cathead {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 calc(var(--safe-r) + 16px) 9px calc(var(--safe-l) + 16px);
}
.cathead .nm { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cathead .ct { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cathead .sp { flex: 1; }

/* Horizontal strip of cutouts — the shape from the reference:
   a row per category, scrolling sideways inside its own card. */
.strip {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 2px calc(var(--safe-r) + 16px) 2px calc(var(--safe-l) + 16px);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

.tile {
  flex: 0 0 auto; width: 116px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .14s var(--ease);
}
.tile:active { transform: scale(.96); }
.tile .shot {
  width: 116px; height: 116px;
  border-radius: var(--r); overflow: hidden;
  background: var(--cutout-bg);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center;
  position: relative;
}
.tile .shot img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.tile .nm {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-align: left;
}

/* grid mode — same data, denser */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px; padding: 14px calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
}
.grid .tile, .grid .tile .shot { width: 100%; }
.grid .tile .shot { height: auto; aspect-ratio: 1; }

/* a tile whose cutout is still being computed */
.tile .shot.working::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(169,140,255,.22) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: sheen 1.3s linear infinite;
}
@keyframes sheen { from { background-position: 180% 0 } to { background-position: -80% 0 } }

/* ---------- FAB ---------- */

.fab {
  position: fixed; z-index: 40;
  right: calc(var(--safe-r) + 18px); bottom: calc(var(--safe-b) + 22px);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.fab:active { transform: scale(.9); }
.fab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- empty / loading ---------- */

.empty { padding: 64px 32px; text-align: center; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 14px; }
.empty h2 { font-size: 18px; color: var(--ink); margin: 0 0 6px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 30ch; font-size: 14.5px; line-height: 1.55; }

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- sheets / detail (nested views) ---------- */

#overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#overlay > * { pointer-events: auto; }

.view {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ground);
  display: flex; flex-direction: column;
  will-change: transform;
  animation: slidein .26s var(--ease);
}
@keyframes slidein { from { transform: translateX(100%) } to { transform: none } }

.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- detail ---------- */

.hero {
  margin: 14px calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
  background: var(--cutout-bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.hero img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }

.field { padding: 16px calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px); }
.field label {
  display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px; font-weight: 500;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink);
  transition: border-color .16s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.props { display: flex; flex-direction: column; gap: 8px; }
.prop { display: grid; grid-template-columns: 1fr 1.3fr 34px; gap: 8px; align-items: center; }
.prop input { padding: 9px 11px; }

.rowbtn {
  width: 100%; text-align: left;
  padding: 14px calc(var(--safe-r) + 16px) 14px calc(var(--safe-l) + 16px);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
  transition: background .14s var(--ease);
}
.rowbtn:active { background: var(--panel); }
.rowbtn.danger { color: var(--danger); }

/* ---------- dialog ---------- */

.dlg {
  position: fixed; z-index: 70; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 40px));
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: pop .2s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }
.dlg h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.dlg p { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.dlg .btns { display: flex; gap: 9px; }
.dlg button {
  flex: 1; padding: 11px; border-radius: var(--r-sm); font-weight: 600; font-size: 14.5px;
  background: var(--panel-3); color: var(--ink);
  transition: transform .12s var(--ease), filter .12s var(--ease);
}
.dlg button:active { transform: scale(.97); }
.dlg button.go { background: var(--accent); color: var(--accent-ink); }
.dlg button.bad { background: var(--danger); color: #fff; }

/* ---------- toast ---------- */

#toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(var(--safe-b) + 92px);
  transform: translateX(-50%) translateY(14px);
  background: var(--panel-3); color: var(--ink);
  border: 1px solid var(--line);
  padding: 11px 17px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  max-width: calc(100vw - 40px); text-align: center;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- auth ---------- */

.auth {
  height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 0 26px; max-width: 400px; margin: 0 auto; width: 100%;
}
.auth .logo { font-size: 30px; font-weight: 680; letter-spacing: -.03em; margin: 0 0 6px; }
.auth .tag { color: var(--muted); margin: 0 0 30px; font-size: 15px; }
.auth input {
  width: 100%; padding: 13px 15px; margin-bottom: 11px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink);
}
.auth input:focus { outline: none; border-color: var(--accent); }
.auth .go {
  width: 100%; padding: 13px; border-radius: var(--r);
  background: var(--accent); color: var(--accent-ink); font-weight: 650;
  margin-top: 6px; transition: transform .12s var(--ease);
}
.auth .go:active { transform: scale(.985); }
.auth .go[disabled] { opacity: .55; }
.auth .alt { margin-top: 16px; text-align: center; color: var(--muted); font-size: 14px; }
.auth .alt button { color: var(--accent); font-weight: 600; }
.auth .err { color: var(--danger); font-size: 14px; margin: 4px 0 0; min-height: 20px; }

/* ---------- progress (cutout) ---------- */

.prog { padding: 20px calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px); }
.prog .track { height: 4px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.prog .fill { height: 100%; background: var(--accent); width: 0; transition: width .3s var(--ease); }
.prog .lbl { font-size: 13px; color: var(--muted); margin-top: 9px; display: flex; gap: 8px; align-items: center; }

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