@charset "UTF-8";
/*!
 * EarnOrbit design system - eo-desktop.css
 *
 * Link it as:
 *   <link rel="stylesheet" href="…/eo-desktop.css" media="(min-width:64em)">
 *
 * Everything in here applies from 1024px up. Because of the media attribute
 * phones download it at low priority and it never blocks render, so this is
 * the right home for ≥1024 layout only - no tokens, no colours, no new
 * components. Unlayered, like eo.css, and loaded after it.
 *
 * Note: the ≥992 navbar rules stay in eo.css, because 992px is below 64em.
 */

/* ── Root font scaling on very large screens. Media-query em units are
   always 16px-based, so this does not feed back on itself. ─────────── */
@media (min-width:120em){ :root{font-size:106.25%} }   /* ≥1920 */
@media (min-width:160em){ :root{font-size:112.5%}  }   /* ≥2560 */

/* ── Hover affordances: fine pointers only. Elevation is never
   transitioned (paint cost) - the lift is a transform. ─────────────── */
@media (hover:hover) and (pointer:fine){
  .eo-offer,.eo-card--interactive{will-change:transform}
  .eo-offer:hover,.eo-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--eo-elev-2)}
  .eo-offer:active{transform:translateY(0) scale(.995)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .eo-offer:hover,.eo-card--interactive:hover{transform:none;box-shadow:var(--eo-elev-2)}
}

/* ── Offer grid: at most 3 columns until there are 8+ offers.
   PHP adds .eo-grid--cap3 while count < 8. ─────────────────────────── */
@media (min-width:75em){
  .eo-grid--cap3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.eo-list--featured{grid-template-columns:1fr;max-width:52rem}

/* ── Home hero: two columns, art on the right. ─────────────────────── */
.eo-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--eo-s-10);align-items:center}
.eo-hero__title{max-width:16ch}

/* ── Offer detail: sticky start panel, no sticky bottom bar. ───────── */
.eo-detail__layout{grid-template-columns:minmax(0,2fr) minmax(20rem,1fr);gap:var(--eo-s-8);align-items:start}
.eo-detail__aside{position:sticky;top:calc(var(--eo-nav-h) + var(--eo-s-6));z-index:var(--eo-z-sticky-local)}
.eo-start-bar{position:static;margin-inline:0;padding-inline:0;box-shadow:none;background:transparent}

/* ── Legal layout: sticky table of contents beside the prose. ──────── */
.eo-legal{grid-template-columns:minmax(14rem,16rem) minmax(0,1fr);gap:var(--eo-s-10);align-items:start}
.eo-legal__head{grid-column:1/-1}
.eo-legal__toc{position:sticky;top:calc(var(--eo-nav-h) + var(--eo-s-6));z-index:var(--eo-z-sticky-local);
  max-height:calc(100svh - var(--eo-nav-h) - var(--eo-s-10));overflow:auto}
.eo-legal__toc>details{display:contents}
.eo-legal__toc summary{display:none}

/* ── Dashboard / wallet: two-column split. ─────────────────────────── */
.eo-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(18rem,1fr);gap:var(--eo-s-6);align-items:start}
.eo-split--even{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── Auth: optional 1:1 split with a solid brand panel. ────────────── */
.eo-auth--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--eo-s-10);
  align-items:center;max-width:67.5rem;margin-inline:auto}
.eo-auth--split .eo-auth__card{width:100%}

/* ── Tables get a little more room and a compact header. ──────────── */
.eo-table th,.eo-table td{padding:var(--eo-s-3) var(--eo-s-5)}

/* ── Timeline can run horizontally inside the dashboard card. ─────── */
.eo-timeline--horizontal{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--eo-s-3)}
.eo-timeline--horizontal .eo-timeline__item{grid-template-columns:1fr;text-align:center;justify-items:center;gap:var(--eo-s-2)}
.eo-timeline--horizontal .eo-timeline__item::before{left:50%;right:auto;top:13px;bottom:auto;width:100%;height:2px}

/* ── Footer: four real columns and a wider legal row. ─────────────── */
.eo-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--eo-s-8)}
.eo-footer__legal{display:flex;flex-wrap:wrap;gap:var(--eo-s-4);justify-content:space-between}

/* ── Toasts dock to the bottom-right away from the tab bar. ───────── */
.eo-toast-region{left:auto;right:var(--eo-s-6);bottom:var(--eo-s-6);justify-items:end;padding-inline:0}

/* ── Dialogs are centred cards again, not sheets. ─────────────────── */
.eo-dialog{margin:auto}