/* Run your own analysis only: the result on the first screen, the model's panel beside the results (a sheet on phones), the chart. */
.page[data-page=analysis] [hidden]{display:none !important}
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* two columns: the results, and the panel that stays in view */
.an{--rail:clamp(330px,27vw,390px);display:grid;grid-template-columns:minmax(0,1fr) var(--rail);align-items:start;background:var(--ink)}
.main{grid-column:1;grid-row:1;min-width:0;position:relative;z-index:1}
.panel{grid-column:2;grid-row:1;position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));height:calc(100svh - var(--bar-h));z-index:3;border-left:1px solid var(--line);background:var(--ink);outline:none;--fg:var(--paper);--fg2:var(--soft);--rule:var(--line)}
.panel-in{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-5) clamp(18px,1.8vw,28px) var(--sp-6);scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* first screen: Team2's number and yours, at the same size */
.hero{--hp:0;--fg:var(--paper);--fg2:var(--soft);--rule:var(--line);position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:max(560px,calc(100vh - var(--bar-h)));min-height:max(560px,calc(100svh - var(--bar-h)));background:var(--ink);overflow:hidden}
.lead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-5) clamp(16px,3vw,56px);padding:clamp(16px,3.2vh,36px) clamp(20px,2.4vw,36px) clamp(16px,3.4vh,36px) var(--gut)}
.lead h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.012em;color:var(--paper)}
.lead p{margin-top:var(--sp-3);font-size:clamp(14px,1.15vw,17px);color:var(--soft)}
.gate{max-width:34ch;display:grid;gap:var(--sp-3);justify-items:start}
.gate p{margin:0}
.page[data-tier=standard] .gate,.page[data-tier=premium] .gate{display:none}
.sides{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(16px,3vh,32px) clamp(20px,2.4vw,36px) clamp(16px,3vh,34px);min-height:0}
.side.t2{padding-left:var(--gut)}
.side>div:last-of-type{align-self:end}
.side.t2{border-top:1px solid var(--line)}
.side.you{background:var(--paper);color:var(--ink)}
.side h2{font-family:var(--sans);font-weight:500;font-size:clamp(19px,1.7vw,26px);line-height:1.2}
.side .what{margin-top:3px;font-size:clamp(14px,1.2vw,18px);color:var(--soft)}
.you .what{color:var(--inkmute)}
.side .what a{text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1px;text-underline-offset:3px}   /* Team2's sale, linked to the full rule (as on the Overview) */
.side .what a:hover{color:var(--paper)}
.once{margin-top:var(--sp-2);font-size:var(--fs-s);color:var(--mute)}
.you .once{color:var(--inkmute)}
.fig{font-size:clamp(56px,min(9.4vw,24vh),230px);will-change:transform}
.t2 .fig{color:var(--clay);transform:translateY(calc(var(--hp)*-34px))}
.you .fig{transform:translateY(calc(var(--hp)*-80px))}
.you .fig.up{color:var(--green)}
.page[data-tier=free] .fig{opacity:.36;letter-spacing:-.07em}
.avg{margin-top:var(--sp-3);font-size:clamp(14px,1.1vw,16px);color:var(--mute)}
.you .avg{color:var(--inkmute)}
.mini{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);margin:var(--sp-4) 0 0}
.mini div{min-width:0}
.mini dt{font-size:var(--fs-s);color:var(--mute)}
.you .mini dt{color:var(--inkmute)}
.mini dd{margin:2px 0 0;font-size:var(--fs-num-s);line-height:1.1;font-weight:500;white-space:nowrap}
.seam{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--clay);color:var(--ink);padding:9px 16px;font-size:var(--fs-m);font-weight:500;white-space:nowrap;z-index:2}
.stats-about{padding:var(--sp-2) var(--gut) var(--sp-4);border-top:1px solid var(--line)}
.stats-about .about{max-width:70ch}
.stats-about .wdef{margin-top:var(--sp-2);max-width:70ch;font-size:var(--fs-s);line-height:1.45;color:var(--fg2,var(--soft));text-wrap:balance}   /* what a win is, right under the two win rates */

/* small text controls and the method wording they open */
.why{background:none;border:0;padding:var(--sp-2) 0;min-height:36px;font-size:var(--fs-s);color:var(--fg2,var(--mute));cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule,var(--line));text-underline-offset:5px}
.why:hover,.why[aria-expanded=true]{color:var(--fg,var(--paper))}
.about{margin-top:var(--sp-2);max-width:66ch;font-size:var(--fs-s);line-height:1.55;color:var(--fg2,var(--mute))}
.about p+p{margin-top:var(--sp-2)}
.plan{font-size:var(--fs-s);color:var(--clay);border-bottom:1px solid var(--clay);line-height:1.3;padding:2px 0}
.paper .plan{color:var(--claydeep);border-bottom-color:var(--claydeep)}

/* the buttons that open and close the settings on phones (the rail needs none): clay is the main one, .alt the outlined one */
.act{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--sp-5);border:2px solid var(--clay);border-radius:0;background:var(--clay);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);font-weight:500;line-height:1.2;text-align:center;cursor:pointer}
.act.alt{background:none;color:var(--paper)}
@media (hover:hover){.act:hover{filter:brightness(1.08)}.act.alt:hover{background:var(--wash);filter:none}}
.setbtn{display:none}

/* the panel */
.ph{display:flex;align-items:baseline;gap:var(--sp-4)}
.ph h2{margin-right:auto;font-family:var(--serif);font-weight:400;font-size:var(--fs-num-m);line-height:1}
.t-sheet,.sh-hint,.sh-foot{display:none}
.ph .lnk{font-size:var(--fs-m);border-bottom-width:1px;background:none;border-top:0;border-left:0;border-right:0;color:inherit;cursor:pointer;font-family:var(--sans);
 min-height:0;padding:1px 6px 3px;line-height:inherit} /* the size it had before the shared button.lnk */
.ph .done{display:none;border-bottom-width:2px}
.pnote{margin-top:var(--sp-3);font-size:var(--fs-s);line-height:1.5;color:var(--soft)}
.pnote .lnk{display:block;width:max-content;margin-top:var(--sp-2);font-size:var(--fs-s);border-bottom-width:1px}
.pnote:empty{display:none}
.groups{margin-top:var(--sp-3)}
.grp{padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.gh{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--sp-3)}
.gh h3{margin-right:auto;font-family:var(--sans);font-weight:400;font-size:var(--fs-m);line-height:1.4;color:var(--soft)}
.gh .why{padding:2px 0;min-height:0}
.panel .choice{gap:0 13px}
.panel .choice button{font-size:var(--fs-m);min-height:33px;padding:5px 0 2px}
.choice button:disabled{cursor:not-allowed}
.choice.locked{opacity:.45}
.choice.locked button{cursor:not-allowed}
.grp.dim .choice{opacity:.5}
.dates{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3);align-items:center;margin-top:var(--sp-2)}
.dates label{font-size:var(--fs-s);color:var(--soft)}
.dates input{justify-self:start;min-height:var(--tap);padding:0 2px;background:none;border:0;border-bottom:1px solid var(--fg2);border-radius:0;font:inherit;font-size:var(--fs-m);color:var(--paper);color-scheme:dark}
.sum{margin-top:var(--sp-2);font-size:var(--fs-s);color:var(--mute)}
.note{margin-top:var(--sp-2);font-size:var(--fs-s);color:var(--soft)}
.note:empty{display:none}
.panel .foot{margin-top:var(--sp-4)}
.panel .about{font-size:var(--fs-xs)}

/* profit after costs */
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4) var(--sp-7);flex-wrap:wrap}
/* the running numbers wrap (the day goes under Team2 and you) when six-digit totals and a date with its year do not fit one line */
.run{display:flex;flex-wrap:wrap;gap:var(--sp-3) clamp(18px,3vw,48px);align-items:flex-end}
.run div{font-size:var(--fs-s);color:var(--inkmute)}
.run b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--fs-num-l);line-height:.92;white-space:nowrap;min-width:4.4ch}
.run .a b{color:var(--claydeep)}
.run .d b{min-width:3.4ch;font-weight:400}
.views{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:clamp(20px,4vh,40px)}
.views .choice{display:flex}
.views .choice.locked{opacity:.45}
.paper .about{color:var(--inkmute)}
.an .plot{height:clamp(300px,46vh,500px);margin-top:var(--sp-5);touch-action:pan-y;cursor:crosshair}
.an .plot.is-ghost{cursor:default;opacity:.5}
.an .plot svg.ghost .s{vector-effect:non-scaling-stroke}
.vwrap{margin-top:var(--sp-5)}
.paper .note{color:var(--inkmute)}
.paper .foot{max-width:80ch}

/* month by month */
.mg{display:grid;gap:var(--sp-7)}
.my header{display:flex;align-items:baseline;gap:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--lineD)}
.my h3{font-weight:500;font-size:var(--fs-num-m)}
.my header p{margin:0 auto 0 0;font-size:var(--fs-s);color:var(--inkmute)}
.my header b{font-size:var(--fs-num-m)}
.my header b.g,.mcells li.g b{color:var(--ink)}
.mcells{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.mcells li{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);min-height:78px;padding:10px 8px 11px;background:var(--paper2)}
.mcells li.g{background:color-mix(in srgb,var(--green) calc(var(--m)*58%),var(--paper2))}
.mcells li.l{background:color-mix(in srgb,var(--clay) calc(var(--m)*62%),var(--paper2))}
.mcells li span{font-size:var(--fs-xs);color:var(--inkmute)}
.mcells li b{font-size:clamp(18px,1.7vw,26px);line-height:1;font-weight:500;white-space:nowrap}
.mcells li.e b{color:var(--mute)}
.mtab{max-width:1000px}
.mt-h,.mt-y,.mt-r{display:grid;grid-template-columns:minmax(96px,1.3fr) repeat(4,minmax(0,1fr));gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--lineD)}
.mt-h{border-top:0;font-size:var(--fs-s);color:var(--inkmute)}
.mt-y{margin-top:var(--sp-4);font-weight:500;border-top-color:var(--axis)}
.mt-h span+span,.mt-y span+span,.mt-r span+span{text-align:right}
.mt-r{font-size:var(--fs-m);color:var(--inkmute)}
.mt-r .num,.mt-y .num{font-size:var(--fs-num-s);color:var(--ink)}

/* phone: the panel becomes a sheet (a title, the choices as large buttons, "Show results" always at its foot), opened by the
   button under the heading or the one in the bar at the foot of the page, which names the settings in use */
.mbar,.sheetbg{display:none}
@media (max-width:999px){
 .an{display:block}
 .t2 .fig,.you .fig{transform:none} /* the big figures stay still: here the first screen's parallax would push them into the words above */
 .lead .setbtn{display:flex;width:100%;max-width:560px;margin:var(--sp-4) 0 var(--sp-5);scroll-margin-top:calc(var(--bar-h) + var(--sp-3))} /* .lead: above the shared scroll margin of an element with an id */
 .why{min-height:var(--tap)}
 .panel{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:88vh;max-height:88svh;display:flex;flex-direction:column;border-left:0;border-top:1px solid var(--linehi);z-index:80;transform:translateY(102%);visibility:hidden;transition:transform .45s var(--e),visibility 0s .45s}
 .panel.open{transform:none;visibility:visible;transition:transform .45s var(--e)}
 .panel-in{flex:1 1 auto;min-height:0;height:auto}
 .ph{position:sticky;top:calc(var(--sp-5)*-1);z-index:2;margin:calc(var(--sp-5)*-1) 0 0;padding:var(--sp-5) 0 var(--sp-2);background:var(--ink)}
 .ph .lnk{min-height:var(--tap);padding:19px 6px 3px}
 .ph .done{display:inline-block}
 .ph .reset{margin-right:0}
 .t-rail{display:none}
 .t-sheet{display:inline}
 .sh-hint{display:block;font-size:var(--fs-s);line-height:1.45;color:var(--soft)}
 .page[data-tier=free] .sh-hint{display:none}
 .gh{align-items:center}
 .gh .why{min-height:var(--tap);padding:0}
 .panel .choice{gap:var(--sp-2);margin-bottom:var(--sp-1)}
 .panel .choice button{min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-3);border:1px solid var(--line);font-size:var(--fs-m);color:var(--soft)}
 .panel .choice button[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
 .sh-foot{display:flex;flex:none;align-items:center;gap:var(--sp-4);padding:var(--sp-3) clamp(18px,1.8vw,28px) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--ink)}
 .live{flex:1;min-width:0;display:grid;gap:2px}
 .live span,.mb-l{font-size:var(--fs-xs);color:var(--mute)}
 .live b,.mb-fig b{font-size:var(--fs-num-m);line-height:.95;color:var(--paper)}
 .live b.up,.mb-fig b.up{color:color-mix(in srgb,var(--green) 72%,var(--paper))}
 .sheetbg{display:block;position:fixed;inset:0;z-index:70;margin:0;padding:0;border:0;background:var(--void);opacity:.6;cursor:default}
 .mbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-1) var(--sp-4);position:sticky;bottom:0;z-index:55;padding:var(--sp-2) var(--gut) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));background:var(--ink);border-top:1px solid var(--line)}
 .mb-fig{grid-area:1/1;display:grid;gap:2px;min-width:0}
 .mb-sum{grid-area:2/1/3/3;min-width:0;margin:0;font-size:var(--fs-s);line-height:1.35;color:var(--soft)}
 .mbar .act{grid-area:1/2;min-height:var(--tap);padding:0 var(--sp-4);font-size:var(--fs-m)}
}
@media (max-width:760px){
 .hero{min-height:0}
 .lead{grid-template-columns:1fr;gap:var(--sp-3);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
 .sides{grid-template-columns:1fr}
 .side{padding:var(--sp-3) var(--gut) var(--sp-4);grid-template-rows:auto auto auto;gap:var(--sp-2)}
 .fig{font-size:clamp(54px,24vw,120px)}
 .avg{margin-top:2px}
 .mini{gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-3)}
 .mini dd{font-size:var(--fs-num-s)}
 /* the "apart" line: clay words on the rule, not a clay box, so it does not look like a third button under "Change your settings" */
 .seam{left:auto;right:0;top:0;transform:translateY(-50%);font-size:var(--fs-s);padding:7px var(--gut) 7px 12px;background:var(--ink);color:var(--clay)}
 .stats-about{padding-left:var(--gut);padding-right:var(--gut)}
 .phead{align-items:flex-start}
 /* the chart's running numbers: Team2 and you side by side, the day on its own line, so a date with its year fits too */
 .run{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3);width:100%}
 .run b{font-size:clamp(26px,8.6vw,40px);min-width:0}
 .run .d{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--sp-2)}
 .run .d b{font-size:var(--fs-num-s)}
 .an .plot{height:clamp(250px,38vh,360px)}
 .mcells{grid-template-columns:repeat(4,minmax(0,1fr))}
 .mt-h,.mt-y,.mt-r{grid-template-columns:minmax(70px,1.2fr) repeat(3,minmax(0,1fr));gap:8px}
 .mt-h span:nth-child(2),.mt-y span:nth-child(2),.mt-r span:nth-child(2){display:none}
 .mt-r{font-size:var(--fs-s)}
 .mt-r .num,.mt-y .num{font-size:clamp(17px,4.8vw,22px)}
}
@media (prefers-reduced-motion:reduce){
 .fig,.t2 .fig,.you .fig{transform:none !important}
 .panel,.panel.open{transition:none}
}

.page.is-empty #plot{display:none}
/* Free: the panel's note repeats the gate beside the title */
@media (min-width:1000px){.page.free .pnote{display:none}}
/* the load failure message under the heading, and the panel line for a model the data does not hold */
.lead .notice{margin-top:var(--sp-3)}
.panel .notice{margin-top:var(--sp-3);font-size:var(--fs-s)}