/* Modern skin. Loaded after styles.css and overrides it, so the 1997 markup stays untouched:
   the tables are still tables, which is correct for tabular data, they just stop looking like
   Windows 95. Palette echoes hamsandwich so the two sites read as a family. */
:root {
    --bg:#0f1b21; --card:#16262e; --line:#2b4049; --ink:#d7e3e6;
    --dim:#93a9b0; --accent:#3fb9ae; --accent-dk:#1d6f68; --warn:#d9a441;
}
body { background:var(--bg); color:var(--ink);
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       font-size:15px; line-height:1.55; margin:0; padding:0 16px 40px; }
.page { width:100%; max-width:1080px; background:transparent; border:0; }
center { display:block; }

.banner { background:transparent; border:0; padding:26px 0 6px !important; }
.banner font { color:var(--ink) !important; }
.banner font[size="6"] { font-family:inherit !important; font-size:32px !important;
                         letter-spacing:-.4px; }
.banner font[size="2"] { font-size:15px !important; color:var(--accent) !important; }
.banner font[size="1"] { font-size:13px !important; color:var(--dim) !important; }

.navbar { background:transparent; border:0; border-bottom:1px solid var(--line);
          font-family:inherit; font-size:14px; padding-bottom:12px !important; }
.navbar a { color:var(--dim); text-decoration:none; padding:0 4px; }
.navbar a:hover { color:var(--accent); }

a { color:var(--accent); }
a:visited { color:var(--accent); }
a:hover { color:var(--ink); }

.sect { background:transparent; color:var(--ink); font-family:inherit; font-size:19px;
        font-weight:650; letter-spacing:-.2px; padding:0; margin:26px 0 10px;
        border-bottom:1px solid var(--line); padding-bottom:6px; }
.subsect { color:var(--accent); border-bottom:0; font-size:15px; margin-top:18px; }
p { margin:0 0 12px; }
hr { border-top:1px solid var(--line); }

/* Data tables become cards with breathing room rather than gridlines. */
table.data { background:transparent; font-family:inherit; font-size:14px;
             border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table.data td { background:var(--card); border-bottom:1px solid var(--line);
                padding:8px 12px !important; }
table.data tr.hdr td { background:#101d24; color:var(--dim); font-size:12px;
                       text-transform:uppercase; letter-spacing:.05em; }
table.data tr.r1 td { background:#13222a; }
tt, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* The net notice keeps its prominence, just without the double rule. */
.netbox { border:1px solid var(--accent-dk); border-radius:12px;
          background:linear-gradient(180deg,#15343a,#12262d); }
.nethdr { background:transparent; color:var(--accent); font-family:inherit; font-size:14px;
          text-transform:uppercase; letter-spacing:.08em; padding:14px 16px 0; }
.netwhen { font-size:22px; }
.netfreq { font-size:40px; color:var(--accent); letter-spacing:-1px; }
.netsub { color:var(--dim); }
.nethow { background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:8px; }
.hook { background:rgba(217,164,65,.12); border:1px solid var(--warn); border-radius:8px;
        color:var(--ink); font-weight:600; }
.bar { background:var(--accent); border-radius:2px; }
.verdict { border:1px solid var(--line); border-radius:6px; font-family:inherit; }
.verdict.v-good{background:rgba(63,185,174,.16);color:var(--ink)}
.verdict.v-ok  {background:rgba(217,164,65,.14);color:var(--ink)}
.verdict.v-warn{background:rgba(217,120,65,.16);color:var(--ink)}
.verdict.v-bad {background:rgba(210,80,70,.18);color:var(--ink)}
.verdict.v-dim {background:#16262e;color:var(--dim)}
font[size="1"] { font-size:12.5px; color:var(--dim); }
font[size="2"] { font-size:14px; }
input[type=text] { background:#0d181d; border:1px solid var(--line); color:var(--ink);
                   border-radius:6px; padding:8px 10px; font-size:15px; }
input[type=submit] { background:var(--accent); color:#06222a; border:0; border-radius:6px;
                     padding:9px 20px; font-weight:650; font-size:14px; cursor:pointer; }

/* The two-column layout table has to stop being a layout table on a narrow screen. */
@media (max-width:860px) {
    .page table td[valign="top"] { display:block; width:100% !important; }
}
.viewbar { max-width:1080px; margin:10px auto 0; font-size:13px; font-family:inherit; }
.viewbar a { color:var(--dim); text-decoration:none; border-bottom:1px dotted var(--line); }
.viewbar a:hover { color:var(--accent); }
.sitetitle font { color: var(--ink) !important; }
.sitetitle:hover font { color: var(--accent) !important; }