/* ==========================================================================
   Shared module S1 · how an auction turns bids into a price.

   Loaded after academy.css and inherits every variable from it. No new colour
   is introduced. Three semantic states, and they carry the whole lesson:

     .you        your own offer, which is the only bar the reader controls
     .sent       what a bidding system actually submitted on your behalf
     .dead       a rival that did not clear the seller's minimum, so it is not
                 in the auction and cannot set anybody's price

   The floor is drawn as a line across the bars rather than as another bar,
   because it is not a competitor. It is the seller standing in the market.
   ========================================================================== */

/* ------------------------------------------------------ the four systems */
.sh1-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.sh1-tabs .btn{font-size:13px}
.sh1-tabs .btn.on{background:var(--bg-5);border-color:var(--line-2);color:var(--ink);font-weight:600}
.sh1-frame{margin:0 0 16px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.sh1-frame b{color:var(--ink)}

/* ------------------------------------------------------------- controls */
.sh1-ctl{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-bottom:16px;
  font-family:var(--ui);font-size:13px;color:var(--ink-3)}
.sh1-rule{display:flex;gap:0;flex:none}
.sh1-rule .btn{font-size:13px;border-radius:0}
.sh1-rule .btn:first-child{border-radius:8px 0 0 8px}
.sh1-rule .btn:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.sh1-rule .btn.on{background:var(--bg-5);border-color:var(--line-2);color:var(--ink);font-weight:600}
.sh1-l{display:flex;flex-direction:column;gap:4px}
.sh1-l input[type=range]{width:150px}
.sh1-l .sh1-v,.sh1-l .sh1-f{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sh1-chk{display:flex;gap:8px;align-items:center;cursor:pointer}

/* ---------------------------------------------------------- the auction */
.sh1-board{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;position:relative}
.sh1-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr 66px;gap:10px;align-items:center;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.sh1-rl{line-height:1.35}
.sh1-rb{height:9px;border-radius:5px;background:var(--bg-4);overflow:hidden}
.sh1-rb i{display:block;height:100%;border-radius:5px;background:var(--ink-4);
  transition:width .14s ease-out}
.sh1-rv{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}

.sh1-row.you .sh1-rl{color:var(--ink);font-weight:600}
.sh1-row.you .sh1-rb i{background:var(--accent-deep)}
.sh1-row.you.sent .sh1-rl{font-weight:400;color:var(--ink-3)}
.sh1-row.you.sent .sh1-rb i{background:var(--accent-deep);opacity:.55}
.sh1-row.dead{opacity:.42}
.sh1-row.dead .sh1-rb i{background:var(--ink-4);opacity:.5}

.sh1-floorline{margin-top:4px;border-top:1px dashed var(--warn);padding-top:6px;
  font-family:var(--ui);font-size:12px;color:var(--warn)}

/* -------------------------------------------------------- the readouts */
.sh1-out{margin-bottom:14px}
.sh1-out .v.small{font-family:var(--ui);font-size:15px;line-height:1.3;font-weight:600}

/* ------------------------------------------------------- the running note */
.sh1-note{font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sh1-note p{margin:0}
.sh1-note b{color:var(--ink)}

/* Under a first price rule the reader's own bar IS the price, so it stops
   being one input among several and is drawn as the answer. */
.firstprice .sh1-row.you .sh1-rb i{background:var(--warn)}
.firstprice .sh1-floorline{color:var(--ink-4);border-top-color:var(--line-2)}

@media (max-width:640px){
  .sh1-row{grid-template-columns:1fr 58px;row-gap:4px}
  .sh1-rl{grid-column:1 / -1}
  .sh1-l input[type=range]{width:130px}
}