@charset "utf-8";
/* Additions for the live portal on top of the prototype's design system (app.css):
   links styled as buttons, popup forms, field errors, small helpers. Poppins only, max weight 500, no italics. */

a.nav, a.tab, .crumb a, a.ditem, a.opt, a.stage, a.jstep, a.tile { text-decoration: none; }
a.tab { display: inline-flex; align-items: center; }
.crumb a { color: var(--ink); }
.crumb a:hover { color: var(--saffron-ink); }
a.link { text-decoration: none; display: inline; }
a.card.tile { display: block; color: inherit; }
.side .who form button { font-family: inherit; }

/* a popup's form wraps its header, body and footer without changing their layout */
.dlg-form { display: contents; }
.drawer > .dlg-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.form-err { background: var(--tint); color: var(--ink); border-radius: var(--r); padding: 12px 14px; font-size: 14px; border-left: 3px solid var(--saffron); }
.form-err[hidden] { display: none; }
.inp[aria-invalid="true"] { border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(238, 154, 3, .18); }
.fld .err-msg { font-size: 12.5px; font-weight: 400; color: var(--saffron-ink); }
.toast.err::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.req-mark { color: var(--saffron-ink); }
[hidden] { display: none !important; }

/* wizard steps inside a popup */
.wiz-step[hidden] { display: none !important; }
.steps .stp.on .dot { background: var(--saffron); color: var(--navy); }

/* pickable cards that wrap a radio input */
label.opt { position: relative; }
label.opt input[type="radio"], label.opt input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
label.opt:has(input:checked) { border: 1px solid var(--saffron); box-shadow: inset 0 0 0 1px var(--saffron); background-color: var(--wash); }
label.opt:has(input:focus-visible) { outline: 3px solid var(--saffron); outline-offset: 3px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters .inp { width: auto; }
.filters .inp.search { flex: 1 1 280px; }

.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .08em; padding: 14px 18px; border-radius: var(--r); background: var(--sand); color: var(--ink); text-align: center; user-select: all; }
.kv-grid { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 8px 16px; font-size: 14px; }
.kv-grid > :nth-child(odd) { color: var(--mute); }
.pre { white-space: pre-line; }
.danger-zone { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--sand); flex: none; }
.rcard .ph-img img.cover { width: 100%; height: 100%; object-fit: cover; }
.photo img.cover { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo:has(img.cover) { padding: 0; overflow: hidden; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.media-grid .mi { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.media-grid .mi img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); display: block; }
.media-grid .mi .cap { padding: 8px 10px; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-grid button.mi { cursor: pointer; padding: 0; font: inherit; text-align: left; }
.media-grid button.mi:hover, .media-grid button.mi.on { border-color: var(--saffron); box-shadow: inset 0 0 0 1px var(--saffron); }
.media-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.media-pick img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--sand); }

.editor img { max-width: 100%; height: auto; border-radius: 12px; }
.editor .recipe-embed, .post-body .recipe-embed { margin: 14px 0; }
.post-body { font-size: 17px; line-height: 1.7; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; }

.ing-row .inp { min-height: 38px; }
.sortable-handle { cursor: grab; }
.unsaved { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--saffron-ink); }
.unsaved::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--saffron); }

.invoice { border: 1px solid var(--line); border-radius: 12px; padding: 28px; background: #fff; color: #202E3B; }
.invoice .tbl th, .invoice .tbl td { color: #202E3B; border-color: #ECE5D8; }
.invoice .mute { color: #56616B; }

.search-group { margin-bottom: 20px; }
.search-group h2 { font-size: 16px; margin-bottom: 8px; }

@media print {
  .side, .no-print, #toast, #modal-root { display: none !important; }
  .main { padding: 0 !important; }
  .main::before { display: none; }
  body { background: #fff; }
  .card { border: 0; }
}

/* type-ahead list (recipe ingredients, plan builder recipe search) */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--menu); max-height: 320px; overflow: auto; }
.combo-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--tint); }
.combo-list li .muted { font-size: 12px; }
.tbl .inp.q { min-height: 36px; width: 96px; }
.tbl .inp.nt { min-height: 36px; min-width: 120px; }
.stepper button { cursor: pointer; }

/* dropdown menu (builder "More") */
.menu-wrap { position: relative; display: inline-block; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--menu); display: flex; flex-direction: column; }
.dropdown[hidden] { display: none; }
.dropdown a, .dropdown button { display: block; text-align: left; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.dropdown a:hover, .dropdown button:hover { background: var(--tint); }
.save-state { font-size: 13px; align-self: center; }
.save-state.dirty { color: var(--saffron-ink); }
.plan-day h3 { color: var(--ink); }

/* invoice sheet: always paper-white so it prints and reads the same in both themes */
.invoice { border: 1px solid #E6DED0; border-radius: 12px; padding: 24px; background: #fff; color: #202E3B; font-size: 14px; }
.invoice .inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.invoice .inv-brand { display: flex; gap: 12px; align-items: flex-start; }
.invoice .inv-brand img { width: 48px; height: 48px; object-fit: contain; }
.invoice .inv-name { letter-spacing: 3px; font-size: 18px; font-weight: 500; }
.invoice .inv-title { font-size: 18px; font-weight: 500; }
.invoice .inv-meta { text-align: right; }
.invoice .inv-small { font-size: 12px; color: #56616B; }
.invoice .inv-label { font-weight: 500; }
.invoice .inv-to { margin: 20px 0; }
.invoice .inv-tbl { width: 100%; border-collapse: collapse; }
.invoice .inv-tbl th { text-align: left; font-size: 12px; color: #56616B; font-weight: 500; border-bottom: 1px solid #E6DED0; padding: 8px 6px; }
.invoice .inv-tbl td { padding: 8px 6px; border-bottom: 1px solid #F1ECE3; }
.invoice .inv-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.invoice .inv-total td { font-weight: 500; border-bottom: 2px solid #EE9A03; }
.invoice a { color: #202E3B; }

/* blog editor and preview */
.editor.is-empty::before { content: attr(data-placeholder); color: var(--mute); pointer-events: none; }
.editor figure, .post-preview figure { margin: 16px 0; }
.editor img, .post-preview img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.editor blockquote, .post-preview blockquote { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--saffron); color: var(--ink); }
.editor a { color: var(--saffron-ink); }
.post-preview { max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--body); }
.post-preview h1 { font-family: var(--serif); font-size: 32px; font-weight: 300; line-height: 1.2; margin: 8px 0 18px; color: var(--ink); }
.post-preview h2 { font-size: 24px; font-weight: 400; color: var(--ink); } .post-preview h3 { font-size: 19px; font-weight: 400; color: var(--ink); }
.post-preview img.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 20px; }

/* ---------- messages from the client app ---------- */
.chat-wrap { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.chat-list { max-height: calc(100vh - 210px); overflow: auto; }
.chat-search { padding: 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.chat-search .inp { width: 100%; }
.chat-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--body); transition: background .2s var(--ease); }
.chat-item:hover { background: var(--wash); }
.chat-item.on { background: var(--tint); }
.chat-item .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item .nm { color: var(--ink); font-weight: 500; }
.chat-item .snip { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .count { background: var(--saffron); color: #fff; border-radius: 999px; font-size: 12px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }
.chat-pane { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 420px; }
.chat-head { padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.chat-thread { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.bubble { max-width: min(560px, 82%); padding: 10px 14px; border-radius: 16px; font-size: 14.5px; animation: bub .4s var(--ease) both; }
.bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
:root[data-theme="dark"] .bubble.me { background: #2A3B4C; }
.bubble.sys { align-self: center; background: var(--tint); color: var(--ink); font-size: 13px; }
.bubble img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin-bottom: 6px; }
.bubble audio { display: block; max-width: 260px; margin-bottom: 6px; }
.bubble .meta { font-size: 11.5px; opacity: .7; margin-top: 4px; }
.bubble.me a { color: #fff; }
@keyframes bub { from { opacity: 0; transform: translateY(8px); } }
.chat-form { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.chat-form textarea { flex: 1; min-height: 44px; resize: vertical; }
.file-btn { cursor: pointer; }
@media (max-width: 860px) { .chat-wrap { grid-template-columns: 1fr; } .chat-list { max-height: 300px; } .chat-pane { height: 70vh; } }