/* IBM Plex Mono, served from static/fonts (SIL Open Font License, see fonts/OFL.txt).
   The latin-ext files only load when a page shows characters from their range. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

* {
  box-sizing: border-box;
}

/* One spacing step, 12px, sets the page edges, the gap under the header and the gap
   between columns. */
body {
  margin: 0;
  padding: 12px;
  background: #fff;
  color: #000;
  font: 13px/1.4 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

h2 {
  margin: 0;
  font-size: inherit;
}

form {
  margin: 0;
}

input:not([type]) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: 1px 0;
  width: 0;
  min-width: 0;
  flex: 1;
}

input:not([type]):focus {
  outline: none;
  border-bottom-width: 2px;
  padding-bottom: 0;
}

/* Buttons read as small text actions. */
button {
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  white-space: nowrap;
}

button:hover,
button:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Armed "delete list" button. */
button[data-armed] {
  background: #000;
  color: #fff;
  text-decoration: none;
}

#top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

#top .spacer {
  flex: 1;
}

/* The menu icon is sized like the header text so it sits on the same line. */
#menu-button {
  font-size: 13px;
}

#menu-button:hover,
#menu-button:focus-visible {
  text-decoration: none;
}

/* The header menu drops down from the top right corner over the page. */
#menu {
  position: fixed;
  inset: auto;
  top: 34px;
  right: 12px;
  min-width: 9rem;
  margin: 0;
  padding: 4px 0;
  border: 1px solid #000;
  background: #fff;
  color: inherit;
}

#menu:popover-open {
  display: flex;
  flex-direction: column;
}

#menu :is(a, button) {
  display: block;
  width: 100%;
  padding: 3px 10px;
  font-size: 13px;
  text-align: left;
  color: inherit;
  text-decoration: none;
}

#menu :is(a, button):hover,
#menu :is(a, button):focus-visible {
  background: #000;
  color: #fff;
  text-decoration: none;
}

#domains {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

#domains:empty {
  display: none;
}

/* Other domains are grey; the current one, and the one under the mouse, are black. */
#domains a {
  color: #777;
  text-decoration: none;
}

#domains a:hover,
#domains a[aria-current] {
  color: #000;
}

#hints [data-priority="high"] {
  color: #c62828;
}

#hints [data-priority="medium"] {
  color: #1565c0;
}

#hints [data-priority="low"] {
  color: #2e7d32;
}

.reveal {
  display: flex;
  gap: 4px;
  width: 15rem;
}

.reveal[hidden] {
  display: none;
}

/* Without a domain there is nowhere to put lists. */
.no-domain :is(#show-new-list, #new-list, #hints) {
  display: none;
}

#board {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
}

/* A bordered box of rows: a list column on the board, or the domains list. */
.box {
  flex: 0 0 15rem;
  width: 15rem;
  min-width: 0;
  border: 1px solid #000;
}

body > .box {
  width: 20rem;
}

/* On desktop (a mouse or trackpad, at any window width) the board fills the window
   below the header: every column runs to the bottom, keeps its name and new-task line
   in place, and scrolls its tasks. */
@media (hover: hover) and (pointer: fine) {
  body:has(#board) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  #board {
    flex: 1;
    min-height: 0;
    align-items: stretch;
  }

  #board > .box {
    display: flex;
    flex-direction: column;
  }

  #board > .box > ul {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Box headers are black title bars. */
.box header {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid #000;
  background: #000;
  color: #fff;
}

/* The delete button floats over the bar's right end, where the counts sit, so showing it
   or arming it covers them for a moment instead of moving anything. */
.box header .delete-list {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: #000;
}

.box header .count {
  display: inline-flex;
  gap: 4px;
}

/* On black, white boxed buttons; armed delete turns white. */
.box header button.icon {
  border-color: #fff;
}

.box header button.icon:hover,
.box header button.icon:focus-visible,
.box header button[data-armed] {
  background: #fff;
  color: #000;
}

/* Priority colors lightened to read on the black title bars. */
.box header [data-priority="high"] {
  color: #ff8a80;
}

.box header [data-priority="medium"] {
  color: #82b1ff;
}

.box header [data-priority="low"] {
  color: #8fd694;
}

.box header > :first-child {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.box li {
  position: relative;
}

/* Rows are separated by a short dash instead of a full line. It's drawn over the top
   edge of every row after the first, so it takes no space. */
.box li + li::before,
.box .add + ul > li:first-child::before,
.box ul:has(> li) + .add::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 10px;
  border-top: 1px solid #000;
  pointer-events: none;
}

/* Task actions float over the end of the row on hover, so they never move anything. */
.box li .actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 8px;
  background: #fff;
}

.box li:hover .actions,
.box li:focus-within .actions {
  display: flex;
}

.box li:has([contenteditable]) .actions {
  display: none;
}

/* Header buttons show only on hover or focus, in place of the counts, which hide while
   the button is visible. Both keep their space, so nothing moves. */
@media (hover: hover) {
  .box header button {
    visibility: hidden;
  }

  .box header:is(:hover, :focus-within) button {
    visibility: visible;
  }

  .box header:is(:hover, :focus-within):has(button):not(:has([contenteditable])) .count {
    visibility: hidden;
  }

  .box header:has([contenteditable]) button {
    visibility: hidden;
  }
}

/* Without hover (touch screens) the actions sit in the row, always visible. */
@media (hover: none) {
  .box li {
    display: flex;
    align-items: center;
  }

  .box li .title {
    flex: 1;
    min-width: 0;
  }

  .box li .actions,
  .box li:has([contenteditable]) .actions {
    position: static;
    display: flex;
  }
}

/* Small boxed icon buttons, used for task actions and in list headers. */
button.icon {
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid #000;
}

button.icon:hover,
button.icon:focus-visible {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.box .title {
  overflow-wrap: anywhere;
  cursor: text;
  user-select: none;
  outline: none;
}

/* The text fills the whole row, padding included, so the row is one click and edit target. */
.box li .title > * {
  display: block;
  padding: 3px 6px;
}

/* Long tasks stay on one line, cut off with an ellipsis; the full text shows, wrapped,
   only while the task is being edited. */
.box li .title > :not([contenteditable]) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.box .title:focus-visible {
  text-decoration: underline;
}

/* Text being edited in place keeps its look; only the caret shows. */
[contenteditable] {
  user-select: text;
  outline: none;
  overflow-wrap: anywhere;
}

#board li[data-priority="high"] .title {
  color: #c62828;
}

#board li[data-priority="medium"] .title {
  color: #1565c0;
}

#board li[data-priority="low"] .title {
  color: #2e7d32;
}

/* Drag and drop: outlines don't take space, so nothing moves while dragging. */
#board li.dragging {
  opacity: 0.4;
}

#board .drop-target {
  outline: 2px solid #000;
}

/* The label that follows the pointer while a task is dragged. */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  max-width: 15rem;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid #000;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.dragging-task {
  cursor: grabbing;
  user-select: none;
}

/* Done tasks stay folded behind a "+ 2 done" line until the list is unfolded. */
#board ul:not(.unfolded) > li[data-done] {
  display: none;
}

.box .fold {
  position: relative;
  display: block;
  width: 100%;
  padding: 3px 6px;
  font-size: inherit;
  text-align: left;
  color: #777;
}

.box .fold:hover,
.box .fold:focus-visible {
  color: #000;
  text-decoration: none;
}

.box .fold::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 10px;
  border-top: 1px solid #000;
}

/* A quiet line under the board with the input rules. */
#hints {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  color: #777;
}

#hints b {
  font-weight: 400;
  color: #000;
}



.box li s {
  opacity: 0.45;
}

.add {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 6px;
}

/* The input line at the bottom of a box matches a task row: same padding and height,
   no underline. */
.box .add {
  position: relative;
  padding: 3px 6px;
}

.box .add input,
.box .add input:focus {
  height: 1.4em;
  padding: 0;
  border: 0;
}