/* ims_starter.css - INDEXMS start page (2026-10-29, rebuilt from the IMS home page). For a visitor who is not signed in
   (html.ims-st, set in the page head before it paints) the page shows the IMS home hero alone, exactly as on the home page
   (kicker, Lora title with the gold italic part, gold underline, paragraph, background): no header menu, no footer, no other
   home sections. The home buttons (DESIGN STUDIO / DASHBOARD / REFERENCE) give way to GUEST | SIGN IN | SIGN UP in the same
   button style (.ims-cta-st in home_tab), below the stat cards, with a short note under them; Share and Language sit at the
   top right (#ims_starter).
   GUEST or a sign-in removes html.ims-st (www/ims_starter.js), and the IMS page is as before. PC and tablet (760px and
   wider): one screen, no scroll; phones may scroll. The rules below apply only while html.ims-st is on, except the last block. */

/* ---- outside the start page: its own parts stay hidden ---- */
#ims_starter, .ims-cta-st, .ims-st-note { display: none; }

/* ---- the start page: the home hero alone ---- */
html.ims-st:not(.nxw-lg-in) .navbar,
html.ims-st:not(.nxw-lg-in) .ims-footer,
html.ims-st:not(.nxw-lg-in) #nxw_tools,
html.ims-st:not(.nxw-lg-in) #shiny-notification-panel,
html.ims-st:not(.nxw-lg-in) .tab-content > .tab-pane:not([data-value="home"]),
html.ims-st:not(.nxw-lg-in) .tab-pane[data-value="home"] > :not(.ims-hero2),
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-cta:not(.ims-cta-st) { display: none !important; }
html.ims-st:not(.nxw-lg-in) .tab-content > .tab-pane[data-value="home"] { display: block !important; opacity: 1 !important; }
html.ims-st:not(.nxw-lg-in) #ims_starter { display: block; }
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-cta-st { display: flex; }
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-st-note { display: block; }
/* nothing of the app is clickable from the start page: the links of the home paragraph are plain text here */
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-intro a { pointer-events: none; cursor: default; }
html.ims-st-wait .ims-cta-st, html.ims-st-wait .ims-st-note, html.ims-st-wait #ims_starter { visibility: hidden; }   /* a remembered sign-in is being checked */

/* the hero fills the screen (the home's own background, without the header above it) */
html.ims-st:not(.nxw-lg-in) body { overflow-x: hidden; }
html.ims-st:not(.nxw-lg-in) body > .container-fluid { border-top: 0 !important; }
html.ims-st:not(.nxw-lg-in) .tab-content, html.ims-st:not(.nxw-lg-in) .tab-pane[data-value="home"] { margin: 0 !important; padding: 0 !important; }
html.ims-st:not(.nxw-lg-in) .ims-hero2 { box-sizing: border-box; min-height: 100vh; min-height: 100svh; margin-top: 0; margin-bottom: 0; align-content: center; }

/* buttons: the home's own style (.btn-ims-red / -green / -blue, 1rem 2.4rem, 1rem, .12em), the same size as the home buttons */
.ims-cta-st .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.ims-cta-st .btn .fa, .ims-cta-st .btn svg { margin: 0; }
/* note: the home paragraph's text, smaller */
.ims-hero2 .ims-st-note { font-size: 1rem; color: #c9cfe8; margin: 1.4rem 0 0; }
html[data-theme="light"] .ims-hero2 .ims-st-note { color: #3b4570; }

/* order (2026-10-29, "Both login button at the end after figures"): kicker, title, underline, paragraph, the stat cards in one
   row (the figure bar), then GUEST | SIGN IN | SIGN UP and the note */
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-stats { margin-top: 2.4rem; }
html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-cta-st { margin-top: 2rem; }

/* PC and tablet: one screen, no scroll. On short screens (under 780px high: 1536x696, 1366x657) the stat cards stay, made
   compact (smaller padding and number, tighter spacing) so the cards, the buttons and the note all fit. */
@media (min-width: 760px) {
  html.ims-st:not(.nxw-lg-in), html.ims-st:not(.nxw-lg-in) body { overflow: hidden !important; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 { height: 100vh; height: 100svh; }
}
@media (min-width: 760px) and (max-height: 779.98px) {
  html.ims-st:not(.nxw-lg-in) .ims-hero2 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-eyebrow { margin-bottom: .7rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-rule { margin: 1rem 0 1.1rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-stats { margin-top: 1.3rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-stat { padding: 1rem 1.6rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-stat .num { font-size: 2.3rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-stat .lbl { font-size: 1rem; margin-top: .1rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-cta-st { margin-top: 1.4rem; }
  html.ims-st:not(.nxw-lg-in) .ims-hero2 .ims-st-note { margin-top: 1rem; }
}
/* phones: the home's own phone layout, the three buttons share the width */
@media (max-width: 759px) {
  html.ims-st:not(.nxw-lg-in) .ims-hero2 { padding-top: 4.6rem; }
  .ims-cta-st { gap: .7rem; }
  .ims-cta-st .btn { flex: 1 1 100%; }
}

/* ---- top right: Share and language (38x38, radius 8, 18px / 24px from the corner) ---- */
#ims_starter { position: fixed; top: 18px; right: 24px; z-index: 2990; font-family: Poppins, "Segoe UI", Arial, sans-serif; }
#ims_starter *, #ims_starter *::before, #ims_starter *::after { box-sizing: border-box; }
#ims_starter .st-tools { display: flex; align-items: center; gap: 8px; }
#ims_starter .st-tb { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; margin: 0; padding: 0;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; font: inherit; line-height: 1; box-shadow: none; }
#ims_starter .st-tb:hover, #ims_starter .st-lbox.open .st-tb { border-color: #e9b54a; color: #e9b54a; }
#ims_starter .st-tb svg { width: 17px; height: 17px; display: block; }
#ims_starter .st-lbox { position: relative; display: flex; }
#ims_starter .st-lbtn { width: auto; flex: 0 0 auto; min-width: 38px; padding: 0 10px; gap: 5px; font-size: 12.5px; }
#ims_starter .st-lbtn svg { width: 16px; height: 16px; }
#ims_starter .st-lcode { font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: #e9b54a; }
#ims_starter .st-lmenu { display: none; position: absolute; right: 0; top: calc(100% + 12px); min-width: 190px; z-index: 10; background: #121a4c; text-align: left;
  border: 1px solid rgba(241,205,120,.35); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
#ims_starter .st-lbox.open .st-lmenu { display: block; }
#ims_starter .st-lmenu .ims-opt { display: flex; width: 100%; align-items: center; gap: 12px; margin: 0; border: 0; background: transparent; color: #C9D6EC;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; box-shadow: none; }
#ims_starter .st-lmenu .ims-opt b { min-width: 34px; font-size: 12px; letter-spacing: .05em; color: #9DB0CC; }
#ims_starter .st-lmenu .ims-opt:hover { background: rgba(212,164,64,.14); color: #e9b54a; }
#ims_starter .st-lmenu .ims-opt.active, #ims_starter .st-lmenu .ims-opt.active b { color: #e9b54a; }
html[data-theme="light"] #ims_starter .st-tb { border-color: #c9d1e6; color: #1b2550; }
html[data-theme="light"] #ims_starter .st-tb:hover { border-color: #b7811d; color: #b7811d; }
html[data-theme="light"] #ims_starter .st-lcode { color: #b7811d; }
@media (max-width: 759px) {
  #ims_starter { top: 14px; right: 16px; }
  #ims_starter .st-tools { gap: 6px; }
  #ims_starter .st-tb { width: 36px; height: 36px; flex-basis: 36px; }
  #ims_starter .st-lbtn { width: auto; flex-basis: auto; padding: 0 9px; }
  #ims_starter .st-lbtn svg { display: none; }
}

/* ---- the sign-in box of IMS: the same box, without the NXW logo in its top-left brand area (the image keeps its place,
   so the box height and layout do not move; the app name stays) ---- */
#nxwLg .nxw-lg-brand img { visibility: hidden; }

/* ---- signed in: small My account / Members / Sign out buttons at the bottom right (as nxw_protect.R) ---- */
#nxw_tools { position: fixed; right: 12px; bottom: 12px; z-index: 2000; display: flex; gap: 6px; }
#nxw_tools .btn, #nxw_tools button { font: 600 12px/1 Montserrat, Poppins, sans-serif; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,26,60,.85); color: #fff; cursor: pointer; letter-spacing: normal; text-transform: none; }
/* Sign out as an icon only (2026-10-29, "Logout icon only"): a 34px square, as high as My account; its name in title and aria-label */
#nxw_tools .nxw-out { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
#nxw_tools .nxw-out svg { display: block; width: 15px; height: 15px; }
#nxw_members_box { position: fixed; inset: 5% 5% auto 5%; max-height: 85vh; overflow: auto; z-index: 2001; background: #0a1a3c; color: #fff;
  border-top: 3px solid #2f6fd8; border-radius: 14px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
