/* ---------- nanoweb v6: nanowiki + six more nani-net sites (nanowiki.js, nanosites2.js) ---------- */
/* every rule is scoped to .web-page so nothing leaks into the rest of nani-os */

/* themes, one per new banner art */
.web-page.theme-wiki { --bg: #f4f1ea; --pat: rgba(26, 26, 42, 0.035); --card: #ffffff; --ink: #1a1a2a; --soft: #5f5a70; --accent: #2d5fb3; --shade: #cfc8b8; }
.web-page.theme-mail { --bg: #e8f5ff; --pat: rgba(63, 136, 197, 0.08); --card: #ffffff; --ink: #1a1030; --soft: #5b6a84; --accent: #2d6fd1; --shade: #9cc7ee; }
.web-page.theme-forum { --bg: #c99a5e; --pat: rgba(90, 53, 36, 0.12); --card: #fffbe8; --ink: #2a1a10; --soft: #6e5a48; --accent: #b5223a; --shade: #6e4a2e; --head: #2a1a10; }
.web-page.theme-shop { --bg: #fff6e8; --pat: rgba(224, 90, 71, 0.07); --card: #ffffff; --ink: #1a1030; --soft: #6e6884; --accent: #e05a47; --shade: #ffd166; }
.web-page.theme-travel { --bg: #ffe9cf; --pat: rgba(63, 136, 197, 0.07); --card: #fffaf0; --ink: #1a1030; --soft: #6e6060; --accent: #d9603a; --shade: #3f88c5; }
.web-page.theme-school { --bg: #2f5d46; --pat: rgba(255, 255, 255, 0.05); --card: #f3ecdc; --ink: #1a1030; --soft: #4a6a52; --accent: #2c7a39; --shade: #a0703a; --head: #e9f5e6; }
.web-page.theme-station { --bg: #10283c; --pat: rgba(94, 242, 214, 0.05); --card: #16334c; --ink: #e9f5ff; --soft: #9ab8cc; --accent: #5ef2d6; --shade: #ff9a3c; --head: #e9f5ff; }

/* on the dark theme, plain buttons keep their own dark text */
.web-page.theme-station .btn { --ink: #1a1030; }

/* ---------- nanowiki ---------- */
.web-page .wk-intro { font-size: 21px; }
.web-page .wk-small { font-size: 18px; }
.web-page .wk-search { display: flex; gap: 8px; margin: 10px 0 6px; }
.web-page .wk-input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; font: 21px var(--mono); color: var(--ink); background: #fff; border: 3px solid var(--ink); }
.web-page .wk-results { margin-bottom: 8px; }
.web-page .wk-hits { margin: 6px 0; padding-left: 26px; display: grid; gap: 6px; }
.web-page .wk-hits small { display: block; font-size: 17px; color: var(--soft); }
.web-page .wk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.web-page .wk-box { margin: 12px 0; padding: 0 12px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--shade); box-shadow: 3px 3px 0 var(--shade); }
.web-page .wk-grid .wk-box { margin: 0; }
.web-page h2.wk-box-title { margin: 0 -12px 8px; padding: 6px 12px; font: 400 11px/1.4 var(--pixel); color: var(--ink); background: #e9eef8; border-bottom: 2px solid var(--shade); }
.web-page .wk-box p { color: var(--ink); }
.web-page .wk-aotd { margin: 4px 0; font-size: 13px; }
.web-page .wk-pic { image-rendering: pixelated; background: #f7f5ef; border: 2px solid var(--shade); }
.web-page .wk-pic-float { float: right; width: 56px; height: 56px; margin: 0 0 6px 10px; }
.web-page .wk-dyk { margin: 0; padding-left: 20px; display: grid; gap: 6px; list-style: square; }
.web-page .wk-dyk li::marker { color: var(--accent); }
.web-page .wk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.web-page .wk-cat { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center; padding: 6px 8px; text-align: left; color: var(--ink); background: #fff; border: 2px solid var(--shade); cursor: pointer; }
.web-page .wk-cat:hover { border-color: var(--accent); background: #f2f6ff; }
.web-page .wk-cat-pic { grid-row: span 2; width: 34px; height: 34px; image-rendering: pixelated; }
.web-page .wk-cat b { font: 400 9px/1.5 var(--pixel); }
.web-page .wk-cat small { font-size: 16px; color: var(--soft); }
.web-page .wk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.web-page .wk-crumbs { margin: 0 0 10px; font-size: 18px; color: var(--soft); }
.web-page .wk-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.web-page .wk-toc { position: sticky; top: 8px; padding: 8px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--shade); }
.web-page .wk-toc b { font: 400 10px/1.6 var(--pixel); }
.web-page .wk-toc ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.web-page .wk-toc-link { padding: 0; font: 18px/1.2 var(--mono); text-align: left; color: var(--accent); background: none; border: 0; cursor: pointer; }
.web-page .wk-toc-link:hover { text-decoration: underline; }
.web-page .wk-article { min-width: 0; padding: 4px 14px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--shade); }
.web-page .wk-article p { color: var(--ink); }
.web-page h2.wk-h { margin: 14px 0 6px; padding-bottom: 3px; font: 400 11px/1.4 var(--pixel); color: var(--ink); border-bottom: 2px solid var(--shade); }
.web-page .wk-lead { font-size: 22px; }
.web-page .wk-infobox { float: right; width: 220px; margin: 8px 0 10px 14px; font-size: 18px; background: #f7f5ef; border: 2px solid var(--shade); }
.web-page .wk-info-title { padding: 5px 8px; font: 400 10px/1.5 var(--pixel); text-align: center; background: #e9eef8; border-bottom: 2px solid var(--shade); }
.web-page .wk-pic-big { display: block; width: 112px; height: 112px; margin: 8px auto; }
.web-page .wk-infobox table { width: 100%; border-collapse: collapse; }
.web-page .wk-infobox th, .web-page .wk-infobox td { padding: 3px 8px; vertical-align: top; text-align: left; border-top: 1px solid var(--shade); }
.web-page .wk-infobox th { width: 42%; font-weight: normal; color: var(--soft); }
.web-page .wk-note { padding: 6px 10px; font-size: 18px; background: #fff6d8; border: 2px dashed #e8a33a; }
.web-page .wk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.web-page .wk-catline { clear: both; margin-top: 12px; padding-top: 6px; font-size: 18px; border-top: 1px solid var(--shade); }
.web-page .wk-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.web-page .wk-list li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--shade); }
.web-page .wk-list small { display: block; font-size: 17px; color: var(--soft); }
.web-page .wk-list-pic { flex: none; width: 34px; height: 34px; image-rendering: pixelated; }
.web-page .wk-letter .web-index { columns: 3 150px; margin: 4px 0; }

/* ---------- nanomail ---------- */
.web-page .nm-app { color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.web-page .nm-folders { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: #d6ecff; border-bottom: 3px solid var(--ink); }
.web-page .nm-folder { padding: 2px 10px; font: 19px var(--mono); color: var(--ink); background: #fff; border: 2px solid var(--ink); cursor: pointer; }
.web-page .nm-folder[aria-pressed='true'] { color: #fff; background: var(--accent); }
.web-page .nm-split { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); min-height: 260px; }
.web-page .nm-list { list-style: none; margin: 0; padding: 0; border-right: 3px solid var(--ink); }
.web-page .nm-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 6px; align-items: center; width: 100%; padding: 4px 8px; text-align: left; font: 17px/1.15 var(--mono); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--shade); cursor: pointer; }
.web-page .nm-item:hover { background: #f2f8ff; }
.web-page .nm-item[aria-current='true'] { background: #d6ecff; }
.web-page .nm-mini { grid-row: span 2; width: 20px; height: 20px; image-rendering: pixelated; }
.web-page .nm-from { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--soft); }
.web-page .nm-subj { grid-column: 2 / 4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.web-page .nm-when { grid-row: 1; grid-column: 3; font-size: 15px; color: var(--soft); }
.web-page .nm-unread .nm-subj, .web-page .nm-unread .nm-from { font-weight: bold; color: var(--ink); }
.web-page .nm-unread { box-shadow: inset 4px 0 0 var(--accent); }
.web-page .nm-view { min-width: 0; padding: 10px 14px; }
.web-page .nm-head { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 6px; border-bottom: 2px solid var(--shade); }
.web-page .nm-head p { margin: 0; }
.web-page h3.nm-subject { margin: 2px 0 4px; color: var(--ink); }
.web-page .nm-avatar { flex: none; width: 36px; height: 40px; image-rendering: pixelated; }
.web-page .nm-body p { margin: 6px 0; }
.web-page .nm-warn { padding: 6px 10px; color: #7a1020; background: #ffe0e4; border: 2px solid #c0392b; }
.web-page .nm-reply { margin-top: 10px; padding-top: 8px; border-top: 2px dashed var(--shade); }
.web-page .nm-reply-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.web-page .nm-note { min-height: 1.2em; margin: 4px 0 0; color: #2c7a39; }

/* ---------- fennec forum ---------- */
.web-page .ff-crumbs { margin: 6px 0 10px; padding: 4px 10px; font-size: 19px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
.web-page .ff-boards, .web-page .ff-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.web-page .ff-board { display: grid; gap: 2px; width: 100%; padding: 10px 12px; text-align: left; font: 19px/1.2 var(--mono); color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); cursor: pointer; }
.web-page .ff-board:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shade); }
.web-page .ff-board b { font: 400 12px/1.5 var(--pixel); color: var(--accent); }
.web-page .ff-board small { font-size: 16px; color: var(--soft); }
.web-page .ff-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.web-page .ff-thread small { display: block; font-size: 16px; }
.web-page .ff-title { font-size: 21px; }
.web-page .ff-up[aria-pressed='true'] { color: #fff; background: var(--accent); }
.web-page .ff-thread-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.web-page .ff-thread-head h3 { margin: 4px 0; color: var(--head, var(--ink)); font-size: 13px; }
.web-page .ff-post { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; margin: 10px 0; padding: 8px 10px; color: var(--ink); background: var(--card); border: 3px solid var(--ink); }
.web-page .ff-post p { margin: 0; }
.web-page .ff-mine { box-shadow: 4px 4px 0 var(--accent); }
.web-page .ff-author { display: grid; justify-items: center; gap: 2px; font-size: 15px; text-align: center; word-break: break-all; }
.web-page .ff-author b { font-weight: normal; color: var(--soft); }
.web-page .ff-avatar { width: 27px; height: 36px; image-rendering: pixelated; }
.web-page .ff-inline { vertical-align: middle; width: 18px; height: 24px; }
.web-page .ff-reply { margin-top: 12px; padding: 8px 10px; color: var(--ink); background: var(--card); border: 3px dashed var(--ink); }
.web-page .ff-reply-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- pixelbay ---------- */
.web-page .pb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; padding: 6px 10px; color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.web-page .pb-bar .btn[aria-pressed='true'] { color: #fff; background: var(--accent); }
.web-page .pb-coins { margin-right: auto; font: 400 11px var(--pixel); color: #2c7a39; }
.web-page .pb-note { min-height: 1.2em; margin: 4px 0; color: var(--accent); }
.web-page .pb-tile canvas { width: 72px; height: 72px; padding: 0; image-rendering: pixelated; }
.web-page .pb-tile b { font-size: 19px; font-weight: normal; line-height: 1.1; }
.web-page .pb-item { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; padding: 10px 12px; color: var(--ink); background: var(--card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.web-page .pb-big { flex: none; width: 140px; height: 140px; image-rendering: pixelated; border: 3px solid var(--ink); }
.web-page .pb-info { flex: 1; min-width: 220px; }
.web-page .pb-info h3 { margin-top: 0; }
.web-page .pb-price { font: 400 12px var(--pixel); color: #2c7a39; }
.web-page .pb-reviews { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.web-page .pb-reviews li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
.web-page .pb-reviews p { margin: 0; }
.web-page .pb-avatar { flex: none; width: 27px; height: 36px; image-rendering: pixelated; }
.web-page .pb-stars { color: #e8a33a; letter-spacing: 2px; }
.web-page .pb-cart { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.web-page .pb-cart li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 10px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
.web-page .pb-mini { width: 28px; height: 28px; image-rendering: pixelated; }
.web-page .pb-name { flex: 1; min-width: 120px; }
.web-page .pb-sum { min-width: 60px; text-align: right; }
.web-page .pb-total { font-size: 22px; }
.web-page .pb-orders { padding-left: 24px; display: grid; gap: 6px; }

/* ---------- nani travel ---------- */
.web-page .tr-tile canvas { width: 100%; height: auto; aspect-ratio: 64 / 40; padding: 0; image-rendering: pixelated; }
.web-page .tr-tile[aria-pressed='true'] { outline: 3px solid var(--accent); outline-offset: 2px; }
.web-page .tr-detail { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.web-page .tr-big { flex: none; width: 256px; max-width: 100%; height: auto; aspect-ratio: 64 / 40; image-rendering: pixelated; border: 6px solid #fffaf0; outline: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--shade); }
.web-page .tr-info { flex: 1; min-width: 220px; }
.web-page .tr-info h3 { margin-top: 0; }
.web-page .tr-tag { font-size: 22px; }
.web-page .tr-status { min-height: 1.2em; color: var(--accent); }
.web-page .tr-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 8px 0; padding: 12px; background: #3a5a8a; border: 3px solid var(--ink); }
.web-page .tr-slot { display: grid; place-items: center; min-height: 84px; margin: 0; font: 400 16px var(--pixel); color: #9fb4d8; border: 2px dashed #7f9cc8; }
.web-page .tr-has { padding: 4px; color: #fffaf0; border: 2px solid #fffaf0; }
.web-page .tr-has figcaption { font: 15px/1 var(--mono); text-align: center; }
.web-page .tr-stamp { width: 56px; height: 56px; image-rendering: pixelated; transform: rotate(-6deg); }

/* ---------- robot school ---------- */
.web-page .rs-levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.web-page .rs-lv[aria-pressed='true'] { outline: 3px solid #ffd166; outline-offset: 1px; }
.web-page .rs-done { background: #a3e07f; }
.web-page .rs-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.web-page .rs-board { display: block; width: 100%; max-width: 330px; height: auto; aspect-ratio: 110 / 90; image-rendering: pixelated; border: 3px solid var(--ink); }
.web-page .rs-info h3 { margin-top: 8px; }
.web-page .rs-count { font: 400 10px var(--pixel); color: var(--accent); }
.web-page .rs-palette, .web-page .rs-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.web-page .rs-add.rs-f { background: #a3e07f; }
.web-page .rs-add.rs-l, .web-page .rs-add.rs-r { background: #9ad7e8; }
.web-page .rs-add.rs-r2, .web-page .rs-add.rs-r3, .web-page .rs-add.rs-r4, .web-page .rs-add.rs-end { background: #ffd166; }
.web-page .rs-prog { min-height: 120px; max-height: 260px; overflow: auto; margin: 4px 0; padding: 6px 6px 6px 34px; font: 19px/1.2 var(--mono); background: #fff; border: 3px solid var(--ink); }
.web-page .rs-tok { padding: 1px 0; }
.web-page .rs-d1 { padding-left: 18px; }
.web-page .rs-d2 { padding-left: 36px; }
.web-page .rs-d3 { padding-left: 54px; }
.web-page .rs-tok.rs-r2, .web-page .rs-tok.rs-r3, .web-page .rs-tok.rs-r4, .web-page .rs-tok.rs-end { color: #a0603a; }
.web-page .rs-empty { list-style: none; margin-left: -28px; }
.web-page .rs-msg { min-height: 1.2em; margin: 8px 0 0; font-size: 22px; color: var(--accent); }

/* ---------- nani weather station ---------- */
.web-page .ws-meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.web-page .ws-meter { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 8px; background: #0a1826; border: 2px solid var(--accent); }
.web-page .ws-gauge { width: 120px; height: 72px; image-rendering: pixelated; }
.web-page .ws-val { font: 400 13px var(--pixel); color: #ffffff; }
.web-page .ws-meter figcaption { font-size: 17px; color: var(--soft); }
.web-page .ws-mood { font-size: 22px; color: var(--accent); }
.web-page .ws-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.web-page .ws-charts figure { margin: 0; }
.web-page .ws-chart { display: block; width: 100%; height: auto; aspect-ratio: 96 / 36; image-rendering: pixelated; border: 3px solid var(--accent); }
.web-page .ws-charts figcaption { font-size: 17px; color: var(--soft); }
.web-page .ws-forecast { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.web-page .ws-forecast li { padding: 4px 8px; background: #0a1826; border-left: 4px solid var(--shade); }
.web-page .ws-forecast b { display: inline-block; min-width: 92px; font: 400 9px var(--pixel); color: var(--soft); }
.web-page .ws-pct { font: 400 12px var(--pixel); color: var(--shade); }

@media (max-width: 620px) {
  .web-page .wk-layout, .web-page .rs-layout, .web-page .nm-split { grid-template-columns: minmax(0, 1fr); }
  .web-page .wk-toc { position: static; }
  .web-page .wk-infobox { float: none; width: auto; margin: 8px 0; }
  .web-page .nm-list { border-right: 0; border-bottom: 3px solid var(--ink); }
  .web-page .ff-post { grid-template-columns: minmax(0, 1fr); }
  .web-page .ff-author { grid-auto-flow: column; justify-content: start; }
}