:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #243029;
  background: #f6f7f3;
}

body { max-width: 52rem; margin: 0 auto; padding: 1.5rem; }
header { border-bottom: 1px solid #cbd2c9; padding-bottom: 1rem; }
.brand { font-size: 1.25rem; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.logout-form { display: inline; margin: 0; }
.link-button { padding: 0; border: 0; border-radius: 0; background: transparent; color: #245c42; text-decoration: underline; text-underline-offset: 0.2em; }
.link-button:hover { background: transparent; color: #193f2e; }
main { padding-block: 2rem; }
h1 { line-height: 1.2; font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: 1.2rem; }
a { color: #245c42; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid #245c42; outline-offset: 4px; }
section { margin-top: 2rem; padding: 1.5rem; background: white; border: 1px solid #cbd2c9; }
.status { font-weight: 600; }
.ready { color: #245c42; }
.unavailable { color: #8b3420; }

* { box-sizing: border-box; }
.skip-link { position: absolute; top: -10rem; }
.skip-link:focus { top: 0.5rem; background: white; padding: 0.5rem; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-heading h1 { flex: 1 1 15rem; overflow-wrap: anywhere; }
.muted { color: #536057; }
.button, button { display: inline-block; background: #245c42; color: white; padding: 0.6rem 1rem; border: 1px solid #245c42; border-radius: 0.2rem; font: inherit; cursor: pointer; text-decoration: none; }
.button:hover, button:hover { background: #193f2e; }
input, textarea, select { max-width: 100%; padding: 0.6rem; border: 1px solid #79857b; border-radius: 0.2rem; background: white; color: inherit; font: inherit; }
textarea { resize: vertical; }
.filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.project-list { list-style: none; padding: 0; }
.project-list > li { padding: 1rem 0; border-bottom: 1px solid #cbd2c9; }
.project-list p { margin: 0.3rem 0 0; }
.project-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.project-heading > a { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.badge { padding: 0.1rem 0.6rem; border: 1px solid #cbd2c9; border-radius: 1rem; font-size: 0.875rem; white-space: nowrap; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }
.timestamps { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin-top: 2rem; }
.timestamps dd { margin: 0; }
.pagination { margin-top: 1.5rem; }
.project-form { display: grid; gap: 0.5rem; }
.project-form > label { margin-top: 1rem; font-weight: 600; }
.project-form p { margin: 0; }
.form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.error-summary { border-left: 4px solid #8b3420; background: #fff0ea; padding: 0.5rem 1rem; }
.error-summary a, .field-error { color: #8b3420; }
[aria-invalid="true"] { border-color: #8b3420; }
.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(100%, 28rem); padding: 2rem; background: white; border: 1px solid #cbd2c9; }

.tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-block: 1rem; }
.tag-row .badge { white-space: normal; overflow-wrap: anywhere; }
.markdown { margin-block: 2rem; overflow-wrap: anywhere; }
.markdown img { max-width: 100%; height: auto; }
.markdown pre { overflow-x: auto; padding: 1rem; background: #e8ede7; }
.markdown blockquote { border-left: 3px solid #79857b; padding-left: 1rem; margin-left: 0; }
.markdown table { display: block; overflow-x: auto; border-collapse: collapse; }
.markdown td, .markdown th { border: 1px solid #cbd2c9; padding: 0.5rem; }
.attachment-list { list-style: none; padding: 0; }
.attachment-list li { display: grid; gap: 0.5rem; padding-block: 1rem; border-bottom: 1px solid #cbd2c9; }
.attachment-list img { display: block; max-width: min(100%, 32rem); max-height: 24rem; object-fit: contain; }
.token-secret { margin-block: 1rem; padding: 1rem; border-left: 4px solid #245c42; background: #eef7f1; }
.token-secret input { width: 100%; font-family: ui-monospace, monospace; }
.token-list { list-style: none; padding: 0; }
.token-list li { padding-block: 1rem; border-bottom: 1px solid #cbd2c9; }
.token-list p { margin-block: 0.3rem 0.75rem; }

/* Keep long personal content and form controls usable on narrow screens. */
main, section, fieldset { min-width: 0; }
h1, h2, .timestamps dd, .attachment-list a { overflow-wrap: anywhere; }
.form-actions, .project-heading { flex-wrap: wrap; }
fieldset { margin: 0; }
fieldset label { display: block; }
@media (max-width: 36rem) {
  body { padding: 1rem; }
  section { padding: 1rem; }
  .timestamps { grid-template-columns: 1fr; gap: 0.25rem; }
  .timestamps dd { margin-bottom: 0.75rem; }
  .filters { align-items: stretch; }
  .filters label, .filters select { flex-basis: 100%; }
}