/* GrowthSanity static pages (games, /games, /tools) on the /home-lab system.
   Loads after gs-home.css and gs-lab.css, which are Lovable's files copied
   unchanged. Everything here is scoped to .gsh and only adds what a static page
   needs: the base the React app gets for free, persona accents, the games hub,
   the game window and the tools page. Motion is CSS only, with a reduced-motion
   kill switch at the end. */

/* ---- base: what site.css used to provide ------------------------------- */
html,body{margin:0;background:#F7F3EE}
html[data-theme="dark"],html[data-theme="dark"] body{background:#07080D}
html{-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.gsh ul{margin:0;padding:0;list-style:none}
.gsh img{max-width:100%}
.gsh .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The games read a few names the homepage doesn't define. Red: the games use
   --gs-red for red WORDS and --gs-red-fill for fills, so map both onto the
   site's AA-safe pair here. */
.gsh{--gs-accent:var(--gs-serif);--gs-red-fill:#C8443A;--gs-lift:0 8px 20px -6px rgba(23,61,36,.18)}
.gsh[data-theme="dark"]{--gs-red-fill:#E05D52;--gs-lift:0 8px 20px -6px rgba(0,0,0,.55)}
.gsh .gw,.gsh .gs-game{--gs-red:var(--gs-red-text)}

/* ---- persona accents: one per seat, AA on both grounds ---------------- */
.gsh .p-felix{--pc:#1E432A}.gsh .p-chase{--pc:#1E3456}.gsh .p-sasha{--pc:#7F3025}.gsh .p-rohan{--pc:#6B4412}
.gsh[data-theme="dark"] .p-felix{--pc:#4ADE80}.gsh[data-theme="dark"] .p-chase{--pc:#60A5FA}
.gsh[data-theme="dark"] .p-sasha{--pc:#FB7185}.gsh[data-theme="dark"] .p-rohan{--pc:#FBBF24}

/* ---- header and footer extras ----------------------------------------- */
/* Tool pages keep their own layout and site.css: only the header and footer
   sit in .gsh, through wrappers that add no box of their own. */
.gsh.gsh-chrome{display:contents;font-size:16px;line-height:normal}
/* what site.css's own .nav rules would otherwise add to the header links */
.gsh.gsh-chrome .nav{align-items:revert}
.gsh.gsh-chrome .nav > a{display:revert;padding:revert;gap:revert;align-items:revert}
/* ...and what the tool pages' own .btn rules would add to the header button */
.gsh.gsh-chrome .btn{justify-content:normal;letter-spacing:normal;filter:none}
.gsh .nav a[aria-current="page"]{color:var(--gs-ink)}
.gsh .lw-bar .dots i:nth-child(1){background:#FF5F56}
.gsh .lw-bar .dots i:nth-child(2){background:#FFBD2E}
.gsh .lw-bar .dots i:nth-child(3){background:#27C93F}
/* site.js swaps in its own tick icon on copy, without a size */
.gsh .lft-ic svg:not([width]){width:22px;height:22px;fill:currentColor}
/* Lovable's app gets these from Tailwind's base reset; a static page does not */
.gsh .lft-ic{padding:0;font:inherit;text-decoration:none}
.gsh .lft-share .share-status{font:500 12px/1 var(--gs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lft-m)}
.gsh .lft-share .share-status:empty{display:none}

/* ---- page head: eyebrow, one Caslon accent, one calm line ------------- */
.gsh .pg-sec{padding-block:clamp(40px,7vw,80px) clamp(56px,8vw,96px)}
.gsh .pg-h{font-size:clamp(34px,5vw,56px);line-height:1.04}
.gsh .pg-head{max-width:880px;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.gsh .pg-head p{max-width:560px;font-size:clamp(15px,1.5vw,17px)}

/* ---- inbox-style card: 3px persona bar, meta row, bold title ----------- */
.gsh .ib{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:1.1rem 1.15rem 1.1rem 1.35rem;
  border:1px solid var(--gs-rule);border-radius:16px;background:var(--gs-raised);color:var(--gs-ink);text-decoration:none;overflow:hidden;
  transition:border-color .2s var(--gs-ease),background-color .2s var(--gs-ease),transform .2s var(--gs-ease),box-shadow .2s var(--gs-ease)}
.gsh .ib::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:color-mix(in srgb,var(--pc,var(--gs-ink)) 24%,transparent);transition:background-color .2s}
.gsh a.ib:hover,.gsh a.ib:focus-visible{border-color:var(--gs-ink);background:color-mix(in srgb,var(--pc,var(--gs-ink)) 4%,var(--gs-raised));transform:translateY(-2px);box-shadow:var(--gs-lift)}
.gsh a.ib:hover::before,.gsh a.ib:focus-visible::before{background:var(--pc,var(--gs-ink))}
.gsh .ib-meta{display:flex;align-items:center;gap:.55rem;min-width:0}
.gsh .ib-id{display:inline-flex;align-items:center;gap:.45rem;font:600 11px/1 var(--gs-mono);letter-spacing:.06em;color:var(--pc,var(--gs-ink))}
.gsh .ib-id::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc,var(--gs-ink))}
.gsh .ib-chip{font:600 11px/1 var(--gs-ui);padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pc,var(--gs-ink)) 30%,transparent);
  background:color-mix(in srgb,var(--pc,var(--gs-ink)) 7%,transparent);color:var(--gs-ink-2)}
.gsh .ib-ts{margin-left:auto;font:500 11px/1 var(--gs-mono);color:var(--gs-ink-3);white-space:nowrap}
.gsh .ib-who{display:flex;align-items:center;gap:.65rem;min-width:0}
.gsh .ib-av{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 2px var(--pc,var(--gs-ink))}
.gsh .ib-av img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.gsh .ib-who b{display:block;font:700 14px/1.15 var(--gs-ui)}
.gsh .ib-who small{display:block;margin-top:2px;font:500 11px/1.25 var(--gs-mono);color:var(--gs-ink-3)}
.gsh .ib-t{font:700 clamp(21px,2.2vw,25px)/1.08 var(--gs-head);letter-spacing:-.03em}
.gsh .ib-t em{color:var(--pc,var(--gs-indigo))}
.gsh .ib-d{margin:0;font-size:15px;line-height:1.5;color:var(--gs-ink-2)}
.gsh .ib-call{display:grid;gap:.25rem;padding:.65rem .8rem;border-radius:10px;background:var(--gs-surface);border:1px dashed color-mix(in srgb,var(--gs-ink-2) 26%,transparent)}
.gsh .ib-call .mono{font-size:10.5px;color:var(--pc,var(--gs-ink-2))}
.gsh .ib-call span:last-child{font:500 14px/1.4 var(--gs-ui);color:var(--gs-ink)}
.gsh .ib-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.15rem}
.gsh .ib-best{font:500 11px/1.3 var(--gs-mono);letter-spacing:.06em;color:var(--gs-ink-3)}
.gsh .ib-go{display:inline-flex;align-items:center;gap:.4rem;font:600 14px/1 var(--gs-ui);color:var(--gs-ink)}
.gsh .ib-go i{font-style:normal;transition:transform .2s var(--gs-ease)}
.gsh a.ib:hover .ib-go i{transform:translateX(3px)}

/* ---- games hub (/games) ----------------------------------------------- */
.gsh .gh-grid{display:grid;gap:14px}
@media(min-width:760px){.gsh .gh-grid{grid-template-columns:repeat(2,1fr)}}
.gsh .gh-rules{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--gs-rule)}
@media(min-width:760px){.gsh .gh-rules{grid-template-columns:repeat(3,1fr)}}
.gsh .gh-rule{padding:.85rem 1rem;border-radius:12px;background:var(--gs-surface)}
.gsh .gh-rule b{display:block;font:600 11px/1 var(--gs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gs-ink-2)}
.gsh .gh-rule p{margin:.45rem 0 0;font-size:14px;line-height:1.5;color:var(--gs-ink-2)}
.gsh .gh-note{margin:1.1rem 0 0;text-align:center;font-size:13px;color:var(--gs-ink-3)}
.gsh .gh-note a{color:var(--gs-indigo)}

/* ---- game page: the game in a browser window, notes in a side pane ---- */
.gsh .gp-sec{padding-block:1rem 3.5rem}
.gsh .gp-crumb{display:none}
/* the base text the games were tuned on (site.css body): 15px / 1.6, 1.5rem sides */
.gsh .gw .gw-game>section,.gsh .gw .gw-side>section{margin-inline:auto;padding-inline:1.5rem;font-family:var(--gs-body);font-size:15px;font-weight:400;line-height:1.6;color:var(--gs-ink)}
@media(max-width:719px){
  /* Phones: no chrome, so the game keeps every pixel of height it had */
  .gsh .gw{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .gsh .gw>.lw-bar{display:none}
  .gsh .gp-sec{padding-top:0}
  .gsh .gp-wrap{padding-inline:0}
}
@media(min-width:720px){
  .gsh .gp-sec{padding-block:clamp(1.4rem,3vw,2.4rem) clamp(3.5rem,7vw,6rem)}
  .gsh .gp-crumb{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;font:500 13px/1 var(--gs-ui);color:var(--gs-ink-3)}
  .gsh .gp-crumb a{color:var(--gs-ink-2);text-decoration:none}
  .gsh .gp-crumb a:hover{color:var(--gs-ink)}
  .gsh .gp-crumb .mono{font-size:10.5px}
  .gsh .gw .play{--gs-hdr:150px;padding-block:1.1rem 1.25rem}
  .gsh .gw .play-notes,.gsh .gw .recap{max-width:30rem}
}
@media(min-width:960px){
  .gsh .gw-body{display:grid;grid-template-columns:minmax(0,33rem) minmax(0,1fr);align-items:stretch}
  .gsh .gw-game{border-right:1px solid var(--gs-rule)}
  .gsh .gw-side{background:color-mix(in srgb,var(--gs-surface) 55%,var(--gs-raised))}
  .gsh .gw .play{padding-inline:1.4rem}
  .gsh .gw .gw-side>section{max-width:none;padding-inline:clamp(1.25rem,2.4vw,2rem)}
  .gsh .gw-game{display:flex;flex-direction:column;justify-content:center}
  .gsh .gw-game>.play{width:100%}
  .gsh .gw-side .recap{padding-block:1.6rem 0}
  .gsh .gw-side .play-notes{padding-block:1.6rem 1.8rem}
}
/* Tablets: one column inside the window; the notes keep a readable width */
@media(min-width:720px) and (max-width:959px){
  .gsh .gw-side{border-top:1px solid var(--gs-rule);background:color-mix(in srgb,var(--gs-surface) 55%,var(--gs-raised))}
}
.gsh .gw-side .how,.gsh .gw-side .more a{border-radius:14px}
.gsh .gw-side .how{position:relative;overflow:hidden;padding-left:1.35rem}
.gsh .gw-side .how::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc,var(--gs-ink))}
.gsh .gw-side .more a{position:relative;overflow:hidden;transition:border-color .2s var(--gs-ease),transform .2s var(--gs-ease),box-shadow .2s var(--gs-ease)}
.gsh .gw-side .more a:hover{border-color:var(--gs-ink);transform:translateY(-1px);box-shadow:var(--gs-lift)}
.gsh .more a img{flex:none;width:28px;height:28px;border-radius:8px;object-fit:cover;object-position:top center;background:#fff}
.gsh .seat-chip img{flex:none;width:22px;height:22px;border-radius:6px;object-fit:cover;object-position:top center;background:#fff;box-shadow:0 0 0 1.5px var(--pc,var(--gs-ink))}
.gsh .seat-chip{color:var(--gs-ink-2)}

/* Class names the games share with homepage components: .play is the hero's
   play button, .board the idea board, .stage the hero stage. Game pages load the
   homepage CSS in a cascade layer, so the game wins wherever both set a property;
   these reset the properties only the homepage sets (computed per class). */
.gsh .gw .play{background:revert;border:revert;border-radius:revert;cursor:revert;white-space:revert}
.gsh .gw .board{background:revert;border:revert;border-radius:revert;grid-template-columns:revert;padding:revert}
.gsh .gw .stage{margin-inline:revert;max-width:revert;order:revert;width:revert}

/* 404 frame (?embed): the frame is the viewport, so no site chrome at all */
.gs-embed .gsh .hd,.gs-embed .gsh .lft,.gs-embed .gsh .gp-crumb,.gs-embed .gsh .gw-side,.gs-embed .gsh .gw>.lw-bar{display:none!important}
.gs-embed .gsh .gw{border:0;border-radius:0;background:none;box-shadow:none}
.gs-embed .gsh .gp-sec{padding:0}
.gs-embed .gsh .gw-body{display:block}
.gs-embed .gsh .gw-game{border:0}
.gs-embed .gsh .gp-wrap{max-width:none;padding:0}
.gs-embed .gsh .gw .play{padding:.7rem}

/* ---- tools page (/tools) ---------------------------------------------- */
.gsh .tp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem}
.gsh .tp-cta h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em}
.gsh .tp-cta p{margin:.45rem 0 0;color:var(--gs-ink-2);max-width:560px}
.gsh .tp-more{display:grid;gap:24px;margin-top:clamp(2.5rem,6vw,4rem)}
@media(min-width:760px){.gsh .tp-more{grid-template-columns:1fr 1fr}}
/* same measure as the tool cards above (.tl-grid is 1040px) */
.gsh .tl-sec .tp-more,.gsh .tl-sec .tp-cta-lw{max-width:1040px;margin-inline:auto}
.gsh .tp-cta-lw{margin-top:24px}
.gsh .tp-bench{display:grid;gap:8px;margin-top:.2rem}
.gsh .tp-bench li{display:grid;gap:3px;padding:.7rem .85rem;border-radius:10px;background:var(--gs-surface)}
.gsh .tp-bench b{font:600 14.5px/1.3 var(--gs-ui)}
.gsh .tp-bench small{font-size:13.5px;line-height:1.45;color:var(--gs-ink-2)}
.gsh .tp-back{margin:1.4rem 0 0;text-align:center;font-size:13px}
.gsh .tp-back a{color:var(--gs-indigo);text-decoration:none}
.gsh .tp-back a:hover{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  .gsh .ib,.gsh .ib::before,.gsh .ib-go i,.gsh .gw-side .more a{transition:none}
  .gsh a.ib:hover,.gsh a.ib:focus-visible,.gsh .gw-side .more a:hover{transform:none}
  .gsh a.ib:hover .ib-go i{transform:none}
}