/* Inventory page scenes. The frame (chapters, photo stages, dashboard windows, chat) comes from the Orders
   page's orders.css + orders-site.css: the page root carries both `.ordp` and `.invp`. Everything here is
   scoped under `.invp`, so nothing leaks back into the Orders page. Light-only, like Orders. */

.invp {
  --s-av: #15803d;
  --s-av-bg: #e3f6ea;
  --s-rs: #2563eb;
  --s-rs-bg: #e6eeff;
  --s-un: #c2413a;
  --s-un-bg: #fbe5e3;
  --s-in: #b45309;
  --s-in-bg: #fff3dc;
}

.invp .flashn {
  animation: invp-n 0.9s;
}
@keyframes invp-n {
  30% {
    background: #f1ebff;
    color: var(--vio);
  }
}

/* ---------- X-RAY ---------- */
.invp .xr {
  background: var(--white);
  border-radius: 26px;
  border: 1px solid #e7e3dc;
  padding: clamp(20px, 3.4vw, 44px);
  display: grid;
  gap: 22px;
  box-shadow: 0 40px 80px -50px rgba(30, 20, 5, 0.45);
}
.invp .xr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.invp .xr-k {
  color: var(--muted);
  font-size: 15px;
}
.invp .xr-n {
  font-size: clamp(72px, 11vw, 148px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-top: 6px;
}
.invp .xr-c {
  color: var(--ink-2);
  font-size: 16px;
}
.invp .xr-sku {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 10px;
}
.invp .xr-bar {
  display: flex;
  gap: 4px;
  height: 84px;
}
.invp .seg {
  border-radius: 14px;
  min-width: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition:
    flex-grow 0.9s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.5s;
}
.invp .seg b {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.invp .seg span {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invp .s1 {
  background: var(--s-av-bg);
  color: var(--s-av);
}
.invp .s2 {
  background: var(--s-rs-bg);
  color: var(--s-rs);
}
.invp .s3 {
  background: var(--s-un-bg);
  color: var(--s-un);
}
.invp .s4 {
  background: repeating-linear-gradient(-45deg, var(--s-in-bg) 0 10px, #fffaf0 10px 18px);
  color: var(--s-in);
  outline: 1.5px dashed #e7b66a;
  outline-offset: -1.5px;
}
.invp .xr.split0 .xr-bar .seg {
  flex-grow: 1 !important;
}
.invp .xr.split0 .s2,
.invp .xr.split0 .s3 {
  flex-grow: 0 !important;
  padding-inline: 0;
  opacity: 0;
}
.invp .xr.split0 .s1 {
  background: #efedf3;
  color: var(--ink);
}
.invp .xr-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.invp .xr-legend div {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
}
.invp .xr-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 4px;
  grid-row: span 2;
}
.invp .xr-legend b {
  font-size: 15px;
  font-weight: 600;
}
.invp .xr-legend span {
  font-size: 14px;
  color: var(--muted);
}
.invp .xr-inc .seg {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.invp .xr-inc .seg b {
  font-size: 18px;
}
.invp .xr.split0 .xr-inc .seg {
  opacity: 0;
  transform: translateY(8px);
}
@media (max-width: 860px) {
  .invp .xr-legend {
    grid-template-columns: 1fr 1fr;
  }
  .invp .xr-bar {
    height: 70px;
  }
  .invp .seg b {
    font-size: 19px;
  }
  .invp .seg span {
    display: none;
  }
}

/* ---------- VARIANTS ---------- */
.invp .vg {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 20px;
  align-items: center;
}
.invp .vh {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
}
.invp .vr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding-inline-end: 6px;
  white-space: nowrap;
}
.invp .vr i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.invp .vc {
  border: 1px solid var(--bd);
  border-radius: 10px;
  text-align: center;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  transition: all 0.35s;
}
.invp .vc.lo {
  background: var(--warn-bg);
  border-color: var(--warn-bd);
  color: var(--warn);
}
.invp .vc.edit {
  border-color: var(--vio);
  box-shadow: 0 0 0 3px var(--vio-bg);
}
.invp .vc.ok {
  background: var(--ok-bg);
  border-color: var(--ok-bd);
  color: var(--ok);
}

/* ---------- WAREHOUSES ---------- */
.invp .whs {
  padding: 14px 20px;
  display: grid;
  gap: 8px;
}
.invp .wh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px 14px;
  transition: background 0.4s;
}
.invp .wh > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invp .wh b {
  font-weight: 500;
}
.invp .whn {
  font-size: 20px;
  font-weight: 600;
}
.invp .wh.hl {
  background: #f8f5ff;
}
.invp .trn {
  margin: 0 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed #e7b66a;
  background: #fffaf0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
}
.invp .trn .mono {
  color: var(--t2);
  font-size: 12px;
}
.invp .trn .st {
  margin-inline-start: auto;
}

/* ---------- PURCHASE ORDER ---------- */
.invp .pol {
  padding: 14px 20px;
  display: grid;
  gap: 4px;
}
.invp .pl-h,
.invp .pl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px 64px;
  gap: 8px;
  align-items: center;
  padding: 9px 4px;
}
.invp .pl-h {
  font-size: 12px;
  color: var(--t2);
  border-bottom: 1px solid var(--bd);
}
.invp .pl {
  border-bottom: 1px solid #f3f2f7;
}
.invp .pl span:not(:first-child),
.invp .pl-h span:not(:first-child) {
  text-align: end;
}
.invp .pl.tot {
  border-bottom: 0;
  font-weight: 600;
}
.invp .pl .rcv {
  color: var(--ok);
  font-weight: 600;
}
.invp .incard,
.invp .mailc {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(20, 16, 40, 0.5);
  padding: 14px 18px;
  transition:
    opacity 0.5s,
    transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.invp .incard {
  inset-inline-start: 24px;
  bottom: 24px;
  display: grid;
  min-width: 150px;
}
.invp .incard small {
  color: var(--t2);
  font-size: 12px;
}
.invp .incard b {
  font-size: 34px;
  font-weight: 700;
  color: var(--s-in);
}

/* ---------- ALERTS ---------- */
.invp .lad {
  padding: 16px 20px 6px;
  display: grid;
  gap: 12px;
}
.invp .lr {
  display: grid;
  grid-template-columns: 76px 1fr 96px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  border-radius: 10px;
  padding: 6px 8px;
}
.invp .lr i {
  height: 8px;
  border-radius: 4px;
  background: #f0eef5;
  overflow: hidden;
}
.invp .lr em {
  display: block;
  height: 100%;
  background: #cfc7e6;
  border-radius: 4px;
}
.invp .lr b {
  text-align: end;
  font-weight: 600;
}
.invp .lr b.dim {
  color: var(--t2);
  font-weight: 400;
  font-size: 12px;
}
.invp .lr.on {
  background: var(--vio-bg);
}
.invp .lr.on em {
  background: var(--vio);
}
.invp .alrow {
  margin: 8px 20px 18px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.invp .al-av {
  font-size: 20px;
  font-weight: 600;
}
.invp .mailc {
  inset-inline-end: 24px;
  top: 24px;
  width: min(300px, calc(100% - 48px));
  font-size: 13.5px;
  color: var(--t1);
}
.invp .mailc.off {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}
.invp .mailc .mh {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.invp .mailc .mh img,
.invp .mailc .shopic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.invp .mailc .shopic {
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
}
.invp .mailc .mh b {
  display: block;
  font-size: 14px;
}
.invp .mailc .mh small {
  color: var(--t2);
  font-size: 12px;
}
.invp .mailc p b {
  color: var(--warn);
}

/* ---------- CHANNELS ---------- */
.invp .chn {
  background: var(--white);
  border-radius: 26px;
  border: 1px solid #e7e3dc;
  padding: clamp(20px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px 32px;
  align-items: center;
  box-shadow: 0 40px 80px -50px rgba(30, 20, 5, 0.45);
}
.invp .pool {
  display: grid;
}
.invp .pool small {
  color: var(--muted);
  font-size: 14px;
}
.invp .pool b {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.invp .chs {
  display: grid;
  gap: 16px;
}
.invp .chrow {
  display: grid;
  grid-template-columns: 170px 1fr 120px;
  gap: 16px;
  align-items: center;
}
.invp .chname {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.invp .chbar {
  position: relative;
  height: 34px;
  border-radius: 10px;
  background: #f0eef5;
  overflow: hidden;
}
.invp .chbar .fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: #3a4a6e;
  transition: width 0.25s ease-out;
}
.invp .chbar .prot {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(118, 72, 206, 0.85) 0 8px,
    rgba(139, 92, 246, 0.6) 8px 14px
  );
}
.invp .chv {
  font-size: 14px;
  font-weight: 500;
  text-align: end;
}
.invp .chnote {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 15px;
  min-height: 1.6em;
}
@media (max-width: 860px) {
  .invp .chn {
    grid-template-columns: 1fr;
  }
  .invp .chnote {
    grid-column: 1;
  }
  .invp .chrow {
    grid-template-columns: 1fr auto;
  }
  .invp .chbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .invp .pool b {
    font-size: 56px;
  }
}

/* ---------- KITS ---------- */
.invp .kit {
  padding: 16px 20px 20px;
  display: grid;
  gap: 8px;
}
.invp .kc {
  display: grid;
  grid-template-columns: 1fr 44px 56px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  transition: all 0.4s;
}
.invp .kc b {
  text-align: end;
  font-size: 17px;
}
.invp .kc span.num {
  color: var(--t2);
}
.invp .kc.lim {
  border-color: var(--warn-bd);
  background: var(--warn-bg);
}
.invp .kc.lim b {
  color: var(--warn);
}
.invp .kres {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--vio-bg);
  border-radius: 14px;
  padding: 12px 16px;
}
.invp .kres b {
  font-size: 38px;
  font-weight: 800;
  color: var(--vio);
  line-height: 1;
}

/* ---------- WAITLIST ---------- */
.invp .wl-b {
  padding: 16px 20px 20px;
  display: grid;
  gap: 14px;
}
.invp .wl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.invp .wl-stats div {
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 8px 12px;
  display: grid;
}
.invp .wl-stats small {
  color: var(--t2);
  font-size: 11.5px;
}
.invp .wl-stats b {
  font-size: 24px;
  font-weight: 700;
}
.invp .wl-stats b.vio {
  color: var(--vio);
}
.invp .hold {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t2);
}
.invp .hold i {
  height: 6px;
  border-radius: 3px;
  background: #f0eef5;
  overflow: hidden;
}
.invp .hold em {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vio);
}
.invp .dots {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 5px;
}
.invp .dots b {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6e3ee;
  transition:
    background 0.3s,
    transform 0.3s;
}
.invp .dots b.mail {
  background: var(--vio);
  transform: scale(1.3);
}
.invp .wlmail {
  top: auto;
  bottom: 24px;
}
.invp .wlmail p {
  margin: 0;
}

/* ---------- JOURNAL ---------- */
.invp .jr .tw {
  border: 0;
}
.invp .jr .tbl {
  border: 0;
  border-radius: 0;
  table-layout: auto;
}
.invp .jr .tbl td {
  font-size: 13px;
}
.invp .jr .pos {
  color: var(--ok);
  font-weight: 600;
}
.invp .jr .neg {
  color: var(--bad);
  font-weight: 600;
}
.invp .jr tbody tr {
  animation: ordp-rowin 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.invp .jr tbody tr:first-child td {
  background: #f7f3ff;
}
.invp .jr .tw {
  min-height: 300px;
}

/* ---------- REPORTS ---------- */
.invp .rps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.invp .rp {
  background: var(--white);
  border-radius: 22px;
  border: 1px solid #e7e3dc;
  padding: 22px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.invp .rp small {
  color: var(--muted);
  font-size: 14px;
}
.invp .rp b {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.invp .rp span {
  color: var(--ink-2);
  font-size: 14px;
}
@media (max-width: 980px) {
  .invp .rps {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- BRIDGE ---------- */
.invp .bridge {
  background: var(--ink);
  color: #fff;
  border-radius: 32px;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.invp .bridge::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--grad);
}
.invp .bridge h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.invp .bridge h2 .lt {
  font-weight: 300;
  color: #c9c3ff;
}
.invp .bridge p {
  margin-top: 16px;
  color: #c9cee0;
  font-size: 18px;
  max-width: 34em;
}
.invp .bridge-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.invp .bridge .btn-ink {
  background: #fff;
  color: var(--ink);
}
.invp .bridge .btn-line {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 860px) {
  .invp .bridge {
    grid-template-columns: 1fr;
  }
}

/* phones */
@media (max-width: 640px) {
  .invp .xr-legend {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .invp .vg {
    padding: 14px;
    gap: 6px;
  }
  .invp .vc {
    padding: 9px 2px;
    font-size: 14px;
  }
  .invp .pl-h,
  .invp .pl {
    grid-template-columns: minmax(0, 1fr) 40px 44px 52px;
    font-size: 12.5px;
  }
  .invp .lr {
    grid-template-columns: 64px 1fr 84px;
  }
  .invp .mailc {
    inset-inline-end: 12px;
    top: 12px;
    width: min(250px, calc(100% - 24px));
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .invp .wlmail {
    top: auto;
    bottom: 12px;
  }
  .invp .incard {
    inset-inline-start: 12px;
    bottom: 12px;
    padding: 10px 14px;
  }
  .invp .incard b {
    font-size: 26px;
  }
  .invp .rp {
    padding: 16px;
    border-radius: 18px;
  }
  .invp .rp span {
    font-size: 12.5px;
  }
  .invp .dots {
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invp * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- SECTION RHYTHM ----------
   The Orders frame stacks every chapter as a solid sheet with rounded top corners over the one before it.
   Here the sheets run white, cream, navy, three at a time, so the page breathes from light to dark and back:
   the dark film, then a white sheet over it, and a navy sheet every third chapter. The navy chapters are the
   ones whose demos sit in white panels (warehouses, channels, the stock journal, the AI chat). */
.ordp.invp #xray,
.ordp.invp #suppliers,
.ordp.invp #kits,
.ordp.invp #reports,
.ordp.invp #bridge {
  background: #ffffff !important;
}
.ordp.invp #variants,
.ordp.invp #alerts,
.ordp.invp #waitlist,
.ordp.invp #more {
  background: #f6f3ee !important;
}
.ordp.invp #warehouses,
.ordp.invp #channels,
.ordp.invp #journal,
.ordp.invp #ai {
  background: #0f1830 !important;
}
.ordp.invp #warehouses .ch-head h2,
.ordp.invp #channels .ch-head h2,
.ordp.invp #journal .ch-head h2 {
  color: #fff;
}
.ordp.invp #warehouses .ch-head p,
.ordp.invp #channels .ch-head p,
.ordp.invp #journal .ch-head p {
  color: #b9c1d9;
}
/* the first sheet rises over the bottom of the film */
.ordp.invp #xray {
  z-index: 1;
}

/* The inventory page's opening: one screen tall. The stockroom film fills it, and each moment's screen comes out
   of the device in the shot (a tablet, a box, a label, the laptop), hangs beside it, and folds back into it.
   Every class here carries the `if-` prefix so nothing collides with the Orders frame (.ordp) around it. */

.invp .if-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #6b5a48;
}
/* the poster sits behind the film until its first frame; a CSS background, so a phone never fetches it */
@media (min-width: 761px) and (min-aspect-ratio: 1251/1000) {
  .invp .if-hero {
    background: #6b5a48 url('/marketing/inventory/inventory-hero-poster.webp') 28% 50% / cover
      no-repeat;
  }
}
.invp .if-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
}
/* a phone gets no film: one still of Noa at her laptop (see STILL_POS_X in inventory-film-engine.ts) */
.invp .if-still {
  display: none;
}
/* the headline: vertically centred on the soft side of the film (always the physical right of the frame) */
.invp .if-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    270deg,
    rgba(28, 18, 8, 0.5),
    rgba(28, 18, 8, 0.18) 36%,
    transparent 55%
  );
}
.invp .if-copy {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 4vw, 72px);
  top: 50%;
  transform: translateY(-50%);
  width: min(34%, 540px);
  color: #fff;
  text-shadow: 0 2px 22px rgba(25, 16, 6, 0.45);
}
.invp .if-copy h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.invp .if-copy h1 span {
  display: block;
  font-weight: 300;
}
.invp .if-copy p {
  margin: 18px 0 26px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.invp .if-copy .btn {
  background: #fff;
  color: var(--ink);
  text-shadow: none;
}
/* Phones and portrait tablets (the film would crop to a sliver): the still fills the top of the screen with the screens coming out of the laptop, and the headline
   sits under it on the stockroom's own dark, so it never covers a face. */
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  .invp .if-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #1b140f;
  }
  .invp .if-hero video {
    display: none;
  }
  .invp .if-still {
    display: block;
    position: relative;
    width: 100%;
    height: 60svh;
    min-height: 340px;
    object-fit: cover;
    object-position: 45% 50%;
  }
  .invp .if-shade {
    inset: 0 0 auto;
    height: max(60svh, 340px);
    background: linear-gradient(
      180deg,
      rgba(27, 20, 15, 0.45) 0,
      transparent 22%,
      transparent 72%,
      #1b140f 100%
    );
  }
  .invp .if-copy {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 72px
      max(20px, env(safe-area-inset-left, 0px));
    text-shadow: none;
  }
  .invp .if-copy p {
    margin: 10px 0 18px;
  }
}

.invp .if-fly {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  direction: ltr;
}
.invp .if-scr {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  opacity: 0;
}

/* a card is designed in film pixels (the film is 1920x1080) and scaled with it */
.invp .if-card {
  position: relative;
  width: 440px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  padding: 18px 20px;
  font-family: Rubik, system-ui, sans-serif;
  color: #1b1d2a;
  font-size: 16px;
  line-height: 1.45;
  box-shadow:
    0 40px 80px -24px rgba(20, 12, 4, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(20, 16, 40, 0.05);
  display: grid;
  gap: 12px;
}
.invp .if-card.if-mini {
  width: 580px;
  gap: 10px;
}
/* the screen leaves the device as one bright slide; its content shows through as it lands */
.invp .if-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 20px;
  background: linear-gradient(160deg, #fff, #f4f0fb);
  pointer-events: none;
}
.invp .if-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 17px;
}
.invp .if-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f3eeff;
  color: #7648ce;
  flex: none;
}
.invp .if-ic svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.invp .if-ic.g {
  background: #e9f8ef;
  color: #15803d;
}
.invp .if-ic.b {
  background: #eef4ff;
  color: #2563eb;
}
.invp .if-no {
  margin-inline-start: auto;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  color: #6b6e7e;
  direction: ltr;
}
.invp .if-ln {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #efedf4;
  border-radius: 14px;
  padding: 10px 12px;
}
.invp .if-th {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d9d2c6, #b3a692);
  flex: none;
}
.invp .if-th.w {
  background: linear-gradient(135deg, #f6f3ec, #ddd6c8);
}
.invp .if-ln small {
  display: block;
  color: #6b6e7e;
  font-size: 13.5px;
}
.invp .if-q {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: #55586a;
  white-space: nowrap;
}
.invp .if-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b6e7e;
}
.invp .if-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #efedf4;
  border-radius: 14px;
  overflow: hidden;
}
.invp .if-nums > div {
  padding: 8px 12px;
  display: grid;
  gap: 1px;
  border-inline-start: 1px solid #efedf4;
}
.invp .if-nums > div:first-child {
  border-inline-start: 0;
}
.invp .if-nums span {
  font-size: 12.5px;
  color: #6b6e7e;
}
.invp .if-nums b {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.invp .if-chip {
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  padding: 1px 10px;
  border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
}
.invp .if-chip.ok {
  background: #ecfdf3;
  color: #15803d;
  border-color: #c6f0d6;
}
.invp .if-chip.warn {
  background: #fff7e8;
  color: #b45309;
  border-color: #fbddb0;
}
.invp .if-chip.blue {
  background: #eef4ff;
  color: #2563eb;
  border-color: #d6e4ff;
}
.invp .if-chip.vio {
  background: #f3eeff;
  color: #7648ce;
  border-color: #e4d8fb;
}
.invp .if-chip.if-pop {
  animation: if-cpop 0.6s cubic-bezier(0.2, 1.6, 0.35, 1);
}
@keyframes if-cpop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.invp .if-fl {
  animation: if-fl 1.2s;
}
@keyframes if-fl {
  25% {
    background: #ede4ff;
    color: #7648ce;
  }
}
.invp .if-rbtn {
  margin-inline-start: auto;
  background: linear-gradient(180deg, #8b5cf6, #7648ce);
  color: #fff;
  border-radius: 10px;
  padding: 6px 18px;
  font-weight: 600;
  font-size: 15px;
}
.invp .if-rbtn.if-press {
  animation: if-press 0.45s;
}
@keyframes if-press {
  40% {
    transform: scale(0.9);
    filter: brightness(1.15);
  }
}
.invp .if-rbtn.if-done {
  background: #16a34a;
}
.invp .if-qin {
  margin-inline-start: auto;
  border: 1px solid #e3e1ea;
  border-radius: 9px;
  padding: 2px 12px;
  min-width: 62px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}
.invp .if-focus {
  border-color: #7648ce;
  box-shadow: 0 0 0 3px #efe8ff;
}
.invp .if-trk {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  direction: ltr;
  color: #3c3f4f;
}
.invp .if-caret::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  background: #7648ce;
  margin-inline-start: 1px;
  vertical-align: -2px;
}

/* the slice of the inventory screen on the laptop */
.invp .if-srch {
  flex: 1;
  background: #fff;
  border: 1px solid #eceaf2;
  border-radius: 10px;
  padding: 7px 12px;
  color: #9a9cab;
  font-size: 14.5px;
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: center;
}
.invp .if-srch.if-focus {
  color: #1b1d2a;
}
.invp .if-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #eceaf2;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14.5px;
}
.invp .if-tbl th {
  background: #faf9fc;
  font-weight: 500;
  color: #6b6e7e;
  font-size: 13px;
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid #eceaf2;
  white-space: nowrap;
}
.invp .if-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f2f7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.invp .if-tbl tr:last-child td {
  border-bottom: 0;
}
.invp .if-tbl td small {
  color: #6b6e7e;
  font-weight: 400;
}
.invp .if-tbl tr.if-hot td {
  background: #f6f1ff;
}
.invp .if-inv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e9f8ef;
  color: #15803d;
  border-radius: 7px;
  padding: 1px 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.invp .if-st {
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 9px;
  border-radius: 7px;
  border: 1px solid;
}
.invp .if-st.ok {
  background: #ecfdf3;
  color: #15803d;
  border-color: #c6f0d6;
}
.invp .if-st.warn {
  background: #fff7e8;
  color: #b45309;
  border-color: #fbddb0;
}
.invp .if-st.bad {
  background: #fef1f0;
  color: #c2413a;
  border-color: #f8cfcb;
}
.invp .if-saved {
  display: flex;
  gap: 6px;
  align-items: center;
}
.invp .if-saved i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}
.invp .if-saved.if-busy i {
  background: #f59e0b;
}

@media (prefers-reduced-motion: reduce) {
  .invp .if-chip.if-pop,
  .invp .if-fl,
  .invp .if-rbtn.if-press {
    animation: none;
  }
}