/* The whole site's styles, written by hand: there is no build step. Elements are styled directly where they can be, and the classes below name things on the page (a card, a meal, an item) rather than how they look. */
:root {
    --paper: #fbfaf7;
    --card: #ffffff;
    --tint: #f6f5f1;
    --text: #1f2933;
    --muted: #667085;
    --line: #e4e2dc;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-tint: #eff6ff;
    --good: #15803d;
    --good-tint: #f0fdf4;
    --warn: #b45309;
    --warn-tint: #fffbeb;
    --danger: #dc2626;
    --danger-tint: #fef2f2;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(31, 41, 51, 0.12);
    --shadow-lifted: 0 10px 24px rgba(31, 41, 51, 0.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('/Images/Paper1.webp') var(--paper);
    font: 16px/1.5 'Libre Baskerville', Georgia, serif;
}

a { color: var(--primary); text-decoration: none; }

a:hover { color: var(--primary-dark); }

h1, h2, h3, p { margin: 0; }

h1 { font-size: 1.85rem; margin-bottom: 1.5rem; }

h2 { font-size: 1.15rem; }

h3 { font-size: 1rem; }

img, video { display: block; max-width: 100%; }

[hidden] { display: none !important; }

/* Forms */

label { display: block; margin-bottom: 4px; font-size: 0.875rem; font-weight: 700; color: #3d4852; }

input[type=text], input[type=email], input[type=password], select, textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    background: var(--card);
    color: var(--text);
    font: inherit;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus, button:focus-visible, .button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

input[type=range] { width: 100%; accent-color: var(--primary); }

input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }

.field { margin-bottom: 1rem; }

.check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

button:hover, .button:hover { background: var(--tint); color: var(--text); }

button:disabled { opacity: 0.55; cursor: default; }

.primary { border-color: var(--primary); background: var(--primary); color: #fff; }

.primary:hover { background: var(--primary-dark); color: #fff; }

.danger-outline { border-color: #fca5a5; color: var(--danger); }

.danger-outline:hover { background: var(--danger-tint); color: var(--danger); }

.wide { width: 100%; }

/* A bare icon that acts as a button, such as a row's delete. */
.icon { padding: 6px 8px; border: none; background: none; color: var(--muted); }

.icon:hover { background: var(--tint); }

.icon.good { color: var(--good); }

.icon.danger { color: var(--danger); }

.icon.danger:hover { background: var(--danger-tint); color: var(--danger); }

/* Layout */

.bar { position: sticky; top: 0; z-index: 10; background: var(--card); box-shadow: var(--shadow); }

.bar > div { display: flex; align-items: center; gap: 8px; max-width: 80rem; margin: 0 auto; padding: 12px 16px; }

.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; font-size: 1.1rem; }

.brand img { width: 24px; height: 24px; }

.bar nav { display: flex; gap: 2px; }

.bar nav a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; color: #3d4852; font-size: 0.875rem; font-weight: 700; }

.bar nav a:hover { background: var(--tint); color: var(--primary); }

/* On a phone the brand and the links keep their icons and give up their words. */
@media (max-width: 900px) {
    .bar nav span, .brand span { display: none; }

    .bar nav a { font-size: 1.15rem; }
}

.page { max-width: 80rem; margin: 0 auto; padding: 24px 16px 48px; }

.page.narrow { max-width: 30rem; }

.page.narrow h1 { text-align: center; }

.row { display: flex; align-items: center; gap: 8px; }

.row.wrap { flex-wrap: wrap; }

.spacer { flex: 1; }

.stack > * + * { margin-top: 1rem; }

.columns { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.muted { color: var(--muted); }

.small { font-size: 0.875rem; }

.center { text-align: center; }

/* Card: a titled box. <section class="card"><header>…</header><div>…</div></section> */

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--tint); border-bottom: 1px solid var(--line); }

.card > div { padding: 20px; }

.card + .card { margin-top: 24px; }

.alert { padding: 12px 16px; border: 1px solid; border-radius: var(--radius); margin-bottom: 1rem; }

.alert.info { background: var(--primary-tint); border-color: #bfdbfe; color: #1e40af; }

.alert.good { background: var(--good-tint); border-color: #bbf7d0; color: #166534; }

.alert.warn { background: var(--warn-tint); border-color: #fde68a; color: #92400e; }

.alert.danger { background: var(--danger-tint); border-color: #fecaca; color: #991b1b; }

.badge { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; background: #eef0f3; color: #3d4852; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }

.badge.blue { background: #dbeafe; color: #1e40af; }

.badge.amber { background: #fef3c7; color: #92400e; }

.badge.red { background: #fee2e2; color: #991b1b; }

.badge.green { background: #dcfce7; color: #166534; }

details > summary { cursor: pointer; color: var(--primary); font-weight: 700; }

details[open] > summary { margin-bottom: 12px; }

/* Shown while an htmx request from the element named by hx-indicator is in flight. */
.htmx-indicator { font-weight: 400; }

/* An app's conversation on the home page, phone first: the person's words on the right, the app's on the left, cards that scroll sideways, and the box to talk in fixed at the bottom. Room is left below everything for that box, and for a phone's home indicator. */

.talk { max-width: 46rem; margin: 0 auto; padding: 16px 16px calc(6rem + env(safe-area-inset-bottom)); }

.talk .models { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.talk .models select { width: auto; padding: 4px 8px; font-size: 0.8rem; }

.greeting { margin: 8px 0 20px; color: var(--muted); }

/* What the stream adds to is kept above the box when it scrolls into view. */
.turn, .turn > * { scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

.turn { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }

.said, .reply { max-width: 88%; padding: 8px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

.said { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--primary); color: #fff; }

.reply { border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; background: var(--card); }

.turn > .note { color: var(--muted); font-size: 0.875rem; }

.stats { color: var(--muted); font: 0.75rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* What was heard and recorded, and any question about which item was meant. */
.heard { align-self: stretch; padding: 10px 14px; border-left: 3px solid var(--good); border-radius: var(--radius); background: var(--good-tint); font-size: 0.9rem; }

.heard ul { margin: 0; padding-left: 1.1rem; }

.heard ul:empty { display: none; }

.question { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

/* An app's cards, drawn from what each declares it shows (v2 §4.8). They run off the edge of a phone's screen, so a swipe shows the next. */
.cards { display: flex; gap: 12px; align-self: stretch; margin: 0 -16px; padding: 2px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }

.cards > article { display: flex; flex: 0 0 min(85%, 19rem); flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); scroll-snap-align: start; }

.cards > article > p { font-size: 0.9rem; }

.cards .label { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.cards .list { font-size: 0.875rem; }

.cards .list.warn .label { color: var(--warn); }

.cards > article > button { margin-top: auto; }

.made { width: min(100%, 19rem); }

/* Three dots that pulse in turn while the app answers. */
.answering { display: flex; gap: 5px; margin: -8px 0 0 4px; }

.answering span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s infinite ease-in-out; }

.answering span:nth-child(2) { animation-delay: 0.2s; }

.answering span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.composer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -1px 3px rgba(31, 41, 51, 0.12); }

.composer > div { display: flex; align-items: center; gap: 8px; max-width: 46rem; margin: 0 auto; }

.composer fieldset { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: none; }

.composer input { flex: 1; min-width: 0; border-radius: 20px; padding: 10px 16px; }

.composer .primary { padding: 10px 14px; border-radius: 20px; }

/* Voice (D2D #205 step 5): a big mic in the send button's place while the box is empty, red and pulsing while it listens, and the speaker's switch, blue while it is on. */
.composer .mic { width: 3rem; height: 3rem; padding: 0; border-radius: 50%; font-size: 1.3rem; }

.composer.hears:not(.typed) [type=submit], .composer.hears.typed:not(.listening) .mic { display: none; }

.composer.listening .mic { border-color: var(--danger); background: var(--danger); animation: listening 1.2s infinite; }

@keyframes listening { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }

.speaker[aria-pressed=true] { color: var(--primary); }

/* Entity: a card of something a job made, such as a meal or a recipe, in the grid of a page an app lists and in the conversation that made it. */

.entities { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

.entity { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; }

.entity:hover { box-shadow: var(--shadow-lifted); transform: translateY(-3px); }

.entity .media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--tint); }

.entity .media img, .entity .media video { width: 100%; height: 100%; object-fit: cover; }

.entity .media .badge { position: absolute; top: 8px; right: 8px; padding: 4px 10px; }

.entity .failed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 16px; background: var(--danger-tint); color: #991b1b; text-align: center; }

.entity .about { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 12px; }

.entity h3 { flex: 1; color: var(--text); }

@keyframes spin { to { transform: rotate(360deg); } }

.spin { display: inline-block; animation: spin 1.4s linear infinite; }

/* Welcome: the page for someone who is not signed in. */

.welcome { max-width: 62rem; }

.welcome > section { margin-bottom: 5rem; }

.welcome h1 { font-size: 2.9rem; margin-bottom: 1rem; }

.welcome h2 { font-size: 1.85rem; margin-bottom: 1.25rem; }

.welcome h3 { font-size: 1.2rem; margin-bottom: 0.75rem; }

.welcome p { font-size: 1.1rem; color: #3d4852; }

.welcome .lead { font-size: 1.45rem; color: var(--muted); margin-bottom: 2.5rem; }

.panel { padding: 2.5rem; border-radius: var(--radius); background: var(--tint); }

.panel.warm { background: linear-gradient(90deg, #fff7ed, #fefce8); }

.panel.fresh { background: linear-gradient(90deg, #f0fdf4, #eff6ff); }

.quote { font-style: italic; }

.story { display: grid; gap: 4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.problems { margin: 0; padding-left: 1.25rem; }

.problems li { margin-bottom: 1rem; }

.problems li::marker { color: var(--danger); }

.features { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); max-width: 48rem; margin: 3rem auto 0; }

.features img { width: 14rem; height: 8rem; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto 1.5rem; }

.picture { border-radius: var(--radius); box-shadow: var(--shadow-lifted); margin: 0 auto; }

.signup { max-width: 28rem; margin: 0 auto; }

.signup form { text-align: left; margin-top: 1.5rem; }

.ticks { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: 0.875rem; color: var(--muted); }

.ticks i { color: var(--good); }

/* Admin */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 12px; margin-bottom: 24px; }

.tile { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.tile .label { font-size: 0.8rem; color: var(--muted); }

.tile .value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.tile.alarm { border-color: var(--danger); }

.tile.alarm .value { color: var(--danger); }

.tableWrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font: 0.875rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

th { color: var(--muted); font-weight: 600; white-space: nowrap; }

td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; }

td .error { max-width: 36rem; color: var(--danger); overflow-wrap: anywhere; }

td form { display: inline; }

@media print {
    .bar { display: none; }
}