/* Styles for the ShEx web apps -- shex-simple and shex-worker here, and
 * shexmap-simple and shexmap-worker in @shexjs/extension-map, which link
 * this file rather than keeping a copy.  Four copies is how the shape map
 * lost its left padding on three pages: the fix was made once, in the page
 * whose author noticed, and the others quietly did without.
 *
 * A page keeps a <style> of its own for what is actually its own: how its
 * input area scrolls, and, for the map apps, the bindings pane.
 *
 * The palette, so it stays a family:
 *   schema  #f4f4ff   data  #f4fff4   results  #fffff4   bindings #fffff4
 */

h1 { font-size: 1.3em; }
h1, p, ul { margin: 0; margin-left: .1em; }
.ShExLogo { float:left; height:1.3em; padding-left: .3em; }
/* uncomment for breathing icon
.ShExLogo {
  animation-duration: 2s;
  animation-name: ShExLogo-breath;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes ShExLogo-breath {
  from { transform: scale(1, 1); }
  to { transform: scale(1.2, 1.2); }
}
*/
.passes999 { margin-right: 1em; }
.passes, #results div .passes { padding-left: .1em; border-left: thick solid #bfb; }
.pair.passes { border-left: none; padding-left: none; }
.pair.passes { background-color: #bfb; }
.fails , #results div .fails  { padding-left: .1em; border-left: thick solid #fbb; }
.pair.fails { border-left: none; padding-left: none; }
.pair.fails { background-color: #fbb; }
.error , #results div .error  { padding-left: .1em; border-left: thick solid #b00; }
/* one validation result per block, told apart by a rule rather than
   by the punctuation of a JSON array */
#results > div > * + * { border-top: 1px solid #ccc; margin-top: .5em; padding-top: .5em; }
.running { background-color: #ddf; }
/* a validation over a synchronous data source holds the main thread,
   so the button says so before it starts and nothing else can */
#validate.running { background-color: #ffe9a8; border-color: #d0a400; font-style: italic; }
#inputarea { white-space: nowrap; }
#inputarea textarea { overflow-x: auto }
#inputarea textarea.data.focus {
  width: 100%;
  overflow: hidden;
  border-style: inset;
  border-width: 2px;
  padding: 1px 0px;
}
/* adds a bit of left padding to the shape map to fix issue with blinking cursor on left edge not shown enough when element gets bordered and is focused */      
#queryMap { padding-left: .4em }
ul[data-navColumn] button:focus::before { content: "> "; color: #730; margin-left: -1em; }
ul[data-navColumn] button:focus::after  { content: " <"; color: #730; margin-right: -1em; }
.schema.textarea, .schema, .schema.ui-dialog-content { background-color: #f4f4ff; color: #000000; border-color: #fc561c }
#inputSchema li.selected button { background-color: #e8e8ff; color: #000000; }
#inputData textarea, .data, .data.ui-dialog-content { background-color: #f4fff4; color: #000000; border-color: #f0a133 }
#inputData li.selected button { background-color: #e8ffe8; color: #000000; }
/* results are the third thing on the page, so the third tint in the
   family: schema #f4f4ff, data #f4fff4, results #fffff4.  Whether a
   result passed stays in its left border, which says it louder. */
.results { background-color: #fffff4; color: #000000; }
#manifestDrop { border-color: white; width: 100%; }
#manifestDrop div.manifest { overflow: auto; max-height: 10ex; }
#extensionDrop { border-color: #00ffff; width: 88%; border-width: thin; }
#inputSchema li button, #inputData li button {
  font-size: .7em;
  padding: 0em 2ex;
  border-radius: .5em;
  border: thin solid #000;
  cursor: pointer;
  box-shadow: 0.1em 0px 1em rgba(255, 255, 255, 0.9) inset;
}
#inputSchema li button.disabled, #inputData li button.disabled {
  color: #777;
}
body { border-width: .25em; border-style: solid; border-color: white; }
/* the tab set and the document share one box, whose height the app
   fixes to what a document needs once it has measured one (see
   showDocumentArea) so the buttons below don't move when the settings
   tab, which is short, is showing */
#dataSource-tabs { margin-bottom: .2em; padding: .2em; }
#dataSource-tabs .ui-tabs-nav { padding-left: .2em; }
#dataSource-tabs .ui-tabs-panel { padding: .3em .2em; }
/* one setting per line: they are a form, not a sentence, and a row of
   them runs off the side of a panel that is half the window wide */
#neighborhoodFields label.neighborhoodField { font-size: .85em; display: block; margin: .15em 0; }
#neighborhoodFields label.neighborhoodField > span { display: inline-block; min-width: 11em; }
#neighborhoodFields input[type=text], #neighborhoodFields input[type=number] { width: 22em; max-width: 60%; }
#neighborhoodFields .noSettings { font-size: .85em; font-style: italic; color: #666; }
#dataPaneControls { float: right; }
#dataPaneControls button { font-size: .8em; }
#dataSource { font-size: .8em; }
.droparea { border-width: .25em; border-style: dashed; }
.droparea.hover, body.hover { border: .25em dashed #0c0; }
.stoppable { background-color: red; }
#results div:disabled { background-color: #fff; }
#results div { width: 99%; border: none; }
/* the 99% width above must not reach into CodeMirror internals
   (appinfo results panes): 99%-wide gutters push the code offscreen */
#results .cm-editor div { width: unset; }
#results div:disabled.passes { color: #373; }
#results div:disabled.fails  { color: #733; }
#results div:disabled.error  { color: #300; }
#results div.human { margin: 1ex 0; }
#results div.human pre { margin: 0 2em; }
#results h3 { font-size: larger; margin: 0; }
#results pre { margin: 1ex; }
#results .data, #results .schema { border-style: dotted; border-width: 2px; }
.status { display: none; } /* disable .status 'cause it's redundant against the selected marker. */
#navlist li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
}
/* the shape map, in its three views (text, editor, fixed).  Not
   "actions": the buttons that act on it live with the data. */
#shapeMapArea {
  float:right;
  margin-right: .1em;
}
/* http://stackoverflow.com/questions/686905/labeling-file-upload-button#answer-35767488 */
.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}
label {
  /* border: thin solid black; */
  padding: 0 .3em;
}
.heading {
  font-weight: bold;
}
.panel {
  width: 48.5%;
  display: inline-block;
  margin: 0 .4em;
  vertical-align: top;
}
h2.status { margin: 0; }
#schemaDialect, #dataDialect { font-size: .7em; }
#shapeMap-tabs textarea.error { padding-left: default; border-left: default; background-color: #fdd; }
#editMap input.error { padding-left: none; border-left: none; background-color: #fdd; }
.pair { list-style-type: none; }
.addPair, .removePair { font-size: 80%; line-height: 1ex; font-family: monospace; }
.pair button {
  width: 1em;
  padding: .5em 0;
  padding-right: .5em; /* for firefox rendering issue */
}

#menuForm > fieldset {
    box-shadow: -.3ex .3ex grey;
    display: inline;
}

#controls {
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    display: none;
    background: white; opacity: 1;
    border: thin solid buttontext;
    /* box-shadow: -.3ex .3ex grey; */
}
#controls div {
    border: 10px solid buttonface;
}
#controls h3 {
    margin: 0;
}
#menu-button { margin-left: 1em; }
#menu-button svg { width: 1em; height: 1.5ex; }
#about {
  margin: 3em;
}
#controls ul { padding-left: 0; margin-left: 0; list-style-type: none; }
#controls li { padding: 0 1em; }
#controls li.menuitem:hover { background-color: buttonface; }

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0 .1em;
}
.ui-tabs .ui-tabs-panel {
    padding: 0;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: small;
}
#shapeMap-tabs .ui-tabs-panel {
    font-family: monospace;
    min-height: 10ex;
}
#shapeMap-tabs {
    font-family: inherit;
    font-size: inherit;
    margin-top: .5ex;
}
#editMap, #fixedMap {
    padding: 0;
}
#editMap td {
    padding: 0;
}
#editMap td:nth-child(2),
#editMap td:nth-child(4),
#editMap td:nth-child(5) {
    width: .01em;
}
#editMap input, #fixedMap input {
    width: 100%;
}
#fixedMap tr td:nth-child(2),
#fixedMap tr td:nth-child(4),
#fixedMap tr td:nth-child(5) { width: .8em; }
ul {
    padding-left: 1.2em;
    padding-right: .4em;
}

/* The validation debugger's controls (doc/debugger-design.md).
 *
 * Three rows rather than one long line: the step buttons beside the button
 * that started them, then which match is being stepped, then what it is
 * doing.  On one line the status text -- "paused before matching
 * <http://…/P31>; step or continue" -- pushed everything after it off to
 * the right, and the pane scrolled sideways to follow. */
#valDebugControls {
    margin-left: .6em;
    white-space: nowrap;
}
.valDbgRow {
    margin-top: .35em;
    font-size: small;
}
#valDbgMatches {
    max-width: 100%;
}
/* one small button per thread, and a generation can have a lot of them:
   let the list scroll in its own strip instead of widening the page */
#valDbgThreads {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
    max-width: 22em;
    overflow-x: auto;
    white-space: nowrap;
    font-size: small;
}
/* the status is a sentence, so let it wrap rather than run off the edge */
#valDbgStatus {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The materializer's controls, arranged like the validator's above.
 *
 * #outactions floats right so it sits at the panel's edge, and its wrapper
 * held nothing else -- so the wrapper collapsed to no height at all, the
 * float escaped it, and what came next in the page laid out over the top of
 * the buttons.  A block formatting context contains its floats. */
#outactionsRow {
    display: flow-root;
}
#outactions {
    float: right;
    margin-right: .1em;
    text-align: right;
}
#debugControls {
    margin-left: .6em;
    white-space: nowrap;
}
/* The materializer's thread list, at the left edge of the target schema
 * pane rather than in the right-floating controls.
 *
 * There it shared a right edge with the bindings pane, so every thread that
 * appeared or died changed the width of the block the step buttons sit in
 * and moved them out from under the mouse.  Here it grows rightward from an
 * edge that doesn't move. */
#dbgThreadsRow {
    min-height: 1.6em;
    padding-top: .5em;   /* level with the controls under the bindings pane */
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
}
#dbgThreads {
    font-size: small;
}
#dbgStatus {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The highlight switch's chip: centred above the validate/materialize
 * controls, where the reader is already looking when they press a button.
 *
 * A momentary mode has to be *visible* while it is held -- that is the whole
 * argument for holding a key rather than latching one -- so this says both
 * what the switch is set to and whether a highlight is frozen. */
/* beside the controls button, on its line.  #menuForm is a form and so a
 * block, which is why sitting after it put the chip underneath. */
#highlightModeRow {
    display: inline;
    margin-left: .6em;
}
#highlightMode {
    font-size: small;
    padding: .1em .7em;
    border: 1px solid #bbb;
    border-radius: 999px;
    background: #f4f4f4;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
}
/* live: the mouse is painting right now (whether by the switch or the key) */
#highlightMode[data-live="yes"] {
    border-color: #6a9a3a;
    background: #eef6e4;
    color: #33521c;
}
#highlightMode[data-state="off"] {
    color: #888;
}
/* frozen outranks the rest: nothing the mouse does will change the picture */
#highlightMode[data-frozen="yes"] {
    border-color: #7a86c8;
    background: #eceefb;
    color: #333c78;
    font-weight: bold;
}
#highlightMode:focus-visible {
    outline: 2px solid #88f;
    outline-offset: 1px;
}