/* Workbench 3.x inspired theme.
   Palette (sampled from a WB 3.x screenshot): grey #aaaaaa, black, white,
   blue #6688bb. Orange is off-palette, kept only for the AmigaGuide
   "highlight" pen. */

/* Amiga Topaz by Patrick H. Lauke, CC BY 3.0 — see fonts/README.md.
   Registered as "Retrace Topaz" so an installed Topaz is not overridden. */
@font-face {
  font-family: 'Retrace Topaz';
  src: url('fonts/AmigaTopaz.ttf') format('truetype');
  font-display: swap;
}

/* Workbench 3.x palette. */
:root {
  --wb-grey: #aaaaaa;
  --wb-grey-dark: #808080;
  --wb-black: #000;
  --wb-white: #fff;
  --wb-blue: #6688bb;
  --wb-orange: #e8a040;
  --wb-text: #000;
  --wb-desktop: #4a4a4a;
  --ag-font: "Topaz", "Amiga Topaz", "Retrace Topaz", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  /* Native widgets (select popup highlight) use the OS accent otherwise. */
  accent-color: var(--wb-blue);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--wb-desktop);
  font-family: var(--ag-font);
  /* Topaz is an 8x8 bitmap font: 16px on 20px lines stays on the pixel grid */
  font-size: 16px;
  line-height: 1.25;
  padding: 12px;
}

body.dragging .wb-window { outline: 2px dashed var(--wb-white); }

.wb-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--wb-grey);
  border: 2px solid;
  border-color: var(--wb-white) var(--wb-black) var(--wb-black) var(--wb-white);
}

/* Active window titlebar: black text on blue. */
.wb-titlebar {
  display: flex;
  align-items: center;
  background: var(--wb-blue);
  color: var(--wb-text);
  border-bottom: 2px solid var(--wb-black);
  white-space: nowrap;
}

#titlebar-text {
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-toolbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-bottom: 2px solid var(--wb-black);
}

.wb-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Nav buttons span the row at equal widths, like MultiView's gadget row. */
.wb-toolbar-nav button {
  flex: 1 1 0;
  min-width: max-content;
}

.wb-toolbar-extras { justify-content: flex-end; }

/* Gadtools buttons: no outline, just a shine/shadow bevel. */
.wb-toolbar button,
.wb-toolbar select,
.wb-toolbar input {
  font: inherit;
  font-size: 16px;
  padding: 4px 14px;
  background: var(--wb-grey);
  color: var(--wb-text);
  border: none;
  box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-black);
  cursor: pointer;
  user-select: none;
}

/* Pressed: inverted bevel with a white/grey checkerboard dither fill. */
.wb-toolbar button:active:not(:disabled) {
  box-shadow: inset 2px 2px 0 var(--wb-black), inset -2px -2px 0 var(--wb-white);
  background-image: conic-gradient(
    var(--wb-white) 25%, var(--wb-grey) 0 50%,
    var(--wb-white) 0 75%, var(--wb-grey) 0);
  background-size: 4px 4px;
}

.wb-toolbar button:disabled {
  color: var(--wb-grey-dark);
  cursor: default;
}

/* Hide the focus ring after mouse clicks, keep it for keyboard focus. */
.wb-toolbar :focus,
.wb-viewport :focus { outline: none; }
.wb-toolbar :focus-visible,
.wb-viewport :focus-visible { outline: 2px solid var(--wb-blue); outline-offset: 2px; }

.wb-toolbar select {
  appearance: none;
  padding-right: 26px;
  /* stepped triangle on the 2px pixel grid (5x3 glyph pixels) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 5 3"><path d="M0 0h5v1h-1v1h-1v1h-1v-1h-1v-1h-1z" fill="black"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Dropdown menu, like Workbench menus: white with a black frame, black text,
   inverted (black/white) highlight. Uses Chromium's customizable select;
   browsers without it keep the native popup with white/black options. */
.wb-toolbar select,
.wb-toolbar select::picker(select) {
  appearance: base-select;
  border-radius: 0; /* base-select's UA style rounds the corners */
}

.wb-toolbar select::picker(select) {
  background: var(--wb-white);
  border: 2px solid var(--wb-black);
  padding: 0;
}

.wb-toolbar select option {
  background: var(--wb-white);
  color: var(--wb-black);
  padding: 2px 12px;
}

.wb-toolbar select option:hover,
.wb-toolbar select option:checked {
  background: var(--wb-black);
  color: var(--wb-white);
}

.wb-toolbar select::picker-icon,
.wb-toolbar select option::checkmark { display: none; }

.wb-viewport {
  position: relative; /* line spans measure offsetTop against the viewport */
  flex: 1;
  min-height: 0; /* let the flex item shrink so it scrolls instead of growing */
  overflow: auto;
  background: var(--wb-grey);
  padding: 10px 14px;
}

/* Prop-gadget scrollbars: solid blue knob with a shine/shadow bevel on a
   blue/black checkerboard-dithered track, arrow gadgets at the ends. */
.wb-viewport::-webkit-scrollbar { width: 20px; height: 20px; }

.wb-viewport::-webkit-scrollbar-track {
  background-color: var(--wb-black);
  background-image: conic-gradient(
    var(--wb-blue) 25%, var(--wb-black) 0 50%,
    var(--wb-blue) 0 75%, var(--wb-black) 0);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 2px var(--wb-black);
}

.wb-viewport::-webkit-scrollbar-thumb {
  background: var(--wb-blue);
  box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-black);
}

.wb-viewport::-webkit-scrollbar-corner { background: var(--wb-grey); }

.wb-viewport::-webkit-scrollbar-button:single-button {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--wb-blue);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 2px var(--wb-black);
}

.wb-viewport::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 5 3"><path d="M0 3h5v-1h-1v-1h-1v-1h-1v1h-1v1h-1z" fill="black"/></svg>');
}

.wb-viewport::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 5 3"><path d="M0 0h5v1h-1v1h-1v1h-1v-1h-1v-1h-1z" fill="black"/></svg>');
}

.wb-viewport::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 3 5"><path d="M3 0v5h-1v-1h-1v-1h-1v-1h1v-1h1v-1z" fill="black"/></svg>');
}

.wb-viewport::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 3 5"><path d="M0 0v5h1v-1h1v-1h1v-1h-1v-1h-1v-1z" fill="black"/></svg>');
}

/* Firefox: no ::-webkit-scrollbar, and scrollbar-color would disable the
   custom styling in Chromium, so scope it here. */
@supports not selector(::-webkit-scrollbar) {
  .wb-viewport { scrollbar-color: var(--wb-blue) var(--wb-black); }
}

.wb-warnings {
  border-top: 2px solid var(--wb-grey-dark);
  padding: 4px 8px;
  font-size: 13px;
  background: #b8b090;
}
.wb-warnings summary { cursor: pointer; }
.wb-warnings ul { margin: 4px 0; }

.ag-message { color: var(--wb-text); }

/* --- Node content ------------------------------------------------------ */

.ag-content { color: var(--wb-text); }
.ag-mode-pre { white-space: pre; }
.ag-mode-wrap { white-space: pre-wrap; }
.ag-mode-smart { white-space: pre-wrap; }
.ag-proportional { font-family: system-ui, sans-serif; }

/* One block per source line; min-height keeps blank lines from collapsing. */
.ag-line { display: block; min-height: 1.25em; }
.ag-jcenter { text-align: center; }
.ag-jright { text-align: right; }

.ag-b { font-weight: bold; }
.ag-i { font-style: italic; }
.ag-u { text-decoration: underline; text-decoration-thickness: 2px; }

/* Workbench pen colors */
.ag-fg-text { color: var(--wb-text); }
.ag-fg-back, .ag-fg-background { color: var(--wb-grey); }
.ag-fg-shine { color: var(--wb-white); }
.ag-fg-shadow { color: var(--wb-black); }
.ag-fg-fill { color: var(--wb-blue); }
.ag-fg-filltext { color: var(--wb-white); }
.ag-fg-highlight { color: var(--wb-orange); }
.ag-bg-text { background: var(--wb-text); }
.ag-bg-back, .ag-bg-background { background: var(--wb-grey); }
.ag-bg-shine { background: var(--wb-white); }
.ag-bg-shadow { background: var(--wb-black); }
.ag-bg-fill { background: var(--wb-blue); }
.ag-bg-filltext { background: var(--wb-white); }
.ag-bg-highlight { background: var(--wb-orange); }

/* Buttons rendered from @{"label" link ...} etc.
   AmigaGuide links look like gadtools buttons: black text on grey with a
   shine/shadow bevel — no link color. Only the selected (pressed or
   keyboard-highlighted) link gets the fill-pen (blue) background. */
.ag-btn {
  display: inline-block;
  font: inherit;
  padding: 0 6px;
  margin: 0 2px;
  background: var(--wb-grey);
  color: var(--wb-text);
  text-decoration: none;
  box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-black);
  cursor: pointer;
  white-space: pre;
}

a.ag-link:active,
a.ag-link:focus-visible {
  outline: none;
  background: var(--wb-blue);
  box-shadow: inset 2px 2px 0 var(--wb-white), inset -2px -2px 0 var(--wb-black);
}

.ag-btn-disabled {
  background: var(--wb-grey);
  color: var(--wb-grey-dark);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 2px var(--wb-grey-dark);
}