/* metaeden.net mobile framework "E" -- restructures the desktop page for 390px
   (fluid to 360).  TASK-1135[Q].  The mobile counterpart of browser-frame.css;
   the two are never both live (see the swap comment in sites/v4-metaeden.html).

   CONTENT-AGNOSTIC BY CONSTRUCTION.  Every rule here targets either structure
   the desktop page already has (.shell, .hd, #page-games tables, .ft) or
   chrome that mobile-e.js builds at runtime FROM that structure.  Nothing
   below names a game, a document, or a count.  Add content to the desktop
   page and it flows through; it does not need a matching rule here.

   SELF-SCOPING, which is what makes the swap safe.  Rules are either prefixed
   `body.mobile-e` (a class only mobile-e.js adds) or target ids/classes only
   mobile-e.js creates (#mtop, .ehdr, .mtbar, .mjump, .mdir, #mdrawer, #mtray).
   So even if this stylesheet were served to a desktop viewport it would paint
   nothing.  The media attribute on the <link> is the primary gate; this is the
   second one, and the reason a stale cache cannot produce a half-swapped page.

   READABILITY FLOOR (CLAUDE.md): body text here is 12px and up.  The 9-11px
   sizes below are decoration only (bevel-button counts, ad labels, the .newb
   superscript) and are never the only copy of anything. */
body.mobile-e{font-size:17px;min-width:0;overflow-x:hidden}
body.mobile-e.offline{overflow:hidden;height:100vh}
body.mobile-e *{scrollbar-width:thin}
body.mobile-e .shell{width:calc(100% - 20px);margin:0 auto 36px}
body.mobile-e .hd{display:none}
body.mobile-e .mq{font-size:13px;padding:5px 2px}
/* sticky header + top bar */
#mtop{position:sticky;top:0;z-index:45;margin:0 -10px;background:#cbcbcb;box-shadow:0 1px 0 #888}
.ehdr{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:2px outset #eee}
.ehdr .logo{width:44px;height:34px;font-size:18px;display:inline-grid;place-items:center;text-decoration:none;cursor:pointer}
.ehdr .logo svg{width:28px;height:18.5px;display:block}
#mdrawer .dhd .logo svg{width:24px;height:16px;display:block}
.ehdr .nm{font-size:21px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ehdr .mbtn{margin-left:auto;font:700 14px "Times New Roman",serif;background:#c0c0c0;border:2px outset #fff;padding:4px 9px;color:#000;text-decoration:none;white-space:nowrap;cursor:pointer}
.ehdr .mbtn.on{border-style:inset;background:#b4b4b4}
.ehdr #who{font-size:14px}
/* bevel button bar (footer copy + sticky top copy) */
.mtbar{display:flex;gap:3px;padding:4px;background:#c0c0c0;border-top:2px solid #eee}
.mtbar a{flex:1;display:grid;place-items:center;border:2px outset #fff;background:#c0c0c0;font:700 12.5px "Times New Roman",serif;text-align:center;padding:7px 0;color:#000;text-decoration:none;min-width:0}
.mtbar a i{font:italic 10px Georgia,serif;color:#333}
.mtbar a.on{border-style:inset;background:#b4b4b4}
#mtop .mtbar{display:none;border-top:0;border-bottom:1px solid #999}
#mtop.showbar .mtbar{display:flex}
/* jump-to row */
.mjump{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid #888;margin:0 -10px}
.mjump b{font-size:16px}
.mjump select{flex:1;font:16px "Times New Roman",serif;border:2px inset #fff;background:#fff;color:#000;padding:3px;min-width:0}
.mjump .btn{font-size:15px;padding:3px 12px}
/* front-page directory */
.mdir{list-style:none;margin:8px 0 4px;padding:0;counter-reset:d}
.mdir li{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid #b5b5b5;font-size:18px}
.mdir li::before{counter-increment:d;content:"[" counter(d) "]";font:700 15px "Courier New",monospace;padding-top:2px}
.mdir .dd{grid-column:2;font-size:13px;color:#444}
.mdir a{font-weight:700}
.mkeytip{font:12px "Courier New",monospace;color:#444;text-align:center;padding:4px 0 0}
/* slide-out drawer */
/* DELIBERATE DEVIATION FROM THE HANDOFF (TASK-1135[Q]): the drawer and its
   scrim were authored at 58/59, which is BELOW the floating windows. On the
   real page that is not a theoretical clash: the onboarding opens the MET List
   and two IM windows within seconds of connecting, they sit at 71-74 from
   metaeden-v4.css, and mobile-e.js's own click-to-front raises a tapped one as
   far as 148. Found by opening the drawer on the live page, where the windows
   painted straight over it. Sitting above 148 and above the minimize tray (150
   and 151) puts the drawer on top of everything while it is open, which is
   what a drawer is, and the scrim now actually dims the windows it covers. */
#mscrim{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:158;display:none}
#mscrim.open{display:block}
#mdrawer{position:fixed;left:0;top:0;bottom:0;width:min(300px,82vw);background:#cbcbcb;border-right:2px outset #fff;box-shadow:5px 0 16px rgba(0,0,0,.45);z-index:159;padding:10px 0;overflow-y:auto;transform:translateX(-104%);transition:transform .18s}
#mdrawer.open{transform:none}
#mdrawer .dhd{display:flex;align-items:center;gap:8px;padding:2px 12px 10px;border-bottom:1px solid #888}
#mdrawer .dhd .logo{width:40px;height:31px;font-size:16px;display:inline-grid;place-items:center;text-decoration:none}
#mdrawer .dhd b{font-size:19px}
#mdrawer .dhd .dx{margin-left:auto;font:700 14px Verdana,sans-serif;background:#c0c0c0;border:2px outset #fff;padding:2px 8px;color:#000;text-decoration:none;cursor:pointer}
#mdrawer .dsec{font:700 12px Verdana,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#555;padding:12px 12px 4px}
#mdrawer .dl{display:block;font-size:18px;font-weight:700;padding:7px 12px;border-bottom:1px solid #b5b5b5}
#mdrawer .dl i{font:italic 13px Georgia,serif;color:#333}
#mdrawer .dl.on{color:#000;text-decoration:none;background:#bdbdbd}
#mdrawer .dl2{display:block;font-size:16px;padding:7px 12px;cursor:pointer}
#mdrawer #midi{display:flex;font:15px "Courier New",monospace;padding:7px 12px;margin:0}
#mdrawer .modeswap{display:block;font-size:16px;padding:7px 12px;margin:0;color:#0000ee}
body.neon #mdrawer .modeswap{color:#f2c200}
body.dxhr #mdrawer .modeswap{color:#f0b13e}
body.dark #mdrawer .modeswap{color:#00ffff}
#mdrawer .dfoot{padding:12px;font-size:13px;color:#444}
/* Relocated desktop chrome menus (Dial Up / Options / Directory).  mobile-e.js
   MOVES the real .browser-menu wrappers in here rather than rebuilding them,
   so these rules dress markup this file does not own: only ever add, never
   assume a shape.  browser-frame.css is not served at this viewport, so the
   panels arrive with no dropdown positioning at all and simply stack, which is
   what a drawer wants. The explicit `position:static` is a guard for the day
   someone gives .browser-menu-panel a default position elsewhere. */
#mdrawer .browser-menu{display:block}
#mdrawer .browser-menu-button{display:block;width:100%;text-align:left;background:none;border:0;
 font:700 12px Verdana,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#3f3f3f;
 padding:12px 12px 4px;cursor:default}
#mdrawer .browser-menu-panel{position:static;display:block;background:none;border:0;box-shadow:none;
 min-width:0;padding:0}
/* WHY !important ON EVERY COLOUR BELOW, and nowhere else in this file.
   metaeden-v4.css carries
     .browser-menu-panel a, .browser-menu-panel button,
     .browser-menu-panel .browser-menu-item { color:#1c1c1c !important }
   for the desktop menu, where #1c1c1c on a light grey dropdown is right. It
   loads at every width, so it followed these items into the drawer and won
   over an ordinary declaration. On the three dark themes that painted the menu
   #1c1c1c on a near-black drawer: present, positioned, and unreadable. Caught
   live, not by a test, and the reason the theme pin below now exists.
   An id plus a class outranks two classes, so these win on specificity once
   both sides are !important. */
#mdrawer .browser-menu-item{display:block;width:100%;text-align:left;background:none;border:0;
 font:16px "Times New Roman",serif;color:#000 !important;padding:7px 12px;cursor:pointer}
#mdrawer .browser-menu-item:active{background:#bdbdbd}
/* Disabled here means "not yet" (Save Your Card before a name exists), so it
   still has to be legible -- 4.6:1 on the drawer, not the usual grey-out. */
#mdrawer .browser-menu-item[disabled]{color:#5c5c5c !important;cursor:default}
#mdrawer .browser-menu-item input[type=range]{flex:1;min-width:0}
/* Theme variants.  The .dsec override rides along because the two headings it
   styles ("pages", "machinery") sat at #555 on a near-black drawer in every
   dark theme, which is ~2.9:1 and under the 4.5:1 floor in CLAUDE.md. */
body.dark #mdrawer .dsec,body.dark #mdrawer .browser-menu-button{color:#9fb4c4}
body.dark #mdrawer .browser-menu-item{color:#c0c0c0 !important}
body.dark #mdrawer .browser-menu-item[disabled]{color:#8a8a8a !important}
body.dark #mdrawer .browser-menu-item:active{background:#001c33}
body.neon #mdrawer .dsec,body.neon #mdrawer .browser-menu-button{color:#bfae74}
body.neon #mdrawer .browser-menu-item{color:#d9cfa8 !important}
body.neon #mdrawer .browser-menu-item[disabled]{color:#9a8f6f !important}
body.neon #mdrawer .browser-menu-item:active{background:#26240f}
body.dxhr #mdrawer .dsec,body.dxhr #mdrawer .browser-menu-button{color:#bda874}
body.dxhr #mdrawer .browser-menu-item{color:#cbc0a8 !important}
body.dxhr #mdrawer .browser-menu-item[disabled]{color:#998f79 !important}
body.dxhr #mdrawer .browser-menu-item:active{background:#241c0e}
/* content compaction */
body.mobile-e h2{font-size:22px;margin:18px 0 6px}
body.mobile-e h2 .sub{font-size:14px}
body.mobile-e .cols{grid-template-columns:1fr;gap:0}
body.mobile-e .cols>*{min-width:0}
body.mobile-e .search{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.mobile-e .search input{flex:1;width:40px;min-width:0}
body.mobile-e .side{margin-top:16px}
body.mobile-e .side dt{width:98px}body.mobile-e .side dd{margin-left:106px}
body.mobile-e .posts li{grid-template-columns:26px 1fr;padding:7px 0}
body.mobile-e .posts .meta{font-size:13px}
body.mobile-e .posts .k{font:700 11px Verdana,sans-serif;padding:0 5px}
body.mobile-e .newb{font-size:9px;vertical-align:3px}
body.mobile-e .small{font-size:14px}
body.mobile-e .srch input,body.mobile-e input[type=text],body.mobile-e input[type=search]{font-size:16px;max-width:100%;box-sizing:border-box}
body.mobile-e .btn{font-size:15px;padding:3px 12px}
body.mobile-e table{font-size:15px}
/* games + tools tables -> stacked rows */
body.mobile-e #page-games table,body.mobile-e #page-tools table{display:block;border:0}
body.mobile-e #page-games tbody,body.mobile-e #page-tools tbody{display:block}
body.mobile-e #page-games tr,body.mobile-e #page-tools tr{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"n p a" "d d d";gap:0 10px;padding:8px 0;border-bottom:1px solid #aaa;background:transparent}
body.mobile-e #page-games tr:first-child,body.mobile-e #page-tools tr:first-child{display:none}
body.mobile-e #page-games td,body.mobile-e #page-tools td{display:block;border:0;padding:0;background:transparent !important}
body.mobile-e #page-games td:nth-child(1),body.mobile-e #page-tools td:nth-child(1){grid-area:n;font-size:18px}
body.mobile-e #page-games td:nth-child(2),body.mobile-e #page-tools td:nth-child(2){grid-area:d;font-size:14px;color:#222;margin-top:1px}
body.mobile-e #page-games td:nth-child(3),body.mobile-e #page-tools td:nth-child(3){grid-area:p;font-size:13px;color:#444;align-self:baseline}
body.mobile-e #page-games td:nth-child(4),body.mobile-e #page-tools td:nth-child(4){grid-area:a;white-space:nowrap;align-self:baseline}
/* documents */
body.mobile-e .doclist li{grid-template-columns:1fr auto;padding:8px 0;font-size:16px}
body.mobile-e .docbody{padding:14px 14px;font-size:18px;line-height:1.6;margin:12px 0}
body.mobile-e .docbody h4{font-size:19px}
body.mobile-e .docbody pre{font-size:13.5px;line-height:1.55}
body.mobile-e .docbody textarea{font-size:15px}
/* guestbook */
body.mobile-e .gb li{padding:10px 0}
body.mobile-e .gb .h{font-size:14px}body.mobile-e .gb .h b{font-size:17px}
body.mobile-e .gbform{padding:12px 0;max-width:none}
/* webring + footer + ads */
body.mobile-e .ring{padding:12px 0;font-size:15px}
body.mobile-e .ring nav{margin-left:0;flex-wrap:wrap;gap:8px 18px}
body.mobile-e .ft{display:block;text-align:center;font-size:14px;padding-top:14px}
body.mobile-e .ft>span:not(.badges){display:block;margin:6px 0}
body.mobile-e .ft .counter{display:inline-flex}
body.mobile-e .counter b{font-size:18px;padding:1px 5px}
/* The handoff authored these as two FIXED 176px columns. 176+176+8 is 360, and
   .shell is calc(100% - 20px), so from about 388px down the pair is wider than
   the column it sits in and the whole page scrolls sideways. Measured at 360:
   #badge ran to x=362 against a 360px viewport. The handoff's own target is
   "390 fluid to 360", so this was inside its stated range; it was found by
   walking the live page at 360, not by a test. minmax(0,176px) keeps the
   authored size wherever it fits and lets both columns shrink together where
   it does not. */
body.mobile-e .badges{display:grid;grid-template-columns:repeat(2,minmax(0,176px));justify-content:center;gap:8px;margin:10px 0}
body.mobile-e .badge{width:100%;height:62px;font-size:14px}
body.mobile-e .badges>*{max-width:100%}
body.mobile-e .adblk{width:auto;margin:16px 0 6px;font-size:12px;padding:10px 12px}
body.mobile-e .adrow .adlbl{font-size:11px}
body.mobile-e .adslot{zoom:.36}
body.mobile-e .biglogo{gap:14px;margin:6px 0 16px}
body.mobile-e .biglogo svg{width:84px;height:63px}
body.mobile-e .bl-name{font-size:30px}
/* period windows on a small screen */
body.mobile-e #aolwin{padding:6px}
body.mobile-e #aolwin .win{width:min(660px,100vw - 12px);max-height:calc(100vh - 12px);overflow-y:auto}
body.mobile-e #aolwin .body{grid-template-columns:1fr}
body.mobile-e #aolwin .brand{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;text-align:left;padding:10px 14px;gap:4px 12px}
body.mobile-e #aolwin .logo{width:48px;height:44px;margin:0}
body.mobile-e #aolwin .bn{font-size:13px;letter-spacing:1px}
body.mobile-e #aolwin .scr{font-size:22px;margin:0}
body.mobile-e #aolwin .ver{margin:0 0 0 auto;padding:0;font-size:11px}
body.mobile-e #aolwin .form{padding:14px 16px 14px}
body.mobile-e #aolwin .form label{margin:10px 0 4px}
body.mobile-e #aolwin .aolbtns{flex-wrap:wrap;gap:8px;margin-top:14px}
body.mobile-e #aolwin .aolbtn{flex:1;padding:7px 10px;white-space:nowrap;letter-spacing:0}
body.mobile-e #aolprog{padding:14px 12px 16px}
body.mobile-e #aolprog .pics{flex-wrap:wrap;gap:10px}
body.mobile-e #aolprog .pic{width:104px;height:74px}
body.mobile-e #idwin .win{width:min(640px,100vw - 16px)}
body.mobile-e #imwin{left:calc(var(--page-inset-left,0px) + 6px);width:min(340px,100vw - 30px)}
body.mobile-e #pixwin{left:calc(var(--page-inset-left,0px) + 6px);width:min(340px,100vw - 30px)}
body.mobile-e #aimwin{right:calc(var(--page-inset-right,0px) + 16px);width:min(300px,100vw - 30px)}
body.mobile-e #buddywin{right:calc(var(--page-inset-right,0px) + 16px);top:calc(var(--page-inset-top,0px) + 70px);width:min(270px,100vw - 30px)}
body.mobile-e #door{padding:5vh 5vw;font-size:18px;line-height:1.7}
body.mobile-e #door .cursor{width:10px;height:20px}
/* minimize system for floating windows (MET list + IMs) */
body.mobile-e .mzd{display:none !important}
body.mobile-e .w95 .tb .mnb{margin-left:auto;width:20px;height:18px;background:#c0c0c0;border:2px outset #fff;color:#000;font:700 11px Verdana,sans-serif;display:grid;place-items:center;cursor:pointer;user-select:none}
body.mobile-e .w95 .tb .mnb~.bx{margin-left:4px}
#mtray{position:fixed;left:calc(var(--page-inset-left,0px) + 8px);bottom:calc(var(--page-inset-bottom,0px) + 8px);z-index:150;display:none;align-items:center;gap:8px;background:#c0c0c0;border:2px outset #fff;font:700 13px Tahoma,Verdana,sans-serif;color:#000;padding:8px 14px;box-shadow:3px 3px 0 rgba(0,0,0,.35);cursor:pointer;user-select:none}
#mtray.show{display:flex}
#mtray .blip{width:10px;height:10px;background:#16247e;animation:bl 1.6s steps(1) infinite}
#mtrayscrim{position:fixed;inset:0;z-index:150;display:none;background:rgba(0,0,0,.25)}
#mtrayscrim.open{display:block}
#mtraymenu{position:fixed;left:0;right:0;bottom:0;z-index:151;background:#c0c0c0;border-top:2px outset #fff;box-shadow:0 -4px 14px rgba(0,0,0,.4);display:none;padding:8px 8px 12px}
#mtraymenu.open{display:block}
#mtraymenu .mtt{font:700 12px Verdana,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#555;padding:4px 6px 6px}
#mtraymenu button{display:flex;width:100%;align-items:center;gap:10px;font:700 15px Tahoma,Verdana,sans-serif;background:#e8e8e8;border:2px outset #fff;padding:12px;margin:4px 0;min-height:48px;cursor:pointer;color:#000;text-align:left}
#mtraymenu button:active{border-style:inset}
#mtraymenu button i{font-style:normal;width:22px;height:20px;display:grid;place-items:center;background:#16247e;color:#ffd400;border:1px outset #8fa2e8;font-size:12px}
/* theme variants for the mobile chrome */
body.dark #mtop{background:#000;box-shadow:0 1px 0 #335577}
body.dark .ehdr{border-color:#335577}
body.dark .mtbar,body.dark .mtbar a,body.dark .ehdr .mbtn{background:#0a0f1a;border-color:#335577;color:#e0e0e0}
body.dark .mtbar a.on{background:#001c33}
body.dark #mdrawer{background:#000;color:#c0c0c0;border-color:#335577}
body.dark #mdrawer .dl.on{background:#001c33;color:#fff}
body.dark #mdrawer .dhd .dx{background:#0a0f1a;border-color:#335577;color:#e0e0e0}
body.dark .mjump{border-color:#335577}
body.dark .mjump select{background:#111;color:#c0c0c0;border-color:#666}
body.neon #mtop{background:#0c0b07;box-shadow:0 1px 0 #4a4526}
body.neon .ehdr{border-color:#4a4526}
body.neon .mtbar,body.neon .mtbar a,body.neon .ehdr .mbtn{background:#12110a;border-color:#4a4526;color:#f2c200}
body.neon .mtbar a.on{background:#26240f;color:#fff}
body.neon #mdrawer{background:#0c0b07;color:#d9cfa8;border-color:#4a4526}
body.neon #mdrawer .dl.on{background:#26240f;color:#fff}
body.neon #mdrawer .dhd .dx{background:#12110a;border-color:#4a4526;color:#f2c200}
body.neon .mjump{border-color:#4a4526}
body.neon .mjump select{background:#12110a;color:#d9cfa8;border-color:#4a4526}
body.dxhr #mtop{background:#0d0b08;box-shadow:0 1px 0 #4a3b1a}
body.dxhr .ehdr{border-color:#4a3b1a}
body.dxhr .mtbar,body.dxhr .mtbar a,body.dxhr .ehdr .mbtn{background:#141008;border-color:#4a3b1a;color:#e8c987}
body.dxhr .mtbar a.on{background:#241c0e;color:#ffd97a}
body.dxhr #mdrawer{background:#0d0b08;color:#cbc0a8;border-color:#4a3b1a}
body.dxhr #mdrawer .dl.on{background:#241c0e;color:#ffd97a}
body.dxhr #mdrawer .dhd .dx{background:#141008;border-color:#4a3b1a;color:#e8c987}
body.dxhr .mjump{border-color:#4a3b1a}
body.dxhr .mjump select{background:#16120c;color:#d6cbb2;border-color:#4a3b1a}