img.gui-item[data-gui~="icon"][data-gui-icon~="archive"] {
  mask-image: url("/file/theme/images/icons/pack.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="cancel"] {
  mask-image: url("/file/theme/images/icons/cancel.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="copy"] {
  mask-image: url("/file/theme/images/icons/duplicate.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="crop"] {
  mask-image: url("/file/theme/images/icons/crop.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="cut"] {
  mask-image: url("/file/theme/images/icons/scissors.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="delete"] {
  mask-image: url("/file/theme/images/icons/trash.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="desktop"] {
  mask-image: url("/file/theme/images/icons/monitor.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="document"] {
  mask-image: url("/file/theme/images/icons/document.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="download"] {
  mask-image: url("/file/theme/images/icons/cloud-down.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="flip"] {
  mask-image: url("/file/theme/images/icons/flip.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="folder"] {
  mask-image: url("/file/theme/images/icons/folder.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="commits"] {
  mask-image: url("/file/theme/images/icons/fork.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="grid"] {
  mask-image: url("/file/theme/images/icons/table.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="list"] {
  mask-image: url("/file/theme/images/icons/bullet-list.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="laptop"] {
  mask-image: url("/file/theme/images/icons/laptop.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="more"] {
  mask-image: url("/file/theme/images/icons/plus.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="paste"] {
  mask-image: url("/file/theme/images/icons/clipboard.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="phone"] {
  mask-image: url("/file/theme/images/icons/mobile.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="preview"] {
  mask-image: url("/file/theme/images/icons/side-by-side.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="recycle"] {
  mask-image: url("/file/theme/images/icons/recycle.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="rotate"] {
  mask-image: url("/file/theme/images/icons/rotate.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="save"] {
  mask-image: url("/file/theme/images/icons/save.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="scale"] {
  mask-image: url("/file/theme/images/icons/scale.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="search"] {
  mask-image: url("/file/theme/images/icons/search.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="select-all"] {
  mask-image: url("/file/theme/images/icons/check.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="sidebar"] {
  mask-image: url("/file/theme/images/icons/sidebar.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="tablet"] {
  mask-image: url("/file/theme/images/icons/tablet.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="template"] {
  mask-image: url("/file/theme/images/icons/template.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="undo"] {
  mask-image: url("/file/theme/images/icons/undo.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="unpack"] {
  mask-image: url("/file/theme/images/icons/unpack.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="upload"] {
  mask-image: url("/file/theme/images/icons/cloud-up.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="window"] {
  mask-image: url("/file/theme/images/icons/window.png");
}
img.gui-item[data-gui~="icon"][data-gui-icon~="wysiwyg"] {
  mask-image: url("/file/theme/images/icons/eye.png");
}

:root {
  --gui-sans-fonts:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --gui-base-color: ghostwhite;
  --gui-trim-color: dodgerblue;
  --gui-mark-color: dodgerblue;
  --gui-safe-inset: 0rem;
}

#headbar nav {
  padding-top: calc(var(--gui-edge-space) * 0.5);
  padding-bottom: calc(var(--gui-edge-space) * 0.5);
}

#results form[name="search"] button[type="submit"] img {
  background-color: var(--gui-lite-color) !important;
}

/* Display grid view and list view controls. */
#results form[name="fields"] > header hr#edit-separator {
  display: initial;
}
#results form[name="fields"] > header fieldset[name="view"] {
  display: initial;
}

/* Grid View (default). */
#results form[name="fields"] > div ol > li {
  height: 16rem;
}
#results form[name="fields"] > div ol > li > a {
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

/* List View. */
#results:has(#view-list > input:checked) form[name="fields"] > div ol > li {
  flex: none;
  width: 100%;
  height: auto;
  max-width: initial;
  flex-direction: row;
}
#results:has(#view-list > input:checked) form[name="fields"] > div ol > li > label > img {
  width: 15vw;
  height: auto;
  max-width: calc(var(--gui-item-width) / 3);
}
#results:has(#view-list > input:checked) form[name="fields"] > div ol > li > a {
  flex-grow: 2;
  text-align: left;
}
#results:has(#view-list > input:checked) form[name="fields"] > div ol > li > time {
  text-align: right;
}
#results:has(#view-list > input:checked) form[name="fields"] > div ol > li > span {
  width: 4rem;
  text-align: right;
}

/* Highlight selected item? */
#results form[name="fields"] > div ol > li > label:has(:checked) ~ a {
  background-color: var(--gui-mark-color) !important;
  color: color-mix(in srgb, var(--gui-mark-color), black 60%);
}

@media screen and (min-height: 600px) {
  #results form[name="fields"] > div {
    overflow-y: scroll;
  }
}

#infobar[popover] {
  padding: 0;
}
#infobar[popover] header {
  padding-top: calc(var(--gui-edge-space) * 0.5);
  padding-bottom: calc(var(--gui-edge-space) * 0.5);
}

#wrapper form[name="plugin"] .CodeMirror {
  min-height: 100%;
  box-sizing: border-box;
  flex: 2 1 var(--gui-item-width);
  border: 1px solid var(--gui-edge-color);
  background-color: var(--gui-pane-color);
}
#wrapper form[name="plugin"] .CodeMirror .CodeMirror-gutters {
  background-color: var(--gui-pane-color);
}
#wrapper form[name="plugin"] .CodeMirror + iframe[name="viewer"] {
  min-height: 100%;
}
@media (prefers-color-scheme: dark) {
  #wrapper form[name="plugin"] .CodeMirror-line {
      filter: invert(1);
  }
}

#wrapper form[name="plugin"] .CodeMirror-merge {
  width: 100%;
  min-height: 100%;
}
#wrapper form[name="plugin"] .CodeMirror-merge-pane {
  height: 100%;
}
#wrapper form[name="plugin"] .CodeMirror-merge-pane .CodeMirror {
  min-height: 100%;
}

#wrapper form[name="plugin"] iframe[name="viewer"] {
  box-sizing: content-box;
}
#wrapper form[name="plugin"]:has(#view-window :checked) iframe[name="viewer"] {
  display: none;
}
#wrapper form[name="plugin"]:has(#view-desktop :checked) iframe[name="viewer"] {
  display: initial;
  flex: 0 1 1920px;
}
#wrapper form[name="plugin"]:has(#view-laptop :checked) iframe[name="viewer"] {
  display: initial;
  flex: 0 1 1366px;
}
#wrapper form[name="plugin"]:has(#view-tablet :checked) iframe[name="viewer"] {
  display: initial;
  flex: 0 1 768px;
}
#wrapper form[name="plugin"]:has(#view-phone :checked) iframe[name="viewer"] {
  display: initial;
  flex: 0 1 360px;
}

#wrapper form[name="plugin"] fieldset[name="args"] input[type="text"] {
  padding: 0 2px;
}

/* Position list of commits on Review app. */
#wrapper form[name="plugin"] details[name="commits"][open] > ol {
  top: calc(var(--gui-text-width) * 1.5);
}

/* Highlight selected and hovered items. */
#wrapper form[name="plugin"] details[name="commits"] a:hover,
#wrapper form[name="plugin"] details[name="commits"] a:not([rel]) {
  background-color: hsl(from var(--gui-gray-color) h s 80);
}

/* 
# Apps
*/

/*
## Tabular
*/
#tabular #wrapper form[name="plugin"] > div table#spreadsheet {
  border-collapse: collapse;
}
#tabular #wrapper form[name="plugin"] > div table#spreadsheet thead {
  background-color: ivory;
}
#tabular #wrapper form[name="plugin"] > div table#spreadsheet th,
#tabular #wrapper form[name="plugin"] > div table#spreadsheet td {
  padding: 0.5rem;
  text-align: left;
  vertical-align: middle;
  border: 1px solid lightgray;
}
@media (prefers-color-scheme: dark) {
  #tabular #wrapper form[name="plugin"] > div > div.jss_spreadsheet {
    filter: invert(0.8);
    color: var(--gui-dark-color);
  }
}

/*
## About
*/
#about #contact :is(input, textarea) {
  order: 3;
}

/**
## Settings
*/
#settings #infobar {
  max-width: 100%;
}
@media all and (min-width: 768px) {
  #settings #infobar {
    max-width: 400px;
  }
}

/**
## Preferences
*/
#preferences #infobar {
  max-width: 100%;
}
@media all and (min-width: 768px) {
  #preferences #infobar {
    max-width: 400px;
  }
}

/**
## Hosting
*/
#hosting #geolocation > div {
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}

/**
## Consumer
*/
#consumer #geolocation > div {
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}