/* =========================================================================
   Web & Landing Samples — styles (web-samples.css)
   The sixth surface. Accent --ws (indigo/portfolio, distinct from gold
   Template, blue Impl, teal Tools). Reuses the shared OS tokens (--panel,
   --line, --tx2, --shadow, --font-mono) and the .pad / .sec-head chrome.
   ========================================================================= */
html[data-theme="dark"]      { --ws:#7C8CF8; --ws-soft:#A7B2FB; }
html[data-theme="light"]     { --ws:#4E5BD6; --ws-soft:#6B78E8; }
html[data-theme="beige"]     { --ws:#4E5BD6; --ws-soft:#6B78E8; }
html[data-theme="blueprint"] { --ws:#A7B2FB; --ws-soft:#C6CDFC; }

/* surface head — match the impl/tools sec-head but recolor the number chip */
.ws-num{ color:var(--ws); border-color:color-mix(in srgb,var(--ws) 38%,var(--line2)) }

/* kind group */
.ws-group{ margin-top:26px }
.ws-group:first-of-type{ margin-top:18px }
.ws-group-head{ display:flex; align-items:center; gap:9px; margin:0 0 12px }
.ws-group-name{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tx2) }
.ws-group-n{ font-size:11px; font-weight:600; color:var(--ws); background:color-mix(in srgb,var(--ws) 13%,transparent); padding:2px 9px; border-radius:999px }

/* sample grid */
.ws-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px }

/* sample card */
.ws-card{
  display:flex; flex-direction:column; gap:9px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:0 0 14px; overflow:hidden;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.ws-card:hover{ border-color:color-mix(in srgb,var(--ws) 48%,var(--line2)); transform:translateY(-2px); box-shadow:var(--shadow) }

/* preview thumbnail — 16:10 crop, top of the card, the whole thing is the link */
.ws-thumb{
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:color-mix(in srgb,var(--ws) 7%,var(--panel));
  border-bottom:1px solid var(--line);
}
.ws-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .25s }
.ws-card:hover .ws-thumb img{ transform:scale(1.025) }
.ws-thumb-go{
  position:absolute; top:9px; right:9px; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; color:#fff;
  background:color-mix(in srgb,var(--ws) 82%,#000 10%); box-shadow:0 2px 8px rgba(0,0,0,.25); opacity:0; transition:opacity .15s;
}
.ws-card:hover .ws-thumb-go{ opacity:1 }

/* card meta row + body */
.ws-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px 0 }
.ws-name{ margin:0; padding:0 15px; font-size:15.5px; font-weight:700; line-height:1.25; color:var(--tx) }
.ws-blurb{ margin:0; padding:0 15px; font-size:12.5px; line-height:1.45; color:var(--tx2) }

/* kind pill */
.ws-kind{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid transparent; flex:none; white-space:nowrap }
.ws-kind--website{ color:var(--ws); background:color-mix(in srgb,var(--ws) 13%,transparent); border-color:color-mix(in srgb,var(--ws) 38%,transparent) }
.ws-kind--landing{ color:#0E8C7E; background:color-mix(in srgb,#0E8C7E 13%,transparent); border-color:color-mix(in srgb,#0E8C7E 38%,transparent) }

/* live link + pending chip */
.ws-open{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--ws); flex:none; text-decoration:none }
.ws-open:hover{ text-decoration:underline }
.ws-pending{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--tx2); flex:none; white-space:nowrap }