/* Velocity Arena — design tokens (Inter + JetBrains Mono, layered navy palette).
   Tokens live in /styles/va-tokens.css; this file defines layout, components,
   and applies the tokens to existing selectors. Legacy variable names
   (--navy, --cyan, --slate, etc.) are aliased to the new tokens, so existing
   rules continue working without per-page edits. */
@import url('/styles/va-tokens.css');

*{box-sizing:border-box;margin:0;padding:0;}

html{font-size:26px;}

/* Visible focus indicator for keyboard users (does not affect mouse clicks) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit;}

body{font-family:var(--font-sans);background:var(--body-bg);color:var(--text);min-height:100vh;font-size:1.0625rem;line-height:1.65;}

/* HEADER */
.site-header{background:var(--navy);padding-bottom:2em; border-bottom:0.1875rem solid var(--cyan);}
.header-inner{max-width:90rem;margin:0 auto;padding:1.75rem 2rem 0;display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;}
.logo-program{font-size:0.75rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;margin-bottom:0.375rem;}
.logo-name{font-size:2.625rem;font-weight:800;color:var(--white);letter-spacing:-.02em;line-height:1;}
.logo-name span{color:var(--cyan);}
.logo-sub{font-size:0.875rem;color:var(--slate);margin-top:0.5rem;font-weight:400;}
.header-robot{width:5rem;height:5rem;background:var(--navy2);border:0.125rem solid var(--cyan);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:0.25rem;}
.header-robot svg{width:2.875rem;height:2.875rem;}

/* SITE PICKER */
.site-picker{display:flex;flex-direction:column;gap:0.25rem;margin-bottom:0.25rem;}
.site-picker label{font-size:0.625rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;}
.site-picker select{background:var(--navy2);color:var(--white);border:0.09375rem solid var(--navy3);border-radius:0.375rem;padding:0.4375rem 0.625rem;font-family:var(--font-sans);font-size:0.8125rem;font-weight:600;cursor:pointer;outline:none;transition:border-color .15s;min-width:8rem;}
.site-picker select:hover{border-color:var(--cyan);}
.site-picker select:focus{border-color:var(--cyan);}
.site-picker option{background:var(--navy2);color:var(--white);}

/* NAV */
.site-nav{background:var(--navy);border-bottom:0.0625rem solid var(--border);}
/* flex-wrap is load-bearing: the nav links are white-space:nowrap, so without
   it the row stays on one line (~1025px) and drags every page that uses this
   stylesheet into horizontal scroll on a phone. Kept in sync with the same
   rule in styles/site-header.css. */
.nav-inner{max-width:90rem;margin:0 auto;padding:0 2rem;display:flex;gap:0;flex-wrap:wrap;}
.nav-link{font-size:0.6875rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;padding:0.875rem 0.75rem 1.125rem;border-bottom:0.1875rem solid transparent;text-decoration:none;display:block;transition:color .15s;white-space:nowrap;}
.nav-link:hover{color:var(--white);}
.nav-link.active{color:var(--cyan);border-bottom-color:var(--cyan);}

/* MAIN */
.page-body{max-width:90rem;margin:0 auto;padding:2.25rem 2rem 4.5rem;}

/* SECTION LABEL — navy bg, use cyan */
.section-label{font-size:0.8125rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;margin-bottom:0.75rem;}

/* CARDS — dark on dark */
.card{background:var(--card-bg);border:0.0625rem solid var(--card-border);border-radius:0.75rem;padding:1.375rem;}
.card-dark{background:var(--navy2);border:0.0625rem solid var(--border);border-radius:0.75rem;padding:1.375rem;}

/* BUTTONS */
.btn-primary{display:inline-block;background:var(--cyan);color:var(--navy);font-family:var(--font-sans);font-size:0.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:0.875rem 1.75rem;border-radius:0.5rem;border:none;cursor:pointer;text-decoration:none;transition:opacity .15s;}
.btn-primary:hover{opacity:.88;}
.btn-outline{display:inline-block;background:transparent;color:var(--cyan);font-family:var(--font-sans);font-size:0.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:0.75rem 1.375rem;border-radius:0.5rem;border:0.09375rem solid var(--cyan);cursor:pointer;text-decoration:none;transition:background .15s,color .15s;}
.btn-outline:hover{background:var(--cyan);color:var(--navy);}

/* TAGS */
.tag{display:inline-block;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:0.1875rem 0.5625rem;border-radius:0.25rem;background:var(--navy3);color:var(--slate);border:0.0625rem solid var(--border);}
.tag-cyan{background:var(--navy3);color:var(--cyan);border-color:var(--border);}
.tag-navy{background:var(--navy);color:var(--cyan);border-color:var(--border);}

/* TODAY BANNER */
.today-banner{background:var(--navy2);border-left:0.375rem solid var(--cyan);border-radius:0 0.75rem 0.75rem 0;padding:1.375rem 1.625rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;}
.today-day{font-size:0.6875rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;margin-bottom:0.375rem;}
.today-title{font-size:1.375rem;font-weight:800;color:var(--white);margin-bottom:0.375rem;}
.today-desc{font-size:0.9375rem;color:var(--slate);line-height:1.55;}

/* WEEK STRIP */
.week-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0.625rem;margin-bottom:1.75rem;}
.day-cell{background:var(--card-bg);border:0.09375rem solid var(--card-border);border-radius:0.625rem;padding:0.875rem 0.5rem;text-align:center;}
.day-cell.done{opacity:.4;}
.day-cell.current{border-color:var(--cyan);background:var(--navy3);}
.day-num{font-size:1.25rem;font-weight:800;color:var(--white);}
.day-cell.current .day-num{color:var(--cyan);}
.day-topic{font-size:0.6875rem;color:var(--slate);line-height:1.35;font-weight:500;margin-top:0.25rem;}
.day-cell.current .day-topic{color:var(--cyan);}

/* TIMELINE */
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-row{display:flex;gap:0.75rem;align-items:stretch;}
.tl-time{font-size:0.75rem;font-weight:700;color:var(--cyan);min-width:3.25rem;padding-top:0.875rem;text-align:right;flex-shrink:0;}
.tl-line-wrap{display:flex;flex-direction:column;align-items:center;width:1.25rem;flex-shrink:0;}
.tl-dot{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--border);border:0.125rem solid var(--border);margin-top:1rem;flex-shrink:0;}
.tl-dot.active{background:var(--cyan);border-color:var(--cyan);}
.tl-line{flex:1;width:0.125rem;background:var(--border);}
.tl-card{flex:1;background:var(--card-bg);border:0.0625rem solid var(--card-border);border-radius:0.5rem;padding:0.8125rem 1rem;margin-bottom:0.375rem;}
.tl-card.active{border-color:var(--cyan);background:var(--navy3);}
.tl-title{font-size:0.875rem;font-weight:700;color:var(--white);margin-bottom:0.1875rem;}
.tl-card.active .tl-title{color:var(--cyan);}
.tl-sub{font-size:0.8125rem;color:var(--slate);line-height:1.5;}

/* TOOLS */
.tools-grid{display:flex;flex-direction:column;gap:0.625rem;}
.tool-card{background:var(--card-bg);border:0.0625rem solid var(--card-border);border-radius:0.75rem;padding:1.125rem 1.25rem;display:flex;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit;transition:border-color .15s;}
.tool-card:hover{border-color:var(--cyan);}
.tool-icon{width:2.75rem;height:2.75rem;background:var(--navy3);border:0.09375rem solid var(--border);border-radius:0.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tool-icon svg{width:1.375rem;height:1.375rem;}
.tool-name{font-size:0.9375rem;font-weight:700;color:var(--white);margin-bottom:0.25rem;}
.tool-desc{font-size:0.8125rem;color:var(--slate);line-height:1.55;}

/* RESOURCE GRID */
.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem;}
.resource-card{background:var(--card-bg);border:0.0625rem solid var(--card-border);border-radius:0.625rem;padding:1.125rem 1.25rem;}
.resource-title{font-size:0.875rem;font-weight:700;color:var(--white);margin-bottom:0.3125rem;}
.resource-desc{font-size:0.8125rem;color:var(--slate);line-height:1.55;margin-bottom:0.5rem;}
.resource-link{font-size:0.75rem;font-weight:700;color:var(--cyan);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;}
.resource-link:hover{text-decoration:underline;}

/* DIFF TABLE */
.diff-table{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.0625rem;background:var(--border);border-radius:0.625rem;overflow:hidden;margin-top:0.75rem;}
.diff-col{background:var(--card-bg);padding:1rem 1.125rem;}
.diff-col-head{font-size:0.75rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.06em;margin-bottom:0.625rem;padding-bottom:0.625rem;border-bottom:0.125rem solid var(--border);}
.diff-col:first-child .diff-col-head{border-bottom-color:#CC7700;}
.diff-col:nth-child(2) .diff-col-head{border-bottom-color:var(--cyan);}
.diff-col:last-child .diff-col-head{border-bottom-color:#44CC88;}
.diff-item{font-size:0.8125rem;color:var(--slate);line-height:1.65;padding:0.125rem 0;}

/* STATS */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.625rem;margin-top:0.875rem;}
.stat-box{background:var(--navy3);border:0.09375rem solid var(--border);border-radius:0.625rem;padding:1rem;text-align:center;}
.stat-num{font-size:2rem;font-weight:800;color:var(--cyan);}
.stat-label{font-size:0.6875rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;margin-top:0.3125rem;font-weight:700;}

/* WEEK GRID */
.week-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem;margin-bottom:1.5rem;}
.week-card{background:var(--card-bg);border:0.0625rem solid var(--card-border);border-radius:0.625rem;padding:1.125rem;}
.week-title{font-size:0.8125rem;font-weight:700;color:var(--cyan);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:.05em;}
.week-days{font-size:0.8125rem;color:var(--slate);line-height:1.9;}

/* DAILY STRUCTURE */
.daily-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0.375rem;}
.daily-block{background:var(--card-bg);border:0.09375rem solid var(--card-border);border-radius:0.5rem;padding:0.875rem 0.5rem;text-align:center;}
.daily-block.highlight{border-color:var(--cyan);background:var(--navy3);}
.daily-time{font-size:0.6875rem;font-weight:700;color:var(--cyan);margin-bottom:0.25rem;}
.daily-name{font-size:0.8125rem;font-weight:700;color:var(--white);}
.daily-dur{font-size:0.6875rem;color:var(--slate);margin-top:0.1875rem;}

/* FOOTER */
.site-footer{background:var(--navy2);border-top:0.0625rem solid var(--border);padding:1.5rem 1.75rem;text-align:center;font-size:0.875rem;color:var(--slate);}
.site-footer a{color:var(--cyan);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* RESPONSIVE */

/* Tablets and small windows: shrink the header chrome before it gets tight. */
@media(max-width:48rem){
  .header-inner{flex-wrap:wrap;padding:1.25rem 1rem 0;gap:0.875rem;}
  .logo-name{font-size:1.875rem;}
  .nav-inner{padding:0 0.5rem;}
  .nav-link{padding:0.75rem 0.625rem 0.875rem;}
}

@media(max-width:40rem){
  /* Keep the header short. Unshrunk it ran 525px on a 390x844 phone — 62% of
     the screen before a single word of the day's plan. */
  .site-header{padding-bottom:0.875rem;}
  .header-inner{flex-direction:column;align-items:stretch;padding:0.875rem 0.875rem 0;gap:0.625rem;}
  .header-robot{display:none;}
  .logo-program{font-size:0.5625rem;letter-spacing:.06em;margin-bottom:0.25rem;}
  .logo-name{font-size:1.5rem;}
  .logo-sub{display:none;}          /* long strapline wraps to 3+ lines */

  /* The right-hand cluster (site picker + partner logo + robot) is a bare
     inline-styled div with no class, so it's reached as a child. Left alone
     it measures ~426px and overflows a 390px phone on its own. Site picker
     and partner logo share one row rather than stacking. */
  .header-inner > div{width:100%;display:flex;align-items:flex-end;gap:0.75rem;}
  .site-picker{flex:1 1 auto;min-width:0;gap:0.1875rem;}
  .site-picker label{font-size:0.5625rem;}
  .site-picker select{width:100%;min-width:0;padding:0.5625rem 0.625rem;font-size:1rem;}
  /* !important because the partner logo carries an inline height:48px from
     renderHeader() in site.js, which would otherwise win and squeeze the site
     picker until the site name truncates. */
  .header-inner > div img{height:28px !important;flex-shrink:0;}

  /* Tighter nav rows, but each link still clears the 44px touch minimum.
     Deliberately px, not rem: html{font-size} is 26px here and 21px on
     today.html, so a rem value would land ~30-60% off the intended target. */
  .nav-link{padding:0 0.5rem;font-size:0.625rem;letter-spacing:.02em;
    min-height:44px;display:flex;align-items:center;}

  .resource-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .week-grid{grid-template-columns:1fr;}
  .daily-strip{grid-template-columns:1fr 1fr;}
  .diff-table{grid-template-columns:1fr;}
  .week-strip{grid-template-columns:repeat(5,1fr);}
}