/* Windows 98 page frame: the SAME window component as the desktop (chrome.css). Shell: w98Shell in layout.mjs.
   This file only maps the page's own design tokens (brand.css / themes) onto the light Win98 palette INSIDE the window,
   so every page's own CSS (which reads --bg --card --text ...) follows automatically. Loaded after chrome.css, brand.css and skin.css. */
body.w98{background:#008080;color:var(--ink);font:13px/1.5 var(--ui);min-height:100dvh;padding-bottom:40px;-webkit-text-size-adjust:100%}
html{color-scheme:light}
body.w98 #fx,body.w98 #fxc{display:none}
.w98-desk{position:relative;padding:14px 14px 0}
body.w98 .win{--bg:var(--paper);--card:var(--paper);--line:#808080;--text:var(--ink);--muted:var(--ink);--accent:var(--navy);--link:var(--hl);--on-accent:#fff;--ok:var(--good);--bad:var(--err);
  --card-border:0;--shadow:none;--r:0;--font:var(--ui);--font-head:var(--ui);--awn-a:#000080;--awn-b:#000080;--glow:#000080;--body-bg:none;
  max-width:1100px;margin:0 auto;color:var(--ink);font:13px/1.5 var(--ui)}
body.w98 .win .body{scrollbar-color:#c0c0c0 #e8e8e8}

/* menu bar = the site header */
body.w98 .win header.top{position:static;background:var(--face);border:0;box-shadow:none}
body.w98 .win header.top .wrap{width:auto;margin:0;display:flex;align-items:center;gap:0;padding:2px 2px;flex-wrap:wrap}
body.w98 .win .logo{display:none}
body.w98 .win nav.main{margin:0;gap:0;flex:1;display:flex;flex-wrap:wrap}
body.w98 .win nav.main a,body.w98 .win .acct-link{font:13px var(--ui);padding:3px 10px;color:var(--ink);border:0;text-decoration:none;display:inline-flex;gap:4px;align-items:center;min-height:26px}
body.w98 .win nav.main a::after{display:none}
body.w98 .win nav.main a:hover,body.w98 .win .acct-link:hover{background:var(--navy);color:#fff;text-shadow:none}
body.w98 .win nav.main a[aria-current="page"],body.w98 .win .acct-link[aria-current="page"]{box-shadow:var(--sunk);text-shadow:none;color:var(--ink)}
body.w98 .win .acct-link span[aria-hidden]{display:none}
body.w98 .win .acct-link-text{display:inline}
body.w98 .win #theme-slot{display:none}

/* the page area is a sunken white field */
body.w98 .win .body{width:auto;margin:2px;background:var(--paper);box-shadow:var(--field);padding:6px 20px 24px;min-height:50vh;position:relative;overflow:visible}
body.w98 .win section{padding:18px 0}
body.w98 .win .hero,body.w98 .win .hero.small,body.w98 .win .banner{padding:18px 0 8px}
body.w98 .win .banner::before,body.w98 .win .hero.small::before{display:none}
body.w98 .win .wordmark,body.w98 .win h1.page{font:700 22px/1.2 var(--ui);letter-spacing:.3px;color:var(--ink);text-shadow:none;margin:0}
body.w98 .win h2.section-title,body.w98 .win h2{font:700 16px/1.3 var(--ui);color:var(--ink);margin:0 0 6px}
body.w98 .win h3{font-family:var(--ui)}
body.w98 .win .lede,body.w98 .win .sub{color:var(--ink);font-size:13px;max-width:62ch}
body.w98 .win a{color:var(--hl)}
body.w98 .win ::selection{background:var(--navy);color:#fff}

/* buttons */
body.w98 .win .btn,body.w98 .win button.btn{font:700 13px/1 var(--ui);letter-spacing:0;color:var(--ink);background:var(--face);border:0;border-radius:0;box-shadow:var(--raised);padding:10px 18px;min-height:34px;transition:none;text-decoration:none}
body.w98 .win .btn:hover{background:var(--face);color:var(--ink)}
body.w98 .win .btn:active{box-shadow:var(--sunk);transform:none;padding:11px 17px 9px 19px}
body.w98 .win .btn-primary{background:var(--face);color:var(--ink);border:0;outline:1px dotted var(--ink);outline-offset:-5px}
body.w98 .win .btn-primary:hover{background:var(--face);color:var(--ink)}
body.w98 .win a:focus-visible,body.w98 .win .btn:focus-visible,body.w98 .win button:focus-visible,body.w98 .win summary:focus-visible{outline:1px dotted var(--ink);outline-offset:-3px}
body.w98 .win input[type=text],body.w98 .win input[type=email],body.w98 .win input[type=password],body.w98 .win input[type=search],body.w98 .win input[type=number],body.w98 .win select,body.w98 .win textarea{font:13px var(--ui);color:var(--ink);background:var(--paper);border:0;border-radius:0;box-shadow:var(--field);padding:6px 8px}

/* panels: a framed group, not a storefront */
body.w98 .win .grid{gap:14px}
body.w98 .win .card{padding:12px 14px 14px;border:0;border-radius:0;background:var(--face);box-shadow:var(--raised);animation:none}
body.w98 .win .card::before,body.w98 .win .card::after{display:none}
body.w98 .win .card h3{font:700 15px/1.2 var(--ui);margin:0;color:var(--ink)}
body.w98 .win .card p{color:var(--ink)}
body.w98 .win .floor,body.w98 .win .meta{font:12px var(--ui);color:var(--ink);letter-spacing:0}
body.w98 .win .badge{font:700 11px var(--ui);padding:2px 6px;background:var(--navy);color:#fff;border-radius:0}
body.w98 .win .card .note{border:1px dashed #808080;border-radius:0;color:var(--ink)}
body.w98 .win ol.steps li{background:var(--face);border:0;border-radius:0;box-shadow:var(--raised);color:var(--ink)}
body.w98 .win ol.steps li::before{border-radius:0;background:var(--navy);color:#fff;font:700 13px var(--ui)}
body.w98 .win .card-soon{opacity:.8}

/* status bar = the footer */
body.w98 .win footer.bottom{margin:0;border:0;background:var(--face)}
body.w98 .win footer.bottom .wrap{width:auto;margin:0;padding:6px 8px 4px;font-size:12px;color:var(--ink);display:grid;gap:4px}
body.w98 .win footer.bottom a{color:var(--hl)}
body.w98 .win .foot-more summary{cursor:pointer}

/* taskbar: the box, Start button, clock and focus ring come from chrome.css (shared with the desktop);
   this page only adds the "you are here" title button and its simple Start menu */
.w98-here{height:28px;min-width:0;max-width:240px;display:flex;align-items:center;padding:0 12px;font:700 12px var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--sunk);background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px}
.w98-menu{position:absolute;left:3px;bottom:34px;margin:0;padding:3px;list-style:none;min-width:200px;background:var(--face);box-shadow:var(--raised),3px 3px 0 #0007}
.w98-menu[hidden]{display:none}
.w98-menu a{display:block;padding:9px 14px;color:var(--ink);text-decoration:none;font:13px var(--ui)}
.w98-menu a:hover,.w98-menu a:focus-visible{background:var(--navy);color:#fff;outline:none}
.w98-menu .sep{height:2px;margin:3px 2px;box-shadow:inset 0 1px #808080,inset 0 -1px #fff}

@media (max-width:760px){
  body.w98{padding-bottom:48px}
  .w98-desk{padding:0}
  body.w98 .win{box-shadow:none;padding:3px;min-height:calc(100dvh - 48px)}
  body.w98 .win header.top .wrap{flex-wrap:nowrap}
  body.w98 .win nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.w98 .win nav.main a,body.w98 .win .acct-link{padding:8px 11px;white-space:nowrap}
  body.w98 .win .body{padding:4px 12px 20px}
  .task{height:46px}
  .start,.w98-here{height:36px}
  .w98-menu{bottom:44px}
  .w98-menu a{padding:12px 14px}
}

/* page-specific headings that carry their own display sizes */
body.w98 .win .m-ahead h2,body.w98 .win .m-artist h2{font:700 18px/1.3 var(--ui)}
body.w98 .win .notfound-mascot{filter:none;animation:none;width:96px;height:96px;max-width:none;image-rendering:auto;justify-self:start;margin:10px 0}

/* inside the desktop's America Offline window: only the page itself */
html.embed body.w98{background:var(--paper);padding-bottom:0}
html.embed .w98-desk{padding:0}
html.embed .win{box-shadow:none;padding:0;max-width:none}
html.embed .tb,html.embed .task,html.embed .skip,html.embed header.top,html.embed .win footer,html.embed .bmc{display:none}