/* Public section pages (/create, /apps, /video-models, ...). Loaded after model-pages.css and
   studio-modern.css, which supply the tokens, the chrome, .mcard/.tilt/.reveal and the grids.
   This file only adds what the section cards need on top of the /models look. */

.sp-hero{padding-bottom:36px}
.sp-tally{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* cards: same footprint as /models, plus room for the badge/chips/links. The body may grow past
   the card's minimum (placeholders, several links), so it sizes to its content and reserves the
   top band for the art label instead of climbing over it. */
.sp-card{min-height:250px}
.sp-card .mcard-body{
  gap:0;height:auto;min-height:100%;padding-top:88px;
  /* the body carries its own scrim, so a tall body stays legible above the card's bottom fade
     in light mode too (the text is white on every card, as on /models) */
  background:linear-gradient(180deg,transparent 0,rgba(6,9,18,.78) 64px,rgba(6,9,18,.9) 100%);
}
.sp-grid{margin-top:8px}
.mp-section.sp-main{padding-top:20px}

/* A card whose art is typographic: the label sits in the top band, and the shimmer in
   studio-modern (meant for media still loading) is turned off. */
.sp-card .mp-media-none{animation:none;place-items:start center;padding-top:26px}
.sp-card .mp-media-none span{font-size:19px;opacity:.38;padding:0 14px}

/* Live cards: the title link covers the whole card; the "Also:" links sit above it. */
.sp-live{cursor:pointer}
.sp-stretch::after{content:"";position:absolute;inset:0;z-index:1}
.sp-live .sp-also,.sp-live .sp-owner{position:relative;z-index:3}
.sp-live:focus-within{box-shadow:var(--d4),var(--edge-strong);border-color:var(--accent)}
.sp-stretch:focus-visible{outline:none}
a.mcard-title{display:block}

/* Not available yet: same surface, clearly dimmed, never a link, never tilts. */
.sp-off{cursor:default;opacity:.72}
.sp-off:hover{box-shadow:var(--d2),var(--edge);border-color:var(--border);opacity:.86}
.sp-off.tilt,.sp-off.tilt.is-tilting{transform:none!important}
.sp-off .tilt-sheen{display:none}
.sp-off .mp-media-none{filter:saturate(.35)}
.sp-off .mcard-title{color:rgba(255,255,255,.82)}
.sp-off .mcard-sub{color:rgba(255,255,255,.62)}

.sp-badge{
  display:inline-block;align-self:flex-start;margin-bottom:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fde68a;background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.35);
  border-radius:20px;padding:3px 9px;
}

.sp-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sp-chip{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:3px 9px;
}
.sp-chip b{font-weight:800;color:#fff}
.sp-chip-on{color:#a7f3d0;background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35)}
.sp-chip-on b{color:#d1fae5}
.sp-tally .sp-chip{color:var(--text);background:var(--surface-2);border-color:var(--border)}
.sp-tally .sp-chip b{color:var(--text)}
.sp-tally .sp-chip-on{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.1)}
.sp-tally .sp-chip-on b{color:#34d399}

.sp-also,.sp-tiers{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.7)}
.sp-also a,.sp-tiers a{color:var(--accent);font-weight:600}
.sp-also a:hover,.sp-tiers a:hover{text-decoration:underline}
.sp-tiers{color:var(--muted);margin-top:8px;padding:0 4px}
.sp-model{display:flex;flex-direction:column}
.sp-model > .mcard{flex:1}

/* Owner placeholders are literal, untranslated, and unmistakable. */
.sp-owner{
  display:block;margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:#fecaca;background:rgba(251,113,133,.14);border:1px dashed rgba(251,113,133,.5);border-radius:8px;padding:6px 8px;
  white-space:normal;word-break:break-word;
}
p.sp-owner{margin-top:18px;font-size:13px}

.sp-link{display:inline-block;margin-inline-start:6px;color:var(--accent);font-weight:600}
.sp-link:hover{text-decoration:underline}

/* the "everything on the site" strip at the bottom */
.sp-seclinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sp-seclink{
  display:inline-block;padding:8px 14px;border-radius:12px;font-size:13.5px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);transition:color .2s,border-color .2s;
}
a.sp-seclink:hover{color:var(--text);border-color:var(--border-2)}
.sp-seclink.on{color:var(--text);border-color:var(--accent);background:var(--surface-3)}

/* ---------- light mode ---------- */
/* Card bodies keep their dark scrim in light mode, so badges and in-card placeholders keep their
   dark-mode colours; only the page-level About placeholder sits on the light background. */
:root[data-mode="light"] .sp-off .mcard-title{color:rgba(255,255,255,.9)}
:root[data-mode="light"] p.sp-owner{color:#9f1239;background:rgba(251,113,133,.14);border-color:rgba(190,18,60,.5)}
:root[data-mode="light"] .sp-tally .sp-chip-on{color:#047857}
:root[data-mode="light"] .sp-tally .sp-chip-on b{color:#047857}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sp-off,.sp-seclink{transition:none}
}

/* ---------- the MCP / CLI "how to connect" section on /platform ---------- */
.sp-docs{max-width:880px;margin-inline-start:auto;margin-inline-end:auto}
.sp-h3{font-family:var(--disp,"Chakra Petch",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:34px 0 10px}
.sp-p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.sp-p .sp-link{margin-inline-start:6px}
.sp-fine{margin-top:18px;font-size:13.5px}
.sp-pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;margin:0 0 12px;overflow-x:auto;white-space:pre;max-width:100%;
}
.sp-tools{display:grid;gap:8px;margin-top:6px}
.sp-tool{
  display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);
}
.sp-tool code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--text)}
.sp-tool > span:not(.sp-chip){font-size:14px;line-height:1.5;color:var(--muted)}
.sp-tool .sp-chip{color:var(--text);background:var(--surface-3);border-color:var(--border);white-space:nowrap}
.sp-tool .sp-chip-on{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.1)}
:root[data-mode="light"] .sp-tool .sp-chip-on{color:#047857}

/* ---------- phones ---------- */
@media (max-width:640px){
  .sp-card{min-height:224px}
  .sp-seclinks{gap:6px}
  .sp-seclink{padding:7px 11px;font-size:13px}
  .sp-h3{font-size:19px;margin-top:26px}
  .sp-tool{grid-template-columns:1fr;gap:6px}
  .sp-tool .sp-chip{justify-self:start}
  .sp-pre{font-size:11.5px;padding:12px}
}