/* iobs_starter.css - INDOBS start page (2026-10-29, rebuilt from the observatory home page). For a visitor who has not chosen yet
   (html.iobs-st, set in the page head before it paints) the page shows the observatory home hero alone, exactly as on the home
   page (kicker, Lora title with "Observatory" in gold italic, gold underline, paragraph, stat cards, background): no header menu,
   no footer, no other home sections. Laid out as the IMS start page: left-aligned, the stat cards in one row below the paragraph.
   The home buttons (INDEXES SCREENER / RANKING) give way to GUEST | SIGN IN | SIGN UP in the same button style (.hero-st, drawn
   by obs.js pageHome) below the stat cards, with a short note under them; Share and Language sit at the top right
   (#iobs_starter). GUEST or a sign-in removes html.iobs-st (www/iobs_starter.js) and the observatory is as before. The hero is
   dark in both modes, as on the home page. PC and tablet (760px and wider): one screen, no scroll; phones may scroll. */

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

/* ---- the start page: the home hero alone ---- */
html.iobs-st:not(.nxw-lg-in) header.top,
html.iobs-st:not(.nxw-lg-in) footer.foot,
html.iobs-st:not(.nxw-lg-in) #nxw_tools,
html.iobs-st:not(.nxw-lg-in) #app > :not(.hero):not(.loading),
html.iobs-st:not(.nxw-lg-in) .hero .hero-btns:not(.hero-st) { display: none !important; }
html.iobs-st:not(.nxw-lg-in) #iobs_starter { display: block; }
html.iobs-st:not(.nxw-lg-in) .hero .hero-st { display: flex; }
html.iobs-st:not(.nxw-lg-in) .hero .hero-st-note { display: block; }
html.iobs-st-wait .hero-st, html.iobs-st-wait .hero-st-note, html.iobs-st-wait #iobs_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.iobs-st:not(.nxw-lg-in) body { overflow-x: hidden; background: var(--midnight); }
html.iobs-st:not(.nxw-lg-in) .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
html.iobs-st:not(.nxw-lg-in) .hero > .hero-in { width: 100%; }

/* buttons: the home's own style (.btn .btn-red / .btn-green, 16px 30px, 15px, .08em); SIGN UP in blue, the same in both modes */
.hero-st .btn-blue { background: #1F4FD1; box-shadow: 0 10px 26px rgba(31,79,209,.35); }
.hero-st .btn-blue:hover { background: #1A43B3; box-shadow: 0 14px 30px rgba(31,79,209,.45); }
/* note: the home paragraph's text (.lead), smaller */
.hero .hero-st-note { font-size: 15px; color: #9DB0CC; margin: 18px 0 0; }

/* ---- one layout with the IMS start page (2026-10-29, "Iobs figure bar like ims", "Both login button at the end after figures"):
   the hero starts at the left page margin (56px, as IMS .ims-hero2: 4rem 3.5rem 3.5rem), one column, in this order: kicker,
   title, underline, paragraph, the 4 stat cards in ONE row across the content width (the figure bar), then GUEST | SIGN IN |
   SIGN UP and the note. Cards, gaps and spacing are those of IMS (.ims-stats3 .ims-stat and ims_starter.css) in IOBS's own
   colours (card fill and border, gold figures). Numbers below are IMS's rem values in px (1rem = 16px). ---- */
html.iobs-st:not(.nxw-lg-in) .hero > .hero-in { max-width: none; margin: 0; padding: 64px 56px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
html.iobs-st:not(.nxw-lg-in) .hero .lead { max-width: 1100px; }
html.iobs-st:not(.nxw-lg-in) .hero .lead:not(.hero-st-note) { margin-bottom: 16px; }
html.iobs-st:not(.nxw-lg-in) .hero .hero-stats { grid-template-columns: repeat(4, 1fr); gap: 22.4px; margin-top: 38.4px; }
html.iobs-st:not(.nxw-lg-in) .hero .hstat { border-radius: 18px; padding: 25.6px 32px; }
html.iobs-st:not(.nxw-lg-in) .hero .hstat .n { font-size: 48px; line-height: 1.1; }
html.iobs-st:not(.nxw-lg-in) .hero .hstat .l { font-size: 17.6px; font-weight: 500; letter-spacing: .03em; margin-top: 4.8px; }
html.iobs-st:not(.nxw-lg-in) .hero .hero-st { margin-top: 32px; }
html.iobs-st:not(.nxw-lg-in) .hero .hero-st-note { margin-top: 22.4px; }
/* tablet portrait and narrower (992px and less, as IMS): the 4 cards 2 x 2, the IMS side margin of 1.2rem */
@media (max-width: 992px) {
  html.iobs-st:not(.nxw-lg-in) .hero > .hero-in { padding: 48px 19.2px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-stats { grid-template-columns: 1fr 1fr; }
}

/* 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, as on the IMS start page) so the cards, the buttons and the note fit. */
@media (min-width: 760px) {
  html.iobs-st:not(.nxw-lg-in), html.iobs-st:not(.nxw-lg-in) body { overflow: hidden !important; }
  html.iobs-st:not(.nxw-lg-in) .hero { height: 100vh; height: 100svh; }
}
@media (min-width: 760px) and (max-height: 779.98px) {
  html.iobs-st:not(.nxw-lg-in) .hero > .hero-in { padding-top: 38.4px; padding-bottom: 38.4px; }
  html.iobs-st:not(.nxw-lg-in) .hero .rule { margin: 16px 0 17.6px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-stats { margin-top: 20.8px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat { padding: 16px 25.6px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat .n { font-size: 36.8px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat .l { font-size: 16px; margin-top: 1.6px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-st { margin-top: 22.4px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-st-note { margin-top: 16px; }
}
/* phones: may scroll; the cards 2 x 2, smaller */
@media (max-width: 759px) {
  html.iobs-st:not(.nxw-lg-in) .hero > .hero-in { padding: 72px 16px 40px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-stats { gap: 12px; margin-top: 28px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat { padding: 16px 18px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat .n { font-size: 32px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hstat .l { font-size: 14px; }
  html.iobs-st:not(.nxw-lg-in) .hero .hero-st { margin-top: 24px; }
}

/* ---- top right: Share and language (38x38, radius 8, 18px / 24px from the corner) ---- */
#iobs_starter { position: fixed; top: 18px; right: 24px; z-index: 2990; font-family: Poppins, "Segoe UI", Arial, sans-serif; line-height: 1.55; }
#iobs_starter *, #iobs_starter *::before, #iobs_starter *::after { box-sizing: border-box; }
#iobs_starter .st-tools { display: flex; align-items: center; gap: 8px; }
#iobs_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; }
#iobs_starter .st-tb:hover, #iobs_starter .st-lbox.open .st-tb { border-color: #e9b54a; color: #e9b54a; }
#iobs_starter .st-tb svg { width: 17px; height: 17px; display: block; }
#iobs_starter .st-lbox { position: relative; display: flex; }
#iobs_starter .st-lbtn { width: auto; flex: 0 0 auto; min-width: 38px; padding: 0 10px; gap: 5px; font-size: 12.5px; }
#iobs_starter .st-lbtn svg { width: 16px; height: 16px; }
#iobs_starter .st-lcode { font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: #e9b54a; }
#iobs_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); }
#iobs_starter .st-lbox.open .st-lmenu { display: block; }
#iobs_starter .st-lmenu .iobs-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; }
#iobs_starter .st-lmenu .iobs-opt b { min-width: 34px; font-size: 12px; letter-spacing: .05em; color: #9DB0CC; }
#iobs_starter .st-lmenu .iobs-opt:hover { background: rgba(212,164,64,.14); color: #e9b54a; }
#iobs_starter .st-lmenu .iobs-opt.active, #iobs_starter .st-lmenu .iobs-opt.active b { color: #e9b54a; }
@media (max-width: 759px) {
  #iobs_starter { top: 14px; right: 16px; }
  #iobs_starter .st-tools { gap: 6px; }
  #iobs_starter .st-tb { width: 36px; height: 36px; flex-basis: 36px; }
  #iobs_starter .st-lbtn { width: auto; flex-basis: auto; padding: 0 9px; }
  #iobs_starter .st-lbtn svg { display: none; }
}

/* ---- the sign-in box of INDOBS: 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 Admin (administrators) / 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; }
#nxw_tools #nxw_admin_btn { border-color: #D4A440; color: #F0D890; }
/* 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; }

/* Admin page (administrators only, drawn by the server): members and sign-up approvals, settings */
#iobs_admin { position: fixed; inset: 5% 5% auto 5%; max-height: 88vh; overflow: auto; z-index: 2001; background: #0a1a3c; color: #fff;
  border-top: 3px solid #D4A440; border-radius: 14px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 14px; }
#iobs_admin .ia-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 12px; }
#iobs_admin .ia-kick { display: block; font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #D4A440; }
#iobs_admin h2 { margin: 4px 0 2px; font-size: 26px; font-weight: 700; color: #fff; }
#iobs_admin .ia-who { margin: 0; color: #9DB0CC; font-size: 13px; } #iobs_admin .ia-who b { color: #E8EBF7; }
#iobs_admin .ia-close { flex: none; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; font: inherit; }
#iobs_admin .ia-close:hover { border-color: #D4A440; color: #F0D890; }
#iobs_admin .ia-sec { margin-top: 18px; }
#iobs_admin h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F0D890; }
#iobs_admin .ia-note { margin: 0 0 10px; color: #C9D6EC; font-size: 13px; line-height: 1.5; }
#iobs_admin .ia-t { border-collapse: collapse; width: 100%; max-width: 980px; }
#iobs_admin .ia-t th, #iobs_admin .ia-t td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
#iobs_admin .ia-t th { width: 34%; font-weight: 600; color: #9DB0CC; }
#iobs_admin .ia-t td small { display: block; color: #8FA2C0; font-size: 12px; }
@media (max-width: 640px) { #iobs_admin { inset: 2% 2% auto 2%; padding: 16px; } #iobs_admin .ia-t th { width: 45%; } }

/* IOBS logo (2026-10-31, I-family "D · Candle I", the same as IMS final): top left of the start page, mirrors Share and Language
   at the top right. The dark colour sits in the base rule so the light theme rule wins (html[data-mode="light"], set in obs.html). */
#iobs_brand { display: none; color: #EAF0FA; }   /* dark: light letters; the light theme rule below overrides it */
html.iobs-st:not(.nxw-lg-in) #iobs_brand { display: block; position: fixed; top: 16px; left: 24px; z-index: 2990; line-height: 0; }
html.iobs-st-wait #iobs_brand { visibility: hidden; }   /* a remembered sign-in is being checked, as the rest of the start page */
#iobs_brand .nxw-logo-svg { height: 54px; width: auto; display: block; }
html[data-mode="light"] #iobs_brand { color: #0B1A3A; }
#iobs_brand .nxw-cdl { stroke: #8A5E18; stroke-width: 6; paint-order: stroke; }   /* thick border on the gold candle and star; dark theme: darker bronze */
html[data-mode="light"] #iobs_brand .nxw-cdl { stroke: #D9B25E; }                  /* light theme: lighter gold border */
#iobs_brand .nxw-t { stroke: #8EC8F2; stroke-width: 1.5; paint-order: stroke; }    /* thin light blue border on the O B S letters, both themes */
@media (max-width: 759px) { html.iobs-st:not(.nxw-lg-in) #iobs_brand { top: 12px; left: 16px; } #iobs_brand .nxw-logo-svg { height: 44px; } }
/* Horizontal logo on the start page (2026-11-01, user "in the starter and login box use hor"): the mark, a thin gold rule, then
   2 lines in gold Poppins capitals, as <APP>_HORIZONTAL of C:\NXW\LOGO. */
html.iobs-st:not(.nxw-lg-in) #iobs_brand { display: flex; align-items: center; gap: 16px; }
#iobs_brand .st-hsub { font: 600 11.5px/1.7 Poppins, "Segoe UI", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: #E2B95A; border-left: 1.5px solid currentColor; padding: 2px 0 2px 14px; }
html[data-mode="light"] #iobs_brand .st-hsub { color: #A87B22; }
@media (max-width: 759px) { #iobs_brand .st-hsub { font-size: 10px; padding-left: 10px; } html.iobs-st:not(.nxw-lg-in) #iobs_brand { gap: 10px; } }