/* Nectale responsive layout
   Loaded after each page's legacy inline CSS so one fluid layout system can
   serve the full catalog without widening intentionally narrow legal/forms. */
:root {
  --gha-wide-max: 1360px;
  --gha-book-max: 1200px;
  --gha-workbook-max: 1160px;
  --gha-shell-max: 1440px;
  --gha-page-gutter: clamp(16px, 3vw, 48px);
}

/* Catalog and pricing pages: let the visual grids use modern desktop space. */
body.wide-page .wrap,
body.wide-page .crumb,
body.wide-page .nh-hero,
body.wide-page .ed-hero-in,
body.wide-page .feat-strip-in,
body.wide-page .lib-inner,
body.wide-page .cat-inner,
body.wide-page .hiw-in,
body.wide-page .why-diff-in,
body.wide-page .gw,
body.wide-page .ap-wrap {
  max-width: var(--gha-wide-max);
}

body.wide-page .bgrid {
  max-width: 1160px;
}

/* Book landing pages: wider framing plus two scannable Part columns. */
body.book-page .bhero-in,
body.book-page .wrap {
  width: 100%;
  max-width: var(--gha-book-max);
}

body.book-page .bhero .desc {
  max-width: 780px;
}

body.book-page .crumb {
  width: 100%;
  max-width: var(--gha-book-max);
  margin-inline: auto;
}

@media (min-width: 1100px) {
  body.book-page .chlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.book-page .chrow {
    height: 100%;
  }
}

/* Interactive workbooks: center a generous shell instead of stopping at 840px. */
body.workbook-page .shell {
  width: min(100%, var(--gha-shell-max));
  margin-inline: auto;
  grid-template-columns: 224px minmax(0, 1fr);
}

body.workbook-page main {
  width: 100%;
  max-width: var(--gha-workbook-max);
  margin-inline: auto;
  padding: 32px var(--gha-page-gutter) 80px;
  justify-self: center;
}

/* A portrait tablet is more comfortable without the sidebar; the full section
   navigation remains available through the existing top/mobile controls. */
@media (max-width: 900px) {
  body.workbook-page .shell {
    display: block;
    width: 100%;
  }

  body.workbook-page aside {
    display: none;
  }

  body.workbook-page main {
    max-width: none;
    padding: 24px 24px 64px;
  }

  body.workbook-page .vgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.workbook-page main {
    padding: 18px 16px 56px;
  }

  body.workbook-page .vgrid {
    grid-template-columns: 1fr;
  }

  body.workbook-page .tf {
    flex-direction: column;
  }
}


/* ── Book search in the top nav (owner 2027-09-05) ─────────────────────────
   A magnifying glass sits left of Subscription on every page and jumps to the
   library's search box. Selectors are .nav-r a.nav-search so they outrank each
   page's own inline `.nav-r a` rules regardless of stylesheet order. */
.nav-r a.nav-search{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:32px;height:32px;padding:0;border:1.5px solid rgba(46,68,89,.25);border-radius:999px;
  font-size:14px;line-height:1;color:#2E4964;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;}
.nav-r a.nav-search:hover{background:#FFF3D6;border-color:#C9A227;transform:translateY(-1px);}
.nav-search-t{display:none;}
/* the nav collapses to a stacked menu at 600px, where an icon alone reads as a
   stray dot — give it the same row treatment as the other links, with a label */
@media(max-width:600px){
  .nav-r a.nav-search{width:auto;height:auto;justify-content:flex-start;padding:15px 24px;
    border:0;border-top:1px solid rgba(46,68,89,.1);border-radius:0;font-size:15px;font-weight:700;}
  .nav-r a.nav-search:hover{background:transparent;transform:none;}
  .nav-search-t{display:inline;}
}

/* Part cards on a phone (owner, 2026-09-19): the badge | text | Start row squeezed the
   text into a narrow middle column, one word or pill per line. On small screens the card
   becomes a grid — the PT badge and the title share the top line, the chapter names and
   the section pills use the full card width (pills wrap side by side), and Start sits on
   its own line at the bottom. `body .chrow` outranks each page's own `.chrow` rule. */
@media (max-width: 640px) {
  body .chrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    padding: 14px 16px;
  }
  body .chrow .chnum { width: 46px; height: 46px; grid-column: 1; grid-row: 1; }
  body .chrow .chinfo { display: contents; }
  body .chrow .chinfo > * { grid-column: 1 / -1; }
  body .chrow .chinfo > .chttl { grid-column: 2; grid-row: 1; margin: 0; }
  body .chrow .chfeat { gap: 6px; }
  body .chrow .chgo {
    grid-column: 1 / -1;
    justify-self: stretch;          /* one full-width Start bar on every book page */
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;        /* owner 2026-09-19: "Start →" centered in the bar */
    text-align: center;
    gap: 10px;
  }
}

/* Workbook top bar on a phone (2026-09-19): logo + Library / Report Card / Settings +
   "Book Home" never wrapped, so the bar pushed the whole page 110–150px wider than the
   screen and phones rendered every workbook zoomed out, the bar cut off at the right.
   The left group now scrolls sideways inside the bar; Score stays pinned on the right;
   the progress bar (also shown in the sidebar/section nav) gives up its room. */
@media (max-width: 640px) {
  body.workbook-page > nav { padding: 0 10px; gap: 8px; }
  body.workbook-page > nav .nav-l {
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.workbook-page > nav .nav-l::-webkit-scrollbar { display: none; }
  body.workbook-page > nav .nav-l > * { flex-shrink: 0; }
  body.workbook-page > nav .nav-home { margin-right: 0; }
  body.workbook-page > nav .nav-r { flex: 0 0 auto; gap: 8px; }
  body.workbook-page > nav .pbar-wrap { display: none; }
}

/* Site menu icons (owner 2026-10-16): every menu word gets an icon on its left; the Workbook PDFs
   link carries the red PDF mark everywhere (the 📄 emoji is retired); on a phone the Language row
   matches the other rows' type size and is a full-width tap target. */
.nav-r a[href*="pdf-store"]::before{content:"";display:inline-block;width:14px;height:17px;margin-right:6px;vertical-align:-3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 56'%3E%3Cpath d='M6 2h22l12 12v38a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='%23C62F2F'/%3E%3Cpath d='M28 2l12 12H30a2 2 0 0 1-2-2V2z' fill='%23B71C1C'/%3E%3Ctext x='22' y='42' font-family='Arial,sans-serif' font-size='13' font-weight='bold' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");background-position:center;background-size:contain;background-repeat:no-repeat;}
nav.nav-open .nav-r > a:not([hidden]), nav.nav-open .nav-r > [data-gha-lang]{display:flex !important;align-items:center;gap:14px;min-height:56px;font-size:16px !important;font-weight:700;}
nav.nav-open .nav-r > a::before{content:"";flex:0 0 24px;width:24px;height:24px;margin:0;vertical-align:0;background-position:center;background-size:contain;background-repeat:no-repeat;}
nav.nav-open .nav-r > a[href*="pdf-store"]::before{flex-basis:24px;width:24px;height:29px;}
nav.nav-open .nav-r .nav-search > span[aria-hidden="true"]{display:none;}
nav.nav-open .nav-r .nav-search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4964' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");}
nav.nav-open .nav-r a[href*="pricing"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4964' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L3 9.4l6.2-.9z' fill='%23FFDA70'/%3E%3C/svg%3E");}
nav.nav-open .nav-r a[href*="help"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4964' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='%2370CCFF' fill-opacity='.35'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.3-2.6 3.9'/%3E%3Ccircle cx='12' cy='17.4' r='.6' fill='%232E4964'/%3E%3C/svg%3E");}
nav.nav-open .nav-r a[href*="approach"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-4 3-7 8-7 0 4.5-3 7-8 7z' fill='%238ED08F'/%3E%3Cpath d='M12 15c0-3.3-2.4-5.6-6.5-5.6 0 3.7 2.4 5.6 6.5 5.6z' fill='%23C9E8C0'/%3E%3C/svg%3E");}
nav.nav-open .nav-r > [data-gha-lang]{padding:0 !important;border-top:1px solid rgba(46,68,89,.1);}
nav.nav-open .nav-r > [data-gha-lang] .ghalm{display:block;width:100%;}
nav.nav-open .nav-r > [data-gha-lang] .ghalm > button{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:15px 24px !important;
  font-size:16px !important;font-weight:700 !important;text-align:left;justify-content:flex-start;}
nav.nav-open .nav-r > [data-gha-lang] .ghalm > button .fl{font-size:22px !important;width:24px;text-align:center;}
nav.nav-open .nav-r > [data-gha-lang] .ghalm .pane{position:static;box-shadow:none;margin:0 24px 12px;min-width:0;}
/* My Workbook PDFs link (2026-10-16): signed-in only (hidden attribute), folder icon in the phone menu */
.nav-r a[hidden]{display:none !important;}
nav.nav-open .nav-r > a.nav-mypdf::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4964' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6.5l2 2.2H21V19H3z' fill='%23FFDA70'/%3E%3Crect x='9' y='11' width='6' height='7' rx='1' fill='%23C62F2F' stroke='none'/%3E%3C/svg%3E");}
/* Narrow phones (2026-10-16): logo + Library / Report Card / Settings + menu button overflowed ~430px
   screens, cutting off the menu button and widening the page. Tighten the bar so everything fits. */
@media (max-width: 480px){
  body:not(.workbook-page) > nav{padding-left:10px !important;padding-right:10px !important;gap:6px !important;}
  body:not(.workbook-page) > nav .nav-left{gap:6px !important;min-width:0;}
  body:not(.workbook-page) > nav .nav-l img{height:40px !important;padding:3px !important;}
  body:not(.workbook-page) > nav .nav-pill{padding:7px 10px !important;font-size:12.5px !important;}
  body:not(.workbook-page) > nav .nav-burger{flex-shrink:0;margin-left:auto;}
}
/* Owner's tab icons (2026-10-16): one image per top-right tab, desktop and phone menu alike.
   Files: assets/icons/nav/ (search, subscription-crown, pdf, help, approach-bulb, flag-us/kr/cn). */
.nav-r .nav-search > span[aria-hidden="true"]{display:none !important;}
.nav-r .nav-search::before{content:"";display:inline-block;width:20px;height:20px;background:url("/assets/icons/nav/search.png") center/contain no-repeat;}
.nav-r > a[href*="pricing"]::before,.nav-r > a[href*="pdf-store"]::before,.nav-r > a.nav-mypdf::before,
.nav-r > a[href*="help"]::before,.nav-r > a[href*="approach"]::before{
  content:"";display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-4px;
  background-position:center;background-size:contain;background-repeat:no-repeat;}
.nav-r > a[href*="pricing"]::before,nav.nav-open .nav-r > a[href*="pricing"]::before{background-image:url("/assets/icons/nav/subscription-crown.png");}
.nav-r > a[href*="pdf-store"]::before,nav.nav-open .nav-r > a[href*="pdf-store"]::before{background-image:url("/assets/icons/nav/pdf.png");}
.nav-r > a.nav-mypdf::before,nav.nav-open .nav-r > a.nav-mypdf::before{background-image:url("/assets/icons/nav/pdf.png");}
.nav-r > a[href*="help"]::before,nav.nav-open .nav-r > a[href*="help"]::before{background-image:url("/assets/icons/nav/help.png");}
.nav-r > a[href*="approach"]::before,nav.nav-open .nav-r > a[href*="approach"]::before{background-image:url("/assets/icons/nav/approach-bulb.png");}
nav.nav-open .nav-r .nav-search::before{background-image:url("/assets/icons/nav/search.png");}
nav.nav-open .nav-r > a[href*="pdf-store"]::before{height:24px;}
.ghalm .fl img.flimg,.ghalm .flimg{width:18px;height:18px;border-radius:50%;vertical-align:-4px;display:inline-block;}
nav.nav-open .nav-r > [data-gha-lang] .ghalm > button .flimg{width:24px;height:24px;}
.ghalm .pane .flimg{width:20px;height:20px;}
/* Book-page cover (owner 2026-10-16): the library card's glint border, plus easter egg #1 —
   the cover tilts toward the cursor with a glare that follows it (gha-tilt.js). */
.bhero-in{perspective:900px;}
.bhero-cover{position:relative;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;will-change:transform;
  outline:1px solid color-mix(in srgb,var(--bc,#C9A227) 70%,black 30%);outline-offset:-1px;}
.bhero-cover.tilting{transition:transform .08s linear,box-shadow .3s;box-shadow:0 26px 50px rgba(14,17,24,.32);}
.bhero-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 46%),
             linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) -160% 0/250% 100% no-repeat;
  mix-blend-mode:soft-light;opacity:.9;animation:bhero-glint 6s ease-in-out 1.2s infinite;}
@keyframes bhero-glint{0%,70%{background-position:0 0,-160% 0}85%,100%{background-position:0 0,160% 0}}
@media (prefers-reduced-motion:reduce){.bhero-cover{transform:none;transition:none}.bhero-cover::after{animation:none}}

/* Nectale logo on the dark workbook bar (owner 2026-10-16): no white box, cream-lettered wordmark sits on the bar */
body.workbook-page nav .nav-logo, nav .nav-logo{background:none !important;padding:0 !important;border-radius:0 !important;height:44px !important;width:auto !important}