/* The menu on every page (2026-10-29; scripts/console_skin.py site_nav).
   Its own tokens, on both themes: the pages it sits on name theirs three ways.
   From 1280px wide it runs down the left; below, a bar with Build and the menu key. */
:root{--sn-bg:#0E1628;--sn-ink:#E8EDF5;--sn-dim:#9AA7BA;--sn-acc:#5B8CFF;--sn-key-ink:#0B1220;
  --sn-line:rgba(232,237,245,.12);--sn-on:#18233A;--sn-field:#0B1220;--sn-risk:#d080b6;--sn-compare:#59b47d;}
:root[data-theme="light"]{--sn-bg:#F4F6FA;--sn-ink:#0E1726;--sn-dim:#556274;--sn-acc:#2457D6;--sn-key-ink:#FFFFFF;
  --sn-line:rgba(14,23,38,.12);--sn-on:#E3E9F3;--sn-field:#FFFFFF;--sn-risk:#B5558F;--sn-compare:#2E8A57;}
/* Risk check in the logo's pink, Compare two funds in its green (the owner,
   2026-11-03; Build is already its blue): the icon and the outline, the words
   stay dark. The logo's own colours on the dark theme; on the light one the
   same hues deeper, the logo's being too pale on near-white (under 3:1). */
.site-nav a[data-tool="risk"] .sn-ic{color:var(--sn-risk);}
.site-nav a[data-tool="compare"] .sn-ic{color:var(--sn-compare);}
.site-nav .sn-strip a[data-tool="risk"]{border-color:var(--sn-risk);}
.site-nav .sn-strip a[data-tool="compare"]{border-color:var(--sn-compare);}
.site-nav .sn-links a[data-tool="risk"]{box-shadow:inset 0 0 0 1px var(--sn-risk);}
.site-nav .sn-links a[data-tool="compare"]{box-shadow:inset 0 0 0 1px var(--sn-compare);}
/* On its own page a coloured tool keeps its colour: the current-page blue had
   taken it, on the very page it belongs to. The current-page background stays. */
.site-nav .sn-strip a[data-tool="risk"][aria-current="page"]{border-color:var(--sn-risk);}
.site-nav .sn-strip a[data-tool="compare"][aria-current="page"]{border-color:var(--sn-compare);}
.site-nav a[data-tool="risk"][aria-current="page"] .sn-ic{color:var(--sn-risk);}
.site-nav a[data-tool="compare"][aria-current="page"] .sn-ic{color:var(--sn-compare);}
.site-nav .sn-links a[data-tool="risk"][aria-current="page"]{box-shadow:inset 3px 0 0 var(--sn-risk) !important;}
.site-nav .sn-links a[data-tool="compare"][aria-current="page"]{box-shadow:inset 3px 0 0 var(--sn-compare) !important;}

.site-nav{position:sticky;top:0;z-index:60;background:var(--sn-bg);color:var(--sn-ink);border-bottom:1px solid var(--sn-line);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.4;text-align:left;}
.site-nav *{box-sizing:border-box;}
.site-nav a{color:inherit;text-decoration:none;}
.site-nav ul,.site-nav p{margin:0;padding:0;list-style:none;}
.sn-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}

.sn-bar{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 16px;}
.sn-brand{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-weight:700;font-size:17px;letter-spacing:-.01em;}
.sn-brand svg{width:28px;height:28px;flex:none;}
.site-nav .sn-build{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;
  background:var(--sn-acc);color:var(--sn-key-ink);font-weight:600;white-space:nowrap;}
.sn-build .sn-ic{stroke-width:2.5;}
.sn-long{display:none;}
.sn-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.sn-burger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--sn-line);border-radius:12px;cursor:pointer;color:var(--sn-ink);font-weight:600;}
.sn-burger .sn-ic{width:22px;height:22px;}
.sn-toggle:focus-visible + .sn-bar .sn-burger{outline:2px solid var(--sn-acc);outline-offset:2px;}
.sn-panel{display:none;padding:4px 16px 16px;border-top:1px solid var(--sn-line);max-height:calc(100vh - 60px);overflow:auto;}
.sn-toggle:checked ~ .sn-panel{display:block;}
/* A phone's row of the tools (2026-11-01, the owner: the desktop's column, on the
   phone too): swiped sideways, its right edge fading to say there is more. */
.site-nav .sn-strip{display:flex;gap:8px;margin:0;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);}
.sn-strip::-webkit-scrollbar{display:none;}
.sn-strip li{flex:none;}
.sn-strip a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--sn-line);
  border-radius:999px;white-space:nowrap;}
.sn-strip .sn-ic{color:var(--sn-dim);}
.site-nav .sn-strip a[aria-current="page"]{background:var(--sn-on);border-color:var(--sn-acc);font-weight:600;}
.sn-strip a[aria-current="page"] .sn-ic{color:var(--sn-acc);}
.sn-toggle:checked ~ .sn-strip{display:none;}
/* The name gives way before the Tools key does, on the narrowest phones. */
@media (max-width:379px){.sn-brand span{display:none;}}

.sn-fund{position:relative;margin:12px 0 8px;}
.sn-fund > .sn-ic{position:absolute;left:12px;top:13px;color:var(--sn-dim);}
.site-nav .sn-fund input{width:100%;height:44px;margin:0;padding:0 12px 0 38px !important;border:1px solid var(--sn-line) !important;border-radius:12px !important;
  background:var(--sn-field) !important;color:var(--sn-ink) !important;font:inherit;font-size:16px;box-shadow:none !important;}
.site-nav .sn-fund input:focus{outline:2px solid var(--sn-acc);outline-offset:1px;}
.sn-hits{margin:6px 0 0 !important;padding:4px !important;border:1px solid var(--sn-line);border-radius:12px;background:var(--sn-field);}
.sn-hits[hidden]{display:none;}
.sn-hits button{display:flex;gap:8px;align-items:baseline;width:100%;min-height:40px;padding:8px;border:0;border-radius:8px;
  background:none;color:var(--sn-ink);font:inherit;font-size:16px;text-align:left;cursor:pointer;}
.sn-hits button:hover,.sn-hits button:focus{background:var(--sn-on);outline:none;}
.sn-hits span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sn-dim);}
.sn-hits p{padding:8px;color:var(--sn-dim);}

.sn-group{padding:14px 10px 4px !important;color:var(--sn-dim);font-size:16px;font-weight:600;}
.sn-links{display:grid;gap:2px;}
.sn-links a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:10px;}
.sn-links a:hover{background:var(--sn-on);}
.sn-links .sn-ic{color:var(--sn-dim);}
.site-nav .sn-links a[aria-current="page"]{background:var(--sn-on);box-shadow:inset 3px 0 0 var(--sn-acc) !important;font-weight:600;}
.sn-links a[aria-current="page"] .sn-ic{color:var(--sn-acc);}

/* The page's own way home is the menu's now: one mark on the page, not two. */
body:has(.site-nav) .top .home,body:has(.site-nav) header.bar .brand,body:has(.site-nav) .rc-bar .rc-brand{display:none !important;}
body:has(.site-nav) header.bar{justify-content:flex-end;}

@media (min-width:1280px){
  body:has(.site-nav){padding-left:248px !important;}
  .site-nav{position:fixed;left:0;top:0;bottom:0;width:248px;overflow:auto;border-bottom:0;border-right:1px solid var(--sn-line);}
  .sn-bar{flex-direction:column;align-items:stretch;gap:16px;padding:20px 16px 4px;}
  /* One line in the 248px menu: it broke in two with Inter at 110% (review 2026-10-30, lot 3, item 5). */
  .site-nav .sn-build{padding:0 12px;}
  .sn-brand{margin:0;}
  .sn-long{display:inline;}
  .sn-short,.sn-burger{display:none;}
  .site-nav .sn-strip{display:none;}
  .sn-panel{display:block;border:0;padding:0 16px 24px;max-height:none;overflow:visible;}
  .sn-fund{margin-top:0;}
}

/* /tools: every tool on the same card. */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:24px 0 8px;}
.tl-card{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:12px;border:1px solid var(--sn-line);
  background:var(--sn-bg);color:var(--sn-ink) !important;text-decoration:none !important;min-height:150px;}
.tl-card:hover{border-color:var(--sn-acc);}
.tl-card .sn-ic{width:28px;height:28px;color:var(--sn-acc);margin-bottom:4px;}
.tl-card b{font-size:18px;font-weight:600;}
.tl-card span{color:var(--sn-dim);}

/* The tool's own head and "Next" (the comparison first, 2026-10-29). */
.tool-head{display:flex;gap:14px;align-items:flex-start;margin:16px 0 22px;padding:18px 20px;border-radius:12px;
  background:var(--sn-bg);border:1px solid var(--sn-line);color:var(--sn-ink);}
.tool-head > .sn-ic{width:36px;height:36px;color:var(--sn-acc);margin-top:2px;}
.tool-head p{margin:0;}
.tool-name{font-size:19px;font-weight:600;}
.tool-say{color:var(--sn-dim);}
.tool-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:16px 0 4px;}
.tool-pick label{display:grid;gap:4px;font-size:16px;font-weight:600;color:var(--sn-dim);position:relative;}
.tool-pick input{width:150px;height:46px;padding:0 12px !important;border:1px solid var(--sn-line) !important;border-radius:12px !important;
  background:var(--sn-field) !important;color:var(--sn-ink) !important;font:inherit;font-size:17px;font-weight:600;text-transform:uppercase;}
.tool-pick .sn-hits{position:absolute;top:100%;left:0;z-index:20;width:280px;}
/* On a phone the boxes stack, and a list laid over what follows covered the
   Compare button and took the tap (2026-11-02): there it sits in the page. */
@media (max-width:600px){.tool-pick .sn-hits{position:static;width:auto;}}
/* There each box and its list keep to the width of the form: a long name ran
   the list, and the card with it, past the screen (lot U, round 2, point 1). */
@media (max-width:600px){.tool-pick label{min-width:0;max-width:100%;}.tool-pick .sn-hits{max-width:100%;overflow:hidden;}
  .tool-pick .sn-hits button{min-width:0;}}
.tool-pick button[type="submit"]{min-height:46px;padding:0 22px;border:0;border-radius:12px;background:var(--sn-acc);color:var(--sn-key-ink);
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;}
.tool-pick .tool-say{flex-basis:100%;margin:0;font-size:16px;color:var(--sn-dim);}
.next-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0 8px;}
.next-row a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:12px;color:var(--sn-ink) !important;text-decoration:none !important;
  border:1px solid color-mix(in srgb,var(--sn-acc) 45%,transparent);}
.next-row a:hover{border-color:var(--sn-acc);}
.next-row b{font-weight:600;}
.next-row span{color:var(--sn-dim);}