/* lesson.guru sign-in page: bookcase, book viewer, sign-in box — owned by the Login team */
/* ---------- sign-in page: black wall-mounted display ledges ---------- */
body.page-library { background: #F1EDE6; }
.page-library .topbar { background: transparent; border-bottom: 0; }
.gallery { display: flex; flex-direction: column; gap: 16px; }
.gallery-title { font: 700 30px/1.2 "Playfair Display", Georgia, serif; }
.gallery-title::after { display: none; }
.gallery-title em { font-weight: 500; color: #B4470F; }
.wall { width: 100%; max-width: 860px; margin: 0 auto; padding: 26px 22px 0; border-radius: 4px;
  background: transparent; }
.wall::after { /* a strip of warm floor under the shelves */
  content: ""; display: block; height: 18px; margin: 0 -22px; border-radius: 0 0 4px 4px;
  background: linear-gradient(#C9A77E, #B08D63); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; width: 100%; }  /* same content width as astra-stem.com (620px column, 18px sides) */
.panel { position: relative; padding: 26px 12px 20px; border-radius: 2px;
  background-color: #1B1A18;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px, rgba(0,0,0,.18) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(255,255,255,.025) 37px 39px, transparent 39px 61px),
    linear-gradient(90deg, #171614, #1F1E1B 50%, #171614);
  box-shadow: 0 30px 40px -24px rgba(40, 30, 20, .55), 6px 0 18px -10px rgba(40,30,20,.35);
  display: flex; flex-direction: column; gap: 34px; }
.ledge-row { position: relative; min-width: 0; }
.gallery, .panels, .panel, .ledge-books { min-width: 0; }
.ledge-books { list-style: none; margin: 0; padding: 0 6px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; min-height: 160px; }
.ledge-books.right { justify-content: flex-end; }
.ledge { position: relative; height: 30px; margin: 0 -10px;
  background: linear-gradient(#232220, #161514 40%, #0F0F0E);
  border-top: 1px solid #34322E; box-shadow: 0 12px 14px -8px rgba(0,0,0,.75); }
.ledge::before { /* top face of the board, where the books stand */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: linear-gradient(#141312, #262422); border-top: 1px solid #3B3935; }
.ledge-label { position: absolute; left: 14px; top: 9px; font: 600 9.5px/12px var(--sans); letter-spacing: 2.2px;
  text-transform: uppercase; color: rgba(255,255,255,.55); }

/* face-out books */
.fo { position: relative; flex: 0 0 auto; }
.fo .book { width: 96px; height: 142px; padding: 10px 8px; transition: transform .25s ease, box-shadow .25s ease; }
.fo.lg .book { width: 102px; height: 152px; }
.fo.sm .book { width: 92px; height: 132px; }
.fo .book.real { padding: 0; }
.fo:hover .book { transform: translateY(-6px); box-shadow: 0 18px 22px -12px rgba(0,0,0,.9); }
.fo-caption { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); width: max-content; max-width: 200px;
  display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 6px; background: #FFF6E9; color: var(--ink);
  font-size: 11px; line-height: 1.3; text-align: center; box-shadow: 0 8px 18px -8px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 3; }
.fo-caption b { font-size: 12px; }
.fo:hover .fo-caption, .fo:focus-within .fo-caption { opacity: 1; transform: translate(-50%, 0); }

/* a cover's base look */
.book { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; text-align: center; color: var(--fg); background: var(--bg); border-radius: 1px 3px 3px 1px;
  box-shadow: inset 3px 0 0 rgba(0,0,0,.18), 0 12px 16px -10px rgba(0,0,0,.85); }
.book.real { background: #fff; }
.book.real img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-title { order: 2; position: relative; z-index: 2; max-width: 100%; font: 700 13px/1.1 "Cinzel", Georgia, serif;
  text-wrap: balance; overflow-wrap: anywhere; }
.b-author { order: 1; position: relative; z-index: 2; font: 600 8px/1.2 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; opacity: .9; }
.motif { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* sign in: a small navy volume on the first ledge; opens a box in the middle of the shelves */

.signin-dialog { width: min(340px, calc(100vw - 32px)); border: 0; padding: 30px 26px 26px; border-radius: 16px;
  background: linear-gradient(135deg, #FFFFFF, #F1F1EF 60%, #E6E7E8); color: #16213F;
  box-shadow: inset 0 0 0 1px #C9CBCF, inset 0 -4px 0 rgba(0,0,0,.05), 0 30px 60px -20px rgba(0,0,0,.7); }
.signin-dialog::before { /* orange accent line */
  content: ""; position: absolute; left: 26px; top: 16px; width: 34px; height: 3px; border-radius: 2px; background: #E8661A; }
.signin-dialog[open] { animation: grow .28s ease-out; }
.signin-dialog::backdrop { background: rgba(20, 20, 22, .55); backdrop-filter: blur(3px); }
@keyframes grow { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.signin-dialog h2 { font: 800 24px/1.1 var(--sans); margin: 4px 0 4px; color: #16213F; }
.signin-dialog p { margin: 0 0 16px; color: #6B6F76; font-size: 13px; }
.signin-dialog label { color: #6B6F76; }
.signin-dialog input { width: 100%; background: #FFFFFF; border: 1px solid #C9CBCF; color: #16213F; }
.signin-dialog input:focus-visible { outline: 2px solid #E8661A; outline-offset: 1px; border-color: #E8661A; }
.signin-dialog .btn { background: #16213F; color: #FFFFFF; box-shadow: none; }
.signin-dialog .btn:hover { background: #22305A; }
.signin-dialog .close { position: absolute; top: 12px; right: 14px; border: 0; background: none; color: #8A8D93;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* six cover layouts, rotated along each shelf */
.lay0 .b-title { font: 700 12px/1.08 "Cinzel", Georgia, serif; letter-spacing: 1px; }           /* gold caps, dark */
.lay0 .motif { background: linear-gradient(transparent 70%, color-mix(in srgb, var(--ac) 25%, transparent)),
  repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--ac) 12%, transparent) 12px 13px) bottom / 100% 26% no-repeat; }
.lay1 { justify-content: center; gap: 10px; }                                                      /* big circle */
.lay1 .motif { background: radial-gradient(circle at 50% 48%, var(--ac) 0 42px, transparent 43px); }
.lay1 .b-title { font: 700 10.5px/1.12 "Cinzel", Georgia, serif; letter-spacing: 0; }
.lay1 .b-author { order: 3; }
.lay2 { justify-content: center; }                                                                 /* script title */
.lay2 .b-title { font: 400 23px/1 "Great Vibes", "Brush Script MT", cursive; letter-spacing: 0; }
.lay2 .motif { background: radial-gradient(circle at 80% 88%, color-mix(in srgb, var(--ac) 45%, transparent) 0 40px, transparent 41px),
  radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--ac) 30%, transparent) 0 26px, transparent 27px); }
.lay3 .b-title { font: 600 11px/1.25 "Josefin Sans", var(--sans); letter-spacing: 1.2px; text-transform: uppercase; } /* spaced caps + mountain */
.lay3 .motif { background: linear-gradient(135deg, transparent 49.5%, var(--ac) 50% 51%, transparent 51.5%) 30% 100% / 64px 44px no-repeat,
  linear-gradient(225deg, transparent 49.5%, var(--ac) 50% 51%, transparent 51.5%) 70% 100% / 64px 44px no-repeat; }
.lay4 { justify-content: space-between; }                                                                 /* sunburst */
.lay4 .motif { background: radial-gradient(circle at 50% 40%, var(--ac) 0 16px, transparent 17px),
  repeating-conic-gradient(from 0deg at 50% 40%, color-mix(in srgb, var(--ac) 40%, transparent) 0 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle at 50% 40%, #000 36px, transparent 37px); }
.lay4 .b-title { margin-top: auto; font: 700 13px/1.05 "Playfair Display", Georgia, serif; font-style: italic; }
.lay4 .b-author { order: 3; }
.lay5 { align-items: flex-start; text-align: left; justify-content: flex-end; }                   /* heavy slab + colour block */
.lay5 .b-title { font: 400 15px/1.05 "Abril Fatface", Georgia, serif; }
.lay5 .motif { background: linear-gradient(var(--ac), var(--ac)) 0 0 / 100% 38% no-repeat; }
.lay5 .b-author { order: 3; margin-top: 8px; }

/* a small subject mark in the corner of every cover */
.book::after { position: absolute; z-index: 2; right: 9px; bottom: 7px; font: 700 12px/1 ui-monospace, Consolas, monospace; opacity: .55; color: var(--fg); }
.m-math::after { content: "∑"; }  .m-physics::after { content: "⚛"; }  .m-cs::after { content: "</>"; }
.m-ai::after { content: "⚙"; }    .m-bio::after { content: "∞"; }      .m-writing::after { content: "¶"; }


/* colourways live on the shelf item; its spine and cover inherit them */
.c0 { --bg: #0E0E10; --fg: #E9C07A; --ac: #E9C07A; }
.c1 { --bg: #E6362B; --fg: #FFF3E6; --ac: #1B3A7A; }
.c2 { --bg: #F4E9D6; --fg: #1B3556; --ac: #E8661A; }
.c3 { --bg: #0F5E66; --fg: #F7E1A1; --ac: #F2A83B; }
.c4 { --bg: #EB6A13; --fg: #3B1A05; --ac: #FFD35A; }
.c5 { --bg: #B7C93A; --fg: #1B1F2A; --ac: #1B1F2A; }

@media (max-width: 820px) {
  .page-library .wrap { padding-inline: 0; }
  .wall { padding: 14px 10px 0; }
  .wall::after { margin: 0 -10px; height: 12px; }
  .panels { gap: 10px; }
  .panel { padding: 18px 6px 14px; gap: 26px; }
  .ledge-books { gap: 4px; min-height: 104px; padding: 0 2px; }
  .ledge { margin: 0 -4px; }
  .ledge-label { font-size: 7.5px; letter-spacing: 1.4px; left: 8px; }
  .fo .book { width: 64px; height: 94px; } .fo.lg .book { width: 68px; height: 100px; } .fo.sm .book { width: 60px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .fo .book, .fo-caption { transition: none; } .signin-dialog[open] { animation: none; } }
.book.real::after { content: none; }
.page-library .wrap { max-width: 900px; padding-inline: 18px; }

/* the open book: two pages side by side */
.book-dialog { width: min(760px, calc(100vw - 24px)); border: 0; padding: 0; background: none; overflow: visible; }
.book-dialog::backdrop { background: rgba(30, 26, 20, .55); backdrop-filter: blur(3px); }
.book-dialog[open] .spread { animation: grow .28s ease-out; }
.spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; border-radius: 6px; overflow: hidden;
  background: #FBF8F2; box-shadow: 0 40px 70px -24px rgba(0,0,0,.75); transition: opacity .18s ease, transform .18s ease; }
.book-dialog.turning .spread { opacity: .15; transform: perspective(1200px) rotateY(-6deg); }
.page { position: relative; padding: 34px 30px; color: #2A2622; font: 15px/1.6 Georgia, "Times New Roman", serif; overflow: auto; }
.page.left { background: linear-gradient(90deg, #F7F3EB 85%, #E6DFD2); }
.page.right { background: linear-gradient(90deg, #E9E2D5, #FBF8F2 12%); }
.page h3 { font: 700 24px/1.2 "Playfair Display", Georgia, serif; margin: 2px 0 4px; color: #1B1A18; }
.page .kicker { font: 600 10px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #9A6B2F; margin: 0 0 12px; }
.page .by { margin: 0 0 10px; font-style: italic; color: #5E574D; }
.page .level { display: inline-block; margin: 0 0 14px; padding: 3px 10px; border-radius: 999px; background: #EFE7D8;
  font: 600 12px/1.4 var(--sans); color: #6B4E22; }
.page ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.page blockquote { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid #C9A45C; background: #F3ECDF; font-style: italic; }
.page cite { display: block; margin-top: 6px; font: 600 12px/1 var(--sans); font-style: normal; color: #6B6F76; }
.big-cover { display: block; max-width: 100%; max-height: 370px; margin: 0 auto; box-shadow: 0 14px 24px -12px rgba(0,0,0,.6); }
.big-title { font: 700 26px/1.2 "Playfair Display", Georgia, serif; text-align: center; margin-top: 120px; }
.ol-link { color: #9A6B2F; font-family: var(--sans); font-weight: 700; }
.page .btn { margin-top: 10px; background: #16213F; color: #fff; box-shadow: none; }
.turn { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px; color: #FBF8F2; font: 600 13px/1 var(--sans); }
.turn button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #1B1A18; font-size: 22px; cursor: pointer; }
.turn button:disabled { opacity: .35; cursor: default; }
.book-dialog .close { position: absolute; right: -6px; top: -40px; border: 0; background: none; color: #FBF8F2; font-size: 28px; cursor: pointer; }
.fo { cursor: pointer; }
.fo:focus-visible { outline: 2px solid #F3EFE8; outline-offset: 4px; }
@media (max-width: 640px) {
  .spread { grid-template-columns: 1fr; min-height: 0; max-height: calc(100vh - 140px); overflow: auto; }
  .page { padding: 22px 20px; } .big-cover { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .spread, .book-dialog[open] .spread { transition: none; animation: none; } }

/* sign-in page: nothing above the shelves */
.page-library .topbar { display: none; }
.page-library .wrap { padding-block: 0 24px; }
.page-library .wall { padding-top: 0; }
body.page-library { padding-block: 0 24px; }

/* phones: the two display panels stack so three covers fit on each shelf */
@media (max-width: 560px) {
  .panels { grid-template-columns: 1fr; gap: 14px; }
  .fo .book { width: 84px; height: 124px; } .fo.lg .book { width: 88px; height: 130px; } .fo.sm .book { width: 80px; height: 118px; }
  .ledge-books { min-height: 134px; }
  .ledge-label { font-size: 9px; }
}

/* ---------- sign-in page: a walnut bookcase, books standing spine-out ---------- */
.bookcase { --wood: #5E3C23; --wood-dk: #3F2716; --back: #2A1C12;
  max-width: 900px; margin: 0 auto; padding: 22px 18px 26px; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px, rgba(255,255,255,.03) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #6A4428, var(--wood) 30%, var(--wood-dk));
  box-shadow: 0 30px 50px -28px rgba(40,25,10,.7), inset 0 2px 0 rgba(255,255,255,.12);
  position: relative; }
.bookcase::before { /* crown moulding */
  content: ""; position: absolute; left: -8px; right: -8px; top: -14px; height: 16px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7A5033, #4E311C); box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.bays { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bay { display: flex; flex-direction: column; background: var(--back); border-radius: 2px;
  box-shadow: inset 0 0 26px rgba(0,0,0,.65); }
.shelf { position: relative; padding: 18px 12px 0; }
.shelf::before { /* shadow cast by the board above */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; background: linear-gradient(rgba(0,0,0,.55), transparent); pointer-events: none; }
.row { list-style: none; margin: 0; padding: 0 4px; display: flex; align-items: flex-end; gap: 2px; min-height: 186px; min-width: 0; }
.board { position: relative; height: 16px; margin: 0 -12px; display: flex; justify-content: center;
  background: linear-gradient(180deg, #8A5C3A 0 3px, #6B4428 3px, #4F321D); box-shadow: 0 6px 10px -4px rgba(0,0,0,.7); }
.plate { position: relative; top: 2px; height: 12px; padding: 0 10px; border-radius: 2px;
  background: linear-gradient(180deg, #E4C47C, #B08A45); color: #3A2A12; box-shadow: 0 1px 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  font: 700 7.5px/12px "Cinzel", Georgia, serif; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; }

.bk { position: relative; flex: 0 0 auto; cursor: pointer; transition: transform .2s ease; }
.bk:hover, .bk:focus-visible { transform: translateY(-8px); }
.bk:focus-visible { outline: 2px solid #E4C47C; outline-offset: 2px; }
.faceout { margin-right: 6px; }
.faceout img { display: block; width: 100px; height: 150px; object-fit: cover; border-radius: 1px 3px 3px 1px;
  box-shadow: 0 10px 14px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.2); }
.spine { width: var(--w); height: var(--h); background: var(--c); color: var(--ink); border-radius: 2px 2px 1px 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0 10px; box-sizing: border-box; overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.10) 18%, rgba(255,255,255,.04) 45%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.4)),
    linear-gradient(180deg, transparent 7px, rgba(212,175,95,.75) 7px 8px, transparent 8px 10px, rgba(212,175,95,.75) 10px 11px, transparent 11px),
    linear-gradient(0deg, transparent 5px, rgba(212,175,95,.6) 5px 6px, transparent 6px);
  box-shadow: 2px 0 3px rgba(0,0,0,.45); }
.spine .t { writing-mode: vertical-rl; font: 600 11px/1.1 "Playfair Display", Georgia, serif; letter-spacing: .3px;
  max-height: calc(var(--h) - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spine .a { writing-mode: vertical-rl; font: 600 7.5px/1 "Josefin Sans", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }

@media (max-width: 700px) {
  .bookcase { padding: 16px 10px 20px; }
  .bays { grid-template-columns: 1fr; gap: 0; }
  .bay + .bay .shelf:first-child { padding-top: 22px; }
  .row { min-height: 160px; }
  .faceout img { width: 84px; height: 126px; }
  .spine { width: calc(var(--w) - 4px); height: calc(var(--h) - 22px); }
  .spine .t { font-size: 10px; max-height: calc(var(--h) - 76px); }
}
@media (prefers-reduced-motion: reduce) { .bk { transition: none; } }
/* spine titles wrap onto a second line instead of being cut off */
.spine .t { white-space: normal; text-overflow: clip; font-size: 10.5px; line-height: 1.15; text-align: center; }
.bookcase { margin-top: 18px; }

/* black bookcase, same black wood grain and thick ledges as the original display shelves */
.bookcase { margin-top: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.bookcase::before { content: none; }
.bays { gap: 18px; }
.bay { padding: 26px 12px 20px; border-radius: 2px; box-shadow: none;
  background-color: #1B1A18;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px, rgba(0,0,0,.18) 3px 4px, transparent 4px 9px),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 12%, transparent 88%, rgba(0,0,0,.35)); }
.shelf { padding: 0; }
.shelf + .shelf { margin-top: 26px; }
.shelf::before { content: none; }
.row { padding: 0 6px; }
.board { height: 30px; margin: 12px -10px 0; display: block;
  background: linear-gradient(#232220, #161514 40%, #0F0F0E);
  border-top: 1px solid #34322E; box-shadow: 0 12px 14px -8px rgba(0,0,0,.75); }
.board::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: linear-gradient(#141312, #262422); border-top: 1px solid #3B3935; }
.plate { position: absolute; left: 14px; top: 9px; height: auto; padding: 0; background: none; box-shadow: none;
  font: 600 9.5px/12px var(--sans); letter-spacing: 2.2px; color: rgba(255,255,255,.55); }
.bk:focus-visible { outline-color: #F3EFE8; }
@media (max-width: 700px) {
  .bays { gap: 14px; }
  .bay { padding: 20px 8px 16px; }
  .shelf + .shelf { margin-top: 22px; }
  .bay + .bay .shelf:first-child { padding-top: 0; }
}
/* exactly the original display shelves: same panels, shadows, width and floor strip — only the books change */
.bookcase { max-width: 860px; padding: 26px 22px 0; }
.bookcase::after { content: ""; display: block; height: 18px; margin: 0 -22px; border-radius: 0 0 4px 4px;
  background: linear-gradient(#C9A77E, #B08D63); }
.bay { background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px, rgba(0,0,0,.18) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(255,255,255,.025) 37px 39px, transparent 39px 61px),
    linear-gradient(90deg, #171614, #1F1E1B 50%, #171614);
  box-shadow: 0 30px 40px -24px rgba(40, 30, 20, .55), 6px 0 18px -10px rgba(40,30,20,.35);
  gap: 0; }
.shelf + .shelf { margin-top: 34px; }
@media (max-width: 820px) { .bookcase { padding: 14px 10px 0; } .bookcase::after { margin: 0 -10px; height: 12px; } }
.spine { padding: 10px 2px 8px; }
.spine .t { font-size: 10px; line-height: 1.12; max-height: calc(var(--h) - 46px); }
@media (max-width: 700px) { .spine { width: calc(var(--w) - 2px); } .spine .t { font-size: 9.5px; max-height: calc(var(--h) - 62px); } }

/* always two bookcases side by side with wall showing between them; on small screens the pair is scaled down as a whole */
.bays { grid-template-columns: 1fr 1fr; gap: 40px; width: 816px; max-width: none; zoom: var(--z, 1); }
@media (max-width: 820px) {
  .bookcase { padding: 14px 0 0; }
  .bookcase::after { margin: 0; }
  .bays { grid-template-columns: 1fr 1fr; gap: 40px; }
  .bay { padding: 26px 12px 20px; }
  .shelf + .shelf { margin-top: 34px; }
  .bay + .bay .shelf:first-child { padding-top: 0; }
  .row { min-height: 186px; }
  .faceout img { width: 100px; height: 150px; }
  .spine { width: var(--w); height: var(--h); }
  .spine .t { font-size: 10px; max-height: calc(var(--h) - 46px); }
}
.bookcase { box-sizing: border-box; width: 100%; min-width: 0; overflow: hidden; }

/* ---------- a line above the shelves: what these books are ---------- */
.lib-intro { max-width: 860px; margin: 0 auto; padding: 30px 22px 6px; box-sizing: border-box; }
.lib-eyebrow { margin: 0 0 8px; font: 600 11px/1 var(--sans); letter-spacing: 2.6px; text-transform: uppercase; color: #9A6B2F; }
.lib-intro h1 { margin: 0 0 8px; font: 700 clamp(22px, 3.4vw, 32px)/1.15 "Playfair Display", Georgia, serif; color: #1B1A18; text-wrap: balance; }
.lib-sub { margin: 0; max-width: 62ch; font: 15px/1.55 Georgia, "Times New Roman", serif; color: #5E574D; }
.lib-hint { display: inline-block; margin-top: 6px; padding: 3px 0; color: #1B1A18; font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(232,102,26,.22) 62%); }
@media (max-width: 700px) { .lib-intro { padding: 22px 0 4px; } .lib-sub { font-size: 14px; } }

/* ---------- the open book ---------- */
.book-dialog { width: min(940px, calc(100vw - 24px)); }
.spread { height: min(600px, calc(100dvh - 130px)); min-height: 0; }
.page { overflow: hidden; padding: 34px 34px 38px; }
.page .flow { font-family: Georgia, "Times New Roman", serif; line-height: 1.55; color: #2A2622; }
.page .flow p { margin: 0 0 .7em; }
.page .flow .kicker { font-size: .66em; margin: 0 0 .7em; }
.page .flow h2.book-title { font: 700 1.75em/1.15 "Playfair Display", Georgia, serif; margin: 0 0 .25em; color: #1B1A18; }
.page .flow h3 { font-size: 1.4em; margin: 0 0 .5em; }
.page .flow .by { font-size: .95em; margin-bottom: .5em; }
.page .flow .level { font-size: .75em; margin-bottom: 1.1em; }
.page .flow .by + .kicker, .page .flow .level + .kicker { margin-top: .4em; padding-top: .9em; border-top: 1px solid #E3D9C6; }
.page .flow dl { margin: 0; }
.page .flow dt { font-weight: 700; color: #1B1A18; margin-top: .55em; }
.page .flow dd { margin: .15em 0 0; }
.page .flow blockquote { font-size: .95em; margin: .8em 0 0; }
.page .folio { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--sans); color: #A89B85; letter-spacing: 1px; }
.page.cover-leaf { display: flex; align-items: center; justify-content: center; }
.page.cover-leaf .big-cover { max-height: calc(100% - 20px); max-width: 88%; }
.shelf-list { list-style: none; padding: 0; margin: .4em 0 0; display: flex; flex-direction: column; gap: .8em; }
.shelf-list button { display: block; border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font: 700 1.1em/1.3 "Playfair Display", Georgia, serif; color: #1B1A18; text-decoration: underline; text-decoration-color: #C9A45C; text-underline-offset: 3px; }
.shelf-list span { font-size: .85em; color: #6B6357; }

/* read-aloud: the sentence being read is tinted, the word being spoken is marked like a highlighter */
.page .speaking { background: rgba(201,164,92,.10); border-radius: 3px; }
.page .w { border-radius: 3px; transition: background-color .08s linear; }
.page .w.on { background: #F5CF7A; box-shadow: 0 0 0 2px #F5CF7A; color: #1B1A18; }
.turn .listen { width: auto; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--sans); background: #E8661A; color: #fff; margin-left: 8px; }
.turn .listen .ico { width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.turn .listen[aria-pressed="true"] { background: #FBF8F2; color: #1B1A18; }
.turn .listen[aria-pressed="true"] .ico { width: 10px; height: 12px; border: 0; border-left: 3px solid #1B1A18; border-right: 3px solid #1B1A18; box-sizing: border-box; }
@media (max-width: 700px) {
  .spread { grid-template-columns: 1fr; height: calc(100dvh - 120px); max-height: none; overflow: hidden; }
  .page.right { display: none; }
  .page { padding: 24px 22px 34px; }
  .page.left { background: #FBF8F2; }
}
.bookcase .row { flex-wrap: nowrap; justify-content: flex-start; }

/* ---------- one thin animated line above the shelves ---------- */
.lib-strip { max-width: 860px; margin: 0 auto; padding: 14px 22px 10px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; height: 44px; overflow: hidden; }
.strip-mark { flex: 0 0 auto; width: 22px; height: 2px; background: #E8661A; border-radius: 2px; }
.strip-msg { font: 600 12px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #6B5A42; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.strip-msg .sw { display: inline-block; opacity: 0; transform: translateY(9px); filter: blur(3px);
  animation: word-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
.strip-msg.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease; }
@media (max-width: 700px) { .lib-strip { padding: 10px 0 6px; height: 36px; } .strip-msg { font-size: 10px; letter-spacing: 1.4px; } }
@media (prefers-reduced-motion: reduce) { .strip-msg .sw { animation: none; opacity: 1; transform: none; filter: none; } }
/* shelves packed edge to edge: spines grow a little to take up any gap */
.bookcase .spine { flex: 1 0 var(--w); width: auto; max-width: 64px; }
.bookcase .row { padding: 0 2px; }
/* shelves sit just under the thin line */
.bookcase { margin-top: 0; padding-top: 4px; }
.lib-strip { padding-bottom: 4px; height: 38px; }
@media (max-width: 820px) { .bookcase { padding-top: 4px; } }
.turn .speed { width: auto; min-width: 52px; height: 40px; padding: 0 12px; border-radius: 999px; font: 700 13px/1 var(--sans);
  background: rgba(255,255,255,.92); color: #1B1A18; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .turn { gap: 8px; flex-wrap: nowrap; }
  .turn button { width: 36px; height: 36px; font-size: 20px; }
  .turn .listen { height: 36px; margin-left: 4px; padding: 0 12px 0 10px; }
  .turn .speed { height: 36px; min-width: 48px; padding: 0 8px; font-size: 12px; }
}
/* reading speed: pick one from a list */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.turn .speed { display: inline-flex; width: auto; min-width: 0; height: auto; padding: 0; background: none; }
.turn .speed select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 30px 0 14px; border: 0; border-radius: 999px;
  font: 700 13px/1 var(--sans); color: #1B1A18; cursor: pointer; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231B1A18'/%3E%3C/svg%3E") no-repeat right 12px center; }
.turn .speed select:focus-visible { outline: 2px solid #E8661A; outline-offset: 2px; }
@media (max-width: 700px) { .turn .speed select { height: 36px; padding: 0 24px 0 10px; font-size: 12px; background-position: right 9px center; } }

/* reading speed: a panel with the current speed, a slider and quick picks */
.turn .speed-btn { width: auto; min-width: 64px; padding: 0 14px; border-radius: 999px; font: 700 13px/1 var(--sans);
  font-variant-numeric: tabular-nums; }
.speed-panel { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 16px 16px 12px; border-radius: 18px; background: rgba(28,28,30,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); color: #fff; font-family: var(--sans); z-index: 3; }
.speed-panel[hidden] { display: none; }
.sp-now { margin: 0 0 12px; text-align: center; font: 700 22px/1 var(--sans); font-variant-numeric: tabular-nums; }
.sp-row { display: flex; align-items: center; gap: 12px; }
.sp-step { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff;
  font: 700 22px/1 var(--sans); cursor: pointer; }
.sp-row input[type=range] { flex: 1; min-width: 0; height: 6px; appearance: none; -webkit-appearance: none; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, #fff var(--fill, 20%), rgba(255,255,255,.35) var(--fill, 20%)); }
.sp-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.sp-row input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; }
.sp-chips { display: flex; gap: 8px; margin-top: 14px; }
.sp-chips button { flex: 1; height: 38px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff;
  font: 700 14px/1 var(--sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.sp-chips button.on { background: #E8661A; }
.sp-note { margin: 8px 0 0 4px; font: 600 12px/1 var(--sans); color: rgba(255,255,255,.65); }
.sp-step:focus-visible, .sp-chips button:focus-visible, .sp-row input:focus-visible { outline: 2px solid #E8661A; outline-offset: 2px; }
.book-dialog { position: relative; }
.page.cover-leaf .big-cover { width: min(80%, 340px); height: auto; max-height: calc(100% - 20px); object-fit: contain; }
/* smaller speed panel */
.speed-panel { width: min(250px, calc(100vw - 32px)); padding: 10px 12px 8px; border-radius: 14px; bottom: 56px; }
.sp-now { font-size: 15px; margin-bottom: 8px; }
.sp-row { gap: 8px; }
.sp-step { width: 28px; height: 28px; font-size: 16px; }
.sp-row input[type=range] { height: 4px; padding: 0; margin: 0; border: 0; box-shadow: none; outline-offset: 4px; }
.sp-row input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; }
.sp-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; }
.sp-chips { gap: 5px; margin-top: 10px; }
.sp-chips button { height: 26px; font-size: 11.5px; }
.sp-note { font-size: 10.5px; margin-top: 6px; }
/* last page: why each book is on the shelf */
.page .flow .first-why { font-size: .92em; padding: .6em .8em; background: rgba(201,164,92,.14); border-left: 3px solid #C9A45C; border-radius: 3px; }
.shelf-list { gap: .7em; }
.shelf-list li { display: flex; flex-direction: column; gap: .1em; }
.shelf-list li strong { font: 700 1.05em/1.3 "Playfair Display", Georgia, serif; color: #9A6B2F; }
.shelf-list button { font-size: 1.05em; }
.shelf-list em { font-style: normal; font-size: .9em; line-height: 1.4; color: #3A342C; }

/* ---------- compact sign-in box: sign in, create account, reset password ---------- */
.signin-dialog { width: min(320px, calc(100vw - 32px)); padding: 26px 22px 18px; }
.signin-dialog h2 { font-size: 21px; }
.signin-dialog .sub { margin: 0 0 12px; font-size: 12.5px; }
.signin-dialog .pane[hidden] { display: none; }
.signin-dialog .stack { gap: 9px; }
.signin-dialog label { font-size: 12.5px; }
.signin-dialog input:not([type=checkbox]):not([type=radio]) { height: 38px; padding: 0 11px; font-size: 14px; border-radius: 8px; }
.signin-dialog .btn { height: 40px; margin-top: 2px; }
.signin-dialog .row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.signin-dialog .check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; color: #3F4450; }
.signin-dialog .check input { width: 15px; height: 15px; margin: 0; accent-color: #E8661A; }
.signin-dialog .linkish { border: 0; background: none; padding: 0; font: 600 12.5px/1.2 var(--sans); color: #16213F; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(232,102,26,.6); text-underline-offset: 3px; }
.signin-dialog .linkish:hover { color: #E8661A; }
.signin-dialog .switch { margin: 12px 0 0; text-align: center; font-size: 12.5px; }
.signin-dialog .note { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: #16213F; background: #EEF1F7; }
.signin-dialog .note.error { background: #FCEBE3; color: #7A2E0B; }
.signin-dialog .roles { display: flex; gap: 6px; border: 0; padding: 0; margin: 0 0 2px; }
.signin-dialog .roles legend { font-size: 12.5px; color: #6B6F76; margin-bottom: 5px; padding: 0; }
.signin-dialog .roles label { flex: 1; }
.signin-dialog .roles input { position: absolute; opacity: 0; pointer-events: none; }
.signin-dialog .roles span { display: block; text-align: center; padding: 7px 0; border: 1px solid #C9CBCF; border-radius: 999px;
  font: 600 12.5px/1 var(--sans); color: #16213F; background: #fff; cursor: pointer; }
.signin-dialog .roles input:checked + span { background: #16213F; border-color: #16213F; color: #fff; }
.signin-dialog .roles input:focus-visible + span { outline: 2px solid #E8661A; outline-offset: 1px; }
.signin-dialog .stack .check { flex-direction: row; align-items: center; gap: 6px; }
.signin-dialog .stack .roles label { display: block; }
.signin-dialog { overflow-x: hidden; }
.signin-dialog .roles label { position: relative; }
/* phone sign-in */
.signin-dialog .phone-row { display: flex; gap: 6px; }
.signin-dialog .phone-row select { flex: 0 0 auto; width: 104px; height: 38px; padding: 0 6px; border: 1px solid #C9CBCF; border-radius: 8px;
  background: #fff; color: #16213F; font: 600 13px/1 var(--sans); }
.signin-dialog .phone-row input { flex: 1; min-width: 0; }
.signin-dialog .code-input { text-align: center; letter-spacing: 8px; font: 700 22px/1 var(--sans) !important; height: 48px !important; }
.signin-dialog .fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: #6B6F76; }
.signin-dialog .btn.secondary { background: #fff; color: #16213F; border: 1px solid #C9CBCF; }
.signin-dialog .btn.secondary:hover { background: #F4F5F7; }
.signin-dialog .btn:disabled { opacity: .6; cursor: default; }
/* Email | Mobile tabs at the top of the sign-in box */
.signin-dialog .tabs { display: flex; gap: 4px; padding: 3px; margin: 2px 32px 14px 0; background: #E9EAEC; border-radius: 999px; }
.signin-dialog .tab { flex: 1; height: 30px; border: 0; border-radius: 999px; background: transparent; color: #4A5060;
  font: 700 13px/1 var(--sans); cursor: pointer; }
.signin-dialog .tab[aria-selected="true"] { background: #fff; color: #16213F; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.signin-dialog .tab:focus-visible { outline: 2px solid #E8661A; outline-offset: 1px; }
.signin-dialog .tab:disabled { opacity: .45; cursor: not-allowed; }     /* Mobile, until text messages are set up */
.signin-dialog .tab-note { margin: -8px 0 10px; }
.signin-dialog .child { display: flex; flex-direction: column; gap: 9px; }
.signin-dialog .child[hidden] { display: none; }
.signin-dialog label[hidden] { display: none; }   /* the school field, the referral code: only when asked for */
.signin-dialog .child #add-child { align-self: flex-start; }
.signin-dialog .child-row { display: flex; flex-direction: column; gap: 9px; }
.signin-dialog .tz-have { margin: 0; font-size: 14px; }
.signin-dialog .tz-have[hidden] { display: none; }
.signin-dialog .roles { gap: 4px; }
.signin-dialog .switch.office { margin-top: 8px; }
.signin-dialog .switch.office .linkish { font-weight: 600; font-size: 11.5px; color: #6B6F76; text-decoration-color: #C9CBCF; }

/* Helen 2026-10-03: the sea behind a pale pane, like the content column after sign-in — her ocean photo, softly blurred
   under a light veil (not the dark veil of the signed-in sides). Only the page background: the bookcase and
   the sign-in box are unchanged. A fixed layer (not background-attachment) so iPhones keep it still too. */
body.page-library { background: #E8ECEE; }
body.page-library::before { content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background-color: #E8ECEE;
  background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url("img/ocean-wide.jpg");
  background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)),
    image-set(url("img/ocean-wide.webp") type("image/webp"), url("img/ocean-wide.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 900px) {
  body.page-library::before {
    background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url("img/ocean-900.jpg");
    background-image: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)),
      image-set(url("img/ocean-900.webp") type("image/webp"), url("img/ocean-900.jpg") type("image/jpeg")); }
}
/* the "Open any book" line sits straight on that pane: a deeper brown keeps it ≥ 4.5:1 on the darkest veiled water
   (#6B5A42 would be 3.1:1 there; #4A3C2A is 5.0:1, 9:1 on the lightest) */
body.page-library .strip-msg { color: #4A3C2A; }

/* Helen 2026-10-04 (iPhone Safari cut the right bookcase off): side by side, the bookcases are one picture scaled with a
   transform (login.html sets --z and --bays-h), not `zoom` — Safari does not shrink the text inside a zoomed box, so the
   spines grew and pushed the second bookcase off the screen. The columns never grow with their books, and iOS does not
   inflate the text. The negative margin takes back the height the transform leaves empty. */
body.page-library { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
.bays { zoom: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: scale(var(--z, 1)); transform-origin: 0 0;
  margin-bottom: calc((var(--z, 1) - 1) * var(--bays-h, 0px)); }
@media (max-width: 820px) { .bays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bay, .bookcase .row { min-width: 0; }
.bookcase .spine { min-width: 0; }
/* a phone (Helen): the two bookcases one above the other, each the full width, text at its normal size, nothing scaled
   — the spines give a little instead. */
@media (max-width: 759px) {
  .bays { width: min(100%, 460px); grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 0 auto; transform: none; }
  .bookcase .spine { flex: 1 1 var(--w); }
}

/* Helen 2026-10-04: the sign-in box with the same clear, airy feel as the page — a light veil instead of the dark grey
   backdrop (the bookcases and the sea stay bright behind it), and a frosted white card: a little see-through, blurred
   behind, a thin light border and a soft shadow so it stands out from the light veil. Fields and buttons unchanged.
   The card is .92 white: even over the black bookcase under the veil it stays ≥ #F7F7F7, so the grey labels and helper
   lines (#6B6F76) keep ≥ 4.5:1. The open book's backdrop is the same veil; its × and page number turn dark. */
.signin-dialog::backdrop, .book-dialog::backdrop { background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.signin-dialog { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(22, 33, 63, .07), 0 24px 60px -18px rgba(22, 33, 63, .38), 0 2px 10px rgba(22, 33, 63, .10);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
.book-dialog .close, .turn { color: #1B1A18; }
.turn button { background: #FFFFFF; box-shadow: 0 2px 10px rgba(22, 33, 63, .22); }
/* a phone: the card as wide as the screen allows, near the top so the keyboard and its toolbar cover less of it, and
   16px in the fields — under 16px iPhone Safari zooms the page in when a field is tapped, which made the card wider
   than the screen */
@media (max-width: 759px) {
  .signin-dialog { width: min(400px, calc(100vw - 24px)); margin-top: max(12px, env(safe-area-inset-top, 0px)); }
  .signin-dialog input:not([type=checkbox]):not([type=radio]), .signin-dialog .phone-row select { font-size: 16px; }
}

/* Helen 2026-10-04, the open book on an iPhone.
   Centred on every browser: `position: relative` (set above so the speed panel can anchor to it) replaced the browser's
   own centring of a modal dialog in Safari — the book sat at the left edge and ran off the right. Fixed + margin auto
   centres it and still anchors the panel.
   The × : opening the book focused it, and the focus ring looked like something had gone wrong. Focus now goes to the
   book itself (login.html); the × is never framed for touch or the mouse — not on opening, not while the book is read
   aloud (Helen) — only for keyboard users (:focus-visible). */
.book-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-width: calc(100vw - 24px); }
.book-dialog:focus { outline: none; }
.book-dialog .close { outline: none; border-radius: 8px; }
.book-dialog .close:focus-visible { outline: 2px solid #E8661A; outline-offset: 2px; }
@media (max-width: 700px) {          /* a phone: the book as wide as the screen allows, the × inside the page's corner */
  .book-dialog { width: calc(100vw - 24px); }
  .book-dialog .close { right: 8px; top: 8px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%;
    font-size: 24px; line-height: 36px; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
}

/* "Continue with Google" (Google's branding: the standard G, a white button, their wording) under an "or" line */
.signin-dialog .or { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; color: #6B6F76; font: 600 11.5px/1 var(--sans); }
.signin-dialog .or::before, .signin-dialog .or::after { content: ""; flex: 1; height: 1px; background: rgba(22, 33, 63, .18); }
.signin-dialog .or[hidden], .signin-dialog .gsi-btn[hidden] { display: none; }
.signin-dialog .gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px;
  box-sizing: border-box; padding: 0 12px; background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; border-radius: 22px;
  font: 500 14px/1 Roboto, var(--sans); text-decoration: none; cursor: pointer; }
.signin-dialog .gsi-btn:hover { background: #F8FAFD; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }
.signin-dialog .gsi-btn:focus-visible { outline: 2px solid #0B57D0; outline-offset: 2px; }
.signin-dialog .gsi-g { flex: none; }
.signin-dialog .gsi-note { text-align: center; margin: 8px 0 0; }

/* Sign-in said plainly on the first screen (a visitor: "the sign-in button is hidden in a very small place"). Helen: one
   row above the shelves — the "Open any book" line starts at the bookcase's left edge, and at its right edge sits a
   SIGN IN pill (bold spaced capitals, geometric letters; 48px high, 44px on a phone). The row is exactly as wide as the
   bookcases are drawn (login.html sets --case-z, their scale); on a phone the line wraps on the left and never runs
   under the button.
   Helen 2026-10-07: the pill and the box's two buttons take their colours from the dark green book right below the
   pill, "The Biggest Ideas in the Universe": its spine green #143434 and its cream lettering #F4EEDF
   (static/covers/covers_meta.json), and the gold #D4AF5F of the thin rules every spine carries (.spine, above).
   Cream on the green is 11.5:1, on the hover green #1E4A4A 8.5:1.
   Helen's second reference (2026-10-07) is for the SHAPE: a rounded rectangle (corners a quarter of the height) with
   a flat face in a 3px bevelled metal frame — a silver highlight at the top left shading to near-black at the bottom
   right — and bold capitals with a soft shadow. The colours stay the book's. The frame is a gradient border (the face
   is painted on the padding box, the bevel on the border box); a hairline of dark inside it keeps the face crisp.
   Pressed: the frame turns over and the letters sit 1px lower. Hover: the face a shade lighter. Keyboard focus: a
   green ring outside the frame, clear on the pale page. The gold rule of the first version is gone (it fought the frame). */
:root { --book-green: #143434; --book-green-hover: #1E4A4A; --book-cream: #F4EEDF; --book-gold: #D4AF5F;
  --bevel: linear-gradient(135deg, #F2F3F1 0%, #C9CCCA 22%, #7E8482 50%, #2B2F2E 78%, #0B0D0D 100%);
  --bevel-down: linear-gradient(135deg, #0B0D0D 0%, #2B2F2E 22%, #7E8482 50%, #C9CCCA 78%, #F2F3F1 100%); }
.lib-top { box-sizing: border-box; width: 100%; max-width: 860px; margin: 0 auto; padding: 12px 22px 8px; }
.lib-top-in { width: calc(816px * var(--case-z, 1)); max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lib-top .lib-strip { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding: 0; height: auto; min-height: 20px; justify-content: flex-start; }
.door-acts { flex: none; display: inline-flex; align-items: center; }
.door-signin { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 48px; padding: 3px 27px 0;
  border: 3px solid transparent; border-radius: 12px; --face: var(--book-green); color: var(--book-cream);
  background: linear-gradient(var(--face), var(--face)) padding-box, var(--bevel) border-box; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  font: 700 16px/1 "Josefin Sans", var(--sans); letter-spacing: 2.5px; text-indent: 2.5px; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32), 0 4px 12px rgba(20, 52, 52, .3); }
  /* Josefin's capitals sit high: 3px brings them to the middle (the padding is 3px less each side: the frame took it) */
.door-signin:hover { --face: var(--book-green-hover); }
.door-signin:active { background: linear-gradient(var(--face), var(--face)) padding-box, var(--bevel-down) border-box; padding-top: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32), 0 2px 5px rgba(20, 52, 52, .3); }
.door-signin:focus-visible { outline: 2px solid var(--book-green); outline-offset: 4px; }
@media (max-width: 820px) { .lib-top { padding-inline: 10px; } }
@media (max-width: 759px) {
  .lib-top { padding: 10px 10px 8px; }
  .lib-top-in { width: min(100%, 460px); margin: 0 auto; gap: 10px; }
  .lib-top .strip-msg { white-space: normal; overflow: visible; line-height: 1.5; }
  .lib-top .lib-strip { align-items: flex-start; } .lib-top .strip-mark { margin-top: 7px; }
  .door-signin { height: 44px; padding: 3px 19px 0; border-radius: 11px; font-size: 15px; letter-spacing: 2px; text-indent: 2px; }
  .door-signin:active { padding-top: 5px; }
}

/* The password pane of the sign-in box, after Helen's reference (2026-10-07, her second one): a near-black card
   (#0D0F12, not navy), very pale blue-white fields (#E8F0FE) with rounded corners and a slightly darker pale blue-grey
   icon tile, light Remember me / Forgot your password? (#E8F0FE on the card is 16:1), and two full-width buttons:
   Sign in in the card, Register under it — the book's green with its cream letters in the same bevelled frame as
   the button above the shelves (see there; 11.5:1), hover a shade lighter, pressed the frame turns over. A wrong password is answered
   in the pale note above the card (dark text on its own light ground), as before. Only this pane: the box itself
   turns clear so the card and the button below stand alone. The same form — only its dress. Fields are 16px (an
   iPhone does not zoom in). */
.signin-dialog[data-pane="email"] { width: min(360px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow-x: visible; }
.signin-dialog[data-pane="email"]::before { content: none; }
.signin-dialog[data-pane="email"] .close { color: #E8F0FE; top: 8px; right: 8px; z-index: 1; }
.signin-dialog[data-pane="email"] > .note { margin: 0 0 10px; padding-right: 34px; font-size: 14px; box-shadow: 0 6px 18px rgba(13, 15, 18, .25); }
.signin-dialog[data-pane="email"]:has(> .note) .close { color: #7A2E0B; }     /* the × then lies on the note */
.signin-dialog .login-card { background: #0D0F12; border-radius: 10px; padding: 30px 26px 24px; box-shadow: 0 24px 60px -18px rgba(13, 15, 18, .7); }
.signin-dialog .pane-login h2 { margin: 0 0 18px; text-align: center; color: #FFFFFF; font: 400 15px/1.3 var(--sans); letter-spacing: 3px;
  text-indent: 3px; text-transform: uppercase; }
.signin-dialog .pane-login .stack { gap: 14px; }
.signin-dialog .pane-login .icon-field { display: flex; flex-direction: row; gap: 0; align-items: stretch; height: 48px; border-radius: 8px;
  overflow: hidden; background: #E8F0FE; }
.signin-dialog .pane-login .icon-field:focus-within { outline: 2px solid #7FD8CE; outline-offset: 2px; }
.signin-dialog .pane-login .ico { flex: none; width: 48px; display: grid; place-items: center; background: #C5D3EA; color: #0D0F12; }
.signin-dialog .pane-login .icon-field input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0 12px; border: 0; border-radius: 0;
  background: #E8F0FE; color: #0D0F12; font: 400 16px/1.2 var(--sans); outline: none; }
.signin-dialog .pane-login .icon-field input::placeholder { color: #4A5568; opacity: 1; }
.signin-dialog .pane-login .login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.signin-dialog .pane-login .check { color: #E8F0FE; font-size: 13px; }
.signin-dialog .pane-login .check input { accent-color: var(--book-green); }
.signin-dialog .pane-login .login-row .linkish { color: #E8F0FE; font: italic 400 13px/1.2 var(--sans); text-decoration: underline;
  text-underline-offset: 3px; }
.signin-dialog .pane-login .login-row .linkish:hover { color: #7FD8CE; }
.signin-dialog .pane-login .login-btn, .signin-dialog .pane-login .reg-btn { display: block; width: 100%; height: 48px; margin: 0;
  border: 3px solid transparent; border-radius: 12px; --face: var(--book-green); color: var(--book-cream);
  background: linear-gradient(var(--face), var(--face)) padding-box, var(--bevel) border-box; padding: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32);
  font: 600 15px/1 var(--sans); letter-spacing: 4px; text-indent: 4px; text-transform: uppercase; }
.signin-dialog .pane-login .login-btn { margin-top: 4px; }
.signin-dialog .pane-login .login-btn:hover, .signin-dialog .pane-login .reg-btn:hover { --face: var(--book-green-hover); }
.signin-dialog .pane-login .login-btn:active, .signin-dialog .pane-login .reg-btn:active { padding-top: 2px;
  background: linear-gradient(var(--face), var(--face)) padding-box, var(--bevel-down) border-box; }
.signin-dialog .pane-login .login-btn:focus-visible, .signin-dialog .pane-login .reg-btn:focus-visible { outline: 2px solid #FFFFFF;
  outline-offset: 2px; box-shadow: 0 0 0 5px #0D0F12; }      /* white ring, then a dark one: seen on the card and on the pale page */
.signin-dialog .pane-login .reg-btn { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32), 0 10px 24px -8px rgba(13, 15, 18, .45); }
.signin-dialog .pane-login .switch { margin: 14px 0 0; }
.signin-dialog .pane-login .or { color: #C5D3EA; margin: 16px 0 12px; }
.signin-dialog .pane-login .or::before, .signin-dialog .pane-login .or::after { background: rgba(255, 255, 255, .25); }
.signin-dialog .pane-login .gsi-note { color: #C5D3EA; }
/* Helen 2026-10-07 ("too dark"): behind the sign-in box the page is only lightly veiled and barely blurred, so the
   bookcase stays visible (the open book keeps its own heavier veil above). */
.signin-dialog::backdrop { background: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
/* Variant B (Helen: the black card is "too dark"): the same pane on a white card with a soft shadow — the pale blue
   fields get a thin border so they still read as fields, the title, Remember me and Forgot your password? are dark
   (#0D0F12 on white 19:1), the two green buttons stay. */
.signin-dialog[data-pane="email"] .close { color: #4A5568; }
.signin-dialog .login-card { background: #FFFFFF; border: 1px solid #DCE3EE; box-shadow: 0 18px 44px -16px rgba(13, 15, 18, .28); }
.signin-dialog .pane-login h2 { color: #0D0F12; font-weight: 600; }
.signin-dialog .pane-login .icon-field { border: 1px solid #B4C3DC; }
.signin-dialog .pane-login .icon-field:focus-within { outline-color: var(--book-green); }
.signin-dialog .pane-login .check, .signin-dialog .pane-login .login-row .linkish { color: #0D0F12; }
.signin-dialog .pane-login .login-row .linkish:hover { color: var(--book-green-hover); }
.signin-dialog .pane-login .login-btn:focus-visible, .signin-dialog .pane-login .reg-btn:focus-visible { outline-color: var(--book-green); outline-offset: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32); }
.signin-dialog .pane-login .reg-btn { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(11, 13, 13, .32), 0 10px 24px -10px rgba(13, 15, 18, .3); }
.signin-dialog .pane-login .or, .signin-dialog .pane-login .gsi-note { color: #4A5568; }
.signin-dialog .pane-login .or::before, .signin-dialog .pane-login .or::after { background: rgba(13, 15, 18, .18); }