* { box-sizing: border-box; }

body {
    margin: 0;
    background: #f4f6f9;
    color: #172b43;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

main {
    max-width: 900px;
    margin: 3rem auto;
    padding: 2rem;
    background: white;
    border: 1px solid #d3dce6;
    border-radius: 0.75rem;
}

header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
h1 { margin-top: 0; line-height: 1.25; }
#timestamp { margin-top: 0; text-align: right; white-space: nowrap; }
#description, #student-name { color: #526174; }
#error { color: #a32222; }
#error:empty { display: none; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.note-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }

textarea, .read-note {
    width: 100%;
    min-height: 9rem;
    padding: 1rem;
    border: 1px solid #adc0d8;
    border-radius: 0.4rem;
    background: #edf3fc;
    color: #172b43;
    font: inherit;
}

textarea { resize: vertical; }
.read-note { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 1rem; }
button { border: 0; border-radius: 0.35rem; padding: 0.7rem 1.2rem; background: #245aa3; color: white; font: inherit; cursor: pointer; }
button:hover { filter: brightness(0.9); }
button:focus-visible, textarea:focus-visible { outline: 3px solid #bd6b00; outline-offset: 3px; }
.remove { background: #a63c20; }
.secondary { background: #526174; }
footer { margin-top: 2rem; }

@media (max-width: 600px) {
    main { margin: 1rem; padding: 1rem; }
    header { flex-direction: column; gap: 0; }
    #timestamp { align-self: flex-end; }
    .note-row { align-items: flex-start; flex-direction: column; }
}