/* ============================================================
   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 one action ----
   Chosen by today.js from the clock. Deliberately a single thing with a
   single button, because offering a choice to someone whose working
   memory is already full is what produces the freeze this page exists
   to prevent. The default when nothing else fits is doors. */
.act{
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius);
  padding:16px 18px;
}
.act-when{
  font-size:.68rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink);
}
.act-do{
  font-size:1.55rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.3px;
  margin-top:7px;
}
.act-why{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin-top:7px;max-width:62ch;}
.act-go{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:14px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.95rem;
  padding:12px 17px;
  border-radius:var(--radius-sm);
}
.act-go:hover{background:var(--accent-hover);text-decoration:none;}

/* ---- 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(--accent-edge);
  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:66ch;}

/* ---- 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(--accent);}
.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(--accent);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(--accent);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(--muted);}

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

/* Callout under the week-shape table. */
.strat-week-note{margin-top:14px;}

/* 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(--accent);}

/* ============================================================
   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;}