/* =====================================================================
   2GNT.com Wiki — modernized surface, original identity.
   Keeps the #900B09 red + Arial identity; adds rounded cards, soft
   shadows, grey-bevel section headers, real buttons/fields, pill nav,
   and a light/dark theme. Restyles the existing legacy hooks in place
   (.dark / .list / .title / legend / headings / bordered tables).
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------- */
:root{
  color-scheme: light;
  --brand:#900B09;        /* 2GNT dark red — headings, section text, accents */
  --brand-hi:#b3140f;     /* brighter red — highlights */
  --brand-deep:#6d0806;   /* deep red — bevel shadow / active */
  --link:#0b46c4;         /* deepened blue (keeps the blue-link identity) */
  --link-hover:#900B09;   /* red hover, as before */

  --ink:#2a2422;          /* warm near-black body text */
  --ink-soft:#6a5f5d;     /* muted captions */
  --surface:#ffffff;      /* card body / primary row */
  --row-alt:#f3eded;      /* zebra row (warm grey) */
  --hair:#d9cfce;         /* hairline / card frame (warm grey) */
  --page:#e7dede;         /* page ground behind cards */
  --field-bg:#fdfbfb;
  --code-bg:#f4efee;
  --sidebar:#efe7e6;      /* the ".dark" panel, lightened + warmed */

  /* grey-bevel header stops (Option B) */
  --head-1:#f4efef; --head-2:#e7dedd; --head-3:#d8cdcc;

  --radius:11px; --radius-sm:8px; --radius-xs:7px;
  --shadow-card:0 1px 2px rgba(60,10,8,.16), 0 8px 22px rgba(50,8,6,.13);
  --shadow-btn:0 1px 1px rgba(90,4,2,.32), 0 2px 6px rgba(90,4,2,.22);
  --bevel-hi:rgba(255,255,255,.9);
  --bevel-lo:rgba(90,10,8,.16);
  --font:Arial, Helvetica, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --brand:#e56b63; --brand-hi:#c9433b; --brand-deep:#7d1512;
  --link:#9db8ff; --link-hover:#f0a49d;
  --ink:#ece5e4; --ink-soft:#a99997;
  --surface:#211a1a; --row-alt:#2a2221; --hair:#3b2e2d; --page:#151010;
  --field-bg:#1a1414; --code-bg:#1d1616; --sidebar:#241d1c;
  --head-1:#332827; --head-2:#2a2120; --head-3:#201818;
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55);
  --shadow-btn:0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
  --bevel-hi:rgba(255,255,255,.07); --bevel-lo:rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#e56b63; --brand-hi:#c9433b; --brand-deep:#7d1512;
  --link:#9db8ff; --link-hover:#f0a49d;
  --ink:#ece5e4; --ink-soft:#a99997;
  --surface:#211a1a; --row-alt:#2a2221; --hair:#3b2e2d; --page:#151010;
  --field-bg:#1a1414; --code-bg:#1d1616; --sidebar:#241d1c;
  --head-1:#332827; --head-2:#2a2120; --head-3:#201818;
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55);
  --shadow-btn:0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
  --bevel-hi:rgba(255,255,255,.07); --bevel-lo:rgba(0,0,0,.5);
}
:root[data-theme="light"]{ color-scheme:light; }

/* ------------------------------- BASE ------------------------------- */
body{
  font-family:var(--font); font-size:13px; color:var(--ink);
  background:var(--page); margin:8px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;  /* stop mobile font-boosting */
}
table{ font-family:var(--font); color:var(--ink); }

a:link,a:visited{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--link-hover); }
a:active{ color:var(--brand-hi); }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

hr{ height:1px; border:0; background:var(--hair); margin:.5em 0; }

/* Headings — red identity; the top-level ones read as grey-bevel section bars */
h1,h2,h3,h4,h5,h6{ font-family:var(--font); color:var(--brand); margin:0; }
h1,h2{
  font-size:19px; text-wrap:balance; margin:2px 0 12px; padding:9px 13px;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--head-1),var(--head-2) 55%,var(--head-3));
  box-shadow:inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
}
/* [heading] wiki tags render as <h3> — give them a distinct red left-accent bar. */
h3{
  font-size:16px; margin:22px 0 9px; padding:6px 0 6px 13px; letter-spacing:.01em;
  border-left:4px solid var(--brand); border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  background:linear-gradient(90deg, color-mix(in srgb,var(--brand) 10%, transparent), transparent 62%);
  text-decoration:none;
}
h3 a, a:has(> h3){ text-decoration:none; }
h4{ font-size:13.5px; margin:14px 0 5px; text-indent:0; }
h5,h6{ font-size:13px; margin:12px 0 4px; }

/* legacy inline-format helpers (from manglecontent) */
div.itl{ display:inline; font-style:italic; }
div.bold{ display:inline; font-weight:bold; }
div.under{ display:inline; text-decoration:underline; }
div.title{ font-size:20px; font-weight:bold; color:var(--brand); }

pre{
  background:var(--code-bg); border:1px solid var(--hair); border-radius:var(--radius-xs);
  padding:11px 13px; overflow-x:auto; margin:0 0 12px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;
}

/* ------------------------- SIDEBAR ( .dark ) ------------------------- */
/* The left nav panel. Was a dark tiled div; now a warm rounded card. */
div.dark{
  font-family:var(--font); color:var(--ink);
  background:var(--sidebar); border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:10px; overflow:hidden;
}
div.dark table{ width:100%; }

/* nav lists */
ul.list{ list-style:none; margin:8px 0; padding:0; }
ul.list li{ margin:0; }
.list{ color:var(--ink); }
a.list, ul.list a{
  display:block; text-decoration:none; color:var(--ink); font-weight:bold; font-size:13px;
  padding:8px 11px; border-radius:var(--radius-xs); margin:1px 0;
}
a.list:hover, ul.list a:hover{
  background:var(--surface); color:var(--brand);
  box-shadow:0 1px 2px rgba(60,10,8,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
/* "(LOCKED)" tag inside the Change Content pill — one item, red badge */
.locktag{ color:var(--brand); font-weight:bold; font-size:11px; letter-spacing:.04em; }

/* ------------------------- FORMS / FIELDSETS ------------------------- */
fieldset{
  border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface);
  box-shadow:var(--shadow-card); padding:12px 14px 14px; margin:12px 0;
}
legend{
  font-family:var(--font); font-weight:bold; color:var(--brand);
  font-size:13px !important; letter-spacing:.01em;
  padding:6px 12px; border-radius:var(--radius-xs);
  background:linear-gradient(180deg,var(--head-1),var(--head-2) 55%,var(--head-3));
  box-shadow:inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
}

input[type=text], input[type=password], input[type=search], input[type=email], textarea, select{
  font-family:var(--font); font-size:13px; color:var(--ink); background:var(--field-bg);
  border:1px solid var(--hair); border-radius:var(--radius-xs); padding:8px 10px; margin:3px 0;
  max-width:100%; box-sizing:border-box;   /* keep padding/border inside the width */
}
textarea{ width:100%; line-height:1.45; }
input:focus, textarea:focus, select:focus{
  outline:0; border-color:var(--link);
  box-shadow:inset 0 1px 2px rgba(10,15,50,.06), 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);
}
input[readonly]{ color:var(--ink-soft); background:var(--row-alt); }

/* Login + sidebar search: the bare "Username:"/"Password:" text labels are different
   widths, so inline fields start at different x and look ragged; and the search box was
   too short. Make all three full-width blocks (box-sizing keeps them inside the ~200px
   fieldset) so they align and match. Scoped to login/search forms (content inputs safe). */
form[action*="login.php"] input[type=text],
form[action*="login.php"] input[type=password],
form[action*="search.php"] input[type=text]{
  display:block; width:100%; max-width:220px; margin:3px 0 10px;
}

input[type=submit], input[type=button], button{
  font-family:var(--font); font-weight:bold; font-size:13px; color:#fff; cursor:pointer;
  border:0; padding:9px 15px; border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--brand-hi),var(--brand) 60%,var(--brand-deep));
  box-shadow:var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .08s, filter .12s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
input[type=submit]:active, input[type=button]:active, button:active{
  transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(70,0,0,.5);
}
input[type=radio], input[type=checkbox]{ accent-color:var(--brand); }

/* --------------------------- CONTENT TABLES ------------------------- */
/* Bordered result/stat tables (border="1") become clean carded tables. */
table[border="1"]{
  border-collapse:collapse; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow-card);
  overflow:hidden; margin:8px 0;
}
table[border="1"] td, table[border="1"] th{ border:1px solid var(--hair); padding:8px 11px; }
table[border="1"] th{
  background:linear-gradient(180deg,var(--head-1),var(--head-3)); color:var(--brand);
  font-size:12px; letter-spacing:.02em; text-align:left;
}
table[border="3"]{
  border-collapse:collapse; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow-card); overflow:hidden;
}
table[border="3"] td, table[border="3"] th{ border:1px solid var(--hair); padding:8px 11px; }
table[border="3"] th{ background:linear-gradient(180deg,var(--head-1),var(--head-3)); color:var(--brand); text-align:left; }

/* Tables built for wiki [table] markup keep their author borders (red) but get spacing */
table[style*="border-collapse"] td, table[style*="border-collapse"] th{ padding:6px 9px; }

table.center{ margin-left:auto; margin-right:auto; }

/* --------------------------- THEME TOGGLE --------------------------- */
button.themebtn{
  font-family:var(--font); font-weight:bold; font-size:12px; color:var(--brand);
  background:linear-gradient(180deg,var(--head-1),var(--head-2) 55%,var(--head-3));
  border:1px solid var(--hair); border-radius:var(--radius-xs); padding:7px 12px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
}
button.themebtn:hover{ filter:brightness(1.03); transform:none; }
button.themebtn:active{ transform:translateY(1px); box-shadow:inset 0 2px 4px var(--bevel-lo); }

/* --------------------------- FOOTER LINKS --------------------------- */
/* The back/home/unsubscribe/report/history/recent row → shadowed bevel pills. */
.footlinks{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:8px auto 12px;
}
.footlinks a{
  display:inline-block; text-decoration:none; color:var(--brand); font-weight:bold; font-size:12.5px;
  padding:7px 14px; border-radius:var(--radius-xs); border:1px solid var(--hair);
  background:linear-gradient(180deg,var(--head-1),var(--head-2) 55%,var(--head-3));
  box-shadow:var(--shadow-btn), inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
  transition:transform .08s, filter .12s, box-shadow .12s;
}
.footlinks a:hover{
  color:var(--brand); filter:brightness(1.04); transform:translateY(-1px);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--bevel-hi);
}
.footlinks a:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px var(--bevel-lo); }

/* Constrain overflow without overriding explicit banner/logo heights
   (a global height:auto stretched the /graphics/*.top.jpg header banner). */
img{ max-width:100%; }

/* ------------------------- MOBILE (phase B) ------------------------- */
/* Stack the 2-column layout table on phones: the fixed 230px sidebar column
   otherwise squeezes the article. Scoped to #pagelayout's OWN cells (direct
   children) so nested sidebar/article tables are untouched. */
@media (max-width:720px){
  #pagelayout,
  #pagelayout > tbody,
  #pagelayout > tbody > tr,
  #pagelayout > tbody > tr > td{
    display:block;
    width:auto !important;
    height:auto !important;
  }
  #pagelayout > tbody > tr > td{ padding:0 !important; }
  div.dark{ margin:0 0 14px; }
  /* keep the sidebar's own inner controls comfortable + tap-friendly */
  ul.list a, a.list{ padding:11px 12px; }
  body{ margin:6px; }
}