/* Home's shared parts (WEBSITE-PLAN §2, AA): the invite card, the
   optical alignment the section headlines share, the ribbon and pointer
   the renderings share, the icons, the footer's mark, and the smallest
   phones' cells. The system is site.css; each section has its own file
   beside this one, linked after it in the page's order (website v3). */

/* ---- H12 · the invite card, above everything ---------------------------- */
.invite{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px var(--gutter);background:#fff;border-bottom:1px solid var(--line);font-size:15px}
.invite[hidden]{display:none}
.invite img{width:48px;height:48px;flex:none}
/* the code is one thing: it never breaks between its halves (break-ui) */
.invite .code{font:600 15px/1 var(--mono);letter-spacing:.06em;background:var(--wash);border-radius:6px;padding:4px 7px;white-space:nowrap}
.invite .copy{border:1px solid var(--edge);background:#fff;border-radius:var(--r-pill);padding:4px 12px;font-weight:600;cursor:pointer;margin:0 4px;transition:transform 160ms var(--ease-out);background-clip:padding-box}
.invite .copy:active{transform:scale(.97);transition-duration:80ms}

/* optical alignment (apple-design, typography): see hero.css. An h2 hangs
   its first line only. */
.who .h2,.levels .h2{text-indent:-.07em}

/* ---- the ribbon and the pointer, in the renderings (race, learn) -------- */
.ribbody{display:flex;gap:8px;align-items:stretch;height:56px;padding:8px 10px;background:#F7F8FA;border-bottom:1px solid #E6E8EB;font:500 10.5px/1.1 var(--ui);color:#4B5563;overflow:hidden;white-space:nowrap}
.ribbody .bt{display:grid;place-items:center;align-content:center;gap:4px;padding:0 7px;border-radius:6px;border:1px solid transparent}
.ribbody .bt i{width:20px;height:16px;border-radius:4px;border:1.6px solid #AEB6C2;background:#fff}
.ribbody .bt.hot{border-color:var(--key);background:#fff;box-shadow:0 0 0 2px rgba(10,102,214,.25)}
.ribbody .bt.hot i{border-color:var(--key);background:var(--key-fill)}
.ribbody .sep{width:1px;background:#E3E6EA}
.ptr{position:absolute;width:20px;height:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}

/* The renderings' icons are the app's own (E7): Learn's glyph sprite, from
   app/Dashboard's Glyph and StruckIcons, replaced the Phosphor masks here. */

/* ---- footer ---------------------------------------------------------------- */
.mark.big{width:38px;height:38px;border-radius:10px}
.mark.big svg{width:22px;height:20px}

/* ---- the smallest phones ------------------------------------------------------
   A number is never cut (Excel would show ####): at 320 px "(350.2)" lost
   its bracket. The labels give the room; a label clipped at the next cell
   is what Excel does with text (break-ui). Last in the file, so it wins. */
@media (max-width:360px){
  .grid th,.grid td{padding:0 3px}
}