/* ============================================================
   GP Team Hub - pages.css
   Per-page element rules. Every element that used to carry an
   inline style has its own named class here, scoped to the page
   it belongs to. Nothing in this file is shared between pages:
   changing Strategy cannot move anything on Process.
   Shell lives in base.css. Repeated patterns live in components.css.
   ============================================================ */

/* ============================================================
   HOME (index.php)
   ============================================================ */

/* ---- The four lines ----
   First thing on the page, because looking up a number is the single
   most common reason anyone opens this site. One row on desktop and it
   does not wrap: four is the whole point. */
/* A row of buttons that belongs to the section above it. */
.sec-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

.four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:22px;
}
.four-card{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  color:var(--ink);
}
.four-card:hover{border-color:var(--line-strong);background:var(--surface-high);text-decoration:none;}
.four-who{
  font-size:.7rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);
}
.four-num{
  display:flex;align-items:center;gap:9px;
  font-size:1.24rem;font-weight:700;letter-spacing:.2px;
  color:var(--ink);
  margin-top:6px;
  white-space:nowrap;
}
.four-num i{font-size:.78rem;color:var(--ink-faint);}
.four-num-alt{font-size:1.06rem;}
.four-opt{
  align-self:flex-start;
  margin-top:7px;
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:3px 9px;
  font-size:.72rem;font-weight:700;
  color:var(--ink);
}
.four-for{color:var(--ink-soft);font-size:.82rem;line-height:1.5;margin-top:8px;}

@media (max-width:1000px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  .four{grid-template-columns:1fr;}
}

/* ---- Launchpad ----
   Eight tiles, not twelve. Bigger icons, one-word names, and nothing
   that wraps. Outlook and Teams came out because nobody navigates to
   those from a hub. */
[data-page="launchpad"] > .page-head{padding-top:20px;}
/* Four across rather than as-many-as-fit. Eight tiles then read as two
   even rows instead of five and a ragged three, and Quick Links wraps
   in fours under it for the same reason. */
.pad{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:14px;
}
@media (max-width:900px){
  .pad{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
  .pad{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* The glyph sits beside the words rather than on a line of its own,
   which buys back the vertical space a whole row of icons was taking
   and lets eight tiles read as two tight rows. */
.pad-tile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:13px;
  row-gap:2px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 15px;
  color:var(--ink);
  transition:background .12s,border-color .12s;
}
.pad-tile:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.pad-ic{
  grid-row:1 / span 2;
  width:1.25em;
  font-size:1.65rem;
  line-height:1;
  text-align:center;
  color:var(--ic);
}
/* A single word wider than the column breaks rather than running out
   through the side of the tile, which is what "Salesforce" did on a
   phone set to a larger browser font. */
.pad-name{font-size:.98rem;font-weight:700;line-height:1.25;align-self:end;min-width:0;overflow-wrap:break-word;}
.pad-sub{color:var(--ink-faint);font-size:.78rem;line-height:1.35;align-self:start;min-width:0;overflow-wrap:break-word;}

/* ---- The week ----
   Five columns instead of six sentences. Today is marked, so the block
   answers "where am I" before it answers "what happens when". */
.week{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.wk-day{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
}
.wk-heavy{background:var(--surface-high);}
.wk-name{font-size:1.02rem;font-weight:700;line-height:1.2;}
.wk-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:3px;
}
.wk-list{margin:11px 0 0;padding:0;list-style:none;}
.wk-list li{
  color:var(--ink-soft);
  font-size:.81rem;
  line-height:1.45;
  padding:4px 0;
  border-top:1px solid var(--line);
}
.wk-list li:first-child{border-top:none;padding-top:0;}

/* today.js marks the current weekday. Filled rather than tinted, so
   the day a rep is standing in is the one card they find without
   reading five headings to work out which one is theirs. */
.wk-today{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.wk-today .wk-tag{color:var(--on-accent-soft);}
.wk-today .wk-list li{color:var(--ink-inverse);border-top-color:var(--on-accent-line);}

@media (max-width:820px){
  .week{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:460px){
  .week{grid-template-columns:1fr;}
}

/* ---- Deal track ----
   Same numbered-node track as the stage picker on Process, because it
   is the same seven stages and they should not look like two different
   things on two pages. */
.track{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  margin-top:14px;
  padding-bottom:4px;
}
.track::-webkit-scrollbar{display:none;}
.trk{
  position:relative;
  flex:1 0 96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:14px 6px 12px;
  color:var(--ink-soft);
  font-size:.78rem;
  font-weight:600;
  text-align:center;
  line-height:1.3;
}
.trk::before{
  content:"";
  position:absolute;
  top:calc(14px + 17px);
  left:0;right:0;
  height:2px;
  background:var(--line);
  z-index:0;
}
.trk:first-child::before{left:50%;}
.trk:last-child::before{right:50%;}
.trk-n{
  position:relative;
  z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  border:2px solid var(--line);
  color:var(--ink-soft);
  font-size:.88rem;font-weight:700;
  transition:background .14s,border-color .14s,color .14s;
}
/* Hover fills the bubble rather than tinting it, so a pointer on any
   stage previews what selecting it looks like, and the stage already
   selected does not lose its fill the moment the pointer arrives. */
.trk:hover{color:var(--ink);text-decoration:none;}
.trk:hover .trk-n,
.trk-on .trk-n{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.trk-on:hover .trk-n{background:var(--accent-hover);border-color:var(--accent-hover);}
.trk-on{color:var(--ink);}
.trk-name{display:block;}

/* Opens in place. Jumping to another page mid-scroll loses both your
   position and the thing you were looking at. */
.track-out:empty{display:none;}
.trk-panel{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  margin-top:10px;
}
.trk-panel-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.trk-panel-name{font-size:1.06rem;font-weight:700;}
.trk-panel-when{color:var(--ink-faint);font-size:.8rem;}
.trk-panel-does{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin-top:7px;max-width:96ch;}
.trk-panel-next{
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:10px 13px;
  margin-top:11px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink);
}
.trk-panel-label{
  display:block;
  font-size:.65rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:3px;
}
.trk-panel-more{
  display:inline-block;
  margin-top:12px;
  font-size:.85rem;
  font-weight:600;
}

/* ---- Orientation note (First 90 Days) ----
   Same tinted block as the one action, used where a page needs to say
   how to read itself before the reader starts. */
.now{
  background:var(--accent-wash);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
}
.now-label{
  font-size:.68rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink);
}
.now-text{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin-top:6px;max-width:96ch;}

/* ---- Weekly numbers ----
   Reference, not a scoreboard. Nothing tracks against these; they are
   here so a rep can tell whether the week they are having is a normal
   one without doing arithmetic. */
/* Fits its own count rather than a hard four, so a five-metric row is
   five across instead of four and a stranded one. */
.stat{
  display:grid;
  /* The floor is in rem rather than px so it follows the text it has to
     hold: em would read the body's own 15px and scale with nothing. At
     146px a reader whose browser font is 20px got four columns that a
     five-figure number could not fit inside. */
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:10px;
  margin-top:14px;
}
/* Two rows, not three: the figure and the target it is measured
   against read as one phrase on the first line, with what is being
   counted under them. */
.stat-cell{
  display:grid;
  /* The first two tracks keep whatever they hold, because a number with
     no break in it cannot be made narrower without losing a digit and a
     cell with no glyph puts the number in the first track. The note in
     the third gives ground and wraps; the label under them breaks a
     word rather than running out through the card. */
  grid-template-columns:min-content min-content minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:baseline;
  column-gap:7px;
  row-gap:1px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 13px;
}
/* Activity is not money, so these wear the accent. Gold is reserved
   for what a deal pays. */
.stat-ic{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  width:1.15em;
  margin-right:4px;
  font-size:1.5rem;
  line-height:1;
  text-align:center;
  color:var(--accent);
}
.stat-n{
  grid-column:2;grid-row:1;
  font-size:1.5rem;font-weight:700;line-height:1.05;letter-spacing:-.5px;
  color:var(--accent);
}
.stat-d{
  grid-column:3;grid-row:1;
  justify-self:start;
  color:var(--ink-faint);font-size:.78rem;line-height:1.2;
  /* anywhere rather than break-word, because only anywhere lowers what
     the item claims as its smallest size; break-word left the longest
     word standing and the note kept its full width in a narrower cell. */
  min-width:0;overflow-wrap:anywhere;
}
.stat-l{
  grid-column:2 / -1;grid-row:2;
  font-size:.86rem;font-weight:700;line-height:1.25;
  min-width:0;overflow-wrap:break-word;
}
/* A cell with no glyph starts its figure in the first column. */
/* A cell with no glyph is two tracks rather than three: the figure and
   then the note, which gives ground and wraps. Kept at three, the empty
   middle track was handed the label's longest word and the note was left
   with nothing, so it ran out through the side of the card. */
.stat-cell:not(:has(> .stat-ic)){grid-template-columns:min-content minmax(0,1fr);}
.stat-cell > .stat-n:first-child{grid-column:1;}
.stat-cell > .stat-n:first-child ~ .stat-l{grid-column:1 / -1;}
.stat-cell > .stat-n:first-child ~ .stat-d{grid-column:2;}

/* auto-fit handles the middle widths on its own. At the floor the cells
   are named two across rather than left to auto-fit, which drops to one
   as soon as its 146px minimum stops fitting and leaves a phone reading
   a single column of four. */
/* A row of six fitted itself as five and a stranded one, so the rows
   that carry the day's metrics are named three across and let the six
   read as three and three. Two across on a phone, as everything else
   on that width is. */
.stat-3{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:760px){
  .stat-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* A row of four: two and two while there is not room for four, and
   four across once there is, so the last one never hangs on its own. */
.stat-4{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:900px){
  .stat-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media (max-width:400px){
  .stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .stat-cell{padding:9px 10px;column-gap:5px;}
  .stat-ic{font-size:1.3rem;margin-right:2px;}
  .stat-n{font-size:1.3rem;}
  .stat-l{font-size:.8rem;}
}

/* ---- The daily five ----
   A list you work down, not a list you read. Each row is a button, the
   bar across the top is the only progress indicator on the site, and
   the whole thing resets with the date. */
.task{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 15px 4px;
  margin-top:14px;
  overflow:hidden;
}
.task-bar{height:3px;background:var(--surface-high);margin:0 -15px;}
.task-fill{height:3px;background:var(--accent);width:0;transition:width .25s ease;}
.task-count{
  font-size:.7rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
  padding:11px 0 3px;
}

.task-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  text-align:left;
  padding:12px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.task-row:first-of-type{border-top:none;}
.task-box{font-size:1.15rem;line-height:1.4;width:20px;flex-shrink:0;color:var(--ink-faint);}
.task-row[data-done="true"] .task-box{color:var(--ink);}
.task-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.task-act{font-weight:600;font-size:.94rem;line-height:1.4;}
.task-row[data-done="true"] .task-act{color:var(--ink-faint);text-decoration:line-through;}
.task-why{color:var(--ink-soft);font-size:.84rem;line-height:1.5;}
.task-row[data-done="true"] .task-why{color:var(--ink-faint);}
.task-pay{
  margin-left:auto;flex-shrink:0;
  color:var(--gold-ink);font-weight:700;font-size:.78rem;
  white-space:nowrap;padding-top:2px;
}
.task-row[data-done="true"] .task-pay{color:var(--ink-faint);}

/* ---- Call triage ----
   Keyed by symptom rather than department, because a new rep knows
   what broke and not who owns it. */
.triage{margin-top:14px;}
.triage-search{position:relative;}
.triage-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.9rem;pointer-events:none;
}
#triageInput{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:11px 13px 11px 36px;
  font-size:.94rem;
  outline:none;
}
#triageInput::placeholder{color:var(--ink-faint);}
#triageInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.triage-quick{margin-top:10px;}
.triage-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;}

.tri-idle{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-raised);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  padding:16px 18px;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.6;
}
.tri-idle i{font-size:1.1rem;line-height:1.5;color:var(--ink-faint);flex-shrink:0;}
.tri-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 15px;
}
.tri-ic{font-size:1rem;line-height:1.5;width:20px;flex-shrink:0;text-align:center;color:var(--ink-faint);}
.tri-main{flex:1;min-width:200px;}
.tri-symptom{font-weight:600;font-size:.94rem;line-height:1.4;}
.tri-detail{color:var(--ink-soft);font-size:.84rem;line-height:1.5;margin-top:2px;}
.tri-who{
  color:var(--ink-faint);font-size:.71rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;margin-top:6px;
}
/* The number is the thing being scanned for, so it holds one fixed
   column and starts at the same point on every row. Anything else the
   row carries stacks underneath it rather than shoving it sideways. */
.tri-act{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-left:auto;
  flex-shrink:0;
  width:188px;
}
.tri-call{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.92rem;
  padding:9px 13px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.tri-call:hover{background:var(--accent-hover);text-decoration:none;}
.tri-opt{
  color:var(--ink);font-weight:700;font-size:.78rem;
  text-align:center;
  white-space:nowrap;
}
.tri-mail{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:.83rem;font-weight:600;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.tri-mail:hover{background:var(--surface-high);text-decoration:none;}

/* Below the point where a fixed side column still fits, the actions go
   full width under the text rather than squeezing it. */
@media (max-width:560px){
  .tri-act{width:100%;margin-left:0;}
  .tri-main{min-width:0;}
}
.tri-empty{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  color:var(--ink-soft);
  font-size:.89rem;
  line-height:1.6;
}

/* ============================================================
   THE PROCESS (process.php)
   ============================================================ */

/* ============================================================
   STRATEGY (strategy.php)
   ============================================================ */

/* The unit label riding beside a weekly target number. */
.strat-stat-unit{font-size:.85rem;font-weight:400;color:var(--ink-soft);}

/* The glyph sits with the figure rather than above it, and the heading
   underneath loses its top margin so the two read as one block.

   These are door and appointment counts, which are activity rather than
   money, so they wear the accent. Gold stays on the figures a deal
   actually pays. */
.big-ic{
  display:flex;align-items:baseline;gap:10px;
  color:var(--accent);
}
.big-ic > i{
  font-size:1.15rem;
  line-height:1;
  color:var(--accent);
  align-self:center;
}
.big-n{font-weight:700;}
.big-ic + h3{margin-top:2px;}

/* Card titles across every Strategy section. */
.strat-card-title{margin-top:0;}

/* A sub-heading inside a section, for splitting one subject into the
   different shapes its content actually takes. */
.strat-sub{font-size:1.06rem;font-weight:700;margin:26px 0 12px;letter-spacing:-.1px;}

/* ---- Ordered steps ----
   A sequence rendered as a sequence. It was four bullets in a card,
   which gave a numbered process the same shape as a shopping list. */
/* Four across on a desk, two by two on a tablet, one on a phone.
   auto-fit put three on the first row and stranded the fourth. */
.steps{display:grid;gap:8px;grid-template-columns:1fr;}
@media (min-width:620px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.step{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.82rem;font-weight:700;
  margin-bottom:10px;
}
.step-t{font-size:.98rem;font-weight:700;line-height:1.3;}
.step-d{color:var(--ink-soft);font-size:.85rem;line-height:1.55;margin-top:4px;}

/* ---- Kit list ----
   Things you carry, not things you read. */
/* No pill and no border: these are four things to have with you, and a
   pill made them look like filters that could be clicked. */
.kit{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:4px 20px;
  margin-top:10px;
}
.kit-item{
  display:flex;align-items:baseline;gap:9px;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink);
}
.kit-item i{color:var(--ic);font-size:.82rem;flex-shrink:0;}

/* ---- The ask ----
   One line of script, given the weight of one line of script. */
.ask{
  background:var(--accent-wash);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 18px;
  margin-top:20px;
}
.ask-label{
  font-size:.68rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink);
}
.ask-q{
  font-size:1.12rem;
  line-height:1.5;
  margin-top:8px;
  color:var(--ink);
  font-style:italic;
}

/* Callout under the week-shape table. */
.strat-week-note{margin-top:14px;}
/* The line that corrects what a tool is, set apart from the section
   blurb above it so it is read rather than skimmed past. */
.strat-note{
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  margin-bottom:18px;
  color:var(--ink-soft);
  font-size:.86rem;line-height:1.6;
}

/* Callout closing the Small Game section. */
.strat-trucks-note{margin-top:14px;}

/* Callout closing the Addons section. */
.strat-cashflow-note{margin-top:14px;}

/* Paired cards under the dealer split explainer. */
.strat-dealer-grid{margin-top:14px;}

/* Paired cards under the Gong and open-items scorecard. */
.strat-gong-grid{margin-top:14px;}

/* Final callout on the page, given a wider break than mid-page notes. */
.strat-closing-note{margin-top:30px;}

/* ============================================================
   QUICK CLOSE (quick.php)
   ============================================================ */

/* ============================================================
   THE PROCESS (process.php)
   ============================================================ */

/* The four-number phone block above the pipeline timeline needs a real
   break before the timeline starts. */
.proc-phone-block{margin-bottom:34px;}

/* Card titles across every Process section. */
.proc-card-title{margin-top:0;}

/* The unit label riding beside a payout number. */
.proc-stat-unit{font-size:.85rem;font-weight:400;color:var(--muted);}

/* Systems-and-tools card pair. */
.proc-systems-grid{margin-top:16px;}

/* Final callout on the page. */
.proc-closing-note{margin-top:30px;}

/* Tote board states. Four stages of one deal, so they climb a single
   value ramp toward Installed rather than taking four unrelated hues.
   Installed is the one that pays, and it is the only one that lifts
   off the neutral ramp. */
.proc-st-unmapped{color:var(--muted);}
.proc-st-mapped{color:var(--sub);}
.proc-st-locked{color:var(--text);}
.proc-st-installed{color:var(--ink);}

/* ============================================================
   STRATEGY (strategy.php)
   ============================================================ */

/* ============================================================
   NUMBERS (numbers.php)
   ============================================================ */

/* ============================================================
   DOCUMENT SERVER (doc.php)
   ============================================================ */

/* Only shown when a document fails to open. */
.doc-back{margin-top:20px;}

/* ============================================================
   SIGN IN (login.php)
   ============================================================ */

/* The "no account yet" line under the sign-in card. */
.login-alt{margin-top:14px;}

/* ============================================================
   MY LINKS (my-links.php)
   ============================================================ */

/* Signed-out prompt card, held narrower than the add-link form. */
.ml-signin-card{max-width:560px;}
.ml-signin-title{margin-top:0;}
.ml-signin-note{margin-top:6px;}

/* Add-link form card. */
.ml-add-title{margin-top:0;}
.ml-add-card{max-width:640px;}

/* Inline edit row: label and URL share one line and wrap together on
   narrow screens, with the URL given twice the label's share. */
.ml-edit-form{display:flex;gap:8px;flex-wrap:wrap;width:100%;align-items:center;}
.ml-edit-label{flex:1 1 160px;}
.ml-edit-url{flex:2 1 240px;}

/* Template cards are buttons, so they need their text alignment and
   cursor restored from the button reset. */
.ml-tpl-btn{text-align:left;cursor:pointer;}
.ml-tpl-title{margin-top:0;}

/* The home page number search sits under the four call cards, so its
   one line of context needs breathing room above it without the full
   heading treatment a section would get. */
.home-dial-note{margin-top:26px;margin-bottom:10px;}

/* Ended incentives: a plain three-column list, because the point is
   that these carry no payout to display. */
.inc-ended{
  display:grid;
  gap:6px;
  margin-top:14px;
}
.inc-ended-row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:12px;
  align-items:baseline;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 12px;
}
.inc-ended-name{font-weight:600;font-size:.9rem;color:var(--ink);}
.inc-ended-was{font-size:.82rem;color:var(--ink-soft);}
.inc-ended-note{font-size:.8rem;color:var(--ink-faint);line-height:1.45;}
@media (max-width:760px){
  .inc-ended-row{grid-template-columns:1fr;gap:3px;}
}
/* ---- What makes a referral pay ----
   Three things in a fixed order, on Strategy and again on Referrals,
   because the rule is the same wherever the name came from. */
.qual{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:14px;
}
@media (min-width:820px){
  .qual{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.qual-step{
  display:flex;flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 16px;
}
.qual-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.82rem;font-weight:700;
  margin-bottom:10px;
}
.qual-t{font-size:.98rem;font-weight:700;line-height:1.3;}
.qual-d{color:var(--ink-soft);font-size:.85rem;line-height:1.55;margin-top:5px;}
.strat-ref-note{margin-top:12px;}

/* ---------------- Splash of Colour ----------------
   The metric cards. The glyph, the figure and the name are one mark, so
   all three take the hue rather than the glyph alone, which read as a
   stray colour beside black type. The note under the figure stays
   faint, because it is the target rather than the number. */
[data-splash="on"] .stat-cell[data-hue="green"] .stat-ic,
[data-splash="on"] .stat-cell[data-hue="green"] .stat-n,
[data-splash="on"] .stat-cell[data-hue="green"] .stat-l{color:var(--hue-green);}
[data-splash="on"] .stat-cell[data-hue="blue"] .stat-ic,
[data-splash="on"] .stat-cell[data-hue="blue"] .stat-n,
[data-splash="on"] .stat-cell[data-hue="blue"] .stat-l{color:var(--hue-blue);}
[data-splash="on"] .stat-cell[data-hue="purple"] .stat-ic,
[data-splash="on"] .stat-cell[data-hue="purple"] .stat-n,
[data-splash="on"] .stat-cell[data-hue="purple"] .stat-l{color:var(--hue-purple);}

/* The Launchpad grid, so the three systems a rep is told to have open
   are the same three colours there as on the small cards on Today. The
   glyph alone: a filled tile at that size is a block of colour rather
   than a splash. */
[data-splash="on"] .pad-tile[data-hue="green"] .pad-ic{color:var(--hue-green);}
[data-splash="on"] .pad-tile[data-hue="blue"] .pad-ic{color:var(--hue-blue);}
[data-splash="on"] .pad-tile[data-hue="purple"] .pad-ic{color:var(--hue-purple);}