/* Site layer: theme variables + everything the CSS libraries don't cover
   (desktop, task pane, taskbar, badges, readable prose). */

:root {
  --font-ui: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  --font-title: "Trebuchet MS", Trebuchet, Tahoma, sans-serif;
  --font-prose: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --font-mono: "Lucida Console", "Courier New", "DejaVu Sans Mono", monospace;
  --close-bg: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
  --face: #ece9d8;
  --field-border: #7f9db9;
  --start: linear-gradient(180deg, #3c9a3c 0%, #63c763 10%, #42a542 45%, #2f8a2f 85%, #226e22 100%);
  --desktop:
    radial-gradient(ellipse 16% 5% at 72% 20%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 22% 6% at 34% 28%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 90% 40% at 22% 108%, #66b52f 0 58%, #4e9b22 62%, transparent 63%),
    radial-gradient(ellipse 80% 34% at 85% 112%, #5aa62a 0 60%, transparent 61%),
    linear-gradient(180deg, #2c6ad4 0%, #5d95ec 30%, #9cc4f5 58%, #cfe3fb 75%);
}

[data-theme=blue] {
  --frame: #0831d9; --frame-light: #166aee; --frame-dark: #001ea0;
  --title-grad: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  --title-fg: #fff; --title-shadow: #0f1089;
  --ctl-bg: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
  --ctl-border: #fff; --ctl-glyph: #fff;
  --legend: #0046d5; --accent: #316ac5; --link: #0033cc;
  --tp-bg: linear-gradient(180deg, #7ba2e7, #6375d6);
  --tp-head-bg: linear-gradient(90deg, #fff, #c6d3f7); --tp-head-fg: #215dc6;
  --tp-special-bg: linear-gradient(90deg, #0049c6, #2961d6); --tp-special-fg: #fff;
  --tp-body: #d6dff7; --tp-special-body: #eff3ff;
  --taskbar: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
  --taskbar-fg: #fff;
  --tray: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  --task-btn: linear-gradient(180deg, #5b9cf5, #3c81f3 20%, #3b7ef0 80%, #2e6ad6);
  --task-btn-active: linear-gradient(180deg, #1c4bb3, #1e52b7 20%, #2158c4);
  scrollbar-color: #9eb9f7 #f4f4f0;
}
[data-theme=olive] {
  --frame: #8ba169; --frame-light: #b5c78f; --frame-dark: #64773f;
  --title-grad: linear-gradient(180deg, #d4e2b0 0%, #a8bd7a 8%, #99b06b 40%, #b5c88b 88%, #a2b679 93%, #7f9452 96%, #6f8445 100%);
  --title-fg: #fff; --title-shadow: #4b5b2c;
  --ctl-bg: radial-gradient(circle at 90% 90%, #7d9750 0%, #8eaa63 55%, #a5bd7c 70%, #d6e3bd 90%, #fff 100%);
  --ctl-border: #fff; --ctl-glyph: #fff;
  --legend: #5d7330; --accent: #8ba169; --link: #4a6020;
  --tp-bg: linear-gradient(180deg, #ccd9ad, #a5bd84);
  --tp-head-bg: linear-gradient(90deg, #fff, #e0e7b8); --tp-head-fg: #56662d;
  --tp-special-bg: linear-gradient(90deg, #77894a, #a0b26f); --tp-special-fg: #fff;
  --tp-body: #f6f6ec; --tp-special-body: #f6f6ec;
  --taskbar: linear-gradient(180deg, #d7e0b2 0, #b2c48b 6%, #9eb378 20%, #93a86c 50%, #8fa468 85%, #7a8f55 100%);
  --taskbar-fg: #fff;
  --tray: linear-gradient(180deg, #e9eed0, #d9e2b0 50%, #c4cf96);
  --task-btn: linear-gradient(180deg, #c5d4a0, #aabf82 30%, #9db374);
  --task-btn-active: linear-gradient(180deg, #7b8f52, #8a9e60);
  scrollbar-color: #b5c78f #f6f6ec;
}
[data-theme=silver] {
  --frame: #b7b7cb; --frame-light: #e2e2ec; --frame-dark: #8888a3;
  --title-grad: linear-gradient(180deg, #fff 0%, #e5e5ef 8%, #d3d3e0 40%, #e9e9f1 88%, #c6c6d8 93%, #9b9bb4 96%, #8888a3 100%);
  --title-fg: #000; --title-shadow: transparent;
  --ctl-bg: radial-gradient(circle at 90% 90%, #b8bacc 0%, #d4d5e2 55%, #e8e8f0 70%, #fff 90%);
  --ctl-border: #8a8aa6; --ctl-glyph: #3a3a52;
  --legend: #3b3b8f; --accent: #8a8aa6; --link: #2a2a9c;
  --tp-bg: linear-gradient(180deg, #c4c8d4, #b1b3c8);
  --tp-head-bg: linear-gradient(90deg, #fff, #d6d6e0); --tp-head-fg: #3f3d3d;
  --tp-special-bg: linear-gradient(90deg, #77778f, #b4b4c6); --tp-special-fg: #fff;
  --tp-body: #f0f1f5; --tp-special-body: #f0f1f5;
  --taskbar: linear-gradient(180deg, #fefefe 0, #d7d7e3 8%, #c6c7d7 30%, #b8b9cc 80%, #9a9bb3 100%);
  --taskbar-fg: #000;
  --tray: linear-gradient(180deg, #f2f2f6, #dcdce6 50%, #c8c8d6);
  --task-btn: linear-gradient(180deg, #fff, #e4e4ec 40%, #d4d4e0);
  --task-btn-active: linear-gradient(180deg, #b0b0c4, #c4c4d4);
  scrollbar-color: #c4c4d4 #f4f4f6;
}

/* ---------- desktop ---------- */
html, body { margin: 0; min-height: 100%; }
body { background: var(--desktop); background-attachment: fixed; padding-bottom: 44px; }
.desktop { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 16px 16px 0 8px; max-width: 1180px; }
.desktop-icons { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.desktop-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px;
  color: #fff; text-decoration: none; text-align: center; font: 12px var(--font-ui);
  text-shadow: 1px 1px 1px #000;
}
.desktop-icon svg { width: 32px; height: 32px; }
.desktop-icon:hover span, .desktop-icon:focus span { background: #316ac5; outline: 1px dotted #fff; }

.main-window { min-width: 0; }
.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

/* address bar */
.toolbar { display: flex; align-items: center; gap: 6px; padding: 0 0 6px; margin-bottom: 6px; border-bottom: 1px solid #d0d0bf; }
.toolbar input { flex: 1; min-width: 0; }
.toolbar button { min-width: 0; }

/* marquee */
.marquee { overflow: hidden; white-space: nowrap; margin-bottom: 8px; padding: 3px 0; background: #000; color: #ffff66; font: bold 12px var(--font-mono); border: 1px solid var(--field-border); }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; }

/* ---------- XP task pane ---------- */
.taskpane { background: var(--tp-bg); padding: 10px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.tp-panel { font: 12px var(--font-ui); }
.tp-head {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  height: 25px; padding: 0 4px 0 10px; border-radius: 5px 5px 0 0;
  background: var(--tp-head-bg); color: var(--tp-head-fg); font-weight: bold;
}
.tp-head::-webkit-details-marker { display: none; }
.tp-head:hover { filter: brightness(1.08); }
.tp-special .tp-head { background: var(--tp-special-bg); color: var(--tp-special-fg); }
.chev {
  width: 17px; height: 17px; border-radius: 50%; flex: none; position: relative;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.15);
}
.chev::before {
  content: ""; position: absolute; inset: 0; background: var(--tp-head-fg);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path d='M5 8l3.5-3 3.5 3M5 12l3.5-3 3.5 3' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / 17px no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path d='M5 8l3.5-3 3.5 3M5 12l3.5-3 3.5 3' fill='none' stroke='black' stroke-width='1.6'/></svg>") center / 17px no-repeat;
}
.tp-panel:not([open]) .chev::before { transform: rotate(180deg); }
.tp-special .chev::before { background: #215dc6; }
[data-theme=olive] .tp-special .chev::before { background: #56662d; }
[data-theme=silver] .tp-special .chev::before { background: #3f3d3d; }
.tp-body { margin: 0; padding: 10px; background: var(--tp-body); border: 1px solid #fff; border-top: 0; list-style: none; }
.tp-special .tp-body { background: var(--tp-special-body); }
.tp-body li + li { margin-top: 6px; }
.tp-body a { display: flex; align-items: center; gap: 6px; color: var(--tp-head-fg); text-decoration: none; }
.tp-body a:hover { text-decoration: underline; filter: brightness(1.4); }
.tp-details { line-height: 1.6; }
.tp-details b { display: block; }

/* ---------- content ---------- */
.prose { font: 13px/1.55 var(--font-prose); color: #111; }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-title); line-height: 1.2; margin: .2em 0 .5em; }
.prose h1 { font-size: 20px; color: var(--legend); border-bottom: 1px solid #d0d0bf; padding-bottom: 4px; }
.prose h2 { font-size: 17px; margin-top: 1.2em; color: var(--legend); border-bottom: 1px solid #d0d0bf; padding-bottom: 3px; }
.prose h3 { font-size: 14px; }
.prose p { margin: 0 0 .8em; }
.prose a { color: var(--link); }
.prose a:visited { color: #551a8b; }
.prose code { font: 12px var(--font-mono); background: #fffbe6; padding: 0 2px; border: 1px solid #e8dfb0; }
.prose pre { font: 12px/1.45 var(--font-mono); background: #fff; border: 1px solid var(--field-border); padding: 8px 10px; overflow: auto; }
.prose pre code { background: none; border: 0; padding: 0; }

.wordart {
  font: italic 900 34px Impact, "Arial Black", sans-serif; letter-spacing: 1px; margin: 4px 0 8px !important;
  background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 40%, #4d8bff 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #1b2a6b); border: 0 !important; padding: 0 !important;
}

.construction {
  display: flex; align-items: center; justify-content: center; height: 20px; margin-bottom: 10px;
  background: repeating-linear-gradient(45deg, #ffd200 0 10px, #111 10px 20px); background-size: 28px 28px;
  animation: stripes 1s linear infinite;
}
.construction span { background: #ffd200; color: #000; font: bold 11px var(--font-ui); padding: 1px 8px; border: 1px solid #000; letter-spacing: 1px; }
@keyframes stripes { to { background-position: 28px 0; } }

.new { color: #f00; font: italic bold 11px var(--font-ui); animation: blink 1s steps(1) infinite; margin-left: 4px; }
@keyframes blink { 50% { visibility: hidden; } }

.news { list-style: none; margin: 0; padding: 0; }
.news li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #c8c4b0; }
.news li:last-child { border-bottom: 0; }
.news time { color: #666; flex: none; width: 76px; font-size: 12px; }

.tool-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dotted #c8c4b0; }
.tool-row svg { width: 32px; height: 32px; }
.tool-row .btns { display: flex; gap: 4px; }
.tool-row button { min-width: 0; }

/* docs: help-file layout */
.docs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; }
.balloon { position: relative; margin: 12px 0; padding: 8px 10px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; font-size: 12px; }
.balloon b { display: block; margin-bottom: 2px; }
.listview { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--field-border); font-size: 12px; }
.listview th { text-align: left; font-weight: normal; padding: 3px 6px; background: linear-gradient(180deg, #fff, #f1efe2 80%, #e2decd); border-right: 1px solid #c7c5b2; border-bottom: 3px solid #e2decd; }
.listview th:hover { border-bottom-color: #f9a900; }
.listview td { padding: 3px 6px; border-bottom: 1px solid #f0f0f0; }
.listview td:first-child { font-family: var(--font-mono); }
.cmd { margin: 10px 0; }
.cmd .window-body { background: #000; padding: 0; }
.cmd pre { margin: 0; border: 0; background: #000; color: #c0c0c0; }

.mood { font-size: 12px; border-collapse: collapse; margin: 6px 0 10px; }
.mood td { padding: 1px 8px 1px 0; }
.mood td:first-child { font-weight: bold; color: var(--legend); }

.bestviewed { font: 11px var(--font-ui); color: #444; margin-top: 8px; }

/* ---------- taskbar ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 50;
  display: flex; align-items: stretch; background: var(--taskbar); color: var(--taskbar-fg); font: 12px var(--font-ui);
}
.taskbar button.start, .taskbar button.start:hover, .taskbar button.start:focus, .taskbar button.start:active {
  display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 0; height: 30px; margin: 0; padding: 0 18px 0 8px;
  border: 0; border-radius: 0 12px 12px 0; background: var(--start); box-shadow: inset 0 1px rgba(255,255,255,.4), 2px 0 3px rgba(0,0,0,.3);
  color: #fff; font: italic bold 17px var(--font-title); text-shadow: 1px 1px 1px #1a4d1a; outline: none;
}
.taskbar button.start:hover { filter: brightness(1.1); }
.taskbar .tasks { flex: 1; display: flex; gap: 3px; padding: 3px 10px; min-width: 0; }
.taskbar button.task, .taskbar button.task:hover, .taskbar button.task:focus {
  display: flex; align-items: center; gap: 6px; width: 180px; min-width: 0; min-height: 0; height: 24px; padding: 0 8px; margin: 0;
  border: 0; border-radius: 3px; background: var(--task-btn); color: var(--taskbar-fg); box-shadow: inset 1px 1px rgba(255,255,255,.3), inset -1px -1px rgba(0,0,0,.25);
  font: 12px var(--font-ui); white-space: nowrap; overflow: hidden; outline: none;
}
.taskbar button.task[aria-pressed=true] { background: var(--task-btn-active); box-shadow: inset 1px 1px rgba(0,0,0,.35); }
.taskbar button.task span { overflow: hidden; text-overflow: ellipsis; }
.tray a { display: flex; }
.tray { display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--tray); border-left: 1px solid rgba(0,0,0,.35); box-shadow: inset 1px 0 rgba(255,255,255,.3); }
[data-theme=olive] .tray, [data-theme=silver] .tray { color: #000; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .desktop { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .desktop-icons { display: none; }
}
@media (max-width: 720px) {
  .layout, .docs, .gb { grid-template-columns: minmax(0, 1fr); }
  .taskbar button.task { width: auto; flex: 1; }
  .tool-row { grid-template-columns: 32px 1fr; }
  .tool-row .btns { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee span, .construction, .new { animation: none; }
  .marquee span { padding-left: 0; }
}

/* ======================================================================
   Site additions (beyond the style preview)
   ====================================================================== */

.skip { position: absolute; left: -999px; top: 4px; z-index: 100; background: #ffffe1; padding: 4px 8px; border: 1px solid #000; }
.skip:focus { left: 8px; }

/* content panel = same look as a tab panel */
.panel { padding: 14px 16px; border: 1px solid #919b9c; background: linear-gradient(180deg, #fcfcfe, #f4f3ee); box-shadow: 1px 1px #d0d0bf; }
.panel + .panel { margin-top: 10px; }
.crumbs { font: 11px var(--font-ui); color: #555; margin: 0 0 8px; }
.crumbs a { color: var(--link); }
.tp-body a[aria-current] { font-weight: bold; }

/* lists */
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list li { padding: 8px 0; border-bottom: 1px dotted #c8c4b0; }
.entry-list li:last-child { border-bottom: 0; }
.entry-list .meta { display: block; color: #666; font-size: 11px; }
.tag { display: inline-block; padding: 0 5px; margin-right: 4px; font: bold 10px/15px var(--font-ui); border-radius: 3px; background: #dfe8fa; color: #215dc6; border: 1px solid #a9bfe9; vertical-align: 1px; }
.tag.update { background: #e2f5dc; color: #2b7a1f; border-color: #a9d79c; }

/* tool page header */
.tool-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tool-head svg { width: 48px; height: 48px; flex: none; }
.tool-head h1 { margin: 0 !important; }
.tool-head p { margin: 2px 0 0 !important; color: #444; }
.props { border-collapse: collapse; font-size: 12px; margin: 0 0 12px; }
.props th { text-align: left; font-weight: normal; color: #555; padding: 2px 14px 2px 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
a.button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 0 12px; box-sizing: border-box;
  font: 12px var(--font-ui); color: #000 !important; text-decoration: none;
  border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
}
a.button:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
a.button[aria-disabled=true] { color: #a0a0a0 !important; border-color: #c9c7ba; pointer-events: none; }

/* docs: wizard-style Back / Next */
.pager { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 10px; border-top: 1px solid #d0d0bf; }
.docs > nav { align-self: start; position: sticky; top: 8px; }
.docs .tree-view .tool-node > a { font-weight: bold; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 .8em; }
.prose img { max-width: 100%; height: auto; }
.prose table:not(.listview):not(.mood):not(.props) { border-collapse: collapse; background: #fff; border: 1px solid var(--field-border); font-size: 12px; margin: 0 0 .8em; }
.prose table:not(.listview):not(.mood):not(.props) th { text-align: left; font-weight: normal; padding: 3px 6px; background: linear-gradient(180deg, #fff, #f1efe2 80%, #e2decd); border-bottom: 3px solid #e2decd; }
.prose table:not(.listview):not(.mood):not(.props) td { padding: 3px 6px; border-bottom: 1px solid #f0f0f0; }
.prose blockquote { margin: 0 0 .8em; padding: 4px 12px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.6); }

/* ---------- Start menu ---------- */
.start-menu {
  position: fixed; left: 0; bottom: 30px; z-index: 60; width: 380px; max-width: calc(100vw - 8px);
  border-radius: 8px 8px 0 0; overflow: hidden; background: var(--frame); padding: 0 2px 2px;
  box-shadow: 2px -2px 10px rgba(0,0,0,.4); font: 12px var(--font-ui);
}
.start-menu[hidden] { display: none; }
.sm-head { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 10px; margin: 0 -2px; background: var(--title-grad); color: var(--title-fg); font: bold 15px var(--font-title); text-shadow: 1px 1px var(--title-shadow); }
.sm-head svg { width: 40px; height: 40px; background: #fff; border: 2px solid rgba(255,255,255,.8); border-radius: 4px; }
.sm-cols { display: grid; grid-template-columns: 1fr 1fr; }
.sm-cols ul { list-style: none; margin: 0; padding: 6px 0; }
.sm-left { background: #fff; }
.sm-right { background: var(--tp-body); border-left: 1px solid #95bdee; }
.sm-cols a, .sm-cols button {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 0; padding: 5px 10px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: #000; text-decoration: none; text-align: left; font: 12px var(--font-ui);
}
.sm-left a { font-weight: bold; }
.sm-left svg { width: 28px; height: 28px; }
.sm-cols a:hover, .sm-cols a:focus-visible, .sm-cols button:hover, .sm-cols button:focus-visible { background: #316ac5; color: #fff; outline: none; box-shadow: none; }
.sm-foot { display: flex; justify-content: flex-end; gap: 4px; padding: 6px 8px; margin: 0 -2px -2px; background: var(--taskbar); }
.sm-foot button, .sm-foot button:hover { min-width: 0; border: 0; background: none; box-shadow: none; color: var(--taskbar-fg); display: flex; align-items: center; gap: 5px; }
.sm-foot button:hover { text-decoration: underline; }

/* ---------- Display Properties dialog ---------- */
dialog.window { padding: 0 3px 3px; border: 0; width: 360px; max-width: calc(100vw - 24px); }
dialog.window::backdrop { background: rgba(0,0,0,.15); }
.monitor { margin: 6px auto 12px; width: 180px; padding: 10px 10px 18px; border-radius: 6px; background: linear-gradient(180deg, #e4e4e4, #b9b9b9); box-shadow: inset 0 0 0 1px #888; position: relative; }
.monitor::after { content: ""; position: absolute; left: 70px; right: 70px; bottom: -10px; height: 10px; background: #a8a8a8; border-radius: 0 0 4px 4px; }
.monitor .screen { height: 100px; background: var(--desktop); border: 1px solid #555; position: relative; overflow: hidden; }
.monitor .mini-win { position: absolute; left: 22px; top: 14px; right: 22px; height: 56px; background: var(--face); border: 2px solid var(--frame); border-top: 12px solid var(--frame); border-radius: 4px 4px 0 0; }
.monitor .mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: var(--taskbar); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

/* ---------- search (Pagefind UI) ---------- */
#search {
  --pagefind-ui-scale: .8; --pagefind-ui-primary: var(--accent); --pagefind-ui-text: #111;
  --pagefind-ui-background: #fff; --pagefind-ui-border: var(--field-border); --pagefind-ui-tag: #dfe8fa;
  --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 0; --pagefind-ui-font: var(--font-prose);
}
#search .pagefind-ui__result-link { color: var(--link); }

@media (max-width: 720px) {
  .docs > nav { position: static; }
  .sm-cols { grid-template-columns: 1fr; }
  .sm-right { border-left: 0; border-top: 1px solid #95bdee; }
}

/* ---------- minimal chrome (site.chrome = "minimal") ---------- */
.chrome-minimal body { padding-bottom: 0; background: linear-gradient(180deg, #2c6ad4 0%, #5d95ec 45%, #9cc4f5 100%) fixed; }
.chrome-minimal .desktop { display: block; max-width: 1040px; margin: 0 auto; padding: 24px 16px 32px; }
.chrome-minimal .new { animation: none; }
.tp-body button.tp-link {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 0; padding: 0;
  border: 0; background: none; box-shadow: none; color: var(--tp-head-fg); font: 12px var(--font-ui); cursor: pointer;
}
.tp-body button.tp-link:hover { text-decoration: underline; filter: brightness(1.4); }
@media (max-width: 900px) { .chrome-minimal .desktop { padding: 8px; } }

/* ---------- project docs ---------- */
.project-list .tool-row:last-child { border-bottom: 0; }
.project-list .meta { display: block; color: #666; font-size: 11px; margin-top: 2px; }
.source-note { margin-top: 18px; font-size: 11px; color: #666; }
.balloon.warning, .balloon.caution { background: #fff0e6; }
.balloon.important { background: #eef3ff; }
.prose table:not(.listview):not(.mood):not(.props) { display: block; max-width: 100%; overflow-x: auto; }
.prose h4 { font: bold 13px var(--font-title); margin: 1em 0 .4em; }
.prose hr { border: 0; border-top: 1px solid #d0d0bf; margin: 1.2em 0; }
.docs .tree-view a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }