/* =======================================================================
   Guide Watch Path CSS definitions
   ======================================================================= */

/* Page wrapper aligns with your site look */
.np-page{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

/* =======================================================================
   HERO
   ======================================================================= */

.np-hero{
  background:
    radial-gradient(1200px 380px at 30% -10%, rgba(124,194,255,.14), transparent 55%),
    radial-gradient(900px 320px at 95% 20%, rgba(142,240,194,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
}

/* Key fix:
   - Right box sizes to content (dynamic width)
   - Right box is always aligned to the hero’s right edge
*/
.np-hero-inner{
  display: grid;
  grid-template-columns: 1fr max-content; /* content-sized right column */
  gap: 16px;
  padding: 18px;
  align-items: start;
  justify-content: space-between;         /* prevents floating inward */
}

/* Collapse to one column on smaller screens */
@media (max-width: 1080px){
  .np-hero-inner{ grid-template-columns: 1fr; }
}

/* Optional (if you ever re-add a kicker) */
.np-kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}

.np-title{
  margin: 8px 0 6px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: .01em;
}

.np-sub{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

/* Hero pills (if used) */
.np-hero-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.np-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text);
  font-size: 13px;
}

/* Right hero box: dynamic width + right-aligned */
.np-hero-note{
  justify-self: end;            /* flush to the right edge of the hero */
  width: max-content;           /* shrink-wrap to longest bullet */
  max-width: min(720px, 100%);  /* safety cap so it can grow but not absurdly */

  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 14px;
}

.np-hero-note-title{
  font-weight: 850;
  letter-spacing: .01em;
  margin-bottom: 8px;
}

/* HERO list: compact, single-line bullets */
.np-hero-note-list--oneLine{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.np-hero-note-list--oneLine li{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: center;

  /* desktop: allow width to expand to full sentence */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;

  color: var(--muted);
  margin: 0;
}

.np-hero-note-list--oneLine li::before{
  content: "•";
  color: rgba(124,194,255,.85);
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

/* Small screens: prevent overflow and use ellipsis */
@media (max-width: 820px){
  .np-hero-note{
    width: 100%;
    max-width: 100%;
  }
  .np-hero-note-list--oneLine li{
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =======================================================================
   LAYOUT: content + TOC
   ======================================================================= */

.np-layout{
  margin-top: 16px;
  display: grid;

  /* more space + larger TOC column so it sits further right */
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1120px){
  .np-layout{ grid-template-columns: 1fr; }
}

/* =======================================================================
   CHAPTER HEADERS
   ======================================================================= */

.np-chapter{
  scroll-margin-top: 84px;
}

.np-chapter + .np-chapter{ margin-top: 14px; }

.np-chapter-head{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.np-chapter-num{
  height: 44px;
  width: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  letter-spacing: .02em;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text);
}

.np-chapter-title{
  margin: 0;
  font-size: 20px;
  letter-spacing: .01em;
}

.np-chapter-desc{
  margin: 4px 0 0;
  color: var(--muted);
}

/* =======================================================================
   CARD GRIDS
   ======================================================================= */

.np-cards-grid{
  display: grid;
  gap: 14px;
}

/* Ensure consistent spacing between stacked grids (fix for Chapter spacing) */
.np-chapter .np-cards-grid + .np-cards-grid{
  margin-top: 14px;
}

/* Extra spacing helper (used where you want a bigger break) */
.np-gap-lg{
  margin-top: 14px;
}

.np-grid-2{
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 980px){
  .np-grid-2{ grid-template-columns: 1fr; }
}

/* =======================================================================
   VIDEO CARDS (highlight without shifting layout)
   ======================================================================= */

.np-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  overflow: hidden;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    filter .16s ease;
}

.np-card:hover{
  border-color: rgba(124,194,255,.26);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,194,255,.12) inset;
  filter: brightness(1.03);
}

.np-card:focus-within{
  border-color: rgba(124,194,255,.30);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(124,194,255,.16) inset;
}

/* embed */
.np-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.35);
}

.np-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.np-card-body{
  padding: 12px 14px 14px;
}

.np-card-title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
}

.np-card-text{
  margin: 0;
  color: var(--muted);
}

/* =======================================================================
   TOC (sticky like filters: below header, not fixed)
   ======================================================================= */

.np-toc{
  position: sticky;
  top: 84px; /* below fixed header */
  align-self: start;
}

.np-toc-inner{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 10px;

  /* keep fully usable; if too tall, it scrolls internally instead of getting cut */
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.np-toc-title{
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
}

.np-toc-nav{
  display: grid;
  gap: 6px;
}

.np-toc-link{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;

  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;

  transition: background .16s ease, border-color .16s ease;
}

.np-toc-link:hover{
  background: linear-gradient(90deg, rgba(124,194,255,.12), rgba(142,240,194,.10));
  border-color: rgba(124,194,255,.18);
}

.np-toc-badge{
  height: 26px;
  width: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text);
}

.np-toc-text{
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
}

.np-toc-link.is-active{
  background: rgba(124,194,255,.10);
  border-color: rgba(124,194,255,.22);
}

.np-toc-link.is-active .np-toc-text{
  font-weight: 800;
}

/* small divider inside TOC */
.np-toc-divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 6px 0 2px;
}

/* Other Pages: 2-up compact buttons */
.np-toc-pages{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.np-page-btn{
  min-width: 0; /* allows ellipsis to work inside grid */
  display: grid;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, filter .16s ease;
}

.np-page-btn:hover{
  background: rgba(124,194,255,.08);
  border-color: rgba(124,194,255,.20);
  filter: brightness(1.03);
}

.np-page-btn-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.1;
}

.np-page-btn-title{
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* stack the buttons on small screens */
@media (max-width: 520px){
  .np-toc-pages{ grid-template-columns: 1fr; }
}

/* =======================================================================
   MORE COMING SOON (single box only)
   ======================================================================= */

.np-soon-box{
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(124,194,255,.10), transparent 55%),
    radial-gradient(900px 240px at 90% 30%, rgba(142,240,194,.08), transparent 55%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 14px;
}

.np-soon-title{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 6px;
}

.np-soon-text{
  margin: 0 0 10px;
  color: var(--muted);
}

.np-soon-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .16s ease, border-color .16s ease;
}

.np-soon-link:hover{
  background: rgba(124,194,255,.10);
  border-color: rgba(124,194,255,.20);
}

/* ==========================================================================
   /layout/Guides.css  (cleaned + compact table to fit without scrollbar)
   Notes:
   - This is ONLY the "Account Progression" page CSS (hero/layout/cards/toc + calculator + modal + tooltip).
   - Removes all duplicated calculator/table blocks from your pasted CSS.
   - Table now matches graph width and is compact enough to avoid horizontal scroll at default zoom
     (while still allowing scroll on small screens).
   ========================================================================== */

/* ---------- Page wrapper ---------- */
.np-page{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

/* =======================================================================
   HERO
   ======================================================================= */

.np-hero{
  background:
    radial-gradient(1200px 380px at 30% -10%, rgba(124,194,255,.14), transparent 55%),
    radial-gradient(900px 320px at 95% 20%, rgba(142,240,194,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
}

.np-hero-inner{
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 16px;
  padding: 18px;
  align-items: start;
  justify-content: space-between;
}

@media (max-width: 1080px){
  .np-hero-inner{ grid-template-columns: 1fr; }
}

.np-title{
  margin: 8px 0 6px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: .01em;
}

.np-sub{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.np-hero-note{
  justify-self: end;
  width: max-content;
  max-width: min(720px, 100%);
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 14px;
}

.np-hero-note-title{
  font-weight: 850;
  letter-spacing: .01em;
  margin-bottom: 8px;
}

.np-hero-note-list--oneLine{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.np-hero-note-list--oneLine li{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: var(--muted);
  margin: 0;
}

.np-hero-note-list--oneLine li::before{
  content: "•";
  color: rgba(124,194,255,.85);
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

@media (max-width: 820px){
  .np-hero-note{
    width: 100%;
    max-width: 100%;
  }
  .np-hero-note-list--oneLine li{
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =======================================================================
   LAYOUT: content + TOC
   ======================================================================= */

.np-layout{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1120px){
  .np-layout{ grid-template-columns: 1fr; }
}

.np-content{ min-width: 0; }

/* =======================================================================
   CHAPTER HEADERS
   ======================================================================= */

.np-chapter{ scroll-margin-top: 84px; }
.np-chapter + .np-chapter{ margin-top: 14px; }

.np-chapter-head{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.np-chapter-num{
  height: 44px;
  width: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  letter-spacing: .02em;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text);
}

.np-chapter-title{
  margin: 0;
  font-size: 20px;
  letter-spacing: .01em;
}

.np-chapter-desc{
  margin: 4px 0 0;
  color: var(--muted);
}

/* =======================================================================
   CARD GRIDS
   ======================================================================= */

.np-cards-grid{
  display: grid;
  gap: 14px;
}

.np-chapter .np-cards-grid + .np-cards-grid{ margin-top: 14px; }
.np-gap-lg{ margin-top: 14px; }

.np-grid-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 980px){ .np-grid-2{ grid-template-columns: 1fr; } }

.np-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
.np-card:hover{
  border-color: rgba(124,194,255,.26);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(124,194,255,.12) inset;
  filter: brightness(1.03);
}
.np-card:focus-within{
  border-color: rgba(124,194,255,.30);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(124,194,255,.16) inset;
}

.np-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.35);
}
.np-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.np-card-body{ padding: 12px 14px 14px; }
.np-card-title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
}
.np-card-text{ margin: 0; color: var(--muted); }

/* =======================================================================
   TOC
   ======================================================================= */

.np-toc{
  position: sticky;
  top: 84px;
  align-self: start;
}

.np-toc-inner{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.np-toc-title{
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
}

.np-toc-nav{ display: grid; gap: 6px; }

.np-toc-link{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.np-toc-link:hover{
  background: linear-gradient(90deg, rgba(124,194,255,.12), rgba(142,240,194,.10));
  border-color: rgba(124,194,255,.18);
}
.np-toc-badge{
  height: 26px;
  width: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text);
}
.np-toc-text{ font-size: 13px; color: var(--text); line-height: 1.2; }
.np-toc-link.is-active{ background: rgba(124,194,255,.10); border-color: rgba(124,194,255,.22); }
.np-toc-link.is-active .np-toc-text{ font-weight: 800; }

.np-toc-divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 6px 0 2px;
}

.np-toc-pages{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.np-page-btn{
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, filter .16s ease;
}
.np-page-btn:hover{
  background: rgba(124,194,255,.08);
  border-color: rgba(124,194,255,.20);
  filter: brightness(1.03);
}
.np-page-btn-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.1;
}
.np-page-btn-title{
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px){
  .np-toc-pages{ grid-template-columns: 1fr; }
}

/* =======================================================================
   CALCULATOR (Luck) — the only part you asked to change
   - Table width equals graph width (full content column)
   - Table compact enough to avoid horizontal scrollbar at default zoom
   ======================================================================= */

.np-calc{ margin-top: 18px; }
.np-calc-card{ overflow:hidden; }
.np-calc-title{ margin:0; font-size: 16px; font-weight: 900; }
.np-calc-sub{ margin: 4px 0 0; font-size: 12px; opacity: .72; }

.np-calc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

.np-neededBox{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 8px 10px;
}
.np-neededBox--inline{ white-space: nowrap; text-align:right; }
.np-needed-line{ display:flex; align-items:baseline; gap:8px; justify-content:flex-end; }
.np-needed-label{ font-size: 12px; opacity:.8; font-weight: 800; }
.np-needed-value{ font-size: 16px; font-weight: 900; }
.np-needed-sub{ font-size: 11px; opacity:.65; margin-top: 2px; }

.np-chartShell{
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(244,207,51,.08), transparent 55%),
    rgba(255,255,255,.02);
  border-radius: 16px;
  overflow:hidden;
}
.np-chartControls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,20,.25);
}

.np-control{ flex: 1 1 260px; min-width: 220px; }
.np-control-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 6px; }
.np-control-title{ font-size: 12px; font-weight: 800; opacity: .85; }

.np-miniInput{
  width: 84px;
  height: 34px;
  border-radius: 10px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.np-miniInput:focus{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }

.np-slider{ width: 100%; accent-color: #f4cf33; }
.np-slider--green{ accent-color: #50dc8c; }

.np-progressInline{ flex: 1 1 260px; min-width: 220px; margin-left:auto; }
.np-progressTitle{ font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.np-progressBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,0,0,.35);
  overflow:hidden;
}
.np-progressFill{ height:100%; width:0%; background: rgba(80,220,140,.95); }
.np-progressMeta{ font-size: 12px; opacity: .72; margin-top: 6px; }

.np-chartWrap{ padding: 10px 12px 10px; }
.np-chartWrap--tall{ height: 336px; }
.np-chartWrap--tight{ padding-bottom: 8px; }

/* ---- TABLE (compact, same width as graph) ---- */
.np-calc-tableWrap{ margin-top: 8px; }
.np-calc-tableTitle{ font-weight: 900; margin-bottom: 3px; }
.np-calc-tableSub{ font-size: 12px; opacity: .7; margin-bottom: 8px; }

/* wrapper stays full width of content column, not narrower than graph */
.np-table{ width: 100%; }

/* by default: no horizontal scrolling on desktop */
.np-table--grid{
  overflow: visible;
}

/* tighter table metrics */
.np-table--grid table{
  width: 100%;
  min-width: 0;                 /* <-- removes forced scrollbar on desktop */
  table-layout: fixed;          /* <-- lets us fit without overflow */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow:hidden;
}

/* compact padding + smaller header type */
.np-table--grid thead th{
  background: rgba(255,255,255,.04);
  font-size: 11px;
  letter-spacing: .02em;
  opacity: .92;
  user-select: none;
  white-space: nowrap;
}

.np-table--grid th,
.np-table--grid td{
  padding: 8px 8px;             /* tighter */
  border-top: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}

.np-table--grid th:last-child,
.np-table--grid td:last-child{ border-right: 0; }

.np-table--grid tbody tr:hover td{ background: rgba(244,207,51,.05); }

.np-table--grid .t-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.np-table--grid .t-icon{
  width: 44px;                  /* smaller icon column */
  text-align: center;
}

.np-itemIconCell{ display:flex; align-items:center; justify-content:center; }
.np-itemIcon{
  width: 26px;                  /* smaller icon */
  height: 26px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  border-radius: 8px;
}

/* Method column width tuned to avoid overflow */
.t-method{ width: 290px; }
.t-methodCell{ white-space: nowrap; }

.np-methodLine{
  display:flex;
  align-items:center;
  gap:8px;                      /* tighter */
  min-width: 0;
}
.np-methodName{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* header inline layout */
.np-thInline{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.np-thInline--right{
  width: 100%;
  justify-content: flex-end;
}

/* sortable headers */
.np-sort{ cursor: pointer; }
.np-sortIcon{
  display:inline-block;
  width: 10px;
  height: 10px;
  opacity: .7;
  position: relative;
}
.np-sortIcon::before,
.np-sortIcon::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.np-sortIcon::before{ top: 0px; border-bottom: 5px solid rgba(255,255,255,.55); }
.np-sortIcon::after{ bottom: 0px; border-top: 5px solid rgba(255,255,255,.35); }

th.is-sorted .np-sortIcon::before{ border-bottom-color: rgba(255,255,255,.92); }
th.is-sorted.is-desc .np-sortIcon::before{ border-bottom-color: rgba(255,255,255,.35); }
th.is-sorted.is-desc .np-sortIcon::after{ border-top-color: rgba(255,255,255,.92); }

/* highlight important column */
.np-highlightCol{ background: rgba(80,220,140,.07) !important; }
.np-highlightColCell{ background: rgba(80,220,140,.05); font-weight: 800; }

/* info icon buttons */
.np-iBtn{
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  flex: 0 0 auto;
}
.np-iBtn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.20); }
.np-iBtn img{ width: 13px; height: 13px; opacity: .9; display:block; }

/* coin icons */
.np-coinIcon{
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-left: 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* tooltip */
.np-tooltip{
  position: fixed;
  z-index: 9999;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  background: rgba(10,14,20,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  pointer-events: none;
}

/* =======================================================================
   MODAL
   ======================================================================= */

.np-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.np-modal[aria-hidden="false"]{ display: block; }

.np-modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.np-modalCard{
  position:absolute;
  left:50%;
  top: 10vh;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,16,22,.94);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

.np-modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.np-modalTitle{ font-weight: 900; font-size: 14px; }
.np-modalClose{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.np-modalClose:hover{ background: rgba(255,255,255,.07); }

.np-modalBody{
  padding: 14px 16px 16px;
  font-size: 13px;
  opacity: .90;
  line-height: 1.5;
}
.np-modalBody p{ margin: 0 0 10px; }
.np-modalBody ol{ margin: 6px 0 10px 18px; }
.np-modalBody li{ margin: 6px 0; }
.np-modalBody code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.np-modalFoot{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
}
.np-modalOk{
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  font-weight: 800;
}
.np-modalOk:hover{ background: rgba(255,255,255,.09); }
body.np-modalOpen{ overflow: hidden; }

/* =======================================================================
   MOBILE
   ======================================================================= */

@media (max-width: 900px){
  .np-layout{ display:block; }
  .np-toc{ position: static; width: 100%; margin-top: 18px; }
  .np-chartControls{ flex-direction: column; align-items: stretch; }
  .np-control, .np-progressInline{ min-width: 0; width: 100%; }
  .np-chartWrap--tall{ height: 300px; }

  /* On mobile: allow horizontal scroll again */
  .np-table--grid{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .np-table--grid table{
    min-width: 760px;  /* still readable */
    table-layout: auto;
  }
}

@media (max-width: 480px){
  .np-miniInput{ width: 78px; }
  .np-modalCard{ top: 8vh; }
}

/* ==========================================================================
   MOBILE COMPACT CONTROLS + ICON STABILITY
   Append to END of /layout/Guides.css
   ========================================================================== */

/* --- Make the slider area compact on mobile (no giant vertical gaps) --- */
@media (max-width: 900px){
  /* tighter container */
  .np-chartControls{
    padding: 10px 10px 8px;
    gap: 10px;
  }

  /* Use a 2-column grid for Current/Target, then progress full width */
  .np-chartControls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .np-control{
    min-width: 0;        /* remove old min-width forcing wrapping */
    width: 100%;
  }

  /* Put progress bar across both columns */
  .np-progressInline{
    grid-column: 1 / -1;
    margin-left: 0;
    min-width: 0;
  }

  /* reduce vertical spacing inside controls */
  .np-control-head{ margin-bottom: 4px; }
  .np-control-title{ font-size: 12px; }
  .np-miniInput{ height: 32px; }

  /* keep chart height reasonable so controls don’t “feel” spaced out */
  .np-chartWrap--tall{ height: 280px; }

  /* ensure no weird stretching */
  .np-chartShell{ overflow: hidden; }
}

/* On very small screens, go back to single column but still tight */
@media (max-width: 520px){
  .np-chartControls{
    grid-template-columns: 1fr;
  }
  .np-progressInline{ grid-column: auto; }
}

/* --- Icon visibility & stability (table currency + item icons) --- */
.np-itemIcon,
.np-coinIcon{
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
}

/* item icon slightly larger than coin */
.np-itemIcon{
  width: 26px;
  height: 26px;
}

/* fallback “coin dot” if an image is missing */
.np-coinFallback{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.35);
}
.np-coinFallback--gold{ background: #f4cf33; }
.np-coinFallback--silver{ background: #c9ced6; }
.np-coinFallback--copper{ background: #c97a3a; }