/* Brewology store v2: the ca_gen2 palette, no framework, no JS required. Every var() carries its literal fallback because the 3DS, PS3 and Vita browsers know no custom properties (review 28 Oct). */
:root{ --ink:#333; --mute:#666; --faint:#777; --link:#2e5cbd; --hot:#e53d10; --line:#c0c0c0; --soft:#e8e8e8; --panel:#f8f8f8; --head:#e4e4e4; --page:#bfbfbf; }
html{ background:var(--page, #bfbfbf); }
body{ margin:0; font:14px/1.5 Verdana,Helvetica,Arial,sans-serif; color:var(--ink, #333); }
a{ color:var(--link, #2e5cbd); text-decoration:none; } a:hover{ color:var(--hot, #e53d10); text-decoration:underline; }
#global{ max-width:1055px; margin:0 auto; background:#fff; border-left:1px solid #a8a8a8; border-right:1px solid #a8a8a8; min-height:100vh; }
#top{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px 8px; border-bottom:1px solid var(--line, #c0c0c0); background:#fff; }
#top a.logo img{ display:block; width:310px; height:60px; }   /* the Packaging Workbench logo, 413x80 (owner, 31 Oct) */
#top a.hdr{ max-width:100%; } #top a.hdr img{ display:block; max-width:100%; height:auto; }
#top .acct{ font-size:12px; color:var(--mute, #666); } #top .acct a{ margin-left:10px; }
/* Console tabs: the only navigation. Current one is a raised, white tab. */
#consoles{ display:flex; flex-wrap:wrap; gap:2px; padding:0 14px; margin:0; list-style:none; background:var(--head, #e4e4e4) url(bg_th.gif) repeat-x left top; border-bottom:1px solid var(--line, #c0c0c0); }
#consoles li a{ display:block; padding:9px 13px 8px; font-weight:bold; color:#555; border:1px solid transparent; border-bottom:0; }
#consoles li a:hover{ color:var(--hot, #e53d10); text-decoration:none; }
#consoles li.on a{ background:#fff; color:#000; border-color:var(--line, #c0c0c0); margin-bottom:-1px; }
#consoles li.more a{ font-weight:normal; color:var(--mute, #666); }
main{ padding:14px 16px 30px; }
h1{ font:bold 22px "Trebuchet MS",Arial,sans-serif; margin:0 0 4px; } h1 small{ font:normal 14px Verdana,sans-serif; color:var(--mute, #666); }
h2{ font:bold 15px "Trebuchet MS",Arial,sans-serif; color:var(--mute, #666); margin:0; padding:5px 8px; background:var(--head, #e4e4e4) url(bg_th.gif) repeat-x left top; border:1px solid var(--line, #c0c0c0); border-bottom:0; text-transform:uppercase; letter-spacing:.04em; }
.box{ border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); padding:10px 12px; margin-bottom:14px; }
h2 + .box{ margin-top:0; }
/* Filter row: categories as text links, sort as a select, search as one input */
.filters{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin:6px 0 10px; font-size:13px; }
.filters .cats a{ margin-right:10px; font-size:15px; } .filters .cats a.on{ color:#000; font-weight:bold; border-bottom:2px solid var(--hot, #e53d10); }
.filters form{ margin-left:auto; display:flex; gap:6px; }
input,select,button{ font:13px Verdana,sans-serif; border:1px solid var(--line, #c0c0c0); background:#fff; padding:3px 6px; }
button{ background:var(--soft, #e8e8e8); cursor:pointer; }
/* App rows: one line each, icon at a fixed 72x40 (PS3/Vita icons are 144x80) */
.rows{ border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); }
.row{ display:grid; grid-template-columns:76px 1fr auto; gap:0 12px; align-items:center; padding:7px 10px; border-top:1px solid #ddd; }
.row:first-child{ border-top:0; } .row:hover{ background:#fff; }
.row img{ width:72px; height:40px; object-fit:cover; border:1px solid #ccc; background:#fff; }
.row .t{ font-size:16px; } .row .t b{ font-size:17px; } .row .t .v{ color:var(--mute, #666); } .row .t .by{ color:var(--mute, #666); font-size:13px; }
.row .m{ font-size:12px; color:var(--faint, #777); text-align:right; white-space:nowrap; }
.row .m b{ color:var(--mute, #666); }
.tag{ display:inline-block; font-size:10px; padding:0 5px; border:1px solid var(--line, #c0c0c0); background:#fff; color:var(--mute, #666); vertical-align:middle; border-radius:0; margin-left:4px; }
/* App page */
.app{ display:grid; grid-template-columns:1fr 300px; gap:16px; }
.app .head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.app .head img{ width:144px; height:80px; border:1px solid var(--line, #c0c0c0); background:#fff; }
.meta{ color:var(--mute, #666); font-size:13px; } .meta b{ color:var(--ink, #333); }
.install .how{ font-size:13px; margin:0 0 8px; }
/* Send to 3dsDL (owner, 29 Oct): the same look as the Download buttons */
.install .send{ display:inline-block; padding:5px 12px; margin:6px 0 0; background:var(--link, #2e5cbd); color:#fff; font-weight:bold; border:1px solid #1d4194; }
.install .send:hover{ background:var(--hot, #e53d10); border-color:#b02f0b; text-decoration:none; }
/* Install box, owner 29 Oct (option A): the code on the left, Method 1 and Method 2 beside it, the rest folded */
.install .ix{ display:flex; gap:18px; align-items:flex-start; }
.install figure{ margin:0; flex:none; }
.install .qr{ display:block; width:150px; height:150px; border:1px solid var(--line, #c0c0c0); background:#fff; }
.install .main{ flex:1; min-width:0; }
.install .m{ font-size:14px; line-height:1.45; margin:0 0 12px; overflow-wrap:anywhere; }
.install .m .mn{ display:block; font-size:11px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; color:var(--mute, #777); margin-bottom:1px; }
.install .m .h{ font-weight:bold; font-size:15px; }
.install .m.ln .mn{ display:inline; font-size:15px; margin:0; color:var(--accent, #2e5cbd); }
.install .m.ln + .m.ln{ border-top:1px solid var(--line, #ddd); padding-top:10px; }   /* a light line between the methods (owner, 31 Oct) */   /* "Method 1: Send it ..." on one line (owner, 31 Oct) */
.install .m .addr:not([hidden]){ display:block; margin:6px 0 4px; }   /* the PS3 address field and Send button inside Method 1 */
.install .firmwarn{ font-size:13px; margin:0 0 12px; padding:6px 8px; background:#fff4e5; border-left:3px solid var(--hot, #e53d10); }
.install details.other{ font-size:13px; margin-top:4px; border-top:1px solid var(--line, #ddd); padding-top:8px; }
.install details.other summary{ cursor:pointer; color:var(--link, #2e5cbd); }
.install details.other .how{ margin:8px 0 0; }
.install .addr{ margin:8px 0 0; } .install .addr[hidden]{ display:none; }
.install .help{ margin-left:8px; } .install .sendto{ margin-left:4px; }
.install .addr .field{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.install .addr input{ width:13em; font-size:14px; padding:5px 6px; } .install .addr .send{ margin:0; }
.install .addr .state{ display:block; margin-top:4px; color:var(--mute, #666); } .install .addr .state:empty{ display:none; }
@media (max-width:720px){ .install .ix{ flex-direction:column; align-items:center; } .install .main{ width:100%; } }
.files{ width:100%; border-collapse:collapse; font-size:13px; }
.files th{ text-align:left; color:var(--mute, #666); font-weight:normal; border-bottom:1px solid var(--line, #c0c0c0); padding:3px 6px; }
.files td{ padding:5px 6px; border-bottom:1px solid #e3e3e3; vertical-align:top; word-break:break-all; }
.files td.dl, .files td.hash{ word-break:normal; white-space:nowrap; }
.files .dl a{ display:inline-block; padding:4px 11px; background:var(--link, #2e5cbd); color:#fff; font-weight:bold; border:1px solid #1d4194; }
.files .dl a:hover{ background:var(--hot, #e53d10); border-color:#b02f0b; text-decoration:none; }
.hash{ font:11px/1.3 "Courier New",monospace; color:var(--faint, #777); word-break:break-all; }
span.held{ display:inline-block; font-size:11px; line-height:1.5; padding:0 6px; border:1px solid; white-space:nowrap; }
.held-ours{ color:#2d6a2d; border-color:#9fbf9f; background:#f1f8f1; } .held-link{ color:#555; border-color:#c0c0c0; background:#f4f4f4; }
.held-pending{ color:#7a5a00; border-color:#d9c27a; background:#fff8dc; } .held-cold{ color:#2e5cbd; border-color:#a9bde6; background:#f1f5fd; }
.held-missing{ color:#b02f0b; border-color:#e0a090; background:#fdf1ee; }
.sideline{ font-size:12px; color:var(--mute, #666); margin:0; padding-left:0; list-style:none; } .sideline li{ padding:3px 0; border-bottom:1px dotted #ddd; }
.notes{ font-size:13px; } .notes h3{ font-size:13px; margin:10px 0 2px; }
.trust{ font-size:12px; color:var(--mute, #666); border-left:3px solid #9fbf9f; padding:4px 8px; background:#fff; }
footer{ padding:10px 16px; font-size:11px; color:var(--faint, #777); border-top:1px solid var(--line, #c0c0c0); }
@media (max-width:720px){ .app{ grid-template-columns:1fr; } .row{ grid-template-columns:60px 1fr; } .row .m{ grid-column:2; text-align:left; } .row img{ width:56px; height:31px; } .filters form{ margin-left:0; width:100%; } #top{ padding:8px 12px; } #top a.logo img{ width:221px; height:43px; } main{ padding:10px 12px 24px; } }
/* phone fixes */
#top{ flex-wrap:wrap; gap:6px; }
.app .head{ flex-wrap:wrap; }
code{ overflow-wrap:anywhere; font-size:12px; }
.meta,.install .how{ overflow-wrap:anywhere; }
.ico{ display:block; width:72px; height:40px; border:1px solid #ccc; background:#ececec; }
.row .ico{ width:72px; height:40px; } .app .head .ico{ width:144px; height:80px; flex:none; }
@media (max-width:720px){ .row .ico{ width:56px; height:31px; } .app .head .ico{ width:96px; height:53px; } }

/* independent stores: each console is its own site under one roof. Accent per console, nav stays inside the console. */
:root{ --accent:#2e5cbd; }
:root[data-console="3ds"]{ --accent:#c8102e; } :root[data-console="switch"]{ --accent:#e60012; } :root[data-console="ps4"]{ --accent:#003791; } :root[data-console="ps5"]{ --accent:#0070d1; } :root[data-console="psp"]{ --accent:#2a4f8f; } :root[data-console="vita"]{ --accent:#1f5fa8; }
#consoles li.brand a{ color:#000; font-size:16px; padding-left:2px; }
#consoles li.on a{ border-top:3px solid var(--accent, #2e5cbd); padding-top:6px; }
#consoles li.more{ margin-left:auto; }
.pick{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 4px; }
.pick a{ display:block; padding:12px 10px; border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); text-align:center; }
.pick a:hover{ background:#fff; text-decoration:none; border-color:var(--hot, #e53d10); }
.pick b{ display:block; font-size:16px; color:#000; } .pick span{ font-size:11px; color:var(--mute, #666); }
@media (max-width:720px){ .pick{ grid-template-columns:repeat(2,1fr); } }
/* Clean-up pass on option 0 and 0b (26 Oct). Overrides only; the originals still render as before. */

/* ===== option 0 (store.css) ===== */
[data-clean="0"] #top .acct{ font-size:13px; }
[data-clean="0"] #top .acct a{ margin-left:14px; }
[data-clean="0"] .ad{ display:flex; align-items:center; justify-content:center; border:1px dashed #b08a00; background:repeating-linear-gradient(45deg,#fff8dc 0 6px,#fff 6px 12px); color:#7a5a00; font:bold 11px Verdana,sans-serif; box-sizing:border-box; }
[data-clean="0"] .ad.lb{ width:728px; height:90px; margin:0 auto 12px; } [data-clean="0"] .ad.mr{ width:300px; height:250px; margin-top:14px; }
[data-clean="0"] .cols{ display:grid; grid-template-columns:1fr 300px; gap:18px; }
[data-clean="0"] h1{ margin-bottom:0; }
[data-clean="0"] .lede{ color:var(--mute, #666); font-size:13px; margin:0 0 8px; }
[data-clean="0"] .row .t b{ font-size:17px; } [data-clean="0"] .row .t .v{ margin-left:2px; }
[data-clean="0"] .row .t .by{ display:block; margin-top:1px; }
[data-clean="0"] .row .t .by .tag{ margin-left:3px; vertical-align:1px; }
[data-clean="0"] .pager{ margin:12px 0 0; font-size:12px; color:var(--mute, #666); }
[data-clean="0"] .pager a,[data-clean="0"] .pager b{ display:inline-block; padding:2px 7px; border:1px solid #ddd; background:#fff; margin-right:3px; }
[data-clean="0"] .pager b{ background:#2e5cbd; border-color:#1d4194; color:#fff; }
[data-clean="0"] .pager a:hover{ background:var(--link, #2e5cbd); color:#fff; text-decoration:none; }
[data-clean="0"] .sideline li{ font-size:12px; }
[data-clean="0"] .shots{ display:flex; gap:8px; margin:10px 0 12px; }
[data-clean="0"] .shots span{ width:160px; height:96px; background:#ddd; border:1px solid #bbb; display:block; }
[data-clean="0"] .hash{ font-size:11px; }
@media (max-width:720px){ [data-clean="0"] .cols{ grid-template-columns:1fr; } [data-clean="0"] .ad.lb{ display:none; } [data-clean="0"] .ad.mr{ width:100%; height:100px; } [data-clean="0"] .shots span{ width:30%; height:60px; } }

/* second pass */
[data-clean="0"] .app .head > div{ flex:1; min-width:0; }
/* ===== owner round 2 (option 0 chosen): big menu, tag row, screenshots, Home page ===== */
[data-clean="0"] #consoles{ padding:0 10px; gap:3px; }
[data-clean="0"] #consoles li a{ font-size:19px; padding:13px 18px 12px; line-height:1.3; min-height:24px; }
[data-clean="0"] #consoles li.brand a{ font-size:21px; padding-left:4px; padding-right:22px; }
[data-clean="0"] #consoles li.on a{ padding-top:9px; border-top-width:4px; }
[data-clean="0"] #consoles li.more a{ font-size:16px; }
[data-clean="0"] #top .acct a{ font-size:15px; padding:8px 0; display:inline-block; }
@media (max-width:720px){
 [data-clean="0"] #consoles{ padding:4px 6px 6px; gap:4px; }
 [data-clean="0"] #consoles li{ flex:1 1 46%; } [data-clean="0"] #consoles li.brand{ flex:1 1 100%; } [data-clean="0"] #consoles li.more{ margin-left:0; }
 [data-clean="0"] #consoles li a{ text-align:center; font-size:17px; padding:11px 8px; border:1px solid var(--line, #c0c0c0); background:#fff; border-radius:3px; }
 [data-clean="0"] #consoles li.on a{ margin-bottom:0; }
 [data-clean="0"] #consoles li.brand a{ background:none; border:0; text-align:left; padding:6px 4px 2px; }
}
/* tag row under the description: every label we hold for the app, each one a link into the filtered list */
[data-clean="0"] .tags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
[data-clean="0"] .tags a{ display:inline-block; font-size:12px; line-height:1.2; padding:4px 8px; border:1px solid var(--line, #c0c0c0); background:#fff; color:var(--mute, #666); border-radius:2px; }
[data-clean="0"] .tags a b{ color:var(--ink, #333); font-weight:normal; }
[data-clean="0"] .tags a:hover{ border-color:var(--hot, #e53d10); color:var(--hot, #e53d10); text-decoration:none; }
/* screenshots: fixed-height strip, any aspect ratio, credit under each, an add tile at the end */
[data-clean="0"] .shots{ display:flex; gap:8px; margin:12px 0 14px; align-items:flex-start; }
[data-clean="0"] .shots figure{ margin:0; width:160px; }
[data-clean="0"] .shots figure span{ display:flex; align-items:center; justify-content:center; overflow:hidden; width:160px; height:96px; background:#ddd; border:1px solid #bbb; box-sizing:border-box; }
/* A thumbnail that does not fill its box (a tall 3DS capture, a small image) sits in the middle of it (owner, 29 Oct). */
[data-clean="0"] .shots figure span img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; }
[data-clean="0"] .shots figure span.photo{ background:#cfc9bf; }
[data-clean="0"] .shots figcaption{ font-size:11px; color:var(--faint, #777); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-clean="0"] .shots a.add{ display:flex; align-items:center; justify-content:center; text-align:center; width:160px; height:96px; box-sizing:border-box; border:1px dashed var(--line, #c0c0c0); background:var(--panel, #f8f8f8); font-size:12px; color:var(--mute, #666); padding:8px; }
[data-clean="0"] .shots a.add:hover{ border-color:var(--hot, #e53d10); color:var(--hot, #e53d10); text-decoration:none; }
[data-clean="0"] .shots a.add b{ display:block; font-size:14px; color:var(--link, #2e5cbd); }
@media (max-width:720px){ [data-clean="0"] .shots{ overflow-x:auto; } [data-clean="0"] .shots figure,[data-clean="0"] .shots a.add{ flex:none; } }
/* Home page */
[data-clean="0"] .home{ display:grid; grid-template-columns:1fr 336px; gap:18px; }
[data-clean="0"] .home .tut{ font-size:15px; } [data-clean="0"] .home .tut p{ margin:0 0 8px; } [data-clean="0"] .home .tut p:last-child{ margin:0; }
[data-clean="0"] .home .rows .row{ grid-template-columns:76px 1fr auto; }
[data-clean="0"] .home .news{ font-size:13px; } [data-clean="0"] .home .news li{ padding:4px 0; border-bottom:1px dotted #ddd; list-style:none; } [data-clean="0"] .home .news ul{ margin:0; padding:0; } [data-clean="0"] .home .news b{ color:var(--mute, #666); font-weight:normal; margin-right:4px; }
[data-clean="0"] .ad.lr{ width:336px; height:280px; margin-top:14px; }
[data-clean="0"] .home .all{ text-align:right; font-size:13px; margin:6px 0 14px; }
@media (max-width:720px){ [data-clean="0"] .home{ grid-template-columns:1fr; } [data-clean="0"] .ad.lr{ width:100%; height:100px; } }
[data-clean="0"] .shots a.add{ flex-direction:column; gap:2px; }
[data-clean="0"] .app > div,[data-clean="0"] .app > aside{ min-width:0; }
/* categories promoted into the tab bar (owner, 26 Oct): nine tabs on one row, "Other consoles" moves up beside the account links */
[data-clean="0"] #consoles li a{ font-size:17px; padding:12px 11px 11px; }
[data-clean="0"] #consoles li.brand a{ font-size:20px; padding-right:16px; }
[data-clean="0"] #consoles li.on a{ padding-top:8px; }
[data-clean="0"] #top .acct a.more{ color:var(--mute, #666); margin-right:10px; padding-right:14px; border-right:1px solid var(--line, #c0c0c0); }
[data-clean="0"] .filters form{ margin-left:0; }
@media (max-width:720px){
 [data-clean="0"] #consoles li{ flex:1 1 30%; } [data-clean="0"] #consoles li.brand{ flex:1 1 100%; }
 [data-clean="0"] #consoles li a{ font-size:15px; padding:11px 4px; }
 [data-clean="0"] #top .acct a.more{ border:0; }
}
[data-clean="0"] #consoles{ padding:0 8px; gap:2px; }
[data-clean="0"] #consoles li a{ font-size:16px; padding:12px 9px 11px; }
[data-clean="0"] #consoles li.brand a{ font-size:19px; padding-right:12px; }
@media (max-width:720px){ [data-clean="0"] #top .acct a{ margin-left:10px; font-size:14px; } [data-clean="0"] #top .acct a.more{ margin:0 6px 0 0; padding-right:8px; } [data-clean="0"] #consoles li a{ font-size:15px; padding:11px 4px; } }
/* Left-menu variant of option 0: today's store frame (menu column on the left, content on the right). Loads after store.css + clean.css. */
[data-nav="left"] .frame{ display:grid; grid-template-columns:280px minmax(0,729px); grid-template-areas:"nav main" "side main"; grid-template-rows:auto 1fr; gap:0 14px; align-content:start; }
[data-nav="left"] #consoles{ grid-area:nav; display:block; background:none; border:0; padding:0; margin:0 0 12px; }
[data-nav="left"] #consoles li{ margin:0 0 6px; }
[data-nav="left"] #consoles li a{ display:block; box-sizing:border-box; width:100%; padding:9px 14px; font:bold 24px/1.2 Verdana,Helvetica,Arial,sans-serif; color:var(--link, #2e5cbd); background:#e8e8e8 linear-gradient(#f6f6f6,#dedede); border:1px solid #d3d3d3; border-radius:4px; text-align:left; }
[data-nav="left"] #consoles li a:hover{ color:var(--hot, #e53d10); background:#fff; text-decoration:none; }
[data-nav="left"] #consoles li.on a{ background:#fff; color:#000; border-color:#aaa; border-left:5px solid var(--accent, #2e5cbd); padding-left:10px; }
[data-nav="left"] #consoles li.brand{ display:none; }
[data-nav="left"] .lbar{ grid-area:side; }
[data-nav="left"] .lbar h2{ font-size:14px; }
[data-nav="left"] .lbar .box{ margin-bottom:12px; }
[data-nav="left"] .lbar .ad.mr{ margin-top:4px; }
[data-nav="left"] .main{ grid-area:main; min-width:0; }
[data-nav="left"] .main .ad.lb{ margin:0 0 14px; }
[data-nav="left"] .app{ display:block; }
[data-nav="left"] .home{ display:block; }
[data-nav="left"] main{ padding-top:12px; }
@media (max-width:720px){
 [data-nav="left"] .frame{ display:block; }
 [data-nav="left"] #consoles{ display:flex; flex-wrap:wrap; gap:4px; padding:0; margin:0 0 10px; }
 [data-nav="left"] #consoles li{ flex:1 1 30%; margin:0; }
 [data-nav="left"] #consoles li a{ font-size:15px; padding:11px 4px; text-align:center; }
 [data-nav="left"] #consoles li.on a{ border-left:1px solid #aaa; border-top:4px solid var(--accent, #2e5cbd); padding-left:4px; padding-top:8px; }
 [data-nav="left"] .lbar{ margin-top:14px; }
}
[data-nav="left"] .lbar .news ul{ margin:0; padding:0; } [data-nav="left"] .lbar .news li{ list-style:none; padding:4px 0; border-bottom:1px dotted #ddd; font-size:13px; } [data-nav="left"] .lbar .news b{ color:var(--mute, #666); font-weight:normal; margin-right:4px; }
@media (max-width:720px){ [data-nav="left"] .frame{ display:flex; flex-direction:column; } [data-nav="left"] #consoles{ order:0; } [data-nav="left"] .main{ order:1; } [data-nav="left"] .lbar{ order:2; } }

/* ===== live pages (not in the mockup) ===== */
.ico img,.row .ico img,.app .head .ico img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Square icons (owner, 30 Oct): the box is square. An icon stored 144x80 before then has its square icon in the middle
   80x80, which cover shows whole; a square one stored since fills it. A wide store shows a square icon whole, with bars. */
.row.row-square,[data-clean="0"] .home .rows .row.row-square{ grid-template-columns:44px 1fr auto; }   /* Home sets its own columns */
.ico.ico-square{ width:40px; height:40px; } .app .head .ico.ico-square,.ico.ico-square.ico-head{ width:80px; height:80px; }
.ico.ico-wide.ico-head{ width:144px; height:80px; } .ico.ico-wide img,.app .head .ico.ico-wide img{ object-fit:contain; }   /* the second beats .app .head .ico img */
.icon-row .ico{ flex:none; }
/* A list that holds both shapes (the consoles page, when it does): one icon column, square icons centred in it, so names line up (owner, 30 Oct). */
.rows-mixed .row.row-square{ grid-template-columns:76px 1fr auto; } .rows-mixed .row-square .ico{ justify-self:center; }
@media (max-width:720px){ .rows-mixed .row.row-square{ grid-template-columns:60px 1fr; } }
@media (max-width:720px){ .row .ico.ico-square{ width:31px; height:31px; } .app .head .ico.ico-square{ width:53px; height:53px; } .row.row-square{ grid-template-columns:44px 1fr; } }   /* two columns on a phone, as .row */
.notes-text{ font-size:13px; overflow-wrap:anywhere; }
.versions td.held{ color:#2f6f2f; font-size:12px; } .versions td.ext{ color:var(--faint, #777); font-size:12px; }
.takedown label{ display:block; margin:10px 0 4px; font-weight:bold; } .takedown input[type=text],.takedown textarea{ width:100%; box-sizing:border-box; } .takedown textarea{ height:120px; }
.hp{ position:absolute; left:-9999px; }
.shot-full{ text-align:center; }   /* the full-size screenshot sits in the middle of the column (owner, 29 Oct) */
.shot-full img{ max-width:100%; height:auto; border:1px solid var(--line, #c0c0c0); background:#fff; vertical-align:top; }
.pick a .n{ display:block; font-size:12px; color:var(--mute, #666); }
.empty{ color:var(--mute, #666); padding:14px 12px; }
.nav-sub{ font-size:12px; color:var(--mute, #666); margin:0 0 8px; }
[data-nav="left"] #consoles li.brand{ display:block; } [data-nav="left"] #consoles li.brand a{ font-size:20px; color:#000; background:none; border:0; padding:4px 0 8px; }
@media (max-width:720px){ [data-nav="left"] #consoles li.brand{ flex:1 1 100%; } [data-nav="left"] #consoles li.brand a{ text-align:left; } }
/* admin */
.notice{ background:#eef7ea; border-color:#9fbf9f; color:#2f6f2f; margin-bottom:12px; }
.errors{ color:#b02f0b; margin:0 0 10px; padding-left:18px; }
.queue{ width:100%; border-collapse:collapse; font-size:13px; } .queue th{ text-align:left; color:var(--mute, #666); font-weight:normal; border-bottom:1px solid var(--line, #c0c0c0); padding:3px 6px; } .queue td{ padding:5px 6px; border-bottom:1px solid #e3e3e3; vertical-align:top; }
.queue form{ display:inline; } .queue button,.act button{ font:12px Verdana,sans-serif; padding:3px 8px; margin:0 2px 2px 0; }
.btn-danger{ color:#b02f0b; }
.danger{ color:#b02f0b; font-weight:bold; }
.edit label{ display:block; margin:10px 0 3px; font-weight:bold; font-size:13px; } .edit input[type=text],.edit input[type=number],.edit select,.edit textarea{ width:100%; box-sizing:border-box; } .edit textarea{ height:140px; } .edit .inline label{ display:inline; margin-right:12px; font-weight:normal; }
.kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 14px; } .kpi a{ display:block; border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); padding:8px 10px; } .kpi b{ display:block; font-size:22px; color:#000; } .kpi span{ font-size:12px; color:var(--mute, #666); }
@media (max-width:720px){ .kpi{ grid-template-columns:repeat(2,1fr); } }

/* The real AdSense containers (the mockup classes above are kept for the saved mockups). */
.ad-slot{ text-align:center; margin:14px 0 0; }
.ad-slot.lb{ margin:0 0 12px; min-height:90px; }
/* The 728 unit needs the full width: below about 1060px (an iPad in landscape) the main column is narrower, so it goes. */
@media (max-width:1060px){ .ad-slot.lb{ display:none; } }

/* Keyboard users: one link to the content past the menu. */
.skip{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:6px 10px; border:1px solid #000; }
.skip:focus{ left:8px; z-index:9; }
/* Console browsers (no grid, no flex): a plain single column at the page width. */
html[data-tier="console"] .frame{ display:block; }
html[data-tier="console"] #consoles{ display:block; }
html[data-tier="console"] #consoles li{ display:inline-block; margin:2px; }
html[data-tier="console"] .main, html[data-tier="console"] .lbar{ display:block; width:auto; float:none; }
html[data-tier="console"] .install .ix{ display:block; } html[data-tier="console"] .install figure{ margin:0 0 8px; }

/* UI review 28 Oct (owner) */
/* 13: the licence is a tag like the others, not loose text */
[data-clean="0"] .tags span{ display:inline-block; font-size:12px; line-height:1.2; padding:4px 8px; border:1px solid var(--line, #c0c0c0); background:#fff; color:var(--mute, #666); border-radius:2px; }
/* 17: no empty first line in a box; a little air between a page heading and the box under it */
.box > p:first-child, .box > h3:first-child{ margin-top:0; } .box > p:last-child{ margin-bottom:0; }
h1 + h2, .lede + h2, h1 + .box{ margin-top:10px; }
/* 14: phones drop the hash column; file names wrap at sensible places */
.files td{ word-break:normal; overflow-wrap:anywhere; }
@media (max-width:720px){ .files th:nth-child(3), .files td.hash{ display:none; } .files .dl a{ padding:4px 8px; } }
/* 12: release notes rendered from their markdown */
.notes-text h4{ font-size:13px; margin:10px 0 2px; } .notes-text h4:first-child{ margin-top:0; }
.notes-text ul, .notes-text ol{ margin:4px 0 8px; padding-left:20px; } .notes-text p{ margin:0 0 8px; } .notes-text p:last-child{ margin-bottom:0; }
.notes-text pre{ white-space:pre-wrap; background:#fff; border:1px solid #ddd; padding:6px 8px; font-size:12px; overflow-wrap:anywhere; }
/* 7: the store-wide search box (Home and the list pages) */
.search{ display:flex; gap:6px; margin:0 0 12px; } .search input[type=search]{ flex:1; font-size:15px; padding:6px 8px; } .search button{ font-size:15px; padding:6px 14px; }
/* 5: the signed-in member in the header */
#top .acct .who{ color:var(--ink, #333); margin-left:14px; }
/* 16: admin: older releases folded */
details.older{ margin:10px 0 4px; } details.older summary{ cursor:pointer; color:var(--link, #2e5cbd); font-size:13px; padding:4px 0; }
h2.ver{ text-transform:none; letter-spacing:0; }
h1 + .search{ margin-top:8px; }
/* 11: a file not fetched yet links its GitHub release page: a plain link, not a Download button */
.files .dl a.gh, .versions .dl a.gh{ background:none; border:0; color:var(--link, #2e5cbd); font-weight:normal; padding:0; font-size:12px; } .files .dl a.gh:hover{ color:var(--hot, #e53d10); background:none; text-decoration:underline; }
/* App page, owner 29 Oct: support buttons under the tags; screenshots as their own section; the closing report/claim line. */
[data-clean="0"] .support{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
[data-clean="0"] .support a{ display:inline-block; padding:4px 12px; border:1px solid #d9a400; background:#fff6d6; color:#7a5a00; border-radius:3px; font-weight:bold; }
[data-clean="0"] .support a::before{ content:"\2665\00a0"; }
[data-clean="0"] .support a:hover{ border-color:var(--hot, #e53d10); color:var(--hot, #e53d10); text-decoration:none; }
[data-clean="0"] .shotbox{ padding:12px; }   /* the same space above and below the strip (owner, 29 Oct) */
[data-clean="0"] .shotbox .shots{ margin:0; flex-wrap:wrap; }
[data-clean="0"] .pageend{ margin:2px 0 0; text-align:right; }
@media (max-width:720px){ [data-clean="0"] .shotbox .shots{ overflow-x:visible; } [data-clean="0"] .pageend{ text-align:left; } }
/* Store admin, owner 29 Oct: add an app (GitHub or uploads), store settings. */
.edit .src{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 4px; }
.edit .src label{ display:block; border:1px solid var(--line, #c0c0c0); background:#fff; padding:10px 12px; margin:0; font-weight:normal; cursor:pointer; }
.edit .src label:has(input:checked){ border:2px solid #0b4ea2; padding:9px 11px; background:#f2f7ff; }
.edit .src b{ display:block; font-size:14px; margin-bottom:4px; }
.edit .src span{ font-size:12px; color:var(--mute, #666); }
.edit details.adv{ margin:12px 0 0; font-size:13px; } .edit details.adv summary{ cursor:pointer; color:var(--link, #2e5cbd); }
@media (max-width:720px){ .edit .src{ grid-template-columns:1fr; } }
/* The strip under a full-size screenshot (shot page) wraps like the app page's, instead of running off the side with 4 or more. */
@media (min-width:721px){ [data-clean="0"] .shots{ flex-wrap:wrap; } }
/* Guides, "What can my console do?" (growth plan bet 1): the question, the answer, one way in. */
.guide-form select{ min-width:280px; max-width:100%; font-size:15px; padding:4px 6px; }
.guide-form button{ font-size:15px; padding:5px 16px; font-weight:bold; }
.guide-form p{ margin:0 0 8px; } .guide-form .help{ font-size:12px; color:var(--mute, #666); margin-top:-4px; }
.guide-paths{ margin-bottom:14px; }
.guide-paths .gp{ padding:8px 10px; border-top:1px solid #ddd; } .guide-paths .gp:first-child{ border-top:0; }
.guide-paths .gp .t{ font:bold 16px "Trebuchet MS",Arial,sans-serif; } .guide-paths .gp p{ margin:3px 0 0; font-size:13px; }
.verdict{ border-left:6px solid var(--line, #c0c0c0); font-size:15px; } .verdict .word{ font-size:17px; }
.v-yes,.v-done{ border-left-color:#3c8c3c; background:#eef7ea; }
.v-partly,.v-check{ border-left-color:#c7a32a; background:#fbf6e4; }
.v-wait,.v-no{ border-left-color:#b02f0b; background:#fbecea; }
.warn{ border-left:6px solid #c7a32a; background:#fbf6e4; } .warn h3{ margin:0 0 4px; font-size:14px; }
.warn ul{ margin:0; padding-left:18px; } .warn li{ margin:0 0 4px; }
ol.steps,ul.next{ border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); margin:0 0 14px; padding:10px 12px 10px 34px; }
ol.steps li,ul.next li{ margin:0 0 7px; line-height:1.45; } ol.steps li:last-child,ul.next li:last-child{ margin-bottom:0; }
.guide-meta{ margin:0 0 12px; }
.guide-files td{ word-break:normal; overflow-wrap:break-word; } .guide-files td:nth-child(2){ width:22%; }
.guide-files .hashes{ margin-top:4px; line-height:1.5; } .guide-files code{ font-size:11px; word-break:break-all; }
p.sources{ border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); margin:0 0 8px; padding:8px 12px; }
.pick-guides{ grid-template-columns:repeat(4,1fr); }
@media (max-width:720px){ .guide-form select{ min-width:0; width:100%; } .pick-guides{ grid-template-columns:repeat(2,1fr); } }
.pick + h2{ margin-top:14px; }
/* Admin app page (owner, 30 Oct): a button in a box header, the upload dialog, the icon in the listing, the owners list */
h2.hbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hbtn{ font:12px Verdana,sans-serif; text-transform:none; letter-spacing:normal; padding:2px 10px; color:var(--ink, #333); }
dialog.modal{ width:min(560px, calc(100vw - 32px)); padding:0; border:1px solid var(--line, #c0c0c0); background:var(--panel, #f8f8f8); box-shadow:0 6px 24px rgba(0,0,0,.25); }
dialog.modal::backdrop{ background:rgba(0,0,0,.45); }
dialog.modal .box{ margin:0; border:0; }
.icon-row{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; } .icon-row img{ border:1px solid var(--line, #c0c0c0); background:#fff; } .icon-row .meta{ margin:4px 0 0; }
ul.owners{ margin:6px 0 10px; padding-left:20px; } ul.owners li{ margin:2px 0; }
.edit p.repo{ margin:0; }
/* Dark mode (owner, 31 Oct): the header button sets data-theme on <html> (layout.php) and the browser remembers it. Consoles never get the attribute, so none of this reaches them. Colours after the Packaging Workbench's dark theme; icons, screenshots, the QR code and the ads keep their own. */
html[data-theme="dark"]{ --ink:#e4e6ea; --mute:#a4aab5; --faint:#8d94a0; --link:#8fb0ff; --hot:#ff8a5c; --line:#3a404b; --soft:#2a2f38; --panel:#20242b; --head:#2b3038; --page:#121418; --accent:#6c8fe0; color-scheme:dark; }
html[data-theme="dark"][data-console="3ds"]{ --accent:#e8445e; } html[data-theme="dark"][data-console="switch"]{ --accent:#ff4a55; } html[data-theme="dark"][data-console="ps4"]{ --accent:#4d7fe0; } html[data-theme="dark"][data-console="ps5"]{ --accent:#3d9df0; } html[data-theme="dark"][data-console="psp"]{ --accent:#6a8fd0; } html[data-theme="dark"][data-console="vita"]{ --accent:#4f8fd8; }
html[data-theme="dark"] #global{ background:#1a1d23; border-color:#2e333c; }
html[data-theme="dark"] #top{ background:#1a1d23; }
html[data-theme="dark"] h2, html[data-theme="dark"] #consoles{ background-image:linear-gradient(#323843,#2b3038); }
html[data-theme="dark"] #consoles li a{ color:#c3c8d0; }
html[data-theme="dark"] #consoles li.on a{ background:#1a1d23; }
html[data-theme="dark"] #consoles li.on a, html[data-theme="dark"] #consoles li.brand a, html[data-theme="dark"] .filters .cats a.on, html[data-theme="dark"] .pick b, html[data-theme="dark"] .kpi b{ color:#fff; }
html[data-theme="dark"][data-nav="left"] #consoles{ background:none; }
html[data-theme="dark"][data-nav="left"] #consoles li a{ color:var(--link); background:#2a2f38 linear-gradient(#353b46,#2a2f38); border-color:#3a404b; }
html[data-theme="dark"][data-nav="left"] #consoles li a:hover{ color:var(--hot); background:#353b46; }
html[data-theme="dark"][data-nav="left"] #consoles li.on a{ background:#262b33; color:#fff; border-color:#5a6270; border-left-color:var(--accent); }
html[data-theme="dark"][data-nav="left"] #consoles li.brand a{ background:none; border:0; color:#fff; }
@media (max-width:720px){ html[data-theme="dark"][data-nav="left"] #consoles li.on a{ border-left-color:#5a6270; border-top-color:var(--accent); } }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background:#14171c; color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] button{ background:var(--soft); color:var(--ink); }
html[data-theme="dark"] .row{ border-top-color:#2e333c; } html[data-theme="dark"] .row:hover{ background:#262b33; }
html[data-theme="dark"] .row img, html[data-theme="dark"] .ico{ border-color:#3a404b; }
html[data-theme="dark"] .tag, html[data-theme="dark"][data-clean="0"] .tags a, html[data-theme="dark"][data-clean="0"] .tags span, html[data-theme="dark"][data-clean="0"] .pager a{ background:#262b33; border-color:var(--line); }
html[data-theme="dark"][data-clean="0"] .pager a:hover{ background:#2e5cbd; color:#fff; }
/* The blue buttons keep their light-mode blue: the lighter link blue would put white text on a pale background. */
html[data-theme="dark"] .install .send, html[data-theme="dark"] .files .dl a:not(.gh){ background:#2e5cbd; }
html[data-theme="dark"] .install .send:hover, html[data-theme="dark"] .files .dl a:not(.gh):hover{ background:#e53d10; }
html[data-theme="dark"] .install .firmwarn{ background:#3a2a1a; }
html[data-theme="dark"] .files td, html[data-theme="dark"] .queue td, html[data-theme="dark"] .guide-paths .gp{ border-color:#2e333c; }
html[data-theme="dark"] .held-ours{ color:#6cc785; border-color:#2f5a3a; background:#18301f; } html[data-theme="dark"] .held-link{ color:#b8bec8; border-color:#3a404b; background:#262b33; }
html[data-theme="dark"] .held-pending{ color:#e8bf5a; border-color:#6b5a22; background:#352c14; } html[data-theme="dark"] .held-cold{ color:#8fb0ff; border-color:#3a4f80; background:#1b2740; }
html[data-theme="dark"] .held-missing{ color:#ff8a6b; border-color:#7a3a2a; background:#3a1a1c; }
html[data-theme="dark"] .sideline li, html[data-theme="dark"][data-clean="0"] .home .news li, html[data-theme="dark"][data-nav="left"] .lbar .news li{ border-bottom-color:#3a404b; }
html[data-theme="dark"] .trust{ background:#1d2620; border-left-color:#3c6b48; }
html[data-theme="dark"] .pick a:hover{ background:#262b33; }
html[data-theme="dark"] .notice{ background:#18301f; border-color:#2f5a3a; color:#9ad7a8; }
html[data-theme="dark"] .errors, html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .danger{ color:#ff7b7b; }
html[data-theme="dark"] .versions td.held{ color:#6cc785; }
html[data-theme="dark"][data-clean="0"] .shots figure span{ background:#2a2f38; border-color:#3a404b; } html[data-theme="dark"][data-clean="0"] .shots figure span.photo{ background:#36322c; }
html[data-theme="dark"] .skip{ background:#1a1d23; color:var(--ink); border-color:var(--ink); }
html[data-theme="dark"] .notes-text pre{ background:#14171c; border-color:#3a404b; }
html[data-theme="dark"][data-clean="0"] .support a{ border-color:#8a6d1a; background:#352c14; color:#e8bf5a; }
html[data-theme="dark"] .edit .src label{ background:#262b33; } html[data-theme="dark"] .edit .src label:has(input:checked){ border-color:#8fb0ff; background:#1b2740; }
html[data-theme="dark"] .v-yes, html[data-theme="dark"] .v-done{ background:#18301f; }
html[data-theme="dark"] .v-partly, html[data-theme="dark"] .v-check, html[data-theme="dark"] .warn{ background:#352c14; }
html[data-theme="dark"] .v-wait, html[data-theme="dark"] .v-no{ background:#3a1a1c; }
html[data-theme="dark"] dialog.modal{ color:var(--ink); }
/* An ad frame keeps the light scheme: a dark page would otherwise paint a white backdrop behind it, which shows while the slot is empty. */
html[data-theme="dark"] .ad-slot{ color-scheme:light; }
/* The button (owner, 31 Oct: option 1): a round icon in the header's right-hand corner, after the account links and a divider like the one after "Other consoles". The moon shows in light mode, the sun in dark. On a phone it sits on the logo's row and the links go under both. Every rule hangs on the button, which consoles never get. */
#top .theme{ order:1; position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; margin-left:29px; padding:0; color:var(--mute, #666); background:var(--soft, #e8e8e8); border:1px solid var(--line, #c0c0c0); border-radius:50%; cursor:pointer; }
#top .theme::before{ content:""; position:absolute; left:-15px; top:0; bottom:0; border-left:1px solid var(--line, #c0c0c0); }
#top .theme:hover{ color:var(--hot, #e53d10); border-color:var(--hot, #e53d10); }
#top .theme[hidden]{ display:none; }
#top .theme svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#top .theme .sun, html[data-theme="dark"] #top .theme .moon{ display:none; } html[data-theme="dark"] #top .theme .sun{ display:block; }
#top .theme ~ .acct{ margin-left:auto; }
@media (max-width:720px){ #top .theme{ margin-left:auto; } #top .theme::before{ display:none; } #top .theme ~ .acct{ order:2; flex-basis:100%; } }