/* Shared daily-use foundation: readable defaults, clear controls, and a
 * narrow-screen layout that does not depend on JavaScript.
 *
 * Uses only semantic tokens from tokens.css — never primitives or raw
 * colors. Lengths follow the unit policy in docs/BUILD-PLAN.md: rem for
 * anything that should scale with the user's default font size, px for
 * hairline borders and outline widths. */

:root {
  font-family: system-ui, sans-serif;
  line-height: 1.45;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Two-pane shell (Task C slice C1): sidebar at medium+ breakpoints,
 * tab strip below. Both navs are always rendered; CSS picks. */
.shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.main-col {
  flex: 1;
  min-width: 0;
}

.sidebar { display: none; }

@media (min-width: 48rem) {
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    flex-shrink: 0;
    width: 13rem;
    padding: var(--space-4);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
  }
}

.side-lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.side-lists a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.side-lists a:hover { background: var(--color-surface-muted); }

.side-lists a[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-surface-muted);
  font-weight: 600;
}

.side-secondary {
  margin-top: auto;
  display: grid;
  gap: var(--space-1);
}

.side-secondary a,
.side-secondary button {
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.side-secondary a:hover,
.side-secondary button:hover { background: var(--color-surface-muted); }

.site-nav,
main {
  width: min(100% - 2rem, 56rem);
  margin-inline: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
}

/* Must come after the .site-nav base rules above: on medium+
 * breakpoints the sidebar replaces the top tab strip. */
@media (min-width: 48rem) {
  .site-nav { display: none; }
}

.sidebar .site-title { font-weight: 700; }

.site-title { margin-right: auto; }

.dashboard-lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.dashboard-list {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.dashboard-list:hover { background: var(--color-surface-muted); }

.muted { color: var(--color-text-muted); }

.nav-tabs {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.nav-tabs a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.nav-tabs a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.nav-more { position: relative; }

.nav-more summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}

.nav-more summary::-webkit-details-marker { display: none; }

.nav-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 10;
  display: grid;
  gap: var(--space-1);
  justify-items: stretch;
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.nav-more-menu a,
.nav-more-menu button {
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.nav-more-menu a:hover,
.nav-more-menu button:hover { background: var(--color-surface-muted); }

.site-nav form button[type="submit"] {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: var(--space-2);
}

main { padding-bottom: var(--space-10); }

section {
  margin-block: var(--space-8) var(--space-8);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

h1 { margin-block: var(--space-6) var(--space-4); }
h2 { margin-top: 0; font-size: 1.25rem; }

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; }

button,
input[type="submit"] {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

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

[role="alert"] {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}

[role="alert"] h2 { font-size: 1rem; }

.flash {
  width: min(100% - 2rem, 56rem);
  margin-inline: auto;
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.flash-success {
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

.flash-warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
}

.flash-danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
}

.flash-neutral {
  color: var(--color-text);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
}

.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-actions input[type="submit"].list-title-button {
  min-height: 0;
}
.list-title-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface-muted);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.list-title-button:hover { background: var(--color-surface); }
.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);
}

/* One line per task: completion control, truncated title, due chip.
   Notes render as a subdued second line; edit mode (notes, due date,
   reorder, delete) swaps in when the title is clicked. */
.task-row {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.task-row:last-child { border-bottom: 0; }

/* Completion control sits outside edit mode so toggling stays one click. */
.task-complete {
  flex-shrink: 0;
  align-self: center;
  padding-inline: var(--space-3);
}

.task-frame { display: block; }
.task-frame-content {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.task-main { flex: 1; min-width: 0; }

.task-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.task-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
}

.task-title:hover,
.task-title:focus-visible { text-decoration: underline; }

.due-chip {
  flex-shrink: 0;
  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);
}

.task-notes {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.task-frame-content.completed { color: var(--color-text-muted); }
.task-frame-content.completed .task-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.due-chip.completed.overdue {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-color: var(--color-border-muted);
  font-weight: normal;
}

/* Edit mode: the row expands into a form; reorder and delete live here. */
.task-frame-content.editing { display: block; }
.task-edit form { gap: var(--space-2); }
.edit-field label { display: block; }
.edit-submit {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.reorder-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.due-chip.overdue {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  font-weight: 600;
}
.due-chip.due-today {
  color: var(--color-warning);
  background: var(--color-surface);
  border-color: var(--color-warning);
  font-weight: 600;
}

.rollup-actions form { display: flex; gap: var(--space-2); align-items: end; flex-wrap: wrap; }
.rollup-actions label { display: block; }

.empty-state {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.empty-state p:first-child {
  margin-top: 0;
  font-weight: 600;
  color: var(--color-text);
}

.empty-state p:last-child { margin-bottom: 0; }

@media (max-width: 37.5rem) {
  .site-nav,
  main { width: min(100% - 1.25rem, 56rem); }
  .site-nav { flex-wrap: wrap; padding-block: var(--space-1); }
  .nav-tabs { order: 3; flex-basis: 100%; }
  section { padding: var(--space-3); margin-block: var(--space-5); }
  .list-row { align-items: stretch; flex-direction: column; }
  .list-row > div { justify-content: space-between; }
  .task-frame-content { flex-wrap: wrap; }
  .reorder-actions { width: 100%; }
  .reorder-actions form { flex: 1; }
  .reorder-actions button { width: 100%; }
}