/* Shared controls and list-management surfaces. */

form { display: grid; gap: var(--space-2); }

input,
textarea,
select,
button {
  box-sizing: border-box;
  font: inherit;
}

input,
textarea,
select { max-width: 100%; padding: var(--space-2); }

input,
select { min-height: 2.75rem; }

select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

/* Native selects keep their option popup, but the closed control should use
   the same surface, border, and text treatment as the rest of the app. The
   wrapper supplies the chevron because select elements do not support a
   reliable ::after pseudo-element once the native arrow is removed. */
.select-wrapper {
  position: relative;
  max-width: 100%;
}

.select-wrapper select {
  width: 100%;
  padding-right: var(--space-8);
  appearance: none;
  -webkit-appearance: none;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.select-wrapper select:hover {
  background: var(--color-surface-muted);
}

select:hover {
  background: var(--color-surface-muted);
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

button,
input[type="submit"],
.list-title-button,
.task-title-button,
.task-action-button {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.list-title-button:hover,
.task-title-button:hover,
.task-action-button:hover { background: var(--color-surface); }

/* Quiet controls keep the shared hit target while removing button chrome. */
a.quiet,
button.quiet,
input[type="submit"].quiet,
summary.quiet {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  list-style: none;
}

a.quiet:hover,
button.quiet:hover,
input[type="submit"].quiet:hover,
summary.quiet:hover { background: var(--color-surface-muted); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.list-rows,
.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.list-row:last-child { border-bottom: 0; }
.list-row > div { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.quick-add {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.quick-add-field {
  display: grid;
  gap: var(--space-1);
}

.quick-add-grow { flex: 1; min-width: min(100%, 16rem); }
.quick-add input[type="submit"] { flex-shrink: 0; }

/* Condensed list header: in-place-editable title beside a members
   count chip that reveals the roster panel (native details). */
.list-header {
  margin-top: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.list-header h1 { margin: 0; }
.list-title-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.list-title-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.list-title-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 var(--space-1);
  border: 0;
  color: var(--color-text);
  background: transparent;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
/* This composite control gets one focus ring around its complete visual
   boundary. Keep the default input ring as a fallback for older browsers. */
@supports selector(:has(*)) {
  .list-title-control:has(.list-title-input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  .list-title-control:has(.list-title-input:focus-visible) .list-title-input {
    outline: none;
  }
}

.list-title-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
}
.list-title-button,
.task-title-button,
.task-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-title-button {
  min-height: 0;
  font-size: 0.8125rem;
  line-height: 1.2;
}

/* Icon sizing: 1em keeps Lucide SVGs proportional to the button's text size
   while stroke color follows currentColor. */
.icon {
  width: 1em;
  height: 1em;
}
.list-title-button .icon {
  width: 1rem;
  height: 1rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.list-title {
  color: inherit;
  text-decoration: none;
}
.list-title:hover,
.list-title:focus-visible { text-decoration: underline; }

.members-reveal { position: relative; }
.members-reveal summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
}
.members-reveal summary::-webkit-details-marker { display: none; }
.members-reveal summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.members-reveal[open] summary {
  color: var(--color-text);
  border-color: var(--color-border);
}

.members-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 10;
  list-style: none;
  min-width: 16rem;
  margin: 0;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.members-reveal[open] .members-panel,
.members-reveal:hover .members-panel,
.members-reveal:focus-within .members-panel { display: block; }
.members-panel li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
}