/* ── Tokens ──────────────────────────────────────────────────────────────────────
   Lifted from authent's View/Styles/App/01-tokens.css, trimmed to what this page
   actually uses. Colours are the same ink/blue ramps, so anything copied back and
   forth between the two projects lands on the right shade without translation. */
:root {
    --siz-min: 12px;
    --siz-btn: 13px;
    --siz-0: 14px;
    --siz-1: 16px;
    --siz-2: 20px;

    --btn-hgt: 42px;

    --rad-1: 6px;
    --rad-4: 20px;

    --radius-sm: 4px;
    --radius-md: 8px;

    --fnt-std: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-hdg: 'Museo', -apple-system, Arial, sans-serif;

    --ink-0: hsl(219, 30%, 98%);
    --ink-1: hsl(219, 30%, 95%);
    --ink-2: hsl(219, 30%, 90%);
    --ink-3: hsl(219, 30%, 80%);
    --ink-4: hsl(219, 30%, 60%);
    --ink-5: hsl(219, 30%, 50%);
    --ink-6: hsl(219, 30%, 32%);
    --ink-7: hsl(219, 30%, 24%);
    --ink-8: hsl(219, 30%, 20%);
    --ink-9: hsl(219, 30%, 16%);

    --blu-0: hsla(212, 80%, 45%, .25);
    --blu-1: hsl(212, 80%, 45%);
    --blu-2: hsl(212, 80%, 40%);

    /* The page default, and it MUST be a light value. authent ships #111827 here
       and gets away with it because every text node in that app carries its own
       colour class; this project does not, so a dark default meant any element
       nobody had styled — a bare <p>, an <input>, anything Claude sent back —
       rendered near-black on the near-black card and read as "broken layout". */
    --color-fg:       var(--ink-2);
    --color-fg-muted: var(--ink-3);
    --color-accent:   #2563eb;
    --color-danger:   #dc2626;

    /* Every themeable accent — button fill, focus ring, checkbox tick — resolves
       through these three, so one edit here re-themes the whole page. */
    --accent:        var(--blu-1);
    --accent-strong: var(--blu-2);
    --accent-soft:   var(--blu-0);

    --line-height-base:  1.5;
    --line-height-tight: 1.2;
}


/* ── Reset ───────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}


/* ── Base ────────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--fnt-std);
    font-size:   var(--siz-1);
    color:       var(--color-fg);
    background:  var(--ink-7);
    line-height: var(--line-height-tight);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fnt-hdg);
    font-size: var(--siz-2);
    font-weight: 550;
    line-height: 1;
}

p {
    font-size: var(--siz-1);
    line-height: 1.4;
    color: var(--ink-1);
}

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

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}


/* ── Card ────────────────────────────────────────────────────────────────────── */
.card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    width: 100%;
    padding: 1rem 2rem 2rem 2rem;
    outline: solid 2px var(--ink-6);
    border-radius: var(--rad-4);
    background-color: var(--ink-8);
    overflow: hidden;
}

@media screen and (max-width: 767px) {

    .card {
        max-width: 100%;
    }
}

.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--btn-hgt);
    padding-top: 1rem;
    font-size: var(--siz-2);
    font-weight: 550;
    color: var(--ink-1);
}


/* ── Forms ───────────────────────────────────────────────────────────────────── */
input,
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: var(--siz-1);
    color: var(--color-fg);
    background: var(--ink-7);
    border: none;
    border-radius: var(--radius-md);
    transition: border-color .125s ease, box-shadow .125s ease;
}

.fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.field__label {
    font-size: var(--siz-min);
    color: var(--ink-3);
}

.field__hint {
    font-size: var(--siz-0);
    line-height: 1.4;
    color: var(--ink-3);
}

.field__input {
    min-height: var(--btn-hgt);
    outline: solid 1px transparent;
    border-radius: var(--rad-1);
    background-color: var(--ink-7);
    font-family: var(--fnt-std);
    font-size: var(--siz-0);
    font-weight: 550;
    color: var(--ink-1);
}

.field__textarea {
    min-height: calc(3rem * 2);
    border-radius: var(--rad-1);
    background-color: var(--ink-7);
    font-size: var(--siz-0);
    line-height: 1.5;
    color: var(--ink-1);
    resize: none;
}

.field__input:focus,
.field__textarea:focus {
    outline: solid 2px var(--accent);
}

.field__input::placeholder,
.field__textarea::placeholder {
    color: var(--color-fg-muted);
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option {
    display: inline-flex;
    gap: 0.5rem;
}

.option label {
    padding-top: 2px;
    font-size: var(--siz-0);
    font-weight: 550;
    color: var(--ink-2);
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ink-7);
    outline: 1px solid transparent;
    cursor: pointer;
    transition: outline-color .125s ease, background .125s ease;
}

input[type="checkbox"] {
    border-radius: var(--radius-sm);
}

input[type="radio"]:hover,
input[type="checkbox"]:hover {
    background: var(--ink-6);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background: var(--accent);
    outline-color: var(--accent);
}

input[type="checkbox"]:not(:disabled):checked::after {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--ink-1);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3l2 2 4-4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3l2 2 4-4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-hgt);
    min-width: fit-content;
    padding: 0 .75rem;
    outline: solid 2px var(--blu-2);
    outline-offset: -2px;
    border: none;
    border-radius: var(--rad-1);
    background: linear-gradient(hsla(212, 80%, 45%, .50), hsla(212, 80%, 45%, .25), hsla(212, 80%, 45%, .25));
    font-family: var(--fnt-std);
    font-size: var(--siz-btn);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .125s ease, outline .125s ease;
}

.btn-1:not(:disabled):hover {
    background-color: var(--blu-2);
}

.btn-1:disabled {
    opacity: .5;
    cursor: not-allowed;
}


/* ── Page ────────────────────────────────────────────────────────────────────── */
/* The page shell, same shape as authent's .auth-main: the named class owns the
   full-height tinted field, the utilities on the element own the centring. */
.dinner-main {
    min-height: 100vh;
    background-color: var(--ink-7);
}

/* ── Result prose ────────────────────────────────────────────────────────────────
   Claude's answer on analyse.php, and the only block on either page whose markup
   this project did not write. Element selectors rather than classes, because the
   model returns bare tags — it is given an allowlist in the prompt and held to it
   by safeHtml(), so every tag styled here is one of the tags it may send. */
.result-prose {
    font-size: var(--siz-0);
    line-height: 1.6;
    color: var(--ink-2);
}

/* Rhythm as a FLOOR, not per-tag. The earlier version only spaced <p>, so the
   moment the model handed back anything else — a bare text run, a tag this file
   never anticipated — the whole answer collapsed into a wall with no margins.
   Every direct child now gets the paragraph gap; the rules below raise it where
   a heading or a rule needs more room. */
.result-prose > * {
    margin-bottom: .75rem;
}

/* Same reason: a <br> the model slipped in is made to break like a paragraph
   rather than a bare newline, so a section packed into a single <p> still reads
   as separate lines even before safeHtml() splits it. */
.result-prose br {
    display: block;
    content: "";
    margin-bottom: .6rem;
}

.result-prose h2 {
    margin: 2rem 0 .5rem;
    font-size: var(--siz-2);
    line-height: 1.2;
    color: var(--ink-1);
}

.result-prose h3 {
    margin: 1.5rem 0 .35rem;
    font-size: var(--siz-1);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-1);
}

/* The first heading opens the block — the card's own 2rem gap already
   separates it from the header above. */
.result-prose > :first-child {
    margin-top: 0;
}

.result-prose > :last-child {
    margin-bottom: 0;
}

.result-prose p {
    margin: 0 0 .75rem;
    font-size: var(--siz-0);
    line-height: 1.6;
}

.result-prose strong {
    font-weight: 600;
    color: var(--ink-1);
}

.result-prose ul,
.result-prose ol {
    margin: 0 0 .75rem 1.25rem;
}

.result-prose li {
    margin-bottom: .35rem;
    padding-inline-start: .25rem;
}

.result-prose hr {
    height: 2px;
    margin: 1.5rem 0;
    border: 0;
    background-color: var(--ink-7);
}

/* The failure paths print raw API JSON, escaped, rather than an answer. */
.result-prose pre {
    padding: 1rem;
    border-radius: var(--rad-1);
    background-color: var(--ink-9);
    font-size: var(--siz-min);
    line-height: 1.5;
    color: var(--ink-2);
    white-space: pre-wrap;
    word-break: break-word;
}


/* ── Utilities ───────────────────────────────────────────────────────────────────
   Only the handful of authent's generated utilities this page uses, in authent's
   own load order: components first, utilities last, so a utility on an element
   always beats the component class it sits next to (.field__textarea wid(max)). */
.row\(cc\) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.col\(str\) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.col\(lt\) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.gap\(0\.5\) {
    gap: .5rem;
}

.gap\(1\.5\) {
    gap: 1.5rem;
}

.pad\(1\.5\) {
    padding: 1.5rem;
}

.wid\(700\) {
    width: 100%;
    max-width: 700px;
}

.wid\(max\) {
    width: 100%;
}