:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17332d; background: #f4f7f5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #185e50; text-underline-offset: .2em; }
header, main, footer { width: min(100% - 2rem, 66rem); margin-inline: auto; }
header { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding-block: .6rem; border-bottom: 1px solid #cedbd3; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; min-width: 0; gap: .6rem; }
.menu-logout { border-top: 1px solid #cedbd3; margin-top: .4rem; padding-top: .4rem; }
.menu-logout button { width: 100%; border: 0; justify-content: flex-start; }
.menu { position: relative; }
.menu summary { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .7rem 1rem; border: 1px solid #185e50; border-radius: .65rem; cursor: pointer; font-weight: 600; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; z-index: 5; top: calc(100% + .5rem); right: 0; width: min(17rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: .5rem; background: white; border: 1px solid #cedbd3; border-radius: .75rem; box-shadow: 0 .5rem 1.5rem #17332d22; }
.menu a { display: flex; align-items: center; min-height: 48px; padding: .75rem 1rem; text-decoration: none; border-radius: .5rem; overflow-wrap: anywhere; }
.menu a[aria-current="page"] { background: #e8f2ec; font-weight: 700; }
.dashboard-section { margin-block: 1.25rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.section-heading h2 { margin: 0; font-size: 1.1rem; }
.section-heading .button { min-height: 44px; padding: .4rem .7rem; font-size: .9rem; }
.dashboard-row, .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.dashboard-row > :nth-child(n+3) { display: none; }
.dashboard-row .photo { min-width: 0; }
.photo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loading-label { margin-block: .5rem; color: #527568; font-size: .9rem; }
.skeleton-image { aspect-ratio: 4 / 3; background: linear-gradient(100deg, #e8f2ec 30%, #f4f7f5 50%, #e8f2ec 70%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-image { animation: none; } }
@media (min-width: 600px) { .dashboard-row, .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-row > :nth-child(-n+3) { display: flex; } }
@media (min-width: 900px) { .dashboard-row, .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dashboard-row > :nth-child(-n+4) { display: flex; } }
@media (min-width: 1200px) { .dashboard-row, .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dashboard-row > :nth-child(-n+6) { display: flex; } }
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1.5rem; }
.search-form label { flex-basis: 100%; font-weight: 600; }
input { min-height: 48px; max-width: 100%; padding: .7rem; border: 1px solid #527568; border-radius: .5rem; background: white; color: inherit; font: inherit; }
.search-form input { flex: 1 1 14rem; min-width: 0; }
.shared-link { padding: 1.5rem; margin-block: 1rem; border: 1px solid #cedbd3; border-radius: .75rem; }
.shared-link label { display: block; margin-bottom: .75rem; font-weight: 600; }
.shared-link input { width: 100%; }
.brand { font-size: 1.4rem; font-weight: 750; text-decoration: none; }
main { padding-block: 1rem; min-height: 65vh; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 650; }
h1 { font-size: 1.35rem; line-height: 1.3; margin-block: 0 1rem; overflow-wrap: anywhere; }
p { line-height: 1.65; max-width: 65ch; overflow-wrap: anywhere; }
.button, button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.2rem; border: 1px solid #185e50; border-radius: .65rem; background: #185e50; color: white; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.secondary { color: #185e50; background: transparent; }
nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 2rem; }
.card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid #cedbd3; border-radius: 1rem; background: white; text-decoration: none; min-height: 130px; }
.card strong { font-size: 1.3rem; }
.card span { font-size: .9rem; }
.card[aria-current="page"] { border-color: #185e50; background: #e8f2ec; }

.photo { display: flex; flex-direction: column; border: 1px solid #cedbd3; border-radius: .75rem; overflow: hidden; background: white; text-decoration: none; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e8f2ec; }
.photo-preview { position: relative; aspect-ratio: 4 / 3; background: #e8f2ec; overflow: hidden; }
.photo-preview img { opacity: 1; transition: opacity .2s ease-in; }
.photo-preview.is-loading img { opacity: 0; }
.photo-preview img[hidden], .photo .photo-loading[hidden] { display: none; }
.photo .photo-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: normal; text-align: center; color: #496556; }
.photo-preview.is-loading { background: linear-gradient(100deg, #e8f2ec 30%, #f4f7f5 50%, #e8f2ec 70%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .photo-preview.is-loading { animation: none; } .photo-preview img { transition: none; } }
.photo span { padding: .55rem .7rem; font-size: .9rem; overflow-wrap: anywhere; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.image-detail { margin: 2rem 0; }
.image-detail img { display: block; max-width: 100%; max-height: 75vh; margin-inline: auto; }
.image-detail figcaption { margin-top: 1rem; overflow-wrap: anywhere; }
a:hover, button:hover { filter: brightness(.88); }
:focus-visible { outline: 3px solid #a04a0b; outline-offset: 4px; }
.skip { position: absolute; left: 1rem; top: -5rem; padding: 1rem; background: white; }
.skip:focus { top: 1rem; }
footer { padding-block: 1.5rem; font-size: .85rem; border-top: 1px solid #cedbd3; }

.header-location { display: block; flex: 1; min-width: 0; margin: 0; }
.header-location ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .5rem; margin: 0; padding: 0; list-style: none; }
.header-location li { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; }
.header-location a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.current-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.location-divider { color: #527568; }
.brand { flex-shrink: 0; }
.menu-logout button { overflow-wrap: anywhere; text-align: left; }
.icon { width: 22px; height: 22px; flex-shrink: 0; }
.button.icon-button { width: 44px; min-height: 44px; padding: .5rem; border-radius: .5rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.version { color: #527568; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-block: 1rem; }
.task-card { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border: 1px solid #cedbd3; border-radius: .75rem; background: white; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.task-card > span { font-size: .9rem; }
.task-labels { display: flex; flex-wrap: wrap; gap: .3rem; }
.task-label { padding: .2rem .4rem; background: #e8f2ec; border-radius: .3rem; }
.task-form { display: flex; flex-direction: column; gap: .7rem; max-width: 40rem; margin-block: 1.5rem; }
.task-form [data-task-single], .task-form [data-task-series] { display: grid; gap: .7rem; }
.task-form [hidden] { display: none; }
.task-form small { line-height: 1.5; }
.task-form fieldset { min-width: 0; border: 1px solid #cedbd3; border-radius: .5rem; padding: .75rem; }
.task-form input, .task-form textarea { width: 100%; }
.task-form input[type=checkbox] { width: auto; }
.task-form label, .task-form legend { font-weight: 600; }
.task-form textarea, .task-form select { width: 100%; padding: .7rem; min-height: 48px; border: 1px solid #527568; border-radius: .5rem; background: white; color: inherit; font: inherit; }
.task-checkbox { display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.task-form fieldset { border: 1px solid #cedbd3; border-radius: .5rem; }
.task-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.task-comment { border-bottom: 1px solid #cedbd3; padding-block: 1rem; }
.task-priority-0 { background-color: #f7f9f8; }
.task-priority-1 { background-color: #eaf5ed; }
.task-priority-2 { background-color: #f1f7ed; }
.task-priority-3 { background-color: #fff5ed; }
.task-priority-4 { background-color: #fff0ef; }
.task-priority-5 { background-color: #fce6e8; }
.task-priority-icon { display: inline-flex; align-items: center; justify-content: center; }
.task-priority-icon.priority-0 { color: #527568; }
.task-priority-icon.priority-1, .task-priority-icon.priority-2 { color: #206b36; }
.task-priority-icon.priority-3 { color: #99400a; }
.task-priority-icon.priority-4, .task-priority-icon.priority-5 { color: #a12b34; }
.task-comment-count, .task-detail-status { display: flex; align-items: center; gap: .4rem; }
.task-comment-count .icon { width: 18px; height: 18px; }
.task-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .75rem; }
.task-week-day { min-width: 0; border: 1px solid #cedbd3; border-radius: .65rem; padding: .6rem; }
.task-week-day.is-today { border: 2px solid #185e50; background: #e8f2ec; }
.task-week-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0 0 .6rem; font-size: .85rem; }
.task-today-label { font-weight: 700; color: #185e50; }
.task-week-items { display: grid; gap: .5rem; }
.task-week-items .task-card { padding: .65rem; font-size: .9rem; }
.task-week-empty { margin: 0; font-size: .8rem; color: #527568; }
.task-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.task-mine-icon { display: inline-flex; }
.task-mine-icon .icon { width: 18px; height: 18px; }
.task-card-done > strong { text-decoration: line-through; }
.task-completed-label { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; }
.task-completed-label .icon { width: 16px; height: 16px; }
@media (min-width: 1000px) {
  .task-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .task-week-date { flex-direction: column; gap: .15rem; min-height: 4.5rem; }
}
.task-detail { padding: 1rem; margin-block: 1rem; border-radius: .75rem; }
.task-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-block: 1rem; font-size: .8rem; }
.task-table th, .task-table td { text-align: left; padding: .4rem .15rem; border-bottom: 1px solid #cedbd3; overflow-wrap: anywhere; vertical-align: middle; }
.task-table thead th { font-weight: 650; }
.task-table th[scope="row"] { font-weight: 600; }
.task-table th[scope="row"] a { display: flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; }
.task-table .task-due-column { width: 19%; }
.task-table .task-assignee-column { width: 22%; }
.task-table .task-icon-column { width: 44px; }
.task-table time span { display: block; }
.task-table .task-icon-cell { text-align: center; padding-inline: 0; }
.task-complete-form { margin: 0; display: inline-flex; }
.task-complete-form button { width: 44px; min-height: 44px; padding: .5rem; border-radius: .5rem; }
.task-heading-full { display: none; }
.task-row-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.task-table .task-actions-column { width: 48px; }
.task-complete-form button[aria-pressed="true"] { background: #dcece3; }
.task-complete-form button:disabled { opacity: .45; cursor: not-allowed; }
.task-assignees > span { display: block; }
.task-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: 1rem; }
.task-filters > div { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 12rem; min-width: 0; }
.task-filters label { font-weight: 600; }
.task-filters select, .task-filters input { width: 100%; }
.task-filters select { padding: .7rem; min-height: 48px; border: 1px solid #527568; border-radius: .5rem; background: white; color: inherit; font: inherit; }
.task-month-navigation { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block: 1rem; }
.task-done th[scope="row"] a { text-decoration: line-through; }
.task-due-form { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-block: 1rem; }
.task-due-form label { flex-basis: 100%; font-weight: 600; }
@media (min-width: 600px) {
  .task-table { font-size: .95rem; }
  .task-table th, .task-table td { padding: .65rem; }
  .task-table .task-due-column { width: 18%; }
  .task-table .task-icon-column { width: 96px; }
  .task-table .task-actions-column { width: 104px; }
  .task-table time span { display: inline; }
  .task-heading-full { display: inline; }
  .task-heading-short { display: none; }
}