/*
 * site-shell.css -- the After The Timeout header, Best Ball tools bar and footer (see site-nav.js).
 *
 * Inter comes from Google Fonts, exactly as on afterthetimeout.com. The app's CSP already allows
 * it (style-src https://fonts.googleapis.com, font-src https://fonts.gstatic.com); the older
 * comments in styles-ato.css and auth.css saying otherwise predate that header.
 *
 * The two generated blocks are copied from the site by tools/sync_site_nav.php. Do not edit between
 * the markers; edit the site's _content/site-header.php or _content/nav.php and re-run the sync.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* Site tokens, scoped to the shared chrome so they never collide with a page's own variables
   (auth.css and styles.css both define a --line / --accent-2 that mean something else). */
.site-header,
.app-subnav,
.site-footer {
  --ink: #f4f7f8;
  --ink-soft: #aab6c8;
  --ink-dim: #7c8aa3;
  --accent: #ff5a2c;
  --accent-2: #ff7d54;
  --gold: #ffb43d;
  --line: #20292f;
  --panel: #1a242a;
  --panel-line: #2b3841;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-header *,
.app-subnav *,
.site-footer * {
  box-sizing: border-box;
}

/*ATO_SITE_HEADER_CSS_START*/
/* The bar itself. nav.php styles the MENU and assumes the shell around it already exists, which on
   these pages it never did -- without this the nav renders as a 262px stack of links. Values are
   the ones the shell pages already use, so the header is identical everywhere. */
header.site-header{position:sticky;top:0;z-index:50;padding:0;
  background:rgba(15,20,23,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#22303a)}
/* box-sizing is NOT global on these older pages the way it is on the shell ones, so height:62px
   would be added to inherited padding and the bar comes out ~137px. Stated here so the bar's
   height never depends on what an individual page happens to inherit. */
header.site-header .wrap{display:flex;align-items:center;gap:20px;height:62px;max-width:1280px;
  box-sizing:border-box;padding-top:0;padding-bottom:0}
header.site-header a{text-decoration:none}
header.site-header .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;
  letter-spacing:-.03em;color:var(--ink,#f4f7f8)}
header.site-header .logo .mark{width:24px;height:24px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent,#ff5a2c),var(--accent-2,#ff7d54));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
header.site-header .nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
header.site-header .login{color:var(--ink-soft,#aab6c8);font-size:14px;white-space:nowrap}
header.site-header .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:8px;background:var(--accent,#ff5a2c);color:#0c1114;border:0;
  cursor:pointer;white-space:nowrap}
/* nav.php sticks the bare `header` selector, which is correct on pages where the site bar is the
   only <header>. Every page here has a second one wrapping its h1, and that one would pin itself
   over the content. One rule, so no page needs its own header tag edited. */
header:not(.site-header){position:static}
@media (max-width:920px){
  header.site-header .wrap{gap:10px;height:auto;min-height:56px;padding-top:7px;padding-bottom:7px}
}
/*ATO_SITE_HEADER_CSS_END*/

/*ATO_NAV_CSS_START*/
/* --- site nav (shared; see _content/nav.php) --- */
/* Drew: "make sure the header stays no matter where you are on the site." Sticky rather than
   fixed, so it does not need a compensating body offset on every page and cannot double up with
   the layouts that already reserve space at the top. This block is written into each page LAST,
   after the page's own stylesheet, so it outranks any local `header{position:static}`. */
header{position:sticky;top:0;z-index:50}
/* Long tables set their own sticky headers at z-index 2; the site header has to sit above them or
   the column labels scroll over the nav. */
thead th{z-index:2}
/* Legacy page CSS carries `@media (max-width:920px){ nav ul{display:none} }`, which is what used
   to delete the whole menu on phones. It matches EVERY ul inside nav, so the third-level lists
   inherited display:none and a section could open while its links stayed invisible. These
   class-based rules outrank it (0-2-0 against 0-0-2) and are stated explicitly for that reason. */
.site-nav ul{list-style:none;margin:0;padding:0;display:block}
.site-nav .lv3{display:block}
.site-nav .lv1{display:flex;gap:4px;align-items:center}
.lv1-btn{background:none;border:0;color:var(--ink-soft,#aab6c8);font:inherit;font-size:14px;
  font-weight:500;padding:9px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;
  gap:6px;white-space:nowrap}
.lv1-btn:hover,.lv1-btn[aria-expanded="true"]{color:var(--ink,#f4f7f8);background:rgba(255,255,255,.06)}
.lv1-btn:focus-visible{outline:2px solid var(--accent,#ff5a2c);outline-offset:2px}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;transition:transform .15s}
.lv1-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.site-nav .has-sub{position:relative}
.site-nav .lv2{position:absolute;top:calc(100% + 6px);left:0;min-width:216px;
  background:#141c22;border:1px solid #25313a;border-radius:10px;padding:7px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);display:none;z-index:70}
/* Hover-open is for pointer devices only. Gating it on (hover:hover) keeps a tap from leaving a
   sticky :hover on a phone, which is what made the mobile accordion refuse to open: the mobile
   override `.has-sub:hover .lv2{display:none}` scored 0-4-0 and beat `.lv2.open` at 0-3-0. */
@media (hover:hover) and (min-width:921px){ .site-nav .has-sub:hover .lv2{display:block} }
.site-nav .lv2.open{display:block}
.site-nav .lv2 a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;
  color:var(--ink-soft,#aab6c8);text-decoration:none;white-space:nowrap}
.site-nav .lv2 a:hover,.site-nav .lv2 a:focus-visible{background:rgba(255,255,255,.07);color:var(--ink,#f4f7f8)}
.site-nav .lv2 a.on{color:var(--accent,#ff5a2c)}
.site-nav .grp-t{display:block;padding:9px 12px 3px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim,#7c8aa3);font-weight:700}
.site-nav .lv3 a{padding-left:22px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;
  flex-direction:column;gap:5px;border-radius:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink,#f4f7f8);border-radius:2px;
  transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--accent,#ff5a2c);outline-offset:2px}
@media (max-width:920px){
  .burger{display:flex}
  /* Under 920px the old rule was `nav ul{display:none}` with nothing to replace it, so phones
     had no navigation at all. This is the replacement, not a restyle. */
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0f1417;
    border-top:1px solid #25313a;border-bottom:1px solid #25313a;padding:10px 16px 18px;
    max-height:78vh;overflow-y:auto;z-index:65}
  .site-nav.open{display:block}
  .site-nav .lv1{flex-direction:column;align-items:stretch;gap:0}
  .lv1-btn{width:100%;justify-content:space-between;padding:14px 6px;font-size:16px;
    border-bottom:1px solid #1c262d;border-radius:0}
  .site-nav .lv2{position:static;display:none;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:4px 0 10px}
  .site-nav .lv2.open{display:block}
  .site-nav .lv2 a{padding:11px 14px;font-size:15px}
  .site-nav .lv3 a{padding-left:28px}
  .nav-cta .login{display:inline}

  /* The header row could not fit its own contents on a phone. Logo, burger, "Log in" and a
     "Get access - $25/mo" button were laid out in a fixed-height 62px flex row with 20px gaps
     inside 24px page padding: at 390px that overflows, so the logo wrapped onto two lines and
     "Log in" was pushed to top:-11px and clipped off the top of the screen. Tightening the
     spacing and letting the row size to its content fixes both without hiding anything. */
  header .wrap{gap:10px;height:auto;min-height:56px;padding-top:7px;padding-bottom:7px}
  .wrap{padding-left:14px;padding-right:14px}
  .logo{font-size:15px;white-space:nowrap;flex:0 0 auto}
  .nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
  .burger{margin-left:0;padding:8px}
}
@media (max-width:560px){
  /* The full price in the button is what tips the row over on the narrowest phones. The offer is
     on the page it links to, so the button keeps the verb and drops the number. */
  .nav-cta .btn-primary{font-size:12.5px;padding:9px 12px}
  .nav-cta .btn-primary .cta-price{display:none}
  /* Stopping the logo from wrapping fixed the clipped header and then cost 160px of a 345px row,
     which pushed the whole thing off the right edge instead. At this width the row simply cannot
     hold a wordmark, a burger, a login link and a button, so the wordmark goes and the mark
     stays -- it is still a link home, and it is the one piece that reads at a glance. */
  .logo .wordmark{display:none}
}
/*ATO_NAV_CSS_END*/

/* ---- app additions ------------------------------------------------------------------------ */

html,
body {
  background: #0f1417;
}
body {
  margin: 0;
}

/* The synced nav CSS gives every bare <header> z-index:50 (and site-header.php only resets its
   position). The tool pages' own page-head is a <header> and a grid item, and a grid item with a
   z-index stacks even when static, so it painted over the open phone menu. */
header:not(.site-header) {
  z-index: auto;
}

header.site-header {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
header.site-header .wrap {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* styles.css styles every <button> and <a.ghost-btn> for the tool forms (44px min-height, input
   background, a lift and a blue wash on hover). None of that belongs in the menu. */
.site-header button,
.site-header button:hover {
  min-height: 0;
  transform: none;
}
.site-header .burger,
.site-header .burger:hover {
  background: none;
  border: 0;
}
.site-header .btn,
.site-header .btn:hover {
  color: #0c1114 !important;
  background: var(--accent) !important;
  border: 0 !important;
  text-decoration: none;
}
.site-header .btn:hover {
  background: var(--accent-2) !important;
}
.site-header .login {
  color: var(--ink-soft);
}
.site-header .login:hover {
  color: var(--ink);
}

/* Signed-in controls: the account name, My Account, Log out. */
.site-header .nav-user {
  color: var(--ink-dim);
  font-size: 13px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header .nav-user:empty {
  display: none;
}
.site-header .nav-logout {
  background: none;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.site-header .nav-logout:hover {
  color: var(--ink);
  border-color: #3a4a55;
  background: rgba(255, 255, 255, 0.05);
}
.site-header .nav-logout:focus-visible,
.site-header .btn:focus-visible,
.site-header .login:focus-visible,
.site-header .logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 920px) {
  .site-header .nav-user {
    display: none;
  }
  .site-header .nav-logout {
    padding: 8px 11px;
    font-size: 13px;
  }
}
@media (max-width: 560px) {
  .site-header .nav-cta {
    gap: 8px;
  }
}
@media (max-width: 360px) {
  /* Mark, burger, My Account and Log out on a 320px phone: tighten, never drop a control. */
  header.site-header .wrap {
    gap: 6px;
  }
  .site-header .nav-cta {
    gap: 6px;
  }
  .site-header .nav-cta .btn-primary {
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .site-header .nav-logout {
    padding: 7px 9px;
    font-size: 12.5px;
  }
}

/* ---- Best Ball tools bar ------------------------------------------------------------------ */
/* Its own band under the header, so "which tool am I in" is answered before the page starts. */
.app-subnav {
  background: #141b1f;
  border-bottom: 1px solid var(--line);
}
.app-subnav .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.app-subnav-t {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.app-subnav-links {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-subnav-links::-webkit-scrollbar {
  display: none;
}
.app-subnav-links a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.app-subnav-links a:hover {
  color: var(--ink);
}
.app-subnav-links a.on {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.app-subnav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width: 920px) {
  .app-subnav .wrap {
    padding: 0 14px;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  /* Label on its own line, tools as a swipeable row the full width of the phone. */
  .app-subnav .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .app-subnav-t {
    padding: 10px 14px 0;
  }
  .app-subnav-links {
    padding: 0 6px;
  }
  .app-subnav-links a {
    min-height: 44px;
    padding: 0 10px;
  }
}

/* ---- footer ----------------------------------------------------------------------------- */
footer.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding: 28px 0 56px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.6;
  background: #0f1417;
}
footer.site-footer .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
footer.site-footer p {
  margin: 0 0 10px;
  max-width: 90ch;
}
.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.site-footer-brand .mark {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.site-footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--accent);
}
@media (max-width: 920px) {
  footer.site-footer .wrap {
    padding: 0 16px;
  }
}

/* Sticky page controls (the research filters, the draft board strip) sit under the header
   instead of sliding beneath it. */
.sticky-filters,
.draft-sticky {
  top: 62px !important;
}
@media (max-width: 920px) {
  .sticky-filters,
  .draft-sticky {
    top: 56px !important;
  }
}

/* Sign-in and My Account: the card sits under the full-width header rather than inside the body
   padding auth.css gives pages that have no header (auth/link, auth/checkout-return). */
body.auth-body {
  padding: 0;
}
body.auth-body .auth-screen {
  box-sizing: border-box;
  max-width: 452px;
  padding: 40px 16px 0;
}