/* ============================================================
   Viewsetter — the three levels on the curtain builder.

   Its own stylesheet. build.css is under the design lock and is
   shared with three other builders, so nothing here touches it. The
   level cards borrow the engine's own .opt so they sit in the page
   as though they always belonged.
   ============================================================ */

.cl-block { margin: 0 0 clamp(26px,4vw,38px); }
.cl-block > h2 { margin-bottom: 8px; }

.cl-levels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: 10px; margin-top: 16px; align-items: stretch;
}
.cl-level { position: relative; display: flex; flex-direction: column; }
.cl-level .d { margin-top: 5px; }

/* what the level is worth in cloth, said in the same mono the rest of
   the builder uses for a fact rather than a sentence */
.cl-n {
  display: block; margin-top: 11px; padding-top: 9px;
  border-top: 1px solid rgba(14,35,56,.12);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: #8A6E3C;
}
.cl-level[aria-pressed="true"] .cl-n { color: #6E5526; }

.cl-star {
  position: absolute; top: -1px; right: 12px;
  padding: 4px 9px 3px;
  background: #C89A4F; color: #081524;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .53rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}

/* which range the level has opened, above the swatches */
.cl-note {
  margin: 16px 0 0; padding: 12px 15px;
  border: 1px solid rgba(14,35,56,.12); border-left: 2px solid #C89A4F;
  background: rgba(255,255,255,.5);
  font-size: .88rem; line-height: 1.55; color: #51606F;
}
.cl-note strong { color: #12283F; font-weight: 500; }

@media (max-width: 560px) {
  .cl-levels { grid-template-columns: 1fr; }
}