:root { color-scheme: light dark; font: 14px system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
header, .toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; }
header { border-bottom: 1px solid #8886; }
h1 { margin: 0 auto 0 0; font-size: 1.15rem; }
main { padding: 0 1rem 1rem; }
button, input { font: inherit; }
button { min-height: 2.25rem; }
#connection { padding: .25rem .5rem; border-radius: 1rem; background: #7774; }
#connection.online { background: #16843c44; }
#save-status { min-width: 4.5rem; }
#save-status.saving::before {
  content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem;
  border: 2px solid #8888; border-top-color: currentColor; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -.1rem;
}
#online { display: flex; align-items: center; gap: .35rem; }
.person {
  padding: .2rem .45rem; border: 1px solid var(--user-color); border-radius: 1rem;
  box-shadow: inset .25rem 0 var(--user-color);
}
.online-overflow { display: inline-flex; align-items: center; gap: .15rem; }
.online-overflow i { width: .7rem; height: .7rem; background: var(--user-color); border-radius: .1rem; }
#notice { min-height: 1.4rem; margin: 0 0 .5rem; color: #b42318; }
.table-wrap { overflow: auto; border: 1px solid #8886; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: .35rem; border-bottom: 1px solid #8884; vertical-align: top; text-align: left; }
th:first-child, td:first-child { width: 5rem; }
.editor-cell { position: relative; }
textarea { width: 100%; min-width: 14rem; min-height: 3.5rem; resize: vertical; font: inherit; }
textarea.draft { border-color: #b7791f; }
textarea.conflict { outline: 2px solid #c53030; }
.remote-caret {
  position: absolute; z-index: 2; height: 1.25rem; border-left: 2px solid var(--user-color);
  pointer-events: none;
}
.remote-caret span {
  position: absolute; bottom: 100%; left: -1px; padding: .1rem .3rem;
  color: white; background: var(--user-color); border-radius: .2rem .2rem .2rem 0;
  font-size: .75rem; white-space: nowrap;
}
@keyframes spin { to { transform: rotate(360deg); } }
dialog { max-width: 26rem; }
dialog form { display: grid; gap: 1rem; }
#import-mapping { gap: 1rem; }
#import-mapping:not([hidden]) { display: grid; }
#import-status { min-height: 1.4rem; margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
@media (max-width: 700px) {
  table { min-width: 760px; }
}