/* The Google Ads campaign builder.
   Its own file because it is a screen, not a component, and because app.css is already
   168 kB. Everything here is prefixed .ga- so nothing can reach out of it.

   Dennis, 2026-09-20: this should read as "a campaign creation workspace", not "a small
   form with a sidebar". So the page takes the width it is given, the three columns are
   sized to their jobs rather than squeezed, and the type has a hierarchy instead of
   being uniformly small.

   One accent, named once. The panel's accent is violet and every other screen uses it,
   which is what "match the rest of ClickMoor" means; if it ever becomes lime, it becomes
   lime here in one line. Google's own colours appear only in the account mark, because
   the integration is Google's and the interface is ours. */

.ga-page{
  --ga-acc:var(--vio);
  --ga-acc-soft:rgba(139,125,255,.12);
  --ga-acc-line:rgba(139,125,255,.34);
  padding:2px 0 44px;
}

/* ---- header ------------------------------------------------------------------- */
.ga-crumb{color:var(--dim);font-size:12.5px;margin:2px 0 12px}
.ga-crumb i{font-style:normal;opacity:.55;margin:0 7px}

.ga-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}
.ga-top h1{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.ga-top p{color:var(--mut);font-size:13.5px;margin-top:8px;max-width:680px;line-height:1.55}
.ga-topbtns{display:flex;gap:9px;flex:none;padding-top:4px}

.ga-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--tx);
  font-family:inherit;font-size:13px;font-weight:600;padding:10px 17px;border-radius:10px;
  cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ga-btn:hover{background:rgba(255,255,255,.08)}
.ga-btn.solid{background:var(--ga-acc);border-color:var(--ga-acc);color:#fff}
.ga-btn.solid:hover{filter:brightness(1.08)}
.ga-btn.solid:disabled{background:rgba(255,255,255,.05);border-color:var(--line);
  color:var(--dim);cursor:not-allowed;filter:none}
.ga-btn.wide{width:100%;justify-content:center}
.ga-btn .ga-ic{width:15px;height:15px}

.ga-ic{width:17px;height:17px;flex:none;vertical-align:-3px}

/* ---- the account card ---------------------------------------------------------
   Not a warning strip. It answers three things at a glance: which account, whether it
   is connected, and where the campaign will be created. */
.ga-acct{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;margin-bottom:18px}
.ga-acct.ok{border-color:rgba(52,211,153,.22);background:rgba(52,211,153,.035)}
.ga-acct-l{display:flex;gap:14px;align-items:center;min-width:0}
.ga-acct-mark{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.06)}
.ga-acct-mark .ga-gg{width:20px;height:20px}
.ga-acct-l .ga-ic{color:var(--warn)}
.ga-acct.ok .ga-acct-l .ga-ic{color:var(--good)}
.ga-acct span{display:block;color:var(--mut);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.ga-acct b{display:block;font-size:16px;font-weight:650;margin-top:3px}
.ga-acct em{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12.5px;
  font-style:normal;margin-top:4px;line-height:1.45}
.ga-acct.ok em{color:var(--good)}

/* ---- the ClickMoor context strip ----------------------------------------------
   Which of our own things this campaign is for. Filled in from the tracker, and it says
   so, because a value somebody did not type is a value they will want to check. */
.ga-ctxbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:18px}
.ga-ctxcell{background:#0c0b12;padding:13px 16px;min-width:0}
.ga-ctxcell span{display:block;color:var(--mut);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.ga-ctxcell b{display:block;font-size:13.5px;font-weight:600;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-ctxcell b.na{color:var(--dim);font-weight:500}
/* Before a review site is chosen there is nothing to show, so the strip says what will
   fill it rather than repeating "Not set" five times above the fold. */
.ga-ctxbar.empty{grid-template-columns:1fr}
.ga-ctxbar.empty .ga-ctxcell{display:flex;align-items:center;gap:10px}
/* A sentence, not a label: the uppercase treatment above belongs to the field names. */
.ga-ctxbar.empty span{text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:400;color:var(--mut);line-height:1.5}
.ga-ctxbar.empty .ga-ic{width:16px;height:16px;color:var(--dim)}
.ga-auto{display:inline-block;margin-top:5px;color:var(--dim);font-size:10.5px}

/* ---- the three columns --------------------------------------------------------
   A wizard wide enough to read, content that takes what is left, and a summary wide
   enough to hold a label and a value on one line. */
.ga-cols{display:grid;grid-template-columns:232px minmax(0,1fr) 344px;gap:18px;align-items:start}

.ga-nav{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;
  position:sticky;top:14px;display:flex;flex-direction:column;gap:3px}
.ga-step{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;
  background:0;color:var(--mut);font-family:inherit;padding:12px 12px;border-radius:11px;
  cursor:pointer;transition:.13s;position:relative}
.ga-step:hover{background:rgba(255,255,255,.04)}
.ga-step.on{background:var(--ga-acc-soft)}
.ga-step.on:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--ga-acc)}
.ga-num{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--mut);font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.ga-step.on .ga-num{background:var(--ga-acc);color:#fff}
.ga-step.done .ga-num{background:rgba(52,211,153,.18);color:var(--good)}
.ga-step.done .ga-num .ga-ic{width:14px;height:14px}
.ga-step.bad .ga-num{background:rgba(248,113,113,.16);color:var(--bad)}
.ga-stept b{display:block;font-size:13.5px;font-weight:600;color:var(--mut);line-height:1.3}
.ga-step.on .ga-stept b{color:var(--tx)}
.ga-step.done .ga-stept b,.ga-step.bad .ga-stept b{color:var(--tx)}
.ga-stept em{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}

.ga-main{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 0;min-width:0;display:flex;flex-direction:column}
.ga-h{font-size:19px;font-weight:700;letter-spacing:-.015em}
.ga-sub{color:var(--mut);font-size:13px;margin:6px 0 18px;line-height:1.55;max-width:660px}

/* ---- campaign type cards ------------------------------------------------------
   Big enough that the difference between them is readable without hovering. */
.ga-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.ga-card{position:relative;text-align:left;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.02);padding:18px 17px 17px;cursor:pointer;color:var(--tx);
  font-family:inherit;transition:.14s}
.ga-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.ga-card.on{border-color:var(--ga-acc);background:var(--ga-acc-soft);
  box-shadow:0 0 0 1px var(--ga-acc-line)}
.ga-card.off{opacity:.38;cursor:not-allowed}
.ga-card.off:hover{background:rgba(255,255,255,.02);border-color:var(--line);box-shadow:none}
/* Where this campaign type actually runs. Google's marks, at the size where they are
   still recognisable and no larger; the card around them stays ours. */
.ga-surf{display:flex;align-items:center;gap:7px;margin-bottom:13px;min-height:18px}
.ga-surf svg{width:17px;height:17px;flex:none}
.ga-card.off .ga-surf{filter:grayscale(1);opacity:.75}

/* Kept for anything still asking for the old single tile. */
.ga-card-i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--tx);margin-bottom:13px}
.ga-card.on .ga-card-i{background:rgba(139,125,255,.24);color:var(--ga-acc)}
.ga-card b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.ga-card em{display:block;font-style:normal;color:var(--mut);font-size:12.5px;line-height:1.5;margin-top:6px}
.ga-card-off{display:block;color:var(--warn);font-size:11.5px;margin-top:10px;line-height:1.4}
.ga-card-ck{position:absolute;top:13px;right:13px;color:var(--ga-acc)}
.ga-card-ck .ga-ic{width:19px;height:19px}

/* ---- callouts ------------------------------------------------------------------
   The recommendation is a note, not an announcement. */
.ga-tip,.ga-next-note{border-radius:12px;padding:15px 16px;margin-top:20px;
  font-size:13px;line-height:1.55}
.ga-tip{display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.ga-tip .ga-ic{color:var(--ga-acc);margin-top:1px}
.ga-tip b,.ga-next-note b{display:block;color:var(--mut);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}
.ga-tip span,.ga-next-note span{color:var(--tx);display:block}
.ga-next-note{display:block;background:rgba(255,255,255,.03);border:1px solid var(--line)}

/* ---- what ClickMoor already decided --------------------------------------------
   Read, not answered. It is shown as a settled fact with one way to change it, rather
   than as fields that invite a second opinion. */
.ga-inherit{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);
  padding:16px 18px}
.ga-inh-main{min-width:0;flex:1}
.ga-inh-main b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em}
.ga-inh-main span{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}
.ga-inh-rows{display:grid;gap:4px;flex:none}
.ga-inh-rows.two{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  margin-top:14px}
.ga-inh-rows>div{display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.ga-inh-rows.two>div{display:block}
.ga-inh-rows span{color:var(--dim);flex:none}
.ga-inh-rows b{color:var(--tx);font-weight:600;word-break:break-word}
.ga-inh-rows.two span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.ga-inh-rows.two b{display:block;font-size:14px;margin-top:5px}
.ga-legend em{font-style:normal;color:var(--dim);letter-spacing:0;text-transform:none;
  font-size:11.5px;font-weight:500}
.ga-link.inline{display:inline;padding:0;margin-left:9px;font-size:11.5px;font-weight:500}

/* ---- ad groups ------------------------------------------------------------------
   One row per group saying what is in it and whether it is finished, so the state of a
   campaign with four of them is readable without opening each one. */
.ga-agtabs{display:grid;gap:7px;margin-bottom:11px}
.ga-agtab{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  width:100%;text-align:left;border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.02);color:var(--tx);font-family:inherit;
  padding:11px 14px;cursor:pointer;transition:.13s}
.ga-agtab:hover{border-color:rgba(255,255,255,.18)}
.ga-agtab.on{border-color:var(--ga-acc);background:var(--ga-acc-soft)}
.ga-agname{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-agmeta{grid-column:1;color:var(--mut);font-size:11.5px}
.ga-agdot{grid-row:1/3;grid-column:2;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%}
.ga-agdot .ga-ic{width:14px;height:14px}
.ga-agdot.ok{background:rgba(52,211,153,.16);color:var(--good)}
.ga-agdot.todo{background:rgba(251,191,36,.14);color:var(--warn)}
/* The open group is one block, set off from the list above it. */
.ga-agbody{border-left:2px solid var(--ga-acc-line);padding-left:14px;margin-bottom:13px}

/* ---- a switch with room to explain itself --------------------------------------
   These settings change what Google is allowed to do on its own, so each one needs a
   sentence rather than a label. */
.ga-swrow{display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  padding:15px 16px}
.ga-swrow+.ga-swrow{margin-top:10px}
.ga-swrow:hover{border-color:rgba(255,255,255,.18)}
.ga-swrow.off{opacity:.5;cursor:not-allowed}
.ga-swrow input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--ga-acc)}
.ga-swrow b{display:block;font-size:13.5px;font-weight:600}
.ga-swrow em{display:block;font-style:normal;color:var(--mut);font-size:12.5px;
  line-height:1.55;margin-top:4px}

/* ---- ad preview -----------------------------------------------------------------
   One result at the width a result actually gets, so the line lengths mean something.
   Deliberately small: Dennis, "NOT a giant Google Ads mockup". */
.ga-prev{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;
  padding:16px 18px}
.ga-prev-ad{max-width:600px}
.ga-prev.mob .ga-prev-ad{max-width:360px}
.ga-prev-top b{display:inline-block;font-size:12px;font-weight:700;color:var(--tx)}
.ga-prev-url{color:var(--mut);font-size:12.5px;margin-top:2px;word-break:break-all}
/* Blue because a search result headline is blue, and this is the one place the preview
   should look like the thing it previews. */
.ga-prev-h{color:#8ab4f8;font-size:18px;line-height:1.35;margin-top:5px;font-weight:400}
.ga-prev.mob .ga-prev-h{font-size:16px}
.ga-prev-h span{color:var(--dim);margin:0 2px}
.ga-prev-d{color:#cfd3dc;font-size:13px;line-height:1.55;margin-top:6px}
/* Before anything is written, the lines are placeholders and should read as such. */
.ga-prev-h.ghost,.ga-prev-d.ghost{color:var(--dim)}
.ga-prevbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:11px}
.ga-prevbar .ga-link{padding:0}

/* ---- what the page earns ---------------------------------------------------------
   Advice built from the payouts of the brands actually on the review site. Each line is
   a button: nothing is filled in on its own. */
.ga-advice{border:1px solid rgba(52,211,153,.22);background:rgba(52,211,153,.045);
  border-radius:13px;padding:16px;margin-bottom:13px}
.ga-advh{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ga-advh .ga-ic{width:16px;height:16px;color:var(--good)}
.ga-advh b{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--good)}
.ga-advice p{color:var(--mut);font-size:12.5px;line-height:1.6}
.ga-advice p b{color:var(--tx);font-weight:650}
.ga-advrows{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;margin:13px 0 11px}
.ga-advrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);
  color:var(--tx);font-family:inherit;padding:10px 12px;cursor:pointer;text-align:left;
  transition:.13s}
.ga-advrow:hover{border-color:var(--good);background:rgba(52,211,153,.08)}
.ga-advrow b{display:block;font-size:15px;font-weight:700}
.ga-advrow em{display:block;font-style:normal;color:var(--mut);font-size:11px;margin-top:3px}
.ga-advrow i{font-style:normal;color:var(--good);font-size:11.5px;font-weight:600;flex:none}
.ga-advnote{color:var(--dim);font-size:11.5px;line-height:1.55}

/* ---- bid strategy cards --------------------------------------------------------
   A strategy is a decision with consequences, not an item in a list, so each one says
   what it does and carries the number it needs. The chosen one grows the field; the
   others stay one line tall. */
.ga-bidlist{display:grid;gap:18px}
.ga-bidgroup{display:grid;gap:8px}
.ga-bidgh{margin-bottom:2px}
.ga-bidgh b{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
/* Which of the three the stated goal points at. A hint, not a restriction: the other
   groups are still right there. */
.ga-bidgh b i{font-style:normal;letter-spacing:0;text-transform:none;font-size:10.5px;
  font-weight:600;color:var(--ga-acc);background:var(--ga-acc-soft);
  border:1px solid var(--ga-acc-line);border-radius:999px;padding:2px 9px}
.ga-bidgh em{display:block;font-style:normal;color:var(--dim);font-size:11.5px;margin-top:3px}
.ga-bidcard{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  transition:.13s}
.ga-bidcard:hover{border-color:rgba(255,255,255,.18)}
.ga-bidcard.on{border-color:var(--ga-acc);background:var(--ga-acc-soft)}
.ga-bidpick{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  border:0;background:0;color:var(--tx);font-family:inherit;padding:14px 16px;cursor:pointer}
.ga-bidpick b{display:block;font-size:13.5px;font-weight:650}
.ga-bidpick em{display:block;font-style:normal;color:var(--mut);font-size:12.5px;
  line-height:1.5;margin-top:3px}
/* At rest the group heading has already said what kind of strategy this is, so the
   card only needs its name. The chosen one explains itself in full. */
.ga-bidcard:not(.on) .ga-bidpick{padding:12px 16px}
.ga-bidcard:not(.on) .ga-bidpick em{display:none}
.ga-bidcard:not(.on):hover .ga-bidpick em{display:block}
.ga-bidpick .ga-dot{margin-top:2px}
.ga-bidcard.on .ga-dot{border-color:var(--ga-acc);box-shadow:inset 0 0 0 3px var(--ga-acc)}
/* The field belongs to the card, so it sits inside it and lines up under the label. */
.ga-bidf{display:block;padding:0 16px 15px 40px;max-width:320px}
.ga-bidf>span{display:block;color:var(--mut);font-size:12px;font-weight:600;margin-bottom:7px}
.ga-bidf>span i{font-style:normal;color:var(--dim);font-weight:500;margin-left:6px}

.ga-hint{display:block;font-style:normal;color:var(--dim);font-size:11.5px;
  line-height:1.5;margin-top:6px}

/* ---- can this strategy actually do its job ------------------------------------- */
.ga-compat{margin-top:14px;border-radius:11px;padding:12px 14px;
  background:rgba(52,211,153,.05);border:1px solid rgba(52,211,153,.2)}
.ga-compat.warn{background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.24)}
.ga-crow{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  color:var(--mut)}
.ga-crow+.ga-crow{margin-top:7px}
.ga-crow .ga-ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--good)}
.ga-compat.warn .ga-crow .ga-ic{color:var(--warn)}

/* ---- locations ----------------------------------------------------------------
   A row per place, saying what it is and how it is targeted. A chip can be added and
   removed; it cannot say "presence only". */
.ga-loclist{display:grid;gap:8px;margin-bottom:12px}
.ga-locrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.025);padding:11px 12px}
.ga-locname{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.ga-locname .ga-ic{width:15px;height:15px;color:var(--mut);flex:none}
.ga-locname b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-locmode{color:var(--dim);font-size:11.5px;flex:none}
.ga-rm.sm{width:28px;height:28px;font-size:15px;border-radius:8px}

/* ---- device bid adjustments ------------------------------------------------------
   Three numbers, not three toggles: a Search campaign runs everywhere and this is only
   how much more or less a device is worth. */
.ga-devgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ga-devrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);
  padding:10px 12px}
.ga-devrow>span:first-child{font-size:13px;font-weight:600;color:var(--tx)}
.ga-devin{position:relative;flex:none;width:92px}
.ga-devin input{padding-right:26px;text-align:right}
.ga-devin i{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--dim);font-size:12px;pointer-events:none}

/* ---- fields -------------------------------------------------------------------- */
.ga-fieldset{border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:13px;
  background:rgba(255,255,255,.015)}
.ga-fieldset.track{background:rgba(52,211,153,.04);border-color:rgba(52,211,153,.18)}
/* White, not muted: a section title is how you find your place on a long page, and
   small uppercase in grey is quiet twice over. */
.ga-legend{display:flex;align-items:center;gap:8px;color:var(--tx);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px}
.ga-legend em{font-style:normal;color:var(--dim);letter-spacing:0;text-transform:none;font-size:12px}

.ga-f{display:block;margin-bottom:13px}
.ga-f:last-child{margin-bottom:0}
.ga-f>span{display:block;color:var(--mut);font-size:12px;font-weight:600;margin-bottom:7px}
.ga-f>span i{font-style:normal;color:var(--dim);font-weight:500;margin-left:6px}
.ga-f.third{max-width:260px}
.ga-grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

.ga-page input[type=text],.ga-page input[type=number],.ga-page input[type=date],
.ga-page select,.ga-page textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  color:var(--tx);font-family:inherit;font-size:13.5px;padding:10px 12px;transition:.13s}
.ga-page textarea{resize:vertical;line-height:1.55}
.ga-page input:focus,.ga-page select:focus,.ga-page textarea:focus{
  outline:0;border-color:var(--ga-acc);background:var(--ga-acc-soft);
  box-shadow:0 0 0 3px rgba(139,125,255,.13)}
.ga-page input:disabled,.ga-page select:disabled{opacity:.5;cursor:not-allowed}
.ga-page select{color-scheme:dark;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.ga-page select option{background:#141220;color:var(--tx)}

/* ---- dropdowns -----------------------------------------------------------------
   The native select is still there, hidden, driving everything. This is what is seen. */
.ga-sel{position:relative;display:block}
/* Two classes deep so it beats .ga-page select:disabled, which is also two and would
   otherwise leave a disabled select showing at half opacity behind its replacement. */
.ga-page .ga-sel select{position:absolute;opacity:0;pointer-events:none;width:1px;
  height:1px;margin:0;padding:0;border:0}
.ga-selbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;color:var(--tx);font-family:inherit;font-size:13.5px;
  padding:11px 13px;cursor:pointer;text-align:left;transition:.13s}
.ga-selbtn:hover{border-color:rgba(255,255,255,.2)}
.ga-selbtn:focus-visible,.ga-sel.open .ga-selbtn{outline:0;border-color:var(--ga-acc);
  background:var(--ga-acc-soft);box-shadow:0 0 0 3px rgba(139,125,255,.13)}
.ga-selbtn.none{color:var(--dim)}
.ga-selbtn[disabled]{opacity:.5;cursor:not-allowed}
.ga-selbtn i{flex:none;border:solid var(--mut);border-width:0 1.6px 1.6px 0;padding:2.5px;
  transform:rotate(45deg) translateY(-2px);transition:.15s}
.ga-sel.open .ga-selbtn i{transform:rotate(-135deg) translateY(-1px)}

.ga-selmenu{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
  background:#15131f;border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:5px;max-height:280px;overflow-y:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.ga-sel.up .ga-selmenu{top:auto;bottom:calc(100% + 5px)}
.ga-selopt{display:block;width:100%;text-align:left;border:0;background:0;color:var(--tx);
  font-family:inherit;font-size:13.5px;padding:9px 11px;border-radius:8px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-selopt:hover,.ga-selopt.cursor{background:rgba(255,255,255,.07)}
.ga-selopt.on{background:var(--ga-acc-soft);color:var(--tx);font-weight:600}
.ga-selopt.placeholder{color:var(--dim)}

.ga-count{position:relative;display:block}
.ga-count input{padding-right:82px}
/* The counter floats over the right-hand end of the field, so it needs its own ground
   or a long value reads straight through it. */
.ga-count em{position:absolute;right:1px;top:1px;bottom:1px;display:flex;align-items:center;
  padding:0 11px 0 13px;border-radius:0 9px 9px 0;font-style:normal;color:var(--dim);
  font-size:11.5px;pointer-events:none;background:linear-gradient(90deg,transparent,#131220 12px)}
.ga-count em.over{color:var(--bad)}

.ga-link{border:0;background:0;color:var(--ga-acc);font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;padding:8px 0 0;text-align:left}
.ga-link:hover{text-decoration:underline}

.ga-pills{display:flex;flex-wrap:wrap;gap:8px}
.ga-pill{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;
  cursor:pointer;transition:.13s}
.ga-pill:hover{color:var(--tx);border-color:rgba(255,255,255,.2)}
.ga-pill.on{background:var(--ga-acc-soft);border-color:var(--ga-acc);color:var(--tx)}

.ga-radios{display:grid;gap:9px}
.ga-radios.row{grid-template-columns:1fr 1fr}
.ga-radio{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.02);color:var(--tx);font-family:inherit;padding:13px 15px;
  cursor:pointer;text-align:left;transition:.13s}
.ga-radio:hover{background:rgba(255,255,255,.05)}
.ga-radio.on{border-color:var(--ga-acc);background:var(--ga-acc-soft)}
.ga-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--dim);flex:none;transition:.13s}
.ga-radio.on .ga-dot{border-color:var(--ga-acc);box-shadow:inset 0 0 0 3px var(--ga-acc)}
.ga-radio b{font-size:13px;font-weight:600}

.ga-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;color:var(--mut);
  font-size:13px;line-height:1.5}
.ga-check input{width:16px;height:16px;flex:none;accent-color:var(--ga-acc);margin-top:1px}

.ga-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ga-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ga-acc-soft);
  border:1px solid var(--ga-acc-line);border-radius:999px;padding:7px 9px 7px 14px;font-size:12.5px}
.ga-chip button{border:0;background:0;color:var(--mut);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.ga-chip button:hover{color:var(--bad)}
.ga-chip.add{background:0;border:1px dashed var(--line);color:var(--mut);cursor:pointer;
  font-family:inherit;font-weight:600;padding:8px 15px}
.ga-chip.add:hover{color:var(--tx);border-color:var(--ga-acc)}

/* Up to fifteen of these on one step, so every pixel here is multiplied. */
/* A sitelink is the link text plus two description lines, in that order, which is the
   order they appear in the ad. Side by side they were 150px each with an 80px counter
   floating over them, so you could not read what you had typed. */
.ga-slrow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);
  padding:10px 11px;margin-bottom:8px}
/* Placed explicitly: left to itself, a spanning button takes the first free cell and
   ends up above the field it removes. */
.ga-slrow .ga-count:nth-child(1){grid-area:1/1/2/3}
.ga-slrow .ga-count:nth-child(2){grid-area:2/1/3/2}
.ga-slrow .ga-count:nth-child(3){grid-area:2/2/3/3}
.ga-slrow .ga-rm{grid-area:1/3/3/4;align-self:center}
.ga-slrow input{padding:9px 12px}
@media (max-width:820px){
  .ga-slrow{grid-template-columns:1fr auto}
  .ga-slrow .ga-count:nth-child(1){grid-column:1/2}
  .ga-slrow .ga-rm{grid-row:1/4}
}

.ga-adrow{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.ga-adrow input{padding:9px 12px}
.ga-adrow .ga-count{flex:1}
.ga-rm{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:16px;line-height:1;flex:none}
.ga-rm:hover{color:var(--bad);border-color:rgba(248,113,113,.4)}

.ga-more{border:1px solid var(--line);border-radius:13px;margin-bottom:16px;background:rgba(255,255,255,.015)}
.ga-more summary{cursor:pointer;padding:15px 18px;font-size:13px;font-weight:600;color:var(--mut);list-style:none}
.ga-more summary::-webkit-details-marker{display:none}
.ga-more summary:before{content:'▸';margin-right:9px;color:var(--dim)}
.ga-more[open] summary:before{content:'▾'}
.ga-more summary em{font-style:normal;color:var(--dim);font-weight:500;margin-left:7px}
.ga-more>.ga-f{padding:0 18px 16px}

.ga-ctx{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--mut);font-size:12.5px;
  background:rgba(255,255,255,.03);border-radius:10px;padding:11px 13px}
.ga-ctx .ga-ic{color:var(--ga-acc);width:16px;height:16px}
.ga-ctx b{color:var(--tx);font-weight:600}

.ga-trow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:13px;color:var(--mut)}
.ga-trow+.ga-trow{border-top:1px solid rgba(255,255,255,.05)}
.ga-ok{color:var(--good);font-weight:600}
.ga-trow code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--tx);
  background:rgba(255,255,255,.05);border-radius:6px;padding:4px 8px}
.ga-tnote{color:var(--dim);font-size:12px;line-height:1.55;margin-top:11px}

.ga-est{margin-top:12px;color:var(--mut);font-size:13px}
.ga-est b{color:var(--tx)}
.ga-est em{display:block;font-style:normal;color:var(--dim);font-size:12px;margin-top:5px;
  line-height:1.55;max-width:560px}

/* ---- validation ----------------------------------------------------------------
   "5 items still needed" is a number, not an answer. These name the fields. */
.ga-msg{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5;margin-top:8px}
.ga-msg .ga-ic{width:14px;height:14px;margin-top:1px;flex:none}
.ga-msg.err{color:var(--bad)}
.ga-msg.warn{color:var(--warn)}
.ga-msg.info{color:var(--mut)}
.ga-msg.big{border-radius:12px;padding:15px 16px;margin:0 0 16px;font-size:13px}
.ga-msg.big b{display:block;font-size:12.5px;margin-bottom:4px}
.ga-msg.big>div>span{display:block;color:var(--mut);font-size:12.5px;line-height:1.5}
/* A field name that wraps must not look like two broken links, so the underline waits
   for the pointer. */
.ga-msg.big li .ga-link{text-decoration:none;font-weight:500;line-height:1.45}
.ga-msg.big li .ga-link:hover{text-decoration:underline}
.ga-msg.big.err{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.28)}
.ga-msg.big.warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.26)}
.ga-msg.big ul{margin:8px 0 0 17px}
.ga-msg.big li{margin-top:4px}
.ga-msg.big .ga-link{color:inherit;text-decoration:underline;font-size:13px;padding:0}

/* ---- the summary column --------------------------------------------------------
   Wide enough that a label and its value sit on one line, with air between sections so
   the eye can find the one it wants. */
.ga-sum{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  position:sticky;top:14px}
.ga-sum-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:17px}
.ga-sum-h b{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx)}
.ga-gmark{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:11.5px;font-weight:600}
.ga-gg{width:16px;height:16px}
.ga-ssect{margin-bottom:22px}
.ga-ssect:last-of-type{margin-bottom:18px}
.ga-sh{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ga-sh .ga-ic{width:14px;height:14px;color:var(--dim)}
.ga-sh b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx);flex:1}
.ga-edit{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ga-acc);
  font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:4px 10px;
  border-radius:7px;transition:.13s}
.ga-edit:hover{background:var(--ga-acc-soft);border-color:var(--ga-acc-line)}
.ga-srow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:12.5px;padding:5px 0}
.ga-srow>span:first-child{color:var(--dim);flex:none;max-width:50%}
.ga-srow>span:last-child{color:var(--tx);text-align:right;word-break:break-word;font-weight:500}
.ga-srow>span.na{color:var(--dim);font-weight:400}
.ga-srow.one{align-items:center;gap:9px;justify-content:flex-start}
.ga-srow.one .ga-ic{width:15px;height:15px;color:var(--ga-acc)}
.ga-sum-f{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.ga-sum-note{color:var(--dim);font-size:11.5px;text-align:center;margin-top:10px;line-height:1.5}
.ga-sum-miss{color:var(--warn);font-size:11.5px;text-align:center;margin-top:6px}

.ga-sumtoggle{display:none}

/* ---- review -------------------------------------------------------------------- */
.ga-rv{border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:13px;
  background:rgba(255,255,255,.015)}
.ga-rv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:11px;margin-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06)}
.ga-rv-h b{font-size:14px}
.ga-rv .ga-srow{font-size:13px;padding:5px 0}

/* ---- the step footer -----------------------------------------------------------
   Same place on every step, inside the card it belongs to, so the eye never hunts for
   it. Sticky to the bottom of the card on a long step. */
.ga-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line);margin:20px -22px 0;padding:14px 22px;
  position:sticky;bottom:0;background:#0f0e15;border-radius:0 0 14px 14px}

/* ---- launch confirmation -------------------------------------------------------- */
.ga-conf div{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0}
.ga-conf div span{color:var(--mut)}
.ga-conf div b{text-align:right}
.ga-conf-w{color:var(--warn);font-size:12.5px;line-height:1.55;margin-top:12px}

/* ---- narrower desktops and tablets ---------------------------------------------- */
@media (max-width:1560px){
  .ga-cols{grid-template-columns:216px minmax(0,1fr) 320px;gap:16px}
}
@media (max-width:1280px){
  .ga-cols{grid-template-columns:200px minmax(0,1fr)}
  .ga-sum{grid-column:1/-1;position:static}
  .ga-radios.row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ga-page{padding-bottom:28px}
  .ga-top{flex-direction:column;gap:14px}
  .ga-top h1{font-size:23px}
  .ga-topbtns{width:100%;padding-top:0}
  .ga-topbtns .ga-btn{flex:1;justify-content:center}
  .ga-acct{flex-direction:column;align-items:stretch;gap:13px}
  .ga-acct .ga-btn{width:100%;justify-content:center}
  .ga-ctxbar{grid-template-columns:1fr 1fr}
  .ga-ctxcell{padding:11px 13px}
  /* Repeating this under five values costs more height than it is worth here. */
  .ga-auto{display:none}
  .ga-cols{grid-template-columns:minmax(0,1fr)}
  /* The steps become a single scrolling strip so the current one is always in view. */
  .ga-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding:8px;
    scrollbar-width:none}
  .ga-nav::-webkit-scrollbar{display:none}
  .ga-step{flex:none;padding:9px 12px}
  .ga-step.on:before{display:none}
  .ga-stept em{display:none}
  .ga-stept b{white-space:nowrap}
  .ga-main{padding:18px 16px 0;border-radius:13px}
  .ga-grid2{grid-template-columns:1fr}
  .ga-cards{grid-template-columns:1fr 1fr;gap:10px}
  .ga-card{padding:14px 13px}
  .ga-card em{display:none}
  .ga-f.third{max-width:none}
  /* The summary does not disappear on a phone: it folds behind its own header, with
     enough on the header to be worth reading unopened. */
  .ga-sumtoggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;border:1px solid var(--line);background:var(--card);color:var(--tx);
    font-family:inherit;font-size:13px;font-weight:600;padding:14px 16px;border-radius:13px;
    cursor:pointer;text-align:left;margin-top:14px}
  .ga-sumtoggle em{display:block;font-style:normal;color:var(--mut);font-size:11.5px;
    font-weight:500;margin-top:3px}
  .ga-sumtoggle i{font-style:normal;color:var(--mut);transition:.15s;flex:none}
  .ga-sum{display:none;margin-top:10px}
  .ga-page.sumopen .ga-sum{display:block}
  .ga-page.sumopen .ga-sumtoggle i{transform:rotate(180deg)}
  .ga-foot{margin:18px -16px 0;padding:13px 16px}
  .ga-foot .ga-btn{padding:12px 17px}
}
@media (max-width:420px){
  .ga-cards{grid-template-columns:1fr}
  /* One per row leaves room for the description again, and a card with only a title in
     it is mostly empty. */
  .ga-card em{display:block}
  /* Deliberately still two columns: these values are short, and one column turns five
     facts into five screen-widths of scrolling. */
}