/* Shared style of the SWI-Tinker query builders (G4+, nkt, ...). */
:root { --ink: #1d1d1b; --muted: #666; --line: #d8d4c8; --paper: #fbfaf6; --accent: #7a2b14; --box: #f3f0e6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
       font-family: Georgia, "Times New Roman", serif; line-height: 1.45; }
main { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5em; margin: 0 0 .1em; color: var(--accent); font-weight: normal; }
.sub { color: var(--muted); margin: 0 0 1.2em; }
.panel { background: var(--box); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }
label.title { display: block; font-weight: bold; margin: .9em 0 .3em; }
label.title:first-child { margin-top: 0; }
.symbols { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; align-items: center; }
.symbols span { color: var(--muted); margin-right: 4px; }
.symbols button { min-width: 2.2em; padding: 3px 6px; font: 1.05em Georgia, serif; cursor: pointer;
                  background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.symbols button:hover { border-color: var(--accent); }
#seq { width: 100%; font: 1.05em "DejaVu Sans Mono", Menlo, Consolas, monospace; padding: 7px 8px;
       border: 1px solid #bbb; border-radius: 3px; }
.choices { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.choices label { white-space: nowrap; cursor: pointer; }
.choices label.off { color: #aaa; }
.hint { color: var(--muted); font-size: .9em; }
#query { font: .95em "DejaVu Sans Mono", Menlo, Consolas, monospace; background: #fff; border: 1px solid var(--line);
         border-radius: 3px; padding: 7px 8px; margin: .8em 0 0; overflow-x: auto; white-space: pre; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
#run { font: 1em Georgia, serif; padding: 6px 16px; cursor: pointer; background: var(--accent); color: #fff;
       border: none; border-radius: 4px; }
#run:hover { filter: brightness(1.15); }
#copy { font: .9em Georgia, serif; padding: 5px 10px; cursor: pointer; background: #fff;
        border: 1px solid var(--line); border-radius: 4px; }
#examples { font: .95em Georgia, serif; padding: 4px; max-width: 100%; }
h2 { font-size: 1.1em; margin: 1.6em 0 .4em; }
table { border-collapse: collapse; font-size: .92em; }
td, th { padding: 2px 10px 2px 0; text-align: left; vertical-align: top; }
code { font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: .92em; }
footer { margin-top: 2em; color: var(--muted); font-size: .88em; border-top: 1px solid var(--line); padding-top: .6em; }
a { color: var(--accent); }
nav.builders { font-size: .9em; color: var(--muted); margin: 0 0 1em; }
/* the owl of SWI-Tinker's banner: back to the blog */
a.home { position: absolute; top: 14px; right: 16px; line-height: 0; }
a.home img { width: 40px; height: 40px; display: block; }
@media (max-width: 960px) { nav.builders { padding-right: 52px; } }
nav.builders b { color: var(--ink); font-weight: normal; }
.warn { color: #a33; font-size: .9em; min-height: 1.2em; }