/* For browsers not supporting dialog (Safari) */
/* From https://github.com/GoogleChrome/dialog-polyfill/blob/master/dist/dialog-polyfill.css */
dialog {
  position: absolute;
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}
dialog:not([open]) {
  display: none;
}
/* General rule.  But :user-invalid is FF only right now anyway */
input:user-invalid {
  outline: 3px solid var(--alert-color);
}

* {
  box-sizing: border-box;
  --mg-orange: #e9923d;
  --mg-red: #ab2924;
  --accent-color: var(--mg-orange);
  --alert-color: var(--mg-red);
  --focus-color: var(--accent-color);
}
html {
  font-size: 16pt; /* This, not `body`, sets root em's (rem's) */
}
body {
  margin: 1em; /* beat UA default */
  font-family: sans-serif;
  background: #999;
}
a:link,
a:visited {
  color: rgb(0, 0, 192); /* beat UA styles for pseudo-classes */
}
::file-selector-button,
button,
summary {
  cursor: pointer;
}
textarea,
input,
select {
  border: 2px solid rgba(0, 0, 0, 0.3); /* beat (inconsistent) UA defaults */
}
a:focus,
button:focus,
select:focus,
input:focus,
textarea:focus {
  outline: 3px solid var(--focus-color); /* beat (inconsistent) UA defaults */
}
table {
  border-collapse: collapse; /* versus cellspacing attribute */
}
input,
select,
button,
textarea {
  font-size: 100%; /* beat UA default */
}
textarea {
  font-family: inherit; /* beat UA default (monospace) */
}

/* Reset list */
.property-values-list,
.types-nav-list {
  list-style: none; /* reset list */
  margin-top: 0; /* reset list */
  margin-bottom: 0; /* reset list */
  padding-left: 0; /* reset list */
}

/* Items with help text use `title` */
[title] {
  cursor: help;
  text-decoration: dotted underline;
}
/* A little disc question mark icon. */
/* Currently only used by file property input. */
.help-icon [data-part="text"] {
  background: #111;
  color: #eee;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
}

/* Layout */
.site-body {
  display: flex;
}
.site-body > [data-part="types"] {
  flex: 0 0;
}
.site-body > [data-part="selected-type"] {
  flex: 1 auto;
  padding-left: 2em;
}

.site-main-header {
  padding: 0.5em 1em;
  margin-bottom: 1em;
}
.site-main-nav {
  display: flex;
  align-items: center;
}
.site-main-commands {
  flex-grow: 1;
}

a.site-main-home-link {
  color: inherit;
  text-decoration: none; /* reset link */
}

/* Box */
.login-dialog,
.set-password-dialog,
.site-main-header,
.types-nav,
.record,
.records {
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0.5em -0.25em rgba(64, 64, 64, 0.5);
}
/* Box header */
.types-nav-header,
.record-header,
.records-header {
  display: flex; /* for positioning of close-box */
}
/* Box heading */
.login-dialog-heading,
.set-password-dialog-heading,
.types-nav-heading,
.record-heading,
.records-heading {
  flex: auto;
  margin-top: 0; /* beat heading */
  margin-bottom: 0; /* beat heading */
  font-weight: normal; /* beat heading */
  padding-left: 1rem; /* match .types-nav-link */
  padding-top: 0.5em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.125);
  white-space: nowrap;
}
/* Box commands */
.login-form-commands,
.set-password-form-commands,
.records-commands,
.record-form-commands {
  padding: 0.5em;
}

.set-password-form-commands,
.login-form-commands,
.site-main-commands {
  text-align: right;
}
.file-commands .file-remove-button,
.record-form-commands .record-delete-button {
  float: right; /* You have a better idea? */
  /* TODO: yes, text-align: right, see above.  What's wrong with that? */
}

/* Command buttons */
::file-selector-button {
  padding: 0.5em 1em; /* duplicates padding in rule below */
}

.login-submit-button,
.set-password-submit-button,
.site-main-logout-button,
.add-property-value-button,
.remove-property-value-button,
.record-delete-button,
.record-save-button,
.new-record-button,
.file-download-button,
.file-remove-button {
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.5); /* beat button default */
  padding: 0.5em 1em;
}

.login-submit-button:hover,
.set-password-submit-button:hover,
.site-main-logout-button:hover,
.add-property-value-button:hover,
.new-record-button:hover,
.record-save-button:hover {
  background-color: var(--accent-color);
}

/* Alert buttons */
.remove-property-value-button:hover,
.record-delete-button:hover,
.file-remove-button:hover,
.close-box:hover {
  background-color: var(--alert-color);
  color: rgba(255, 255, 255, 0.8);
}

/* Types */
a.record-link,
a.types-nav-link {
  --arrow-height: 2.5;
  --arrow-color: rgba(255, 255, 255, 0.8);
  --arrow-color: #eee;
  display: block;
  height: calc(var(--arrow-height) * 1rem);
  line-height: calc(var(--arrow-height) / 2);
  padding: 0.75rem 1rem;
  text-decoration: none; /* reset link */
  color: inherit; /* beat :visited and other state colors */
  /* needed for arrow & to prevent compression of types-nav */
  white-space: nowrap;
  background-color: var(--arrow-color);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  color: black;
}
.record-link:hover,
.types-nav-link:hover {
  --arrow-color: var(--accent-color);
}
.record-link,
.types-nav-link {
  position: relative;
}
.record-link::before,
.types-nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 0;
  width: 0;
  border: calc(var(--arrow-height) * 0.5rem) solid transparent;
  border-left-color: var(--arrow-color);
  z-index: 1;
}

/* Selected type */
.selected-type {
  display: flex;
}
.selected-type > [data-part="records"] {
  flex: 0 0;
}
.selected-type > [data-part="record"] {
  flex: 1 1 auto;
  padding-left: 2em;
}

/* “Spinner” */
.record-form-fieldset-proxy__content > .loading-indicator,
.records > .loading-indicator {
  position: relative;
  height: 1em;
  display: block;
  text-align: center;
}
.record-form-fieldset-proxy__content > .loading-indicator:before,
.records > .loading-indicator::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: rgba(0, 0, 255, 0.5);
  animation: spinning 1s infinite;
}
.record-form-fieldset-proxy__content > .loading-indicator > [data-part="text"],
.records > .loading-indicator > [data-part="text"] {
  display: none;
}
@keyframes spinning {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* Record forms */
.record-form input[type="text"],
.record-form textarea {
  width: 100%;
}

.login-form input[type="text"],
.login-form input[type="password"],
.set-password-form input[type="password"],
.record-form input[type="text"],
.record-form input[type="number"],
.record-form textarea {
  padding: 0.5em 0.75em;
}
.record-form input[type="checkbox"] {
  cursor: pointer;
}
.record-form select {
  /* appearance: none; */
  /* TODO: In default appearance on MacOS, the text of the longest item overlaps
   the arrows. */
  padding: 0.5em;
}
.record-form-fieldset {
  padding: 0; /* beat UA default */
}
/* See https://stackoverflow.com/a/28078942.  Notwithstanding the update, it
   appears that in the latest Firefox, flex does not work on fieldset. */
.record-form-fieldset-proxy {
  display: flex;
}
.record-form-fieldset-proxy > [data-part] {
}
.record-form-fieldset-proxy > [data-part="label"] {
  flex: 0 0 20%;
  text-align: right;
  padding: 0.5em;
  padding-top: 0.75em;
}
.record-form-fieldset-proxy > [data-part="content"] {
  flex: 1 1 auto;
  align-self: center;
  padding-top: 0.25em;
}

/* HIDE record table header */
.record-table thead {
  display: none;
}

/* Multivalued properties */
.property-values-list-item {
  display: flex;
  align-items: start;
}
.property-values-list-item > [data-part="operations"] {
  order: 2;
  flex: 0 0 auto;
  padding-right: 0.5em;
}
.multivalued-property button {
  padding-top: 0.33em;
  padding-bottom: 0.33em;
}
.property-values-list-item > [data-part="value"] {
  order: 1;
  flex: 1 1 auto;
}

/* ✕ close box, using pseudo-elements */
.close-box {
  flex: 0 0 3em;
  width: 3em;
  position: relative; /* support positioned pseudo-elements */
  box-shadow: 0 0 0.5em -0.125em rgba(64, 64, 64, 0.5);
}
a.close-box {
  color: rgba(0, 0, 0, 0.8);
}
.close-box > [data-part="text"] {
  display: none;
}
.close-box::before,
.close-box::after {
  content: "";
  position: absolute;
  transform-origin: center;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 80%;
  background-color: currentColor;
}
.close-box::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-box::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Auth */
.set-password-dialog,
.login-dialog {
  padding: 0; /* Beat UA default */
  /* Specifying width prevents message content from affecting dialog width */
  width: 25rem; /* beat UA dialog default */
  max-width: calc(100% - 2rem); /* leave some padding when maxed out */
}
/* Auth form specific */

/* Use for block area that is flush to the container width.  This is in effect
   all immediate children of the dialog or form except for the main header.  We
   could also override the fieldset defaults. */
.set-password-dialog-result-message-area,
.login-dialog-result-message-area,
.set-password-form-header {
  padding-inline-start: 0.75em; /* match fieldset UA default */
  padding-inline-end: 0.75em; /* match fieldset UA default */
}
.set-password-form-message {
  white-space: pre-wrap;
}
.set-password-form input[type="password"],
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
}
.set-password-form label > [data-part="text"],
.login-form label > [data-part="text"] {
  display: block;
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
}
.set-password-dialog-result-message-area,
.login-dialog-result-message-area {
  padding-block-start: 1em;
  padding-block-end: 1em;
}