/* Page layouts for landing, sign in/up, admin, account and the style guide (components live in cuecraft.css) */

/* ---------- landing */
.lp-hero{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--cc-s-7); align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--cc-r-xl); margin-top: var(--cc-s-4) }
.lp-hero__copy{ display: grid; gap: var(--cc-s-4); align-content: center; justify-items: start }
.lp-hero .cc-display{ position: relative; padding-bottom: 14px }
.lp-hero .cc-display::after{ content: ""; position: absolute; left: 4px; bottom: 0; width: 84px; height: 6px; border-radius: 6px; background: var(--cc-brand-grad) }
.lp-tagline{ font-family: var(--cc-font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; margin: 0 }
.lp-lead{ font-size: var(--cc-fs-md); line-height: 1.55; margin: 0; max-width: 34em }
.lp-cta{ margin-top: var(--cc-s-2) }
.lp-note{ display: inline-flex; align-items: center; gap: 8px; font-size: var(--cc-fs-sm); color: var(--cc-fg-2); margin: 0 }
.lp-note svg{ width: 18px; height: 18px }
@media (max-width: 920px){ .lp-hero{ grid-template-columns: 1fr } }
@media (max-width: 520px){ .lp-cta .cc-btn{ width: 100% } }

/* the little deck in the hero: an inner fill (not glass on glass), radius concentric with the card */
.lp-deck{ display: grid; gap: 14px; padding: 18px; border-radius: calc(var(--cc-r-xl) - 14px); background: var(--cc-fill);
  box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 0 rgb(var(--cc-hi) / .12) }
.lp-deck__top{ display: flex; align-items: center; gap: 12px }
.lp-deck__art{ width: 46px; height: 46px; border-radius: 12px; background: var(--cc-brand-grad); flex: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4) }
.lp-deck__title{ font-weight: 700; line-height: 1.25 }
.lp-deck__meta{ font-size: var(--cc-fs-sm); color: var(--cc-fg-2) }
.lp-wave{ display: block; width: 100%; height: 92px; border-radius: 12px; background: rgb(var(--cc-glass-rgb) / .35); box-shadow: inset 0 0 0 1px var(--cc-line) }
.lp-wave .w{ fill: var(--cc-fg-2); opacity: .55 }
.lp-wave .w.on{ fill: var(--cc-fg); opacity: .95 }
.lp-pads{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.lp-pad{ --pc: var(--cc-pad-1); position: relative; min-height: 58px; padding: 8px 10px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between;
  background: color-mix(in srgb, var(--pc) 22%, rgb(var(--cc-glass-rgb) / .4)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / .2);
  font-size: 12px; font-weight: 700; line-height: 1.2 }
.lp-pad b{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--pc); color: #111; font-size: 11px }
.lp-pad:nth-child(2){ --pc: var(--cc-pad-2) } .lp-pad:nth-child(3){ --pc: var(--cc-pad-3) } .lp-pad:nth-child(4){ --pc: var(--cc-pad-4) }
.lp-pad:nth-child(5){ --pc: var(--cc-pad-5) } .lp-pad:nth-child(6){ --pc: var(--cc-pad-6) } .lp-pad:nth-child(7){ --pc: var(--cc-pad-7) } .lp-pad:nth-child(8){ --pc: var(--cc-pad-8) }
@media (max-width: 420px){ .lp-pads{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.lp-features{ margin-top: var(--cc-s-6); grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1180px){ .lp-features{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px){ .lp-features{ grid-template-columns: 1fr } }
.lp-feature{ display: grid; gap: 12px; align-content: start }
.lp-feature p{ margin: 0; color: var(--cc-fg-2); line-height: 1.55 }
.lp-steps{ margin-top: var(--cc-s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-s-4); padding: var(--cc-s-5) var(--cc-s-6) }
.lp-step{ display: flex; gap: 14px; align-items: flex-start }
.lp-step__n{ display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; font-weight: 800; background: var(--cc-accent); color: var(--cc-accent-ink) }
.lp-step p{ margin: 2px 0 0; color: var(--cc-fg-2); font-size: var(--cc-fs-sm) }
@media (max-width: 760px){ .lp-steps{ grid-template-columns: 1fr } }

/* ---------- sign in / sign up */
.auth-main{ display: grid; place-items: center; padding: var(--cc-s-7) 0 }
.auth-card{ width: 100%; max-width: 470px; display: grid; gap: var(--cc-s-5) }
.auth-head{ display: grid; gap: 6px; justify-items: center; text-align: center }
.auth-head .cc-logo__mark{ width: 64px; height: 64px }
.auth-form{ display: grid; gap: var(--cc-s-4) }
.auth-foot{ text-align: center; font-size: var(--cc-fs-sm); color: var(--cc-fg-2); margin: 0 }
.auth-code{ font-family: var(--cc-mono); letter-spacing: .04em }

/* ---------- admin / account */
.pg-head{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cc-s-3); justify-content: space-between; margin: var(--cc-s-4) 0 var(--cc-s-5) }
.pg-head .cc-h1{ margin-top: 4px }
.pg-cols{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cc-s-5); align-items: start }
@media (max-width: 980px){ .pg-cols{ grid-template-columns: 1fr } }
.pg-card-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--cc-s-4) }
.pg-card-head .cc-h2{ flex: 1; min-width: 0 }
.pg-stats{ display: flex; flex-wrap: wrap; gap: 8px }
.adm-invite-result{ display: grid; gap: 10px; padding: 14px; border-radius: var(--cc-r-md); background: rgb(var(--cc-accent-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--cc-accent-rgb) / .4) }
.adm-code{ font-family: var(--cc-mono); font-weight: 650; letter-spacing: .02em }
.adm-email{ word-break: break-all }
.adm-actions{ display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.adm-table{ --cc-actions-w: 96px }
.adm-users{ --cc-actions-w: 104px }
.adm-menu{ display: grid; gap: 8px }
.adm-menu .cc-btn{ justify-content: flex-start }
.adm-temp{ font-family: var(--cc-mono); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 14px; border-radius: var(--cc-r-md); background: var(--cc-fill-2); user-select: all; -webkit-user-select: all }
.acc-profile{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.acc-profile .cc-avatar{ width: 64px; height: 64px; font-size: 26px }
.acc-name{ font-size: var(--cc-fs-lg); font-weight: 700; line-height: 1.2 }
.acc-email{ color: var(--cc-fg-2); word-break: break-all }
.pg-gate{ max-width: 520px; margin: 12vh auto 0; text-align: center; display: grid; gap: 14px; justify-items: center }

/* ---------- style guide */
.sg-nav{ display: flex; flex-wrap: wrap; gap: 6px; margin: var(--cc-s-4) 0 }
.sg-section{ display: grid; gap: var(--cc-s-4); margin-top: var(--cc-s-6) }
.sg-swatches{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.sg-swatch{ border-radius: 14px; padding: 10px; display: grid; gap: 6px; background: var(--cc-fill); box-shadow: inset 0 0 0 1px var(--cc-line); font-size: 12px }
.sg-swatch i{ display: block; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cc-line) }
.sg-report{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; font-size: var(--cc-fs-sm) }
.sg-report div{ display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--cc-fill) }
.sg-demo-bg{ position: relative; border-radius: var(--cc-r-xl); padding: var(--cc-s-6); overflow: hidden; display: grid; gap: 16px }
.sg-code{ font-family: var(--cc-mono); font-size: 12.5px; white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--cc-field); box-shadow: inset 0 0 0 1px var(--cc-line); margin: 0; overflow: auto }
.sg-skel{ display: block; width: 240px; height: 14px } .sg-skel--short{ width: 140px }