/* dodplugins.net — the whole skin, gathered from the PHP site.
   Several components kept their CSS inline in their own plugin file rather
   than in the stylesheet, which is how the server cards and the map grid
   came across unstyled the first time: the markup was right and the rules
   for it simply were not here. All five sources are extracted now. */

/* --- the 2007 skin (views/classic-style.php) --- */
/* The 2007 dodplugins.net skin, taken from the Wayback copy of
   templates/dodplugins/screen.css: #333 page, #336699 header, #EEE menu,
   white content, #DDD footer, Verdana 12px, links #003366 / #336699.
   Kept faithful; the table layout is rebuilt with flex so it survives a
   phone, and long content scrolls instead of overflowing a fixed height. */
body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;color:#000;background:#333;margin:10px}
a:link,a:visited,a:active{color:#036;text-decoration:none}
a:hover{color:#369;text-decoration:none}
h1,h2,h3,h4,h5{margin:5px 0}
form{margin:0}
.shell{width:80%;max-width:none;margin:0 auto;border:1px solid #000;border-collapse:collapse;background:#fff}
.hdr{background:#369;text-align:center;padding:5px}
.hdr img{width:98%;max-width:none;height:auto;display:block;margin:0 auto;border:0}
.bar{background:#036;color:#fff;text-align:center;font-size:10px;padding:3px 10px}
.bar a{color:#ddd}
.bar a:hover{color:#fff}
.cols{display:flex;align-items:stretch;flex-wrap:wrap}
.navcol{background:#eee;padding:10px;width:170px;flex:0 0 170px;border-right:1px solid #000;font-size:12px}
.navcol ul{list-style:none;margin:0;padding:0 0 0 5px}
.navcol li{margin:0;padding:1px 0}
.navcol li.sub{padding-left:10px}
.navcol .current{font-weight:bold}
.navcol form{margin-top:10px}
.navcol input[type=search],.navcol input[type=text]{width:100%;font-size:10px;box-sizing:border-box}
.navcol input[type=submit],.navcol button{width:100%;font-size:10px;margin-top:2px;cursor:pointer}
.content{background:#fff;padding:20px;flex:1;min-width:0}
.ftr{background:#ddd;text-align:center;font-size:10px;padding:4px;border-top:1px solid #000}
/* news/list rows, as the original styled them */
.post_title{font-weight:bold;font-size:12px;color:#000;border-bottom:1px solid #ddd;padding:3px 0}
.post_date{text-align:right;font-weight:bold;border-bottom:1px solid #ddd;padding:3px 0;white-space:nowrap}
.post_short{text-align:justify;padding:5px 0 10px}
table.rows{width:100%;border-collapse:collapse}
table.rows td{vertical-align:top}
.stat_row{font-size:11px;color:#333;padding:2px 0}
.tag{border:1px solid #ccc;background:#f4f4f4;padding:0 5px;font-size:10px;margin-right:3px;white-space:nowrap}
/* One definition, because there used to be two.
   The skin's button and a button from a second stylesheet both matched .btn,
   and the cascade split them down the middle: the later rule won the
   background (transparent) while the earlier one won the colour (white, and
   !important, so nothing downstream could correct it). White on transparent
   is invisible, which is what it was doing on 908 pages. No !important here,
   and the variants only restate colour. */
.btn{display:inline-block;border:1px solid #036;background:#036;color:#fff;
  padding:3px 9px;font-size:11px;margin-right:5px;text-decoration:none;cursor:pointer}
.btn:hover{background:#369;border-color:#369;color:#fff}
.btn.alt{background:#fff;color:#036}
.btn.alt:hover{background:#eee;color:#036}
/* a download, and a hand-off to the compiler */
.btn.dl{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn.dl:hover{opacity:.92;color:#fff}
.btn.cc{background:#fff;color:#036;border-color:#036}
.btn.cc:hover{background:#eef3f8;color:#036}
pre.body,pre.bb-code{white-space:pre-wrap;font-family:"Courier New",Courier,monospace;font-size:11px;background:#f7f7f7;border:1px solid #ddd;padding:8px;overflow:auto}
blockquote.bb-quote{border-left:3px solid #ddd;margin:8px 0;padding:4px 0 4px 12px;color:#333}
blockquote.bb-quote cite{display:block;font-weight:bold;font-style:normal}
.crumb{font-size:11px;color:#333;margin-bottom:4px}
.notice{background:#ffd;border:1px solid #dda;padding:6px 10px;font-size:11px;margin-bottom:12px}
@media(max-width:760px){.shell{width:100%}.cols{display:block}.navcol{width:auto;flex:none;border-right:0;border-bottom:1px solid #000}}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bar .barnote{flex:1 1 260px}
.bar .barlogin{white-space:nowrap}
.bar .barlogin a{color:#ddd}
.bar .barlogin a:hover{color:#fff}
.bar .barlogin strong{color:#fff}
/* Release panels. The era's idiom is a bordered box with a coloured caption
   bar -- the same shape MyBB's own tables use -- so entries separate cleanly
   without looking anachronistic. */
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin-top:6px}
.rel{border:1px solid #99a;background:#fff;display:flex;flex-direction:column}
.rel:hover{border-color:#369}
.rel_top{background:#369;color:#fff;padding:5px 8px;display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.rel_name{color:#fff !important;font-weight:bold;font-size:12px;text-decoration:none;flex:1;min-width:0;overflow-wrap:anywhere}
.rel_name:hover{text-decoration:underline;color:#fff !important}
.rel_date{font-size:10px;color:#cfe0f0;white-space:nowrap}
.rel_body{padding:8px;flex:1}
.rel_by{font-size:11px;color:#555;margin-bottom:4px}
.rel_desc{font-size:11.5px;color:#222;line-height:1.45}
.rel_kinds{margin-top:6px}
.rel_foot{border-top:1px solid #ddd;background:#f4f4f6;padding:5px 8px;display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rel_stats{font-size:10px;color:#555}
.rel_acts{white-space:nowrap}
.rel_acts .btn{font-size:10px;padding:2px 8px;margin:0 0 0 4px}
@media(max-width:520px){.rels{grid-template-columns:1fr}}
.prunebar{background:#ffd;border:1px solid #dda;padding:6px 9px;margin:0 0 10px;font-size:11px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prunebar .btn{font-size:11px;padding:3px 10px}
.prunebar .prunenote{color:#666;flex:1 1 240px}
.relck{margin:0 6px 0 0;vertical-align:middle}
.rel_top:has(.relck) .rel_name{flex:1}
table.pev{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:8px}
table.pev th{background:#369;color:#fff;text-align:left;padding:4px 7px;font-size:11px}
table.pev td{border-bottom:1px solid #e3e3e6;padding:3px 7px;vertical-align:top}
table.pev tr:hover td{background:#f6f8fa}
tr.pevgroup td{background:#eef2f6 !important;font-weight:bold;color:#036;text-transform:capitalize;padding:4px 7px}
.pevname a{font-family:"Courier New",monospace;font-weight:bold}
.pevval{font-family:"Courier New",monospace;overflow-wrap:anywhere}
.pevmeta{color:#666;white-space:nowrap}
.pevnote{color:#333}
form.advsearch{margin:0 0 14px}
table.adv{width:100%;border-collapse:collapse;background:#eef2f6;border:1px solid #c6d2de}
table.adv td{padding:5px 8px;vertical-align:top;width:33.33%}
table.adv label{display:block;font-size:10px;color:#456;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
table.adv input[type=text],table.adv select{width:100%;font-size:11.5px;padding:3px 4px;border:1px solid #99a;background:#fff;box-sizing:border-box}
table.adv td.advgo{background:#e2e9f1;border-top:1px solid #c6d2de}
table.adv .advnote{font-size:10px;color:#667;margin-left:8px}
@media(max-width:700px){table.adv td{display:block;width:auto}}

/* --- repository tables and cards (views/repo-style.php) --- */
:root{--bg:#f6f7f9;--card:#fff;--ink:#1a1d21;--muted:#666e78;--line:#e3e6ea;--accent:#8a5a2b;--accent2:#3d6b45}
@media (prefers-color-scheme:dark){:root{--bg:#14171a;--card:#1c2024;--ink:#e8eaed;--muted:#9aa3ad;--line:#2c3237;--accent:#c98a4b;--accent2:#6aa273}}
*{box-sizing:border-box}
body.dodrepo{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 64px}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.top h1{margin:0;font-size:26px;letter-spacing:-.02em}
.top a{color:var(--muted);text-decoration:none;font-size:14px;margin-left:14px}
.top a:hover{color:var(--accent)}
.lede{color:var(--muted);margin:-8px 0 22px;font-size:14px}
.facets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.facet{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);text-decoration:none;font-size:13px}
.facet:hover{border-color:var(--accent);color:var(--accent)}
.facet.on{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:16px;line-height:1.3}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.by{font-size:13px;color:var(--muted)}
.by a{color:var(--accent2);text-decoration:none}
.desc{font-size:13.5px;color:var(--muted);flex:1}
.meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.tag{border:1px solid var(--line);border-radius:5px;padding:1px 7px}
.fname{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink);word-break:break-all}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
/* .btn is defined once, above. The second copy that used to be here is
   what made every button on the site invisible. */
.pager{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);font-size:13px;background:var(--card)}
.pager .cur{background:var(--accent);border-color:var(--accent);color:#fff}
.detail{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.detail h1{margin:0 0 6px;font-size:24px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;font-size:14px;margin:18px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.sec{margin-top:22px}
.sec h2{font-size:15px;margin:0 0 7px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
pre.body{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:12px;overflow-x:auto;margin:0}
.cvars{display:flex;flex-wrap:wrap;gap:6px}
.cvar{font-family:ui-monospace,monospace;font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 8px}
.empty{color:var(--muted);padding:40px 0;text-align:center}
table.files{width:100%;border-collapse:collapse;font-size:13.5px}
table.files td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.files tr:last-child td{border-bottom:0}
table.files td.acts{text-align:right;white-space:nowrap;width:1%}
table.files .muted{color:var(--muted);font-size:12.5px;white-space:nowrap}
table.files.old{opacity:.72}
table.files.old .fname{text-decoration:line-through;text-decoration-color:var(--line)}
.pill{display:inline-block;font-size:11.5px;padding:1px 7px;border:1px solid var(--line);border-radius:4px;color:var(--muted);margin-left:6px}
@media(max-width:640px){table.files td.acts{text-align:left}table.files td{display:block;border:0;padding:2px 0}table.files tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}}

/* --- the map grid (views/tpl-maps-archive.php) --- */
.mapgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-top:12px }
.mapcard { border:1px solid #cfcfcf; background:#fff; padding:6px; text-align:center }
.mapcard a { text-decoration:none; color:#333 }
.mapcard img { width:100%; height:150px; object-fit:cover; display:block; background:#eee; border:1px solid #e2e2e2 }
.mapcard .nm { font-size:12px; margin-top:5px; word-break:break-all; line-height:1.3 }
.mapcard .dim { font-size:11px; color:#777 }
.mapfilter { margin:10px 0 4px; padding:10px; border:1px solid #cfcfcf; background:#f3f3f3 }
.mapfilter input { padding:5px 7px; width:280px; max-width:100% }
.mapfilter .count { font-size:12px; color:#555; margin-left:10px }

/* --- friendly server cards (dod-servers.php) --- */
.srvmenu{list-style:none;margin:4px 0 0;padding:0}
    .srvmenu .srvitem{margin:0 0 8px;padding:0;list-style:none}
    /* The card is a div, not a link: an anchor cannot legally contain another
       anchor, and the card needs both a stats link and a Connect link. The
       stats link is stretched over the whole card with ::after instead. */
    .srvcard{position:relative;border:1px solid #cfcfcf;background:#fff;overflow:hidden}
    .srvcard:hover{border-color:#369}
    .srvcard.isdown{background:#faf7f7}
    .srvmain{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden}
    .srvmain::after{content:"";position:absolute;inset:0}
    .srvshot{display:block;height:52px;background-size:cover;background-position:center;
             border-bottom:1px solid #cfcfcf;position:relative}
    .srvshot .srvmapname{position:absolute;left:0;right:0;bottom:0;padding:2px 5px;font-size:10px;
                         color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
    .srvtop{display:flex;align-items:center;gap:4px;padding:5px 6px 2px}
    .srvdot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
    .srvdot.up{background:#3c8c3c}
    .srvdot.stale{background:#c89b3c}
    .srvdot.down{background:#a33}
    .srvnm{font-size:10px;font-weight:bold;line-height:1.25;color:#036}
    .srvmeta{display:flex;justify-content:space-between;gap:4px;font-size:10px;color:#666;padding:0 6px 3px}
    .srvcount strong{color:#036;font-size:11px}
    .srvbots{color:#999}
    .srvoff{color:#a33}
    .srvbar{height:3px;background:#e6e6e6;margin:0 6px 4px;display:flex}
    .srvbar i{display:block;height:100%;background:#369}
    .srvbar b{display:block;height:100%;background:#9bb3c9}
    .srvmaprow{display:block;font-size:10px;color:#666;padding:0 6px 4px}
    .srvnext{display:flex;justify-content:space-between;gap:6px;border-top:1px dotted #ddd;
             margin:0 6px;padding:3px 0 2px;font-size:10px;color:#666}
    .srvtl{color:#036;white-space:nowrap}
    .srvnm2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .srvnm2 strong{color:#444}
    .srvstale{display:block;font-size:9px;color:#888;padding:0 6px 3px}
    .srvconnect{position:relative;z-index:2;display:block;text-align:center;font-size:10px;
                padding:3px 0;border-top:1px solid #cfcfcf;background:#eef2f6;color:#036}
    .srvconnect:hover{background:#369;color:#fff}
    .srvmenu .srvstats{margin-top:2px;padding:0;list-style:none}
    .srvmenu .srvstats a{font-size:10px}

/* --- other links menu (dod-links.php) --- */
.lnkmenu{list-style:none;margin:2px 0 0;padding:0 0 0 5px}
      .lnkmenu li.sub{padding-left:10px;line-height:1.5}
      .lnkmenu a{font-size:11px}

/* --- the conversation ---------------------------------------------------
   Threads read as a back-and-forth: whoever started it keeps the left, and
   everyone answering sits on the right. Alternating per author was the other
   option and it does not survive contact with the data -- the biggest thread
   here has 39 different people in it. */
.convo{display:flex;flex-direction:column;gap:10px;margin-top:4px}

.who{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;gap:3px}
.who .name{font-size:10px;color:#036;line-height:1.2;word-break:break-word;text-align:center}


@media(max-width:640px){
  .turn,.turn.right{max-width:100%;flex-direction:row;text-align:left;margin-left:0}
  .who{flex:0 0 44px}
  .face{width:36px;height:36px}
}

/* --- the board --------------------------------------------------------
   Taken from the live forum's own theme rather than guessed at from a
   screenshot, which is what the last two attempts were. The values are its
   values: the header bar runs #007fd6 to #0165a7, the column strip is very
   nearly black at #2c2c2c to #111011, rows alternate #f5f5f5 and #efefef with
   that bevelled #fff/#ddd border, the frame is one #ccc line around white,
   and links are #0072BC on Tahoma at 13px.

   The forum name is ranged left. It reads as centred in a screenshot because
   the icon column in front of it is wide and empty -- centring it, which is
   what I did last time, is the single thing that made the page look most
   unlike itself. */
.board{font-family:Tahoma,Verdana,Arial,sans-serif;font-size:13px;color:#333;line-height:1.4}
.board a{color:#0072BC;text-decoration:none}
.board a:hover{color:#0072BC;text-decoration:underline}

.tborder{background:#fff;width:100%;border:1px solid #ccc;padding:1px;
  border-collapse:separate;border-spacing:0;margin:0 0 14px}
.tborder td,.tborder th{padding:6px;vertical-align:middle}

.thead{background:#0072bf;background-image:linear-gradient(to bottom,#007fd6,#0072bf 45%,#0165a7);
  color:#fff;border-bottom:1px solid #263c30;padding:8px !important;
  font-size:13px;font-weight:bold;text-align:left}
.thead a{color:#fff}
.thead .expcol{float:right;font-weight:normal;font-size:11px;color:#cfe6f7;
  opacity:.85;letter-spacing:1px}

.tcat{background:#1e1e1d;background-image:linear-gradient(to bottom,#2c2c2c,#1e1e1d 50%,#111011);
  color:#fff;border-top:1px solid #444;border-bottom:1px solid #000;
  padding:6px !important;font-size:11px;font-weight:bold}
.tcat a{color:#fff}

.trow1{background:#f5f5f5;border:1px solid;border-color:#fff #ddd #ddd #fff}
.trow2{background:#efefef;border:1px solid;border-color:#fff #ddd #ddd #fff}
.tfoot{border-top:1px solid #fff;padding:6px;background:#ddd;color:#666;font-size:11px}
.smalltext{font-size:11px}

/* the row marker: a closed ring for a forum, a sheet for a thread. Both are
   the honest icon now -- the board really is shut, and a thread really is a
   document. */
.board td.ico{width:34px;padding:6px 2px 6px 8px !important;line-height:0}
.board td.ico svg{width:22px;height:22px;vertical-align:middle}
.board .ring{fill:#e2e5e8;stroke:#b4bcc4;stroke-width:1}
.board .lock{fill:#8b939b}
.board .sheet{fill:#f2e2be;stroke:#c8a86b;stroke-width:1}
.board .fold,.board .rule{fill:#c8a86b}

.board .subj{font-weight:bold;font-size:13px}
.board .byline{color:#666;font-size:11px;margin-top:2px}
.board .desc{color:#666;font-size:11px;margin-top:2px;font-weight:normal}
.board td.c{text-align:center;white-space:nowrap;width:85px}
.board td.lp{text-align:right;white-space:nowrap;font-size:11px;color:#666;
  line-height:1.5;width:1%}
.board td.lp .lpt{font-weight:bold;display:block;max-width:210px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-left:auto}
.board .stars{color:#c9ccd0;font-size:12px;letter-spacing:1px}
.board .emptyrow td{color:#666;font-style:italic;padding:14px 8px}

/* --- one post ---------------------------------------------------------
   The board's own arrangement: the poster across the top of the panel with
   their standing on the right, then the date and post number, then the body. */
.pcard{border:1px solid #ccc;background:#fff;padding:1px;margin:0 0 14px}
.pwho{display:flex;align-items:flex-start;gap:12px;background:#f5f5f5;
  border-bottom:1px solid #ddd;padding:9px 10px}
.pwho .face{width:60px;height:60px;flex:0 0 60px;border:1px solid #ccc;
  background:#fff;padding:2px;object-fit:cover}
.pwho .face.blank{display:flex;align-items:center;justify-content:center;
  font:bold 22px Tahoma,sans-serif;color:#9fb3c6;background:#fff}
.pwho .nm{font-weight:bold;font-size:14px;color:#0072BC}
.pwho .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#c2c7cc;margin-left:6px;vertical-align:middle}
.pwho .role{font-size:11px;color:#666;margin-top:2px}
.pwho .pstats{margin-left:auto;text-align:right;font-size:11px;color:#666;
  line-height:1.6;white-space:nowrap}
.pdate{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;
  background:#efefef;border-bottom:1px solid #ddd;font-size:11px;color:#666}
.pdate .num{font-weight:bold;color:#0072BC;font-size:12px}
.pbody{padding:12px 12px 14px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.pbody p{margin:0 0 10px}
.pbody p:last-child{margin-bottom:0}
.pbody a{color:#0072BC}
/* the board's quote and code panels, which are labelled boxes rather than
   indented bars */
.pbody blockquote{margin:10px 0;padding:0;border:1px solid #ddd;background:#f5f5f5}
.pbody blockquote::before{content:"Quote:";display:block;font-weight:bold;
  font-size:11px;color:#444;padding:4px 8px;border-bottom:1px solid #ddd;background:#e9e9e9}
.pbody blockquote>*{margin:0;padding:8px}
.pbody blockquote>*+*{padding-top:0}
/* Pawn, as code. These posts are mostly plugin source -- 2,818 carry a [code]
   or [php] block -- and setting it dark separates it from the prose around it
   at a glance, which is most of what a code block is for. The label is sticky
   to the left so a wide listing still says what it is once scrolled sideways;
   the padding lives on the inner <code> so the label stays flush. */
.pbody pre.code{margin:10px 0;padding:0;background:#0d1117;border:1px solid #2b3440;
  overflow-x:auto;color:#d6deeb}
.pbody pre.code::before{content:"Code:";display:block;position:sticky;left:0;
  font:bold 11px Tahoma,Verdana,sans-serif;color:#8fb4d9;padding:5px 10px;
  border-bottom:1px solid #2b3440;background:#161b22}
.pbody pre.code code{display:block;padding:10px;white-space:pre;
  font:12px/1.55 Consolas,"Courier New",monospace}
.pbody img{max-width:100%;height:auto}

.boardtop{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:11px;color:#666;margin:0 0 6px;font-family:Tahoma,Verdana,sans-serif}
.boardtop input[type=search]{font-size:11px;padding:2px 5px;border:1px solid #ccc;width:190px}

@media(max-width:640px){
  .board td.lp .lpt{max-width:110px}
  .board td.rate,.board th.rate{display:none}
  .pwho{flex-wrap:wrap}
  .pwho .pstats{margin-left:72px;text-align:left;width:100%}
}

/* --- the compiler form ------------------------------------------------
   These rules used to live in a <style> block inside the PHP page, and went
   out with the PHP -- which is why the form came back as a bare textarea and
   a default button. Scoped to .compiler rather than left as bare element
   selectors, so they cannot reach the search box in the sidebar. */
.compiler label{display:block;font-size:11px;color:#333;margin-bottom:3px}
.compiler textarea{width:100%;min-height:320px;box-sizing:border-box;
  font-family:"Courier New",Consolas,monospace;font-size:11px;padding:8px;
  border:1px solid #999;line-height:1.45}
.compiler input[type=text],.compiler input[type=file]{width:100%;box-sizing:border-box;
  padding:4px;border:1px solid #999;font-size:11px}
.compiler .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.compiler .row>div{flex:1;min-width:180px}
.compiler button{border:1px solid #036;background:#036;color:#fff;padding:5px 14px;
  font-size:11px;cursor:pointer}
.compiler button:hover{background:#369;border-color:#369}
.compiler pre{white-space:pre-wrap;font-family:"Courier New",Consolas,monospace;
  font-size:11px;background:#f7f7f7;border:1px solid #ddd;padding:8px;overflow:auto;
  margin:0}
.compiler .ok{color:#060;font-weight:bold;margin:0 0 6px}
.compiler .bad{color:#a00;font-weight:bold;margin:0 0 6px}
.compiler .note{font-size:11px;color:#555}
.compiler .box{border:1px solid #ddd;padding:10px;margin-bottom:14px}






/* --- the banner, the bar and the menu all stay put ---------------------
   Nothing here changes as you scroll, which is the one rule this took four
   goes to learn. Earlier versions shrank the banner once the page moved:
   measuring its height every frame fed back into the layout being measured,
   cropping it to a strip threw the wordmark away, and taking ~150px out of
   the document mid-scroll fought the scroll position hard enough that the
   page felt stuck. A layout that reflows while you scroll has no good
   version, so this one is fixed at every scroll position.

   The banner's height is not measured -- it is derived, because everything
   that decides it is already in this file:

     logo.jpg is 840x137            -> 6.1314 : 1
     .shell is 80% of body,
       body has a 10px margin       -> shell  = 0.80 x (100vw - 20px)
     .hdr img is 98% of the shell   -> image  = 0.784 x (100vw - 20px)
     height = width / 6.1314        -> 12.787vw - 2.56px
     .hdr adds 5px padding twice    -> 12.787vw + 7.44px
     the bar below it is 30px       -> 12.787vw + 37.44px

   The two offsets are rounded a little short on purpose. Sticky elements
   overlapping by a pixel is invisible -- they have solid backgrounds and the
   banner sits on top -- whereas a pixel of daylight would let the page show
   through between them. */
@media (min-width: 761px) {
  /* The banner and the bar are one sticky element, so the join between them
     cannot drift. Earlier they pinned separately, each at its own computed
     offset, and the arithmetic for the banner's height was a few pixels short
     -- which showed as a gap between the two. There is no offset between them
     to compute now.

     11px, not 0: the masthead does not start at the top of the window. body
     carries a 10px margin and .shell a 1px border, so it begins 11px down,
     and pinning it at 0 made it slide up those 11px on the first scroll
     before settling. Pinned where it already is, it never moves.

     The shadow paints the strip above it in the page's own background, which
     nothing else covers -- without it, content scrolling underneath shows
     through a thin window over the top. */
  .masthead{position:sticky;top:11px;z-index:30;box-shadow:0 -11px 0 1px #333}

  /* The column keeps stretching to the full height of the page beside it, so
     its grey panel and its dividing rule run the whole way down. It is the
     contents that pin. Sticking the column itself needed align-self:flex-start,
     which collapsed it to the height of the links and left bare white above
     and below the menu.

     The offset is still derived -- 12.787vw for the banner (840x137 at 98% of
     a shell that is 80% of body, less body's 20px of margin), 30px for the
     bar, 11px for where it all starts -- but a pixel out here only pins the
     menu a hair high or low, with no seam to show for it. */
  .navinner{position:sticky;top:calc(12.787vw + 48px)}

  /* The banner is on screen, so the wordmark in the bar is a second copy. */
  .bar .barlogo{display:none}

  /* An anchor jump would otherwise land underneath all of that. */
  .pcard,.crumb,h2{scroll-margin-top:calc(12.787vw + 58px)}
}

@media (max-width: 760px) {
  /* Stacked layout: the menu is above the content, so pinning it would cover
     the page it belongs to, and a banner this tall would swallow a phone.
     The bar alone pins -- it is a sticky child of a masthead that is not
     sticky here, which the browser handles the same way. It carries the
     wordmark, so the branding stays even as the banner scrolls off. */
  .bar{position:sticky;top:0;z-index:29}
  .bar .barnote{font-size:9px}
}