/* web.css — web-app-only chrome layered on top of the desktop CSS.
 * Provides the top header (brand + theme + language), makes the full-screen
 * overlays scrollable on small screens, and hides the desktop-only Manager tile.
 * Everything else (launcher, auth, work grids, results, buy) is styled by the
 * verbatim style.css + credits5gb.css. */

/* The desktop is a fixed-size window (overflow:hidden). A web page must be able
   to scroll when a panel is taller than the viewport (mobile especially). */
html, body { overflow: auto; height: auto; min-height: 100%; }

:root { --wh: 58px; }

/* ── one global header, always on top ──
   Keep the brand + theme + language visible on every screen (launcher, sign-in
   gate, and workspace) — like a normal site nav — so language/theme are always
   reachable. It overrides the desktop rule that made #header a relative in-flow
   bar covered by the full-screen service view. */
#header.web-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--wh);
  z-index: 700 !important;   /* above launcher(400), cg-app(500), buy(560) */
}
/* the launcher overlay and the full-screen app both start below the fixed header */
.cg-launcher-overlay { top: var(--wh) !important; }
.cg-app { top: var(--wh); }
/* the app-bar already carries the service badge + actions, so drop its duplicate
   3SKID wordmark (the global header has it) */
.cg-app-bar .cg-brand { display: none; }
/* sign-in gate: no service chosen yet — hide the in-service app-bar so only the
   header + the centered sign-in card show */
.cg-app.cg-authgate .cg-app-bar { display: none; }

/* ── launcher: center the two service tiles (was a 3-col grid with an empty slot) ── */
.cg-launcher-card { width: min(760px, 94vw); margin: 0 auto; }
.cg-choice-grid { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
@media (max-width: 680px) { .cg-choice-grid { grid-template-columns: minmax(0, 360px); } }

/* ───────────────────────── top header ───────────────────────── */
.web-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  min-height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
/* When the launcher menu is open, the shared rule bumps #header to z-index 450
   (above the launcher's 400). Give it a matching backdrop so it reads as a bar. */
:root.cg-menu-open .web-header { background: var(--panel); }

.web-brand { display: flex; flex-direction: column; line-height: 1.12; user-select: none; }
.web-brand-mark { font-weight: 800; letter-spacing: 3px; font-size: 18px; color: var(--txt); }
.web-brand-sub { font-size: 9.5px; letter-spacing: 2.5px; color: var(--mute); margin-top: 2px; }

.web-header-right { display: flex; align-items: center; gap: 8px; }

.web-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.web-hbtn:hover { border-color: rgba(var(--skid-accent-rgb), 0.7); }
.web-icon-btn { padding: 0 9px; }
.web-icon-btn svg { display: block; }

.web-lang-wrap { position: relative; }
.web-lang-btn svg { opacity: .8; }
/* base .lang-menu (style.css) is position:absolute + display:none; just reveal on .open */
.web-lang-menu.open { display: block; }

/* ───────────────────────── overlays: allow internal scroll ─────────────────────────
   The launcher and the in-app auth/work screens are full-height; on short or
   narrow viewports their content must scroll instead of being clipped. */
.cg-launcher-overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 14px; }
.cg-launcher-overlay .cg-launcher-card { margin: auto; }
.cg-app { overflow: hidden; }              /* the app-bar is fixed; the work area below scrolls */
.cg-auth { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cg-work { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Desktop-only Manager tile never shows on the web (belt-and-braces; also inline). */
#cgChoiceManager { display: none !important; }

/* ───────────────────────── mobile ───────────────────────── */
@media (max-width: 620px) {
  .web-header { padding: 8px 12px; gap: 8px; }
  .web-brand-sub { display: none; }
  .web-hbtn { height: 34px; padding: 0 10px; font-size: 12.5px; }
  .web-hbtn[data-i18n="cg.menu"] { display: none; }   /* the in-launcher card already is the picker */
  #cgServicesBtn { display: none; }
}

/* The desktop light-border framed a small fixed window; spun full-viewport it is
   a large (300vmax) continuously-animated disc that needlessly taxes the GPU on
   big monitors. The cyan accents on tiles/borders already carry the brand, so
   drop the effect on the web. */
#lightborder { display: none; }

/* ── RTL: keep the results tables LTR under Arabic/Farsi ──
   .cg-results / .cg-results-dev are flex-row tables whose columns hold LTR data
   (emails, links, codes). Without pinning, dir=rtl mirrors the column order so the
   checkbox and Line/Copy columns flip sides. Mirrors the desktop's #tableWrap fix. */
html[dir="rtl"] .cg-results,
html[dir="rtl"] .cg-results-dev { direction: ltr; }

/* ── narrow phones: keep the dense device-bind row usable ──
   The device table has 4 fixed columns (~308px floor) that overflow below ~344px,
   crushing the account/deliverable column. Tighten the fixed columns and side
   padding on small screens so the account line keeps readable width (all columns
   and their copy/open buttons stay present — no functionality removed). */
@media (max-width: 460px) {
  .cg-work { padding-left: 8px; padding-right: 8px; }
  .cg-rc-sel { flex-basis: 26px; }
  .cg-results-dev .cg-rc-link { flex-basis: 84px; }
  .cg-results-dev .cg-rc-charged { flex-basis: 54px; }
  .cg-rc-copy { flex-basis: 50px; }
  .cg-rc-status { flex: 0 1 90px; }
}