/* ==========================================================================
   My Recruiting — app shell for /my-recruiting.html
   Design tokens (turf/chalk/flag palette, Archivo Black + Archivo +
   Space Mono, 2px ink borders, 2px radius) all come from styles.css, which
   this file loads on top of. Nothing new is invented here; this is the same
   language at dashboard density.
   ========================================================================== */

.app-body{background:var(--chalk);}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--flag-gold); color:var(--ink); padding:10px 16px;
  font-weight:700; border:2px solid var(--ink);
}
.skip-link:focus{left:8px; top:8px;}

.app-shell{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh;}

/* ---------------------------------------------------------------- Sidebar */
.sidebar{
  background:var(--turf-900); color:var(--chalk);
  border-right:2px solid var(--ink);
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column; padding:22px 0 16px;
  /* Faint chalk yard-lines, so the rail reads as field, not as a plain
     dark panel. Fixed and non-interactive — nothing scrolls under it. */
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 63px, rgba(245,243,234,.055) 63px 64px
  );
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--display); font-size:.95rem; line-height:1.15;
  color:var(--chalk); padding:0 20px 22px;
  border-bottom:1px solid rgba(245,243,234,.16); margin-bottom:18px;
}
.sidebar-brand .brand-mark{flex:none; background:var(--flag-gold);}

.sidebar-nav{display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto;}
.sidebar-label{
  font-family:var(--mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.12em; color:#7f9c8b; margin:14px 0 6px; padding:0 20px;
}
.sidebar-label:first-child{margin-top:0;}
.sidebar-link{
  display:flex; align-items:center; gap:10px; position:relative;
  padding:9px 20px; font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--chalk-dim); transition:background .14s ease, color .14s ease;
}
.sidebar-link:hover{background:rgba(245,243,234,.07); color:var(--chalk);}
.sidebar-tick{
  width:3px; height:14px; background:transparent; flex:none;
  transition:background .14s ease, transform .14s ease;
}
.sidebar-link.is-active{color:var(--chalk); background:rgba(242,182,50,.1);}
.sidebar-link.is-active .sidebar-tick{background:var(--flag-gold); transform:scaleY(1.3);}
.sidebar-count{
  margin-left:auto; font-family:var(--mono); font-size:.68rem; font-weight:700;
  background:var(--flag-red); color:var(--chalk);
  padding:1px 7px; border-radius:10px;
}
.sidebar-foot{
  padding:14px 20px 0; border-top:1px solid rgba(245,243,234,.16); margin-top:12px;
}
.sidebar-user{
  font-family:var(--mono); font-size:.68rem; color:#7f9c8b;
  margin:0 0 6px; word-break:break-all;
}
.sidebar-signout{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--flag-gold); text-decoration:underline;
}

/* ------------------------------------------------------------------- Main */
.rec-main{padding:32px 36px 72px; min-width:0;}

.rec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:28px;
  padding-bottom:18px; border-bottom:2px solid var(--ink);
}
.rec-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0;}
.rec-head .eyebrow{margin-bottom:.5em;}
.rec-head-note{
  font-size:.85rem; color:#41503f; margin:0; max-width:44ch;
  background:#eee9d8; border-left:3px solid var(--flag-gold); padding:8px 12px;
}
.rec-head-note a{font-weight:700; text-decoration:underline; text-decoration-color:var(--flag-gold);}

.rec-section{margin-bottom:44px; scroll-margin-top:24px;}
.section-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:16px;
}
.section-head h2{font-size:1.35rem; margin:0 0 3px;}
.section-sub{font-size:.88rem; color:#5d6b59; margin:0; max-width:62ch;}

.inline-note{
  font-family:var(--mono); font-size:.76rem; color:var(--turf-700);
  background:#dcefe2; border-left:3px solid var(--turf-500);
  padding:8px 12px; margin:0 0 14px;
}
.inline-note.is-error{color:#8c2f1b; background:#fbe4de; border-left-color:var(--flag-red);}

/* ------------------------------------------------------------ Stat cards */
.stat-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.stat-card{
  border:2px solid var(--ink); border-radius:var(--radius);
  background:#fff; padding:16px 18px 14px; position:relative; overflow:hidden;
}
/* Gold rule along the top edge, mirroring the hero's stat treatment. */
.stat-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--flag-gold);
}
.stat-card-alert::before{background:var(--flag-red);}
.stat-label{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--turf-700); margin:0 0 6px;
}
.stat-value{
  font-family:var(--display); font-size:2.3rem; line-height:1;
  margin:0 0 6px; color:var(--turf-900); font-variant-numeric:tabular-nums;
}
.stat-card-alert .stat-value{color:var(--flag-red);}
.stat-foot{font-size:.76rem; color:#7c876f; margin:0;}

/* ----------------------------------------------------------------- Board */
.board-scroll{
  border:2px solid var(--ink); background:#fff;
  overflow-x:auto; overflow-y:hidden;
}
.board{display:grid; grid-auto-flow:column; grid-auto-columns:232px; min-height:220px;}
.board-col{
  border-right:1px solid var(--chalk-dim); display:flex; flex-direction:column; min-width:0;
}
.board-col:last-child{border-right:none;}
.board-col-head{
  padding:10px 12px; background:var(--turf-900); color:var(--chalk);
  border-bottom:2px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.board-col-name{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; line-height:1.2;
}
.board-col-count{
  font-family:var(--display); font-size:1rem; color:var(--flag-gold);
  font-variant-numeric:tabular-nums; flex:none;
}
.board-col-body{
  padding:10px; display:flex; flex-direction:column; gap:8px;
  max-height:420px; overflow-y:auto; flex:1;
}
.board-card{
  border:1px solid var(--ink); border-left:3px solid var(--turf-500);
  border-radius:var(--radius); background:var(--chalk); padding:8px 10px;
}
.board-card-school{font-size:.85rem; font-weight:700; line-height:1.2;}
.board-card-meta{
  font-family:var(--mono); font-size:.65rem; color:#7c876f;
  margin-top:3px; line-height:1.3;
}
.board-card-foot{display:flex; align-items:center; gap:6px; margin-top:8px;}
.board-card select{
  font-family:var(--mono); font-size:.63rem; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 4px; border:1px solid var(--ink);
  border-radius:var(--radius); background:#fff; flex:1; min-width:0; cursor:pointer;
}
.board-card-remove{
  background:none; border:none; cursor:pointer; padding:2px 4px;
  color:var(--flag-red); font-size:.95rem; line-height:1; flex:none;
}
.board-empty{
  font-family:var(--mono); font-size:.66rem; color:#a8ae9c;
  text-align:center; padding:16px 6px; line-height:1.5;
}
/* Stage-coloured left edges, cool → warm as the athlete moves right. */
.stage-interested .board-card{border-left-color:#9aa88f;}
.stage-researching .board-card{border-left-color:#6f8f7a;}
.stage-contacted .board-card{border-left-color:var(--turf-500);}
.stage-responded .board-card{border-left-color:#2f8f9e;}
.stage-camp_invite .board-card{border-left-color:#c79a1e;}
.stage-visit .board-card{border-left-color:var(--flag-gold);}
.stage-offer .board-card{border-left-color:var(--flag-red);}
.stage-committed .board-card{border-left-color:var(--turf-900); background:#dcefe2;}

/* ------------------------------------------------------------ Follow-ups */
.followup-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:2px solid var(--ink); border-radius:var(--radius);
  background:#fff; padding:12px 14px; margin-bottom:10px;
}
.followup-row.is-overdue{border-left:6px solid var(--flag-red);}
.followup-row.is-due{border-left:6px solid var(--flag-gold);}
.followup-row.is-quiet{border-left:6px solid var(--turf-500);}
.followup-main{flex:1; min-width:200px;}
.followup-school{font-weight:700; font-size:.95rem;}
.followup-why{font-size:.82rem; color:#5d6b59; margin-top:2px;}
.followup-when{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; color:#7c876f; margin-top:4px;
}
.followup-actions{display:flex; gap:8px; flex-wrap:wrap;}
.mini-btn{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.04em; padding:6px 10px; cursor:pointer;
  border:2px solid var(--ink); border-radius:var(--radius); background:#fff;
  transition:background .14s ease;
}
.mini-btn:hover{background:var(--flag-gold);}
.mini-btn-quiet{border-color:var(--chalk-dim); color:#5d6b59;}
.mini-btn-quiet:hover{background:#eee9d8;}

.caught-up{
  border:2px dashed var(--turf-500); border-radius:var(--radius);
  background:#dcefe2; padding:28px 20px; text-align:center;
}
.caught-up-mark{
  width:34px; height:34px; margin:0 auto 10px; background:var(--turf-500);
  clip-path:polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}
.caught-up h3{font-size:1.1rem; margin:0 0 4px;}
.caught-up p{font-size:.86rem; color:#41503f; margin:0;}

/* --------------------------------------------------------------- Builder */
.builder{
  border:2px solid var(--ink); border-radius:var(--radius);
  background:#fff; padding:20px;
}
.builder-selects{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; margin-bottom:14px;}
.field-narrow{max-width:190px; margin-bottom:0;}
.field label{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:5px; color:var(--turf-700);
}
.field select, .field input, .field textarea{
  font-family:var(--body); font-size:.92rem; padding:10px 12px; width:100%;
  border:2px solid var(--ink); border-radius:var(--radius); background:#fff;
  color:var(--ink);
}
.field textarea{font-size:.9rem; line-height:1.55; resize:vertical; min-height:180px;}
.field select:disabled{background:#f0eee3; color:#8a8a7a; cursor:not-allowed;}
.field-foot{font-size:.78rem; color:#8a5a12; margin:6px 0 0;}

.coach-note{
  font-size:.83rem; padding:10px 13px; margin:0 0 16px;
  border-left:3px solid var(--flag-gold); background:#fdf6e6; color:#5d4a16;
}
.coach-note a{font-weight:700; text-decoration:underline;}
.coach-note.is-good{border-left-color:var(--turf-500); background:#dcefe2; color:var(--turf-700);}

.builder-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:4px; padding-top:16px;
  border-top:1px solid var(--chalk-dim);
}
.builder-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ------------------------------------------------------------- Templates */
.template-library{
  border:2px solid var(--ink); background:#fff;
  max-height:460px; overflow-y:auto;
}
.template-item{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 16px; border-bottom:1px solid var(--chalk-dim);
  transition:background .14s ease;
}
.template-item:last-child{border-bottom:none;}
.template-item:hover{background:#f7f5ec;}
.template-item.is-loaded{background:#dcefe2;}
.template-copy{min-width:0;}
.template-name{font-size:.95rem; font-weight:700; line-height:1.2;}
.template-name .template-tag{
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--chalk); background:var(--turf-500);
  padding:2px 6px; margin-left:8px; vertical-align:1px; border-radius:8px;
}
.template-use{font-size:.83rem; color:#5d6b59; margin-top:3px;}
.template-item .mini-btn{flex:none;}

/* --------------------------------------------------------------- History */
.history-table{width:100%; border-collapse:collapse; font-size:.86rem; background:#fff;}
.history-wrap{border:2px solid var(--ink); overflow-x:auto;}
.history-table th{
  text-align:left; font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; background:var(--turf-900); color:var(--chalk); padding:9px 12px;
  white-space:nowrap;
}
.history-table td{padding:9px 12px; border-top:1px solid var(--chalk-dim); vertical-align:top;}
.history-table tr:hover td{background:#f7f5ec;}
.channel-pill{
  display:inline-block; font-family:var(--mono); font-size:.63rem; text-transform:uppercase;
  padding:2px 7px; border-radius:10px; background:#eee9d8; color:#5d4a16; letter-spacing:.03em;
}
.channel-response{background:#dcefe2; color:var(--turf-700);}

.empty-note{
  border:2px dashed var(--chalk-dim); border-radius:var(--radius);
  padding:22px; text-align:center; color:#7c876f; font-size:.87rem; background:#fff;
}

/* ----------------------------------------------------------------- Gates */
.rec-gate{max-width:620px; padding:48px 0;}
.rec-gate h1{font-size:clamp(1.7rem,3.2vw,2.4rem);}
.rec-gate-sub{color:#41503f; font-size:1rem;}
.rec-gate-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

.skeleton{background:#e6e2d4; border-radius:var(--radius); animation:pulse 1.4s ease-in-out infinite;}
.skeleton-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0 14px;}
.skeleton-card{height:108px;}
.skeleton-block{height:230px;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.5;}}

/* Modal form used by "+ Log Activity" — matches #auth-form's rhythm. */
.stack-form{display:flex; flex-direction:column; gap:5px;}
.stack-form label{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; margin-top:10px;
}
.stack-form input, .stack-form select, .stack-form textarea{
  font-family:var(--body); font-size:.92rem; padding:10px 12px;
  border:2px solid var(--ink); border-radius:var(--radius); background:#fff;
  width:100%; resize:vertical;
}
.stack-form button[type="submit"]{margin-top:18px;}

/* ----------------------------------------------------------- Responsive */
@media (max-width:1080px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .builder-selects{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{
    position:static; height:auto; flex-direction:row; align-items:center;
    flex-wrap:wrap; gap:8px 16px; padding:14px 18px; background-image:none;
    border-right:none; border-bottom:2px solid var(--ink);
  }
  .sidebar-brand{padding:0; border-bottom:none; margin:0; font-size:.85rem;}
  .sidebar-nav{flex-direction:row; flex-wrap:wrap; gap:2px; overflow:visible; flex-basis:100%;}
  .sidebar-label{display:none;}
  .sidebar-link{padding:6px 10px; font-size:.8rem;}
  .sidebar-tick{display:none;}
  .sidebar-link.is-active{border-bottom:3px solid var(--flag-gold);}
  .sidebar-foot{border-top:none; margin:0; padding:0; margin-left:auto;}
  .sidebar-user{display:none;}
  .rec-main{padding:22px 18px 56px;}
  .rec-head{align-items:flex-start;}
}
@media (max-width:560px){
  .stat-row{grid-template-columns:1fr;}
  .skeleton-grid{grid-template-columns:repeat(2,1fr);}
  .builder{padding:14px;}
  .template-item{flex-direction:column; align-items:flex-start;}
}