/* ==========================================================================
   Just One — shared site chrome
   Loaded by every page: the music dock, the install button, print rules.
   Uses the locked brand tokens; each page already declares them on :root.
   ========================================================================== */

:root{
  --j1-black:#070B16; --j1-midnight:#0B1224; --j1-cobalt:#132A6B;
  --j1-cyan:#7FB0FF; --j1-gold:#CBA054; --j1-clay:#C0897A; --j1-bone:#F1EEE7;
  --j1-bone-70:rgba(241,238,231,.74); --j1-bone-50:rgba(241,238,231,.5);
  --j1-line:rgba(127,176,255,.16);
  --j1-sora:'Sora',system-ui,sans-serif; --j1-karla:'Karla',system-ui,sans-serif;

  /* so a native control — a <select>'s own list, a date picker, a scrollbar —
     opens in the dark rather than flashing white over a dark page */
  color-scheme: dark;

  /* Two more the pages share: the surface a card lifts to, and what a
     shadow is made of. Declared here so every page inherits them. */
  --raise:#101a33;
  --shadow:#000000;
  --bone-hi:#FFFFFF;
}

/* ==========================================================================
   Light mode

   Not a different design — the same one, read in daylight. Every colour on
   this site comes from the tokens below, so the whole site turns over by
   redefining them: the deep navy becomes paper, the cream lettering becomes
   ink, and the blue and gold step down to weights that hold their contrast
   against white. Nothing else in any stylesheet changes.

   Set by data-theme on <html>, which the page writes before it paints, so
   there is never a flash of the other one.
   ========================================================================== */
html[data-theme="light"]{
  /* surfaces, from the page up */
  --black:#F4F1EA;          /* the page itself */
  --midnight:#FFFFFF;       /* cards and panels */
  --raise:#EEF2FB;          /* a card lifted on hover */
  --cobalt:#DCE6FB;         /* the deep-blue blocks: quiet blue paper */

  /* ink */
  --bone:#131A28;
  --bone-hi:#000000;
  --bone-70:rgba(19,26,40,.78);
  --bone-50:rgba(19,26,40,.64);

  /* accents, darkened until they hold against paper */
  --electric:#1B45C4;
  --cyan:#1E4FC7;
  --cyan-soft:#3C6AD4;
  --gold:#8A6417;
  --gold-hi:#6B4D0F;
  --clay:#A4594A;

  --line:rgba(19,42,107,.18);
  --line-2:rgba(19,42,107,.34);
  --shadow:#5A6684;

  /* the shared chrome uses its own names for the same colours */
  --j1-black:#F4F1EA; --j1-midnight:#FFFFFF; --j1-cobalt:#DCE6FB;
  --j1-cyan:#1E4FC7; --j1-gold:#8A6417; --j1-clay:#A4594A; --j1-bone:#131A28;
  --j1-bone-70:rgba(19,26,40,.78); --j1-bone-50:rgba(19,26,40,.64);
  --j1-line:rgba(19,42,107,.18);

  color-scheme: light;
}

/* The artwork keeps its own night sky — a dark plate on a light card reads as
   a picture, which is what it is. Its one job here is to stay legible. */
html[data-theme="light"] .cover,
html[data-theme="light"] .featured .cover{
  border:1px solid rgba(19,42,107,.14);
}

/* ---------- install button (sits in the top bar) ---------- */
.j1-install{
  display:none; align-items:center; gap:7px;
  border:1px solid var(--j1-line); border-radius:999px; padding:6px 13px;
  font-family:var(--j1-karla); font-weight:700; font-size:13px;
  color:var(--j1-bone-70); background:none; cursor:pointer; white-space:nowrap;
}
.j1-install.show{display:inline-flex}
.j1-install:hover{border-color:var(--j1-gold); color:var(--j1-gold)}
.j1-install svg{width:14px;height:14px;flex:none}

/* ---------- wordmark: the One Sheep beside the name ---------- */
/* The sheep stands on the same baseline as the letters, so the halo rises
   above the caps instead of the whole mark floating mid-line. */
.wm{display:inline-flex; align-items:baseline; gap:9px}
.wm .wm-mark{width:26px; height:26px; flex:none; display:block}
.wm svg{max-height:32px}   /* never taller than the bar, whatever else happens */
@media (max-width:480px){ .wm .wm-mark{width:23px; height:23px} }


/* ==========================================================================
   The music bar
   A slim strip pinned to the very top of the window, above the site's own
   header. It never floats over the words: the page is pushed down by exactly
   its height, and the sticky header parks directly beneath it. The track list
   and the outbound links drop down from it only when asked for.
   ========================================================================== */

/* --j1-bar-h is measured from the real strip by the script and written here,
   so the notch inset, a wrapped title or a future row are all accounted for
   without this file having to guess. The 46px is only the value that holds
   for the instant before the first measurement lands. */
html.j1-musicbar{ --j1-bar-h:46px }

/* The page yields the space rather than having it taken. */
html.j1-musicbar body{ padding-top:var(--j1-bar-h) }
/* 404.html asks its body for a full viewport so the footer sits at the bottom;
   without this the strip's height would be added on top of that and invent a
   scrollbar on a page that fits. */
html.j1-musicbar body{ min-height:calc(100vh - var(--j1-bar-h)) }
html.j1-musicbar .bar{ top:var(--j1-bar-h) }
html.j1-musicbar .filterbar{ top:calc(var(--j1-bar-h) + 56px) }

.j1-music{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:rgba(9,15,30,.93); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--j1-line);
  padding-top:env(safe-area-inset-top,0px);
  font-family:var(--j1-karla);
  box-shadow:0 1px 0 rgba(127,176,255,.05), 0 6px 24px rgba(0,0,0,.28);
  box-shadow:0 1px 0 color-mix(in srgb, var(--cyan) 5%, transparent), 0 6px 24px color-mix(in srgb, var(--shadow) 28%, transparent);
}
.j1-music[hidden]{display:none}

/* a thread of gold along the very top edge — the brand, one pixel of it */
.j1-music::before{
  content:""; position:absolute; top:env(safe-area-inset-top,0px); left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(203,160,84,.5),rgba(127,176,255,.35),transparent);
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--gold) 50%, transparent),color-mix(in srgb, var(--cyan) 35%, transparent),transparent);
}

/* ---------- the strip itself ---------- */
.j1-row{
  height:40px; display:flex; align-items:center; gap:9px;
  padding:0 10px 0 13px; max-width:1180px; margin:0 auto;
}

.j1-mark{
  flex:none; display:grid; place-items:center; width:20px; height:20px;
  color:var(--j1-gold); opacity:.9;
}
.j1-mark svg{width:15px;height:15px}

/* transport */
.j1-ctrls{display:flex; align-items:center; gap:2px; flex:none}
.j1-tbtn{
  width:28px; height:28px; display:grid; place-items:center; flex:none;
  border:0; border-radius:50%; background:none; color:var(--j1-bone-70); cursor:pointer;
  padding:0;
}
.j1-tbtn svg{width:16px;height:16px}
.j1-tbtn:hover{color:var(--j1-bone); background:color-mix(in srgb, var(--cyan) 12%, transparent)}
.j1-tbtn.j1-play{width:29px; height:29px; background:var(--j1-bone); color:var(--j1-black)}
.j1-tbtn.j1-play svg{width:15px;height:15px}
.j1-tbtn.j1-play:hover{background:var(--bone-hi)}
.j1-shuffle svg{width:15px;height:15px}
.j1-shuffle[aria-pressed="true"]{color:var(--j1-gold); background:color-mix(in srgb, var(--gold) 16%, transparent)}
.j1-repeat svg{width:15px;height:15px}
.j1-repeat[data-mode="all"],
.j1-repeat[data-mode="one"]{color:var(--j1-gold); background:color-mix(in srgb, var(--gold) 16%, transparent)}

/* now playing — the one thing that may shrink */
.j1-meta{
  min-width:0; flex:1 1 auto; display:flex; align-items:baseline; gap:7px;
  overflow:hidden; white-space:nowrap;
}
.j1-meta .t{
  font-family:var(--j1-sora); font-weight:700; font-size:13px; color:var(--j1-bone);
  overflow:hidden; text-overflow:ellipsis; flex:0 1 auto;
}
.j1-meta .sep{color:var(--j1-bone-50); flex:none; font-size:12px}
.j1-meta .a{
  font-size:12px; color:var(--j1-bone-50); overflow:hidden; text-overflow:ellipsis; flex:0 1 auto;
}

.j1-time{
  flex:none; font-size:11px; color:var(--j1-bone-50);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

.j1-ibtn{
  height:26px; flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:0 8px; border-radius:7px; border:1px solid transparent;
  color:var(--j1-bone-50); background:none; cursor:pointer;
  font-family:var(--j1-karla); font-weight:700; font-size:11.5px;
}
.j1-ibtn:hover{color:var(--j1-bone); border-color:var(--j1-line); background:color-mix(in srgb, var(--cyan) 8%, transparent)}
.j1-ibtn svg{width:13px;height:13px;flex:none}
.j1-ibtn .chev{transition:transform .2s ease}
.j1-music.open .j1-ibtn .chev{transform:rotate(180deg)}

/* ---------- seek: a hairline across the whole width ---------- */
.j1-seek{
  position:relative; height:6px; display:flex; align-items:flex-end;
}
.j1-seek input[type=range]{
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:6px; margin:0; background:transparent; cursor:pointer;
  touch-action:none;
}
.j1-seek input[type=range]::-webkit-slider-runnable-track{height:3px; background:color-mix(in srgb, var(--cyan) 16%, transparent)}
.j1-seek input[type=range]::-moz-range-track{height:3px; background:color-mix(in srgb, var(--cyan) 16%, transparent)}
.j1-seek input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:9px; height:9px; border-radius:50%;
  background:var(--j1-gold); margin-top:-3px; border:0;
  opacity:0; transition:opacity .15s ease;
}
.j1-seek input[type=range]::-moz-range-thumb{
  width:9px;height:9px;border:0;border-radius:50%;background:var(--j1-gold);opacity:0;
}
.j1-music:hover .j1-seek input[type=range]::-webkit-slider-thumb,
.j1-seek input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}
.j1-music:hover .j1-seek input[type=range]::-moz-range-thumb{opacity:1}

/* the played portion, painted behind the input */
.j1-seek .j1-fill{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--j1-gold),var(--j1-gold-hi,#E4C488));
  background:linear-gradient(90deg,var(--j1-gold),var(--j1-gold-hi,var(--gold-hi)));
  pointer-events:none;
}

/* ---------- the drop-down: tracks and the outbound links ---------- */
.j1-panel{
  position:absolute; top:100%; right:max(14px, calc((100vw - 1180px)/2 + 10px));
  width:340px; max-width:calc(100vw - 20px);
  background:rgba(11,18,36,.985);
  background:color-mix(in srgb, var(--midnight) 98.5%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--j1-line); border-top:0;
  border-radius:0 0 13px 13px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  box-shadow:0 18px 40px color-mix(in srgb, var(--shadow) 50%, transparent);
  overflow:hidden;
}
.j1-panel[hidden]{display:none}

/* shuffle and repeat again, for phones where the strip has no room. Same
   two buttons, driven by the same state — not a second set of controls. */
.j1-modes{display:none; gap:7px; padding:10px 10px 4px}
.j1-mbtn{
  flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--j1-line); border-radius:9px; padding:9px 10px;
  background:none; color:var(--j1-bone-50); cursor:pointer;
  font-family:var(--j1-karla); font-weight:700; font-size:12.5px; white-space:nowrap;
}
.j1-mbtn svg{width:15px;height:15px;flex:none}
.j1-mbtn:hover{color:var(--j1-bone); border-color:var(--j1-line-2,color-mix(in srgb, var(--cyan) 30%, transparent))}
.j1-mbtn[aria-pressed="true"],
.j1-mbtn[data-mode="all"],
.j1-mbtn[data-mode="one"]{color:var(--j1-gold); border-color:rgba(203,160,84,.45); border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 10%, transparent)}

.j1-tracks{list-style:none; margin:0; padding:8px; max-height:min(52vh,340px); overflow-y:auto}
.j1-tracks li{margin:0}
.j1-track{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px 9px; border-radius:9px; border:1px solid transparent;
  background:none; cursor:pointer; color:var(--j1-bone-70); font-size:14px;
  font-family:var(--j1-karla);
}
.j1-track:hover{background:rgba(127,176,255,.07);background:color-mix(in srgb, var(--cyan) 7%, transparent); border-color:var(--j1-line); color:var(--j1-bone)}
.j1-track[aria-current="true"]{background:var(--j1-cobalt); border-color:var(--j1-cyan); color:var(--j1-bone)}
.j1-track .n{
  font-family:var(--j1-sora); font-weight:600; font-size:11.5px; color:var(--j1-bone-50);
  width:16px; flex:none; font-variant-numeric:tabular-nums;
}
.j1-track[aria-current="true"] .n{color:var(--j1-gold)}
.j1-track .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto}
.j1-track .dur{margin-left:auto; font-size:11.5px; color:var(--j1-bone-50); font-variant-numeric:tabular-nums; flex:none}

.j1-soon{padding:14px 15px}
.j1-soon p{font-size:13.5px; color:var(--j1-bone-50); line-height:1.5; margin:0}

.j1-togo{border-top:1px solid var(--j1-line); padding:11px 13px 13px}
.j1-togo .lbl{
  display:block; font-family:var(--j1-sora); font-weight:700; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--j1-bone-50); margin-bottom:8px;
}
.j1-togo-links{display:flex; flex-wrap:wrap; gap:6px}
.j1-togo-links a{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  border:1px solid var(--j1-line); border-radius:999px; padding:5px 11px;
  font-size:12.5px; font-weight:700; color:var(--j1-bone-70);
}
.j1-togo-links a:hover{border-color:var(--j1-gold); color:var(--j1-gold)}
.j1-togo-links svg{width:11px;height:11px;opacity:.7}

/* ---------- put away: the strip thins to a hairline, nothing overlaps ---------- */
.j1-music.away .j1-row{height:24px; gap:7px}
.j1-music.away .j1-ctrls,
.j1-music.away .j1-meta,
.j1-music.away .j1-time,
.j1-music.away .j1-shuffle,
.j1-music.away .j1-repeat,
.j1-music.away .j1-seek,
.j1-music.away .j1-dismiss{display:none}
.j1-music.away .j1-mark{margin-right:auto}
.j1-music.away .j1-ibtn{height:20px; font-size:11px}
.j1-music.away .j1-toggle{display:none}
.j1-restore{display:none}
.j1-music.away .j1-restore{display:inline-flex; color:var(--j1-gold)}
.j1-music.away .j1-restore:hover{border-color:var(--j1-gold)}

/* ---------- phones ---------- */
@media (max-width:720px){
  html.j1-musicbar{ --j1-bar-h:44px }
  .j1-row{padding:0 7px 0 10px; gap:7px; height:38px}
  .j1-meta .sep, .j1-meta .a, .j1-time, .j1-prev{display:none}
  .j1-row .j1-shuffle, .j1-row .j1-repeat{display:none}
  .j1-modes{display:flex}
  .j1-ibtn .lbl-txt{display:none}
  .j1-ibtn{padding:0 6px}
  .j1-panel{right:7px; left:7px; width:auto; max-width:none}
}
@media (max-width:380px){
  .j1-mark{display:none}
}

@media (prefers-reduced-motion:reduce){
  .j1-ibtn .chev{transition:none}
}

/* ==========================================================================
   The opening moment
   A small card naming the track for anyone coming back, and a proper welcome
   the first time somebody ever lands here. Both say what the music is doing
   and offer a way to start it, because the browser may well have refused to.
   ========================================================================== */

/* ---- now playing, tucked under the strip ---- */
.j1-card{
  position:fixed; z-index:75;
  top:calc(var(--j1-bar-h, 46px) + 12px);
  right:max(14px, calc((100vw - 1180px)/2 + 10px));
  width:min(310px, calc(100vw - 28px));
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 12px 13px 15px;
  background:rgba(11,18,36,.97);
  background:color-mix(in srgb, var(--midnight) 97%, transparent); backdrop-filter:blur(12px);
  border:1px solid rgba(203,160,84,.4);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius:13px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  box-shadow:0 16px 40px color-mix(in srgb, var(--shadow) 50%, transparent);
  font-family:var(--j1-karla);
  opacity:0; transform:translateY(-8px);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.j1-card.show{opacity:1; transform:translateY(0)}
.j1-card-x{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:0; border-radius:7px; background:none; color:var(--j1-bone-50); cursor:pointer;
}
.j1-card-x:hover{color:var(--j1-bone); background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-card-x svg{width:13px;height:13px}

/* ---- the now-playing block, shared by the card and the welcome ---- */
.j1-np{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.j1-np .np-k{
  font-family:var(--j1-sora); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--j1-gold); margin-bottom:3px;
}
.j1-np .np-t{
  font-family:var(--j1-sora); font-weight:700; font-size:15px; color:var(--j1-bone);
  line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.j1-np .np-a{font-size:12.5px; color:var(--j1-bone-50); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.j1-play-now{
  align-self:flex-start; margin-top:9px;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(203,160,84,.5);
  border:1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius:999px; padding:6px 14px 6px 11px;
  background:none; color:var(--j1-gold); cursor:pointer;
  font-family:var(--j1-sora); font-weight:700; font-size:12.5px;
}
.j1-play-now:hover{background:rgba(203,160,84,.14);background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--j1-gold-hi,var(--gold-hi))}
.j1-play-now svg{width:12px;height:12px}

/* ---- the welcome ---- */
.j1-hello-wrap{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:22px;
  background:rgba(4,7,14,.72); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .3s ease;
}
.j1-hello-wrap.show{opacity:1}
.j1-hello{
  position:relative; width:min(520px, 100%);
  max-height:calc(100vh - 44px); overflow-y:auto;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46,91,234,.28), transparent 62%),
    var(--j1-midnight);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--electric) 28%, transparent), transparent 62%),
    var(--j1-midnight);
  border:1px solid var(--j1-line); border-radius:18px;
  padding:34px 30px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  box-shadow:0 30px 80px color-mix(in srgb, var(--shadow) 60%, transparent);
  font-family:var(--j1-karla);
  transform:translateY(12px) scale(.985);
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.j1-hello-wrap.show .j1-hello{transform:none}
.j1-hello-x{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:9px; background:none; color:var(--j1-bone-50); cursor:pointer;
}
.j1-hello-x:hover{color:var(--j1-bone); background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-hello-x svg{width:15px;height:15px}
.j1-hello .eyebrow{
  font-family:var(--j1-sora); font-weight:700; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--j1-gold); margin-bottom:10px;
}
.j1-hello h2{
  font-family:var(--j1-sora); font-weight:800; font-size:clamp(23px,4.4vw,30px);
  line-height:1.12; letter-spacing:-.015em; color:var(--j1-bone); margin-bottom:14px;
}
.j1-hello p{font-size:15.5px; line-height:1.6; color:var(--j1-bone-70); margin-bottom:12px}
.j1-hello p.hint{
  font-size:14.5px; color:var(--j1-bone-50);
  border-left:3px solid var(--j1-clay); padding:2px 0 2px 14px; margin-bottom:22px;
}
.j1-hello-btns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:4px}
.j1-hello-go{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; padding:13px 22px; text-decoration:none;
  background:var(--j1-bone); color:var(--j1-black);
  font-family:var(--j1-sora); font-weight:700; font-size:15px;
}
.j1-hello-go:hover{background:var(--bone-hi)}
.j1-hello-no{
  border:1px solid rgba(241,238,231,.3);
  border:1px solid color-mix(in srgb, var(--bone) 30%, transparent); border-radius:11px; padding:13px 20px;
  background:none; color:var(--j1-bone); cursor:pointer;
  font-family:var(--j1-sora); font-weight:700; font-size:15px;
}
.j1-hello-no:hover{border-color:var(--j1-bone)}
.j1-hello .j1-np{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--j1-line);
}

@media (max-width:560px){
  .j1-card{right:10px; left:10px; width:auto; top:calc(var(--j1-bar-h, 44px) + 10px)}
  .j1-hello{padding:30px 20px 24px; border-radius:16px}
  .j1-hello-btns{flex-direction:column; align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .j1-card, .j1-hello-wrap, .j1-hello{transition:none}
}

/* ==========================================================================
   "A newer version is ready"
   Shown only when a new service worker has finished installing AND an older
   one is already in charge — never on a first visit, where there is nothing
   to update from. Sits at the bottom so it never argues with the music bar.
   ========================================================================== */
.j1-update{
  position:fixed; z-index:80;
  left:50%; transform:translateX(-50%) translateY(140%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:min(420px, calc(100vw - 28px));
  display:flex; align-items:center; gap:13px;
  padding:13px 14px 13px 16px;
  background:rgba(11,18,36,.97);
  background:color-mix(in srgb, var(--midnight) 97%, transparent); backdrop-filter:blur(12px);
  border:1px solid rgba(203,160,84,.45);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius:13px;
  box-shadow:0 14px 42px rgba(0,0,0,.55);
  box-shadow:0 14px 42px color-mix(in srgb, var(--shadow) 55%, transparent);
  font-family:var(--j1-karla);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.j1-update.show{transform:translateX(-50%) translateY(0)}
.j1-update .txt{flex:1 1 auto; min-width:0}
.j1-update .hd{
  display:block; font-family:var(--j1-sora); font-weight:700; font-size:14px;
  color:var(--j1-bone); line-height:1.25;
}
.j1-update .sub{display:block; font-size:12.5px; color:var(--j1-bone-50); margin-top:2px}
.j1-update .go{
  flex:none; border:0; border-radius:9px; padding:9px 15px; cursor:pointer;
  background:var(--j1-gold); color:#0A0D16;
  font-family:var(--j1-sora); font-weight:700; font-size:13.5px; white-space:nowrap;
}
.j1-update .go:hover{background:var(--j1-gold-hi,var(--gold-hi))}
.j1-update .go:disabled{opacity:.6; cursor:default}
.j1-update .no{
  flex:none; width:28px; height:28px; display:grid; place-items:center;
  border:0; border-radius:7px; background:none; color:var(--j1-bone-50); cursor:pointer;
}
.j1-update .no:hover{color:var(--j1-bone); background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-update .no svg{width:14px;height:14px}

@media (max-width:480px){
  .j1-update{gap:10px; padding:12px 10px 12px 14px}
  .j1-update .hd{font-size:13.5px}
  .j1-update .sub{font-size:12px}
  .j1-update .go{padding:9px 13px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .j1-update{transition:none}
}

/* ==========================================================================
   Reader accounts — the button in the header, the dialog, the resume card
   ========================================================================== */
/* Sits among plain text links, so it reads as one of them rather than as a
   button competing with the wordmark. The border and the gold only show up
   when it is actually being used. */
.j1-acct{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1px solid transparent;border-radius:999px;padding:5px 10px 5px 8px;
  background:none;color:var(--j1-bone-70);cursor:pointer;
  font-family:var(--j1-karla);font-weight:500;font-size:15px;white-space:nowrap;
  margin-left:4px;
}
.j1-acct:hover{color:var(--j1-bone);border-color:var(--j1-line)}
.j1-acct:focus-visible{border-color:var(--j1-cyan)}
.j1-acct svg{width:14px;height:14px;flex:none;opacity:.75}
.j1-acct.on svg{color:var(--j1-gold);opacity:1}
.j1-acct .lbl{max-width:12ch;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){ .j1-acct .lbl{display:none} .j1-acct{padding:5px 7px} }

.j1-acct-wrap{
  position:fixed;inset:0;z-index:88;display:grid;place-items:center;padding:20px;
  background:rgba(4,7,14,.74);backdrop-filter:blur(5px);opacity:0;transition:opacity .25s ease;
}
.j1-acct-wrap.show{opacity:1}
.j1-acct-box{
  position:relative;width:min(430px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--j1-midnight);border:1px solid var(--j1-line);border-radius:17px;
  padding:30px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6);box-shadow:0 30px 80px color-mix(in srgb, var(--shadow) 60%, transparent);
  font-family:var(--j1-karla);transform:translateY(10px);transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.j1-acct-wrap.show .j1-acct-box{transform:none}
.j1-acct-x{position:absolute;top:11px;right:11px;width:32px;height:32px;display:grid;place-items:center;
  border:0;border-radius:9px;background:none;color:var(--j1-bone-50);cursor:pointer}
.j1-acct-x:hover{color:var(--j1-bone);background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-acct-x svg{width:15px;height:15px}
.j1-acct-in h2{font-family:var(--j1-sora);font-weight:800;font-size:23px;color:var(--j1-bone);margin-bottom:8px}
.j1-acct-in > p{font-size:14.5px;color:var(--j1-bone-70);line-height:1.55;margin-bottom:18px}
.j1-who{font-size:13.5px;color:var(--j1-bone-50);margin-bottom:16px}

.j1-google{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(241,238,231,.3);
  border:1px solid color-mix(in srgb, var(--bone) 30%, transparent);border-radius:11px;padding:12px 18px;background:none;
  color:var(--j1-bone);cursor:pointer;font-family:var(--j1-sora);font-weight:700;font-size:14.5px}
.j1-google:hover{border-color:var(--j1-bone)}
.j1-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--j1-bone-50);font-size:12.5px}
.j1-or::before,.j1-or::after{content:"";flex:1;height:1px;background:var(--j1-line)}

.j1-f{margin-bottom:14px}
.j1-f label{display:block;font-size:13px;font-weight:700;color:var(--j1-bone-70);margin-bottom:5px}
.j1-opt{font-weight:400;color:var(--j1-bone-50)}
.j1-f input,.j1-f select{width:100%;background:var(--j1-black);border:1px solid var(--j1-line);
  border-radius:9px;padding:11px 13px;color:var(--j1-bone);font-size:15px;font-family:var(--j1-karla)}
.j1-f input:focus,.j1-f select:focus{border-color:var(--j1-cyan);outline:none}
.j1-hint{display:block;font-size:12px;color:var(--j1-bone-50);margin-top:5px}

.j1-go{width:100%;border:0;border-radius:11px;padding:13px 20px;margin-top:4px;
  background:var(--j1-bone);color:var(--j1-black);cursor:pointer;
  font-family:var(--j1-sora);font-weight:700;font-size:15px}
.j1-go:hover{background:var(--bone-hi)}
.j1-go:disabled{opacity:.6;cursor:default}
.j1-msg{display:none;font-size:13.5px;margin-top:11px;color:var(--j1-gold)}
.j1-msg.show{display:block}
.j1-msg.bad{color:#D97056}
.j1-swap{font-size:13.5px;color:var(--j1-bone-50);margin-top:15px;text-align:center}
.j1-swap button{border:0;background:none;color:var(--j1-cyan);cursor:pointer;
  font:inherit;text-decoration:underline;padding:0}
.j1-fine{font-size:12.5px;color:var(--j1-bone-50);line-height:1.5;margin-top:16px;
  border-top:1px solid var(--j1-line);padding-top:14px}

.j1-admin{display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;border:1px solid rgba(203,160,84,.45);border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);border-radius:11px;
  padding:12px 15px;margin-bottom:18px;color:var(--j1-gold);
  font-family:var(--j1-sora);font-weight:700;font-size:14.5px}
.j1-admin:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
.j1-role{font-family:var(--j1-karla);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid rgba(203,160,84,.4);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);border-radius:999px;padding:3px 9px;color:var(--j1-gold)}
.j1-out{border-top:1px solid var(--j1-line);margin-top:20px;padding-top:16px}
.j1-signout{border:1px solid var(--j1-line);border-radius:9px;padding:9px 15px;background:none;
  color:var(--j1-bone-70);cursor:pointer;font-family:var(--j1-karla);font-weight:700;font-size:13.5px}
.j1-signout:hover{border-color:#D97056;color:#D97056}

.j1-resume{position:fixed;z-index:78;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(430px,calc(100vw - 28px));
  background:rgba(11,18,36,.97);
  background:color-mix(in srgb, var(--midnight) 97%, transparent);backdrop-filter:blur(12px);
  border:1px solid rgba(127,176,255,.35);
  border:1px solid color-mix(in srgb, var(--cyan) 35%, transparent);border-radius:13px;padding:15px 17px;
  box-shadow:0 14px 42px rgba(0,0,0,.55);
  box-shadow:0 14px 42px color-mix(in srgb, var(--shadow) 55%, transparent);font-family:var(--j1-karla);
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.j1-resume.show{transform:translateX(-50%) translateY(0)}
.j1-resume .k{display:block;font-family:var(--j1-sora);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--j1-cyan);margin-bottom:5px}
.j1-resume .t{display:block;font-family:var(--j1-sora);font-weight:700;font-size:16px;color:var(--j1-bone)}
.j1-resume-acts{display:flex;gap:9px;margin-top:12px}
.j1-resume-acts .go{flex:1;text-align:center;text-decoration:none;border-radius:9px;padding:9px 14px;
  background:var(--j1-bone);color:var(--j1-black);font-family:var(--j1-sora);font-weight:700;font-size:14px}
.j1-resume-acts .no{border:1px solid rgba(241,238,231,.28);border:1px solid color-mix(in srgb, var(--bone) 28%, transparent);border-radius:9px;padding:9px 14px;
  background:none;color:var(--j1-bone-70);cursor:pointer;font-family:var(--j1-karla);font-weight:700;font-size:13.5px}
@media(prefers-reduced-motion:reduce){.j1-acct-wrap,.j1-acct-box,.j1-resume{transition:none}}

/* ---------- the notepad ---------- */
/* A marker for every section, in the margin beside its heading. Quiet until
   you look at that section, and always lit where something is written. */
.j1-note-host{position:relative}
.j1-note-mark{position:absolute;top:14px;right:0;width:30px;height:30px;padding:0;z-index:6;
  display:grid;place-items:center;border:1px solid transparent;border-radius:9px;
  background:none;color:var(--j1-gold);cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(-3px);
  transition:opacity .16s ease,transform .16s ease,color .16s ease,border-color .16s ease}
.j1-note-mark svg{width:17px;height:17px}
/* The whole band of the section, not just its text column: the icon lives out
   in the margin, and reaching for it must not count as leaving the section. */
.j1-note-sec:hover .j1-note-mark,
.j1-note-sec:focus-within .j1-note-mark,
.j1-note-mark.has, .j1-note-mark.on,
.j1-marks-hint .j1-note-mark{opacity:1;transform:none;pointer-events:auto}
.j1-note-mark:hover{color:var(--j1-gold-hi,#E4C488);color:var(--j1-gold-hi,var(--gold-hi));border-color:var(--j1-gold);background:color-mix(in srgb, var(--gold) 14%, transparent)}
.j1-note-mark.has{border-color:rgba(203,160,84,.5);border-color:color-mix(in srgb, var(--gold) 50%, transparent);background:color-mix(in srgb, var(--gold) 14%, transparent)}
.j1-note-mark.on{color:var(--j1-gold-hi,#E4C488);color:var(--j1-gold-hi,var(--gold-hi));border-color:var(--j1-gold);background:color-mix(in srgb, var(--gold) 20%, transparent)}
.j1-note-mark:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--j1-cyan);outline-offset:2px}
/* wide enough for a margin: step out of the column entirely */
@media(min-width:980px){ .j1-note-mark{right:-48px} }
/* the section the open note belongs to */
.j1-note-live > .j1-note-host::before{content:"";position:absolute;left:4px;top:-8px;bottom:-8px;
  width:2px;border-radius:2px;background:var(--j1-gold);opacity:.8}

.j1-pad{position:absolute;z-index:79;width:min(360px,calc(100vw - 32px))}
.j1-pad[hidden]{display:none}
.j1-pad-panel{width:100%;
  background:rgba(11,18,36,.985);
  background:color-mix(in srgb, var(--midnight) 98.5%, transparent);backdrop-filter:blur(12px);
  border:1px solid var(--j1-line);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  box-shadow:0 18px 46px color-mix(in srgb, var(--shadow) 55%, transparent);font-family:var(--j1-karla)}
.j1-pad-panel[hidden]{display:none}
.j1-pad-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px;
  border-bottom:1px solid var(--j1-line)}
.j1-pad-head > div{flex:1;min-width:0}
.j1-pad-head .k{display:block;font-family:var(--j1-sora);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--j1-gold);margin-bottom:3px}
.j1-pad-head .t{display:block;font-family:var(--j1-sora);font-weight:700;font-size:14.5px;
  color:var(--j1-bone);line-height:1.3}
.j1-pad-x{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0;border-radius:7px;
  background:none;color:var(--j1-bone-50);cursor:pointer}
.j1-pad-x:hover{color:var(--j1-bone);background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-pad-x svg{width:14px;height:14px}
.j1-pad-body{padding:12px 14px 14px}
/* formatting bar */
.j1-pad-tools{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.j1-pad-tools button{min-width:30px;height:28px;padding:0 8px;
  border:1px solid var(--j1-line);border-radius:7px;background:none;color:var(--j1-bone-70);
  cursor:pointer;font-family:var(--j1-karla);font-size:13.5px;line-height:1}
.j1-pad-tools button:hover{color:var(--j1-bone);border-color:var(--j1-cyan);background:color-mix(in srgb, var(--cyan) 8%, transparent)}
.j1-pad-tools button:active{background:color-mix(in srgb, var(--gold) 16%, transparent)}

/* the note itself — the panel hangs from its section and grows downward, so
   the corner you drag sits at the top left and pulls up and out */
.j1-pad-field{position:relative}
.j1-pad-text{width:100%;height:190px;min-height:96px;max-height:70vh;overflow-y:auto;resize:none;
  background:var(--j1-black);border:1px solid var(--j1-line);border-radius:10px;
  padding:12px 13px;color:var(--j1-bone);font-family:var(--j1-karla);font-size:15px;line-height:1.6}
.j1-pad-text:focus{border-color:var(--j1-cyan);outline:none}
/* The marker for "nothing written here yet" is the component's own, not a
   bare .empty: a page that styles .empty for its own no-results line would
   otherwise reach in and hide the field the reader writes in. The front page
   did exactly that. */
.j1-pad-text.j1-empty::before{content:attr(data-placeholder);color:var(--j1-bone-50);pointer-events:none}
.j1-pad-text p{margin:0 0 .6em}
.j1-pad-text p:last-child{margin-bottom:0}
.j1-pad-text ul,.j1-pad-text ol{margin:.2em 0 .6em;padding-left:1.35em}
.j1-pad-text li{margin:.15em 0}
.j1-pad-text blockquote{margin:.4em 0;padding-left:12px;border-left:3px solid var(--j1-clay);color:var(--j1-bone-70)}
.j1-pad-text b,.j1-pad-text strong{color:var(--j1-bone)}
.j1-pad-grip{position:absolute;top:-4px;left:-4px;width:20px;height:20px;display:grid;place-items:center;
  border:1px solid var(--j1-line);border-radius:7px;background:rgba(11,18,36,.96);background:color-mix(in srgb, var(--midnight) 96%, transparent);
  color:var(--j1-bone-50);cursor:nwse-resize;touch-action:none}
.j1-pad-grip::before{content:"";width:8px;height:8px;margin:1px 0 0 1px;
  border-top:2px solid currentColor;border-left:2px solid currentColor;border-radius:2px 0 0 0}
.j1-pad-grip:hover,.j1-pad-grip.drag{color:var(--j1-gold);border-color:var(--j1-gold)}
.j1-pad-grip:focus-visible{outline:2px solid var(--j1-cyan);outline-offset:2px}
.j1-pad-foot{display:flex;justify-content:flex-end;margin-top:8px;min-height:16px}
.j1-pad-state{font-size:12px;color:var(--j1-bone-50)}
.j1-pad-none{font-size:14px;color:var(--j1-bone-70);line-height:1.55;margin-bottom:12px}
.j1-pad-in{width:100%;border:0;border-radius:10px;padding:11px 16px;background:var(--j1-bone);
  color:var(--j1-black);cursor:pointer;font-family:var(--j1-sora);font-weight:700;font-size:14px}
.j1-pad-in:hover{background:var(--bone-hi)}

/* no room to sit beside anything: it comes up from the bottom instead */
@media(max-width:700px){
  .j1-pad{position:fixed !important;left:12px !important;right:12px !important;top:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;width:auto !important}
  .j1-pad-panel{max-height:74vh;overflow:auto}
  .j1-note-mark{opacity:.34;pointer-events:auto;transform:none}
}

/* the way through to the notes page */
.j1-notes-go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;border:1px solid var(--j1-line);border-radius:11px;
  padding:13px 15px;margin-top:20px;color:var(--j1-bone);
  font-family:var(--j1-sora);font-weight:700;font-size:14.5px}
.j1-notes-go:hover{border-color:var(--j1-cyan);background:color-mix(in srgb, var(--cyan) 6%, transparent)}
.j1-notes-go::after{content:"\2192";color:var(--j1-bone-50);font-weight:400}
.j1-notes-n{margin-left:auto;font-family:var(--j1-karla);font-size:11px;letter-spacing:.06em;
  border:1px solid var(--j1-line);border-radius:999px;padding:2px 9px;color:var(--j1-bone-50)}
.j1-notes-n:empty{display:none}
.j1-none{font-size:13.5px;color:var(--j1-bone-50);line-height:1.5}

/* ---------- print: chrome disappears, content stays ---------- */
@media print{
  .j1-music, .j1-install, .j1-update, .j1-card, .j1-hello-wrap,
  .j1-acct, .j1-acct-wrap, .j1-resume, .j1-pad, .j1-note-mark, .j1-read, .j1-bible-wrap{display:none !important}
  html, body{background:#fff !important; color:#000 !important}
  body{font-size:11.5pt}
  a{color:#000 !important; text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8.5pt; color:#555; word-break:break-all}
  a[href^="#"]::after{content:""}
  .bar, .filterbar, .btns, .qnav, .back, .notes-toggle, .j1-skip{display:none !important}
  p, .items p, .card p, .steps p{color:#222 !important}
  h1, h2, h3, h4{color:#000 !important; page-break-after:avoid}
  .sec, .card, .featured, .items li, .steps li{page-break-inside:avoid; border-color:#ccc !important}
  .bible, .peak{background:#f2f4f8 !important; border:1px solid #ccc !important; color:#000 !important}
  .bible p, .peak p{color:#222 !important}
  .note{border-left:3px solid #999 !important}
  .ref{color:#000 !important; border-bottom:none !important; font-weight:700}
  .card, .featured{background:#fff !important}
  .cover, .soils svg, .card .cover{filter:grayscale(1) contrast(.9)}
  footer{border-top:1px solid #ccc !important; background:#fff !important}
  footer p, footer .sig{color:#000 !important}
}

/* ---------- sharing a guide ---------- */
/* It lives inside the <h1>, so it must not inherit the heading's size. */
.j1-share{position:relative;display:inline-flex;vertical-align:middle;
  font-family:var(--j1-karla);font-size:15px;font-weight:400;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap}
.j1-share-btn{width:38px;height:38px;display:grid;place-items:center;padding:0;
  border:1px solid var(--j1-line);border-radius:11px;background:rgba(127,176,255,.05);background:color-mix(in srgb, var(--cyan) 5%, transparent);
  color:var(--j1-bone-70);cursor:pointer;transition:color .16s,border-color .16s,background .16s}
.j1-share-btn svg{width:18px;height:18px}
.j1-share-btn:hover{color:var(--j1-gold);border-color:var(--j1-gold);background:color-mix(in srgb, var(--gold) 10%, transparent)}
.j1-share-btn[aria-expanded="true"]{color:var(--j1-gold);border-color:var(--j1-gold)}
.j1-share-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:80;width:236px;
  display:flex;flex-direction:column;gap:2px;padding:10px;white-space:normal;
  background:rgba(11,18,36,.985);
  background:color-mix(in srgb, var(--midnight) 98.5%, transparent);backdrop-filter:blur(12px);
  border:1px solid var(--j1-line);border-radius:13px;box-shadow:0 18px 44px color-mix(in srgb, var(--shadow) 55%, transparent)}
.j1-share-menu.left{left:auto;right:0}
.j1-share-menu[hidden]{display:none}
.j1-share-k{font-family:var(--j1-sora);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--j1-gold);padding:2px 6px 8px}
.j1-share-menu button{display:flex;align-items:center;gap:10px;width:100%;
  border:0;border-radius:9px;padding:9px 10px;background:none;cursor:pointer;
  color:var(--j1-bone);font-family:var(--j1-karla);font-size:14.5px;font-weight:600;text-align:left}
.j1-share-menu button svg{width:17px;height:17px;flex:none;color:var(--j1-bone-70)}
.j1-share-menu button:hover{background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-share-menu button:hover svg{color:var(--j1-cyan)}
.j1-share-note{display:block;margin:6px 6px 2px;padding-top:8px;border-top:1px solid var(--j1-line);
  font-size:12px;line-height:1.45;color:var(--j1-bone-50);font-weight:400}
@media(max-width:560px){
  .j1-share-btn{width:34px;height:34px;border-radius:10px}
  .j1-share-btn svg{width:16px;height:16px}
  .j1-share-menu{width:min(260px,calc(100vw - 44px))}
}

/* ---------- the light-mode switch, in the account panel ---------- */
.j1-theme{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:18px 0 6px;padding:13px 15px;border:1px solid var(--j1-line);border-radius:11px}
.j1-theme .k{display:block;font-family:var(--j1-sora);font-weight:700;font-size:14.5px;
  color:var(--j1-bone)}
.j1-theme .s{display:block;margin-top:2px;font-size:13px;color:var(--j1-bone-50);line-height:1.4}
.j1-switch{position:relative;flex:none;width:48px;height:28px;padding:0;border-radius:999px;
  border:1px solid var(--j1-line);background:color-mix(in srgb, var(--cyan) 8%, transparent);
  cursor:pointer;transition:background .18s ease,border-color .18s ease}
.j1-switch:hover{border-color:var(--j1-gold)}
.j1-switch .j1-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--j1-bone-70);transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s ease}
.j1-switch[aria-checked="true"]{background:color-mix(in srgb, var(--gold) 26%, transparent);
  border-color:var(--j1-gold)}
.j1-switch[aria-checked="true"] .j1-knob{transform:translateX(20px);background:var(--j1-gold)}
@media(prefers-reduced-motion:reduce){.j1-switch,.j1-switch .j1-knob{transition:none}}

/* A few places that lean on darkness rather than on a token. */
html[data-theme="light"] .j1-music,
html[data-theme="light"] .j1-pad-panel,
html[data-theme="light"] .j1-acct-box,
html[data-theme="light"] .j1-share-menu,
html[data-theme="light"] .j1-card,
html[data-theme="light"] .j1-hello,
html[data-theme="light"] .j1-resume-in,
html[data-theme="light"] .n-box{background:#FFFFFF}
html[data-theme="light"] .j1-pad-text{background:#FBFAF7}
html[data-theme="light"] .j1-note-mark{color:var(--j1-gold)}
html[data-theme="light"] .j1-update{background:#FFFFFF}

/* The sheep is drawn in white wool for a night sky. On paper it needs a
   coat that shows: the same shape, a shade the page can hold. */
html[data-theme="light"] .wm-mark g[fill="#F1EEE7"]{fill:#C3D0E6}
html[data-theme="light"] .wm-mark circle[fill="#E4C488"]{fill:var(--gold)}

/* ==========================================================================
   The Bible

   Two pieces: a small card that opens where a reference was tapped, and the
   Bible itself — a book, open on the screen, notes on the left page and
   Scripture on the right. The pages are parchment in both themes, because a
   page is a page; everything around them follows the site.
   ========================================================================== */

:root{
  --page:#F6F1E4;          /* the paper */
  --page-2:#EFE8D8;        /* the paper, in shadow near the spine */
  --page-ink:#1B1A17;      /* what is printed on it */
  --page-ink-70:rgba(27,26,23,.72);
  --page-ink-40:rgba(27,26,23,.42);
  --page-rule:rgba(27,26,23,.14);
  --gild:#C9A227;          /* the gilt edge */

  /* The book looks like the book whichever way the site is set. Everything
     below used --j1-cobalt, which light mode redefines to a pale blue — so the
     cover, the tabs and every button on them turned washed-out grey while
     their text stayed near-white, and "Scripture" all but disappeared. The
     paper was always the same in both themes; now the binding is too. */
  --bible-blue:#132A6B;
  --bible-blue-hi:#2E5BEA;
  --bible-deep:#0B1224;
  /* The red letters. The deep one is for the parchment of the study pane,
     printer's red rather than warning red; the pale one is for the rail,
     where that same red on navy would be unreadable. */
  --wj:#A3231B;
  --wj-dark:#F0908A;
}
html[data-theme="light"]{ --page:#FBF7EC; --page-2:#F3EDDE; }

/* Skip to the content. Off the screen until it is focused, and then the first
   thing there — which is why the music bar is inserted after it, not before. */
.j1-skip{position:absolute;left:-9999px;top:0;z-index:99;padding:10px 16px;
  border-radius:0 0 10px 0;font-weight:700;text-decoration:none;
  background:var(--j1-bone);color:var(--j1-black)}
.j1-skip:focus{left:0}

/* ---------- the passage that pops out ---------- */
/* It comes out beside the reference you tapped, the way a note does, and it
   is the same object: same dark panel, same eyebrow-and-title head, same
   close. It used to be a full-height rail pinned to the right edge that shoved
   the whole page sideways to make room — a lot of movement for one passage,
   and nothing else on the site behaves that way. Tapping another reference
   turns the page inside it rather than opening a second one. */
.j1-read{position:absolute;z-index:88;width:min(420px,calc(100vw - 32px));
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-6px) scale(.985);
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.3,1)}
.j1-read.show{opacity:1;transform:none}
.j1-read .j1-vc{display:flex;flex-direction:column;min-height:0;
  max-height:min(70vh,560px);
  background:rgba(11,18,36,.985);
  background:color-mix(in srgb, var(--midnight) 98.5%, transparent);backdrop-filter:blur(12px);
  border:1px solid var(--j1-line);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  box-shadow:0 18px 46px color-mix(in srgb, var(--shadow) 55%, transparent);
  font-family:var(--j1-karla)}
/* turning to another passage in the same panel */
.j1-read.turning .j1-vc-body{animation:j1-turn .26s ease}
@keyframes j1-turn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}

.j1-vc-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px;
  border-bottom:1px solid var(--j1-line)}
.j1-vc-head > div{flex:1;min-width:0}
.j1-vc-head .k{display:block;font-family:var(--j1-sora);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--j1-gold);margin-bottom:3px}
.j1-vc-head .r{display:block;font-family:var(--j1-sora);font-weight:700;font-size:15px;
  color:var(--j1-bone);line-height:1.3}
.j1-vc-head .t{flex:none;margin-top:2px;font-family:var(--j1-sora);font-weight:700;font-size:10px;
  letter-spacing:.14em;color:var(--j1-bone-50);border:1px solid var(--j1-line);
  border-radius:999px;padding:3px 8px}
.j1-vc-x{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0;border-radius:7px;
  background:none;color:var(--j1-bone-50);cursor:pointer}
.j1-vc-x:hover{color:var(--j1-bone);background:color-mix(in srgb, var(--cyan) 10%, transparent)}
.j1-vc-x svg{width:14px;height:14px}
.j1-vc-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 14px}
.j1-vc-text{font-size:16px;line-height:1.72;color:var(--j1-bone)}
.j1-vc-text .v{display:inline}
.j1-vc-text .v.para{display:block;margin-top:.7em}
.j1-vc-text .v.aside{color:var(--j1-bone-50)}
.j1-vc-text b{font-family:var(--j1-sora);font-size:11px;font-weight:700;color:var(--j1-gold);
  vertical-align:super;margin-right:2px}
.j1-vc-text i{font-style:italic;color:var(--j1-bone-70)}
.j1-vc-wait,.j1-vc-more,.j1-vc-swap{font-size:13px;color:var(--j1-bone-50);margin-top:10px}
.j1-vc-none{font-size:14.5px;line-height:1.6;color:var(--j1-bone-70)}
.j1-vc-out{display:inline-flex;align-items:center;gap:8px;margin-top:12px;text-decoration:none;
  border:1px solid var(--j1-line);border-radius:10px;padding:10px 14px;
  color:var(--j1-bone);font-weight:700;font-size:14px}
.j1-vc-out:hover{border-color:var(--j1-cyan);background:color-mix(in srgb, var(--cyan) 8%, transparent)}
.j1-vc-out svg{width:14px;height:14px}
.j1-vc-foot{flex:none;padding:12px 14px;border-top:1px solid var(--j1-line)}
.j1-vc-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:0;border-radius:10px;padding:12px 16px;cursor:pointer;
  background:var(--bible-blue);color:#F4F6FB;
  font-family:var(--j1-sora);font-weight:700;font-size:14.5px}
.j1-vc-go:hover{background:var(--j1-electric,#2E5BEA)}
.j1-vc-go svg{width:17px;height:17px}

/* On a phone there is nowhere to pop out to, so it comes up from the bottom —
   the same thing the note panel does at this width. */
@media(max-width:700px){
  .j1-read{position:fixed !important;left:12px !important;right:12px !important;
    top:auto !important;width:auto;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateY(16px)}
  .j1-read .j1-vc{max-height:min(68vh,540px)}
}
@media(prefers-reduced-motion:reduce){
  .j1-read{transition:none}
  .j1-read.turning .j1-vc-body{animation:none}
}

/* ---------- Study Mode: the Bible docked beside the study ---------- */
/* Two panes. The guide keeps the left and scrolls as it always did; the Bible
   holds the right and scrolls on its own. Neither one covers the other, which
   is the whole point — you are meant to be reading both. */
:root{ --j1-study-w:min(620px,46vw) }

/* Flush against the header and the edge of the window: no gap for the page to
   show through, so the two halves read as one screen.

   Layer: study mode is furniture, not an overlay. It is part of the window the
   site is laid out in, so anything that covers the site covers it too — the
   browse screen (85), the account screen and the scripture rail (88), the
   welcome (90). It still sits over the chrome that floats above the page: the
   music strip (70) and the now-playing card (75). Its own floating pieces —
   the picker, the highlight bar, the invitation — ride just above it at 82-84,
   still under every overlay. */
.j1-bible-wrap{position:fixed;z-index:76;top:var(--j1-study-top,78px);right:0;bottom:0;
  width:var(--j1-study-w);display:flex;
  opacity:0;transform:translateX(18px);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.3,1)}
.j1-bible-wrap.show{opacity:1;transform:none}

html.j1-study body{padding-right:var(--j1-study-w);
  transition:padding-right .26s cubic-bezier(.2,.8,.3,1)}
html.j1-study{background:var(--black)}
/* The chrome at the top of the site belongs to the whole window, not to one
   half of it: the music strip and the header run the full width, and only the
   content underneath gives up its room. */
html.j1-study .j1-music{right:0}
html.j1-study .bar{margin-right:calc(-1 * var(--j1-study-w))}
html.j1-study .filterbar{margin-right:calc(-1 * var(--j1-study-w))}
/* The rail normally steps aside for the Bible — except when it is carrying a
   supporting passage, which is meant to sit over the guide so the two can be
   read against each other. */
html.j1-study .j1-read{display:none}
html.j1-study .j1-read.beside{display:flex}

/* the edge you drag to set the split */
.j1-b-edge{position:absolute;left:-4px;top:0;bottom:0;width:10px;z-index:2;
  cursor:col-resize;background:none;border:0}
.j1-b-edge::after{content:"";position:absolute;inset:0 4px;border-radius:2px;
  background:color-mix(in srgb, var(--gild) 34%, transparent);opacity:0;transition:opacity .16s ease}
.j1-b-edge:hover::after,.j1-b-edge.dragging::after,.j1-b-edge:focus-visible::after{opacity:1}

.j1-bible{flex:1;min-width:0;display:flex;flex-direction:column;
  border-radius:0;overflow:hidden;
  background:radial-gradient(130% 150% at 85% 0%,rgba(46,91,234,.34),transparent 62%),#0B1224;
  background:radial-gradient(130% 150% at 85% 0%,
               color-mix(in srgb, var(--bible-blue-hi) 34%, transparent),transparent 62%),
             var(--bible-deep);
  border-left:1px solid color-mix(in srgb, var(--gild) 30%, transparent);
  box-shadow:-14px 0 40px color-mix(in srgb, var(--shadow) 30%, transparent);
  font-family:var(--j1-karla)}

.j1-b-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--gild) 12%, transparent),transparent);
  border-bottom:1px solid color-mix(in srgb, var(--gild) 22%, transparent)}
.j1-b-where{display:flex;gap:6px;flex:1;min-width:0;flex-wrap:wrap}
.j1-b-bar select{max-width:190px;min-width:0;border-radius:8px;padding:7px 9px;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--gild) 34%, transparent);
  background:color-mix(in srgb, #000000 22%, transparent);color:#F2F5FC;
  font-family:var(--j1-karla);font-size:13.5px}
.j1-b-bar select:focus-visible{outline:2px solid var(--gild);outline-offset:1px}
.j1-b-bar option{color:#111;background:#fff}
.j1-b-t{flex:none}
.j1-b-x{width:30px;height:30px;flex:none;display:grid;place-items:center;border:0;border-radius:8px;
  background:none;color:#FFFFFF;opacity:.75;cursor:pointer}
.j1-b-x:hover{opacity:1;background:color-mix(in srgb, #000000 24%, transparent)}
.j1-b-x svg{width:15px;height:15px}

/* Scripture or Notes — only shown where there is room for one page at a time */
.j1-b-tabs{display:none;gap:4px;padding:8px 10px;background:none;
  border-bottom:1px solid color-mix(in srgb, var(--gild) 26%, transparent)}
.j1-b-tabs button{flex:1;border:1px solid transparent;border-radius:9px;padding:9px 12px;
  background:none;color:color-mix(in srgb, #FFFFFF 72%, transparent);cursor:pointer;
  font-family:var(--j1-sora);font-weight:700;font-size:13.5px}
.j1-b-tabs button[aria-selected="true"]{background:color-mix(in srgb, #000000 26%, transparent);
  color:#FFFFFF;border-color:color-mix(in srgb, var(--gild) 40%, transparent)}
.j1-b-tabs .dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;
  background:var(--gild);vertical-align:middle}

/* Scripture at the top, the page you write on below it — a composition book,
   not a spread. The rule between them can be dragged to give either more. */
.j1-b-book-body{flex:1;min-height:0;display:grid;
  grid-template-rows:minmax(0,var(--j1-text-h,62fr)) 12px
                     minmax(min(160px,34%),var(--j1-note-h,38fr));
  background:var(--page)}
.j1-b-page{min-height:0;min-width:0;display:flex;flex-direction:column;padding:14px 18px 10px;
  color:var(--page-ink)}
.j1-b-right{padding-bottom:6px}
.j1-b-left{background:var(--page-2);border-top:1px solid rgba(27,26,23,.14);padding-top:11px}
.j1-b-right.turned{animation:j1-page-turn .3s ease}
@keyframes j1-page-turn{from{opacity:.3;transform:translateX(8px)}to{opacity:1;transform:none}}
.j1-b-spine{position:relative;cursor:row-resize;background:
  linear-gradient(180deg,
    color-mix(in srgb, #000000 3%, transparent),
    color-mix(in srgb, #000000 12%, transparent) 55%,
    color-mix(in srgb, #000000 4%, transparent))}
.j1-b-spine::after{content:"";position:absolute;left:50%;top:50%;
  width:46px;height:3px;margin:-1.5px 0 0 -23px;border-radius:2px;
  background:color-mix(in srgb, var(--page-ink) 22%, transparent);transition:background .16s ease}
.j1-b-spine:hover::after,.j1-b-spine.dragging::after{background:var(--gild)}
.j1-b-page-head{display:flex;align-items:baseline;gap:9px;padding-bottom:9px;margin-bottom:10px;
  border-bottom:1px solid var(--page-rule)}
.j1-b-page-head .t{flex:1;min-width:0;font-family:var(--j1-sora);font-weight:700;font-size:15.5px;
  color:var(--page-ink)}
.j1-b-page-head .k{flex:none;font-family:var(--j1-sora);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--page-ink-40)}

/* Scripture */
.j1-b-text{flex:1;min-height:0;overflow-y:auto;padding-right:6px;
  font-size:16.5px;line-height:1.78;color:var(--page-ink);text-align:justify;hyphens:auto}
.j1-b-text .j1-v{cursor:pointer;border-radius:3px;padding:0 1px;transition:background .14s ease}
.j1-b-text .j1-v:hover{background:rgba(27,26,23,.07)}
.j1-b-text .j1-v.para{display:block;margin-top:.85em;text-indent:.6em}
.j1-b-text .j1-v b{font-family:var(--j1-sora);font-size:10.5px;font-weight:700;color:var(--gild);
  vertical-align:super;margin-right:2px}
.j1-b-text .j1-v i{font-style:italic;color:var(--page-ink-70)}
.j1-b-text .j1-v.looked{background:color-mix(in srgb, var(--gild) 9%, transparent)}
.j1-b-text .j1-v.looked.first{box-shadow:inset 2px 0 0 var(--gild)}
.j1-b-text .j1-v:focus-visible{outline:2px solid var(--bible-blue);outline-offset:1px}

/* ---------- what the publisher printed: headings, and His words in red ----------
   A heading is the publisher's own, never ours, so it is set apart from the
   verses rather than dressed up as one of them: small capitals in the blue of
   the binding, with air above it so one passage does not run into the next.
   The red is the red of a printed Bible — on parchment the deep one, in the
   rail over navy a pale one, because the printer's red there is a smudge. */
.j1-b-head{display:block;font-family:var(--j1-sora);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bible-blue);
  margin:1.5em 0 .5em;text-indent:0}
.j1-b-text .j1-b-head:first-child,.j1-vc-text .j1-b-head:first-child{margin-top:0}
.j1-wj{color:var(--wj)}
.j1-wj i{color:var(--wj)}
.j1-read .j1-wj{color:var(--wj-dark)}
.j1-read .j1-wj i{color:var(--wj-dark)}
.j1-read .j1-b-head{color:var(--j1-cyan);margin:1.15em 0 .45em;font-size:11.5px}
.m-gold{background:rgba(224,178,46,.42)}
.m-blue{background:rgba(120,166,230,.42)}
.m-rose{background:rgba(226,140,140,.38)}
.m-green{background:rgba(124,190,140,.38)}
.m-violet{background:rgba(176,146,222,.40)}
.j1-b-wait{color:var(--page-ink-40);font-size:14px}
.j1-b-turn{flex:none;display:flex;justify-content:space-between;gap:10px;padding-top:10px;margin-top:8px;
  border-top:1px solid var(--page-rule)}
.j1-b-turn button{border:1px solid rgba(27,26,23,.18);border-radius:8px;padding:7px 12px;
  background:none;color:var(--page-ink-70);cursor:pointer;
  font-family:var(--j1-karla);font-weight:700;font-size:13px}
.j1-b-turn button:hover{color:var(--page-ink);background:rgba(27,26,23,.06)}

/* the notes page — the writing area gets the room that is left, always */
.j1-b-notes{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.j1-b-notes .j1-pad-tools{flex:none;margin-bottom:8px}
.j1-b-notes .j1-pad-tools button{border-color:rgba(27,26,23,.2);color:var(--page-ink-70)}
.j1-b-notes .j1-pad-tools button:hover{color:var(--page-ink);border-color:rgba(27,26,23,.4);
  background:rgba(27,26,23,.06)}
/* This has to look like somewhere you write. It used to be a 55%-white wash
   on cream paper behind a 16% hairline — which is to say very nearly the same
   colour as the page it sits on. The box was always there and always the right
   size; you simply could not see it, and no amount of measuring the geometry
   was ever going to catch that. White paper, a border you can actually see,
   and a rule down the left the way a notebook has one. */
.j1-b-note{flex:1 1 auto;min-height:120px;overflow-y:auto;
  border:1px solid rgba(27,26,23,.34);border-radius:9px;
  border-left:3px solid color-mix(in srgb, var(--gild) 70%, transparent);
  padding:13px 14px;background:#FFFFFF;
  box-shadow:inset 0 1px 3px rgba(27,26,23,.07);
  color:var(--page-ink);font-size:15.5px;line-height:1.7}
.j1-b-note:focus{outline:none;border-color:var(--gild);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gild) 22%, transparent),
             inset 0 1px 3px rgba(27,26,23,.07)}
.j1-b-note.j1-empty::before{content:attr(data-placeholder);color:var(--page-ink-70)}
.j1-b-note p{margin:0 0 .6em}
.j1-b-note p:last-child{margin-bottom:0}
.j1-b-note ul,.j1-b-note ol{margin:.2em 0 .6em;padding-left:1.35em}
.j1-b-note b,.j1-b-note strong{color:var(--page-ink)}
.j1-b-state{flex:none;min-height:16px;padding-top:7px;font-size:12px;color:var(--page-ink-40);
  text-align:right}
.j1-b-none{font-size:14.5px;line-height:1.6;color:var(--page-ink-70);margin-bottom:12px}
.j1-b-in{width:100%;border:0;border-radius:10px;padding:11px 16px;cursor:pointer;
  background:var(--bible-blue);color:#F4F6FB;font-family:var(--j1-sora);font-weight:700;font-size:14px}
.j1-b-locked{padding:6px 2px}
.j1-b-locked p{font-size:15px;line-height:1.65;color:var(--page-ink-70);margin-bottom:12px}
.j1-b-locked .small{font-size:13px;color:var(--page-ink-40)}
.j1-b-out{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;
  border:1px solid rgba(27,26,23,.2);border-radius:10px;padding:10px 14px;color:var(--page-ink)}
.j1-b-out:hover{background:rgba(27,26,23,.06)}
.j1-b-out svg{width:14px;height:14px}

/* Narrow: no half to give away. The Bible takes the screen, the page behind
   it is held still, and one page of the book shows at a time. */
@media(max-width:1100px){
  html.j1-study body{padding-right:0}
  html.j1-study .j1-music{right:0}
  html.j1-held{overflow:hidden}
  html.j1-held body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .j1-bible-wrap{top:0;left:0;right:0;bottom:0;width:auto;transform:translateY(16px)}
  .j1-bible{border-left:0}
  .j1-b-edge{display:none}
  .j1-bible{border-radius:0}
  .j1-b-tabs{display:flex}
  /* Written with the book in front of them so that ordering alone cannot undo
     them: whichever page is showing gets the whole body, and neither page may
     be capped. A flatter selector further down the file once did exactly that. */
  .j1-bible .j1-b-book-body{grid-template-rows:1fr}
  .j1-bible .j1-b-left,.j1-bible .j1-b-right{max-height:none;min-height:0}
  .j1-b-spine{display:none}
  .j1-bible-wrap[data-page="text"] .j1-b-left{display:none}
  .j1-bible-wrap[data-page="notes"] .j1-b-right{display:none}
  .j1-b-left,.j1-b-right{background:var(--page);border-top:0}
  /* Four dropdowns will not share one row at this width and stay readable, so
     where-you-are gets a row of its own and the translation keeps the top. */
  .j1-b-bar{flex-wrap:wrap}
  .j1-b-where{order:2;flex-basis:100%;flex-wrap:nowrap}
  .j1-b-bar select{max-width:none;flex:1;min-width:0}
  .j1-b-t{order:1;flex:1;max-width:none}
  .j1-b-x{order:1}
  .j1-b-note{min-height:200px}
}
@media(prefers-reduced-motion:reduce){
  .j1-bible-wrap{transition:none}
  .j1-b-right.turned{animation:none}
}

/* the colours you can mark with */
.j1-hl{position:fixed;z-index:83;display:flex;gap:6px;padding:7px;border-radius:11px;
  background:var(--j1-midnight);border:1px solid var(--j1-line);
  box-shadow:0 14px 34px color-mix(in srgb, var(--shadow) 50%, transparent);
  opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease}
.j1-hl.show{opacity:1;transform:none}
.j1-hl .c{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.j1-hl .c.on{border-color:var(--j1-bone)}
.j1-hl .c-gold{background:#E0B22E}
.j1-hl .c-blue{background:#78A6E6}
.j1-hl .c-rose{background:#E28C8C}
.j1-hl .c-green{background:#7CBE8C}
.j1-hl .c-violet{background:#B092DE}
.j1-hl .none{display:grid;place-items:center;background:none;border:1px solid var(--j1-line);
  color:var(--j1-bone-50)}
.j1-hl .none svg{width:12px;height:12px}
.j1-hl .none:hover{color:var(--j1-bone)}

.j1-b-invite{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);z-index:84;
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--j1-midnight);border:1px solid var(--j1-line);color:var(--j1-bone);
  box-shadow:0 18px 40px color-mix(in srgb, var(--shadow) 50%, transparent);
  font-size:14px;opacity:0;transition:opacity .2s ease,transform .2s ease}
.j1-b-invite.show{opacity:1;transform:translate(-50%,0)}
.j1-b-invite button{border:0;border-radius:8px;padding:8px 13px;cursor:pointer;
  background:var(--j1-bone);color:var(--j1-black);font-family:var(--j1-sora);font-weight:700;font-size:13px}

/* A phone already holds one page at a time: the rules above (max-width:1100px)
   swap the spread for a switch between Scripture and Notes, and give whichever
   page is showing the whole body.

   What used to live here was the older stacked layout — the two pages one above
   the other, the notes capped at 38%, the book 92vh tall. Because this block
   comes later in the file it was quietly overruling the tabs on every phone:
   the note page was squeezed into a third of the screen with the other
   two-thirds left as blank paper, and the book stopped 8vh short of the bottom
   with the site showing underneath it. Nothing in here may set the book's
   height or lay the two pages out again. */
@media(max-width:760px){
  .j1-b-bar{flex-wrap:wrap}
  .j1-b-bar select{max-width:none;flex:1}
  .j1-vc{max-height:80vh}
}
@media(prefers-reduced-motion:reduce){
  .j1-bible,.j1-vc,.j1-read,.j1-bible-wrap,.j1-hl,.j1-b-invite{transition:none}
}


/* ---------- supporting scripture ---------- */
.j1-b-tools{display:flex;align-items:flex-start;gap:8px;flex:none;margin-bottom:8px}
.j1-b-tools .j1-pad-tools{flex:1;margin-bottom:0}

/* Add note — the one that starts you writing. Far right, and it reads as an
   action rather than another formatting toggle. */
.j1-b-write{flex:none;display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 14px;border:0;border-radius:9px;cursor:pointer;
  background:var(--bible-blue);color:#F4F6FB;
  font-family:var(--j1-sora);font-weight:700;font-size:13px;white-space:nowrap}
.j1-b-write:hover{background:var(--bible-blue-hi)}
.j1-b-write:focus-visible{outline:2px solid var(--gild);outline-offset:2px}
.j1-b-write svg{width:15px;height:15px;flex:none}

/* The field, and the passage button living inside it. */
.j1-b-field{position:relative;flex:1 1 auto;min-height:0;display:flex}
.j1-b-field .j1-b-note{flex:1 1 auto;padding-bottom:46px}
.j1-b-add{position:absolute;right:10px;bottom:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:0 12px;
  border:1px solid rgba(27,26,23,.2);border-radius:999px;
  background:color-mix(in srgb, #FFFFFF 86%, transparent);
  color:var(--page-ink-70);cursor:pointer;
  font-family:var(--j1-karla);font-weight:700;font-size:12.5px;white-space:nowrap}
.j1-b-add svg{width:14px;height:14px;flex:none}
.j1-b-add:hover{color:var(--page-ink);border-color:var(--gild);
  background:color-mix(in srgb, var(--gild) 18%, transparent)}
.j1-b-add:focus-visible{outline:2px solid var(--gild);outline-offset:2px}


/* The picker floats, and measures itself against the window rather than the
   pane it was opened from — so on a short screen the list of verses gives up
   the room, and the Add button is always the thing you can still see. */
.j1-b-pick{position:fixed;z-index:82;width:min(340px,calc(100vw - 24px));
  max-height:min(460px,calc(100vh - 24px));display:flex;flex-direction:column;
  border-radius:12px;border:1px solid rgba(27,26,23,.2);background:var(--page);
  box-shadow:0 22px 54px color-mix(in srgb, var(--shadow) 46%, transparent);
  color:var(--page-ink);font-family:var(--j1-karla);
  opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .18s ease}
.j1-b-pick.show{opacity:1;transform:none}
.j1-b-pick-head{flex:none;display:flex;align-items:center;gap:10px;
  padding:11px 12px 9px;border-bottom:1px solid var(--page-rule);
  font-family:var(--j1-sora);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--page-ink-40)}
.pk-x{margin-left:auto;width:24px;height:24px;flex:none;display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--page-ink-40);cursor:pointer}
.pk-x:hover{color:var(--page-ink);background:rgba(27,26,23,.07)}
.pk-x svg{width:12px;height:12px}
.j1-b-pick-body{flex:1;min-height:0;overflow-y:auto;padding:11px 12px}
.j1-b-pick-where{display:flex;gap:6px;margin-bottom:9px}
.j1-b-pick-where select{flex:1;min-width:0;border:1px solid rgba(27,26,23,.2);border-radius:8px;
  padding:8px;background:#FFFFFF;color:var(--page-ink);
  font-family:var(--j1-karla);font-size:13.5px;cursor:pointer}
.j1-b-pick-hint{font-size:12.5px;line-height:1.45;color:var(--page-ink-40);margin-bottom:8px}
.j1-b-pick-vs{display:flex;flex-wrap:wrap;gap:4px;padding:1px}
.j1-b-pick-vs button{min-width:32px;height:30px;padding:0 6px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(27,26,23,.16);background:#FFFFFF;color:var(--page-ink-70);
  font-family:var(--j1-karla);font-size:13px}
.j1-b-pick-vs button:hover{border-color:var(--gild);color:var(--page-ink)}
.j1-b-pick-vs button.on{background:color-mix(in srgb, var(--gild) 32%, transparent);
  border-color:var(--gild);color:var(--page-ink);font-weight:700}
.j1-b-pick-wait{font-size:13px;color:var(--page-ink-40)}
.j1-b-pick-foot{flex:none;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-top:1px solid var(--page-rule);
  background:color-mix(in srgb, #FFFFFF 40%, transparent)}
.pk-what{flex:1;min-width:0;font-size:13px;line-height:1.35;color:var(--page-ink-70)}
.pk-add{flex:none;border:0;border-radius:8px;padding:9px 17px;cursor:pointer;
  background:var(--bible-blue);color:#F4F6FB;font-family:var(--j1-sora);font-weight:700;font-size:13px}
.pk-add:hover{background:var(--j1-electric,#2E5BEA)}

/* a passage written into a note */
.j1-cite{cursor:pointer;font-weight:700;color:var(--bible-blue);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.j1-cite:hover{color:var(--j1-electric,#2E5BEA)}
.j1-b-note .j1-cite{color:#1B3C86}

/* The publisher's line. Their words are on the page by permission, and the
   permission says their name goes with them — so it is always shown, quiet
   but never hidden, at the foot of whatever it belongs to. */
/* ---- what you have not looked at yet -----------------------------------
   One dot, one meaning, and never a number. Beside a link inside a guide it
   says "you have not opened this yet"; on a card in the library it says
   "this is new since you were last here". It is gold rather than red
   because it is an invitation, not a warning, and it carries a real label
   so that a reader who cannot see colour is told the same thing. */
.j1-new{display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;
  background:var(--gold,#CBA054);vertical-align:middle;flex:none;
  box-shadow:0 0 0 2px rgba(203,160,84,.22)}
h2 > .j1-new,h3 > .j1-new{margin-left:9px;vertical-align:.12em}
.j1-new-host{position:relative}
.j1-new-corner{position:absolute;top:10px;right:10px;margin:0;width:8px;height:8px;
  box-shadow:0 0 0 2px rgba(203,160,84,.22),0 0 0 4px rgba(7,11,22,.5)}
@media(prefers-reduced-motion:no-preference){
  .j1-new{animation:j1-new-in .5s cubic-bezier(.2,.8,.3,1) both}
}
@keyframes j1-new-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media print{.j1-new{display:none}}

/* When they were last in this guide. A date, not a score — and it is not
   there at all until there is a real answer to give. */
.j1-lasthere{margin:0 0 14px;font-size:13.5px;letter-spacing:.01em;
  color:var(--bone-50,rgba(241,238,231,.5))}
html[data-theme="light"] .j1-lasthere{color:var(--page-ink-70,#4A453C)}

.j1-rights{margin:18px 0 2px;padding-top:12px;border-top:1px solid rgba(27,26,23,.14);
  color:var(--page-ink-70);font-size:12.5px;line-height:1.6;letter-spacing:.01em}
.j1-vc-text + .j1-rights,.j1-vc-more + .j1-rights{margin-top:14px}
/* The same line on the small card, which is navy, not parchment: the ink
   above is dark on dark and the publisher's name all but vanished. */
.j1-read .j1-rights{color:var(--j1-bone-50);border-top-color:var(--j1-line)}
@media print{.j1-rights{color:#333}}
/* and in a study note, where the page is dark */
.j1-pad-text .j1-cite,.n-body .j1-cite{color:var(--j1-cyan)}
/* context around a citation: there to be read, not the thing being pointed at */
.j1-vc-text .v.aside{color:var(--page-ink-40)}
.j1-vc-text .v.aside b{color:color-mix(in srgb, var(--gild) 55%, transparent)}

/* ---------- looking at the site from the portal ---------- */
/* Inside the preview nothing is really gone: a section that is turned off is
   shown put away, crossed through and quiet, so the owner can see what they
   are deciding rather than watching it vanish. */
html.j1-preview .j1-off{position:relative;opacity:.34;filter:saturate(.35)}
html.j1-preview .j1-off::after{content:"Not showing";position:absolute;top:10px;right:14px;z-index:4;
  font-family:var(--j1-sora);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--j1-black);background:var(--j1-gold);
  border-radius:999px;padding:4px 10px}
html.j1-preview .j1-off *{pointer-events:none}
/* the chrome a reader does not need to see in a preview */
html.j1-preview .j1-music,html.j1-preview .j1-install,html.j1-preview .j1-acct-wrap,
html.j1-preview .j1-card,html.j1-preview .j1-hello-wrap,html.j1-preview .j1-resume,
html.j1-preview .j1-update,html.j1-preview .j1-note-mark{display:none !important}
html.j1-preview.j1-musicbar body{padding-top:0}
html.j1-preview.j1-musicbar .bar{top:0}

/* a guide kept back from the public */
[data-unlisted]{display:none !important}

/* ---------- what readers think ---------- */
.j1-say{border-top:1px solid var(--j1-line);padding:clamp(34px,5vw,54px) 0}
.j1-say-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
@media(min-width:900px){.j1-say-in{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:44px}}
.j1-say h2{margin:0 0 6px;font-family:var(--j1-sora);font-weight:700;font-size:19px;
  color:var(--j1-bone);line-height:1.3}
.j1-say-sub{font-size:14px;line-height:1.55;color:var(--j1-bone-50);margin:0 0 14px}

/* The two fields are labelled. A placeholder is not a name: it goes away the
   moment someone types, and it is not announced reliably. Visually the
   placeholder still carries the hint, so the label is for the label's job. */
.j1-say-lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.j1-stars{display:flex;gap:4px}
.j1-star{width:40px;height:40px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:10px;background:none;color:var(--j1-bone-50);
  transition:color .14s ease,transform .14s ease,background .14s ease}
.j1-star svg{width:26px;height:26px;fill:currentColor}
.j1-star:hover{background:color-mix(in srgb, var(--gold) 12%, transparent);transform:translateY(-1px)}
.j1-star.on{color:var(--j1-gold)}
.j1-star.hovering{color:var(--gold-hi,#E4C488)}
.j1-star:focus-visible{outline:2px solid var(--j1-cyan);outline-offset:2px}
.j1-say-state{min-height:18px;margin-top:9px;font-size:13px;color:var(--j1-bone-50)}
.j1-say-state.bad{color:var(--j1-clay)}
.j1-say textarea,.j1-say input{width:100%;border:1px solid var(--j1-line);border-radius:10px;
  padding:12px 13px;background:var(--j1-black);color:var(--j1-bone);
  font-family:var(--j1-karla);font-size:15px;line-height:1.55;resize:vertical}
.j1-say textarea:focus,.j1-say input:focus{outline:none;border-color:var(--j1-cyan)}
.j1-say-row{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.j1-say-row input{flex:1;min-width:200px;font-size:14px}
.j1-say-go{flex:none;border:0;border-radius:10px;padding:12px 22px;cursor:pointer;
  background:var(--j1-bone);color:var(--j1-black);
  font-family:var(--j1-sora);font-weight:700;font-size:14.5px}
.j1-say-go:hover{background:var(--bone-hi,#FFFFFF)}
html.j1-preview .j1-say{display:none}
@media print{.j1-say{display:none !important}}

/* The line above a guide's title names its path and nothing else — "THE GOOD
   NEWS", "RELATIONSHIPS" — in bold capitals. Written here as well as in each
   guide so a new guide gets it without copying anything. */
.hero .kicker{text-transform:uppercase;font-weight:800;letter-spacing:.12em}

/* Open the Bible and the coloring book, side by side */
.j1-gos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.j1-gos .j1-notes-go{margin-top:0}
.j1-gos .j1-notes-go{padding-left:12px;padding-right:12px;gap:6px;font-size:14px;white-space:nowrap}
/* home page: a two-way choice */
.j1-home{flex-wrap:wrap;gap:10px}
.j1-segs{display:flex;border:1px solid var(--j1-line, rgba(127,176,255,.3));border-radius:10px;overflow:hidden;flex:none}
.j1-seg{padding:8px 12px;font:inherit;font-size:13px;font-weight:700;background:none;color:inherit;border:0;cursor:pointer;opacity:.7}
.j1-seg[aria-pressed="true"]{background:var(--j1-gold, #CBA054);color:#070B16;opacity:1}

/* Account.dc · "When I visit, open" */
.j1-home{margin:20px 0 16px;padding:14px;border:2px solid #CBA054;border-radius:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.j1-home legend{padding:0 6px;font-weight:800;font-size:14px;color:#E4C488}
.j1-home-opt{display:flex;align-items:center;gap:10px;min-height:40px;font-size:16px;cursor:pointer}
.j1-home-opt input{width:22px;height:22px;margin:0;accent-color:#CBA054;flex:none;color-scheme:light}
[data-theme="light"] .j1-home legend{color:#8A6420}

/* Account · profile picture */
.j1-acct .j1-av{width:18px;height:18px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center}
.j1-acct .j1-av img{width:100%;height:100%;object-fit:cover;display:block}
.j1-pic{margin:14px 0 16px;display:flex;flex-direction:column;gap:12px}
.j1-pic:empty{display:none}
.j1-pic-top{display:flex;align-items:center;gap:12px}
.j1-pic-top .k{display:block;font-weight:700;font-size:14px}
.j1-pic-top .s{display:block;font-size:13px;opacity:.7;margin-top:2px}
.j1-pic-now{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;display:flex}
.j1-pic-now img,.j1-pic-now span{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.j1-pic-now .none{background:#070B16;color:#CBA054;font-family:Sora,system-ui,sans-serif;font-weight:800;font-size:22px;box-shadow:inset 0 0 0 1px rgba(127,176,255,.3)}
.j1-pic-acts{display:flex;gap:8px;flex-wrap:wrap}
.j1-pic-up,.j1-pic-acts button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid rgba(127,176,255,.3);background:none;color:inherit;font:inherit;font-size:14px;font-weight:700;display:inline-flex;align-items:center;cursor:pointer}
.j1-pic-up:focus-within{outline:2px solid #7FB0FF;outline-offset:2px}
.j1-pic-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.j1-pic-grid button{aspect-ratio:1;border-radius:12px;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.j1-pic-grid button[aria-checked="true"]{box-shadow:0 0 0 2px #0B1224,0 0 0 4px #CBA054}