/* ============================================================
   GP Team Hub - components.css
   Content patterns shared across pages: cards, grids, timeline,
   tables, directories, tiles, callouts, tags.

   COLOR RULE: no literal color values here. Everything references a
   token from :root in base.css.

   DENSITY: this is reference material scanned for one fact, not an
   article read end to end, so padding is tight and the type steps are
   wide. Nothing carries a drop shadow; a block is separated from the
   page by its surface value and a hairline.
   ============================================================ */

/* ---------------- Chip nav ----------------
   Only survives where the chips are outbound links. app.js removes any
   chip row that is purely in-page anchors, because the section bar
   already does that job and better. */
.chipnav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 24px;}
.chipnav a{
  color:var(--ink-soft);
  font-size:.82rem;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  transition:background .12s,color .12s,border-color .12s;
}
.chipnav a:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-high);text-decoration:none;}
.chipnav a.accent{color:var(--accent);border-color:var(--accent-edge);}

/* ---------------- Tags ----------------
   A tag is a label first and reads by its own words, so the default is
   neutral. The accent variant marks the recommended path, which keeps
   at most one tag in any group emphasized. */
.tag{
  display:inline-block;
  font-size:.69rem;font-weight:700;letter-spacing:.5px;
  padding:3px 9px;border-radius:var(--radius-sm);text-transform:uppercase;
  background:var(--surface-high);
  color:var(--ink-soft);
}
.tag-accent{background:var(--accent-wash);color:var(--accent);}

/* ---------------- Grids ---------------- */
.grid{display:grid;gap:12px;margin-top:14px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(175px,1fr));}

/* ---------------- Cards ---------------- */
.card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--line-strong);}
.card h3{font-size:1rem;font-weight:700;margin:6px 0 4px;line-height:1.35;}
.card .meta{color:var(--ink-soft);font-size:.88rem;line-height:1.55;}
.card ul{margin:9px 0 0 17px;}
.card li{margin-bottom:5px;font-size:.89rem;line-height:1.55;}
.card li::marker{color:var(--ink-faint);}

/* Yes/no lists. A check and a cross carry the meaning, so these are the
   only list markers on the site that take a color. */
.yes li,.no li{list-style:none;position:relative;padding-left:5px;}
.yes li::before,.no li::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:-17px;top:1px;font-size:.75em;
}
.yes li::before{content:"\f00c";color:var(--accent);}
.no li::before{content:"\f00d";color:var(--danger);}
.lbl{font-size:.69rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-top:13px;}
.lbl.ok{color:var(--accent);}
.lbl.not{color:var(--danger);}

/* ---------------- Callouts ----------------
   A note is already set apart by its surface, so bold alone carries the
   emphasis inside it. Only the critical variant escalates to a color,
   which is what makes the deal-killing notes findable at a glance. */
.warn{
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  margin-top:13px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.warn b{color:var(--ink);}
.crit{background:var(--danger-wash);border-color:var(--danger-edge);}
.crit b{color:var(--danger);}

/* Callouts get their icon from CSS rather than from markup, so every
   one of them has an icon and they are all the same size. */
.warn::before,.crit::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.92em;
  margin-right:9px;
  color:var(--ink-faint);
}
.warn::before{content:"\f05a";}
.crit::before{content:"\f071";color:var(--danger);}

/* ---------------- Timeline ----------------
   The rail is narrow on a phone because a 375px screen cannot spare
   60px to a decorative column, and widens once there is room. */
.timeline{position:relative;margin-top:10px;}
.stage{display:flex;gap:12px;position:relative;padding-bottom:20px;}
.stage:last-child{padding-bottom:0;}
.rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:30px;}
.dot{
  width:30px;height:30px;border-radius:var(--radius-pill);
  background:var(--surface-high);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.86rem;
  color:var(--ink);
}
.cord{flex:1;width:1px;background:var(--line);margin-top:5px;}
.stage-card{
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;flex:1;min-width:0;
}
.stage-card h3{font-size:1rem;font-weight:700;margin-bottom:2px;line-height:1.35;}
.stage-card .when{color:var(--ink-faint);font-size:.8rem;margin-bottom:8px;}
.stage-card ul{margin:8px 0 0 17px;}
.stage-card li{margin-bottom:6px;font-size:.89rem;line-height:1.55;}
.stage-card li::marker{color:var(--ink-faint);}

@media (min-width:640px){
  .stage{gap:16px;padding-bottom:24px;}
  .rail{width:38px;}
  .dot{width:38px;height:38px;font-size:.95rem;}
}

/* ---------------- Tables ----------------
   The old table forced a 520px minimum, so every reference table on the
   site scrolled sideways on a phone. These stack into labelled rows on
   small screens instead, which is the size they get read at most. */
.tbl-wrap{margin-top:14px;}
table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-size:.89rem;
}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;}
th{
  background:var(--surface-high);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink-faint);font-weight:700;
}
tr:last-child td{border-bottom:none;}
td:first-child{color:var(--ink);font-weight:600;}

@media (min-width:640px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:520px;}
  th,td{padding:11px 15px;}
  td:first-child{white-space:nowrap;}
}

/* ---------------- Figures ---------------- */
.money{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:14px;}
.big{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--accent);}

/* ---------------- Launch tiles ---------------- */
.launch{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));margin-top:14px;}
.launch a{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 13px;
  color:var(--ink);
  min-height:58px;
  transition:background .12s,border-color .12s;
}
.launch a:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.launch .l-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.launch .l-name{font-weight:600;font-size:.9rem;}
.launch .l-sub{color:var(--ink-faint);font-size:.76rem;line-height:1.35;}
.l-icon{width:17px;height:17px;border-radius:3px;flex-shrink:0;color:var(--ink-faint);}

/* ---------------- Flow strip ----------------
   A sequence rather than a grid: the steps read across and wrap. */
.flow{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;}
.flow a{
  flex:1 1 118px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  color:var(--ink);
  font-size:.85rem;
  min-width:112px;
  transition:background .12s,border-color .12s;
}
.flow a:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.flow .f-step{
  display:block;font-size:.67rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------------- Daily playbook ---------------- */
.daily{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:4px 17px;
  margin-top:14px;
}
.daily-row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);}
.daily-row:last-child{border-bottom:none;}
.daily-num{font-size:1.05rem;font-weight:700;color:var(--ink-faint);width:20px;flex-shrink:0;line-height:1.5;}
.daily-act{font-weight:600;font-size:.94rem;line-height:1.4;}
.daily-why{color:var(--ink-soft);font-size:.85rem;margin-top:3px;line-height:1.5;}
.daily-pay{
  margin-left:auto;color:var(--accent);font-weight:700;font-size:.82rem;
  white-space:nowrap;padding-top:2px;
}

/* ---------------- Link directory ---------------- */
.linkgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));margin-top:14px;}
.linkcard{
  display:flex;flex-direction:column;gap:2px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:11px 13px;
  color:var(--ink);
  position:relative;
  transition:background .12s,border-color .12s;
}
.linkcard:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.lc-top{display:contents;}
.lc-name{font-weight:600;font-size:.9rem;}
.lc-desc{color:var(--ink-soft);font-size:.79rem;line-height:1.45;margin-top:2px;}
.lc-dom{order:10;color:var(--ink-faint);font-size:.7rem;margin-top:6px;overflow-wrap:anywhere;}
.lc-personal{
  align-self:flex-start;
  margin-top:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-wash);
  border-radius:var(--radius-sm);
  padding:2px 7px;
}
.cat-head{display:flex;align-items:baseline;gap:9px;margin:34px 0 2px;}
.cat-head h2{margin:0;}
.cat-count{color:var(--ink-faint);font-size:.79rem;}

/* ---------------- Phone directory ----------------
   The number is the answer, so it is the largest thing in the card and
   the whole of it is a tel: link. */
.phonegrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));margin-top:14px;}
.phonecard{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:2px;
  transition:border-color .15s;
}
.phonecard:hover{border-color:var(--line-strong);}
.pc-who{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);}
.pc-num{font-size:1.3rem;font-weight:700;margin:2px 0;line-height:1.2;}
.pc-num a{color:var(--ink);}
.pc-opt{font-size:.83rem;color:var(--accent);font-weight:600;}
.pc-for{color:var(--ink-soft);font-size:.83rem;line-height:1.5;margin-top:3px;}
.pc-mail{font-size:.8rem;margin-top:4px;word-break:break-all;}

/* The number and the address are the two things a rep taps, so both
   carry the icon that says what tapping will do. */
.pc-num::before,.pc-mail::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--ink-faint);
  margin-right:8px;
}
.pc-num::before{content:"\f879";font-size:.72em;}
.pc-mail::before{content:"\f0e0";font-size:.92em;}
.pc-flag{color:var(--danger);font-size:.76rem;margin-top:5px;line-height:1.45;}
.pc-actions{display:flex;gap:7px;margin-top:10px;}
.copy-btn{
  font-size:.75rem;font-weight:600;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--surface-high);
  color:var(--ink-soft);
}
.copy-btn:hover{color:var(--ink);border-color:var(--line-strong);}
.copy-btn.copied{color:var(--accent);border-color:var(--accent-edge);}

/* ---------------- Incentive cards ---------------- */
.inc-card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 19px;
}
.inc-amt{font-size:1.75rem;font-weight:700;color:var(--accent);line-height:1.1;letter-spacing:-.3px;}
.inc-name{font-weight:700;font-size:1.02rem;margin-top:3px;}
.inc-sub{color:var(--ink-soft);font-size:.85rem;margin-top:3px;line-height:1.5;}
.inc-tiers{margin:13px 0 0;display:flex;flex-direction:column;gap:5px;}
.inc-tier{
  display:flex;justify-content:space-between;gap:10px;
  background:var(--surface-high);
  border-radius:var(--radius-sm);
  padding:8px 13px;
  font-size:.87rem;
  color:var(--ink-soft);
}
.inc-tier b{color:var(--ink);white-space:nowrap;}
.fine{color:var(--ink-faint);font-size:.79rem;margin-top:11px;line-height:1.6;}

/* ---------------- My Links rows ---------------- */
.ml-row{
  display:flex;align-items:center;gap:11px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 13px;
  margin-top:7px;
}
.ml-main{min-width:0;flex:1;}
.ml-label{font-weight:600;font-size:.92rem;}
.ml-url{color:var(--ink-faint);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.ml-actions{display:flex;gap:6px;flex-shrink:0;}
.suggest{border-style:dashed;background:transparent;}

/* ---------------- Cadence list ---------------- */
.cadence li{margin-bottom:7px;font-size:.89rem;line-height:1.55;}
.cadence b{color:var(--ink);font-weight:600;}

/* ---------------- Page-level filter ---------------- */
.filter-wrap{position:relative;max-width:420px;margin-top:6px;}
.filter-wrap input{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:10px 13px;
  font-size:.94rem;
  outline:none;
}
.filter-wrap input::placeholder{color:var(--ink-faint);}
.filter-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.hidden{display:none !important;}

/* ---------------- Sections ----------------
   Built by app.js. A closed section is one tappable row carrying its
   icon, its title, and the summary line the page already wrote, so the
   whole page reads as a short menu of questions. Opening one is how the
   reader asks for that answer, and nothing else moves. */
.sec{
  border-bottom:1px solid var(--line);
}
.sec:first-of-type{border-top:1px solid var(--line);}

.sec-head{
  font-size:1rem;
  font-weight:400;
  margin:0;
  scroll-margin-top:calc(var(--topbar-h) + var(--secbar-h));
}
.sec-toggle{
  display:flex;
  align-items:flex-start;
  gap:13px;
  width:100%;
  text-align:left;
  padding:15px 4px;
  color:var(--ink);
}
.sec-toggle:hover .sec-title{color:var(--accent);}

.sec-ic{
  font-size:1.05rem;
  line-height:1.45;
  width:22px;
  flex-shrink:0;
  text-align:center;
  color:var(--ink-faint);
}
.sec[data-open="true"] .sec-ic{color:var(--accent);}

.sec-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.sec-title{font-size:1.06rem;font-weight:700;line-height:1.35;letter-spacing:-.1px;transition:color .12s;}

/* The summary only earns its space while the section is shut. Once the
   section is open the content itself is the answer. */
.sec-hint{
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sec[data-open="true"] .sec-hint{display:none;}

.sec-chev{
  font-size:.8rem;
  line-height:1.9;
  width:16px;
  flex-shrink:0;
  color:var(--ink-faint);
  transition:transform .18s ease;
}
.sec[data-open="true"] .sec-chev{transform:rotate(180deg);}

.sec-body{display:none;padding:0 4px 24px;}
.sec[data-open="true"] .sec-body{display:block;}

/* Inside an open section the first block sits directly under the header
   and does not need the 48px break a standalone heading would take. */
.sec-body > *:first-child{margin-top:0;}

/* ---------------- Icons ----------------
   One size per role, so an icon never changes size between two places
   that mean the same thing. */
h2 .fa-fw{margin-right:7px;font-size:.85em;color:var(--ink-faint);}
.card h3 .fa-fw,.stage-card h3 .fa-fw{margin-right:7px;font-size:.85em;color:var(--ink-faint);}
.warn > .fa-fw{margin-right:8px;color:var(--ink-faint);}
.crit > .fa-fw{color:var(--danger);}
.pc-flag .fa-fw,.pc-flag i{margin-right:5px;}

/* ---------------- SPA transition ---------------- */
.page{transition:opacity .1s ease;}
.page.fading{opacity:0;}