/* Windows 98 flavoured chrome, hand rolled (no external CSS). */
:root {
  --face: #c0c0c0; --light: #ffffff; --dark: #808080; --darker: #000000; --hl: #dfdfdf;
  --title1: #000080; --title2: #1084d0; --sel: #000080;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 11px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #008080; overflow: hidden; }
body { font: 11px/1.3 "MS Sans Serif", Tahoma, Arial, sans-serif; color: #000; }
button, input, select { font: inherit; }

.win98-window {
  position: absolute; inset: 8px; display: flex; flex-direction: column;
  background: var(--face);
  border: 1px solid; border-color: var(--hl) var(--darker) var(--darker) var(--hl);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dark);
  padding: 2px;
}
.titlebar {
  display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 2px 0 4px;
  background: linear-gradient(90deg, var(--title1), var(--title2)); color: #fff; font-weight: bold;
  user-select: none;
}
.titlebar .tb-buttons { margin-left: auto; display: flex; gap: 2px; }
.tb-btn { width: 16px; height: 14px; padding: 0; line-height: 10px; font-weight: bold; font-size: 10px; }
.tb-close { margin-left: 2px; }

button, .btn {
  background: var(--face); border: 1px solid; border-color: var(--light) var(--darker) var(--darker) var(--light);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hl); padding: 2px 10px; min-width: 60px; color: #000; cursor: default;
}
button:active, button.pressed { border-color: var(--darker) var(--light) var(--light) var(--darker); box-shadow: inset 1px 1px var(--dark), inset -1px -1px var(--hl); }
button.default { outline: 1px solid #000; }
button:disabled { color: var(--dark); text-shadow: 1px 1px var(--light); }
.tb-btn { min-width: 0; }

/* menus */
.menubar { display: flex; height: 19px; align-items: stretch; user-select: none; position: relative; z-index: 20; }
.menu { position: relative; padding: 2px 6px; }
.menu > .menu-title { padding: 1px 2px; }
.menu.open > .menu-title, .menu:hover > .menu-title { background: var(--sel); color: #fff; }
.menu-title u { text-decoration: underline; }
.dropdown {
  display: none; position: absolute; left: 0; top: 100%; min-width: 180px; background: var(--face); padding: 2px;
  border: 1px solid; border-color: var(--hl) var(--darker) var(--darker) var(--hl);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dark), 2px 2px 0 rgba(0,0,0,.3);
}
.menu.open .dropdown { display: block; }
.menu-item { display: flex; padding: 3px 18px 3px 24px; white-space: nowrap; position: relative; }
.menu-item .shortcut { margin-left: auto; padding-left: 24px; }
.menu-item:hover:not(.disabled) { background: var(--sel); color: #fff; }
.menu-item.disabled { color: var(--dark); text-shadow: 1px 1px var(--light); }
.menu-item.checked::before { content: "✓"; position: absolute; left: 8px; }
.menu-sep { height: 1px; margin: 3px 2px; border-top: 1px solid var(--dark); border-bottom: 1px solid var(--light); }

/* tutorial: the button at the right end of the menu bar, the step panel floating
   in the viewport, and the spotlight around the control the step talks about */
.tutorial-btn { margin-left: auto; align-self: center; min-width: 0; height: 17px; padding: 0 8px; line-height: 13px; font-weight: bold; }
.tut-panel {
  position: absolute; right: 12px; top: 12px; width: 330px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); z-index: 10;
  display: flex; flex-direction: column; background: var(--face); padding: 2px;
  border: 1px solid; border-color: var(--hl) var(--darker) var(--darker) var(--hl);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dark), 3px 3px 0 rgba(0,0,0,.35);
}
.tut-panel .titlebar { cursor: move; flex: none; }
.tut-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.tut-text { display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.tut-text p { margin: 0; }
.tut-status { font-size: 10px; color: #333; min-height: 14px; padding-top: 5px; border-top: 1px solid var(--dark); box-shadow: inset 0 1px var(--light); }
.tut-footer { display: flex; align-items: center; gap: 4px; }
.tut-footer .tut-step { margin-right: auto; color: #333; font-size: 10px; }
.tut-footer button { min-width: 0; padding: 2px 8px; white-space: nowrap; }
.tut-spot {
  position: fixed; z-index: 25; pointer-events: none; border: 2px solid #ff33ff; border-radius: 3px;
  box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255, 51, 255, .8);
  animation: tut-pulse 1.2s ease-in-out infinite;
  transition: left .15s, top .15s, width .15s, height .15s;
}
@keyframes tut-pulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 18px 7px rgba(255, 51, 255, .45); } }

/* layout */
.main { display: flex; flex: 1; min-height: 0; }
.toolbox { width: 118px; display: flex; flex-direction: column; padding: 2px 3px; gap: 4px; min-height: 0; }
.tools { display: grid; grid-template-columns: repeat(2, 27px); gap: 1px; justify-content: center; }
.tool { width: 27px; height: 27px; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.tool.active { border-color: var(--darker) var(--light) var(--light) var(--darker); box-shadow: inset 1px 1px var(--dark), inset -1px -1px var(--hl);
  background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.tool-options {
  min-height: 70px; padding: 4px; background: var(--face);
  border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark);
  display: flex; flex-direction: column; gap: 4px; font-size: 10px;
  /* A long panel (Pocket, Optimize with candidates) scrolls instead of spilling over the colour box. */
  flex: 0 1 auto; overflow-y: auto; overflow-x: hidden;
}
.tool-options select { min-width: 0; max-width: 100%; }
.tool-options .row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tool-options input[type=range] { width: 100%; margin: 0; }
.tool-options .row .val { min-width: 0; }
.tool-options .hint { color: #333; }
.fill-btn { width: 30px; min-width: 0; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; }
.tool-options input[type=number] { border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); background: #fff; padding: 1px; }
/* Molecule tool: one swatch per molecule on the canvas, in the Show Split colours */
.mol-swatches { gap: 2px; }
.mol-swatch { width: 20px; height: 18px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #000;
  border: 1px solid; border-color: var(--light) var(--darker) var(--darker) var(--light); text-shadow: 0 0 2px #fff; }
.mol-swatch.mol-new { background: var(--face); }
.mol-swatch.mol-sel { outline: 1px solid #000; outline-offset: -3px; }

.viewport {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); background: #808080;
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: var(--face); padding: 12px 20px;
  border: 1px solid; border-color: var(--light) var(--darker) var(--darker) var(--light); }

/* colours */
.colorbox { display: flex; align-items: center; gap: 6px; padding: 3px 4px; min-height: 52px; }
.fgbg { position: relative; width: 36px; height: 36px; flex: none;
  border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.swatch-big { width: 18px; height: 18px; border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); display: inline-block; }
.fgbg .swatch-big { position: absolute; }
.fgbg .bg { right: 4px; bottom: 4px; }
.fgbg .fg { left: 4px; top: 4px; }
.swatches { display: grid; grid-template-columns: repeat(7, 30px); grid-auto-rows: 30px; gap: 0; flex: none;
  border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.swatch { width: 30px; height: 30px; border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.swatch.fg-sel { outline: 1px solid #000; outline-offset: -2px; }
/* the "?" type: a see-through checker with the question mark, like the atom itself */
.swatch-wild { display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; color: #202020;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff; user-select: none; }
.swatch-big.swatch-wild { font-size: 13px; }
.dlg-swatches { grid-template-columns: repeat(6, 36px); grid-auto-rows: 36px; }
.dlg-swatches .swatch { width: 36px; height: 36px; }
.dlg-swatches .swatch.fg-sel { outline: 2px solid #000; outline-offset: -3px; }
.actions { margin-left: auto; padding: 0 8px; display: flex; gap: 6px; }
.actions button { min-width: 72px; padding: 6px 12px; font-weight: bold; }
.plane-controls { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px; font-size: 10px;
  border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.plane-controls .row { display: flex; align-items: center; gap: 6px; }
.plane-controls .lbl { width: 36px; }
.plane-controls input[type=range] { width: 140px; }
.plane-controls .val { width: 30px; text-align: right; }

/* status */
.statusbar { display: flex; gap: 2px; padding-top: 2px; }
.status-cell { padding: 2px 4px; border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-cell.grow { flex: 1; }

/* dialogs */
.win98-dialog { padding: 2px; background: var(--face); border: 1px solid; border-color: var(--hl) var(--darker) var(--darker) var(--hl);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--dark); min-width: 320px; font: inherit; }
.win98-dialog::backdrop { background: rgba(0,0,0,0.15); }
.dlg-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.dlg-body .row { display: flex; align-items: center; gap: 8px; }
.dlg-body .row.right { justify-content: flex-end; }
.dlg-body .lbl { min-width: 70px; }
.dlg-body select { min-width: 100%; }
.dlg-body input[type=text], .dlg-body input[type=number], .dlg-body select { border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); background: #fff; padding: 2px; }
.hint { color: #333; font-size: 10px; }
.mono { font-family: monospace; }
.check-table { border-collapse: collapse; background: #fff; border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); min-width: 260px; }
.check-table td { padding: 2px 8px; border-bottom: 1px solid #ddd; }
.check-table td:last-child { text-align: center; width: 24px; font-weight: bold; }
.check-table .pass { color: #080; }
.check-table .fail { color: #c00; }
.check-table .skip { color: #888; }
/* Validity: one row per molecule (molecule, atoms, verdict, failed checks, SMILES) */
.mol-table td:last-child { text-align: left; width: auto; font-weight: normal; }
.mol-table td.verdict { text-align: center; font-weight: bold; }
.mol-table td .mono { font-size: 11px; word-break: break-all; }
.mol-table th { text-align: left; padding: 2px 8px; font-weight: bold; border-bottom: 1px solid var(--dark); }
.reason-list { margin: 0; padding-left: 18px; max-height: 120px; overflow-y: auto; font-size: 11px; }
[hidden] { display: none !important; }