:root {
  font-family: system-ui, -apple-system, sans-serif;
  color: #152820;
  background: #f1f5f2;
  --green: #185741;
  --line: #d7e4dd;
}
* { box-sizing: border-box; }
body { margin: 0; }
header {
  background: #102e23;
  color: white;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
a { color: var(--green); text-underline-offset: .2em; }
header a { color: #ecf7ef; text-decoration: none; }
.brand { font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
nav, .account, .actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
nav a { padding: .55rem .75rem; border-radius: .5rem; }
nav a:hover, nav a[aria-current] { background: #28634d; }
.notice-categories a { text-decoration: none; }
.notice-categories a:hover,
.notice-categories a:focus-visible,
.notice-categories a[aria-current="page"] { background: #28634d; color: #fff; }
.account { margin-left: auto; }
main { max-width: 1000px; margin: 2.5rem auto; padding: 0 1rem; }
.eyebrow { font-size: .75rem; font-weight: 800; color: var(--green); letter-spacing: .15em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: .35rem 0 1.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .85rem; }
.card { background: white; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.login { max-width: 430px; }
.login form { display: grid; }
.muted { color: #52655a; }
form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
form.inline { display: inline-flex; }
label { display: grid; gap: .35rem; flex: 1 1 10rem; font-size: .875rem; font-weight: 650; }
input, select, button { font: inherit; border-radius: .5rem; padding: .6rem .75rem; }
input, select { border: 1px solid #9bb2a5; min-width: 0; width: 100%; background: white; }
button { border: 1px solid transparent; background: var(--green); color: white; cursor: pointer; font-size: .875rem; }
button:hover { background: #0d3e2d; }
:focus-visible { outline: 3px solid #bf7325; outline-offset: 2px; }
ul { list-style: none; margin: 0; padding: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border-top: 1px solid var(--line); padding: .65rem 0; }
li span { overflow-wrap: anywhere; }
.badge { background: #e1f3e6; color: #215b3d; border-radius: 1rem; padding: .25rem .65rem; white-space: nowrap; }
.month { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.month a { font-size: .875rem; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.weekday { text-align: center; padding: .35rem; font-size: .875rem; }
.day { display: grid; align-content: start; min-height: clamp(3rem, 8vw, 5rem); background: #f0f5f1; border-radius: .5rem; text-decoration: none; padding: .4rem; }
.day.outside { background: #f7f8f7; color: #596a61; }
.day.selected { background: var(--green); color: white; }
.day small { font-size: .7rem; }
.calendar > :nth-child(7n + 6) { --weekend-color: #1754b4; --weekend-selected: #cfe4ff; }
.calendar > :nth-child(7n) { --weekend-color: #b42328; --weekend-selected: #ffd6d7; }
.calendar > .weekday, .day-number { color: var(--weekend-color, inherit); }
.day.selected .day-number { color: var(--weekend-selected, inherit); }
.alert { background: #ffe9dd; border-radius: .5rem; padding: .8rem; }
.badge.overdue { background: #ffe9dd; color: #8c351e; }
details { border-top: 1px solid var(--line); padding: .75rem 0; }
summary { cursor: pointer; font-weight: 650; }
details form { margin-top: .75rem; }
li:has(.record-edit) { flex-wrap: wrap; }
.record-edit { flex-basis: 100%; border-top: 0; padding: .15rem 0; font-size: .875rem; }
.team-grid { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.member-list { display: grid; }
.member-list a { display: grid; gap: .15rem; overflow-wrap: anywhere; text-decoration: none; }
.member-list a:hover, .member-list a[aria-current] { background: #e1f3e6; }
.member-list small { color: #52655a; }
@media (max-width: 550px) {
  .team-grid { grid-template-columns: 1fr; }
}

.member-divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: .25rem 0; }
.notice-body { white-space: pre-wrap; overflow-wrap: anywhere; }
textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; padding: .6rem .75rem; border: 1px solid #9bb2a5; border-radius: .5rem; }
form[action^="/notice-"]:not(.inline) { display: grid; justify-items: start; }
form[action^="/notice-"] label { width: 100%; }
.unread {
  display: inline-block;
  margin-inline-start: .4rem;
  padding: .1rem .4rem;
  border-radius: 1rem;
  background: #ffd7a7;
  color: #412608;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.record-edit > summary {
  display: list-item;
  width: fit-content;
  padding: .35rem .65rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
}
.record-menu {
  margin-top: .35rem;
  padding: .4rem .65rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #f7faf8;
}
.record-menu > details { border-top: 0; padding: .25rem 0; }
.record-menu > form.inline { margin: .25rem 0; }
.notice-card, .calendar-record { position: relative; }
.notice-card:has(.record-edit) > h2,
.calendar-record:has(.record-edit) > span { padding-inline-end: 2.75rem; overflow-wrap: anywhere; }
.calendar-record > .record-edit { padding: 0; }
.record-edit > summary {
  position: absolute;
  inset-block-start: .45rem;
  inset-inline-end: .25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.15rem;
  color: var(--green);
  background: white;
  list-style: none;
}
.notice-card .record-edit > summary { inset-block-start: .65rem; inset-inline-end: .75rem; }
.record-edit > summary::-webkit-details-marker { display: none; }
.record-edit > summary:hover, .record-edit[open] > summary { background: #e1f3e6; }
.project-sidebar .member-divider { margin-block: 1rem; }
.project-admin-row { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.project-admin-row > form:first-child { flex: 1 1 14rem; }
.project-admin-row + .project-admin-row { margin-top: .75rem; }
.task-row:has(.reschedule) { flex-wrap: wrap; }
.reschedule { flex-basis: 100%; padding: .2rem 0; border-top: 0; font-size: .875rem; }
.task-project { font-weight: 650; }
.task-title { min-width: 0; overflow-wrap: anywhere; }
.task-row > .actions { flex: 0 0 auto; }
.task-menu { position: relative; border: 0; padding: 0; }
.task-menu > summary {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  color: var(--green);
  background: white;
  list-style: none;
}
.task-menu > summary::-webkit-details-marker { display: none; }
.task-menu > summary:hover, .task-menu[open] > summary { background: #e1f3e6; }
.task-menu > .record-menu {
  position: absolute;
  inset-inline-end: 0;
  z-index: 2;
  width: min(19rem, calc(100vw - 4rem));
  box-shadow: 0 .4rem 1rem #15282026;
}

.event-marker { font-weight: 750; }
.profile { position: relative; padding: 0; border: 0; }
.profile > summary { display: flex; align-items: center; gap: .45rem; list-style: none; }
.profile > summary::-webkit-details-marker { display: none; }
.profile-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e1f3e6; }
.profile-menu {
  position: absolute;
  inset-inline-end: 0;
  z-index: 3;
  margin-top: .5rem;
  width: max-content;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: white;
  box-shadow: 0 .4rem 1rem #15282026;
}
.profile-menu a { display: block; color: var(--green); padding: .5rem .65rem; border-radius: .3rem; }
.profile-menu a:hover, .profile-menu a:focus-visible { background: #e1f3e6; }
#delete-account {
  width: min(28rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: inherit;
}
#delete-account::backdrop { background: #102e2399; }
.employee-row { flex-wrap: wrap; }
.employee-row > details { flex-basis: 100%; padding: .25rem 0; border-top: 0; }

form[action="/password"] {
  display: grid;
  justify-items: start;
  max-width: 26rem;
}
form[action="/password"] label { width: 100%; }
.profile-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.team-members a { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; }
.member-name { display: grid; gap: .15rem; }

.project-admin-row > p { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
.project-tabs { gap: .25rem; padding: .4rem; }
.project-tabs a[aria-current] { background: #e1f3e6; }
.batch-entry { margin-top: .75rem; }
form[action="/batch-preview"] label:has(textarea) { flex-basis: 100%; }
.batch-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.batch-table th, .batch-table td { padding: .55rem; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

form[action="/batch-commit"] { display: block; }
.batch-table th:last-child, .batch-table td:last-child { width: 10rem; }
.batch-table input[type="date"] { min-width: 0; padding-inline: .45rem; }
.task-description-field { flex-basis: 100%; }
.task-description { border: 0; padding: .25rem 0 0; font-size: .875rem; }
.task-description p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .4rem 0 0; }
.task-description textarea { margin-top: .35rem; }
.batch-tools { margin-block: .75rem; }
.download-button {
  display: inline-block;
  padding: .5rem .75rem;
  border: 1px solid var(--green);
  border-radius: .5rem;
  font-weight: 650;
  text-decoration: none;
}
.download-button:hover { background: #e1f3e6; }
.task-register-link { margin: -.35rem 0 .75rem; }
.task-register-link a { display: inline-block; padding: .25rem .5rem; font-size: .875rem; }
.active-task-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.active-task-heading > h2 { grid-area: 1 / 1; justify-self: start; margin-top: .4rem; }
.self-task-entry { grid-area: 1 / 1 / 2 / 3; padding: 0; border: 0; }
.self-task-entry > summary {
  width: fit-content;
  margin: 0 0 .6rem auto;
  padding: .35rem .65rem;
  border-radius: .5rem;
  background: var(--green);
  color: white;
  font-size: .875rem;
  list-style: none;
}
.self-task-entry > summary::-webkit-details-marker { display: none; }

.notice-meal-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0.75rem 0; }

.notice-board { width: 100%; border-collapse: collapse; }
.notice-board th, .notice-board td {
  padding: .65rem .5rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.notice-board td:first-child { overflow-wrap: anywhere; }
.notice-board td:last-child { white-space: nowrap; }