/* ============================================================
   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)
   ============================================================ */

/* ---- Standing team calls ----
   Cards on the day they run, until the last one has finished. Every
   other time they fold into one row, because a link you need twice a
   week should not own the top of the page five days out of seven. */
.mtg{margin-bottom:12px;}
.mtg:empty{display:none;}

.mtg-cards{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
.mtg-card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
}
.mtg-live{border-color:var(--accent-strong);background:var(--accent-wash);}

.mtg-top{display:flex;align-items:center;gap:10px;}
.mtg-name{font-size:1.06rem;font-weight:700;line-height:1.3;}
.mtg-badge{
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.66rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.mtg-when{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-soft);font-size:.85rem;margin-top:5px;
}
.mtg-when i{font-size:.8rem;color:var(--ink-faint);}
.mtg-note{color:var(--ink-faint);font-size:.79rem;line-height:1.45;margin-top:5px;}

.mtg-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;}
.mtg-join{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.9rem;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.mtg-join:hover{background:var(--accent-hover);text-decoration:none;}
.mtg-dial{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:.86rem;font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.mtg-dial:hover{background:var(--surface-high);text-decoration:none;}
.mtg-dial i{color:var(--ink-faint);font-size:.78rem;}

/* The PIN is read far more often than it is copied, because the dial
   link's embedded PIN is unreliable. So it is plain legible text, sized
   to be keyed in from across a desk, and the copy control sits beside
   it rather than on top of it. */
.mtg-pinbox{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:6px 6px 6px 11px;
  white-space:nowrap;
}
.mtg-pinlabel{
  font-size:.64rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);
}
.mtg-pinval{
  font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--ink);
  user-select:all;
}
.mtg-pincopy{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.8rem;
  flex-shrink:0;
}
.mtg-pincopy:hover{background:var(--surface-high);color:var(--ink);}
.mtg-pincopy.copied{color:var(--accent);}

/* ---- Folded state ---- */
.mtg-fold{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.mtg-fold-head{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:13px 16px;
  color:var(--ink);
}
.mtg-fold-head:hover{background:var(--surface-high);}
.mtg-fold-ic{color:var(--accent);font-size:1rem;flex-shrink:0;}
.mtg-fold-title{font-size:.98rem;font-weight:700;flex-shrink:0;}
.mtg-fold-sub{
  color:var(--ink-faint);font-size:.82rem;
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mtg-fold-chev{color:var(--ink-faint);font-size:.78rem;transition:transform .18s ease;flex-shrink:0;}
.mtg-fold[data-open="true"] .mtg-fold-chev{transform:rotate(180deg);}

.mtg-fold-body{display:none;padding:0 16px 14px;}
.mtg-fold[data-open="true"] .mtg-fold-body{display:block;}

.mtg-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.mtg-row-main{flex:1;min-width:180px;}
.mtg-row-name{display:block;font-size:.92rem;font-weight:600;line-height:1.3;}
.mtg-row-when{display:block;color:var(--ink-faint);font-size:.79rem;margin-top:2px;}
.mtg-row-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto;}

@media (max-width:700px){
  .mtg-cards{grid-template-columns:1fr;}
  .mtg-fold-sub{display:none;}
  .mtg-row-acts{width:100%;margin-left:0;}
}

/* ---- 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. */
.four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.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(--accent-edge);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(--accent);
  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. */
.pad{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  margin-top:14px;
}
.pad-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 15px;
  color:var(--ink);
  transition:background .12s,border-color .12s;
}
.pad-tile:hover{background:var(--surface-high);border-color:var(--accent-edge);text-decoration:none;}
.pad-ic{
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:10px;
}
.pad-name{font-size:.98rem;font-weight:700;line-height:1.25;}
.pad-sub{color:var(--ink-faint);font-size:.78rem;line-height:1.35;}

/* ---- 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. */
.wk-today{border-color:var(--accent-strong);background:var(--accent-wash);}
.wk-today .wk-tag{color:var(--ink);}

@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;
}
.trk:hover{color:var(--ink);text-decoration:none;}
.trk:hover .trk-n{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.trk-name{display:block;}

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

/* ---- 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. */
.stat{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.stat-cell{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 16px;
}
.stat-n{font-size:1.85rem;font-weight:700;line-height:1;letter-spacing:-.6px;color:var(--gold);}
.stat-l{font-size:.9rem;font-weight:700;margin-top:7px;}
.stat-d{color:var(--ink-faint);font-size:.79rem;line-height:1.4;margin-top:3px;}

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

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

/* 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. */
.steps{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(232px,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. */
.kit{display:flex;flex-wrap:wrap;gap:7px;}
.kit-item{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:9px 15px 9px 13px;
  font-size:.86rem;
  font-weight:600;
}
.kit-item i{color:var(--accent);font-size:.9rem;}

/* ---- The ask ----
   One line of script, given the weight of one line of script. */
.ask{
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  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;}

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