/* Deliberately no Bootstrap. This app shows text and is read with one hand while cooking, so the
   whole style sheet is smaller than the framework's font file — and there is nothing to vendor,
   nothing to keep patched, and no advisory to pin. Mobile first: the desktop rules are the @media. */

:root {
    --ink: #1b1b1f;
    --paper: #fbfbfd;
    --muted: #5c5c66;
    --line: #dcdce4;
    --accent: #2563eb;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e9e9ee;
        --paper: #16161a;
        --muted: #a0a0ab;
        --line: #30303a;
        --accent: #7aa2ff;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; text-decoration: none; color: inherit; }
header nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-left: auto; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--accent); }
header form { margin: 0; }

main { padding: 1rem; max-width: 52rem; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: var(--muted); text-transform: lowercase; }

.notes { list-style: none; margin: 0; padding: 0; }
.notes li { border-bottom: 1px solid var(--line); }
.notes a { display: block; padding: .7rem .2rem; text-decoration: none; color: inherit; }
.notes a:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.notes .name { font-weight: 600; }
.notes .desc { color: var(--muted); font-size: .92rem; }

label { display: block; margin: .9rem 0 .2rem; font-size: .9rem; color: var(--muted); }
input, select, textarea, button {
    font: inherit;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: .5rem .6rem;
    width: 100%;
}
/* Tall by default: a recipe is the reason this page exists, and a three-line box makes editing one
   feel like filling in a form instead of writing. */
textarea { min-height: 24rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; resize: vertical; }
button { width: auto; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: #b42318; border-color: #b42318; background: transparent; }

.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.row .spacer { margin-left: auto; }
.hint { color: var(--muted); font-size: .88rem; }
.error { color: #b42318; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; color: var(--muted); }

@media (min-width: 40rem) {
    main { padding: 1.5rem; }
    h1 { font-size: 1.7rem; }
}

/* Attachments on the edit page: a thumbnail row per file. */
ul.files { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; }
ul.files li { display: flex; gap: .8rem; align-items: flex-start; }
ul.files img { width: 96px; height: 96px; object-fit: cover; border-radius: .5rem; border: 1px solid #ddd; }