/* ============================================================
   Practice sandbox (/practice): fake-data pages built to be scraped.
   Uses the site tokens from style.css; everything is prefixed .sbx.
   ============================================================ */

.sbx{max-width:1100px;margin:0 auto;min-width:0}
.sbx code{font-family:var(--fm)}

/* Fake-data notice on every page */
.sbx-fake{
  display:flex;gap:0.75rem;align-items:baseline;flex-wrap:wrap;
  margin:0 0 1.8rem;padding:0.7rem 1rem;font-size:0.8rem;line-height:1.6;
  border:1px solid rgba(255,209,102,0.35);border-radius:var(--radius);background:var(--yellow-dim);
}
.sbx-fake > span:last-child{flex:1 1 18rem;min-width:0;opacity:0.85}
.sbx-fake-tag{
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  color:var(--bg);background:var(--yellow);border-radius:3px;padding:0.05rem 0.45rem;white-space:nowrap;
}
.sbx-fake a{color:var(--yellow)}

.sbx-head{margin-bottom:1.8rem;display:flex;flex-direction:column;gap:0.5rem}
.sbx-head .page-subtitle{max-width:72ch}
.sbx-label{
  display:inline-block;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ac);opacity:0.9;margin-right:0.4rem;
}
.sbx-status{font-size:0.85rem;opacity:0.65;margin:0.5rem 0}

/* ---- Landing ---- */
.sbx-hero{margin-bottom:1.5rem}
.sbx-lede{opacity:0.75;max-width:70ch}
.sbx-intro{max-width:800px}
.sbx-intro h3{font-size:1rem}
.sbx-section{margin:2.75rem 0 1rem}
.sbx-h2{
  font-family:var(--fh);font-size:1.3rem;color:var(--white);font-weight:600;
  margin-bottom:1.1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--lc);
}
.sbx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;margin-bottom:2.5rem}
.sbx-ex{
  display:flex;flex-direction:column;gap:0.85rem;min-width:0;
  padding:1.4rem 1.5rem 1.2rem;border:1px solid var(--lc-strong);border-radius:var(--radius-lg);
  background:var(--surface);transition:border-color var(--transition);scroll-margin-top:calc(var(--header-h) + 1rem);
}
.sbx-ex:hover,.sbx-ex:target{border-color:var(--ac)}
.sbx-ex-head{display:flex;align-items:baseline;gap:0.7rem;min-width:0}
.sbx-ex-num{font-size:0.78rem;color:var(--ac);font-weight:600}
.sbx-ex-title{font-family:var(--fh);font-size:1.08rem;font-weight:400;color:var(--white);line-height:1.35;flex:1;min-width:0}
.sbx-ex-level{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;opacity:0.55;white-space:nowrap}
.sbx-ex-what{font-size:0.86rem;line-height:1.65;opacity:0.8}
.sbx-ex code,.sbx-intro code{
  font-size:0.82em;color:var(--ac);background:rgba(255,255,255,0.05);
  padding:0.1rem 0.35rem;border-radius:3px;overflow-wrap:anywhere;
}
.sbx-ex-start,.sbx-ex-creds,.sbx-ex-lessons{font-size:0.83rem;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.sbx-ex-start a{text-decoration:none}
.sbx-ex-start a:hover code{color:var(--white)}
.sbx-ex-hints ol{list-style:decimal;padding-left:1.3rem;margin-top:0.35rem;display:flex;flex-direction:column;gap:0.3rem}
.sbx-ex-hints li{font-size:0.83rem;line-height:1.6;opacity:0.82}
.sbx-ex-hints li::marker{color:var(--ac)}
.sbx-dot{margin:0 0.45rem;opacity:0.4}
.sbx-solution{border-top:1px solid var(--lc);padding-top:0.8rem;min-width:0}
.sbx-solution summary{
  cursor:pointer;font-size:0.8rem;color:var(--ac);letter-spacing:0.04em;list-style:none;
  display:flex;align-items:center;gap:0.5rem;user-select:none;
}
.sbx-solution summary::-webkit-details-marker{display:none}
.sbx-solution summary::before{content:"+";display:inline-block;width:1rem;text-align:center;font-weight:600}
.sbx-solution[open] summary::before{content:"\2212"}
.sbx-solution summary:hover{color:var(--white)}
.sbx-code-label{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.5;margin:1rem 0 0.35rem}
.sbx-solution pre{margin:0;padding:1rem 1.1rem}
.sbx-ex pre code{background:none;padding:0;border-radius:0;color:var(--tx);font-size:0.78rem;overflow-wrap:normal}
.sbx-solution pre code{font-size:0.78rem;white-space:pre;word-break:normal}
.sbx-solution .sbx-output code{white-space:pre-wrap;overflow-wrap:anywhere}
.sbx-output{border-color:var(--lc)}

/* ---- Exercise 1: catalogue ---- */
.sbx-shop{display:grid;grid-template-columns:180px minmax(0,1fr);gap:2rem;align-items:start}
.sbx-cats{display:block}
.sbx-cats ul{display:flex;flex-direction:column;gap:0.2rem;margin-top:0.5rem}
.sbx-cats a{
  display:flex;justify-content:space-between;gap:0.5rem;padding:0.4rem 0.7rem;border-radius:var(--radius);
  font-size:0.84rem;color:var(--tx);border:1px solid transparent;
}
.sbx-cats a:hover{color:var(--white);background:rgba(255,255,255,0.03)}
.sbx-cats a.is-active{background:var(--ac-dim);color:var(--ac);font-weight:600}
.sbx-cats a span{opacity:0.5;font-size:0.75rem}
.sbx-cats .sbx-label{font-size:0.68rem;font-weight:400}
.sbx-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.85rem;list-style:none}
.product{
  display:flex;flex-direction:column;gap:0.45rem;height:100%;padding:1rem 1.1rem;
  border:1px solid var(--lc-strong);border-radius:var(--radius-lg);background:var(--surface);
  transition:border-color var(--transition);
}
.product:hover{border-color:var(--ac)}
.product-name{font-family:var(--fh);font-size:0.98rem;font-weight:400;line-height:1.35}
.product-name a{color:var(--white)}
.product:hover .product-name a{color:var(--ac)}
.product-cat{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;opacity:0.5}
.rating{color:var(--yellow);font-size:0.9rem;letter-spacing:0.05em}
.rating-count{color:var(--tx);opacity:0.6;font-size:0.8rem;letter-spacing:0}
.product-foot{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem;margin-top:auto;padding-top:0.4rem}
.price{color:var(--white);font-weight:600}
.stock{font-size:0.75rem}
.in-stock{color:#5fd38d}
.out-of-stock{color:var(--red)}
.sbx-shop .pagination{flex-wrap:wrap;gap:0.6rem}
.sbx-shop .page-numbers{flex-wrap:wrap;justify-content:center}

/* Product detail */
.sbx-detail-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:2rem;align-items:start}
.sbx-detail-art{
  aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius-lg);
  border:1px solid var(--lc-strong);background:linear-gradient(140deg, var(--ac-dim), var(--surface) 70%);
}
.sbx-detail-art span{font-family:var(--fh);font-size:4.5rem;color:var(--ac);opacity:0.7}
.sbx-detail-info{display:flex;flex-direction:column;gap:0.75rem;min-width:0}
.sbx-detail-info .price{font-size:1.5rem}
.sbx-detail-info .description{line-height:1.75;opacity:0.85;max-width:62ch}
.sbx-specs{border-collapse:collapse;font-size:0.84rem;margin-top:0.5rem;max-width:420px}
.sbx-specs th,.sbx-specs td{padding:0.45rem 0.8rem;border-top:1px solid var(--lc);text-align:left}
.sbx-specs th{font-weight:400;opacity:0.6;width:7rem}
.sbx-specs td{color:var(--white);overflow-wrap:anywhere}
.sbx-prevnext{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;
  padding-top:1rem;border-top:1px solid var(--lc);font-size:0.82rem;
}
.sbx-prevnext a{min-width:0;overflow-wrap:anywhere;color:var(--ac)}
.sbx-prevnext a:hover{color:var(--white)}

/* ---- Exercises 2 and 3: JS-rendered lists ---- */
.sbx-app{max-width:800px;min-height:12rem}
.sbx-list{display:flex;flex-direction:column;gap:0.7rem}
.job,.post{
  padding:1rem 1.2rem;border:1px solid var(--lc-strong);border-radius:var(--radius-lg);background:var(--surface);
  display:flex;flex-direction:column;gap:0.25rem;min-width:0;overflow-wrap:anywhere;
}
.job-title{font-family:var(--fh);font-size:1rem;font-weight:400;color:var(--white)}
.job-company{color:var(--ac);font-size:0.85rem}
.job-meta,.post-meta{font-size:0.76rem;opacity:0.55}
.job-salary{font-size:0.85rem;color:var(--white)}
.post-author{color:var(--ac);font-size:0.82rem;font-weight:600}
.post-text{font-size:0.9rem;line-height:1.6}
.sbx-pageinfo{font-size:0.78rem;opacity:0.65}
.sbx-app .pagination{flex-wrap:wrap;margin-top:1.5rem}
button.page-btn{cursor:pointer}
button.page-btn:disabled{opacity:0.25;cursor:default;pointer-events:none}
.sbx-more{margin-top:1rem}
.sbx-sentinel{height:1px}

/* ---- Exercise 4: login ---- */
.sbx-login{max-width:420px}
.sbx-form{
  display:flex;flex-direction:column;gap:0.45rem;padding:1.4rem 1.5rem;
  border:1px solid var(--lc-strong);border-radius:var(--radius-lg);background:var(--surface);
}
.sbx-form label{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.65;margin-top:0.4rem}
.sbx-form input{
  width:100%;padding:0.6rem 0.8rem;border-radius:var(--radius);border:1px solid var(--lc-strong);
  background:var(--bg-alt);color:var(--white);font-family:var(--fm);font-size:0.9rem;outline:none;
  transition:border-color var(--transition);
}
.sbx-form input:focus{border-color:var(--ac)}
.sbx-form .btn{margin-top:1rem;justify-content:center}
.sbx-error,.sbx-ok{padding:0.7rem 1rem;border-radius:var(--radius);font-size:0.84rem;line-height:1.6;margin-bottom:1rem}
.sbx-error{background:var(--red-dim);border:1px solid rgba(255,107,107,0.4);color:var(--white)}
.sbx-ok{background:var(--ac-dim);border:1px solid rgba(107,138,255,0.35)}
.sbx-logout{margin-top:1.5rem}

/* ---- Exercise 6: tables ---- */
.sbx-tables{max-width:900px}
.sbx-tables h2:first-child{margin-top:0}
.sbx-tables caption{caption-side:bottom;text-align:left;font-size:0.75rem;opacity:0.55;padding:0.6rem 0.95rem}
.sbx-tables td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.sbx-tables td.brand{color:var(--ac);vertical-align:middle;border-right:1px solid rgba(212,212,214,0.08)}
.sbx-tables th[colspan]{text-align:center;border-bottom:1px solid rgba(107,138,255,0.25)}
.sbx-tables th[scope="row"]{
  color:var(--white);background:none;text-transform:none;letter-spacing:0;font-size:0.85rem;font-weight:400;
  border-bottom:0;border-top:1px solid rgba(212,212,214,0.08);
}
.sbx-tables tbody tr:first-child th[scope="row"]{border-top:0}
.sbx-tables tfoot td{font-size:0.76rem;opacity:0.6;border-top:1px solid var(--lc)}
.sbx-tables td.code{font-family:var(--fm);color:var(--ac)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .sbx-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .sbx-shop{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .sbx-cats ul{flex-direction:row;flex-wrap:wrap;gap:0.35rem}
  .sbx-cats a{border-color:var(--lc)}
  .sbx-detail-grid{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .sbx-detail-art{max-width:200px}
}
@media(max-width:480px){
  .sbx-ex{padding:1.1rem 1rem 1rem}
  .sbx-ex-head{flex-wrap:wrap}
  .sbx-products{grid-template-columns:minmax(0,1fr)}
  .sbx-solution pre{padding:0.85rem 0.8rem}
  .sbx-solution pre code{font-size:0.72rem}
}