/* CALIBRE Play - Card grading for live sellers (/card-grading-for-live-sellers/).
   Template: parent page-card-grading-for-live-sellers.php (no wp_head; Play styles come in
   through the child partials/brand-base.php), wrapped by the child template of the same
   name, which adds the "How long your cards are away" chart (.ls-speed) to the hero.
   This page used literal light colours (#fff / #fbf9f4 panels), all re-pointed here. */

html body.ls { --panel: var(--play-card); }
html body.ls .wrap { width: 100%; }
html body.ls section { position: relative; }

/* type: Dela Gothic for h1/h2, Figtree for the rest */
html body.ls h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 8.4vw, 76px); line-height: 1; letter-spacing: .005em; max-width: 13ch; }
html body.ls h1 em { color: var(--play-electric); }
html body.ls h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 4.8vw, 44px); line-height: 1.06; max-width: 22ch; color: var(--play-ink); }
html body.ls .sub, html body.ls .lede { color: var(--play-muted); }
html body.ls .sub strong { color: var(--play-ink); }
html body.ls .sub a { color: var(--play-ink) !important; }
html body.ls .eyebrow, html body.ls .kicker { font: 800 12px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
html body.ls .eyebrow { color: var(--play-ink); opacity: .85; }
html body.ls #how .kicker { color: var(--play-water); }
html body.ls #offer .kicker { color: var(--play-electric); }
html body.ls #how + #offer + section .kicker { color: var(--play-psychic); }
html body.ls #trust .kicker { color: var(--play-grass); }
html body.ls #lead .kicker { color: var(--play-electric); }
html body.ls .ls-note .kicker { color: var(--play-psychic); }
html body.ls .live-dot { background: var(--play-fire); }

/* buttons: orange for the one main action, ghost for the rest */
html body.ls .btn { font: 800 16px/1 var(--f-body); min-height: 52px; border-radius: 12px; padding: 0 22px; }
html body.ls .btn-primary { background: var(--play-fire); color: var(--play-on); border: 2px solid rgba(0, 0, 0, .25); box-shadow: var(--play-shadow); }
html body.ls .btn-primary:hover { background: #f18566; color: var(--play-on); transform: none; }
html body.ls .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
html body.ls .btn-ghost { background: var(--play-card); color: var(--play-ink); border: 1.5px solid var(--play-line); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
html body.ls .btn-ghost:hover { border-color: var(--play-muted); }
html body.ls #ls-submit[style*="background"] { color: #fff; }   /* the script's red "fix this" flash */

/* hero on the playmat */
html body.ls .ls-hero {
  background-color: var(--play-mat); background-image: radial-gradient(var(--play-mat-dot) 1.6px, transparent 1.7px); background-size: 14px 14px;
  border-bottom: 1px solid var(--play-line); padding: 48px 0 56px;
}
html body.ls .ls-hero::before { display: none; }
html body.ls .ls-hooks { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
html body.ls .ls-hook {
  --tone: var(--play-electric); border-radius: 16px; padding: 14px 16px; box-shadow: 0 5px 0 rgba(0, 0, 0, .45);
  background: color-mix(in srgb, var(--tone) 14%, var(--play-card)); border: 1.5px solid color-mix(in srgb, var(--tone) 50%, var(--play-card));
}
html body.ls .ls-hook:nth-child(2) { --tone: var(--play-grass); }
html body.ls .ls-hook:nth-child(3) { --tone: var(--play-water); }
html body.ls .ls-hook .n { font: 400 clamp(26px, 5vw, 36px)/1 var(--f-display); color: var(--tone); }
html body.ls .ls-hook .l { font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; color: var(--play-ink); opacity: .85; margin-top: 8px; }

/* speed chart (child template) */
html body.ls .ls-speed {
  margin: 18px 0 0; padding: 18px 18px 14px; border-radius: 18px; background: rgba(18, 20, 41, .72);
  border: 1px solid var(--play-line); box-shadow: 0 5px 0 rgba(0, 0, 0, .45); max-width: 720px;
}
html body.ls .ls-speed figcaption { font: 800 12px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--play-muted); margin: 0 0 12px; }
html body.ls .ls-speed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; margin: 0 0 14px; }
html body.ls .ls-speed-row .who { font-weight: 800; font-size: 15px; color: var(--play-ink); }
html body.ls .ls-speed-row .val { font: 500 13.5px/1.2 var(--f-data); color: var(--play-muted); text-align: right; }
html body.ls .ls-speed-row.is-us .val { color: var(--play-grass); }
html body.ls .ls-speed-row .track {
  grid-column: 1 / -1; position: relative; display: block; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(242, 242, 251, .07); border: 1px solid var(--play-line);
}
html body.ls .ls-speed-row .bar, html body.ls .ls-speed-row .range { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
html body.ls .is-us .bar { width: 12.5%; background: var(--play-grass); }                  /* 1 week of 8 */
html body.ls .is-them .bar { width: 37.5%; background: var(--play-faint); }                /* at least 3 weeks */
html body.ls .is-them .range {                                                             /* up to 8 weeks */
  left: 0; width: 100%; z-index: -1; background: repeating-linear-gradient(135deg, rgba(125, 128, 166, .55) 0 6px, rgba(125, 128, 166, .22) 6px 12px);
}
html body.ls .is-them .track { isolation: isolate; }
html body.ls .ls-speed-axis { display: flex; justify-content: space-between; font: 500 11.5px/1 var(--f-data); color: var(--play-muted); margin: -4px 0 0; }
html body.ls .ls-speed-axis span:last-child { color: var(--play-ink); }
html body.ls .ls-speed-src { margin: 12px 0 0; font-size: 13px; color: var(--play-muted); }
html body.ls .ls-speed-src a { color: var(--play-fire-ink); text-decoration: underline; }

/* raw -> slab */
html body.ls .ls-shot figcaption { font: 700 11.5px/1.3 var(--f-body); letter-spacing: .1em; color: var(--play-muted); }
html body.ls .ls-shot--slab img { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); }
html body.ls .ls-flip-arrow { font-family: var(--f-display); color: var(--play-electric); }
html body.ls .ls-flip-note { color: var(--play-muted); }
html body.ls .ls-flip-note strong { color: var(--play-ink); }

/* the offer spec sheet */
html body.ls .ls-spec { background: var(--play-card); border: 1px solid var(--play-line); border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .45); }
html body.ls .ls-spec-head { border-bottom-color: var(--play-line); background: var(--play-card-2); font-family: var(--f-body); }
html body.ls .ls-spec-head .id { font: 500 12px/1.3 var(--f-data); letter-spacing: .04em; color: var(--play-muted); }
html body.ls .ls-badge { color: var(--play-ink); border-color: var(--play-line); font: 800 11px/1 var(--f-body); }
html body.ls .ls-row { border-bottom-color: var(--play-line); font-family: var(--f-body); }
html body.ls .ls-row .k { font: 800 12px/1.3 var(--f-body); letter-spacing: .1em; color: var(--play-muted); }
html body.ls .ls-tick { color: var(--play-grass); }
html body.ls .ls-row .v .big { font: 400 clamp(22px, 5vw, 28px)/1 var(--f-display); color: var(--play-electric); }
html body.ls .ls-row .v .small { color: var(--play-ink); font-size: 15px; }

/* Whatnot / eBay columns */
html body.ls .ls-col {
  --tone: var(--play-psychic); border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
  background: color-mix(in srgb, var(--tone) 11%, var(--play-card)); border: 1.5px solid color-mix(in srgb, var(--tone) 45%, var(--play-card));
}
html body.ls .ls-col + .ls-col { --tone: var(--play-water); }
html body.ls .ls-col h3 { font: 400 24px/1.1 var(--f-display); color: var(--tone); }
html body.ls .ls-col p { color: var(--play-muted); }
html body.ls .ls-col li { color: var(--play-ink); }
html body.ls .ls-col li::before { color: var(--play-grass); }

/* why the grade holds up */
html body.ls .ls-t .ic { background: var(--play-card); border: 1.5px solid color-mix(in srgb, var(--play-grass) 55%, var(--play-card)); color: var(--play-grass); width: 40px; height: 40px; border-radius: 12px; }
html body.ls .ls-t b { color: var(--play-ink); font-size: 16px; }
html body.ls .ls-t p { color: var(--play-muted); font-size: 14.5px; }

/* sign-up: the form on the playmat */
html body.ls .ls-lead {
  background-color: var(--play-mat); background-image: radial-gradient(var(--play-mat-dot) 1.6px, transparent 1.7px); background-size: 14px 14px;
  border-top: 1px solid var(--play-line); border-bottom: 1px solid var(--play-line);
}
html body.ls .ls-lead-copy li { color: var(--play-ink); }
html body.ls .ls-lead-copy li::before { color: var(--play-electric); }
html body.ls .ls-form { background: var(--play-card); border: 1px solid var(--play-line); border-radius: 20px; box-shadow: 0 7px 0 rgba(0, 0, 0, .45); }
html body.ls .ls-form h3 { font: 400 26px/1.1 var(--f-display); color: var(--play-ink); }
html body.ls .ls-form .fine { color: var(--play-muted); }
html body.ls .ls-field label { font: 800 12px/1.2 var(--f-body); letter-spacing: .12em; color: var(--play-muted); }
html body.ls .ls-field input, html body.ls .ls-field select {
  min-height: 50px; background: var(--play-card-2); color: var(--play-ink); border: 1.5px solid var(--play-line); border-radius: 12px; font: 500 16px/1.3 var(--f-body);
}
html body.ls .ls-field select {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background: var(--play-card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a9abc9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
html body.ls .ls-field input:focus, html body.ls .ls-field select:focus { border-color: var(--play-water); box-shadow: 0 0 0 3px rgba(111, 157, 224, .28); }
html body.ls .ls-field input::placeholder { color: #8f92b8; opacity: 1; }   /* 4.7:1 on the input fill */
html body.ls #ls-ok .check { background: color-mix(in srgb, var(--play-grass) 18%, var(--play-card)); border: 2px solid var(--play-grass); color: var(--play-grass); }
html body.ls #ls-ok .big { font: 400 26px/1.1 var(--f-display); color: var(--play-ink); }
html body.ls #ls-ok p { color: var(--play-muted); }

/* straight talk */
html body.ls .ls-note .box { border-left: 4px solid var(--play-psychic); }
html body.ls .ls-note p { color: #d4d5ea; }
html body.ls .ls-note .sig { font: 800 12px/1.3 var(--f-body); letter-spacing: .1em; color: var(--play-muted); }

@media (max-width: 560px) {
  html body.ls .ls-hero { padding: 34px 0 40px; }
  html body.ls .ls-hooks { gap: 8px; }
  html body.ls .ls-hook { padding: 12px 10px; }
  html body.ls .ls-hook .l { font-size: 11px; letter-spacing: .03em; }
  html body.ls .ls-cta .btn { flex: 1 1 100%; justify-content: center; }
  html body.ls .ls-speed { padding: 16px 14px 12px; }
  html body.ls .ls-two { grid-template-columns: 1fr; gap: 0; }
  html body.ls .ls-form { padding: 20px 16px; }
  html body.ls .ls-row { grid-template-columns: 1fr; gap: 6px; }
  html body.ls .ls-row .v { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html body.ls .live-dot { animation: none; } }

/* the template's ".ls footer a" rule also catches the shared site footer's logo */
html body.ls .bfooter .bfooter-logo { color: var(--play-ink); }