/* Shared look for the whole Wormhole guide. One file, every page. */
:root {
  --blue: #2E7DBC; --green: #7CB342; --orange: #E8762C; --yellow: #E8B62C;
  --navy: #1B3A5C; --ink: #222A35; --light: #F4F7FA; --gray: #6B7280;
  --red: #C62828; --paper: #FFFFFF; --line: #E1E8EF;
}
* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--ink);
       background: var(--paper); margin: 0; line-height: 1.6; }
img { max-width: 100%; }

/* top navigation, identical on every page */
.topnav { background: var(--navy); position: sticky; top: 0; z-index: 50;
          box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.topnav .inner { max-width: 1000px; margin: 0 auto; padding: 8px 16px;
                 display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.topnav .brand { color: #FFF; font-weight: bold; font-size: 18px; text-decoration: none;
                 margin-right: 8px; }
.topnav .links { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.topnav a.nl { color: #C7D8E6; text-decoration: none; font-size: 14px; font-weight: 600;
               padding: 5px 10px; border-radius: 6px; }
.topnav a.nl:hover { background: rgba(255,255,255,0.12); color: #FFF; }
.topnav a.nl.on { background: var(--blue); color: #FFF; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px 60px 20px; }
h1 { color: var(--navy); font-size: 30px; margin: 26px 0 8px 0; text-wrap: balance; }
h2 { color: var(--navy); font-size: 23px; margin: 34px 0 6px 0; }
h3 { color: var(--navy); font-size: 18px; margin: 0 0 8px 0; }
.rule { height: 4px; width: 100%; border: 0; margin: 0 0 16px 0; background: var(--blue); }
.rule.g { background: var(--green); } .rule.o { background: var(--orange); }
.rule.y { background: var(--yellow); } .rule.r { background: var(--red); }
p { margin: 0 0 12px 0; } .lead { color: var(--gray); font-size: 17px; }
a { color: var(--blue); }
/* mark links that leave the guide (Viper, GitHub, Slides) */
.ext::after { content: "\2197"; font-size: 0.82em; margin-left: 1px; vertical-align: 1px;
              color: var(--gray); font-weight: bold; }
.btn.ext::after { color: rgba(255,255,255,0.8); }
/* links that jump to a glossary definition: dashed + orange, so you can
   tell you're headed to the glossary before you click */
a.term { color: var(--orange); text-decoration: underline dashed;
         text-underline-offset: 2px; text-decoration-thickness: 1px; }
a.term:hover { text-decoration-style: solid; background: #FDF3E7; }
code { background: #E5EBF1; border-radius: 4px; padding: 1px 6px;
       font-family: Consolas, Menlo, monospace; font-size: 13px; color: var(--navy); }

.card { background: var(--light); border-radius: 10px; padding: 16px 18px;
        box-shadow: 0 2px 8px rgba(27,58,92,0.14); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.btn { display: inline-block; background: var(--blue); color: #FFF; text-decoration: none;
       font-weight: bold; padding: 10px 18px; border-radius: 8px; font-size: 15px; }
.btn:hover { background: #276aa0; }
.btn.g { background: var(--green); } .btn.g:hover { background: #6aa038; }

table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tablewrap { overflow-x: auto; }
th { background: var(--navy); color: #FFF; text-align: left; padding: 9px 11px; }
td { padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }

footer { text-align: center; color: var(--gray); font-size: 12.5px;
         padding: 26px 10px; border-top: 1px solid var(--line); }