/* The app's own stylesheet. The look is design.css, untouched; this file only holds what a real page needs
   and a preview page does not. It never restyles a design piece.

   1. In the design the app sits inside a drawn browser or phone. For a member it IS the page, so the page behind it
      takes the app's own background (no stage colour can show at the edges or while it loads). */
html:not([data-sample]) body{background:var(--bg)}

/* 2. Phone width, outside sample mode. The design draws the phone inside an iPhone: a pretend status bar
      (9:41, signal, battery: 54px) above the top bar and a pretend home indicator (30px) under the tab bar.
      A real phone has its own, and tells the page how much room they take (the safe-area values). So for a
      member the app shows no pretend clock and uses the phone's own numbers in place of 54px and 30px.
      Every other number is the design's: 44px top bar (98 - 54), 53px tab bar (83 - 30).
      In sample mode (html[data-sample]) none of this applies and the design's phone is used exactly as drawn. */
html:not([data-sample]) .app.phone{--mx-st:env(safe-area-inset-top,0px);--mx-sb:env(safe-area-inset-bottom,0px);--topH:calc(44px + var(--mx-st));--botH:calc(53px + var(--mx-sb))}
html:not([data-sample]) .phone .top{padding-top:var(--mx-st)}
html:not([data-sample]) .phone .tabbar{height:var(--botH);padding-bottom:var(--mx-sb)}
html:not([data-sample]) .phone .sbar,html:not([data-sample]) .phone .hind{display:none}

/* 3. Sample mode adds nothing here. It uses the design's own stage and drawn device exactly as design.css lays them out
      (see core.js, mount), including the 64px the design keeps free above its stage, so that a sample picture and a
      design picture are drawn at the very same place on the page. */

/* 4. A notice asked while an entry screen is up (the server is down, the trial question after checkout, a paused server) must sit
      on top of that screen, or nobody could read or answer it. The design never opens a notice over one of its full-screen gates,
      so it gives no order for the two; a real entry has to. Nothing is restyled: only which of the two is in front. */
html:not([data-sample]) .app.gate-on > .layer{z-index:470}
html:not([data-sample]) .app.gate-on > .toasts{z-index:480}

/* 5. The bot check on the sign-in forms is Cloudflare's own widget (the serving rules allow it). As in today's app it is always
      shown, as one more field of the form (entry-pay.js adds `field bot-on` once the widget is drawn). Until then, and when
      Cloudflare's script cannot be loaded at all, its empty place takes no room. */
#botCheck:not(.bot-on){position:absolute;width:0;height:0;overflow:hidden}

/* 6. Books for a plan without it (books.js, the teaser): the Books page drawn from sample numbers, blurred and dimmed so nothing in it
      can be read, with the design's own pop-up card (.bcard) on top. Both share one grid cell; the card sits near the top so a phone
      shows it at once. Nothing here moves, so reduced motion has nothing to stop. Nothing is restyled: only where the two sit. */
.bk-tease{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s5)}
.bk-tease>*{grid-area:1/1}
.bk-tease-bg{filter:blur(10px);opacity:.6;pointer-events:none;user-select:none;-webkit-user-select:none}
.bk-tease-pop{position:relative;align-self:start;justify-self:center;margin-top:var(--s7)}

/* 7. The Builder's "Setup n/total" (first-product.js) while the first-product guide is not shown. The design draws this button in a page's
      fine print (.mz-fine on Midas: 12px, 500, the second text colour, the text colour on hover). Since the Midas clean-up the setup list opens
      from the Builder, so the same button sits at the end of the Builder's own fine print (.bfoot), right after the cost line. Only its place is
      new; the look is the design's. */
.bfoot>[data-act=setupList]{font-size:var(--t1);color:var(--fg2);font-weight:500}
.bfoot>[data-act=setupList]:hover{color:var(--fg)}
.bfoot:has(>[data-act=setupList])>.bcost{margin-left:auto}

/* 8. The plan cards (entry.js planCardsHTML: the entry wall's "Activate your membership" and the welcome tour's "Pick your plan").
      Owner 2026-10-09: "make the 3 cards side by side with the third card having a toggle from business to max. and make it look good."
      The design draws its plan cards one under another in a narrow sheet and has no row of three, so this places the design's own
      pieces (.plan, .pill, .seg, .btn, .price) in one: on a wide screen three equal cards whose name, price, lines and button sit on the
      same lines across the three; the price in the design's large number (.bignum); the shared card's switch on its top edge; a badged
      plan (Best value) ringed in the member's colour. On a phone the three stack. Every rule is inside [data-plan-cards], so the
      Settings plan cards (billing.js) are untouched. The motion is the design's own: the switch's sliding highlight, the ring's .3s,
      and the newly shown plan easing in (entry.js, entryPick, with the design's A(), which reduced motion shortens). */
.desk .gate-in.wide:has(.grid3[data-plan-cards]){width:min(1040px,100%)}
.desk .gate-in.wide:has(.grid3[data-plan-cards])>p.muted{max-width:600px;align-self:center}
.gate-in.wide:has(>.grid3[data-plan-cards])>.btns{margin-top:var(--s4)}
.grid3[data-plan-cards]{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.phone .grid3[data-plan-cards]{grid-template-columns:minmax(0,1fr);row-gap:var(--s7)}
.grid3[data-plan-cards]>.plan{position:relative;padding:var(--s6) var(--s5) var(--s5);gap:var(--s4)}
.grid3[data-plan-cards]>.plan:has(.pill.ac){box-shadow:inset 0 0 0 1px var(--ac-line)}
.grid3[data-plan-cards] .plan-body{flex:1;display:flex;flex-direction:column;gap:var(--s4)}
.grid3[data-plan-cards] .between{min-height:24px}
.grid3[data-plan-cards] .price{font-style:normal;font-size:var(--t2);color:var(--fg2);line-height:1.1;white-space:nowrap}
.grid3[data-plan-cards] .price b{font-size:var(--t6);font-weight:600;letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums;margin-right:2px}
.grid3[data-plan-cards] ul{gap:var(--s2);border-top:1px solid var(--line);padding:var(--s4) 0 var(--s2);line-height:1.45}
.grid3[data-plan-cards] li:first-child{color:var(--fg);font-weight:500}
.grid3[data-plan-cards] .btn{margin-top:auto}
.grid3[data-plan-cards] .seg{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:auto;min-width:200px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 0 0 1px var(--line2),0 0 0 6px var(--bg)}
.grid3[data-plan-cards] .seg button{padding:0 var(--s4)}