:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #18212f;
  background: #f5f7fa;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #17558f; }

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  padding: .75rem max(1rem, calc((100% - 74rem) / 2));
  color: #fff;
  background: #173b63;
}

.brand { color: #fff; font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; gap: 1rem; flex: 1; }
.site-header nav a, .site-header nav span { color: #d8e5f2; }
.account { display: flex; align-items: center; gap: .75rem; }
.account form { margin: 0; }

.page { display: grid; gap: 1rem; width: min(100% - 2rem, 74rem); margin: 2rem auto; }
.panel { padding: clamp(1rem, 3vw, 1.6rem); background: #fff; border: 1px solid #d8dee8; border-radius: .5rem; }
.compact-panel { padding-block: 1rem; }
.login-panel { max-width: 28rem; margin: 3rem auto; }
.stacked-form, .review-form { display: grid; gap: .65rem; }
.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-heading h1, .section-heading h2 { margin-block: 0; }
.eyebrow { margin: 0; color: #536579; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.period-nav, .people-links { display: flex; flex-wrap: wrap; gap: .75rem; }

input, textarea, button { padding: .6rem .75rem; font: inherit; border-radius: .35rem; }
input, textarea { width: 100%; border: 1px solid #8995a5; }
textarea { resize: vertical; }
button, .button-link { border: 1px solid #0f3156; color: #fff; background: #17558f; cursor: pointer; text-decoration: none; }
button { min-height: 2.75rem; }
.button-link { display: inline-block; padding: .6rem .75rem; border-radius: .35rem; }
button.secondary { min-height: 2.25rem; padding: .3rem .6rem; border-color: #d8e5f2; background: transparent; }
button.small { min-height: 2rem; padding: .25rem .5rem; font-size: .85rem; }
button.danger { border-color: #a5362e; color: #8a2d27; background: #fff; }
.cancel-link { align-self: center; padding: .35rem; }
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #f2bd38; outline-offset: 2px; }

.add-form, .inline-edit-form { display: flex; gap: .5rem; margin-block: .75rem; }
.add-form input, .inline-edit-form input { flex: 1; }
.item-list { display: grid; gap: .4rem; padding: 0; list-style: none; }
.item-row { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem; border: 1px solid #e1e6ed; border-radius: .35rem; }
.item-row.completed .item-text { text-decoration: line-through; color: #5e6a78; }
.toggle-form, .delete-form { margin: 0; }
.toggle-form input[type="checkbox"] { width: 1.2rem; height: 1.2rem; padding: 0; accent-color: #17558f; }
.checkbox-readonly { font-size: 1.2rem; }
.item-content { flex: 1; min-width: 0; }
.item-content small { display: block; color: #667383; }
.item-edit summary { color: #17558f; cursor: pointer; font-size: .85rem; }
.empty, .readonly-note { color: #667383; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.task-columns, .team-goal-grid, .conflict-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.activity-grid > div, .team-goal-grid > div { padding: .8rem; background: #f7f9fb; border-radius: .35rem; }
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.member-card { min-width: 0; }
.badge, .progress-count { padding: .2rem .55rem; color: #205c39; background: #e6f5eb; border-radius: 999px; font-size: .8rem; }
.badge.readonly { color: #5b6470; background: #edf0f3; }
.review-readonly dt { margin-top: .75rem; font-weight: 700; }
.review-readonly dd { margin-left: 0; white-space: pre-wrap; }
.conflict-panel pre { max-height: 24rem; padding: .75rem; overflow: auto; white-space: pre-wrap; background: #f3f5f7; border: 1px solid #d8dee8; }
.flash { padding: .75rem 1rem; border-radius: .35rem; }
.flash.error { color: #78241f; background: #fde8e6; }

@media (max-width: 48rem) {
  .site-header { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .site-header nav { width: 100%; flex-wrap: wrap; }
  .account, .page-heading { width: 100%; align-items: flex-start; flex-direction: column; }
  .page { margin-top: 1rem; }
  .task-columns, .team-goal-grid, .member-grid, .activity-grid, .conflict-grid { grid-template-columns: 1fr; }
  .add-form, .inline-edit-form { align-items: stretch; flex-direction: column; }
  .cancel-link { align-self: flex-start; }
}