* { box-sizing: border-box; }
:root {
  --ink: #172d27;
  --muted: #4b655b;
  --green: #165b45;
  --light: #f2f6f3;
  --line: #dbe6df;
  --white: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--light);
}
body { margin: 0; line-height: 1.55; }
a { color: var(--green); }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid #a55a00; outline-offset: 3px; }
.shell { width: min(100% - 2rem, 66rem); margin-inline: auto; }
.topbar { background: var(--white); border-bottom: 1px solid var(--line); }
.topbar-inner, .navigation, .brand, .page-heading, .row {
  display: flex; align-items: center; gap: 1rem;
}
.topbar-inner { min-height: 4.4rem; justify-content: space-between; }
.brand { font-size: 1.4rem; font-weight: 790; letter-spacing: -.05em; color: var(--ink); text-decoration: none; gap: .65rem; }
.brand-mark { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; background: var(--green); color: #ebf9ee; border-radius: .65rem; }
.navigation { gap: clamp(.65rem, 2.4vw, 1.5rem); font-size: .9rem; }
.navigation a, .nav-button { color: var(--ink); font-weight: 600; text-decoration: none; }
.nav-button { background: transparent; padding: 0; min-height: 2.75rem; }
.nav-button:hover, .navigation a:hover { background: transparent; text-decoration: underline; }
.page { padding: clamp(1.7rem, 5vw, 3.5rem) 0 4rem; }
.page-heading { justify-content: space-between; flex-wrap: wrap; margin: 0 0 1.5rem; }
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.05rem, 5.5vw, 3.5rem); line-height: 1.08; letter-spacing: -.055em; margin: .2rem 0 .6rem; }
h2 { font-size: 1.2rem; letter-spacing: -.02em; }
h3 { font-size: 1rem; margin-bottom: .35rem; }
.muted, .row p, .empty, dt, .helptext { color: var(--muted); }
.eyebrow { color: var(--green); font-size: .76rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.button, button {
  display: inline-flex; justify-content: center; align-items: center; cursor: pointer;
  min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid transparent;
  border-radius: .55rem; background: var(--green); color: var(--white);
  text-decoration: none; font-weight: 680; line-height: 1.25;
}
.button:hover, button:hover { background: #104536; }
.secondary { background: var(--white); border-color: var(--line); color: var(--green); }
.secondary:hover { background: var(--light); }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; margin-bottom: 1.25rem; }
.metric, .panel { background: var(--white); border: 1px solid var(--line); border-radius: .85rem; }
.metric { padding: .85rem 1rem; display: grid; color: var(--muted); text-decoration: none; font-size: .9rem; }
.metric:hover, .row-link:hover { background: #eef7f1; }
.metric strong { color: var(--ink); font-size: 1.8rem; line-height: 1.15; }
.panel { margin-bottom: 1rem; }
.list-panel h2, .list-panel .empty { padding: .9rem 1.1rem; }
.row { justify-content: space-between; border-top: 1px solid var(--line); padding: .75rem 1.1rem; }
.row-link { text-decoration: none; color: var(--ink); }
.row p, .row-date { font-size: .88rem; }
.row-date { flex-shrink: 0; color: var(--muted); }
.row-date span { margin-left: .3rem; color: var(--green); }
.back { display: inline-block; margin-bottom: 1rem; font-weight: 650; }
.form-panel, .context { max-width: 44rem; padding: clamp(1rem, 4vw, 1.65rem); }
.form-panel h2 { margin-bottom: .3rem; }
.form-panel form { margin-top: .9rem; }
.form-panel form p { margin-bottom: .85rem; }
.form-panel label { display: block; margin-bottom: .25rem; font-size: .92rem; font-weight: 670; }
.form-panel input:not([type=hidden]):not([type=checkbox]), .form-panel select, .form-panel textarea {
  display: block; width: 100%; min-height: 2.7rem; padding: .55rem .65rem;
  border: 1px solid #a8bdb1; border-radius: .45rem; color: var(--ink); background: var(--white);
}
textarea { resize: vertical; }
.helptext { display: block; margin-top: .2rem; font-size: .82rem; }
.helptext ul { padding-left: 1.15rem; margin: .35rem 0; }
.errorlist { color: #9b2429; margin: .45rem 0; padding-left: 1.15rem; }
.notice { background: #ddf3e4; border: 1px solid #aad2bb; border-radius: .55rem; padding: .6rem .85rem; margin-bottom: 1rem; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem 1.1rem; margin: .8rem 0 1.25rem; }
dt { font-size: .86rem; }
dd { margin: 0; overflow-wrap: anywhere; }
.preserve { white-space: pre-wrap; overflow-wrap: anywhere; }
.pill { display: inline-block; border-radius: 20px; padding: .15rem .6rem; color: #334c4d; background: #e7eff0; font-size: .83rem; font-weight: 650; }
.pill.active { background: #f9e8ca; color: #674309; }
.pill.done { background: #dff2e6; color: #205337; }
.work-photo { display: block; max-width: 100%; height: auto; border-radius: .6rem; }
.share-action { margin-top: .8rem; }
.share-panel p + p { margin-top: .5rem; }
.share-panel .revoke { margin: .75rem 0 0; }
.share-link { padding: 0; margin: 0; }
.login-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1rem, 5vw, 3rem); align-items: stretch; }
.login-grid .panel { margin: 0; }
.intro { display: grid; align-content: center; padding: clamp(1.1rem, 4vw, 2.5rem); background: #123b30; color: var(--white); border-radius: .85rem; }
.intro .eyebrow { color: #b9e4c8; }
.intro > p:last-child { color: #dfede3; }
@media (max-width: 42rem) {
  .login-grid { grid-template-columns: 1fr; }
  .row { align-items: flex-start; }
  .row-date { flex-shrink: 1; text-align: right; }
}