html {
  overflow: hidden;
  height: 100%;
}

.paletted {
  --p1:                             var(--palette-1-darker);
  --p2:                             var(--palette-2);
  --p3:                             var(--palette-3);
  --p4:                             var(--palette-4);
  --years-color:                    var(--p1);
  --month-color:                    var(--p1);
  --month-border-color:             var(--p1);
  --sprint-color:                   var(--p2);
  --sprint-border-color:            var(--p2);
  --weekday-color:                  var(--p3);
  --days-color:                     var(--p3);
  --today-color:                    var(--p1);
  --today-button-color:             var(--p1);
  --today-header-color:             var(--palette-1-darkest);
  --density-slider-active-color:    var(--palette-1-darkest);
  --density-slider-inactive-color:  var(--p1);
  --selection-color:                var(--p1);
  --weekend-color:                 #3d3a38;
}

.paletted::selection, .paletted *::selection {
  background: var(--selection-color);
}

.tight-font {
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}

.entries-section *, .row-headers * {
  transition: opacity ease-out 0.7s, border-radius ease-out 0.7s;
}

body {
  height: 100%;
  font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.9rem;
  background: #32302f;
  color: white;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  --header-row-height:  24px;
  --row-height:         32px;
  --column-width:       17px;

  --sticky-against-row-headers-extra-padding: 3px;
}

main, .split {
  height: 100%;
}

.gutter-bg {
  background: rgb(41, 41, 41);
}

.gutter {
  cursor: row-resize;
  background: rgb(41, 41, 41);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-right: calc(min(var(--scrollbar-width), 1px));
}

sl-range {
  --sl-color-primary-500: var(--density-slider-active-color);
  --sl-color-primary-600: var(--density-slider-inactive-color);
}

.header-controls, .column-headers {
  z-index: 20002;
  -webkit-user-select: none;
  user-select: none;
}

.sticky-column-header.header-controls {
  z-index: 20002;
}

.sticky-column-header {
  z-index: 10000;
  position: sticky;
  grid-row: var(--row);
  top: calc(var(--header-row-height) * (var(--row) - 1));
}

.row-header-section, .entries-section {
  font-weight: 500;
  font-family: 'Inter', 'Inter Tight', sans-serif;
}

.row-section-header {
  font-weight: 600;
}

.grid {
  position: relative;
  display: grid; 
  grid-template-columns: auto;
  grid-auto-columns: var(--column-width);
  gap: 0px 0px; 
  overflow: auto;
  white-space: nowrap;
}

.grid * {
  padding: 3px;
}

.sticky-against-row-headers {
  position: sticky;
  left: calc(var(--row-headers-column-width) + var(--sticky-against-row-headers-extra-padding));
}

.row-headers-bg {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(40,40,40,0.9);
}
.row-header-controls-bg {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(40,40,40,0.9);
}
.row-header-controls-bg-border-occlusion {
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(40,40,40,1) 40%, rgba(40,40,40,1) 100%);
}

.row-headers > *, .row-header-section > * {
  grid-column: 1;
  position: sticky;
  left: 0;
  padding-left: 16px;
  padding-right: 20px;
  z-index: 20000;
}

.row-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row-header:not(.row-section-header) {
  padding-left: 32px;
}
.row-header:not(.row-section-header)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  border-left: 1px solid white;
  width: 10px;
}

.section-top-border {
  border-top: 1px solid #4e4e4e;
}
.section-bottom-border {
  border-bottom: 1px solid #4e4e4e;
}

.button {
  font-size: 0.9rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 4px;
  padding: 6px 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}
.button:hover {
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
}

.day-column-header-text {
  text-align: center;
  padding: 0;
  min-width: 17px;
  margin-left: calc(-1 * max(17px - 100%, 0px) / 2); /* center even when overflowing */
}
.day-column-header-container-first .day-column-header-text {
  margin-left: 0; /* let the first day of the month overflow off to the right if need be;
                     it looks better than centering for the first day of the month */
}

.first-sprint-header-text, .last-sprint-header-text {
  min-width: 84px;
  margin-left: calc(-1 * max(84px - 100%, 0px)); /* right align when overflowing */
}
.first-sprint-header-text.abbreviated, .last-sprint-header-text.abbreviated {
  min-width: 17px;
  margin-left: calc(-1 * max(17px - 100%, 0px)); /* right align when overflowing */
}

.data-invalid {
  outline: 1px solid var(--gb-neutral-orange);
}

.cm-editor {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(40, 40, 40, 0.9);
}
.cm-editor .cm-gutters {
  background: #00000000;
}

.today-column-background {
  position: relative;
  z-index: 5;
}
.today-column-background::before, .today-column-header-background::before {
  position: absolute;
  inset: 0 calc(-1 * max(28px - 100%, 0px) / 2); /* min width */
  content: '';
}
.today-column-background::before {
  background: var(--today-color);
}
.today-column-header-background::before {
  background: var(--today-header-color);
}

.entry-content-leftmost {
  padding-left: calc(var(--row-height) * 0.2);
}

.cm-editor {
  font-size: 0.9em;
  min-height: 100%;
}
.cm-editor * {
  font-family: '0xProto', monospace;
}

.cm-editor .cm-cursorLayer, .cm-editor .cm-cursorLayer .cm-fat-cursor {
  outline-color: #ebdbb22d;
  background-color: #ebdbb22d;
}
.cm-editor.cm-focused .cm-cursorLayer, .cm-editor.cm-focused .cm-cursorLayer .cm-fat-cursor {
  outline-color: #ebdbb2d5;
  background-color: #ebdbb2d5;
}
.cm-vim-panel input {
  color: white;
}

#vim-toggle-button {
  cursor: pointer;
  margin-right: 4px;
  fill: #ebdbb240;
  transition: fill ease 0.3s;
}

.vim-mode #vim-toggle-button {
  fill: #ebdbb28c;
}

.hide-for-narrow-column-density {
  opacity: 1;
  transition: opacity ease 0.3s;
}
.narrow-column-density .hide-for-narrow-column-density {
  opacity: 0;
}

.cm-editor .cm-ySelectionCaret .cm-ySelectionInfo {
  font-family: 'Inter Tight', sans-serif;
}