/* ============================================================
   AOE Centre — aoe-page.css                            (0905n)
   The public pages only: the true-numbers strip, the subject
   at-a-glance, the folds, and the ONE sticky slot.

   Colours come from the shared tokens, so both themes follow
   without a second set of rules. Nothing here is under 11px.
   ============================================================ */

:root{ --ap-mute:#6A6255; --ap-tint:rgba(223,205,131,.16); }
html[data-theme="dark"]{ --ap-mute:#B3AA98; --ap-tint:rgba(223,205,131,.12); }


/* ============================================================
   1. THE TRUE-NUMBERS STRIP  (home, under the hero)
   Four counts read from the banks at load. Not one of them is
   typed into a page, and none of them is a claim about anybody.
   ============================================================ */

.tn{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
     padding:22px 0 24px; margin:0 0 34px; }
.tn-lb{ font-family:"IBM Plex Mono","Consolas",monospace; font-size:11px;
        letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);
        margin:0 0 16px; }
.tn-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 22px; }
.tn-cell{ min-width:0; }
.tn-n{ font-family:"Marcellus",serif; font-weight:400; font-size:34px; line-height:1;
       display:block; color:var(--ink); font-variant-numeric:tabular-nums; }
.tn-c{ display:block; margin-top:7px; font-family:"IBM Plex Mono","Consolas",monospace;
       font-size:11.5px; line-height:1.5; letter-spacing:.09em; color:var(--ap-mute); }
.tn-cell + .tn-cell{ padding-left:22px; border-left:1px solid var(--rule); }

@media (max-width:820px){
  .tn-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
  .tn-cell + .tn-cell{ padding-left:0; border-left:0; }
  .tn-cell:nth-child(2n){ padding-left:16px; border-left:1px solid var(--rule); }
  .tn-n{ font-size:29px; }
}


/* ============================================================
   2. SUBJECT PAGES — AT A GLANCE FIRST
   The figures and the topic table are built from the bank, so
   they cannot drift from what the student actually receives.
   ============================================================ */

.ag{ margin-top:22px; }
.ag-lb{ font-family:"IBM Plex Mono","Consolas",monospace; font-size:11px;
        letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 12px; }
.ag-figs{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:0 0 18px;
          font-size:14.5px; line-height:1.5; color:var(--ap-mute); }
.ag-figs b{ font-family:"Marcellus",serif; font-weight:400; font-size:21px;
            color:var(--ink); margin-right:7px; font-variant-numeric:tabular-nums; }

.ag-tblwrap{ overflow-x:auto; }
.ag-tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.ag-tbl th{ text-align:left; font-family:"IBM Plex Mono","Consolas",monospace;
            font-size:11px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--ap-mute); font-weight:400; padding:0 12px 9px 0;
            border-bottom:2px solid var(--ink); white-space:nowrap; }
.ag-tbl th + th, .ag-tbl td + td{ text-align:right; width:74px; }
.ag-tbl td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--rule);
            line-height:1.5; font-variant-numeric:tabular-nums; }
.ag-tbl tr:last-child td{ border-bottom:0; }
.ag-tbl tfoot td{ border-top:2px solid var(--ink); border-bottom:0; font-weight:700; }
.ag-note{ margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--ap-mute); }

/* the same three figures, written into the sentence in the card above,
   so the card and the table can never disagree */
#pb-figs span + span::before{ content:"\00B7"; margin:0 8px; }


/* ============================================================
   3. ON THIS PAGE  (a row under the hero, every subject page)
   ============================================================ */

.otp{ background:var(--panel); border-bottom:1px solid var(--rule); }
.otp .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
            padding-top:13px; padding-bottom:13px; }
.otp-lb{ font-family:"IBM Plex Mono","Consolas",monospace; font-size:11px;
         letter-spacing:.18em; text-transform:uppercase; color:var(--ap-mute); margin:0; }
.otp a{ font-size:14px; line-height:1.5; color:var(--ink); text-decoration:none;
        border-bottom:1px solid var(--rule); padding-bottom:2px; }
.otp a:hover{ border-bottom-color:var(--gold-deep); color:var(--gold-deep); }
@media (max-width:760px){
  .otp .wrap{ gap:6px 16px; }
  .otp a{ font-size:13.5px; }
}


/* ============================================================
   4. FOLDED PROSE  (phones only — a laptop shows everything)
   ============================================================ */

.fold-h{ display:block; width:100%; font:inherit; color:inherit; text-align:left;
         background:none; border:0; padding:0; cursor:default; }
.fold-h .sign{ display:none; }

body.ap-fold .fold-h{ cursor:pointer; display:flex; align-items:baseline;
                      justify-content:space-between; gap:14px; }
body.ap-fold .fold-h .sign{ display:inline-block; font-family:"IBM Plex Mono",monospace;
                            font-size:19px; line-height:1; color:var(--gold-deep); flex:0 0 auto; }
body.ap-fold .fold-sec .eyes{ display:none; }
body.ap-fold .fold-sec{ padding-top:22px; padding-bottom:22px; }
body.ap-fold .fold-sec h2{ margin:0; }

/* On a laptop the wrapper must not exist as far as layout is
   concerned, or a section's own spacing changes for no reason.
   display:contents makes it invisible to the box tree; on a phone
   it becomes a real block so its height can be animated. */
.fold-body{ display:contents; }
body.ap-fold .fold-body{ display:block; padding-top:4px; }
/* display:block above out-ranks the browser's own [hidden] rule, so a
   closed fold has to be told to stay shut */
body.ap-fold .fold-body[hidden]{ display:none; }
.fold-h:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }


/* ============================================================
   5. THE ONE STICKY SLOT
   A page has exactly one. Whatever fills it — the subject's
   Try bar, the price page's running total — fills it alone, so
   two bars can never stack on a 390px screen.
   ============================================================ */

.aoe-slot{ position:fixed; left:0; right:0; bottom:0; z-index:70;
           background:var(--panel); border-top:1px solid var(--rule);
           box-shadow:0 -2px 14px rgba(43,39,33,.14); }
html[data-theme="dark"] .aoe-slot{ box-shadow:0 -2px 14px rgba(0,0,0,.4); }
body.has-tabs .aoe-slot{ bottom:62px; }
.aoe-slot > *{ display:flex; align-items:center; gap:14px; padding:10px 18px; }

/* the subject Try bar */
.sb-nm{ flex:1; min-width:0; }
.sb-nm b{ font-family:"Marcellus",serif; font-weight:400; font-size:19px;
          line-height:1.15; color:var(--ink); }
.sb-nm .sb-code{ font-family:"IBM Plex Mono",monospace; font-size:11.5px;
                 letter-spacing:.08em; color:var(--gold-deep); margin-left:7px; }
.sb-price{ display:block; width:-moz-fit-content; width:fit-content; margin-top:3px;
           font-size:12.5px; color:var(--ap-mute);
           text-decoration:none; border-bottom:1px solid var(--rule); }
.sb-price:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }
.sb-go{ font:inherit; font-weight:700; font-size:14.5px; padding:12px 18px;
        text-decoration:none; background:var(--gold); color:#2B2721;
        border:1px solid var(--gold); border-radius:1px; white-space:nowrap; }
.sb-go:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--cream); }

/* the price page's running total keeps its own classes; it is only
   moved into the slot, so nothing about its markup changes */
.aoe-slot .sh-bottom{ display:flex; position:static; left:auto; right:auto; bottom:auto;
                      background:none; border-top:0; box-shadow:none; }

@media (prefers-reduced-motion:reduce){
  .aoe-slot{ transition:none; }
}