/* A-Train audience review, Dakota house look.
   Light reading surface with the club's black masthead and Dakota blue.
   Oswald headings, Open Sans body, matching dakotacooks.com. */

:root{
  color-scheme: light;

  --black:#0a0a0a;          /* masthead and footer keep the club's black */
  --surface:#f4f4f1;        /* page */
  --card:#ffffff;
  --card-2:#fbfbf9;
  --line:#e3e3de;
  --line-2:#c9c9c2;

  --ink:#17171a;
  --ink-2:#4b4b50;
  --ink-3:#74746f;

  --blue:#0b82ba;           /* Dakota blue, stepped down to read on white */
  --blue-bright:#009de1;    /* the club's exact blue, for the masthead and large marks */
  --blue-deep:#075f88;
  --blue-wash:rgba(11,130,186,.08);
  --accent-2:#c98500;

  --t-basic:#0b82ba;
  --t-sponsor:#eb6834;
  --t-patron:#1baf7a;
  --t-platinum:#4a3aa7;

  --g1:#0b82ba; --g2:#eb6834; --g3:#1baf7a; --g4:#c98500;
  --g5:#e87ba4; --g6:#008300; --g7:#4a3aa7; --g8:#e34948;

  --pos:#1f7a63;
  --neg:#c0392f;
  --mid:#8a8a85;

  --f-head:"Oswald","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  --f-body:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;

  --r:6px;
  --shadow:0 1px 2px rgba(20,20,25,.05), 0 6px 18px rgba(20,20,25,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font:16px/1.65 var(--f-body);
}
img{max-width:100%}
[hidden]{display:none!important}

/* ---------- masthead ---------- */
.mast{background:var(--black); color:#f2f2ee; border-bottom:0;
      padding:calc(22px + env(safe-area-inset-top,0px)) 0 0}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.mast-top{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.mast-logo{height:44px; width:auto; display:block}
.byline{font-family:var(--f-head); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
        color:#8d8d86; font-weight:500; text-align:right; line-height:1.7}
.byline b{display:block; color:#d8d8d2; font-weight:500}

.mast h1{font-family:var(--f-head); color:#ffffff; margin:20px 0 16px; font-weight:500;
         font-size:clamp(24px,3.6vw,34px); line-height:1.15; letter-spacing:.01em}

nav.pages{display:flex; gap:0; flex-wrap:wrap; margin-top:12px}
nav.pages a{
  display:block; padding:12px 16px; font-family:var(--f-head); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; color:#9d9d96; text-decoration:none;
  border-bottom:3px solid transparent;
}
nav.pages a:hover{color:#ffffff}
nav.pages a[aria-current="page"]{color:var(--blue); border-bottom-color:var(--blue)}

/* ---------- layout ---------- */
main{padding:34px 0 calc(64px + env(safe-area-inset-bottom,0px))}
section{margin:0 0 46px}
h2{font-family:var(--f-head); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
   color:var(--blue); margin:0 0 8px; font-weight:500}
h3{font-family:var(--f-head); font-size:clamp(21px,2.8vw,30px); line-height:1.15; margin:0 0 14px;
   font-weight:700; letter-spacing:.005em}
h4{font-family:var(--f-head); font-size:17px; margin:0 0 8px; font-weight:700; letter-spacing:.01em}
p{margin:0 0 15px; color:var(--ink-2); max-width:74ch}
p.lead{font-size:18px; color:var(--ink)}
a{color:var(--blue)}
b{color:var(--ink); font-weight:600}
.rule{height:2px;background:var(--blue);width:44px;margin:0 0 20px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ---------- stat tiles ---------- */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat .k{font-family:var(--f-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--ink-3);font-weight:500;margin-bottom:10px;line-height:1.5}
.stat .v{font-family:var(--f-head);font-size:clamp(26px,3.6vw,36px);font-weight:700;line-height:1;
         font-variant-numeric:tabular-nums;letter-spacing:.005em}
.stat .d{font-size:13px;color:var(--ink-3);margin-top:8px}
.stat.neg .v{color:var(--neg)} .stat.pos .v{color:var(--pos)}
.stat.hero{border-left:3px solid var(--blue)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.dot{width:10px;height:10px;border-radius:2px;flex:none;box-shadow:0 0 0 2px var(--card)}
.d-basic{background:var(--t-basic)} .d-sponsor{background:var(--t-sponsor)}
.d-patron{background:var(--t-patron)} .d-platinum{background:var(--t-platinum)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 14px}

/* ---------- charts ---------- */
.figure{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.figure .cap{font-size:13px;color:var(--ink-3);margin-top:14px}
.chart-scroll{overflow-x:auto}
svg.chart{display:block;width:100%;height:auto;min-width:340px}
svg.chart text{font-family:var(--f-body)}
.ax-label{font-size:15px;fill:var(--ink-3)}
.val-label{font-size:15px;fill:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ser-label{font-size:15px;fill:var(--ink-2);font-weight:600}
.grid-line{stroke:var(--line);stroke-width:1}
.axis-line{stroke:var(--line-2);stroke-width:1.5}
.zero-line{stroke:var(--ink-3);stroke-width:1.5}

.tip{position:fixed;z-index:60;pointer-events:none;background:var(--card);border:1px solid var(--line-2);
     color:var(--ink);padding:12px 14px;border-radius:var(--r);font-size:13.5px;line-height:1.55;
     box-shadow:0 10px 30px rgba(20,20,25,.18);max-width:320px}
.tip .why{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink-2);font-size:12.5px}
.tip .why b{color:var(--ink)}
.tip b{color:var(--blue);font-family:var(--f-head);letter-spacing:.04em;text-transform:uppercase;font-size:12.5px}
.tip .r{display:flex;justify-content:space-between;gap:18px;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- controls ---------- */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--card)}
.seg button{border:0;background:transparent;color:var(--ink-3);padding:10px 16px;font:inherit;
            font-family:var(--f-head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
            font-weight:500;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.btn{border:1px solid var(--line-2);background:var(--card);color:var(--ink);padding:10px 16px;
     border-radius:var(--r);font:inherit;font-family:var(--f-head);font-size:13px;letter-spacing:.08em;
     text-transform:uppercase;font-weight:500;cursor:pointer}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-deep)}
input[type=search],select{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--card);color:var(--ink)}
input[type=range]{accent-color:var(--blue)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:620px}
th,td{padding:12px 15px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{font-family:var(--f-head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--ink-3);font-weight:500;position:sticky;top:0;background:var(--card-2);cursor:pointer}
th.no-sort{cursor:default}
tbody tr:hover{background:var(--blue-wash)}
td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:600}
td.neg{color:var(--neg)} td.pos{color:var(--pos)}
tfoot td{font-weight:700;color:var(--ink);border-top:2px solid var(--line-2);border-bottom:0}
.tag{display:inline-block;font-family:var(--f-head);font-size:11px;font-weight:500;letter-spacing:.1em;
     text-transform:uppercase;padding:4px 9px;border-radius:2px;background:var(--line);color:var(--ink-2)}
.tag.lapsed{background:rgba(224,106,99,.16);color:var(--neg)}
.tag.new{background:rgba(67,165,142,.16);color:var(--pos)}

/* ---------- name key banner ---------- */
.namebar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px dashed var(--line-2);border-radius:var(--r);padding:15px 17px;margin:0 0 16px}
.namebar .msg{font-size:14px;color:var(--ink-3);flex:1;min-width:220px}
.namebar .msg b{color:var(--ink)}
.namebar.on{border-style:solid;border-color:var(--pos)}

/* ---------- notes ---------- */
.note{border-left:2px solid var(--blue);padding:4px 0 4px 18px;margin:0 0 18px;background:var(--blue-wash)}
.note p{margin:0;padding:10px 14px 10px 0;font-size:14.5px}
dl.defs{margin:0} dl.defs dt{font-family:var(--f-head);font-weight:700;margin-top:18px;font-size:16px;color:var(--ink)}
dl.defs dd{margin:4px 0 0;color:var(--ink-2);font-size:14.5px;max-width:74ch}

footer{border-top:0;padding:26px 0;color:#8d8d86;font-size:13px;background:var(--black)}
footer a{color:var(--blue-bright)}
footer .ft{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer img{height:26px;width:auto;opacity:.85}

body.has-tracker main{padding-bottom:160px}

/* ---------- paper ---------- */
@media print{
  :root{--surface:#fff;--shadow:none}
  body{background:#fff;color:#000}
  nav.pages,.controls,.namebar,.printhide,.tracker{display:none!important}
  .card,.figure,.stat,.tablewrap{border-color:#d5d5d5}
  .mast{border-bottom:2px solid #000}
}

/* ---------- collapsible ---------- */
.coll{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.coll-head{width:100%;display:flex;align-items:center;gap:14px;padding:15px 18px;background:transparent;
  border:0;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.coll-head:hover{background:var(--blue-wash)}
.coll-head .ct{font-family:var(--f-head);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.coll-head .cn{font-size:13px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.coll-head .cx{width:11px;height:11px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .16s ease;flex:none;margin-top:-4px}
.coll-head[aria-expanded="true"] .cx{transform:rotate(-135deg);margin-top:3px}
.coll-body{padding:0 18px 18px}
.coll-body .tablewrap{border:0;border-top:1px solid var(--line);border-radius:0}

/* ---------- vertical scroll region for tall bar charts ---------- */
.vscroll{overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card-2);padding:4px 6px}
.vscroll svg.chart{width:100%;min-width:0}

/* ---------- bracket label used on the revenue mix legend ---------- */
.bracket{display:flex;gap:12px;align-items:stretch;margin:0 0 6px}
.bracket .bar{width:3px;border-radius:2px;background:var(--accent-2);flex:none}
.bracket .who{font-family:var(--f-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;align-self:center}
.legend.stack{flex-direction:column;gap:9px;align-items:flex-start}

/* ---------- tracker that only appears inside its own section ---------- */
.tracker-auto{opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease}
.tracker-auto.tracker-on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.tracker-auto{transition:none}}

/* ---------- number box paired with a slider ---------- */
.numbox{width:104px;font:inherit;font-size:17px;font-weight:700;font-family:var(--f-head);
  font-variant-numeric:tabular-nums;text-align:right;padding:5px 9px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--card);color:var(--ink)}
.numbox:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}