* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #f4f5f3; color: #1d2420; }
h1 { font-size: 1.45rem; margin: 0; }
.version { color: #8a948c; font-size: 0.85rem; font-weight: 400; margin-left: 0.35rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.muted { color: #5c665f; font-size: 0.9rem; }
.error { color: #a11; font-size: 0.9rem; }

.login-card { max-width: 360px; margin: 10vh auto; background: #fff; padding: 1.6rem; border-radius: 10px; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.login-card label { display: block; margin: 0.8rem 0; font-size: 0.9rem; }
.login-card input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid #c8cdc9; border-radius: 6px; font-size: 1rem; }
button { background: #20503a; color: #fff; border: 0; border-radius: 6px; padding: 0.5rem 0.95rem; font-size: 0.92rem; cursor: pointer; }
button:hover { background: #18402e; }

header { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #dde1dd; padding: 0.8rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-actions button { background: #e7ebe7; color: #1d2420; }
.header-actions button:hover { background: #d8ddd8; }
.toggle { font-size: 0.9rem; display: flex; gap: 0.35rem; align-items: center; }

.layout { display: flex; max-width: none; margin: 0; padding: 1.2rem 1.2rem 1.2rem calc(300px + 2.75rem); align-items: flex-start; }
main { flex: 1; min-width: 0; max-width: 880px; margin: 0 auto; }
/* Fixed, not sticky (Brian, 2026-10-30): sticky let the bar ride up a
   little before it caught; fixed never moves at all while the board
   scrolls, and the bar scrolls on its own when the mouse is over it. */
aside.sidebar { width: 300px; position: fixed; left: 0; top: 5.25rem; bottom: 1.2rem; z-index: 4; background: #fff; border: 1px solid #dde1dd; border-left: none; border-radius: 0 10px 10px 0; padding: 1.45rem 1rem 1rem; overflow-y: auto; margin-bottom: 0; }
aside.sidebar .item { padding: 0.5rem 0.6rem; }
aside.sidebar .item-title { font-size: 0.9rem; }
aside.sidebar .item-note { font-size: 0.82rem; }
#mobile-tabs { display: none; }
@media (max-width: 900px) {
  .layout { flex-direction: column; padding: 1.2rem; }
  aside.sidebar { width: auto; position: static; left: auto; top: auto; bottom: auto; max-height: none; border: 1px solid #dde1dd; border-radius: 10px; }
  main { max-width: none; width: 100%; }
  /* Phone screens (Brian, 2026-10-30): the board and Scheduled Tasks are
     separate screens, switched by a bottom tab bar. The app opens on the
     board — To Do first, then Decisions, then Projects. */
  body[data-screen="board"] aside.sidebar { display: none; }
  body[data-screen="scheduled"] main { display: none; }
  #board-view { padding-bottom: 3.4rem; }
  #mobile-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: #fff; border-top: 1px solid #dde1dd; padding-bottom: env(safe-area-inset-bottom); }
  #mobile-tabs button { flex: 1; background: none; color: #5c665f; border-radius: 0; padding: 0.8rem 0.5rem; font-size: 0.95rem; font-weight: 600; }
  #mobile-tabs button:hover { background: none; }
  #mobile-tabs button.active { color: #20503a; background: #eaf3ee; }
}
section { margin-bottom: 2.2rem; }
.section-sub { color: #5c665f; font-size: 0.88rem; margin: 0 0 0.7rem; }

/* v1.18: three buttons across the top of the board switch between
   To Do, Decisions and Projects — one section at a time, no long
   scroll to reach Decisions or Projects. (Brian, 2026-10-31.) */
#section-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; }
#section-tabs button { flex: 1; background: #e7ebe7; color: #1d2420; padding: 0.6rem 0.5rem; font-size: 0.95rem; font-weight: 600; border-radius: 8px; }
#section-tabs button:hover { background: #d8ddd8; }
#section-tabs button.active { background: #20503a; color: #fff; }
#section-tabs button.active:hover { background: #18402e; }

.filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.filters button { background: #e7ebe7; color: #1d2420; padding: 0.3rem 0.7rem; font-size: 0.83rem; border-radius: 999px; }
.filters button.active { background: #20503a; color: #fff; }

.list { display: flex; flex-direction: column; gap: 0.45rem; }
.item { background: #fff; border: 1px solid #dde1dd; border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; gap: 0.7rem; align-items: flex-start; }
.item.done { opacity: 0.55; }
.item.done .item-title { text-decoration: line-through; }
.item-main { flex: 1; min-width: 0; }
.item-title { font-weight: 600; font-size: 0.97rem; }
.item-note { font-size: 0.88rem; color: #424b45; margin-top: 0.15rem; white-space: pre-wrap; }
.item-meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.group-chip { font-size: 0.75rem; background: #eef1ee; border-radius: 999px; padding: 0.12rem 0.55rem; color: #44504a; }
.cadence { font-size: 0.82rem; font-weight: 600; color: #20503a; }
select.rank { font-size: 0.95rem; font-weight: 600; padding: 0.3rem 0.15rem; border: 1px solid #c8cdc9; border-radius: 6px; min-width: 3.1rem; text-align: center; margin-top: 0.1rem; background: #fff; }
select.rank.ranked { background: #eaf3ee; border-color: #20503a; color: #20503a; }
.item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.note-edit { font-size: 0.8rem; background: none; color: #20503a; padding: 0; text-decoration: underline; }
.note-edit:hover { background: none; }
textarea.note-box { width: 100%; font: inherit; font-size: 0.9rem; padding: 0.4rem; border: 1px solid #c8cdc9; border-radius: 6px; }

.item.decision { border-color: #b9cdc2; }
.item-note.collapsed { display: none; }
.details-btn, .group-btn { background: #e7ebe7; color: #20503a; padding: 0.28rem 0.65rem; font-size: 0.82rem; border-radius: 999px; }
.details-btn:hover, .group-btn:hover { background: #d3ddd3; }
.child-count { font-size: 0.78rem; font-weight: 700; color: #20503a; background: #eaf3ee; border-radius: 999px; padding: 0.14rem 0.55rem; }
.item.child { margin-left: 2.2rem; border-style: dashed; }
.item.child .item-title { font-size: 0.92rem; }
.option-btn { background: #20503a; margin-right: 0.15rem; }
.option-btn:hover { background: #18402e; }
.chosen { font-size: 0.88rem; font-weight: 700; color: #20503a; }

.add-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.add-form input { flex: 1; padding: 0.5rem; border: 1px solid #c8cdc9; border-radius: 6px; font-size: 0.95rem; }
.empty { color: #5c665f; font-size: 0.9rem; padding: 0.4rem 0; }

/* v1.8: collapsed Completed section at the bottom of the To Do list */
.completed-head { margin-top: 0.9rem; }
.item.mini { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0.6rem; opacity: 0.75; }
.item.mini .item-title { font-size: 0.92rem; text-decoration: line-through; }