/* ---------- apps ---------- */
.notepad { flex: 1; min-height: 0; width: 100%; resize: none; padding: 8px 10px; background: var(--panel); color: var(--panel-fg); border: 0; font: var(--mono-size)/1.5 var(--mono-font); user-select: text; -webkit-user-select: text; }
.notepad:focus-visible { outline: none; }

.explorer { flex: 1; min-height: 0; display: flex; }
.taskpane { width: 200px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow: auto; background: var(--pane-bg); }
.tp { flex: none; overflow: hidden; border-radius: 4px 4px 0 0; background: var(--pane-box); }
.tp h3 { margin: 0; padding: 5px 10px; font-size: var(--small-size); background: var(--pane-head); color: var(--pane-head-fg); }
.tp-body { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 8px; font-size: var(--small-size); color: var(--panel-fg); }
.tp-body p { margin: 0 0 4px; }
.tp-link { display: flex; align-items: center; gap: 6px; padding: 2px 0; background: none; border: 0; color: var(--pane-head-fg); text-align: left; }
.tp-link:hover { text-decoration: underline; }
.tp-link .ico { width: 16px; height: 16px; }
.files { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); align-content: start; gap: 12px; padding: 12px; overflow: auto; background: var(--panel); color: var(--panel-fg); }
.file { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; background: none; border: 1px solid transparent; border-radius: 3px; color: inherit; text-align: center; }
.file .ico { width: 48px; height: 48px; }
.file span { font-size: var(--small-size); overflow-wrap: anywhere; }
.file[aria-selected="true"] { background: color-mix(in srgb, var(--sel) 22%, transparent); border-color: var(--sel); }

.links { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 2px 6px; border-bottom: 1px solid var(--line); font-size: var(--small-size); color: var(--muted); }
.links button { padding: 1px 6px; background: none; border: 1px solid transparent; color: var(--body-fg); }
.links button:hover { border-color: var(--line); }
.viewport { flex: 1; min-height: 0; overflow: auto; container-type: inline-size; background: var(--web-bg); color: var(--web-fg); user-select: text; -webkit-user-select: text; }
.page { min-height: 100%; }
.zone { display: inline-flex; align-items: center; gap: 4px; }
.zone .ico { width: 14px; height: 14px; }
.loading .st::after { content: ""; display: inline-block; width: 60px; height: 8px; margin-left: 8px; background: repeating-linear-gradient(90deg, var(--sel) 0 6px, transparent 6px 8px); animation: grow 0.4s steps(6) infinite; }
@keyframes grow { from { width: 0; } to { width: 60px; } }

/* Task Manager */
.tm-panel { display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
.tm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.perf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.perf fieldset, .totals fieldset { min-width: 0; margin: 0; padding: 4px 8px 8px; border: 1px solid var(--line); }
.perf legend, .totals legend { padding: 0 4px; font-size: var(--small-size); }
.perf canvas { display: block; width: 100%; height: 86px; background: var(--graph-bg); }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.totals dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0; font-size: var(--small-size); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* SwitchbackBot */
.im-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.im-head .ico { width: 32px; height: 32px; }
.im-head small { display: block; font-size: var(--small-size); color: var(--muted); }
.im-log { flex: 1; min-height: 0; margin: 6px 8px 0; padding: 6px 8px; overflow: auto; background: var(--panel); color: var(--panel-fg); border: 1px solid var(--field-border); user-select: text; -webkit-user-select: text; }
.im-log p { margin: 0 0 5px; overflow-wrap: anywhere; }
.im-me { color: var(--im-me); }
.im-them { color: var(--im-them); }
.im-ts { font-size: 0.85em; color: var(--muted); }
.im-sugg { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; }
.im-chip { padding: 2px 9px; background: var(--panel); color: var(--panel-fg); border: 1px solid var(--line); border-radius: 10px; font-size: var(--small-size); }
.im-chip:hover { border-color: var(--sel); }
.im-form { flex: none; padding: 4px 8px 8px; }
.im-tools { display: flex; gap: 10px; padding: 2px 4px; font-size: var(--small-size); color: var(--muted); }
.im-row { display: flex; gap: 6px; }
.im-row textarea { flex: 1; resize: none; }
.im-row .btn { min-width: 64px; }

/* Trailamp */
.wbody.amp-body { background: var(--amp-bg); }
.amp { display: flex; flex-direction: column; gap: 6px; padding: 8px; color: var(--amp-green); font: 16px/1 "VT323", "Lucida Console", monospace; }
.amp-display { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 6px; background: var(--amp-lcd); border: 2px inset var(--amp-line); }
.amp-l { display: flex; flex-direction: column; gap: 4px; }
.amp-time { display: flex; align-items: center; gap: 6px; font-size: 30px; line-height: 1; }
.amp-state { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--amp-dim); }
.amp-state[data-s="play"] { border-left-color: var(--amp-green); }
.amp-state[data-s="pause"] { width: 8px; height: 10px; border: 0; border-left: 3px solid var(--amp-green); border-right: 3px solid var(--amp-green); }
.amp-vis { width: 76px; height: 20px; }
.amp-marq { overflow: hidden; white-space: nowrap; padding: 2px 4px; border: 1px solid var(--amp-dim); }
.amp-marq span { animation-duration: 11s; }
.amp-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--amp-dim); }
.amp-box { padding: 0 3px; border: 1px solid var(--amp-dim); color: var(--amp-green); }
.amp-on { color: var(--amp-green); }
.amp-seek { width: 100%; margin: 0; accent-color: #e2a400; }
.amp-ctl { display: flex; align-items: center; gap: 3px; }
.amp-ctl button { width: 30px; height: 24px; display: grid; place-items: center; padding: 0; background: var(--amp-btn); color: var(--amp-btn-fg); border: 1px solid #1a1a24; border-radius: 2px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25); }
.amp-ctl button svg { width: 12px; height: 12px; }
.amp-vol { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; color: var(--amp-dim); }
.amp-vol input { width: 74px; accent-color: #e2a400; }
.amp-list { margin: 0; padding: 3px; list-style: none; background: var(--amp-lcd); border: 2px inset var(--amp-line); }
.amp-list button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 1px 4px; background: none; border: 0; color: var(--amp-green); font: 15px/1.25 "VT323", "Lucida Console", monospace; text-align: left; }
.amp-list button span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.amp-list button.on { background: var(--amp-pick); color: var(--amp-pick-fg); }
.amp-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--amp-dim); }

/* Trailsweeper */
.mine-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; }
.mine { padding: 6px; background: var(--mine-face); border: 3px solid; border-color: var(--mine-light) var(--mine-dark) var(--mine-dark) var(--mine-light); }
.mine-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 4px 6px; border: 2px solid; border-color: var(--mine-dark) var(--mine-light) var(--mine-light) var(--mine-dark); }
.led { min-width: 46px; padding: 1px 3px; background: var(--led-bg); color: var(--led-fg); font: 26px/1 "VT323", "Lucida Console", monospace; text-align: right; letter-spacing: 1px; }
.mine-face { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: var(--mine-face); border: 2px solid; border-color: var(--mine-light) var(--mine-dark) var(--mine-dark) var(--mine-light); }
.mine-face span { width: 22px; height: 22px; display: grid; place-items: center; transform: rotate(90deg); background: var(--smiley); color: #000000; border: 1px solid #000000; border-radius: 50%; font: 700 11px/1 Tahoma, sans-serif; }
.mine-grid { display: grid; grid-template-columns: repeat(9, 24px); border: 3px solid; border-color: var(--mine-dark) var(--mine-light) var(--mine-light) var(--mine-dark); }
.cell { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; background: var(--mine-face); border: 3px solid; border-color: var(--mine-light) var(--mine-dark) var(--mine-dark) var(--mine-light); font: 700 15px/1 Tahoma, Verdana, sans-serif; }
.cell.open { border: 0; box-shadow: inset 1px 1px 0 var(--mine-dark); }
.cell.boom { background: var(--mine-boom); }
.cell svg { width: 16px; height: 16px; }
.n1 { color: #0000ff; } .n2 { color: #008000; } .n3 { color: #ff0000; } .n4 { color: #000080; }
.n5 { color: #800000; } .n6 { color: #008080; } .n7 { color: #000000; } .n8 { color: #808080; }
.mine-note { margin: 0; max-width: 230px; font-size: var(--small-size); text-align: center; }
.mine-flag { display: flex; align-items: center; gap: 6px; font-size: var(--small-size); }

/* New Message */
.mail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mail-fields { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.mail-lbl { font-size: var(--small-size); color: var(--muted); }
.mail-to { display: flex; gap: 6px; }
.mail-to .field { flex: 1; }
.mail-text { flex: 1; min-height: 110px; margin: 8px 10px; resize: none; line-height: 1.5; }
.mail-note { flex: none; margin: 0 10px 10px; padding: 8px 10px; background: var(--tip-bg); color: var(--tip-fg); border: 1px solid var(--tip-border); font-size: var(--small-size); }
.mail-note a { color: inherit; }

/* Recycle Bin */
.bin-confirm { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 8px 0; padding: 8px 10px; background: var(--tip-bg); color: var(--tip-fg); border: 1px solid var(--tip-border); font-size: var(--small-size); }
.bin-confirm p { flex: 1 1 200px; margin: 0; }
.bin-list { margin: 8px; }

/* Display Properties */
.dp { display: flex; flex-direction: column; gap: 12px; }
.monitor { align-self: center; display: flex; flex-direction: column; align-items: center; }
.mon-screen { position: relative; width: 224px; height: 140px; padding: 10px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #dcdcdc, #a9a9a9); box-shadow: inset 0 0 0 1px #777777; }
.mon-wall { display: block; width: 204px; height: 120px; background: #000000; }
.mon-stand { width: 64px; height: 14px; background: linear-gradient(180deg, #bdbdbd, #8f8f8f); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.mini { position: absolute; inset: 10px; overflow: hidden; pointer-events: none; }
.mini-win { position: absolute; left: 30px; top: 18px; width: 124px; background: var(--frame); border: 2px solid var(--frame); border-radius: 4px 4px 0 0; box-shadow: var(--win-shadow); }
.mini-tb { height: 15px; display: flex; align-items: center; gap: 2px; padding: 0 2px 0 4px; background: var(--title-bg); color: var(--title-fg); font: 700 8px/1 var(--title-font); }
.mini-tb span { flex: 1; overflow: hidden; white-space: nowrap; }
.mini-tb i { width: 9px; height: 9px; background: var(--ctl-bg); border: 1px solid var(--ctl-border); border-radius: 2px; }
.mini-tb i:last-child { background: var(--close-bg); }
.mini-body { height: 40px; display: grid; place-items: center; background: var(--body-bg); }
.mini-btn { padding: 2px 9px; background: var(--face); color: var(--face-fg); border: 1px solid var(--face-border); border-radius: 2px; font: 8px/1.2 var(--ui-font); }
.mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--taskbar-bg); }
.mini-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; background: var(--start-bg); border-radius: 0 6px 6px 0; }
.dp-label { display: block; margin-bottom: 4px; }
.dp select { width: 100%; }
.dp-blurb { margin: 8px 0 0; font-size: var(--small-size); color: var(--muted); }
.list { display: flex; flex-direction: column; max-height: 124px; overflow: auto; background: var(--field-bg); border: 1px solid var(--field-border); }
.list button { padding: 3px 8px; background: none; border: 0; color: var(--field-fg); text-align: left; }
.list button[aria-selected="true"] { background: var(--sel); color: var(--sel-fg); }

/* Help and Support */
.help-head { flex: none; padding: 12px 16px; background: var(--menu-head); color: var(--menu-head-fg); }
.help-head h2 { margin: 0; font: 700 18px/1.2 var(--title-font); }
.help-head p { margin: 4px 0 0; font-size: var(--small-size); opacity: 0.9; }
.help-main { flex: 1; min-height: 0; display: flex; }
.help-nav { width: 200px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px; overflow: auto; background: var(--pane-bg); }
.help-nav button, .help-nav a { padding: 5px 8px; background: var(--pane-box); color: var(--pane-head-fg); border: 0; border-radius: 3px; text-align: left; font-size: var(--small-size); }
.help-nav button[aria-current="true"], .help-nav a[aria-current="true"] { background: var(--sel); color: var(--sel-fg); font-weight: 700; }
.help-article { flex: 1; min-width: 0; padding: 14px 18px; overflow: auto; background: var(--panel); color: var(--panel-fg); user-select: text; -webkit-user-select: text; }
.help-article h3 { margin: 0 0 10px; font: 700 17px/1.3 var(--title-font); color: var(--link); text-wrap: balance; }
.help-article p { max-width: 62ch; margin: 0 0 10px; line-height: 1.6; }

/* message box */
.msg { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 4px; }
.msg .ico { width: 32px; height: 32px; }
.msg p { max-width: 36ch; margin: 4px 0 0; }

/* Run and Command Prompt */
.run-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 16px 0; }
.run-form .dlg-btns { grid-column: 1 / -1; padding-inline: 0; }
.wbody.cmd-body { background: #0c0c0c; }
.cmd { --cmd-ink: #c0c0c0; flex: 1; min-height: 0; overflow: auto; padding: 6px 8px; color: var(--cmd-ink); font: 14px/1.35 "Lucida Console", Consolas, Menlo, monospace; cursor: text; user-select: text; -webkit-user-select: text; }
.cmd-out { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd-line { display: flex; }
.cmd-line label { white-space: nowrap; }
.cmd-line input { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; caret-color: var(--cmd-ink); }
.cmd-line input:focus-visible { outline: none; }
.cmd { --cli-green: #16c60c; --cli-cyan: #61d6d6; --cli-yellow: #f9f1a5; --cli-red: #e74856; --cli-dim: #8a8a8a; --cli-bold: #f2f2f2; --cli-orange: #ff8a3d; --cli-soft: #8fb8b8; }
.cli-live { white-space: pre-wrap; }
.cli-green { color: var(--cli-green); }
.cli-cyan { color: var(--cli-cyan); }
.cli-yellow { color: var(--cli-yellow); }
.cli-red { color: var(--cli-red); }
.cli-dim { color: var(--cli-dim); }
.cli-bold { color: var(--cli-bold); font-weight: 700; }
.cli-orange { color: var(--cli-orange); }
.cli-list { outline: none; }
.cli-opt { display: block; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; white-space: pre-wrap; cursor: pointer; }
.cli-opt::before { content: "  "; white-space: pre; }
.cli-opt.on { color: var(--cli-cyan); }
.cli-opt.on::before { content: "❯ "; }
.cli-list:not(:focus) .cli-opt.on { color: var(--cli-soft); }
.cli-in { display: flex; align-items: flex-start; }
.cli-field { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; color: var(--cli-cyan); font: inherit; caret-color: var(--cli-cyan); resize: none; overflow: hidden; }
.cli-field:focus-visible { outline: none; }
.ctx button { position: relative; }
.ctx button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 7px; }
.retro-link { padding: 0; background: none; border: 0; color: var(--r-hot); font: inherit; text-decoration: underline; cursor: pointer; }

.dp-row { display: flex; gap: 6px; }
.dp .dp-row select { width: auto; flex: 1; }
.dp-gap { margin-top: 10px; }
.help-nav a { display: block; text-decoration: none; }
.help-article ul { padding-left: 20px; }
.help-article a { color: var(--link); }
/* the spam trap every message form carries: off-screen, never focused, empty for people */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Games: every game's canvas letterboxes inside its window, with the high-score board beside it (or under it when
   the window is tall and narrow); the initials box floats over the middle */
.wbody.arcade { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px; overflow: hidden; background: #05060d; }
.wbody.arcade[data-board-at="below"] { flex-direction: column; }
.arcade-stage { position: relative; flex: none; box-shadow: 0 0 0 1px #2a3350; }
.arcade-screen { display: block; touch-action: none; outline: none; }
.arcade-board { flex: none; box-sizing: border-box; width: 176px; padding: 5px 10px 7px; background: #0b0f1a; border: 1px solid #2a3350; color: #e8e6d9; font: 17px/1.1 VT323, var(--mono-font); }
.arcade-board h3 { margin: 0 0 4px; font: inherit; color: #f5c542; text-align: center; letter-spacing: 1px; }
.arcade-board ol { display: grid; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
[data-board-at="below"] .arcade-board { width: min(100%, 340px); }
[data-board-at="below"] .arcade-board ol { grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
.arcade-board li { display: grid; grid-template-columns: 3ch 3.4ch 1fr auto; gap: 4px; white-space: nowrap; }
.arcade-board li > span:nth-of-type(2) { text-align: right; }
.arcade-board li small { font: inherit; color: #8a93a8; }
.arcade-board li.empty { color: #5a6378; }
.arcade-board li.you { color: #7cc46a; }
.arcade-off { margin: 4px 0 0; text-align: center; color: #e2541c; }
.arcade-initials { position: absolute; inset: 0; margin: auto; width: 220px; height: fit-content; display: grid; justify-items: center; gap: 4px; padding: 12px; background: rgb(5 6 13 / 0.94); border: 2px solid #f5c542; color: #e8e6d9; font: 20px VT323, var(--mono-font); }
.arcade-initials p { margin: 0; color: #f5c542; font-size: 24px; }
.arcade-initials input { width: 5.4ch; padding: 2px 0 2px 6px; font: 36px VT323, monospace; letter-spacing: 6px; text-align: center; text-transform: uppercase; background: #000; color: #f5c542; border: 1px solid #2a3350; }
.arcade-initials .arcade-note { font: inherit; font-size: 16px; color: #e2541c; text-align: center; }
.arcade-initials .arcade-note:empty { display: none; }
.arcade-btns { display: flex; gap: 8px; margin-top: 4px; }
.gm-scores { margin: 0; padding: 0 0 0 2.4em; list-style: decimal; }
.gm-scores li { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono-font); }