* { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; min-height: 100dvh; overflow-x: clip; background: var(--color-canvas); color: var(--color-text); font: 1rem/1.55 system-ui, sans-serif; }
.site-header { padding: var(--space-2) max(var(--space-2), calc((100vw - var(--content-width))/2)); border-bottom: 1px solid var(--color-border); }
.brand { color: var(--color-accent); font-weight: 750; text-decoration: none; }
main { width: min(calc(100% - 2rem), var(--content-width)); min-width: 0; margin: 8vh auto; }
.workspace, .workspace > *, .card, .note-item, .account-form, .note-form { min-width: 0; }
.card { padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: 0 .5rem 2rem #0000000b; }
h1 { margin-block: 0 .5rem; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.sign-in { display: grid; gap: .6rem; margin-top: var(--space-3); }
input, textarea, button { max-width: 100%; min-height: 2.8rem; border: 1px solid var(--color-border); border-radius: .5rem; padding: .65rem .8rem; color: var(--color-text); background: var(--color-surface); font: inherit; }
textarea { width: 100%; resize: vertical; }
.notes { margin-top: 1.25rem; }
.workspace { display: grid; gap: 1rem; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .25rem .75rem; border-bottom: 1px solid var(--color-border); }
.workspace-header h1, .workspace-header p { margin: 0; }
.workspace-header p { color: var(--color-muted); }
.workspace-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.workspace-nav button { margin: 0; border-color: transparent; background: transparent; color: var(--color-text); }
.workspace-nav button[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent); color: white; }
.button-secondary { flex: 0 0 auto; margin: 0; border-color: var(--color-border); background: transparent; color: var(--color-text); }
.account-management { width: 100%; }
.account-management h2 { margin-top: 0; }
.account-form { display: grid; gap: .6rem; margin-top: 1.25rem; max-width: 34rem; }
.account-form label { display: grid; gap: .25rem; }
.success { color: var(--color-accent); }
.note-form, .note-item { display: grid; gap: .65rem; margin-top: 1rem; }
.note-form label, .sign-in label { display: grid; gap: .25rem; }
.note-item { padding: 1rem 0; border-top: 1px solid var(--color-border); }
.note-item h3, .note-item p { margin: 0; }
.note-item input[type="file"] { display: block; width: 100%; max-width: 100%; }
button { overflow-wrap: anywhere; white-space: normal; }
button { margin-top: .5rem; border-color: var(--color-accent); background: var(--color-accent); color: white; font-weight: 650; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #da9a35; outline-offset: 2px; }
.error { color: var(--color-danger); }
.loading { color: var(--color-muted); }
@media (max-width: 34rem) {
  main { margin-block: 1.25rem; }
  .workspace-header { flex-direction: column; align-items: stretch; }
  .workspace-header > * { min-width: 0; max-width: 100%; }
  .workspace-nav { width: 100%; }
  .workspace-nav button { flex: 1 1 8rem; }
}