/* PatchPilot on TUI.css (Turbo Vision). Font: PxPlus IBM VGA 9x16, int10h.org, CC BY-SA 4.0. */
:root {
  --vga-black: #000;
  --vga-blue: #0000a8;
  --vga-cyan: #00a8a8;
  --vga-gray: #a8a8a8;
  --vga-red: #a80000;
  --vga-yellow: #ffff55;
  --vga-white: #fff;
  --vga-green: #00a800;
  --vga-bright-cyan: #55ffff;
  --vga-dark-gray: #545454;
}
html { font-family: "DOS", "Lucida Console", monospace; font-size: 16px; -webkit-font-smoothing: none; font-smooth: never; }
body { min-height: 100vh; padding: 34px 0 52px; line-height: 1.25; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vga-yellow); outline-offset: 1px; }

/* Menu bar and status bar */
.bar { top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px; color: var(--vga-black); }
.bar ul { display: flex; }
.bar ul li { margin-left: 0; }
.bar ul li:hover { background: transparent; }
.brand { letter-spacing: 1px; }
.source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source .warn { background: var(--vga-red); color: var(--vga-white); padding: 0 4px; }
.bar-bottom { color: var(--vga-black); }
.bar-bottom ul { display: flex; flex-wrap: wrap; align-items: center; }
.bar-bottom a { text-decoration: none; }
.bar-bottom .note { color: var(--vga-dark-gray); }

main { width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding-top: 22px; }
.win { display: block; width: 100%; margin-bottom: 28px; }
.win .tui-fieldset { margin: 0; }
.win legend { padding: 0 6px; }

/* Add dialog */
.add .tui-fieldset { border-color: var(--vga-white); }
.add legend { background: var(--vga-gray); color: var(--vga-white); }
#add-form { display: grid; gap: 8px; }
.frow { display: grid; grid-template-columns: 13ch minmax(0, 1fr); align-items: center; gap: 8px; }
.frow label { white-space: nowrap; }
.slot { position: relative; min-width: 0; }
.slot .tui-input { width: 100%; height: 26px; padding: 0 6px; color: var(--vga-yellow); background: var(--vga-blue); }
.slot .tui-input::placeholder { color: #5555ff; }
.slot .tui-input:focus { background: var(--vga-black); color: var(--vga-white); }
.actions { display: flex; align-items: center; gap: 18px; padding-left: calc(13ch + 8px); margin-top: 6px; }
.tui-button { box-shadow: 8px 8px var(--vga-black); margin-bottom: 8px; }
.tui-button:active, .tui-button:disabled { box-shadow: none; transform: translate(4px, 4px); }
.tui-button:focus-visible { background: var(--vga-bright-cyan); outline: none; }
.form-error { margin: 0; padding: 0 6px; background: var(--vga-red); color: var(--vga-white); }
.form-error:empty { display: none; }

.suggest { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; min-width: 440px; max-width: calc(100vw - 48px); max-height: 288px; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0; background: var(--vga-cyan); color: var(--vga-black); border: 2px solid var(--vga-white); box-shadow: 8px 8px var(--vga-black); }
.suggest li { white-space: nowrap; display: flex; justify-content: space-between; gap: 16px; padding: 1px 10px; cursor: pointer; }
.suggest li small { color: var(--vga-red); white-space: nowrap; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--vga-green); color: var(--vga-black); }
.suggest li[aria-selected="true"] small, .suggest li:hover small { color: var(--vga-white); }

.recent { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--vga-white); }
.recent > span { color: var(--vga-dark-gray); }
.chip { background: none; border: 0; padding: 0; color: var(--vga-blue); cursor: pointer; }
.chip::before { content: "["; color: var(--vga-black); }
.chip::after { content: "]"; color: var(--vga-black); }
.chip:hover, .chip:focus-visible { background: var(--vga-green); color: var(--vga-black); outline: none; }

/* Summary panel */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--vga-white); }
.summary div { padding: 4px 12px; border-right: 2px solid var(--vga-white); }
.summary div:last-child { border-right: 0; }
.summary b { display: block; font-size: 32px; line-height: 1.1; color: var(--vga-bright-cyan); }
.summary .hot b { color: var(--vga-yellow); }
.summary span { color: var(--vga-gray); }

/* Software windows */
.software .tui-fieldset { padding: 10px 12px 14px; }
.software legend { color: var(--vga-white); background: var(--vga-blue); }
.software .ver { color: var(--vga-yellow); }
.software .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.count { color: var(--vga-gray); }
.count.hot { color: var(--vga-yellow); }
.count.calm { color: #55ff55; }
.tbtn { background: var(--vga-gray); color: var(--vga-black); border: 0; padding: 0 8px; cursor: pointer; box-shadow: 4px 4px var(--vga-black); }
.tbtn:hover, .tbtn:focus-visible { background: var(--vga-green); outline: none; }
.tbtn.danger:hover, .tbtn.danger:focus-visible { background: var(--vga-red); color: var(--vga-white); }

.cves { width: 100%; border-color: var(--vga-cyan); }
.cves thead th { padding: 2px 6px; text-align: left; color: var(--vga-yellow); border-bottom: 2px solid var(--vga-cyan); border-right: 2px solid var(--vga-cyan); font-weight: normal; }
.cves tbody tr td { padding: 4px 6px; vertical-align: top; border-right: 2px solid var(--vga-cyan); }
.cves tbody tr + tr td { border-top: 2px dotted #5555ff; }
.cves tbody tr.reviewed { color: #5555ff; }
.cves tbody tr.reviewed a { color: #5555ff; }
.cve-id { color: var(--vga-bright-cyan); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.overdue { color: #ff5555; }
.flag { padding: 0 4px; white-space: nowrap; }
.flag.hit { background: var(--vga-red); color: var(--vga-white); }
.flag.ok { background: var(--vga-green); color: var(--vga-black); }
.flag.muted { background: var(--vga-dark-gray); color: var(--vga-white); }
.flag.pending { background: var(--vga-yellow); color: var(--vga-black); animation: blink 1s steps(2, start) infinite; }
.flag.rw { background: var(--vga-black); color: #ff5555; }
details { margin-top: 4px; color: var(--vga-gray); }
summary { cursor: pointer; color: #5555ff; list-style: none; }
summary::before { content: "► "; }
details[open] summary::before { content: "▼ "; }
details p { margin: 4px 0 0; max-width: 80ch; color: var(--vga-white); }
details p b { color: var(--vga-yellow); font-weight: normal; }

.empty { margin: 0; color: var(--vga-white); }
.empty .cursor { animation: blink 1s steps(2, start) infinite; }
.error { color: var(--vga-yellow); }
.monitor-note { margin: 0 0 12px; padding: 2px 8px; display: inline-block; background: var(--vga-black); color: var(--vga-gray); }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 46px; transform: translateX(-50%); padding: 4px 14px; max-width: calc(100% - 32px); color: var(--vga-white); }

@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .flag.pending, .empty .cursor { animation: none; } }

@media (max-width: 760px) {
  body { padding-top: 54px; }
  .bar { flex-direction: column; align-items: flex-start; gap: 0; }
  .source { white-space: normal; }
  .bar-bottom .note, .bar-bottom .tui-statusbar-divider:last-of-type { display: none; }
  .suggest { min-width: 0; }
  .suggest li { white-space: normal; }
  .frow { grid-template-columns: 1fr; gap: 2px; }
  .actions { padding-left: 0; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary div:nth-child(2) { border-right: 0; }
  .summary div:nth-child(-n+2) { border-bottom: 2px solid var(--vga-white); }
  .cves thead { display: none; }
  .cves, .cves tbody, .cves tr, .cves td { display: block; width: 100%; }
  .cves tbody tr td { border-right: 0; padding: 1px 4px; }
  .cves tbody tr { padding: 6px 0; }
  .cves tbody tr + tr { border-top: 2px dotted #5555ff; }
  .cves tbody tr + tr td { border-top: 0; }
  .cves td[data-label]::before { content: attr(data-label) " "; color: var(--vga-gray); }
}