:root {
  --cream: #FBF7F0;
  --cream-deep: #F3EBDD;
  --ink: #26332C;
  --ink-soft: #5E6B63;
  --green: #1F4D3A;
  --green-deep: #163A2B;
  --terracotta: #C8553D;
  --terracotta-deep: #A8432E; /* AA text token: small text, and behind white text */
  --terracotta-deeper: #8C3726;
  --line: #E6DCCB;
  --stripe: 36px;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--cream); color: var(--ink); font-family: "Inter", system-ui, sans-serif; }
h1, h2, h3, .font-display { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; }

.awning-stripes {
  height: 22px;
  background: repeating-linear-gradient(90deg, var(--green) 0 var(--stripe), #fff var(--stripe) calc(var(--stripe) * 2));
}
.awning-scallop {
  height: calc(var(--stripe) / 2);
  background: repeating-linear-gradient(90deg, var(--green) 0 var(--stripe), #fff var(--stripe) calc(var(--stripe) * 2));
  -webkit-mask: radial-gradient(circle at calc(var(--stripe) / 2) 0, #000 calc(var(--stripe) / 2 - 0.5px), transparent calc(var(--stripe) / 2)) 0 0 / var(--stripe) 100% repeat-x;
  mask: radial-gradient(circle at calc(var(--stripe) / 2) 0, #000 calc(var(--stripe) / 2 - 0.5px), transparent calc(var(--stripe) / 2)) 0 0 / var(--stripe) 100% repeat-x;
  filter: drop-shadow(0 2px 0 var(--line));
}

.card { background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 600; text-align: center; transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-accent { background: var(--terracotta-deep); color: #fff; }
.btn-accent:hover { background: var(--terracotta-deeper); }
.btn-ghost { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
.btn-ghost:hover { background: var(--cream-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.field {
  width: 100%; min-height: 48px; padding: .65rem .9rem; border-radius: .9rem;
  border: 1.5px solid var(--line); background: #fff; font-size: 1rem;
}
.field:focus, .btn:focus-visible, .chip:focus-within { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .85rem;
  border: 1.5px solid var(--line); border-radius: 999px; font-size: .9rem; cursor: pointer; background: var(--cream);
}
.chip:has(input:checked) { border-color: var(--green); background: #E7F0EA; color: var(--green-deep); }
.chip input { accent-color: var(--green); width: 1.1rem; height: 1.1rem; }

.stepper button {
  width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: 1.25rem; line-height: 1;
}
.stepper button:hover { border-color: var(--green); }

.price { font-variant-numeric: tabular-nums; }
.step-dot { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; }
.step-dot.done { background: var(--green); border-color: var(--green); }
.step-dot.now { border-color: var(--terracotta); background: var(--terracotta); }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}

.dropzone { border: 2px dashed var(--terracotta); background: #fff; transition: background .15s; }
.dropzone:hover, .dropzone.dragging { background: var(--cream-deep); }
.dropzone:focus-within { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.loading-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(251, 247, 240, .92);
}
.loading-overlay.hidden { display: none; }
.copy-field { font-family: ui-monospace, monospace; font-size: .9rem; }

.review-grid { height: min(62vh, 560px); min-height: 340px; width: 100%; }
.review-grid .cell-flagged { background: #FBE9E3 !important; box-shadow: inset 3px 0 0 var(--terracotta); }
.review-grid .cell-flagged.cell-missing { background: #F6D2C8 !important; }
.review-grid .cell-error { background: #FEE2E2 !important; outline: 2px solid #DC2626; outline-offset: -2px; }
.review-grid .confirm-btn {
  min-height: 34px; padding: 0 .9rem; border-radius: 999px; background: var(--terracotta-deep); color: #fff;
  font-weight: 600; font-size: .85rem;
}
.review-grid .confirm-btn:hover { background: var(--terracotta-deeper); }
.review-grid .ok-mark { color: var(--green); font-weight: 600; font-size: .85rem; }

.order-card { padding: 1rem 1.1rem; }
.order-card.is-awaiting { opacity: .6; background: var(--cream-deep); }
.order-card.is-done { opacity: .75; }
.order-card.flash { animation: order-flash 2.4s ease-out; }
@keyframes order-flash {
  0% { box-shadow: 0 0 0 0 rgba(200, 85, 61, .8); background: #FFF1D6; transform: scale(1.02); }
  60% { box-shadow: 0 0 0 14px rgba(200, 85, 61, 0); }
  100% { background: #fff; transform: scale(1); }
}
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--cream-deep); border: 1px solid var(--line); }
.badge-ai { background: #E7F0EA; color: var(--green-deep); border-color: var(--green); }
.order-actions .btn { min-height: 44px; padding: .5rem 1rem; flex: 1; }
@media (prefers-reduced-motion: reduce) { .order-card.flash { animation: none; background: #FFF1D6; } }

.new-chat-btn { min-height: 40px; padding: .4rem 1rem; font-size: .9rem; }
.chat-log { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; min-height: 50vh; }
.chat-log > * { scroll-margin-bottom: 6rem; }
.prompt-chip { border-radius: 1rem; text-align: left; }
.prompt-chip[disabled] { opacity: .5; cursor: not-allowed; }
.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.bubble { max-width: 85%; padding: .65rem .95rem; border-radius: 1.1rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-user { background: var(--green); color: #fff; border-bottom-right-radius: .35rem; }
.bubble-agent { background: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: .35rem; }
.bubble-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.tool-chip { align-self: flex-start; max-width: 100%; border: 1.5px solid var(--line); border-radius: 1rem; background: #fff; font-size: .85rem; }
.tool-chip summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 40px; padding: .4rem .85rem; cursor: pointer; list-style: none; }
.tool-chip summary::-webkit-details-marker { display: none; }
.tool-chip summary:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 1rem; }
.tool-chip[open] summary { border-bottom: 1px solid var(--line); }
.tool-dot { flex: none; width: .6rem; height: .6rem; border-radius: 999px; background: var(--green); }
.tool-chip.is-pending .tool-dot { background: var(--terracotta); }
.tool-chip.is-error { border-color: #FECACA; }
.tool-chip.is-error .tool-dot { background: #DC2626; }
.tool-name { font-family: ui-monospace, monospace; font-weight: 600; color: var(--green-deep); }
.tool-summary { color: var(--ink-soft); overflow-wrap: anywhere; }
.tool-body { padding: .25rem .85rem .85rem; }
.tool-label { margin-top: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.tool-body pre { margin-top: .25rem; padding: .6rem .75rem; max-height: 18rem; overflow: auto; border-radius: .6rem; background: var(--cream); font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pay-card { padding: 1rem 1.1rem; border: 2px solid var(--terracotta); }
.composer { position: sticky; bottom: 0; display: flex; gap: .5rem; padding: .75rem; background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 1.25rem 1.25rem; }
.composer .btn { flex: none; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; background: var(--terracotta-deep); color: #fff; font-weight: 700;
}
.shop-card, .try-card { transition: border-color .15s, transform .15s; }
.try-card:hover, .shop-card:hover { border-color: var(--green); }
.try-card:focus-visible, .shop-card:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .try-card:hover, .shop-card:hover { transform: translateY(-2px); } }