@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

:root {
	--forest: #173f35;
	--forest-deep: #103229;
	--moss: #a2b39a;
	--lime: #d6e487;
	--paper: #f4f4ee;
	--white: #fff;
	--ink: #1f302c;
	--muted: #74817a;
	--line: #e2e5dc;
	--coral: #d16f55;
	--danger: #a63b32;
	font-family: 'DM Sans', sans-serif;
	color: var(--ink);
	background: var(--paper);
	font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, select, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.workspace-header { height: 66px; padding: 0 max(24px, calc((100vw - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; color: #f7f7ee; background: var(--forest-deep); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.brand b { color: var(--lime); font-weight: 500; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(214,228,135,.65); color: var(--lime); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0; }
.site-link { color: #d1dcd3; font-size: 12px; }
.site-link span { padding-left: 5px; color: var(--lime); }
.workspace { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 49px 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .11em; line-height: 1.4; }
h1, h2, p { margin-top: 0; }
.page-heading h1 { margin: 0; color: var(--forest-deep); font-family: 'Newsreader', Georgia, serif; font-size: 42px; font-weight: 500; letter-spacing: 0; line-height: 1.05; }
.heading-copy { margin: 10px 0 0; color: #65716b; font-size: 14px; }
.button { min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #a4b881; outline-offset: 2px; }
.button-primary { background: var(--forest); color: var(--white); }
.button-primary:hover { background: #245849; }
.button-primary > span { font-size: 18px; font-weight: 400; }
.button-outline { border-color: #d2d9d0; background: transparent; color: var(--forest); }
.button-outline:hover { border-color: var(--forest); background: #e9ede5; }
.button-quiet { min-height: 38px; border: 0; background: transparent; color: var(--muted); }
.button-quiet:hover { color: var(--danger); }
.trek-bar { min-height: 63px; padding: 10px 16px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.58); }
.trek-bar > label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.trek-bar select { max-width: min(440px, 52vw); min-height: 40px; padding: 0 34px 0 11px; border: 1px solid #d7ddd4; border-radius: 2px; background: var(--white); color: var(--ink); }
.save-status { margin-left: auto; color: var(--muted); font-size: 11px; }
.save-status.is-saved { color: #40735a; }
.save-status.is-error { color: var(--danger); }
.empty-state { margin-top: 30px; padding: 76px 24px; border: 1px dashed #c5cec1; text-align: center; background: rgba(255,255,255,.38); }
.empty-state h2 { margin: 0 0 8px; color: var(--forest-deep); font: 500 32px/1.1 'Newsreader', Georgia, serif; }
.empty-state > p:not(.eyebrow) { max-width: 440px; margin: 0 auto 22px; color: var(--muted); }
.trip-overview { margin-top: 21px; padding: 26px 28px 23px; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(420px, 1.2fr); gap: 30px; color: #f6f7ee; background: var(--forest); }
.trip-title-row { display: flex; align-items: center; gap: 12px; }
.trip-title-block .eyebrow { margin-bottom: 9px; color: #bfd0bd; }
.trip-title-block h2 { margin: 0; font: 500 31px/1.1 'Newsreader', Georgia, serif; letter-spacing: 0; }
.trip-dates { margin: 10px 0 0; color: #d1dcd3; font-size: 12px; }
.status-badge { padding: 4px 8px; border: 1px solid rgba(214,228,135,.48); color: var(--lime); font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1.2; }
.status-badge[data-status="completed"] { color: #d6e8d6; border-color: rgba(214,232,214,.5); }
.status-badge[data-status="in-progress"] { color: #f1bd94; border-color: rgba(241,189,148,.5); }
.trip-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; }
.trip-facts div { min-width: 0; padding: 4px 12px; border-left: 1px solid rgba(255,255,255,.17); }
.trip-facts span, .trip-facts strong { display: block; }
.trip-facts span { margin-bottom: 5px; color: #b7c9bc; font-size: 10px; }
.trip-facts strong { overflow-wrap: anywhere; color: #fff; font-size: 12px; font-weight: 600; }
.progress-band { min-height: 83px; padding: 17px 22px; display: grid; grid-template-columns: 152px minmax(100px, 1fr) auto; align-items: center; gap: 22px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.progress-copy { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.progress-copy strong { color: var(--forest); font-family: 'Newsreader', Georgia, serif; font-size: 24px; font-weight: 500; }
.progress-copy span { color: var(--muted); font-size: 10px; }
.progress-track { height: 6px; overflow: hidden; background: #e9ede6; }
.progress-track span { width: 0; height: 100%; display: block; background: #90a778; transition: width .2s ease; }
.status-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.status-control select { min-height: 36px; padding: 0 26px 0 9px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); font-size: 11px; }
.tool-row { margin: 21px 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.search-control { min-width: 218px; height: 40px; margin-right: auto; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid #d8ded5; background: #fff; color: #78847d; }
.search-control > span:not(.visually-hidden) { font-size: 18px; transform: rotate(-25deg); }
.search-control input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 12px; }
.filter-switch { padding: 3px; display: inline-flex; border: 1px solid #d8ded5; background: #eaede7; }
.filter-switch button { min-height: 31px; padding: 0 10px; border: 0; background: transparent; color: #69776e; font-size: 11px; }
.filter-switch button[aria-pressed="true"] { background: #fff; color: var(--forest); box-shadow: 0 1px 3px rgba(23,63,53,.12); }
.tool-row > .button { min-height: 38px; padding: 0 11px; }
.checklist-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 20px; }
.category-list { display: grid; gap: 8px; }
.category-section { border: 1px solid var(--line); background: #fff; }
.category-section details > summary { min-height: 59px; padding: 12px 15px; display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.category-section details > summary::-webkit-details-marker { display: none; }
.category-section details > summary::before { width: 7px; height: 7px; flex: 0 0 7px; content: ''; border-right: 1.5px solid #6d7c70; border-bottom: 1.5px solid #6d7c70; transform: rotate(-45deg); transition: transform .15s ease; }
.category-section details[open] > summary::before { transform: rotate(45deg) translate(-2px,-2px); }
.category-title { flex: 1; color: var(--forest-deep); font-size: 13px; font-weight: 700; }
.category-count { color: #768179; font-family: 'DM Mono', monospace; font-size: 10px; white-space: nowrap; }
.category-progress { width: 52px; height: 4px; overflow: hidden; background: #e9ede6; }
.category-progress span { height: 100%; display: block; background: #90a778; }
.category-reset { padding: 6px; border: 0; background: transparent; color: #89938c; font-size: 10px; }
.category-reset:hover { color: var(--danger); }
.task-list { padding: 0 16px 8px 36px; }
.daily-period { margin: 12px 0 4px; color: #7c8d7e; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.task-row { min-height: 46px; padding: 7px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 8px; border-top: 1px solid #edf0ea; }
.task-label { min-height: 32px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.task-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.task-check { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border: 1px solid #c7d0c7; border-radius: 2px; background: #fff; }
.task-check::after { width: 8px; height: 4px; content: ''; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .12s ease; }
.task-label input:checked + .task-check { border-color: var(--forest); background: var(--forest); }
.task-label input:checked + .task-check::after { transform: rotate(-45deg) scale(1); }
.task-label input:focus-visible + .task-check { outline: 3px solid #a4b881; outline-offset: 2px; }
.task-title { color: #34423c; font-size: 12px; line-height: 1.4; }
.is-complete .task-title { color: #87928a; text-decoration: line-through; text-decoration-color: #b4beb5; }
.note-toggle { min-height: 30px; padding: 4px 5px; border: 0; background: transparent; color: #75877a; font-size: 10px; white-space: nowrap; }
.note-toggle:hover { color: var(--forest); }
.task-remove { min-height: 30px; padding: 4px 5px; border: 0; background: transparent; color: #a45b4a; font-size: 10px; white-space: nowrap; }
.task-remove:hover { color: var(--danger); }
.task-note-wrap { grid-column: 1 / -1; padding: 0 0 4px 29px; }
.task-note-wrap[hidden] { display: none; }
.task-note-wrap textarea, .notes-panel textarea { width: 100%; resize: vertical; border: 1px solid #dce2da; border-radius: 2px; background: #fbfcf9; color: var(--ink); font-size: 12px; line-height: 1.5; }
.task-note-wrap textarea { min-height: 56px; padding: 8px; }
.notes-panel { padding: 18px; border: 1px solid var(--line); background: #fff; }
.panel-heading { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading .eyebrow { margin-bottom: 5px; }
.panel-heading h2 { margin: 0 0 13px; color: var(--forest); font: 500 22px/1 'Newsreader', Georgia, serif; }
.panel-heading > span { color: #b4c1ae; font-family: 'DM Mono', monospace; font-size: 10px; }
.notes-panel > label { margin: 15px 0 6px; display: block; color: #56665d; font-size: 11px; font-weight: 700; }
.notes-panel textarea { padding: 9px; }
.notes-panel textarea:focus, .task-note-wrap textarea:focus { outline: 2px solid #a4b881; outline-offset: 1px; }
.notes-foot { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.notes-foot time { color: #4f6e58; }
.filter-empty { padding: 34px 20px; border: 1px dashed #cbd3c9; color: var(--muted); text-align: center; font-size: 12px; }
.dialog { width: min(620px, calc(100% - 28px)); max-height: min(90vh, 820px); padding: 25px; overflow: auto; border: 1px solid #dbe1d7; border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 70px rgba(8,32,25,.22); }
.dialog::backdrop { background: rgba(12,35,28,.62); }
.dialog-small { width: min(430px, calc(100% - 28px)); }
.dialog-heading { margin-bottom: 21px; display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-heading .eyebrow { margin-bottom: 6px; }
.dialog-heading h2 { margin: 0; color: var(--forest); font: 500 27px/1.1 'Newsreader', Georgia, serif; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; color: #55645b; font-size: 22px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.field { margin: 0 0 14px; display: grid; gap: 6px; color: #56665d; font-size: 11px; font-weight: 700; }
.form-grid .field { margin: 0; }
.field-wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; min-height: 41px; padding: 9px 10px; border: 1px solid #d6ddd2; border-radius: 2px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 400; }
.field textarea { resize: vertical; }
.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions .button { min-width: 96px; }
.form-hint { color: var(--muted); font-size: 12px; }
.toast { position: fixed; right: 24px; bottom: 22px; z-index: 5; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-left: 3px solid var(--lime); background: var(--forest-deep); color: #fff; opacity: 0; pointer-events: none; transform: translateY(7px); transition: opacity .18s ease, transform .18s ease; font-size: 12px; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { border-color: #e28b74; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
	.trip-overview { grid-template-columns: 1fr; gap: 20px; }
	.trip-facts { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.17); }
	.trip-facts div:first-child { border-left: 0; padding-left: 0; }
	.checklist-layout { grid-template-columns: minmax(0, 1fr) 255px; gap: 12px; }
	.progress-band { grid-template-columns: 1fr minmax(120px, 1fr); }
	.status-control { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 700px) {
	.workspace-header { height: 58px; padding: 0 17px; }
	.workspace { width: calc(100% - 30px); padding: 31px 0 50px; }
	.page-heading { align-items: flex-start; margin-bottom: 22px; }
	.page-heading h1 { font-size: 35px; }
	.heading-copy { max-width: 360px; font-size: 12px; }
	.page-heading > .button { flex: 0 0 auto; min-height: 39px; padding: 0 10px; }
	.trek-bar { flex-wrap: wrap; gap: 7px 11px; padding: 10px; }
	.trek-bar > label { font-size: 10px; }
	.trek-bar select { order: 2; width: 100%; max-width: none; }
	.save-status { margin-left: auto; }
	.trek-bar .button { min-height: 30px; padding: 0 5px; }
	.trip-overview { padding: 21px 17px 17px; gap: 18px; }
	.trip-title-block h2 { font-size: 28px; }
	.trip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
	.trip-facts div:nth-child(odd) { border-left: 0; padding-left: 0; }
	.trip-facts div { padding-right: 7px; }
	.progress-band { min-height: 0; padding: 14px; grid-template-columns: 1fr; gap: 9px; }
	.progress-copy { justify-content: space-between; }
	.status-control { grid-column: auto; justify-self: stretch; justify-content: space-between; }
	.status-control select { flex: 1; max-width: 200px; }
	.tool-row { gap: 7px; }
	.search-control { width: 100%; margin-right: 0; }
	.filter-switch { flex: 1; }
	.filter-switch button { flex: 1; padding: 0 5px; }
	.tool-row > .button { flex: 1; min-width: 92px; padding: 0 8px; font-size: 10px; }
	.checklist-layout { grid-template-columns: 1fr; }
	.notes-panel { grid-row: 1; }
	.category-section details > summary { min-height: 55px; padding: 10px; gap: 9px; }
	.category-title { font-size: 12px; }
	.category-count { font-size: 9px; }
	.category-progress { width: 37px; }
	.category-reset { padding: 6px 2px; font-size: 9px; }
	.task-list { padding: 0 10px 7px 27px; }
	.task-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px; }
	.task-label { gap: 8px; }
	.task-title { font-size: 11px; }
	.note-toggle { font-size: 9px; }
	.dialog { padding: 19px; }
}
@media (max-width: 390px) {
	.page-heading h1 { font-size: 31px; }
	.heading-copy { font-size: 11px; }
	.page-heading { gap: 7px; }
	.page-heading > .button { font-size: 10px; }
	.category-progress { display: none; }
	.category-section details > summary { gap: 7px; }
}
@media print {
	:root, body { background: #fff; }
	.workspace-header, .page-heading > .button, .trek-bar, .tool-row, .notes-panel, .category-reset, .note-toggle, .toast { display: none !important; }
	.workspace { width: 100%; padding: 0; }
	.trip-overview { margin: 0; color: #111; background: #fff; border-bottom: 2px solid #173f35; }
	.trip-title-block h2, .trip-dates, .trip-facts strong, .trip-facts span { color: #111; }
	.trip-facts div { border-color: #ccc; }
	.progress-band { display: block; border: 0; }
	.progress-track, .status-control { display: none; }
	.checklist-layout { display: block; }
	.category-section { break-inside: avoid; }
	.category-section details:not([open]) > .task-list { display: block; }
	.category-section details > summary::before { display: none; }
}