/* gtz.dk — palette carried over from the original <portfolio/> site */
:root {
  --bg: #1b1e21;
  --pane: #212529;
  --line: #343b42;
  --dim: #445462;      /* decoration: grid, edges, the bug */
  --muted: #7d8a96;    /* secondary text that still has to be readable */
  --fg: #a3afba;
  --hi: #e2e8ee;
  --link: #ff8640;
  --token-fill: #2b2420;
  --guard: #a283e6;
  --update: #4fa3ff;
  --inv: #34d058;
  --trace-arrow: #ffd33d;
  --shadow: rgba(0, 0, 0, .45);
  --ge-stroke: #e6edf3;        /* graphedit-qt rendering */
  --ge-loc: #161d26;
  --ge-label: #1c2128;
  --ge-label-border: #6e7681;
  --ge-frame: #6e7781;
  --ge-guard: #30d158;
  --ge-update: #3b9eff;
  --comp: #8a63d2;             /* H-UPPAAL component colour */
  --comp-tint: rgba(138, 99, 210, .08);
  --comp-grid: rgba(138, 99, 210, .12);
  --comp-tag: #9d7ae0;
  --on-comp: #ffffff;
  --rainbow: linear-gradient(53.13deg, #ffd33d, #fb8532 19.02%, #ea4a5a 37.19%, #8a63d2 56.92%, #2188ff 79.93%, #34d058);
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f8f9fa;
  --pane: #ffffff;
  --line: #dde1e5;
  --dim: #b4bdc6;
  --muted: #66727d;
  --fg: #4a535b;
  --hi: #16191c;
  --link: #c2541b;
  --token-fill: #fff1e8;
  --guard: #7048c4;
  --update: #0969da;
  --inv: #1a7f37;
  --trace-arrow: #9a6700;
  --shadow: rgba(0, 0, 0, .08);
  --ge-stroke: #24292f;
  --ge-loc: #f6f8fa;
  --ge-label: #f6f8fa;
  --ge-label-border: #8c959f;
  --ge-frame: #8c959f;
  --ge-guard: #1a7f37;
  --ge-update: #0969da;
  --comp: #7e57c2;
  --comp-tint: rgba(126, 87, 194, .07);
  --comp-grid: rgba(126, 87, 194, .13);
  --comp-tag: #9575cd;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--fg);
  font: 14px/1.6 var(--mono);
  transition: background-color .25s, color .25s;
}
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px dashed var(--link); outline-offset: 3px; }
::selection { background: var(--link); color: var(--bg); }
strong { color: var(--hi); font-weight: 700; }
em { font-style: normal; color: var(--dim); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.rainbow { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- header -------------------------------------------------------------- */
.top { position: relative; text-align: center; padding: 28px 16px 4px; }
.top h1 { display: inline-block; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .01em; }
.top .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.theme-toggle {
  font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
}
.theme-toggle:hover { text-decoration: underline; }
.top .theme-toggle { position: absolute; top: 18px; right: 20px; font-size: 13px; }
.top .theme-toggle::before { content: "["; color: var(--dim); }
.top .theme-toggle::after { content: "]"; color: var(--dim); }

/* --- automaton ------------------------------------------------------------ */
.wrap {
  max-width: 1200px; margin: 0 auto; padding: 8px 16px 24px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start;
}
.graph { margin: 0; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
#automaton { font-family: var(--mono); }
.edge { fill: none; stroke-linejoin: round; transition: stroke .2s; }
.loc { cursor: pointer; outline: none; }
.loc .hit { fill: transparent; }
.loc .outer { transition: stroke .2s, fill .2s, filter .2s; }
.loc.initial, .loc.final { cursor: default; }
.token { fill: var(--link); filter: drop-shadow(0 0 6px var(--link)); }
.status { margin-top: 8px; color: var(--muted); font-size: 12px; }
.status .step { color: var(--fg); }
.status .clock { color: var(--inv); }
.status .var { color: var(--update); }

/* rendering switcher */
.variants { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 13px; }
.variants button {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 2px 0; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.variants button::before { content: "["; color: var(--dim); }
.variants button::after { content: "]"; color: var(--dim); }
.variants button:hover { color: var(--fg); }
.variants button[aria-selected="true"] { color: var(--link); border-bottom-color: var(--link); }

/* graphedit-qt */
#automaton[data-variant="graphedit"] { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
[data-variant="graphedit"] .frame { fill: none; stroke: var(--ge-frame); stroke-width: 2.5; }
[data-variant="graphedit"] .edge { stroke: var(--ge-stroke); stroke-width: 2; }
[data-variant="graphedit"] .edge.hot { stroke: var(--link); stroke-width: 2.6; }
[data-variant="graphedit"] .nail.guard { fill: var(--ge-guard); }
[data-variant="graphedit"] .nail.update { fill: var(--ge-update); }
[data-variant="graphedit"] .nail.plain { fill: var(--bg); stroke: var(--ge-stroke); stroke-width: 1.6; }
[data-variant="graphedit"] .label-box { fill: var(--pane); stroke: var(--ge-label-border); stroke-width: 1; }
[data-variant="graphedit"] .label { font-size: 13px; fill: var(--ge-stroke); }
[data-variant="graphedit"] .label.guard { fill: var(--ge-guard); }
[data-variant="graphedit"] .label.update { fill: var(--ge-update); }
[data-variant="graphedit"] .label.name { font-size: 18px; font-weight: 600; }
[data-variant="graphedit"] .loc .outer { fill: var(--ge-loc); stroke: var(--ge-stroke); stroke-width: 2; }
[data-variant="graphedit"] .loc .inner { fill: none; stroke: var(--ge-stroke); stroke-width: 2; }
[data-variant="graphedit"] .loc:hover .outer, [data-variant="graphedit"] .loc:focus-visible .outer,
[data-variant="graphedit"] .loc:hover .label-box.name, [data-variant="graphedit"] .loc:focus-visible .label-box.name { stroke: var(--link); }
[data-variant="graphedit"] .loc:hover .label.name, [data-variant="graphedit"] .loc:focus-visible .label.name { fill: var(--link); }
[data-variant="graphedit"] .loc:focus-visible .label-box.name { stroke-dasharray: 4 3; }
[data-variant="graphedit"] .loc.current .outer { stroke: var(--link); stroke-width: 3; filter: drop-shadow(0 0 6px var(--link)); }
[data-variant="graphedit"] .loc.current .label-box.name { stroke: var(--link); stroke-width: 1.5; }
[data-variant="graphedit"] .loc.current .label.name { fill: var(--link); }
.arrow.solid path { fill: var(--ge-stroke); }

/* H-UPPAAL */
[data-variant="huppaal"] .component-fill { fill: var(--comp-tint); }
[data-variant="huppaal"] .component-grid { fill: url(#grid); }
[data-variant="huppaal"] .grid-line { fill: none; stroke: var(--comp-grid); stroke-width: 1; }
[data-variant="huppaal"] .component-bar { fill: var(--comp); }
[data-variant="huppaal"] .component-frame { fill: none; stroke: var(--comp); stroke-width: 2; }
[data-variant="huppaal"] .component-name { fill: var(--on-comp); font-size: 13px; font-weight: 700; }
[data-variant="huppaal"] .edge { stroke: var(--fg); stroke-width: 1.5; }
[data-variant="huppaal"] .edge.hot { stroke: var(--link); stroke-width: 2.4; }
[data-variant="huppaal"] .nail circle { fill: var(--comp); }
[data-variant="huppaal"] .nail text { fill: var(--on-comp); font-size: 10px; font-weight: 700; }
[data-variant="huppaal"] .prop-link, [data-variant="huppaal"] .tag-link { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
[data-variant="huppaal"] .label-box { fill: var(--pane); stroke: var(--line); }
[data-variant="huppaal"] .label { font-size: 11px; }
[data-variant="huppaal"] .label.guard { fill: var(--guard); }
[data-variant="huppaal"] .label.update { fill: var(--update); }
[data-variant="huppaal"] .label-box.name { fill: var(--comp-tag); stroke: none; }
[data-variant="huppaal"] .label.name { fill: var(--on-comp); font-size: 13px; }
[data-variant="huppaal"] .loc .outer { fill: var(--comp); stroke: var(--comp); stroke-width: 3; }
[data-variant="huppaal"] .loc .inner { fill: none; stroke: var(--on-comp); stroke-width: 1.4; }
[data-variant="huppaal"] .loc:hover .outer, [data-variant="huppaal"] .loc:focus-visible .outer { stroke: var(--link); }
[data-variant="huppaal"] .loc:hover .label-box.name, [data-variant="huppaal"] .loc:focus-visible .label-box.name { fill: var(--link); }
[data-variant="huppaal"] .loc:focus-visible .outer { stroke-dasharray: 4 3; }
[data-variant="huppaal"] .loc.current .outer { stroke: var(--link); filter: drop-shadow(0 0 5px var(--link)); }
[data-variant="huppaal"] .loc.current .label-box.name { fill: var(--link); }
[data-variant="huppaal"] .loc.initial .outer, [data-variant="huppaal"] .loc.final .outer { stroke: var(--link); }
[data-variant="huppaal"] .loc-id { fill: var(--on-comp); font-size: 11px; pointer-events: none; }
.arrow.open path { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }

/* classic */
[data-variant="classic"] .edge { stroke: var(--dim); stroke-width: 1.4; }
[data-variant="classic"] .edge.hot { stroke: var(--link); stroke-width: 2.2; }
[data-variant="classic"] .label { font-size: 11px; }
[data-variant="classic"] .label.guard { fill: var(--guard); }
[data-variant="classic"] .label.update { fill: var(--update); }
[data-variant="classic"] .loc .outer { fill: var(--pane); stroke: var(--fg); stroke-width: 1.6; }
[data-variant="classic"] .loc .inner { fill: none; stroke: var(--fg); stroke-width: 1.4; }
[data-variant="classic"] .loc:hover .outer, [data-variant="classic"] .loc:focus-visible .outer { stroke: var(--link); }
[data-variant="classic"] .loc:focus-visible .outer { stroke-dasharray: 4 3; }
[data-variant="classic"] .loc.current .outer { stroke: var(--link); fill: var(--token-fill); }
[data-variant="classic"] .name { fill: var(--hi); font-size: 13px; text-anchor: middle; pointer-events: none; }
.arrow.classic path { fill: var(--dim); }

.arrow.hot path { fill: var(--link); }
.arrow.open.hot path { fill: none; stroke: var(--link); }

/* --- panel ---------------------------------------------------------------- */
.panel { background: var(--pane); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px var(--shadow); overflow: hidden; }
.panel .bar {
  display: flex; justify-content: space-between; gap: 1ch;
  padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.panel .body { padding: 14px 16px 4px; min-height: 270px; }
.panel .body > * { animation: type-in .35s both; }
.panel .body > :nth-child(2) { animation-delay: .06s; }
.panel .body > :nth-child(3) { animation-delay: .12s; }
.panel .body > :nth-child(4) { animation-delay: .18s; }
@keyframes type-in { from { opacity: 0; transform: translateX(-4px); } }
.panel h2, .locations-content h2 { margin: 0 0 10px; font-size: 15px; color: var(--hi); }
.panel h2::before, .locations-content h2::before { content: "~/"; color: var(--dim); }
.panel p { margin: 0 0 12px; }
.panel ul, .locations-content ul { list-style: none; margin: 0 0 12px; padding: 0; }
.panel li, .locations-content li { margin-bottom: 8px; padding-left: 2.2ch; text-indent: -2.2ch; }
.panel li::before, .locations-content li::before { content: "→ "; color: var(--dim); }
.guard { color: var(--guard); }
.trace { margin-top: 14px; font-size: 12px; color: var(--muted); max-height: 160px; overflow-y: auto; white-space: pre; }
.trace div:last-child { color: var(--fg); }
.trace .arrow-txt { color: var(--trace-arrow); }
.trace .update-txt { color: var(--update); }
.trace .tick-txt { color: var(--link); }
.trace .tock-txt { color: var(--inv); }

/* --- content sections: hidden with JS (shown in the panel), plain page without */
.js .locations-content { display: none; }
.no-js .js-only, .no-js .theme-toggle { display: none; }
.no-js .locations-content { max-width: 72ch; margin: 0 auto; padding: 16px; }
.no-js .locations-content section { margin-bottom: 28px; }

/* --- footer bug ----------------------------------------------------------- */
.foot { text-align: center; padding: 40px 16px 32px; overflow: hidden; }
/* the wrapper carries the bug's font size, so the eyes can be placed in its ch/em units */
.bug-wrap { position: relative; display: inline-block; font: 4px/1.24 var(--mono); }
.bug { display: block; margin: 0; text-align: left; color: var(--dim); font: inherit; white-space: pre; }
.bug a, .bug .theme-toggle { color: var(--link); font: inherit; }
.badge { max-width: 100%; }
/* the footer quip follows the theme: bugs are drawn to the light (and flutter around it) */
.bug-note.light { display: none; }
:root[data-theme="light"] .bug-note.dark { display: none; }
:root[data-theme="light"] .bug-note.light { display: inline; }
:root[data-theme="light"] .bug-wrap { animation: flutter 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
/* ...and in the light it wakes up: eyes open on its head (column 45, row ~4.6 of the art), then blink now and then */
.bug-eyes { display: none; position: absolute; left: 45ch; top: calc(4.6 * 1.24em); }
.bug-eyes span { display: block; font-size: 14px; line-height: 1; transform: translate(-50%, -50%); }
:root[data-theme="light"] .bug-eyes { display: block; }
:root[data-theme="light"] .bug-eyes span { animation: wake .45s ease-out .15s both, blink 5s ease-in-out 1.5s infinite; }
@keyframes wake {
  from { opacity: 0; transform: translate(-50%, -50%) scaleY(.1); }
}
@keyframes blink {
  0%, 92%, 100% { transform: translate(-50%, -50%); }
  96% { transform: translate(-50%, -50%) scaleY(.1); }
}
@keyframes flutter {
  0%, 100% { transform: none; }
  20% { transform: translate(1px, -1px) rotate(-.6deg); }
  45% { transform: translate(-1px, 0) rotate(.5deg); }
  70% { transform: translate(0, -2px) rotate(-.3deg); }
}

/* --- small screens -------------------------------------------------------- */
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; gap: 12px; }
  .panel .body { min-height: 0; }
  [data-variant="graphedit"] .label { font-size: 15px; }
  [data-variant="graphedit"] .label.name { font-size: 21px; }
  [data-variant="huppaal"] .label { font-size: 12.5px; }
  [data-variant="huppaal"] .label.name { font-size: 14px; }
  [data-variant="classic"] .label { font-size: 13px; }
  [data-variant="classic"] .name { font-size: 15px; }
}
@media (max-width: 600px) {
  body { font-size: 13.5px; }
  .top { padding-top: 36px; }
  .top h1 { font-size: 24px; }
  .bug-wrap { font-size: 4.2px; }
  [data-variant="graphedit"] .label { font-size: 15px; }
  [data-variant="graphedit"] .label.name { font-size: 20px; }
  [data-variant="huppaal"] .label { font-size: 14px; }
  [data-variant="huppaal"] .label.name { font-size: 16px; }
  [data-variant="huppaal"] .loc-id { font-size: 12px; }
  [data-variant="classic"] .label { font-size: 15px; }
  [data-variant="classic"] .name { font-size: 16px; }
  .trace { white-space: pre-wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}