/* WebTikZ — a workbench, not a web page.
 *
 * The chrome stays quiet so the picture is the only loud thing on screen:
 * vellum-cool neutrals, hairline rules, ultramarine for anything you can act
 * on.  The wordmark is set in Computer Modern, the typeface TeX draws with,
 * which we already ship for the pictures themselves.
 */

:root {
    color-scheme: light;

    --paper:        #f4f5f2;   /* the desk */
    --surface:      #ffffff;   /* panes that hold content */
    --surface-sunk: #eceee9;   /* inset areas: tabs strip, log, sidebar */
    --ink:          #1a2026;
    --ink-soft:     #5b6672;
    --ink-faint:    #8e98a3;
    --line:         #dcdfd9;
    --line-strong:  #c3c8c0;
    --accent:       #2742c4;   /* ultramarine, the pen you draw with */
    --accent-ink:   #ffffff;
    --accent-soft:  #e7eafb;
    --danger:       #a3282a;
    --danger-soft:  #fbeaea;
    --warn:         #8a6100;
    --warn-soft:    #fbf2df;
    --ok:           #1f6b45;

    --grid-line:    rgba(39, 66, 196, 0.10);

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "JetBrains Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;

    --sz-ui: 13px;
    --sz-small: 12px;
    --sz-tiny: 11.5px;
    --editor-size: 13.5px;

    --toolbar-h: 42px;
    --status-h: 24px;
    --radius: 3px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper:        #101317;
    --surface:      #181c21;
    --surface-sunk: #14181c;
    --ink:          #dee4ea;
    --ink-soft:     #97a2ae;
    --ink-faint:    #6b7682;
    --line:         #2a3038;
    --line-strong:  #3a424c;
    --accent:       #8298ff;
    --accent-ink:   #11151b;
    --accent-soft:  #232b40;
    --danger:       #ef8b8b;
    --danger-soft:  #33201f;
    --warn:         #e0b360;
    --warn-soft:    #2e2716;
    --ok:           #6fc79a;

    --grid-line:    rgba(130, 152, 255, 0.13);
}

@font-face {
    /* Shipped for the pictures; borrowed here for the wordmark. */
    font-family: cmr10;
    src: url("../vendor/tikzjax/fonts/cmr10.woff2") format("woff2");
    font-display: swap;
}

* { box-sizing: border-box; }

/* Several rules below set `display`, which would otherwise win against the
 * hidden attribute's user-agent style and show things meant to be gone. */
[hidden] { display: none !important; }

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

body {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font: var(--sz-ui)/1.45 var(--font-ui);
    overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- toolbar */

.toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--toolbar-h);
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex: none;
}

.brand {
    font-family: cmr10, Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0 4px 0 2px;
    padding-bottom: 2px;
    user-select: none;
}

.toolgroup {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolgroup-end { margin-left: auto; }

.btn {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { background: var(--surface-sunk); }
.btn:active { transform: translateY(0.5px); }

.btn[aria-expanded="true"],
.btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 500;
    padding: 4px 14px;
}

.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-primary[disabled] { opacity: 0.55; cursor: default; filter: none; }

.btn-small { padding: 2px 7px; font-size: var(--sz-small); }
.btn-icon { padding: 3px 8px; }

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.toggle input { margin: 0; accent-color: var(--accent); }

/* menus */

.menu-wrap { position: relative; }

.menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 40;
    min-width: 230px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(10, 15, 25, 0.16);
}

.menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 5px 9px;
    border-radius: 2px;
    cursor: pointer;
}

.menu button:hover { background: var(--accent-soft); color: var(--accent); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

.menu-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 9px;
    color: var(--ink-soft);
    font-size: var(--sz-small);
}

/* A checkbox belongs next to its words, not at the other end of the row. */
.menu-field:has(input[type="checkbox"]) { justify-content: flex-start; gap: 9px; }

.menu-field select {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 2px 4px;
}

/* ---------------------------------------------------------------- banner */

.banner {
    flex: none;
    padding: 7px 14px;
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
    color: var(--warn);
    font-size: var(--sz-small);
}

.banner code {
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: 2px;
}

/* ------------------------------------------------------------- workspace */

.workspace {
    flex: 1;
    min-height: 0;
    display: flex;
}

.pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface);
}

.pane-editor {
    width: var(--editor-width, 46%);
    flex: none;
    border-right: 1px solid var(--line);
}

.pane-preview { flex: 1; }

.splitter {
    flex: none;
    width: 5px;
    margin: 0 -2px;
    z-index: 5;
    cursor: col-resize;
    background: transparent;
}

.splitter:hover, .splitter:focus-visible { background: var(--accent-soft); }

/* ------------------------------------------------------------ sidebar */

.sidebar {
    flex: none;
    width: 216px;
    display: flex;
    flex-direction: column;
    background: var(--surface-sunk);
    border-right: 1px solid var(--line);
}

.sidebar[hidden] { display: none; }

.sidebar-head, .sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 9px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}

.sidebar-foot { border-bottom: 0; border-top: 1px solid var(--line); }

.doclist {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
}

.doclist li {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius);
}

.doclist li.current { background: var(--accent-soft); }

.doclist .doc-open {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    text-align: left;
    padding: 5px 7px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doclist li.current .doc-open { color: var(--accent); }

.doclist .doc-menu {
    border: 0;
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius);
    visibility: hidden;
}

.doclist li:hover .doc-menu, .doclist li.current .doc-menu { visibility: visible; }
.doclist .doc-menu:hover { color: var(--danger); }

.doclist .doc-when {
    display: block;
    font-size: var(--sz-tiny);
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- tabs */

.tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: none;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.tab {
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ink-soft);
    padding: 6px 13px;
    cursor: pointer;
}

.tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.tab .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: 1px;
}

.tab .count { color: var(--accent); font-variant-numeric: tabular-nums; }

.doc-title {
    flex: 1;
    min-width: 60px;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    padding: 0 12px;
    color: var(--ink-soft);
    text-align: right;
    text-overflow: ellipsis;
}

.doc-title:hover { background: var(--surface); }

.doc-title:focus { background: var(--surface); color: var(--ink); outline-offset: -2px; }

.tabpanel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tabpanel[hidden] { display: none; }

.panel-note {
    flex: none;
    margin: 0;
    padding: 7px 12px;
    font-size: var(--sz-small);
    color: var(--ink-soft);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.panel-note code { font-family: var(--font-mono); font-size: 11px; }

/* --------------------------------------------------------- setup panel */

.panel-setup { overflow: hidden; }

.setup-search { flex: none; padding: 8px 12px 4px; }

.setup-search input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.setup-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    margin-top: 8px;
    border-top: 1px solid var(--line);
}

.setup-grid > section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
}

.setup-grid h2 {
    flex: none;
    margin: 0;
    padding: 6px 12px;
    font-size: var(--sz-tiny);
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.checklist {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px 10px;
}

.checklist label {
    display: block;
    /* A wrapped description lines up under the name rather than under the box. */
    padding: 3px 6px 3px 27px;
    text-indent: -21px;
    border-radius: var(--radius);
    cursor: pointer;
}

.checklist label:hover { background: var(--surface-sunk); }
.checklist input { margin-right: 7px; accent-color: var(--accent); }
.checklist .name { font-family: var(--font-mono); font-size: 12px; }
.checklist .what { color: var(--ink-faint); font-size: var(--sz-tiny); }
.checklist label.on .name { color: var(--accent); }

/* -------------------------------------------------------------- editor */

.CodeMirror {
    flex: 1;
    height: auto;
    min-height: 0;
    font-family: var(--font-mono);
    font-size: var(--editor-size);
    line-height: 1.5;
}

.CodeMirror-gutters { border-right: 1px solid var(--line); }

.cm-tex-error {
    background: var(--danger-soft);
    box-shadow: inset 2px 0 0 var(--danger);
}

.gutter-error {
    color: var(--danger);
    padding-left: 3px;
    cursor: pointer;
}

/* -------------------------------------------------------------- canvas */

.canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* The ruler: one square is one TikZ centimetre at the current zoom. */
    background-color: var(--paper);
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid, 37.8px) var(--grid, 37.8px);
    background-position: var(--grid-x, 0) var(--grid-y, 0);
    cursor: grab;
}

.canvas.nogrid { background-image: none; }
.canvas.panning { cursor: grabbing; }

.canvas[data-background="dark"] { --paper: #0e1013; --grid-line: rgba(255, 255, 255, 0.07); }

.canvas[data-background="checker"] {
    --paper: #ffffff;
    background-image:
        linear-gradient(45deg, #e6e8e4 25%, transparent 25%, transparent 75%, #e6e8e4 75%),
        linear-gradient(45deg, #e6e8e4 25%, transparent 25%, transparent 75%, #e6e8e4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.sheet {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(12, 18, 30, 0.16), 0 10px 30px rgba(12, 18, 30, 0.10);
    transition: opacity 120ms ease-out;
}

.canvas[data-background="checker"] .sheet,
.canvas[data-background="dark"] .sheet { background: transparent; box-shadow: none; }

.sheet.stale { opacity: 0.45; }
.sheet.empty { display: none; }

.sheet svg { display: block; }

.canvas.invert .sheet svg { filter: invert(1) hue-rotate(180deg); }

.canvas-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    pointer-events: none;
}

.canvas-empty[hidden] { display: none; }

/* When the previous picture is still on screen behind it, the message moves
 * out of the middle so the drawing stays visible. */
.canvas-empty.over-picture {
    place-items: start center;
    padding-top: 16px;
}

.canvas-error {
    max-width: 460px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius);
    color: var(--ink);
    pointer-events: auto;
}

.canvas-error h2 { margin: 0 0 4px; font-size: var(--sz-ui); }
.canvas-error p { margin: 0; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--sz-small); }
.canvas-error button { margin-top: 10px; }

/* spinner shown while TeX runs */
.busy {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: var(--sz-small);
    color: var(--ink-soft);
}

.busy::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.busy[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ canvasbar */

.canvasbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    font-size: var(--sz-small);
    color: var(--ink-soft);
}

.zoomgroup { display: flex; gap: 3px; }
.btn-zoom { min-width: 52px; font-variant-numeric: tabular-nums; }
.dimensions {
    font-variant-numeric: tabular-nums;
    /* Wrapping here would make the whole bar taller as the pane narrows. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.canvasbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.canvasbar select {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2px 4px;
}

/* -------------------------------------------------------------- log */

.logpane {
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-sunk);
    border-top: 1px solid var(--line);
}

.logpane.open { flex: 0 0 var(--log-height, 240px); }

.log-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--ink-soft);
    text-align: left;
}

.log-head:hover { color: var(--ink); }
.log-caret { display: inline-block; transition: transform 120ms ease-out; }
.logpane.open .log-caret { transform: rotate(90deg); }
.log-status { margin-left: auto; font-variant-numeric: tabular-nums; }
.log-status.has-error { color: var(--danger); }
.log-status.has-warning { color: var(--warn); }

.log-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.issues {
    flex: none;
    max-height: 40%;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.issues:empty { display: none; }

.issues li { border-bottom: 1px solid var(--line); }

.issues button {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 6px 10px 6px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.issues button:hover { background: var(--surface); }
.issues .error button { border-left-color: var(--danger); background: var(--danger-soft); }
.issues .warning button { border-left-color: var(--warn); background: var(--warn-soft); }
.issues .where { color: var(--ink-faint); font-size: var(--sz-tiny); }
.issues .what { font-family: var(--font-mono); font-size: var(--sz-small); }

.transcript {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 8px 10px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--sz-small);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------- statusbar */

.statusbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--status-h);
    padding: 0 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: var(--sz-tiny);
}

.status-sep { flex: 1; }
#status-timing { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ dialogs */

dialog {
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
    max-width: 720px;
    width: calc(100% - 40px);
    max-height: 80vh;
    box-shadow: 0 20px 60px rgba(10, 15, 25, 0.28);
}

dialog::backdrop { background: rgba(12, 16, 22, 0.45); }

.dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}

.dlg-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.dlg-note { margin: 0; padding: 9px 14px; color: var(--ink-soft); font-size: var(--sz-small); }

.dlg-body { padding: 4px 16px 18px; overflow-y: auto; }
.dlg-body h3 { font-size: var(--sz-ui); margin: 16px 0 6px; }
.dlg-body p { margin: 6px 0; color: var(--ink-soft); }
.dlg-body kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0 4px;
    background: var(--surface-sunk);
    color: var(--ink);
}

.dlg-body table { border-collapse: collapse; width: 100%; }
.dlg-body td { padding: 3px 8px 3px 0; vertical-align: top; }
.dlg-body td:first-child { width: 150px; white-space: nowrap; }
.dlg-body td strong { font-weight: 600; color: var(--ink); }

.examplelist {
    list-style: none;
    margin: 0;
    padding: 0 10px 14px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px;
}

.examplelist button {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 8px 10px;
    cursor: pointer;
}

.examplelist button:hover { border-color: var(--accent); background: var(--accent-soft); }
.examplelist .title { display: block; }
.examplelist .uses { display: block; color: var(--ink-faint); font-size: var(--sz-tiny); font-family: var(--font-mono); }

/* Off-screen rather than display:none, so the engine's svg is laid out and
 * its fonts are loaded exactly as they will be in the canvas. */
#workbench {
    position: absolute;
    left: -100000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------------------------------------------- toasts */

.toasts {
    position: fixed;
    bottom: calc(var(--status-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    pointer-events: none;
}

.toast {
    padding: 6px 14px;
    background: var(--ink);
    color: var(--surface);
    border-radius: 14px;
    font-size: var(--sz-small);
    box-shadow: 0 6px 20px rgba(10, 15, 25, 0.25);
}

.toast.bad { background: var(--danger); color: #fff; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 900px) {
    .workspace { flex-direction: column; }
    .pane-editor { width: auto; height: 45%; border-right: 0; border-bottom: 1px solid var(--line); }
    .splitter { display: none; }
    /* The drawings list becomes a drawer over the work, so it needs an edge. */
    .sidebar {
        position: absolute;
        z-index: 30;
        top: var(--toolbar-h);
        bottom: var(--status-h);
        box-shadow: 10px 0 30px rgba(10, 15, 25, 0.22);
    }
    .toolbar { overflow-x: auto; }
    .setup-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before { transition: none !important; animation-duration: 3s !important; }
}