/* The AIP Reader - Community Outreach design pass, 23/09/2026 (collab task c424ba91).
   Jesse Kirby (Head of Community Outreach), Theo Karras (graphic design),
   Leah Bianchi (web), over Priya Raghunathan's working skin.

   The palette, the type and the way a page sits on its field are the storefront's, so a
   scholar who came from /shop/ arrives somewhere they recognise. Everything is a custom
   property; the storefront's own values are in mu-plugins/aip-shop.php. */

:root{
  /* the house colours, exactly as the storefront sets them */
  --navy:#0e1d4f; --royal:#14308f; --gold:#f2c313; --oldgold:#8a6a00;
  --line:#dfe3ec; --mist:#eef1f8; --parch:#f8f6ef; --slate:#5a6275;

  --ink:#1f2740; --ink-soft:#4a5468;
  --paper:#ffffff;
  --field:#e9edf5;                      /* the desk the pages lie on */
  --bar:#ffffff;
  --edge:rgba(14,29,79,.16);            /* the cut edge of a sheet */

  --bar-h:66px; --rail-w:274px;
  --radius:3px;                         /* a sheet of paper has corners */
  --page-max:960px;
  --sheet:0 1px 2px rgba(14,29,79,.10), 0 18px 30px -22px rgba(14,29,79,.60);
  --lift:0 26px 54px -26px rgba(9,16,38,.55);

  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body.ahp{
  margin:0; background:var(--field); color:var(--ink); font-family:var(--ui);
  font-size:15px; -webkit-font-smoothing:antialiased; overflow:hidden;
}
:focus-visible{outline:2px solid var(--royal); outline-offset:2px; border-radius:2px}

.ahp-skip{
  position:fixed; top:-60px; left:12px; z-index:60; background:var(--navy); color:#fff;
  padding:9px 14px; border-radius:0 0 6px 6px; text-decoration:none; font-size:.85rem;
}
.ahp-skip:focus{top:0}

/* ---------------------------------------------------------------------- the bar
   A reading room's chrome: white, one hairline, no glass and no shadow. */
.ahp-bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:30;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  column-gap:20px; padding:0 18px;
  background:var(--bar); border-bottom:1px solid var(--line);
}
.ahp-bar-l{display:flex; align-items:center; gap:10px; min-width:0}
.ahp-bar-c{min-width:0}
.ahp-bar-r{display:flex; align-items:center; gap:10px}

.ahp-icon{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.82rem;
  color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:6px;
  height:38px; padding:0 12px; cursor:pointer; line-height:1;
}
.ahp-icon svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round}
.ahp-icon:hover{background:var(--mist); border-color:#cdd6e6}
.ahp-icon[aria-expanded="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

.ahp-back{
  display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:var(--slate);
  text-decoration:none; white-space:nowrap; padding:4px 2px;
}
.ahp-back:hover{color:var(--royal)}

.ahp-series{
  margin:0; font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oldgold); font-weight:700; line-height:1;
}
#ahp-title{
  margin:3px 0 0; font-family:var(--serif); font-size:1.06rem; font-weight:400;
  color:var(--navy); line-height:1.25; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ahp-copy{
  margin:2px 0 0; font-size:.72rem; color:var(--slate); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the pager reads as one instrument, the way a catalogue card does */
.ahp-pager{
  display:flex; align-items:stretch; height:38px;
  border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden;
}
.ahp-step{
  display:grid; place-items:center; width:36px; border:0; background:#fff;
  color:var(--navy); cursor:pointer; padding:0;
}
.ahp-step svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.ahp-step:hover{background:var(--mist)}
.ahp-pageno{
  display:flex; align-items:center; gap:6px; padding:0 10px; font-size:.82rem;
  color:var(--slate); border-left:1px solid var(--line); border-right:1px solid var(--line);
}
#ahp-page-input{
  width:2.6em; font:inherit; font-size:.86rem; font-variant-numeric:tabular-nums;
  text-align:center; color:var(--navy); font-weight:600;
  border:0; background:transparent; padding:2px 0;
}
#ahp-page-input:focus{outline:none; box-shadow:inset 0 -2px 0 var(--gold)}

.ahp-tool{
  font:inherit; font-size:.82rem; color:var(--navy); background:#fff; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; height:38px; padding:0 13px; line-height:1;
}
.ahp-tool:hover{background:var(--mist); border-color:#cdd6e6}
.ahp-tool[aria-pressed="true"]{
  background:var(--navy); border-color:var(--navy); color:#fff;
}

/* ------------------------------------------------------------------- the contents
   A monograph is a reference work and people arrive at it looking for section 13, so
   the rail is the first control on the page and it opens by default on a wide screen. */
.ahp-body{position:absolute; inset:var(--bar-h) 0 0 0; display:flex; min-height:0}

.ahp-rail{
  flex:0 0 var(--rail-w); width:var(--rail-w); overflow-y:auto; overscroll-behavior:contain;
  background:var(--parch); border-right:1px solid var(--line); scrollbar-width:thin;
  display:none;
}
.rail-open .ahp-rail{display:block}
.ahp-rail-in{padding:22px 18px 30px}
.ahp-rail-head{
  margin:0; font-family:var(--serif); font-size:1rem; color:var(--navy);
}
.ahp-rail-extent{
  margin:3px 0 14px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oldgold); font-weight:700;
}
.ahp-rail-list{border-top:1px solid #e7e2d4}

/* a section, when the monograph's index is published to the reader */
.ahp-sec{
  display:grid; grid-template-columns:2.1em minmax(0,1fr); gap:8px; width:100%;
  text-align:left; font:inherit; font-size:.86rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid #e7e2d4;
  border-left:3px solid transparent; cursor:pointer; padding:9px 8px 9px 9px;
  line-height:1.35;
}
.ahp-sec b{font-weight:700; color:var(--oldgold); font-variant-numeric:tabular-nums}
.ahp-sec span{min-width:0}
.ahp-sec em{display:block; font-style:normal; font-size:.72rem; color:var(--slate); margin-top:1px}
.ahp-sec:hover{background:#fffdf7}
.ahp-sec.is-here{
  background:#fff; border-left-color:var(--gold); color:var(--navy); font-weight:600;
}
.ahp-sec.is-here b{color:var(--navy)}
.ahp-sub{padding-left:20px}
.ahp-sub b{font-weight:400}

/* pages, while the monograph's index is on its way */
.ahp-pages{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px;
  padding:14px 0 0;
}
.ahp-pg{
  font:inherit; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--ink);
  background:#fff; border:1px solid #e7e2d4; border-radius:3px; height:34px;
  cursor:pointer; padding:0;
}
.ahp-pg:hover{border-color:var(--gold); color:var(--navy)}
.ahp-pg.is-here{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600}
.ahp-rail-foot{
  margin:18px 0 0; font-size:.74rem; line-height:1.5; color:var(--slate);
  border-top:1px solid #e7e2d4; padding-top:12px;
}

.ahp-scrim{display:none}

/* ---------------------------------------------------------------------- the pages
   A sheet of paper on a desk: square corners, a cut edge, one soft shadow. No card,
   no rounded app panel, nothing between the reader and the page. */
.ahp-stage{
  flex:1 1 auto; min-width:0; overflow-y:auto; overflow-x:auto;
  padding:34px 28px 90px; scroll-behavior:smooth; outline:none; scrollbar-width:thin;
  background:linear-gradient(180deg,#e2e7f1 0,var(--field) 150px);
}
.ahp-page{
  width:min(var(--page-max), 100%); margin:0 auto 52px; position:relative;
  background:var(--paper); border:1px solid var(--edge); border-radius:var(--radius);
  box-shadow:var(--sheet); overflow:hidden; aspect-ratio:1/1.43;
}
.ahp-page.is-loaded{aspect-ratio:auto}
.ahp-page canvas{display:block; width:100%; height:auto}

/* the folio, centred under the sheet the way a book sets one */
.ahp-page::after{
  content:attr(data-page); position:absolute; left:50%; bottom:-30px;
  transform:translateX(-50%); white-space:nowrap;
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--slate);
}

/* a sheet still coming: a hairline at its head, breathing. No shimmer - a shimmering
   rectangle is the app look, and a scholar waiting two seconds does not need a show. */
.ahp-page.is-pending{
  background:var(--paper);
  background-image:linear-gradient(90deg,transparent,rgba(20,48,143,.35),transparent);
  background-repeat:no-repeat; background-size:38% 2px; background-position:0 0;
  animation:ahp-wait 1.9s ease-in-out infinite;
}
@keyframes ahp-wait{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

.ahp-loading{padding:90px 0; text-align:center}
.ahp-loading-t{
  margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--navy);
}
.ahp-loading-d{display:flex; gap:6px; justify-content:center; margin:14px 0 0}
.ahp-loading-d span{
  width:6px; height:6px; border-radius:50%; background:var(--royal); opacity:.3;
  animation:ahp-dot 1.2s infinite;
}
.ahp-loading-d span:nth-child(2){animation-delay:.18s}
.ahp-loading-d span:nth-child(3){animation-delay:.36s}
@keyframes ahp-dot{50%{opacity:.9; transform:translateY(-3px)}}

/* Detail is a wider measure, not a transform: the page is refetched at 300 dpi so a
   chromatogram holds up instead of turning to porridge. */
body.is-zoom{--page-max:1800px}
body.is-zoom .ahp-stage{padding-left:18px; padding-right:18px}

/* ----------------------------------------------------------------------- the gate
   Somebody's monograph has just shut in front of them. This card is the Institute
   speaking to a reader, so it is set like the Institute's stationery. */
.ahp-gate{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:rgba(14,29,79,.34); backdrop-filter:blur(2px); padding:20px;
}
.ahp-gate[hidden]{display:none}
.ahp-gate-card{
  max-width:486px; background:#fff; border:1px solid var(--line);
  border-top:4px solid var(--gold); border-radius:0 0 4px 4px;
  box-shadow:var(--lift); padding:26px 30px 22px; text-align:left;
}
.ahp-gate-series{
  margin:0 0 8px; font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oldgold); font-weight:700;
}
.ahp-gate-card h2{
  margin:0 0 10px; font-family:var(--serif); font-size:1.42rem; font-weight:400;
  color:var(--navy); line-height:1.2;
}
.ahp-gate-card p{margin:0 0 18px; font-size:.95rem; line-height:1.6; color:var(--ink)}
/* The membership shelf: three monographs at a time, swapped from inside the gate. */
.ahp-shelf{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--line)}
.ahp-shelf[hidden]{display:none}
.ahp-shelf li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem;
}
.ahp-shelf .ahp-shelf-title{color:var(--navy); line-height:1.35}
.ahp-shelf .ahp-shelf-when{display:block; font-size:.72rem; color:var(--slate); margin-top:2px}
.ahp-shelf button{
  font:inherit; font-size:.8rem; cursor:pointer; white-space:nowrap; color:var(--royal);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:7px 12px;
}
.ahp-shelf button:hover{border-color:var(--royal)}
.ahp-shelf button[disabled]{opacity:.5; cursor:default}
.ahp-gate-acts{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.ahp-cta{
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; color:#fff;
  background:var(--royal); border:1px solid var(--royal); border-radius:6px;
  padding:11px 20px;
}
.ahp-cta:hover{background:var(--navy); border-color:var(--navy)}
.ahp-quiet{font-size:.86rem; color:var(--slate); text-decoration:none}
.ahp-quiet:hover{color:var(--royal)}
.ahp-gate-foot{
  margin:20px 0 0 !important; padding-top:14px; border-top:1px solid var(--line);
  font-size:.78rem !important; line-height:1.55; color:var(--slate) !important;
}
.ahp-gate-foot a{color:var(--royal); text-decoration:none}

/* ----------------------------------------------------- selection, print and phones */
.ahp-page, .ahp-page canvas{
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-user-drag:none;
}
.ahp-print-note{display:none}
@media print{
  /* Not decoration. There is no print path through this reader: the printed AHP is the
     one the Institute prints, and it carries the pantograph that declares its own
     photocopies (bin/ahp_pantograph.py). */
  .ahp-bar, .ahp-body, .ahp-stage, .ahp-rail, .ahp-gate, .ahp-skip{display:none !important}
  .ahp-print-note{
    display:block !important; font:15px/1.6 var(--serif); color:#0e1d4f; margin:30mm 20mm;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .ahp-page.is-pending, .ahp-loading-d span{animation:none}
  .ahp-stage{scroll-behavior:auto}
  .ahp-rail{transition:none !important}
}

/* Tablets and narrow desktops: the rail stops taking room from the page and becomes a
   drawer over it. */
@media (max-width:999px){
  .ahp-rail{
    position:fixed; left:0; top:var(--bar-h); bottom:0; z-index:40; display:block;
    width:min(300px,84vw); flex-basis:auto;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:var(--lift);
  }
  .rail-open .ahp-rail{transform:none}
  .rail-open .ahp-scrim{
    display:block; position:fixed; inset:var(--bar-h) 0 0 0; z-index:35;
    background:rgba(14,29,79,.28);
  }
  .ahp-back-t{display:none}
}

/* Phones. Half the reading happens here, so the bar keeps the title, the contents and
   the folio, and the page gets the rest of the glass. */
@media (max-width:720px){
  :root{--bar-h:58px; --page-max:100%}
  body.ahp{font-size:14px}
  .ahp-bar{grid-template-columns:auto minmax(0,1fr) auto; column-gap:10px; padding:0 10px}
  .ahp-icon{padding:0 10px; height:36px}
  .ahp-icon-t{display:none}
  .ahp-back{display:none}
  .ahp-series{font-size:.56rem; letter-spacing:.14em}
  #ahp-title{font-size:.95rem; margin-top:2px}
  .ahp-copy{display:none}
  .ahp-tool-full{display:none}
  .ahp-tool{padding:0 10px; height:36px; font-size:.78rem}
  .ahp-pager{height:36px}
  .ahp-step{width:34px}
  .ahp-pageno{padding:0 7px; font-size:.76rem}
  .ahp-stage{padding:14px 10px 74px}
  .ahp-page{margin-bottom:44px; border-radius:2px}
  .ahp-page::after{bottom:-26px; font-size:.6rem}
  .ahp-gate-card{padding:22px 20px 18px}
  .ahp-gate-card h2{font-size:1.24rem}
}

/* A phone held upright has no room for a pager and a title in one row, so the pager
   moves to a bar of its own along the bottom, where a thumb already is. */
@media (max-width:520px){
  .ahp-bar-r{
    position:fixed; left:0; right:0; bottom:0; height:56px; z-index:30;
    justify-content:center; gap:14px; padding:0 12px;
    background:#fff; border-top:1px solid var(--line);
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
  .ahp-bar-r .ahp-pager{height:40px}
  .ahp-bar-r .ahp-step{width:52px}
  .ahp-stage{padding-bottom:88px}
  .ahp-scrim, .rail-open .ahp-scrim{bottom:56px}
  .ahp-rail{bottom:56px}
}