/* variables */
:root {
  --color: hsl(217, 12%, 90%);
  --background: hsl(217, 12%, 11%);
  --border: hsl(217, 12%, 15%);
  --accent-color: hsl(215, 100%, 58%);
  --accent-background: hsl(215, 71%, 12%);
  --hover-color: hsl(217, 12%, 84%);
  --hover-background: hsl(217, 12%, 16%);
  --muted-color: hsl(217, 12%, 46%);
}

/* base */
html,
body {
  color-scheme: dark;
  font-family: 'Inter', sans-serif;
  color: var(--color);
  background-color: var(--background);
  font-size: 16px;
  font-weight: 480;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

body {
  max-width: 48rem;
  margin: auto;
  padding: 0 0.5rem;
}

/* core node layout — mirrors sortable-tree-node rules from styles.less */
.tree__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.tree__node * {
  user-select: none;
}

/* stretch so span fills the full label height; height is set below on .tree */
.tree__label {
  display: flex;
  align-items: stretch;
  height: var(--st-label-height);
}

.tree__subnodes {
  --st-connector-elbow: max(calc(var(--st-subnodes-padding-left) / 2 - 2px), 14px);
  display: flex;
  flex-direction: column;
  padding-left: var(--st-subnodes-padding-left);
}

/* tree theme — from tree.less */
.tree {
  --st-label-height: 3.75rem;
  --st-subnodes-padding-left: 3rem;
  --st-connector-elbow: max(calc(var(--st-subnodes-padding-left) / 2 - 2px), 14px);
  --st-collapse-icon-width: 1.5rem;
  --st-collapse-icon-height: 3.75rem;
  --st-collapse-icon-size: 0.9rem;

  display: flex;
  flex-direction: column;
  margin: 2rem 0;
  /* indent the whole tree so collapse icons (at left: -icon-width) remain visible */
  margin-left: var(--st-collapse-icon-width);
}

.tree__label {
  padding: 4px;
  font-size: 1rem;
  font-weight: 480;
}

.tree__label:hover {
  z-index: 2;
  --color: var(--hover-color);
  --background: var(--hover-background);
}

/* border-box so padding doesn't push the span taller than the label */
.tree__label > span {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-radius: 6px;
  color: var(--color);
  background-color: var(--background);
  transition:
    color 0.2s,
    background 0.2s;
}

.tree__node[data-pressure-pct] .tree__label > span {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.03) calc(var(--pressure-pct) * 100%),
    var(--background) calc(var(--pressure-pct) * 100%)
  );
  transition: color 0.2s;
}

.tree__node[data-pressure-pct] .tree__label:hover > span {
  background: var(--hover-background);
}

.tree__label > .tree__label__span--task {
  border-color: black;
}

.tree__label-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__label-link {
  color: var(--wa-color-brand-fill-loud, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* a category with no child tasks is dimmed to half opacity */
.tree__node--empty-category > .tree__label {
  opacity: 0.5;
}


/* collapse / expand — subnodes hidden by default, shown when [open] */
.tree__node > .tree__subnodes {
  display: none;
}

.tree__node[open] > .tree__subnodes {
  display: flex;
}

/* collapse arrow — mirrors styles.less > :nth-child(3) + tree.less &__collapse */
.tree__collapse {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: calc(var(--st-collapse-icon-width) * -1);
  height: var(--st-collapse-icon-height);
  font-size: var(--st-collapse-icon-size);
  z-index: 3;
  cursor: pointer;
  color: var(--muted-color);
}

.tree__collapse > :not(.tree__collapse-count) {
  box-sizing: content-box;
  margin-left: -5px;
  padding: 5px;
  background-color: var(--background);
}

.tree__collapse-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--muted-color);
  color: var(--background);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  pointer-events: none;
}

/* drag-and-drop indicator states — from tree.less */
.tree__node--drop-before > .tree__label::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -2px 2px;
  border-top: 4px solid var(--accent-color);
  pointer-events: none;
}

.tree__node--drop-after > .tree__label::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -2px 2px;
  border-bottom: 4px solid var(--accent-color);
  pointer-events: none;
}

.tree__node--drop-inside > .tree__label {
  z-index: 3;
  --color: var(--accent-color);
  --background: var(--accent-background);
}

.tree__node--dragging .tree__label > span {
  border-style: dashed;
  cursor: move !important;
}

/* connector lines */
.tree__subnodes .tree__node {
  --line-color: hsl(217, 12%, 22%);
  --line-radius: 8px;
  position: relative;
}

.tree__subnodes .tree__node:not(:last-child)::before {
  content: '';
  position: absolute;
  height: 100%;
  left: min(calc((var(--st-subnodes-padding-left) / -2) + 8px), -8px);
  border-left: 2px solid var(--line-color);
}

.tree__subnodes .tree__label > span {
  position: relative;
}

.tree__subnodes .tree__node:last-child > .tree__label > span::before {
  content: '';
  position: absolute;
  left: calc(var(--st-connector-elbow) * -1);
  top: -6px;
  height: calc(50% + 6px);
  width: var(--line-radius);
  border-left: 2px solid var(--line-color);
  border-bottom-left-radius: var(--line-radius);
  mix-blend-mode: lighten;
}

.tree__subnodes .tree__label > span::after {
  content: '';
  position: absolute;
  left: calc(var(--st-connector-elbow) * -1);
  top: 0;
  width: calc(var(--st-connector-elbow) - 4px);
  height: 50%;
  border-bottom: 2px solid var(--line-color);
  border-bottom-left-radius: var(--line-radius);
  mix-blend-mode: lighten;
}

/* button press feedback: a quick shrink on downpress, a springy pop back on
   release. `scale` is appended to each button's own transition list rather than
   replacing it via the `transition` shorthand, so Bootstrap's and WebAwesome's
   hover fades are preserved. */
.btn {
  transition-property: color, background-color, border-color, box-shadow, scale;
  transition-duration: 0.15s, 0.15s, 0.15s, 0.15s, 0.22s;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, cubic-bezier(0.34, 1.56, 0.64, 1);
}

wa-button {
  transition-property: background, border, box-shadow, color, scale;
  transition-duration: var(--wa-transition-fast), var(--wa-transition-fast), var(--wa-transition-fast), var(--wa-transition-fast), 0.22s;
  transition-timing-function: var(--wa-transition-easing), var(--wa-transition-easing), var(--wa-transition-easing), var(--wa-transition-easing), cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active,
wa-button:not([loading]):not([disabled]):active {
  scale: 0.93;
  transition-duration: 0.05s;
  transition-timing-function: ease-out;
}

/* on-submit loading: Bootstrap buttons gain the affordance wa-buttons already
   have — the label fades out and a spinner takes its place, size unchanged. */
.btn.is-submitting {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

.btn.is-submitting::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid var(--bs-btn-color, currentColor);
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-submit-spin 0.6s linear infinite;
}

@keyframes btn-submit-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  wa-button:active {
    scale: 1;
  }
}

/* the submit-action omnibuttons (Complete on Focus, delete-completed on Tree)
   get the same press + loading feedback as form buttons. The modal-opener
   omnibutton is type=button (and the touch drag handle), so it is excluded. */
button.omnibutton[type="submit"] {
  transition-property: opacity, background, scale;
  transition-duration: 0.15s, 0.15s, 0.22s;
  transition-timing-function: ease, ease, cubic-bezier(0.34, 1.56, 0.64, 1);
}

button.omnibutton[type="submit"]:active {
  scale: 0.9;
  transition-duration: 0.05s;
  transition-timing-function: ease-out;
}

button.omnibutton.is-submitting {
  pointer-events: none;
}

button.omnibutton.is-submitting > * {
  visibility: hidden;
}

button.omnibutton.is-submitting::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: 2px solid var(--muted-color, #9ca3af);
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-submit-spin 0.6s linear infinite;
}