:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
}

body { background: #f3f6f2; color: #20372f; }
.app header { background-color: #29584d; }
.app header .logo img { width: 2.4rem; height: 2.4rem; }
.app main { width: min(100% - 1.5rem, 52rem); margin: 1rem auto 4rem; }

.journal h1, .journalFormPage h1 { margin: .3rem 0 .7rem; }
.entryList { display: grid; gap: .8rem; margin-top: 1.2rem; }
.entry { padding: 1rem; border: 1px solid #c9d7cc; border-radius: .7rem; background: #fff; }
.entry header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; background: transparent; color: inherit; }
.entry header div { display: grid; gap: .1rem; }
.entry time { font-size: .9rem; color: #50665a; }
.entry p { margin: .6rem 0 0; white-space: pre-wrap; }
.entry ul { margin-bottom: 0; padding-left: 1.3rem; }

.journalFormPage form { display: grid; gap: .8rem; max-width: 45rem; }
.journalFormPage .formField { display: grid; gap: .25rem; min-width: 0; }
.journalFormPage input, .journalFormPage select, .journalFormPage textarea {
    box-sizing: border-box; width: 100%; padding: .55rem; font: inherit;
    border: 1px solid #9bafa1; border-radius: .3rem; background: white; color: #20372f;
}
.journalFormPage fieldset { display: grid; gap: .7rem; margin: .4rem 0; padding: 1rem; border: 1px solid #c9d7cc; border-radius: .5rem; }
.journalFormPage legend { font-weight: 650; }
.journalFormPage .resultFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.journalFormPage .resultFields h3 { grid-column: 1 / -1; margin: .3rem 0 0; }
.formError { padding: .6rem; background: #fff0ea; border-left: .25rem solid #a53e28; }
[data-entry-type][hidden] { display: none; }
@media (max-width: 35rem) {
    .journalFormPage .resultFields { grid-template-columns: 1fr; }
    .app main { width: min(100% - 1rem, 52rem); }
}