/* ==========================================================================
   ZTRADEZ site theme: GRAPHITE
   --------------------------------------------------------------------------
   Single source of truth for the palette. Every page links this AFTER its own
   inline <style>, so these values win on cascade order without needing !important.

   To change the whole site's palette later, edit the tokens in this block only.

   The problem this solves: pure #000 gives a table cell no edges, so a dense
   grid reads as a wall of text. Ground, surface and line are three distinct
   steps here, and every cell carries a hairline.
   ========================================================================== */

:root{
  /* three steps of dark, not one */
  --bg:      #0E0F11;   /* page ground        */
  --bg-2:    #17191D;   /* raised surface     */
  --bg-3:    #1B1E23;   /* hover / active     */

  --line:    #292D33;   /* hairline on cells  */
  --line-2:  #343941;   /* stronger divider   */

  --text:    #E8EAED;   /* not pure white, reduces glare over long sessions */
  --muted:   #8B9299;

  --accent:  #7FFF00;   /* unchanged, still the brand */

  /* semantic, kept separate from the accent */
  --green:   #5BD97E;
  --red:     #FF6B6B;
  --gold:    #F2C14E;
  --blue:    #63A9F0;
  --gray:    #8B9299;

  /* table-specific, new */
  --surface: #17191D;
  --zebra:   #121417;
  --hover:   #1B1E23;
}

/* Ground. Several pages paint a hardcoded black gradient here, which would
   otherwise keep the old look regardless of the tokens above. */
html, body{
  background:var(--bg);
  color:var(--text);
}

/* --------------------------------------------------------------------------
   Tables. Selectors are listed rather than globbed because each tool page
   names its table differently, and a few build the markup in JavaScript.
   -------------------------------------------------------------------------- */

table{
  border-collapse:collapse;
  background:transparent;
}

table thead,
.flow-table thead{
  background:var(--surface);
}

table th,
.flow-table th,
.pl-table th,
table.sect th{
  background:var(--surface);
  color:var(--muted);
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line);
}

table td,
.flow-table td,
.pl-table td,
table.sect td{
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}

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

table tbody tr:nth-child(even) td,
.flow-table tbody tr:nth-child(even) td{
  background:var(--zebra);
}

table tbody tr:hover td,
.flow-table tbody tr:hover td,
.pl-table tbody tr:hover td{
  background:var(--hover);
}

table tbody tr:last-child td,
.flow-table tbody tr:last-child td{
  border-bottom:0;
}

/* The wrapper gets the outer edge so the grid reads as one object */
.tablewrap,
.table-wrap,
.flow-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   Header. Sits on the raised surface so it separates from the page ground.
   -------------------------------------------------------------------------- */

.ztz-topnav{
  background:var(--bg-2);
  border-bottom:1px solid var(--line-2);
}

.ztz-topnav .searchbox{
  background:var(--bg);
  border-color:var(--line-2);
}

/* The dropdown and footer were painted #050505 directly in each page's own CSS,
   so the tokens above could not reach them. Pulled onto the surface step. */
.nav-dd-menu,
.ztz-topnav .nav-dd-menu{
  background:var(--bg-2);
  border-color:var(--line-2);
}

.ztz-footer{
  background:var(--bg-2);
  border-top:1px solid var(--line-2);
}

/* --------------------------------------------------------------------------
   Nested Tools menu. Twenty-one flat links was unreadable, so related tools
   are grouped and the groups fly out to the right on hover or keyboard focus.
   -------------------------------------------------------------------------- */

.nav-sub{position:relative}

.nav-sub-label{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; font-size:13px; color:#fff; letter-spacing:.02em;
  border-bottom:1px solid var(--line); cursor:default; user-select:none;
}
.nav-sub:last-child .nav-sub-label{border-bottom:none}
.nav-sub-label i{font-style:normal; color:var(--muted); font-size:15px; line-height:1}

.nav-sub:hover > .nav-sub-label,
.nav-sub:focus-within > .nav-sub-label{
  color:var(--accent); background:rgba(127,255,0,.05);
}
.nav-sub:hover > .nav-sub-label i,
.nav-sub:focus-within > .nav-sub-label i{color:var(--accent)}

.nav-sub-menu{
  position:absolute; top:-7px; left:100%;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:6px;
  min-width:190px; padding:6px 0; margin-left:2px;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:300; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.nav-sub:hover > .nav-sub-menu,
.nav-sub:focus-within > .nav-sub-menu{opacity:1; visibility:visible}

.nav-sub-menu a{
  display:block; padding:10px 16px; font-size:13px; color:#fff;
  border-bottom:1px solid var(--line); text-decoration:none; letter-spacing:.02em;
  white-space:nowrap;
}
.nav-sub-menu a:last-child{border-bottom:none}
.nav-sub-menu a:hover,
.nav-sub-menu a:focus-visible{color:var(--accent); background:rgba(127,255,0,.05)}

.nav-dd-menu a:focus-visible,
.nav-sub-menu a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* A flyout that opens sideways is unusable on a touch screen. Below 820px the
   groups collapse and become tap-to-open accordions instead, driven by
   assets/theme.js adding .open. Rendering them all expanded produced exactly
   the twenty-one item scroll this menu exists to avoid. */
@media(max-width:820px){
  .ztz-topnav .nav-dd-menu{
    max-height:70vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* the menu itself is tap-driven on mobile, not hover */
  .ztz-topnav .nav-dd:hover > .nav-dd-menu{opacity:0; visibility:hidden}
  .ztz-topnav .nav-dd.open > .nav-dd-menu{opacity:1; visibility:visible}

  .nav-sub-menu{
    position:static; margin:0; padding:0; min-width:0;
    border:0; border-radius:0; box-shadow:none;
    background:rgba(0,0,0,.25);
    opacity:1; visibility:visible;
    display:none;
  }
  .nav-sub:hover > .nav-sub-menu,
  .nav-sub:focus-within > .nav-sub-menu{display:none}
  .nav-sub.open > .nav-sub-menu{display:flex}

  .nav-sub-label{
    cursor:pointer;
    padding:12px 16px;
    font-size:13px; color:#fff; letter-spacing:.02em; text-transform:none;
    border-bottom:1px solid var(--line);
  }
  .nav-sub.open > .nav-sub-label{color:var(--accent)}
  .nav-sub-label i{
    display:block; transform:rotate(90deg);
    transition:transform .18s ease; color:var(--muted);
  }
  .nav-sub.open > .nav-sub-label i{transform:rotate(270deg); color:var(--accent)}

  .nav-sub-menu a{padding-left:30px; font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .nav-sub-label i{transition:none}
}

/* --------------------------------------------------------------------------
   Cards, panels and stat blocks pick up the surface step too.
   -------------------------------------------------------------------------- */

.card, .panel, .stat, .stat-box, .metric, .kpi, .box{
  background:var(--bg-2);
  border-color:var(--line);
}