/* ============================================================
   Pipezoom - pages.css
   Per-page element rules. Every element with a former inline style
   has its own named class here, scoped to its page. Nothing in this
   file is shared between pages: a change to Strategy leaves Process
   alone. The shell is styled in base.css and repeated patterns in
   components.css.
   ============================================================ */

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

/* The 4 lines
   Because looking up a number is the most common reason a rep opens
   this site, the 4 lines come first. 1 row on desktop, with no wrap. */
/* 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;}
}

/* The page name is under the band and the tab bar on every page in the
   Launchpad group, and this padding keeps it off the bar. The selector
   matches that structure: the 4 pages carrying the band get the same
   spacing, and Today, with the band and no tab row, does not match. */
.calls-top + .ptabs + .page-head{padding-top:20px;}

/* The week
   5 columns, 1 a weekday, with today marked. */
.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 with a filled card, found without
   reading the 5 headings. */
.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;}
}

/* Weekly numbers
   Reference figures. Nothing tracks against these; a rep compares the
   current week against them. */
/* 2 across, or the whole row in 1 line where there is room for it,
   with no state in between. */
.stat{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
/* A row that names no count is the 4-cell one on Admin: all 4 in a line
   once the band holds them. The rows that name their own count set it
   again below, later in the file, and keep it at every width. */
@media (min-width:1100px){
  .stat{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* 2 rows: the figure and its target read as 1 phrase on the first
   line, with the counted thing named under them. */
.stat-cell{
  display:grid;
  /* Because a number with no break cannot narrow without losing a digit,
     and a cell with no glyph puts the number in the first track, the
     first 2 tracks keep their content's width. The note in the third
     track shrinks and wraps; the label under them breaks a word. */
  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 figures wear the accent. Gold is reserved for the money 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;
  /* Because only overflow-wrap:anywhere lowers the item's minimum size,
     the note can shrink in a narrower cell. */
  min-width:0;overflow-wrap:anywhere;
}
/* The label wears its own figure's color. A hued cell with Splash on
   repaints all 3 together further down this file. */
.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;
  color:var(--accent);
}
/* A cell with no glyph starts its figure in the first column. */
/* A cell with no glyph has 2 tracks: the figure and the wrapping note. */
.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;}

/* The rows that carry the day's 6 metrics hold 2 across at every width,
   the same as the app. */
.stat-3{grid-template-columns:repeat(2,minmax(0,1fr));}
/* A row of 4: 2 and 2 while there is not room for 4, and all
   4 in 1 line once there is. */
.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{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 5
   A list a rep works down. Each row is a button, the bar across the top
   is the only progress indicator on the site, and the whole list 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);}

/* ============================================================
   THE PROCESS
   ============================================================ */

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

/* ============================================================
   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 1 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; this rule restores the text alignment and
   cursor the button reset removes. */
.ml-tpl-btn{text-align:left;cursor:pointer;}
.ml-tpl-title{margin-top:0;}

/* The home page number search is under the 4 call cards. Its 1 line of
   context gets room above it with no full section heading. */
.home-dial-note{margin-top:26px;margin-bottom:10px;}

/* Splash of Color: the metric cards
   The glyph, the figure and the name form 1 mark and all 3 take the
   hue. The note under the figure is the target and stays faint. */
[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);}