/* ------------------------------------------------------------------
   Spiritual Socialist Party — the notes
   Read after style.css and manifesto.css, by kabballah.html and
   dharma.html: the reader again, with numbered marks laid over the pages,
   each opening a note from the ring's Origin Trace. assets/js/notes.js
   lays the marks and opens the notes; the notes themselves are the
   <article class="note">s at the foot of the page.

   On a desktop the page holds the west and the open note answers from
   the east, level with its mark, as the names answer the hand on the
   gate. On a phone the note rises from the foot of the screen. Without
   the script the notes simply follow the pages, one after another.
   ------------------------------------------------------------------ */

.annotated{
  /* Inter has no Hebrew, Arabic, Devanagari, Sinhala or Chinese, so
     naming these faces after it lets each such letter find one, inside an
     English line or alone. Each page loads the ones its notes use from
     Google Fonts: Hebrew and Arabic for Kabballah; Devanagari and Arabic
     for Dharma, with Sinhala and Japanese for the few letters there. */
  font-family:Inter,"Noto Sans Hebrew","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans Sinhala","Noto Sans JP","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --soft:rgba(233,224,204,.84);        /* bone held back: the notes' text  */
  --faint:rgba(233,224,204,.12);       /* hairlines inside a note          */
  --gold-line:rgba(200,164,76,.26);    /* the site's resting gold line     */
  --sheet-ground:#111216;              /* the note risen on a phone        */
  --note-ground:var(--ground);         /* what a figure's nodes are cut from */
}

/* The rise of every other page would hold the risen note to the column
   while it plays (a transform anchors fixed things to itself), so this
   page arrives by fading alone. */
.annotated main{animation-name:arrive}

@keyframes arrive{from{opacity:0}to{opacity:1}}

/* --- the notes switch --------------------------------------------- */
/* An icon beside download in .tools (manifesto.css): a numbered disc,
   like the marks on the pages. It turns gold while the marks are shown
   and falls back to muted bone when they are hidden.                   */

.notes-switch[aria-pressed="true"]{color:var(--gold)}
.notes-switch[aria-pressed="true"]:hover,
.notes-switch[aria-pressed="true"]:focus-visible{color:rgba(214,180,96,1)}

/* On a phone the note rises over the foot of the screen; the tools step
   aside while it is open. */
@media (max-width:1079.98px){
  .note-open .tools{opacity:0;pointer-events:none}
  .tools{transition:opacity 300ms ease}
}

/* The column here is the pages and the notes' margin side by side, so
   the tools stand west of the pair — once the screen is wide enough to
   hold the pages at their full 760px beside the margin. Narrower, they
   keep to the corner, as on a phone. */
@media (min-width:920px) and (max-width:1359.98px){
  .annotated .tools{
    left:max(10px,env(safe-area-inset-left));
    top:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    flex-direction:row;
    gap:8px;
  }
  .annotated .tool{
    width:38px;
    height:38px;
    background:rgba(8,9,11,.78);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px rgba(233,224,204,.10);
  }
  .annotated .tool svg{width:17px;height:17px}
}

@media (min-width:1360px){
  .annotated{--half:calc((760px + clamp(36px,3.6vw,60px) + clamp(320px,29vw,430px)) / 2)}
}

/* --- the marks on the pages --------------------------------------- */
/* A numbered ring in a deep gold, open to the page beneath it — no
   ground of its own — so it marks the workbook lightly rather than
   covering it. The gold is darker than the site's, so the ring and its
   numeral hold on the bone of the page. Its size follows the page's
   (--pin, set by the script). Pointing at one rings the passage it
   speaks to and warms the ring faintly; opening it fills the ring with
   gold, so the open note's mark is plain to see.                     */

.sheet .pin{
  position:absolute;
  z-index:3;
  width:var(--pin,22px);
  height:var(--pin,22px);
  margin:calc(var(--pin,22px) / -2) 0 0 calc(var(--pin,22px) / -2);
  padding:0;
  display:grid;
  place-items:center;
  border:1.25px solid #8f6b1a;
  border-radius:50%;
  background:transparent;
  color:#8f6b1a;
  font:600 calc(var(--pin,22px) * .52)/1 Inter,system-ui,sans-serif;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:0;
  cursor:pointer;
  transition:background-color 200ms ease,color 200ms ease,box-shadow 200ms ease,transform 200ms ease;
  -webkit-tap-highlight-color:transparent;
}

.sheet .pin::before{             /* a fingertip's reach around the disc */
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
}

.sheet .pin:hover{background:rgba(200,164,76,.18)}
.sheet .pin:focus-visible{outline:2px solid #08090b;outline-offset:2px}

.sheet .pin[aria-expanded="true"]{
  border-color:#c8a44c;
  background:#c8a44c;
  color:#08090b;
  box-shadow:0 0 0 2.5px rgba(200,164,76,.35);
}

.sheet .spot{
  position:absolute;
  z-index:2;
  border:1.5px solid rgba(150,114,34,0);
  border-radius:4px;
  background:rgba(200,164,76,0);
  pointer-events:none;
  transition:border-color 300ms ease,background-color 300ms ease;
}

.sheet .spot.near{border-color:rgba(150,114,34,.5)}
.sheet .spot.lit{border-color:rgba(150,114,34,.9);background:rgba(200,164,76,.14)}

.notes-off .sheet .pin,
.notes-off .sheet .spot{display:none}

/* while a note is open it names the page, so the page number rests */
.note-open .folio{opacity:0 !important}

/* --- the open note ------------------------------------------------ */

.margin{text-align:left}

.note-view[hidden]{display:none}

.note-bar{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:32px;
}

.note-bar button{
  font:inherit;
  color:var(--muted);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition:color 250ms ease;
  -webkit-tap-highlight-color:transparent;
}

.note-bar button:hover,
.note-bar button:focus-visible{color:var(--bone)}
.note-bar button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.note-bar button:disabled{opacity:.28;cursor:default;color:var(--muted)}

.note-step{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-size:1.15rem !important;
  line-height:1;
}

.note-count{
  min-width:4.6em;
  text-align:center;
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--muted);
  font-variant-numeric:lining-nums tabular-nums;
}

.note-close{
  margin-left:auto !important;
  font-size:.68rem !important;
  letter-spacing:.3em;
  text-transform:uppercase;
  padding:6px 0 6px 8px !important;
}

.grip{display:none}

.note-scroll .note{animation:note-in 420ms cubic-bezier(.2,.7,.3,1) both}

@keyframes note-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* the hairline points back west, toward the page */
.note-rule{
  display:block;
  width:88px;
  height:1px;
  margin:12px 0 18px;
  background:linear-gradient(90deg,rgba(200,164,76,0),var(--gold));
}

.note-from{
  margin:28px 0 0;
  padding-top:14px;
  border-top:1px solid var(--faint);
  font-size:.74rem;
  line-height:1.55;
  color:var(--muted);
}

.note-from cite{font-style:italic}

/* --- a note's own type -------------------------------------------- */
/* Set in the site's one face: the place on the page in the small
   capitals of "return", the heading in the light hand of the menus, the
   text in bone held back. Hebrew and Arabic keep their own direction and
   a little more size, the Arabic a fuller stroke, as in the primer.    */

.note{text-align:left;color:var(--soft)}
.note p{margin:0}

.note-where{
  font-size:.64rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.7;
}

.note-title{
  margin:.45em 0 0;
  font-size:clamp(1.18rem,2.2vw,1.38rem);
  font-weight:300;
  line-height:1.28;
  letter-spacing:-.005em;
  color:var(--bone);
  text-wrap:balance;
}

.note-title:focus{outline:none}

.verdicts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 0 !important;
}

.verdict{
  display:inline-block;
  padding:3px 7px 2px 8px;
  border:1px solid rgba(233,224,204,.22);
  border-radius:2px;
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(233,224,204,.72);
  line-height:1.5;
  vertical-align:.12em;
  white-space:nowrap;
}

.verdict.kept{color:#d9b866;border-color:rgba(200,164,76,.55)}

.note-body{
  margin-top:18px;
  font-size:.94rem;
  line-height:1.66;
  font-weight:400;
}

.note .note-body > * + *{margin-top:.95em}

.note-body strong{font-weight:600;color:var(--bone)}
.note-body em{font-style:italic}
.note .file{color:var(--bone);letter-spacing:.01em}

/* a short Hebrew or Arabic phrase is kept on one line, so it is never
   split across two and read in the wrong order; Sanskrit, Sinhala and
   Japanese are kept whole the same way, so a word is never broken at a
   conjunct */
.note [lang="he"],
.note [lang="ar"],
.note [lang="sa"],
.note [lang="si"],
.note [lang="ja"]{letter-spacing:0;font-size:1.08em;line-height:1;white-space:nowrap}
.note [lang="ar"]{font-weight:500}
.note-title [lang="he"],
.note-title [lang="ar"],
.note-where [lang="he"],
.note-where [lang="ar"],
.note-where [lang="sa"],
.note-where [lang="si"],
.note-where [lang="ja"]{font-size:1em;margin-right:.24em}   /* the letter-space they do not take */
.note-title [lang="sa"],
.note-title [lang="si"],
.note-title [lang="ja"]{font-size:1em}
.note-where .sep{margin:0 .62em 0 .38em;letter-spacing:0}    /* .24em of letter-space precedes it */

.note .aside{font-size:.88rem;color:rgba(233,224,204,.7)}

.note .src{
  font-size:.76rem;
  line-height:1.6;
  color:var(--muted);
}

.note .src b{
  font-weight:500;
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(233,224,204,.72);
}

/* a panel of the artifact, set into the note */
.note .inset{
  padding:2px 0 2px 16px;
  border-left:1px solid rgba(200,164,76,.5);
}

.note .inset h4{
  margin:0 0 .55em;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.6;
  color:rgba(233,224,204,.82);
}

.note .inset .verdicts{margin:-.1em 0 .7em !important}
.note .inset p + p{margin-top:.8em}

.note figure{margin:1.4em 0 1.2em;padding:0}
.note figure svg{display:block;width:100%;height:auto;color:var(--bone)}
.note figure .moved{stroke:#b294e6}     /* the violet the caption speaks of */
.note figure .deed{stroke:#c8a44c}
.note figcaption{margin-top:12px;font-size:.82rem;line-height:1.6;color:rgba(233,224,204,.66)}
.note figcaption b{font-weight:600;color:rgba(233,224,204,.86)}

.note .terms{border-top:1px solid var(--faint)}
.note .terms > div{
  display:grid;
  grid-template-columns:6.4rem 6.6rem 1fr;
  gap:0 14px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--faint);
}
.note .terms [lang="he"]{text-align:right;font-size:1.18em}
.note .t-lat{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,224,204,.72)}
.note .t-en{font-style:italic}

.note .rows{margin:0;border-top:1px solid var(--faint)}
.note .rows > div{padding:11px 0 12px;border-bottom:1px solid var(--faint)}
.note .rows dt{color:var(--bone);font-weight:500;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.note .rows .cite{font-weight:400;font-size:.82rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.note .rows .verdict{margin-left:auto}
.note .rows dd{margin:5px 0 0;font-size:.88rem}

.note blockquote{
  margin:.4em 0 1em;
  padding:2px 0 2px 16px;
  border-left:1px solid rgba(233,224,204,.24);
}

.note blockquote [lang="ar"]{display:block;font-size:1.12em;line-height:2.05;text-align:right;white-space:normal}
.note blockquote [lang="sa"]{display:block;font-size:1.12em;line-height:1.8;white-space:normal}
.note blockquote .tr{display:block;margin-top:8px;font-style:italic;font-size:.9rem;color:rgba(233,224,204,.72)}

/* --- the notes as a list -------------------------------------------- */
/* What a reader without the script sees, after the pages: every note in
   page order. With the script it stays out of sight, and each note is
   carried up into the margin, or the risen panel, when it is opened.  */

.notes{
  width:100%;
  max-width:40rem;
  margin-top:clamp(28px,6vh,64px);
  text-align:left;
}

.notes > h2{
  margin:0;
  font-weight:400;
  font-size:clamp(.78rem,2.2vw,.95rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--muted);
}

.notes-from{margin:14px 0 8px;font-size:.8rem;line-height:1.6;color:var(--muted)}
.notes-from cite{font-style:italic}

/* The credit leads to the Origin Trace, and so does the margin's hint,
   which repeats it. */
.notes-from a,
.margin-hint a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--gold-line);
  transition:color 300ms ease,border-color 300ms ease;
}
.notes-from a:hover,
.notes-from a:focus-visible,
.margin-hint a:hover,
.margin-hint a:focus-visible{color:var(--bone);border-bottom-color:var(--gold)}

.notes .note{padding:34px 0 30px;border-top:1px solid var(--faint)}

.notes-ready .notes{display:none}

/* --- a desktop: the note answers from the east --------------------- */

@media (min-width:1080px){
  .annotated main{
    --margin-w:clamp(320px,29vw,430px);
    --gutter:clamp(36px,3.6vw,60px);
    display:grid;
    grid-template-columns:minmax(0,760px) var(--margin-w);
    column-gap:var(--gutter);
    justify-content:center;
    align-items:start;
  }

  .annotated main > *{grid-column:1;justify-self:center}
  .annotated main > .sheets{grid-row:1;justify-self:stretch}
  .annotated main > .notes{grid-column:1 / -1}

  .margin{
    grid-column:2 !important;
    grid-row:1;
    align-self:stretch;
    justify-self:stretch !important;
    position:relative;
  }

  .margin-hint{
    position:sticky;
    top:clamp(20px,5vh,48px);
    max-width:19rem;
    transition:opacity 300ms ease;
  }

  .note-open .margin-hint{opacity:0;pointer-events:none}

  .margin-hint p{margin:0;font-size:.82rem;line-height:1.65;color:var(--muted)}
  .margin-hint .hint-head{
    margin-bottom:10px;
    font-size:.64rem;
    letter-spacing:.24em;
    text-transform:uppercase;
  }
  .margin-hint cite{font-style:italic}

  .notes-off .margin-hint{opacity:0}

  .note-view{
    position:absolute;
    left:0;
    right:0;
    top:var(--at,0px);
    z-index:4;
    opacity:0;
    visibility:hidden;
    transform:translateX(10px);
    transition:opacity 320ms ease,transform 320ms ease,visibility 0s linear 320ms;
  }

  .note-view.open{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity 320ms ease,transform 320ms ease,top 360ms cubic-bezier(.2,.7,.3,1);
  }

  /* a hairline across the gutter, level with the open mark */
  .note-view::before{
    content:"";
    position:absolute;
    top:var(--lead,16px);
    right:100%;
    width:var(--gutter);
    height:1px;
    background:linear-gradient(90deg,rgba(200,164,76,0),rgba(200,164,76,.75));
  }

  .note-bar{margin-left:-8px}
}

/* --- a phone, or any narrower screen: the note rises ---------------- */

@media (max-width:1079.98px){
  .margin-hint{display:none}

  .note-view{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    width:100%;
    max-width:720px;
    margin:0 auto;
    max-height:72vh;
    max-height:min(72svh,680px);
    display:flex;
    flex-direction:column;
    background:var(--sheet-ground);
    border-top:1px solid rgba(200,164,76,.45);
    border-radius:16px 16px 0 0;
    box-shadow:0 -20px 48px rgba(0,0,0,.6);
    transform:translateY(calc(100% + 30px));
    visibility:hidden;
    transition:transform 420ms cubic-bezier(.22,.8,.24,1),visibility 0s linear 420ms;
  }

  .note-view.open{
    transform:translateY(var(--drag,0px));
    visibility:visible;
    transition:transform 420ms cubic-bezier(.22,.8,.24,1);
  }

  .note-view.dragging{transition:none}

  .note-bar{
    position:relative;
    flex:none;
    padding:16px max(14px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));
    touch-action:none;
    cursor:grab;
  }

  .grip{
    display:block;
    position:absolute;
    top:7px;
    left:50%;
    width:38px;
    height:4px;
    margin-left:-19px;
    border-radius:2px;
    background:rgba(233,224,204,.22);
  }

  .note-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:2px max(22px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  }

  .note-rule{margin-top:6px}

}

@media (max-width:420px){
  .note .terms > div{grid-template-columns:4.6rem 5.4rem 1fr;gap:0 10px}
}

@media (prefers-reduced-motion:reduce){
  .note-view,
  .note-view.open,
  .sheet .pin,
  .sheet .spot{transition:none}
  .note-scroll .note{animation:none}
}

@media print{
  .sheet .pin,
  .sheet .spot,
  .margin,
  .notes-switch,
  .tools{display:none !important}
  .notes-ready .notes{display:block}
  .notes{color:#111}
}