/* DBX ONE STOCKROOM v0.7.9 — clearer consumable hierarchy + compact count slider.
   Product names are now the dominant element in the exact-quantities view, while
   the inline count control uses substantially less vertical space, especially on mobile. */

.stock-demo-page .demo-consumable-copy>strong{
  font-size:15px;
  line-height:1.2;
  letter-spacing:-.015em;
}
.stock-demo-page .demo-consumable-copy>small{
  margin-top:4px;
  font-size:10.5px;
  line-height:1.35;
}
.stock-demo-page .demo-consumable-state{
  font-size:9.5px;
}

/* Keep the slider useful, but stop it visually dominating each consumable. */
.stock-demo-page .demo-inline-stock-controls{gap:7px}
.stock-demo-page .demo-inline-count{
  padding:7px 10px 5px;
  border-radius:11px;
}
.stock-demo-page .demo-inline-count-head span{
  font-size:8px;
  letter-spacing:.075em;
}
.stock-demo-page .demo-inline-count-head strong{font-size:10px}
.stock-demo-page .demo-inline-count input[type=range]{
  height:22px;
  margin:1px 0 0;
}
.stock-demo-page .demo-inline-count input[type=range]::-webkit-slider-runnable-track{
  height:5px;
}
.stock-demo-page .demo-inline-count input[type=range]::-webkit-slider-thumb{
  width:18px;
  height:18px;
  margin-top:-6.5px;
  border-width:2.5px;
}
.stock-demo-page .demo-inline-count input[type=range]::-moz-range-track,
.stock-demo-page .demo-inline-count input[type=range]::-moz-range-progress{
  height:5px;
}
.stock-demo-page .demo-inline-count input[type=range]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-width:2.5px;
}
.stock-demo-page .demo-inline-count-scale{
  margin-top:-2px;
  font-size:7.5px;
}

@media(max-width:760px){
  .stock-demo-page .demo-consumable-row{
    padding:13px 12px!important;
    gap:9px!important;
  }
  .stock-demo-page .demo-consumable-copy>strong{
    margin-top:5px;
    font-size:17px;
    line-height:1.18;
    letter-spacing:-.02em;
  }
  .stock-demo-page .demo-consumable-copy>small{
    margin-top:5px;
    font-size:11px;
  }
  .stock-demo-page .demo-consumable-state{
    font-size:9.5px;
  }
  .stock-demo-page .demo-current-target strong{font-size:32px}
  .stock-demo-page .demo-current-target span{font-size:10.5px}
  .stock-demo-page .demo-inline-stock-controls{gap:6px}
  .stock-demo-page .demo-inline-count{
    padding:7px 10px 5px;
    border-radius:10px;
  }
  .stock-demo-page .demo-inline-count input[type=range]{height:24px}
  .stock-demo-page .demo-inline-count input[type=range]::-webkit-slider-thumb{
    width:20px;
    height:20px;
    margin-top:-7.5px;
  }
  .stock-demo-page .demo-inline-count input[type=range]::-moz-range-thumb{
    width:18px;
    height:18px;
  }
  .stock-demo-page .demo-inline-stock-controls .demo-replenish-button{
    min-height:42px;
    padding:8px 10px;
  }
}

@media(max-width:380px){
  .stock-demo-page .demo-consumable-copy>strong{font-size:16px}
  .stock-demo-page .demo-current-target strong{font-size:30px}
}

/* v0.8.0 — remove duplicate demo logo and tighten the hero so content starts higher. */
.stock-demo-shell{padding-top:30px!important}
.stock-demo-heading{padding-top:0!important;margin-bottom:20px!important}
.stock-demo-heading>div{max-width:760px!important}
.stock-demo-heading h1{margin-top:2px!important}
.stock-demo-heading .stock-demo-kicker{margin-bottom:8px!important}
.stock-demo-heading>div>p:last-child{margin-top:0!important}
@media(max-width:620px){
  .stock-demo-shell{padding-top:18px!important}
  .stock-demo-heading{margin-bottom:14px!important}
  .stock-demo-heading h1{margin-top:0!important}
}

/* v0.8.1 — app-like practice identity, quiet reset utility, secondary activity ledger. */
.stock-demo-heading{
  padding-inline:clamp(0px,6vw,82px)!important;
  margin-bottom:18px!important;
}
.stock-demo-heading>div.stock-demo-practice-identity{max-width:760px!important}
.stock-demo-heading .stock-demo-kicker{
  margin-bottom:6px!important;
  color:#65c2ff;
  font-size:10px;
  letter-spacing:.18em;
}
.stock-demo-heading h1{
  margin:0!important;
  font-size:clamp(36px,4.5vw,58px)!important;
  line-height:1.02!important;
}
.stock-demo-practice-status{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  max-width:none!important;
  margin:10px auto 0!important;
  color:#7f94a8!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.stock-demo-practice-status>span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--demo-green);
  box-shadow:0 0 0 3px rgba(53,211,151,.09);
}
.stock-demo-practice-status strong{color:#a9bac9;font-weight:750}
.stock-demo-practice-status i{color:#4e6274;font-style:normal}

.stock-demo-heading .demo-reset{
  top:12px!important;
  right:0!important;
  transform:none!important;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:6px 9px!important;
  border-color:rgba(255,255,255,.07)!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#6f8599!important;
  font-size:10px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.stock-demo-heading .demo-reset:hover{
  border-color:rgba(94,191,255,.22)!important;
  color:#a6cce6!important;
  background:rgba(20,45,67,.28)!important;
}
.stock-demo-heading .demo-reset span{font-size:13px;line-height:1}

/* Recent movements should read as audit context, not a competing dashboard module. */
.stock-demo-page .demo-activity-panel{
  margin-top:28px!important;
  padding:16px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.stock-demo-page .demo-activity-panel .demo-section-line{margin-bottom:8px!important}
.stock-demo-page .demo-activity-panel .stock-demo-kicker{
  color:#68839a!important;
  font-size:8.5px!important;
}
.stock-demo-page .demo-activity-panel h2{
  margin-top:2px!important;
  color:#aebdca!important;
  font-size:17px!important;
  letter-spacing:-.02em!important;
}
.stock-demo-page .demo-live-pill{
  padding:4px 7px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  background:transparent!important;
  color:#60778b!important;
  font-size:8px!important;
  font-weight:700!important;
}
.stock-demo-page .demo-activity-list{gap:0!important}
.stock-demo-page .demo-activity-row{
  min-width:0;
  padding:10px 10px!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:transparent!important;
}
.stock-demo-page .demo-activity-row:first-child{border-left:0!important;padding-left:0!important}
.stock-demo-page .demo-activity-row strong{
  color:#aebdca!important;
  font-size:10.5px!important;
  font-weight:700!important;
}
.stock-demo-page .demo-activity-row span{
  margin-top:2px!important;
  color:#596f82!important;
  font-size:9px!important;
}
.stock-demo-page .demo-activity-row>i{
  width:6px!important;
  height:6px!important;
  margin-top:4px!important;
  opacity:.8;
}
.stock-demo-page .demo-explainer{
  margin-top:18px!important;
  color:#596f82!important;
  font-size:10.5px!important;
}

@media(max-width:900px){
  .stock-demo-page .demo-activity-row{
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.05)!important;
    padding-left:0!important;
  }
  .stock-demo-page .demo-activity-row:first-child{border-top:0!important}
}

@media(max-width:620px){
  .stock-demo-heading{padding-inline:0!important;margin-bottom:12px!important}
  .stock-demo-heading h1{font-size:31px!important}
  .stock-demo-practice-status{
    gap:5px;
    margin-top:8px!important;
    padding-inline:24px;
    font-size:10.5px!important;
  }
  .stock-demo-practice-status>span{width:6px;height:6px}
  .stock-demo-heading .demo-reset{
    position:static!important;
    margin:9px auto 0!important;
    min-height:28px;
    padding:4px 7px!important;
    font-size:9px!important;
  }
  .stock-demo-page .demo-activity-panel{margin-top:22px!important;padding-top:12px!important}
  .stock-demo-page .demo-activity-panel h2{font-size:15px!important}
  .stock-demo-page .demo-activity-row{padding:8px 0!important}
  .stock-demo-page .demo-explainer{margin-top:14px!important}
}