/* ============================================================
   STOCK PAGE CHROME
   ------------------------------------------------------------
   The thin wrapper around a `stock.html` "before" page: the demo
   bar, the heading, the afterword and the footer. Deliberately
   ONE file shared by all three demos rather than a copy in each,
   for the same reason the catalogue is one file: three copies is
   three chances for the before pages to stop being comparable to
   each other.

   It styles the page around the storefront and nothing inside it.
   Everything from `.tbx` down belongs to stock-storefront.js and
   is left alone here, because the whole claim of that renderer is
   that it is Tebex's default rather than our opinion of it. A
   restyle from this file would quietly make it ours.

   Palette is the one from demos/rescue/, which is the existing
   before-and-after page. Same vocabulary, same colours, so a
   visitor who has seen one recognises the other.
   ============================================================ */

:root{
  --ground:#07090C; --surface:#111820; --line:#242E3A;
  --accent:#E8B863; --accent-dim:#6B5227;
  --text:#EDE7DF; --mute:#8A93A0; --faint:#727B85;
  --display: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--display);
     -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--accent)}

.skip{position:fixed;top:0;left:0;z-index:200;padding:.7rem 1.1rem;background:#E8B863;
  color:#0A0A0A;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;transform:translateY(-120%)}
.skip:focus{transform:translateY(0)}

.demo-bar{margin:0;padding:.8rem var(--gutter);background:#2A1D08;
  border-bottom:1px solid var(--accent-dim);color:#F0DCB4;
  font-family:var(--mono);font-size:.7rem;line-height:1.65}

main{display:block;max-width:1000px;margin:0 auto;padding:0 var(--gutter)}

.page-head{padding:clamp(2.2rem,6vw,3.6rem) 0 clamp(1.4rem,4vw,2rem)}
.eyebrow{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.page-head h1{margin:.6rem 0 .8rem;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.08;
  letter-spacing:-.03em;max-width:22ch}
.lede{margin:0;max-width:64ch;color:var(--mute);font-size:1.02rem}

/* The storefront sits in a frame so it reads as a thing being shown rather
   than as this page's own design. It is not a browser chrome mock: nothing
   here pretends to be a screenshot. */
#stock{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:clamp(2rem,5vw,3rem)}

.afterword{border-top:1px solid var(--line);padding:clamp(1.8rem,5vw,2.8rem) 0}
.afterword h2{margin:0 0 .9rem;font-size:1.28rem;letter-spacing:-.02em}
.afterword p{max-width:66ch;color:var(--mute);margin:0 0 .9rem}

.page-foot{padding:2rem var(--gutter) 3.2rem;max-width:1000px;margin:0 auto;
  border-top:1px solid var(--line);color:var(--faint);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;line-height:1.9}

/* ---------- bare mode ----------
   `stock.html?bare=1`, which is how the comparison page frames this. The
   wrapper's job is to explain the storefront to somebody who opened it on its
   own; inside a frame that is already explained, it just pushes the thing
   being shown off the bottom of the pane.

   Only this page's own chrome is hidden. Nothing inside the storefront is
   touched, and in particular the provenance line is rendered BY the storefront
   rather than by this page, so it survives bare mode. A framing mode that
   could drop "not a screenshot of any real server's store" would be worth
   more than it costs, which is why it cannot. */
body.bare .demo-bar,
body.bare .page-head,
body.bare .afterword,
body.bare .page-foot{display:none}
body.bare main{max-width:none;padding:0}
body.bare #stock{border:0;border-radius:0;margin:0}

/* Shown only when the module wanted live data and did not get it. Hidden by
   default rather than absent, so the page cannot render the fallback list
   under a claim that it came from a real store. */
.degraded{display:none;border:1px solid #5C2626;background:#2B0F0F;color:#F2CFCF;
  border-radius:10px;padding:.9rem 1.05rem;margin-bottom:1.2rem;font-size:.9rem;line-height:1.6}
.degraded.on{display:block}
.degraded strong{color:#FF9A9A}