:root {
  --selection-color: #FF8600;
  --grade-fill-color: #CCC;
  --grade-outline-color: #888;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans;
  width: 100%;
}

kbd {
  outline: solid 1px black;
  border-radius: 2px;
  padding: 0 0.5ch;
}

input,
textarea,
button {
  border: solid 2px black;
}
button {
  fill: none;
  padding: 0 1em;
  height: 2em;
}
button:disabled {
  opacity: 0.6;
  pointer-events: none;
}

#chart {
  font-family: mono, mono;
}    
.segment-marker {
  stroke: #eee;
  stroke-width: 1;
}
.segment-marker[data-aligns-with-selection] {
  stroke: #bbb;
  stroke-width: 1;
}
/* these boundaries are nice for reference but not immediately useful */
.series-boundary,
.scale-boundary {
  display: none;
}
.grade__boundary {
  fill: var(--grade-fill-color);
  stroke: var(--grade-outline-color);
  stroke-width: 1;
}
.grade__text[data-wider-than-box=yes] {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-45deg);
}
.grade:hover .grade__boundary {
  stroke: var(--selection-color);
  stroke-width: 3;
}
.selection-rect {
  fill: none;
  stroke: var(--selection-color);
  stroke-width: 3;
}
.scale-label__underline {
  stroke: #888;
  stroke-width: 2;
}
.series-label__underline {
  stroke: #888;
  stroke-width: 1;
}
.series-label__text,
.scale-label__text {
  dominant-baseline: central;
  text-anchor: middle;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}

main {
  display: flex; 
  flex-flow: column nowrap;
  padding: 1em 0;
  gap: 1em;
  align-items: center;
}

.import-export {
  display: flex; 
  flex-flow: row nowrap;
  justify-content: space-between;
  max-width: 800px;
  width: 100%;
}

.control-sections {
  display: flex;
  flex-flow: row nowrap;
  gap: 2em;
}
.control-section__action {
  border: dashed 1px black;
  padding: 0 1em 1em 1em;
}
.control-section__action h2 {
  font-size: 0.7rem;
  margin: 0.5em 0;
  font-weight: normal;
}
.instructions {
  max-width: 50ch;
}
.instructions li {
  margin-bottom: 0.5em;
}

.transform {
  display: flex;
  flex-flow: row;
  align-items: center;
  font-size: 16px;
}
.transform__button {
  height: 2em;
}
.transform__translate-left { margin-right: 0.5em; }
.transform__grow-left    { border-right-width: 0; }
.transform__shrink-left  { border-left-width: 0; margin-right: 1em; }
.transform__shrink-right { border-right-width: 0; }
.transform__grow-right   { border-left-width: 0; }
.transform__translate-right { margin-left: 0.5em; }
.transform__box-shrink-expand {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.transform__selection-border {
  border: solid 2px var(--selection-color);
  padding: 0.5em 0;
}

.update-series {
  display: flex;
  gap: 0.5em;
  flex-flow: column nowrap;
}
.update-series__scale-and-series {
  display: flex;
  flex-flow: row nowrap;
}
.update-series__grades {
  height: 5em;
}
.update-series__submit {
  display: flex;
  gap: 0.5em;
  flex-flow: row nowrap;
  justify-content: right;
}

.import[open] {
  display: grid;
  grid-template: 'file template .       .'     auto
                 'text text     text    notes' auto
                 '.    .        buttons .'     auto 
               /  auto auto     auto    20ch
}
.import__file     { grid-area: file; }
.import__template { grid-area: template; }
.import__text     { grid-area: text; }
.import__notes    { grid-area: notes; padding: 0 0.5em; font-size: 0.9rem; }
.import__cancel-and-import { grid-area: buttons; }

.export[open] {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5em;
  width: 30vw;
}
.export__output {
  padding: 0.25em;
  border: solid 1px gray;
  display: inline-block;
  white-space: pre;
  height: 30vh;
  width: 100%;
  overflow-y: scroll;
}