/* ============================================================
   GP Team Hub - income.css

   The Total Income planner. Its own layout, since it is not the same
   kind of tool as the two calculators beside it: those take a deal that
   exists and return its pay, and read as a form. This one takes a number
   that does not exist yet and returns the week it is made of, and reads
   as a sentence, its answer, and the controls under both.

   Every color is a token, and the four with meaning are the ones the
   planner's own charts wear for the same kind of thing: the brand blue
   for the street and the commission it earns, the green and the purple
   hues for the smaller parts, the neutral line color for the base that
   nobody sold. Nothing paints an edge to mean something.
   ============================================================ */

.earn{margin-top:14px;}

/* ---------------- The sentence ---------------- */
.earn-goal{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 20px 16px;
}
.earn-goal-say{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.earn-goal-lead{font-size:1.05rem;font-weight:600;color:var(--ink-soft);}
.earn-goal-base{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
}
.earn-goal-base .earn-goal-lead{font-size:.92rem;}
.earn-goal-gap{font-size:.92rem;color:var(--ink-soft);margin-left:auto;text-align:right;}
.earn-goal-gap b{color:var(--ink);}

.earn-in{
  display:inline-flex;align-items:baseline;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface-sunken);
  padding:2px 12px 4px 10px;
}
.earn-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-in-sign{font-size:1.35rem;font-weight:700;color:var(--ink-faint);margin-right:1px;}
.earn-in-box{
  width:6.2ch;
  border:none;background:transparent;padding:0;
  color:var(--ink);font:inherit;
  font-size:2.15rem;font-weight:700;letter-spacing:-.8px;line-height:1.25;
}
.earn-in-box:focus{outline:none;}
.earn-in-sm{padding:1px 9px 2px 8px;}
.earn-in-sm .earn-in-sign{font-size:1rem;}
.earn-in-sm .earn-in-box{font-size:1.35rem;width:5.4ch;letter-spacing:-.4px;}

.earn-range{width:100%;min-width:0;accent-color:var(--accent);height:26px;cursor:grab;touch-action:none;}
.earn-range:active{cursor:grabbing;}
.earn-range::-webkit-slider-thumb{cursor:grab;}
.earn-range::-moz-range-thumb{cursor:grab;}
.earn-goal-range{margin-top:10px;}

/* ---------------- Headings inside the tool ---------------- */
.earn-sec-head{margin:26px 0 10px;}
.earn-sec-head-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.earn-h{margin:0;font-size:1.02rem;font-weight:700;color:var(--ink);}
.earn-h-sec{margin:26px 0 10px;}
.earn-p{margin:5px 0 0;font-size:.86rem;color:var(--ink-soft);line-height:1.55;}

/* ---------------- The three mixes ----------------
   The chosen one is marked by its surface. */
.earn-mixes{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:760px){.earn-mixes{grid-template-columns:repeat(3,minmax(0,1fr));}}
.earn-mix{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  width:100%;text-align:left;
  padding:14px 15px 13px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
}
.earn-mix:hover{background:var(--surface-high);border-color:var(--line-strong);}
.earn-mix:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* The chosen card is the blue one. A tint behind tinted text reads as
   a card that is merely hovered, so the pick is solid and everything
   on it turns white. */
.earn-mix[data-on="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.earn-mix[data-on="true"] .earn-mix-top,
.earn-mix[data-on="true"] .earn-mix-said,
.earn-mix[data-on="true"] .earn-mix-num,
.earn-mix[data-on="true"] .earn-mix-num em,
.earn-mix[data-on="true"] .earn-mix-sub,
.earn-mix[data-on="true"] .earn-mix-week{color:var(--ink-inverse);}
.earn-mix[data-on="true"]:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.earn-mix-top{display:flex;flex-direction:column;gap:2px;font-size:.95rem;font-weight:700;color:var(--ink);}
.earn-mix-said{font-size:.78rem;font-weight:500;color:var(--ink-soft);}
.earn-mix-num{
  margin-top:8px;
  font-size:1.7rem;font-weight:700;line-height:1;letter-spacing:-.7px;color:var(--ink);
}
.earn-mix-num em{font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--ink-faint);margin-left:5px;}
.earn-mix-sub{font-size:.82rem;color:var(--ink-soft);line-height:1.5;}
.earn-mix-week{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.5;}

/* ---------------- The week ---------------- */
.earn-chain{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:900px){
  .earn-chain{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;}
  .earn-step + .earn-step::before{
    content:'\203A';
    position:absolute;left:-19px;top:50%;transform:translateY(-50%);
    font-size:1.7rem;line-height:1;color:var(--ink-faint);
  }
}
.earn-step{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'ic name' 'num num' 'sub sub';
  align-items:center;
  gap:3px 9px;
  padding:15px 16px 14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.earn-step-ic{grid-area:ic;font-size:.92rem;color:var(--ic);}
.earn-step-name{grid-area:name;font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);}
.earn-step-num{grid-area:num;margin-top:6px;font-size:2rem;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--ink);}
.earn-step-num em{font-style:normal;font-size:.86rem;font-weight:600;letter-spacing:0;color:var(--ink-faint);margin-left:4px;}
.earn-step-sub{grid-area:sub;margin-top:7px;font-size:.82rem;line-height:1.5;}
.earn-step-sub-q{color:var(--ink-soft);}
.earn-step-sub-q.earn-over{color:var(--ink);font-weight:700;}
.earn-step-key,
.earn-step-pay{background:var(--surface-high);border-color:var(--line-strong);}
.earn-step-pay .earn-step-num{font-size:1.7rem;}
.earn-step-key .earn-step-ic,
.earn-step-pay .earn-step-ic{color:var(--ink-soft);}

/* ---------------- The verdict ----------------
   State is the icon's color. The card stays neutral. */
.earn-verdict{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:12px;padding:12px 15px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.88rem;line-height:1.55;color:var(--ink-soft);
}
.earn-verdict b{color:var(--ink);}
.earn-verdict i{font-size:1rem;line-height:1.55;flex-shrink:0;}
.earn-verdict-on i{color:var(--good);}
.earn-verdict-short i{color:var(--gold);}
.earn-verdict-off i{color:var(--danger);}

/* ---------------- The sliders ---------------- */
.earn-tweaks{
  margin-top:8px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px 17px 16px;
}
.earn-tweaks .earn-sec-head{margin-top:16px;}
.earn-reset{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-soft);
  font-size:.82rem;font-weight:700;
}
.earn-reset:hover{background:var(--surface-high);color:var(--ink);border-color:var(--line-strong);}
.earn-reset:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-tw-grid{display:grid;grid-template-columns:1fr;gap:2px 22px;}
@media (min-width:640px){.earn-tw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1100px){.earn-tw-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.earn-tw{padding:9px 0 7px;min-width:0;}
.earn-tw-lab{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);
}
.earn-tw-note{font-size:.66rem;font-weight:600;letter-spacing:.4px;text-transform:none;color:var(--ink-faint);opacity:.8;}
.earn-tw-row{display:flex;align-items:center;gap:10px;}
.earn-tw-out{font-size:1.02rem;font-weight:700;color:var(--ink);min-width:74px;text-align:right;white-space:nowrap;}
.earn-tw-pick{display:flex;flex-direction:column;justify-content:center;}
.earn-tw-pick .sel{margin-top:1px;}

/* ---------------- The two switches ---------------- */
.earn-switches{
  display:grid;grid-template-columns:1fr;gap:9px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
}
@media (min-width:760px){.earn-switches{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);align-items:stretch;}}
.earn-mode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.earn-mode-btn{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 13px;text-align:left;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-soft);
}
.earn-mode-btn b{font-size:.85rem;color:var(--ink);}
.earn-mode-btn span{line-height:1.35;}
.earn-mode-btn span{font-size:.75rem;color:var(--ink-faint);}
.earn-mode-btn:hover{background:var(--surface-high);border-color:var(--line-strong);}
.earn-mode-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-mode-btn[data-on="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.earn-mode-btn[data-on="true"] b,
.earn-mode-btn[data-on="true"] span{color:var(--ink-inverse);}
.earn-mode-btn[data-on="true"]:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.earn-check{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-soft);
  font-size:.83rem;font-weight:600;line-height:1.4;
}
.earn-check:hover{background:var(--surface-high);border-color:var(--line-strong);}
.earn-check:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-check i{font-size:1.02rem;color:var(--ink-faint);flex-shrink:0;}
/* A checkbox says it is ticked with its box. The card behind it carries
   no highlight, because the card is not the thing being chosen. */
.earn-check[data-on="true"]{background:transparent;border-color:var(--line);color:var(--ink);}
.earn-check[data-on="true"] i{color:var(--accent-strong);}
.earn-check[data-on="true"]:hover{background:var(--surface-high);border-color:var(--line-strong);}

/* ---------------- The total, part by part ----------------
   The four colors are the planner's chart colors for the same kinds
   of thing. The base takes the neutral one, since nobody sold it. */
.earn-bar{
  display:flex;height:16px;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--surface-high);
  border:1px solid var(--line);
}
.earn-seg{width:var(--seg,0%);min-width:2px;background:var(--accent-strong);}
.earn-seg + .earn-seg{box-shadow:inset 1px 0 0 var(--surface-page);}
.earn-seg[data-seg="base"],.earn-row-dot[data-seg="base"]{background:var(--line-strong);}
.earn-seg[data-seg="comm"],.earn-row-dot[data-seg="comm"]{background:var(--accent-strong);}
.earn-seg[data-seg="act"], .earn-row-dot[data-seg="act"]{background:var(--hue-green-btn);}
.earn-seg[data-seg="inc"], .earn-row-dot[data-seg="inc"]{background:var(--hue-purple-btn);}
.earn-seg[data-seg="como"],.earn-row-dot[data-seg="como"]{background:var(--hue-blue-btn);}

.earn-keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:.82rem;color:var(--ink-soft);}
.earn-key{display:inline-flex;align-items:center;gap:7px;}
.earn-key b{color:var(--ink);}

.earn-rows{
  margin-top:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.earn-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;
  padding:11px 15px;
  font-size:.87rem;
  border-bottom:1px solid var(--line);
}
.earn-row:last-child{border-bottom:none;}
.earn-row-dot{width:10px;height:10px;flex-shrink:0;border-radius:var(--radius-pill);background:var(--line-strong);display:inline-block;}
.earn-row-dot-off{background:transparent;}
.earn-row-name{font-weight:700;color:var(--ink);min-width:150px;}
.earn-row-at{flex:1;min-width:210px;color:var(--ink-soft);font-size:.82rem;line-height:1.5;}
.earn-row-num{font-weight:700;color:var(--ink);margin-left:auto;white-space:nowrap;}
.earn-row[data-zero="true"] .earn-row-num{color:var(--ink-faint);}
.earn-row[data-zero="true"] .earn-row-dot{opacity:.35;}
/* One program under the incentives line, set in from it. */
.earn-row-sub{padding-left:37px;background:var(--surface-page);}
.earn-row-sub .earn-row-name{font-weight:600;font-size:.83rem;min-width:128px;}
.earn-row-sub .earn-row-num{font-weight:600;}
.earn-row-tot{background:var(--surface-high);}
.earn-row-tot .earn-row-num{font-size:1.05rem;}

/* ---------------- Notes under the total ---------------- */
.earn-note{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:11px;padding:12px 15px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.85rem;line-height:1.6;color:var(--ink-soft);
}
.earn-note b{color:var(--ink);}
.earn-note i{font-size:1rem;line-height:1.6;color:var(--ink-faint);flex-shrink:0;}
.earn-note a{color:var(--accent);}
.earn-note-quiet{background:var(--surface-page);}

/* ---------------- Narrow ---------------- */
@media (max-width:899px){
  .earn-chain{grid-template-columns:repeat(2,minmax(0,1fr));}
  .earn-step-num{font-size:1.6rem;}
  .earn-step-pay .earn-step-num{font-size:1.25rem;}
}
@media (max-width:520px){
  .earn-chain{grid-template-columns:1fr;}
  .earn-goal{padding:16px 15px 14px;}
  .earn-in-box{font-size:1.8rem;width:5.8ch;}
  .earn-goal-gap{margin-left:0;text-align:left;width:100%;}
  .earn-mode{grid-template-columns:1fr;}
  .earn-tweaks{padding:4px 14px 14px;}
  .earn-row-name{min-width:0;width:100%;}
  .earn-row-at{min-width:0;}
  .earn-row-sub{padding-left:15px;}
}

/* ---------------- The three sizes ----------------
   A card per size. Closed it is one line: the name on a colored head,
   the volume and what one merchant pays in year one. Open, the figures
   and the dealer switch. The heads take the three door and phone hues
   the planner wears for the same sizes of work, white text on each. */
.earn-sizes{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:760px){.earn-sizes{grid-template-columns:repeat(3,minmax(0,1fr));}}
.earn-size{
  display:flex;flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-size:.82rem;color:var(--ink-soft);
}
.earn-size-head{
  display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:6px 10px;
  width:100%;text-align:left;
  padding:11px 14px;
  border:none;
  color:#fff;
}
.earn-size[data-hue="small"] .earn-size-head{background:var(--hue-blue-btn);}
.earn-size[data-hue="medium"] .earn-size-head{background:var(--accent-strong);}
.earn-size[data-hue="large"] .earn-size-head{background:var(--hue-purple-btn);}
.earn-size-head:hover{filter:brightness(1.06);}
.earn-size-head:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--on-accent-line);}
.earn-size-name{font-size:1rem;font-weight:700;color:#fff;}
.earn-size-sum{font-size:.8rem;color:var(--on-accent-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Said on the head, because it is the reason the figure beside it is
   what it is. */
.earn-size-tag{
  justify-self:end;white-space:nowrap;
  padding:2px 6px;border-radius:3px;
  background:var(--on-accent-line);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.earn-size-pay{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:.98rem;color:#fff;line-height:1.1;}
.earn-size-pay em{font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--on-accent-soft);}
.earn-size-chev{font-size:.78rem;color:var(--on-accent-soft);transition:transform .15s;}
.earn-size[data-open="true"] .earn-size-chev{transform:rotate(180deg);}
.earn-size-body{display:flex;flex-direction:column;gap:9px;padding:12px 14px 13px;}
.earn-size-note{margin:0;font-size:.82rem;color:var(--ink-soft);line-height:1.5;}
.earn-size-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;padding:9px 0 0;border-top:1px solid var(--line);}
.earn-size-facts dt{font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);padding-top:2px;}
.earn-size-facts dd{margin:0;color:var(--ink);line-height:1.45;}
.earn-dealer{
  display:flex;align-items:center;gap:9px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-soft);
  font-size:.8rem;font-weight:600;text-align:left;
}
.earn-dealer:hover{background:var(--surface-high);border-color:var(--line-strong);}
.earn-dealer:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-dealer i{font-size:1rem;color:var(--ink-faint);flex-shrink:0;}
.earn-dealer[data-on="true"]{background:var(--accent-wash);border-color:var(--accent-edge);color:var(--ink);}
.earn-dealer[data-on="true"] i{color:var(--ink);}

/* ---------------- Typed figures ---------------- */
.earn-num{
  width:6.5ch;
  padding:7px 9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface-sunken);
  color:var(--ink);
  font:inherit;font-size:1.05rem;font-weight:700;
  text-align:right;
}
.earn-num:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.earn-tw-unit{font-size:.82rem;color:var(--ink-soft);line-height:1.35;}

/* ---------------- Activity table ---------------- */
/* One stretch of time at a time. Thirteen rows across four columns
   filled the screen and everything under it went unread, so the four
   columns became four tabs and the rows sit in a grid that is as wide
   as the page allows. */
.earn-act-tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:12px;
  background:var(--surface-high);border:1px solid var(--line);
  border-radius:var(--radius);
}
.earn-act-tab{
  flex:1 1 0;padding:7px 12px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-soft);
  font-size:.82rem;font-weight:600;cursor:pointer;
}
.earn-act-tab:hover{background:var(--surface-hover);color:var(--ink);}
.earn-act-tab-on,.earn-act-tab-on:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.earn-act-grid{
  display:grid;grid-template-columns:1fr;gap:0;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media (min-width:640px){.earn-act-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1100px){.earn-act-grid{grid-template-columns:repeat(3,1fr);}}
.earn-act-fig{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 13px;
  border-top:1px solid var(--line);
  background:var(--surface-raised);
}
.earn-act-grid .earn-act-fig:nth-child(-n+1){border-top:0;}
@media (min-width:640px){.earn-act-grid .earn-act-fig:nth-child(-n+2){border-top:0;}}
@media (min-width:1100px){.earn-act-grid .earn-act-fig:nth-child(-n+3){border-top:0;}}
.earn-act-fig dt{font-size:.8rem;color:var(--ink-soft);line-height:1.35;}
.earn-act-fig dd{margin:0;font-size:.92rem;font-weight:700;color:var(--ink);white-space:nowrap;}

/* A figure that left with the dealer. */
.earn-row-out .earn-row-num{color:var(--ink-faint);}
.earn-row-out .earn-row-name{color:var(--ink-soft);}

/* ---------------- Como and referrals ----------------
   One line each, because each is one number and a word about it. Side
   by side, so the two levers that move a year without more knocking
   read as the pair they are. */
/* Two cards of their own under the goal, not inside it. One line each,
   and it stays one line: the label holds its width, the box is only as
   wide as two digits need, and the sentence on the end takes the rest. */
.earn-lines{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 0;}
@media (min-width:760px){.earn-lines{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:760px){.earn-lines-one{grid-template-columns:1fr;}}
.earn-line{
  display:flex;align-items:center;gap:7px;min-width:0;
  padding:9px 12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.earn-line-lab{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:.84rem;font-weight:700;color:var(--ink);white-space:nowrap;
}
.earn-line-lab i{color:var(--ink-faint);}
.earn-line-unit{flex:0 0 auto;font-size:.78rem;color:var(--ink-soft);white-space:nowrap;}
.earn-line-out{
  flex:1 1 auto;min-width:0;
  font-size:.78rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.earn-line-sel{flex:0 1 auto;min-width:0;}
.earn-line-sel .sel-in{
  padding:5px 26px 5px 9px;font-size:.79rem;
  text-overflow:ellipsis;
}
.earn-in-xs{flex:0 0 auto;padding:1px 5px 2px;}
.earn-in-xs .earn-in-box{font-size:1rem;width:2.2ch;text-align:center;letter-spacing:0;}

/* ---------------- The sizes over the table ----------------
   Three numbers that are one split read as cards. Left in the table
   they were three rows to be scanned against each other, and the two
   rows that matter went unread under them. */
.earn-act-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px;}
.earn-act-card{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 13px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.earn-act-card-lab{font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);}
.earn-act-card-num{font-size:1.5rem;font-weight:700;line-height:1.1;letter-spacing:-.5px;color:var(--ink);}
.earn-act-card-sub{font-size:.76rem;color:var(--ink-faint);}

/* ---------------- The year's Challenge Meter ----------------
   The planner's gauge, on the page that sets the number the week is
   built to reach. The ramp is stated here because the planner builds
   its own on the server and this one is drawn in the browser. */
.earn-meter{margin-top:16px;}
.earn-meter .plnr-meter-zones{
  background:linear-gradient(90deg,
    var(--plnr-meter-easy) 0%,var(--plnr-meter-easy) 23%,
    var(--plnr-meter-ok) 37%,var(--plnr-meter-ok) 63%,
    var(--plnr-meter-hard) 77%,var(--plnr-meter-hard) 100%);
}