@import url("../../css/foundation/reset.css");
@import url("../../css/foundation/tokens.css");
@import url("../../css/foundation/base.css");
@import url("../../css/primitives/controls.css");
@import url("../../css/primitives/forms.css");

notes { display: block; min-height: 100vh; }
notes > header { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; border-bottom: 1px solid var(--color-border); }
notes > header .brand { margin-right: auto; text-decoration: none; }
notes > header nav { display: none; }
notes > main { display: block; }
notes > main > aside { display: block; padding: 2rem; }
identity-switcher,
note-filter,
note-list,
note,
note-reader,
note-title,
note-updated { display: block; }
note-filter input { width: 100%; }
note-list { margin-top: 2rem; }
note { margin-bottom: .5rem; }
note a { display: block; padding: 1rem; text-decoration: none; }
note.selected a { background: var(--color-surface); }
note-updated { color: var(--color-text-muted); font-size: 80%; }
note-reader { display: none; padding: 2rem; }
notes.reader > header nav { display: block; }
notes.reader > main > aside { display: none; }
notes.reader note-reader { display: block; }
note-reader > header { display: block; margin-bottom: 3rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--color-border); }
note-reader > header nav { display: block; }
note-reader h1 { margin: 1rem 0 0; }

@media (min-width: 60rem) {
	notes > header nav { display: none; }
	notes > main { display: grid; grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); min-height: calc(100vh - 6rem); }
	notes.list > main > aside,
	notes.reader > main > aside { display: block; min-width: 0; overflow-y: auto; border-right: 1px solid var(--color-border); }
	notes.list note-reader,
	notes.reader note-reader { display: block; min-width: 0; overflow-y: auto; padding: 3rem clamp(2rem, 6vw, 8rem); }
	note-reader > header nav { display: none; }
}