/* Styles of the additional WinOops apps (task manager, update, assistant, games, disk tools, messenger, registry, help). One file keeps the first screen at few requests. */

/* ==== taskmgr ==== */
/* taskmgr: styles for the WinOops Task Manager and Dr. Watson (prefix tm- and wat-). */
.tm { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 6px 4px; background: var(--surface); }
.tm > .tabview { flex: 1; min-height: 0; }
.tm .tabpage { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: 8px; }
.tm-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-page > .btnrow { padding: 4px 0 0; background: transparent; }
.tm-list { flex: 1; min-height: 60px; overflow: auto; background: var(--field); border: 1px solid var(--cobalt-800); }
.tm-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.tm-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: normal; padding: 0; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, var(--cream-200)); border-bottom: 1px solid var(--line); border-right: 1px solid var(--cream-300); }
.tm-table th:not(:has(button)) { padding: 3px 6px; }
.tm-table th.r, .tm-table td.r { text-align: right; }
.tm-sortbtn { display: block; width: 100%; padding: 3px 6px; border: 0; background: transparent; font: inherit; color: inherit; text-align: inherit; cursor: default; }
.tm-sortbtn:hover { background: var(--cream-100); }
.tm-sortbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tm-table th[aria-sort="ascending"] .tm-sortbtn::after { content: " \25B2"; font-size: 8px; }
.tm-table th[aria-sort="descending"] .tm-sortbtn::after { content: " \25BC"; font-size: 8px; }
.tm-table td { padding: 1px 6px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tm-table tr.hot td { color: var(--danger); }
.tm-table tbody tr.sel td { background: var(--select); color: var(--select-text); }
.tm-table tbody tr:focus-visible { outline: 1px dotted var(--select-text); outline-offset: -2px; }
.tm-table tbody tr.sel:focus-visible td { box-shadow: inset 0 0 0 1px var(--amber); }
.tm-task { display: inline-flex; align-items: center; gap: 4px; }
.tm-all { display: flex; align-items: center; color: var(--text); }
.tm-row { display: flex; gap: 8px; align-items: stretch; }
.tm-row > .group:last-child { flex: 1; min-width: 0; }
.tm-row > .group:first-child { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; min-width: 100px; }
.tm .group { margin: 8px 0 4px; padding-top: 12px; }
.tm-canvas { display: block; background: #000; border: 1px solid var(--silver-700); }
.tm-row > .group:last-child .tm-canvas, .tm-page > .group .tm-canvas { width: 100%; height: 70px; }
.tm-pct { font-weight: bold; color: var(--text); }
.tm-nums > .group:last-child { grid-column: 1 / -1; order: -1; }
.tm-row > .group > .legend { white-space: nowrap; }
.tm-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: 8px; }
.tm-kv { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.tm-kv b { font-weight: normal; text-align: right; }
.tm-key { margin: 6px 0 0; display: flex; gap: 14px; }
.tm-key .up::before, .tm-key .down::before { content: ""; display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; background: #1f8a1f; }
.tm-key .down::before { background: #b88a00; }
.tm-note { margin: 4px 0; color: var(--text-dim); line-height: 1.35; }
.tm-status > span { flex: none; }
.tm-status > span:first-child { flex: none; min-width: 84px; }
.tm-status > span:last-child { margin-left: auto; }

/* Dr. Watson */
.wat { padding: 12px 14px 4px; background: var(--surface); }
.wat-head { display: flex; gap: 12px; align-items: flex-start; }
.wat-head b { display: block; margin-bottom: 4px; line-height: 1.35; }
.wat p { margin: 0 0 8px; line-height: 1.4; -webkit-user-select: text; user-select: text; }
.wat .dim { color: var(--text-dim); }
.wat .progress { margin: 8px 0 6px; }
.wat-now { min-height: 2.6em; }
.wat-count { font-weight: bold; color: var(--cobalt-800); }
.wat-trace { margin: 0; padding: 8px; flex: 1; min-height: 0; overflow: auto; background: #fff; border: 1px solid var(--cobalt-800); font: 12px/1.45 var(--font-mono); white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.wat-dbg { padding: 6px; background: var(--surface); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tm-list.short { flex: none; min-height: 0; }
.tm-list.short td { white-space: normal; }

/* ==== update ==== */
/* update: styles for the new WinOops apps (see docs/satire.md). */

/* WinOops Update: task pane left, content right */
.up-app { display: flex; flex: 1; min-height: 0; background: var(--surface); }
.up-side { width: 176px; flex: none; padding: 10px 8px; background: linear-gradient(180deg, var(--cobalt-600), var(--cobalt-800)); color: #fff; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.up-brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 13px; }
.up-navlist { display: flex; flex-direction: column; gap: 2px; background: var(--cobalt-100); border-radius: var(--radius-window) var(--radius-window) 0 0; padding: 6px 4px; }
.up-nav { background: none; border: 0; text-align: left; padding: 3px 6px; color: var(--cobalt-800); text-decoration: underline; cursor: pointer; border-radius: var(--radius); }
.up-nav:hover { color: var(--cobalt-900); background: #fff; }
.up-nav[aria-current="page"] { font-weight: bold; text-decoration: none; background: #fff; }
.up-nav:focus-visible, .up-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.up-sidenote { font-size: 11px; margin: auto 0 0; color: var(--cobalt-300); }
.up-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--cream-50); border-left: 1px solid var(--line); }
.up-page { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: auto; box-sizing: border-box; }
.up-h { margin: 0; font-family: var(--font-title); font-size: 16px; color: var(--cobalt-800); }
.up-hero { display: flex; align-items: center; gap: 12px; }
.up-lead { margin: 4px 0 0; font-weight: bold; color: var(--danger); }
.up-row { padding: 8px 0 0; gap: 8px; flex-wrap: wrap; }
.up-wide { min-width: 180px; height: 28px; }
.up-pctrow { display: flex; justify-content: space-between; gap: 8px; }
.up-line { margin: 0; min-height: 15px; }
.up-pct { font-variant-numeric: tabular-nums; }
.up-warn { color: var(--danger); font-weight: bold; margin-top: 8px; }
.up-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 90px; overflow: auto; border: 1px solid var(--cobalt-800); background: var(--field); }
.up-item { display: grid; grid-template-columns: 18px 1fr 64px 70px; align-items: center; gap: 4px; padding: 2px 4px; border-bottom: 1px solid var(--cream-200); }
.up-item:hover { background: var(--cobalt-100); }
.up-item label { overflow-wrap: anywhere; }
.up-id, .up-size { color: var(--text-dim); text-align: right; white-space: nowrap; }
.up-sum { margin: 0; font-weight: bold; }
.up-ignored { margin: 0; min-height: 15px; color: var(--danger); }
.up-tablewrap { overflow: auto; border: 1px solid var(--cobalt-800); background: var(--field); }
.up-table { border-collapse: collapse; width: 100%; }
.up-table th { text-align: left; background: linear-gradient(180deg, #fff, var(--cream-200)); border-bottom: 1px solid var(--line); padding: 2px 6px; position: sticky; top: 0; }
.up-table td { padding: 2px 6px; border-bottom: 1px solid var(--cream-200); }
.up-fail { color: var(--danger); }
.up-opt { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.up-foot { margin-top: auto; text-align: right; }
.up-link { background: none; border: 0; padding: 0; color: var(--cobalt-700); text-decoration: underline; cursor: pointer; }
.up-tiny { font-size: 9px; color: var(--text-dim); }
.up-faq p { margin: 2px 0 6px; }
.up-restart { align-items: center; justify-content: center; }
.up-big { font-family: var(--font-title); font-size: 20px; color: var(--cobalt-800); text-align: center; }
.up-step { color: var(--cobalt-800); }
@media (max-width: 640px) {
  .up-app { flex-direction: column; }
  .up-side { width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 6px; }
  .up-navlist { flex-direction: row; flex-wrap: wrap; border-radius: var(--radius); }
  .up-sidenote { display: none; }
}

/* WinOops Produktaktivierung */
.act { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--surface); }
.act-main { display: flex; flex: 1; min-height: 0; }
.act-side { width: 138px; flex: none; background: linear-gradient(180deg, var(--cobalt-500), var(--cobalt-900)); color: #fff; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-title); }
.act-side b { font-size: 16px; }
.act-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--cream-50); }
.act-body { flex: 1; overflow: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 6px; }
.act-h { margin: 0; font-family: var(--font-title); font-size: 15px; color: var(--cobalt-800); }
.act-lead { font-weight: bold; margin: 2px 0; }
.act-foot { margin: 0; padding: 4px 16px 6px; font-size: 10px; color: var(--text-dim); border-top: 1px solid var(--cream-200); min-height: 24px; }
.act-btns { border-top: 1px solid var(--line); padding-top: 8px; }
.act-opt { display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; }
.act-field { display: flex; flex-direction: column; gap: 1px; }
.act-input { width: 100%; box-sizing: border-box; }
.act-hint { margin: 0; min-height: 15px; color: var(--danger); }
.act-id { display: block; font-family: var(--font-mono); font-size: 13px; padding: 6px 2px; overflow-wrap: anywhere; letter-spacing: .5px; }
.act-fail { display: flex; align-items: center; gap: 10px; }
.act-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: stretch; }
.act-choice { height: auto; min-height: 25px; padding: 3px 10px; text-align: left; white-space: normal; }
@media (max-width: 640px) { .act-side { display: none; } }

/* WinOops Remoteunterstützung */
.rem { flex: 1; min-height: 0; display: flex; background: var(--surface); }
.rem-consent { margin: auto; max-width: 440px; padding: 16px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; }
.rem-cbtn { grid-column: 1 / -1; flex-wrap: wrap; }
.rem-h { margin: 0 0 6px; font-family: var(--font-title); font-size: 15px; color: var(--cobalt-800); }
.rem-live { flex: 1; min-width: 0; display: flex; position: relative; }
.rem-left { flex: 3; min-width: 0; display: flex; flex-direction: column; padding: 6px; }
.rem-right { flex: 2; min-width: 0; display: flex; flex-direction: column; padding: 6px 6px 6px 0; gap: 3px; }
.rem-desk { flex: 1; position: relative; overflow: hidden; border: 2px inset var(--silver-300); background: linear-gradient(180deg, var(--cobalt-300), var(--cobalt-600)); min-height: 140px; }
.rem-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; padding: 8%; height: 100%; box-sizing: border-box; }
.rem-tile { background: var(--cream-50); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; overflow: hidden; }
.rem-tile b { color: var(--cobalt-800); }
.rem-tile.hit { border-color: var(--danger); }
.rem-tile.hit span { color: var(--danger); font-weight: bold; }
.rem-cursor { position: absolute; transition: left 1.1s ease-in-out, top 1.1s ease-in-out; pointer-events: none; z-index: 2; }
.rem-cursor.still { transition: none; }
.rem-cursor i { display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid var(--danger); transform: rotate(-30deg); filter: drop-shadow(1px 1px 0 var(--ink)); }
.rem-cursor span { position: absolute; left: 12px; top: 14px; background: var(--amber); color: var(--ink); border: 1px solid var(--ink); padding: 0 4px; font-size: 10px; white-space: nowrap; }
.rem-bar { padding: 6px 0 0; }
.rem-ph { background: linear-gradient(180deg, var(--cobalt-500), var(--cobalt-700)); color: #fff; padding: 2px 6px; font-weight: bold; }
.rem-log { list-style: none; margin: 0; padding: 2px 4px; flex: 1; min-height: 70px; overflow: auto; background: var(--field); border: 1px solid var(--cobalt-800); }
.rem-log li { padding: 1px 0; overflow-wrap: anywhere; }
.rem-log time { color: var(--text-dim); font-family: var(--font-mono); }
.rem-chat { flex: 1; min-height: 70px; overflow: auto; background: var(--field); border: 1px solid var(--cobalt-800); padding: 2px 4px; }
.rem-msg { margin: 2px 0; overflow-wrap: anywhere; }
.rem-msg b { color: var(--cobalt-800); }
.rem-form { display: flex; gap: 4px; }
.rem-in { flex: 1; min-width: 0; }
.rem-off .rem-cursor { display: none; }
.rem-offmsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(241, 236, 215, .88); font-weight: bold; text-align: center; padding: 16px; z-index: 3; }
.rem-offmsg[hidden] { display: none; }
@media (max-width: 640px) { .rem-live { flex-direction: column; overflow: auto; } .rem-right { padding: 0 6px 6px; } }
.btn[aria-disabled="true"] { color: var(--text-disabled); border-color: var(--cream-300); background: var(--cream-100); cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { box-shadow: none; }
.up-table td:last-child { white-space: nowrap; }

/* ==== assistant ==== */
/* assistant: Klemmi the paper clip and the screen savers (prefixes kl- and ss-). */

/* Klemmi */
.kl-root { position: absolute; right: 14px; bottom: calc(var(--taskbar-h) + 8px); z-index: 89980; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 20px); pointer-events: none; }
.kl-root > * { pointer-events: auto; }
.kl-root[hidden], .kl-bubble[hidden] { display: none; }
.kl-bubble { position: relative; width: 272px; max-width: 100%; box-sizing: border-box; margin-right: 0; padding: 10px 12px; background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 9px; box-shadow: 2px 3px 5px rgba(0, 0, 0, .4); font: 12px/1.4 var(--font-ui); }
.kl-bubble::before { content: ""; position: absolute; right: 30px; bottom: -12px; border: 8px solid transparent; border-top: 12px solid #000; border-bottom: 0; }
.kl-bubble::after { content: ""; position: absolute; right: 31px; bottom: -10px; border: 7px solid transparent; border-top: 11px solid #ffffe1; border-bottom: 0; }
.kl-text { margin: 0 0 8px; }
.kl-text:empty { display: none; }
.kl-body:empty { display: none; }
.kl-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.kl-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.kl-bubble .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }
.kl-char { display: block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35)); transform-origin: 50% 100%; }
.kl-char:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.kl-svg { display: block; width: 68px; height: 112px; transform-origin: 50% 100%; animation: kl-idle 8s ease-in-out infinite; }
.kl-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: kl-blink 4.6s infinite; }
.kl-brow-r { animation: kl-brow 7s ease-in-out infinite; }
.kl-arrive .kl-char { animation: kl-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.kl-leave { opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.kl-wave .kl-svg { animation: kl-wave 1.5s ease-in-out 1; }
.kl-still .kl-svg, .kl-still .kl-eyes, .kl-still .kl-brow-r, .kl-still .kl-char, .kl-still.kl-arrive .kl-char { animation: none; }
body.reduce-motion .kl-svg, body.reduce-motion .kl-eyes, body.reduce-motion .kl-brow-r, body.reduce-motion .kl-char { animation: none; }
@keyframes kl-idle { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-5deg); } 90% { transform: rotate(4deg); } 94% { transform: rotate(-2deg); } }
@keyframes kl-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes kl-brow { 0%, 60%, 100% { transform: translateY(0); } 66%, 74% { transform: translateY(-2px); } }
@keyframes kl-pop { from { transform: scale(.2) translateY(30px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kl-wave { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-14deg) scale(1.08); } 45% { transform: rotate(12deg) scale(1.08); } 70% { transform: rotate(360deg); } }
.kl-opts { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 10px 12px 0; box-sizing: border-box; }
.kl-opt { display: block; margin: 7px 0; }
.kl-opt.dis { color: var(--text-disabled); }

/* Screen savers */
.oops-saver { background: #000; color: #fff; overflow: hidden; cursor: none; }
.oops-saver .ss-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font: 12px var(--font-ui); color: #8a93ad; }
.ss-badge { position: absolute; left: 4vw; top: 6vh; padding: 4px 12px; background: #1f6a2a; color: #d9ffd9; font: bold 14px var(--font-mono); letter-spacing: .1em; }
.ss-band { position: absolute; left: 0; right: 0; top: 42%; height: 9vh; min-height: 56px; overflow: hidden; border-top: 2px solid #1f6a2a; border-bottom: 2px solid #1f6a2a; background: #04140a; }
.ss-tick { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 clamp(20px, 2.9vw, 42px) var(--font-mono); line-height: max(9vh, 56px); color: #63e06a; text-shadow: 0 0 10px rgba(99, 224, 106, .5); will-change: transform; }
.ss-past { position: absolute; left: 4vw; right: 4vw; top: 15vh; color: #2f7a39; font: 15px/1.5 var(--font-mono); }
.ss-past p { margin: 0 0 6px; }
.ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-quote { position: absolute; left: 0; right: 0; bottom: 12vh; margin: 0; text-align: center; font: italic clamp(20px, 2.6vw, 38px) var(--font-title); color: #d7e3ff; text-shadow: 0 0 12px #000, 0 0 4px #000; }
.ss-static { position: absolute; left: 8vw; right: 8vw; top: 40%; margin: 0; font: 600 clamp(20px, 3vw, 40px)/1.4 var(--font-mono); color: #63e06a; }

/* tab in the display properties */
.ss-tab .ss-monitor { display: flex; flex-direction: column; align-items: center; margin: 4px 0 6px; }
.ss-mon-case { padding: 12px 12px 14px; background: linear-gradient(180deg, #e8e6dc, #c9c6b4); border: 1px solid #7d7a68; border-radius: 6px 6px 3px 3px; box-shadow: inset 0 0 0 1px #fff; }
.ss-mon-screen { position: relative; width: 168px; height: 118px; background: #000; border: 2px solid #3a3a3a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ss-mon-screen canvas { display: block; width: 100%; height: 100%; }
.ss-mon-text { margin: 0; padding: 0 6px; font: 600 9px/1.4 var(--font-mono); color: #63e06a; text-align: center; border-top: 1px solid #1f6a2a; border-bottom: 1px solid #1f6a2a; background: #04140a; }
.ss-mon-text.dim { color: #7a7a7a; border: 0; background: none; font-size: 11px; }
.ss-mon-neck { width: 34px; height: 8px; background: #b5b29f; border: 1px solid #7d7a68; border-top: 0; }
.ss-mon-foot { width: 74px; height: 6px; background: #c9c6b4; border: 1px solid #7d7a68; border-radius: 3px; }
.ss-tab .row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.ss-tab .row .select { flex: 1; }
.ss-tab .ss-use { display: block; margin: 8px 0 4px; }
@media (max-width: 640px) { .kl-root { right: 6px; } .kl-bubble { width: min(272px, calc(100vw - 24px)); } }

/* ==== games ==== */
/* games: styles for WinOops Solitär (sol-*) and WinOops Paint (pt-*). */

/* ---- Solitär ---- */
.sol { flex: 1; min-height: 0; display: flex; }
.sol-wrap {
  flex: 1; position: relative; container-type: inline-size; min-width: 0;
  --g: 8px; --cw: min(72px, calc((100cqw - 6 * var(--g) - 16px) / 7)); --ch: calc(var(--cw) * 1.4);
}
.sol-table {
  position: absolute; inset: 0; overflow: auto; padding: 10px 8px; -webkit-user-select: none; user-select: none;
  background: radial-gradient(ellipse at 50% 35%, #2f9a3c 0%, var(--green-700) 55%, var(--green-800) 100%);
  box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .45);
}
.sol-top, .sol-tab { display: grid; grid-template-columns: repeat(7, var(--cw)); gap: var(--g); justify-content: center; }
.sol-top { margin-bottom: calc(var(--cw) * .3); height: var(--ch); }
.sol-stock { grid-column: 1; } .sol-waste { grid-column: 2; position: relative; }
.sol-found:nth-of-type(3) { grid-column: 4; }
.sol-slot, .sol-col { position: relative; width: var(--cw); }
.sol-slot { height: var(--ch); border-radius: 4px; touch-action: none; }
.sol-col { height: calc(var(--h, 1.4) * var(--cw)); }
.sol-col > .sol-empty { position: absolute; left: 0; top: 0; }
.sol-ring {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .5); font: bold calc(var(--cw) * .42) var(--font-ui);
}

.sol-card {
  position: absolute; left: 0; top: calc(var(--y, 0) * var(--cw)); width: var(--cw); height: var(--ch); box-sizing: border-box;
  border: 1px solid #0d1b44; border-radius: 4px; background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
  font-family: var(--font-ui); font-size: calc(var(--cw) * .25); line-height: 1; touch-action: none; overflow: hidden;
}
.sol-slot > .sol-card { top: 0; }
.sol-card.red { color: #c01818; } .sol-card.blk { color: #111; }
.sol-corner { position: absolute; left: 3px; top: 3px; display: flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.sol-corner b { font-weight: bold; } .sol-corner i { font-style: normal; font-size: .9em; }
.sol-mid { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: calc(var(--cw) * .5); }
.sol-mid.court { top: 36%; font-size: calc(var(--cw) * .46); font-weight: bold; font-family: var(--font-doc); }
.sol-sub { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: calc(var(--cw) * .3); }
.sol-card.sel { background: #b8cdfa; box-shadow: 0 0 0 2px var(--cobalt-700), 1px 1px 2px rgba(0, 0, 0, .35); }
.sol-card.drag { visibility: hidden; }
.sol-card.back, .sol-stock .sol-card {
  background:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .9) 46% 49%, transparent 49%) center / 100% 100% no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .08) 25%, transparent 25% 50%, rgba(255, 255, 255, .08) 50% 75%, transparent 75%) 0 0 / 10px 10px,
    linear-gradient(160deg, var(--cobalt-600), var(--cobalt-900));
  border-color: #fff; box-shadow: 0 0 0 1px #0d1b44, 1px 1px 3px rgba(0, 0, 0, .4);
}
.sol-card.back::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38%; height: 30%; transform: translate(-50%, -50%) rotate(-4deg); border: 1px solid rgba(255, 255, 255, .85); border-radius: 2px;
  background: radial-gradient(circle at 82% 82%, var(--amber) 0 16%, transparent 17%), linear-gradient(115deg, transparent 46%, #fff 46% 52%, transparent 52%), linear-gradient(180deg, var(--cobalt-500), var(--cobalt-800));
}
.sol-card.back::after { content: "\2715"; position: absolute; right: 4px; bottom: 2px; font-size: calc(var(--cw) * .18); color: rgba(255, 255, 255, .7); }

.sol-slot:focus-visible, .sol-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; z-index: 40; }
.sol-ghost { position: absolute; z-index: 60; pointer-events: none; width: var(--cw); filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, .45)); }
.sol-ghost .sol-card { top: calc((var(--y, 0) - var(--y0, 0)) * var(--cw)); left: 0; }
.sol-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }
.sol-stats { white-space: pre; }

.sol-dlg { padding: 10px 12px 0; background: var(--surface); }
.sol-dlg-cols { display: flex; gap: 10px; } .sol-dlg-cols > .group { flex: 1; }
.sol-opt { display: block; margin: 4px 0; }
.sol-hint { min-height: 15px; margin: 3px 0 4px; color: var(--danger); }
.sol-ad-text { line-height: 1.4; padding: 6px 0; }
.sol-fine { height: 16px; margin: 4px 0 6px; color: var(--text-dim); font-style: italic; }
.sol-dlg .progress { margin-bottom: 8px; }

/* ---- Paint ---- */
.pt { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.pt [hidden] { display: none !important; }
.pt-main { flex: 1; min-height: 0; display: flex; }
.pt-side { width: 62px; flex: none; padding: 4px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pt-tools { display: grid; grid-template-columns: repeat(2, 26px); gap: 0; }
.pt-tool, .pt-size, .pt-fill {
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center; color: var(--ink);
  border: 1px solid transparent; background: var(--surface);
}
.pt-tool:hover, .pt-size:hover, .pt-fill:hover { border-color: #fff #808080 #808080 #fff; }
.pt-tool.on, .pt-size.on, .pt-fill.on { border-color: #808080 #fff #fff #808080; background: var(--cream-50); box-shadow: inset 1px 1px 0 var(--cream-300); }
.pt-tool:focus-visible, .pt-size:focus-visible, .pt-fill:focus-visible, .pt-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; z-index: 2; }
.pt-opts { display: flex; flex-direction: column; width: 52px; padding: 3px; background: var(--cream-50); border: 1px solid; border-color: #808080 #fff #fff #808080; }
.pt-opts .pt-size, .pt-opts .pt-fill { width: 100%; height: 14px; background: transparent; }
.pt-size > i { display: block; width: 34px; background: var(--ink); }
.pt-fill > i { display: block; width: 30px; height: 9px; border: 1px solid var(--ink); }
.pt-fill.both > i { background: #c0c0c0; } .pt-fill.solid > i { background: var(--ink); }
.pt-paper { flex: 1; min-width: 0; overflow: auto; padding: 4px; background: #808080; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #404040; }
.pt-canvas { display: block; background: #fff; cursor: crosshair; touch-action: none; image-rendering: pixelated; max-width: none; }
.pt-palette { display: flex; gap: 8px; align-items: center; padding: 4px 6px; flex: none; }
.pt-prev { position: relative; width: 34px; height: 32px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: var(--cream-50); flex: none; }
.pt-prev i { position: absolute; width: 16px; height: 16px; border: 1px solid #000; }
.pt-prev-bg { right: 4px; bottom: 4px; } .pt-prev-fg { left: 4px; top: 4px; z-index: 1; }
.pt-pal { display: grid; grid-template-columns: repeat(14, 16px); grid-auto-rows: 16px; grid-auto-flow: row; gap: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.pt-sw { width: 16px; height: 16px; padding: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.pt-pos { white-space: nowrap; min-width: 70px; }
.pt-dlg { padding: 10px 12px 0; background: var(--surface); }
.pt-lbl { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.pt-num { width: 70px; }
.pt-open-text, .pt-ask { line-height: 1.4; margin-bottom: 6px; }
.pt-hint { min-height: 15px; margin: 4px 0 6px; color: var(--text-dim); }
.pt-files { height: 170px; overflow: auto; background: #fff; border: 1px solid var(--cobalt-800); margin-bottom: 8px; }
.pt-files:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pt-file { padding: 2px 6px; white-space: nowrap; }
.pt-file.sel { background: var(--select); color: var(--select-text); }
@media (max-width: 640px) { .pt-pal { grid-template-columns: repeat(14, 20px); grid-auto-rows: 20px; } .pt-sw { width: 20px; height: 20px; } }

/* ==== disk ==== */
/* disk: Datenträgerbereinigung, Defragmentierung and Ereignisanzeige (see docs/satire.md). */

/* Datenträgerbereinigung */
.dk-scan { background: var(--surface); padding: 12px 12px 0; }
.dk-scanrow { display: flex; gap: 12px; align-items: flex-start; }
.dk-scanrow > div { flex: 1; min-width: 0; }
.dk-scanrow p { margin: 2px 0 8px; line-height: 1.35; }
.dk-status { margin: 0 0 6px; min-height: 15px; color: var(--text); }
.dk-bar { margin-bottom: 2px; }
.dk-main { background: var(--surface); padding: 8px 8px 0; display: flex; flex-direction: column; }
.dk-page p { margin: 0 0 6px; line-height: 1.35; }
.dk-list { border: 1px solid var(--cobalt-800); background: var(--field); height: 176px; overflow: auto; margin-bottom: 8px; }
.dk-item { display: flex; align-items: center; gap: 2px; padding: 1px 4px; cursor: default; }
.dk-item.sel { background: var(--select); color: var(--select-text); }
.dk-item .chk { flex: none; }
.dk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-size { flex: none; padding-left: 8px; min-width: 56px; text-align: right; }
.dk-total { margin: 0 0 4px; }
.dk-desc { min-height: 52px; margin: 2px 0 6px; line-height: 1.35; }
.dk-files { display: flex; justify-content: flex-end; }
.dk-page .group { margin-top: 10px; }

/* Defragmentierung */
.dk-defrag { background: var(--surface); padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; min-height: 0; }
.dk-dwrap { border: 1px solid var(--cobalt-800); background: var(--field); height: 84px; overflow: auto; flex: none; }
.dk-dtable { border-collapse: collapse; width: 100%; white-space: nowrap; }
.dk-dtable th { position: sticky; top: 0; background: linear-gradient(180deg, #fff, var(--cream-200)); border-bottom: 1px solid var(--line); border-right: 1px solid var(--cream-300); text-align: left; font-weight: normal; padding: 1px 4px; }
.dk-dtable td { padding: 1px 4px; }
.dk-dtable tbody tr.sel { background: var(--select); color: var(--select-text); }
.dk-dtable tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dk-cap { margin-top: 4px; }
.dk-map { border: 1px solid var(--cobalt-800); background: #c8c8c8; width: max-content; max-width: 100%; overflow: auto; flex: none; line-height: 0; }
.dk-defrag .dk-bar { width: 100%; max-width: 578px; margin-top: 4px; }
.dk-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--cream-300); }
.dk-legend span { display: inline-flex; align-items: center; gap: 4px; }
.dk-sw { width: 10px; height: 10px; border: 1px solid #555; display: inline-block; }
.dk-sw.frag { background: #d8221b; } .dk-sw.whole { background: #1f3fd0; } .dk-sw.fixed { background: #1f9a2b; } .dk-sw.free { background: #fff; }
.dk-repwrap { background: var(--surface); padding: 8px 8px 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dk-report { border: 1px solid var(--cobalt-800); background: var(--field); flex: 1; overflow: auto; padding: 4px 8px; -webkit-user-select: text; user-select: text; }
.dk-report:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dk-rl { padding: 1px 0 1px 12px; }
.dk-rl.hd { padding-left: 0; padding-top: 8px; font-weight: bold; color: var(--cobalt-800); }
.dk-repwrap .btnrow { padding-top: 8px; }

/* Ereignisanzeige */
.ev-split { display: flex; flex: 1; min-height: 0; background: var(--field); }
.ev-tree { width: 190px; flex: none; overflow: auto; border-right: 2px solid var(--cream-300); background: var(--field); padding: 2px 0; }
.ev-tree .ol-node { cursor: default; }
.ev-tree .ol-node:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ev-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ev-scroll { flex: 1; overflow: auto; }
.ev-table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.ev-table th { position: sticky; top: 0; background: linear-gradient(180deg, #fff, var(--cream-200)); border-bottom: 1px solid var(--line); border-right: 1px solid var(--cream-300); text-align: left; font-weight: normal; padding: 0; z-index: 1; }
.ev-sort { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 2px 6px; }
.ev-sort:hover { background: var(--cobalt-100); }
.ev-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ev-table td { padding: 1px 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ev-row.sel { background: var(--select); color: var(--select-text); }
.ev-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ev-ty { display: inline-flex; align-items: center; gap: 4px; }
.ev-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ev-props { background: var(--surface); padding: 10px 10px 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ev-cols { display: flex; gap: 14px; align-items: flex-start; }
.ev-cols > div:first-child, .ev-cols > div:nth-child(2) { flex: 1; min-width: 0; }
.ev-field { display: flex; gap: 6px; margin-bottom: 4px; }
.ev-lbl { flex: none; min-width: 52px; }
.ev-val { font-weight: bold; min-width: 0; overflow-wrap: anywhere; }
.ev-nav { display: flex; flex-direction: column; gap: 4px; }
.ev-arrow { min-width: 28px; padding: 0 4px; font-size: 9px; }
.ev-desc { margin: 8px 0 3px; }
.ev-text { flex: 1; min-height: 90px; resize: none; font-family: var(--font-ui); }
.ev-copyrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ev-note { color: var(--text-dim); }
.ev-props .btnrow { padding-top: 10px; }

@media (max-width: 520px) {
  .ev-tree { width: 120px; }
  .dk-item { padding: 3px 4px; }
}

/* ==== misc ==== */
/* misc: styles for the new WinOops apps (see docs/satire.md). Prefixes: msn- (Messenger), reg- (Registrierungs-Editor). */

/* Messenger: login and contact list */
.msn { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--field); }
.msn-login { padding: 12px 14px 0; background: var(--surface); flex: 1; }
.msn-login-head { display: flex; align-items: center; gap: 10px; }
.msn-login-title { font: bold 16px var(--font-title); color: var(--cobalt-700); }
.msn-login-text { margin: 10px 0 4px; line-height: 1.4; }
.msn-field { display: block; margin: 6px 0 2px; }
.msn-login .input { width: 100%; box-sizing: border-box; }
.msn-check { display: block; margin-top: 8px; line-height: 1.3; }
.msn-head { display: flex; gap: 8px; padding: 8px; background: linear-gradient(180deg, var(--cobalt-100), var(--cream-100)); border-bottom: 1px solid var(--line); }
.msn-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--field); border: 2px inset var(--silver-300); }
.msn-me { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msn-name { font-weight: bold; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msn-me .select { width: 100%; box-sizing: border-box; }
.msn-status-line { color: var(--text-dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msn-tree { list-style: none; margin: 0; padding: 4px 0; flex: 1; overflow: auto; background: var(--field); }
.msn-row { display: flex; align-items: center; gap: 4px; padding: 2px 6px; cursor: default; white-space: nowrap; }
.msn-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.msn-row:hover { background: var(--cobalt-100); }
.msn-group { font-weight: bold; color: var(--cobalt-700); }
.msn-group::before { content: "▾"; width: 12px; }
.msn-group[aria-expanded="false"]::before { content: "▸"; }
.msn-contact { padding-left: 22px; }
.msn-label { flex: 0 0 auto; max-width: 75%; overflow: hidden; text-overflow: ellipsis; }
.msn-sub { flex: 1 1 0; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.msn-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid var(--ink); background: var(--silver-500); }
.msn-dot.online { background: var(--green-500); }
.msn-dot.busy { background: var(--danger); }
.msn-dot.away { background: var(--amber); }
.msn-hint { padding: 4px 8px; color: var(--text-dim); font-size: 10px; border-top: 1px solid var(--cream-300); background: var(--surface); }

/* Messenger: conversation */
.msn-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--surface); }
.msn-to { padding: 4px 8px; background: var(--cream-100); border-bottom: 1px solid var(--line); color: var(--ink); }
.msn-log { flex: 1; min-height: 60px; overflow: auto; margin: 6px 6px 0; padding: 6px; background: var(--field); border: 2px inset var(--silver-300); -webkit-user-select: text; user-select: text; }
.msn-msg { margin-bottom: 6px; line-height: 1.35; }
.msn-who { font-weight: bold; color: var(--text-dim); font-size: 10px; }
.msn-msg.in .msn-who { color: var(--green-700); }
.msn-msg.out .msn-who { color: var(--cobalt-700); }
.msn-text { padding-left: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msn-msg.sys .msn-text { padding-left: 0; color: var(--text-dim); font-style: italic; }
.msn-act { margin: 4px 0 0 10px; }
.msn-typing { min-height: 14px; padding: 2px 10px; color: var(--text-dim); font-size: 10px; }
.msn-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 6px; }
.msn-smile { min-width: 24px; padding: 0 3px; line-height: 1.4; }
.msn-nudge-btn { margin-left: auto; }
.msn-send { display: flex; gap: 6px; padding: 4px 6px 8px; }
.msn-input { flex: 1; min-width: 0; }
.msn-balloon { position: absolute; right: 8px; bottom: 34px; max-width: 70%; padding: 6px 10px; background: #ffffe1; color: var(--text); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .35); z-index: 5; }
.msn-nudge { animation: msn-shake .5s linear; }
@keyframes msn-shake { 0%, 100% { translate: 0 0; } 15% { translate: -7px 3px; } 30% { translate: 7px -3px; } 45% { translate: -6px -2px; } 60% { translate: 6px 2px; } 80% { translate: -3px 1px; } }

/* Registrierungs-Editor */
.reg { display: flex; flex: 1; min-height: 0; background: var(--field); }
.reg-pane { overflow: auto; min-width: 0; }
.reg-pane.tree { flex: 0 0 38%; border-right: 2px solid var(--silver-300); }
.reg-pane.vals { flex: 1; }
.reg-tree { list-style: none; margin: 0; padding: 2px 0; min-width: max-content; }
.reg-key { display: flex; align-items: center; gap: 3px; height: 18px; white-space: nowrap; cursor: default; }
.reg-key:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.reg-key.sel { background: var(--select); color: var(--select-text); }
.reg-exp { width: 11px; height: 11px; line-height: 9px; text-align: center; flex: none; font-size: 10px; }
.reg-key [aria-hidden].reg-exp:not(:empty) { border: 1px solid var(--silver-500); background: var(--field); color: var(--text); }
.reg-folder { width: 14px; height: 10px; flex: none; background: #ffd966; border: 1px solid #a8861a; border-radius: 1px 3px 1px 1px; }
.reg-folder.root { background: var(--silver-300); border-color: var(--silver-700); }
.reg-list { border-collapse: collapse; width: 100%; table-layout: fixed; }
.reg-list th { position: sticky; top: 0; text-align: left; padding: 2px 6px; background: var(--surface); border: 1px solid var(--line); border-top: 0; font-weight: normal; }
.reg-list th:nth-child(1) { width: 34%; }
.reg-list th:nth-child(2) { width: 22%; }
.reg-list td { padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 18px; }
.reg-val:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.reg-val.sel { background: var(--select); color: var(--select-text); }
.reg-glyph { display: inline-block; min-width: 14px; margin-right: 5px; padding: 0 1px; font: bold 9px/12px var(--font-mono); text-align: center; border: 1px solid var(--ink); }
.reg-glyph.str { background: var(--cream-100); color: var(--ink); border-color: var(--danger); }
.reg-glyph.num { background: var(--cobalt-100); color: var(--ink); }
.reg-empty { padding: 10px; color: var(--text-dim); white-space: normal; }
.reg-find { padding: 10px 12px 0; background: var(--surface); }
.reg-find .input { width: 100%; box-sizing: border-box; margin: 3px 0 4px; }
.reg-check { display: block; margin: 3px 0; }

@media (max-width: 480px) {
  .reg { flex-direction: column; }
  .reg-pane.tree { flex: 0 0 40%; border-right: 0; border-bottom: 2px solid var(--silver-300); }
}
@media (prefers-reduced-motion: reduce) { .msn-nudge { animation: none; } }

/* ==== help ==== */
/* Help center (hc-), Search with Schnüffi (srch-), Klangbox (wmp-). */

/* Help center */
.hc { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.hc-hd { display: flex; align-items: center; gap: 10px; padding: 6px 14px; color: #fff; background: linear-gradient(90deg, var(--cobalt-900), var(--cobalt-600)); flex: none; }
.hc-title { font: bold 18px var(--font-title); }
.hc-sub { font-size: 11px; color: var(--cobalt-100); }
.hc-bar { flex-wrap: wrap; }
.hc-tb { background: none; font: inherit; color: var(--text); }
.hc-tb.dis { opacity: .5; }
.hc-ql { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.hc-q { width: 150px; }
.hc-body { flex: 1; display: flex; min-height: 0; }
.hc-side { width: 200px; flex: none; overflow: auto; padding: 10px 8px; background: linear-gradient(180deg, #5b8cff, #2f52c4); }
.hc-cat, .hc-side .tp-link { background: none; border: 0; padding: 1px 0; font: inherit; text-align: left; cursor: pointer; }
.hc-view { flex: 1; overflow: auto; padding: 16px 22px; background: var(--cream-50); -webkit-user-select: text; user-select: text; }
.hc-h1 { margin: 0 0 6px; font: bold 20px var(--font-title); color: var(--cobalt-800); }
.hc-lead { margin: 0 0 12px; font-size: 12px; color: var(--text-dim); }
.hc-crumb { margin-bottom: 8px; font-size: 11px; color: var(--text-dim); }
.hc-link { background: none; border: 0; padding: 0; font: inherit; color: var(--cobalt-700); text-decoration: underline; cursor: pointer; text-align: left; }
.hc-link:hover { color: var(--cobalt-500); }
.hc-link:focus-visible, .hc-cat:focus-visible, .hc-tb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hc-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-list li { display: flex; flex-direction: column; }
.hc-list small { color: var(--text-dim); font-size: 11px; }
.hc-cols { display: flex; gap: 28px; flex-wrap: wrap; }
.hc-col { flex: 1 1 220px; min-width: 0; }
.hc-col h2, .hc-rel b { display: block; margin: 8px 0 6px; font: bold 14px var(--font-title); color: var(--cobalt-800); border-bottom: 1px solid var(--cream-300); padding-bottom: 3px; }
.hc-rel { margin-top: 14px; }
.hc-fb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--cream-300); font-size: 11px; }
.hc-view .dv h2 { margin-top: 12px; font-size: 14px; }

/* Search assistant */
.srch-app { flex: 1; display: flex; min-height: 0; background: #fff; }
.srch-pane { width: 220px; flex: none; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--cobalt-100); border-right: 1px solid var(--cobalt-300); }
.srch-figure { display: flex; align-items: center; gap: 8px; }
.srch-q-hd { font: bold 13px var(--font-title); color: var(--cobalt-800); }
.srch-fields { display: flex; flex-direction: column; gap: 6px; }
.srch-opt { display: flex; align-items: flex-start; gap: 5px; cursor: pointer; }
.srch-opt small { display: block; color: var(--text-dim); font-size: 10px; }
.srch-lbl { font-weight: bold; color: var(--cobalt-800); }
.srch-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.srch-out { flex: 1; overflow: auto; padding: 12px 16px; background: var(--cream-50); min-width: 0; }
.srch-h { margin: 0 0 8px; font: bold 16px var(--font-title); color: var(--cobalt-800); }
.srch-say { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.srch-bubble { padding: 6px 10px; background: #fff8dc; border: 1px solid var(--amber); border-radius: 8px; line-height: 1.4; }
.srch-tips { margin: 0; padding-left: 20px; line-height: 1.6; }
.srch-hits { display: flex; flex-direction: column; }
.srch-hit { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border: 1px solid transparent; background: none; font: inherit; text-align: left; cursor: pointer; }
.srch-hit:hover { background: var(--cobalt-100); border-color: var(--cobalt-300); }
.srch-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.srch-hit-t { display: flex; flex-direction: column; min-width: 0; }
.srch-hit-t small { color: var(--text-dim); font-size: 10px; }
.srch-snip { color: var(--text); overflow-wrap: anywhere; }
.srch-snip mark { background: #ffe680; color: var(--text); }
.srch-fun .srch-hit-t b { color: var(--danger); }
.srch-more, .srch-extra { margin: 10px 0 0; color: var(--text-dim); font-style: italic; }
.srch-bar { height: 14px; border: 1px solid var(--cobalt-800); background: #fff; padding: 1px; }
.srch-barfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--green-500) 0 8px, #fff 8px 10px); }
@media (prefers-reduced-motion: no-preference) {
  .srch-busy .srch-nose { animation: srch-sniff .25s infinite alternate; transform-origin: 48px 52px; }
  .srch-busy .srch-lens { animation: srch-sweep .6s infinite alternate ease-in-out; }
}
@keyframes srch-sniff { to { transform: scale(1.35); } }
@keyframes srch-sweep { to { transform: translate(-6px, -4px); } }

/* Klangbox */
.wmp-app { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0a1230; color: #fff; border: 3px solid var(--cobalt-800); border-top-width: 0; }
.wmp-body { flex: 1; display: flex; min-height: 0; }
.wmp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 8px; gap: 6px; }
.wmp-banner { overflow: hidden; white-space: nowrap; padding: 3px 6px; color: #ffd76a; background: #14234f; border: 1px solid var(--cobalt-700); }
.wmp-banner span { display: inline-block; padding-left: 100%; animation: wmp-marquee 14s linear infinite; }
.wmp-banner.still span { padding-left: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .wmp-banner span { padding-left: 0; animation: none; } }
@keyframes wmp-marquee { to { transform: translateX(-100%); } }
.wmp-stage { flex: 1; min-height: 0; display: grid; border: 1px solid var(--cobalt-700); background: #0a1230; }
.wmp-canvas { width: 100%; height: 100%; min-height: 0; display: block; }
.wmp-now { padding: 2px 4px; color: var(--cobalt-100); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmp-list { width: 210px; flex: none; overflow: auto; display: flex; flex-direction: column; background: #101c44; border-left: 2px solid var(--cobalt-700); }
.wmp-item { display: grid; grid-template-columns: 22px 1fr 36px; gap: 4px; align-items: start; padding: 3px 6px; background: none; border: 0; color: var(--cobalt-100); font: inherit; text-align: left; cursor: pointer; }
.wmp-item:hover { background: #1e3a8a; }
.wmp-item.sel { background: var(--select); color: #fff; }
.wmp-item.playing .no::before { content: "\25B6"; }
.wmp-item.playing .no { font-size: 0; }
.wmp-item.playing .no::before { font-size: 11px; color: var(--amber); }
.wmp-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wmp-item .du { text-align: right; }
.wmp-seek { height: 8px; margin: 0 8px; background: #101c44; border: 1px solid var(--cobalt-700); flex: none; }
.wmp-seekfill { height: 100%; width: 0; background: linear-gradient(180deg, #8fb0ff, #2f63e6); }
.wmp-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(180deg, #4c6db0, #1c3a80); flex: none; }
.wmp-btn { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 1px solid #0c1f6b; border-radius: 13px; color: #fff; background: linear-gradient(180deg, #7ea6ff, #2f63e6 55%, #17389f); cursor: pointer; }
.wmp-btn:hover { box-shadow: 0 0 0 2px var(--amber); }
.wmp-btn[aria-pressed="true"] { background: linear-gradient(180deg, #d63b2f, #8a1f17); }
.wmp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wmp-vol { width: 90px; }
@media (max-width: 600px) {
  .hc-side, .srch-pane { width: 130px; }
  .wmp-list { width: 130px; }
  .hc-q { width: 90px; }
}