/* ============================================================
   NEXORA · Screen / Playground — Interactive Learning Lab
   Premium, spacious, educational. Reuses design tokens.
   ============================================================ */
.playground-screen { gap: clamp(1rem, 1vw, 1.4rem); animation: pg-enter .42s var(--ease-out) both; }
@keyframes pg-enter { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .playground-screen{ animation:none }
.playground-screen .h-page { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }

/* offline */
.pg-offline { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--radius-md); background:var(--warning-soft); color:var(--warning-text); border:1px solid var(--warning-border); font-family:var(--font-mono); font-size:.75rem; font-weight:600; }
[data-theme="dark"] .pg-offline{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.pg-offline .icon{ width:16px; height:16px; flex:none }

/* header */
.pg-head{ align-items:center }
.pg-head-copy{ min-width:0; flex:1 1 420px }
.pg-head-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:.85rem }
.pg-head-meta .w-meta{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.pg-head-meta .w-meta .icon{ width:14px; height:14px; color:var(--text-3); flex:none }

/* search */
.pg-search-wrap{ display:grid; gap:.5rem }
.pg-search{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); }
.pg-search > .icon{ color:var(--text-3); flex:none }
.pg-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:.98rem; color:var(--text-1) }
.pg-search input::placeholder{ color:var(--text-3) }
.pg-search kbd{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); padding:.15rem .45rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) }
.pg-results{ display:grid; gap:.35rem; padding:.5rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); max-height:360px; overflow-y:auto; animation: refresh-item .22s var(--ease-out) both }
.pg-hit{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm); text-decoration:none; transition: background var(--dur-fast) }
.pg-hit:hover{ background:var(--surface-2) }
.pg-hit b{ display:block; font-family:var(--font-display); font-size:.9rem; color:var(--text-1) }
.pg-hit span{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }
.pg-hit-body{ flex:1; min-width:0 }

/* continue hero */
.pg-continue{ padding:1.2rem 1.4rem; display:grid; gap:.9rem }
.pg-continue-main{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap }
.pg-continue .icon-tile{ width:48px; height:48px; flex:none; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-2) }
.pg-continue h3{ font-size:1.15rem; color:var(--text-1) }
.pg-continue p{ font-size:.85rem; color:var(--text-3) }
.pg-continue .eyebrow{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }

/* quick */
.pg-quick-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.7rem }
@media (max-width: 640px){ .pg-quick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
.pg-quick{ display:grid; place-items:center; gap:.5rem; padding:1rem .6rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); text-decoration:none; color:var(--text-2); transition: transform .16s var(--ease-out), border-color .16s, background .16s, box-shadow .16s; }
.pg-quick:hover{ transform:translateY(-1px); border-color:var(--border-strong); color:var(--text-1); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
html.nx-reduced-motion .pg-quick:hover{ transform:none }
.pg-quick .icon{ width:22px; height:22px }
.pg-quick span{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; text-align:center }

/* recommended */
.pg-rec-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.85rem }
@media (max-width: 640px){ .pg-rec-grid{ grid-template-columns:1fr } }
.pg-rec-card{ display:grid; gap:.6rem; padding:1rem 1.05rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); }
.pg-rec-card .why{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.pg-rec-card .why .dot{ width:6px; height:6px; border-radius:999px; background:var(--text-3) }
.pg-rec-card h4{ font-size:.96rem; color:var(--text-1); line-height:1.35 }
.pg-rec-card p{ font-size:.8rem; color:var(--text-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* tools */
.pg-tools-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap:1rem; margin-top:1rem }
.pg-tool{ display:grid; gap:.7rem; padding:1.1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); transition: transform .16s, border-color .16s; }
.pg-tool:hover{ transform:translateY(-1px); border-color:var(--border-strong) }
html.nx-reduced-motion .pg-tool:hover{ transform:none }
.pg-tool-top{ display:flex; align-items:flex-start; gap:.85rem }
.pg-tool .icon-tile{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-2) }
.pg-tool h4{ font-size:1rem; color:var(--text-1) }
.pg-tool .meta{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3) }
.pg-tool p{ font-size:.85rem; color:var(--text-2); line-height:1.5 }
.pg-tool-actions{ display:flex; gap:.5rem; flex-wrap:wrap }

/* grid preserve */
.playground-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--content-gutter); align-items: start; }
.playground-grid .card { display: grid; gap: 0.9rem; }
.pg-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 0.9rem; border-radius: var(--radius-md);
  background: var(--surface-inset); border: 1px solid var(--border-subtle); box-shadow: var(--inset-well);
  transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.pg-item:hover { border-color: var(--border-strong); background: var(--bg-elevated); box-shadow: var(--hi-top), var(--elev-1); }
.pg-item:hover { transform: translateY(-1px); border-color: var(--border-strong); }
html.nx-reduced-motion .pg-item:hover{ transform:none }
.pg-item .icon-tile { width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm) }
.pg-item .pg-body { flex:1; min-width:0; }
.pg-item b { display:block; font-family:var(--font-display); font-size:0.95rem; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-item span { display:block; font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); margin-top:0.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-item .pg-actions { display:flex; gap:0.4rem; flex:none; }
.pg-item-actions{ display:flex; gap:.3rem; flex:none }
.pg-item-actions .btn{ padding:.35rem .6rem; font-size:.72rem }

/* stats */
.pg-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.7rem }
@media (max-width: 900px){ .pg-stats{ grid-template-columns: repeat(2,1fr) } }
.pg-stat{ padding:.9rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); display:grid; gap:.3rem }
.pg-stat b{ font-size:1.2rem; color:var(--text-1) }
.pg-stat span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.pg-stat i{ font-style:normal; font-family:var(--font-mono); font-size:.66rem; color:var(--text-2) }
.pg-achievements{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem }
.ach{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-family:var(--font-mono); font-size:.68rem; color:var(--text-2) }
.ach.done{ background:var(--text-1); color:var(--bg-elevated); border-color:var(--text-1) }

/* fav */
.pg-fav-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:.7rem }

/* AI */
.pg-ai{ display:grid; gap:.9rem }
.pg-ai-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.pg-ai h3{ font-size:1.05rem; color:var(--text-1) }
.pg-ai .sub{ font-size:.82rem; color:var(--text-3) }
.pg-ai-actions{ display:flex; flex-wrap:wrap; gap:.5rem }
.pg-ai-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius:999px; background:var(--ai-soft); border:1px solid var(--ai-border); font-family:var(--font-mono); font-size:.72rem; color:var(--ai-text); text-decoration:none; cursor:pointer; }
.pg-ai-chip:hover{ background:color-mix(in srgb, var(--ai-soft) 55%, var(--hover-fill-strong)); color:var(--ai-text); border-color:var(--ai-border) }

/* empty & skeleton & a11y */
.empty-state { display:grid; place-items:center; text-align:center; gap:.4rem; padding:1.4rem 1rem; border-radius:var(--radius-md); background: var(--surface-2); border:1px dashed var(--border-strong) }
.empty-state p { font-size:.9rem; font-weight:600; color:var(--text-1) }
.empty-state span { font-size:.78rem; color:var(--text-3); max-width:28ch; line-height:1.5 }
.skeleton { position:relative; overflow:hidden; background: var(--surface-2); border-radius: var(--radius-sm); min-height:18px }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-100%); animation: shimmer 1.15s infinite; }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer { 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }
.pg-quick:focus-visible, .pg-tool:focus-visible, .pg-item:focus-visible, .pg-ai-chip:focus-visible { outline:2px solid var(--focus); outline-offset:2px }

@media (max-width: 960px) { .playground-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px){ .pg-quick-grid{ gap:.5rem } }