/* Conta do Bolo, app: camada de layout e de compatibilidade sobre tokens.css e componentes.css (design v2, G1.5).
   Ordem de carga: tokens.css, componentes.css, app.css. Tokens e componentes vêm de criativos/app/. */
body { background: radial-gradient(120% 28% at 100% 0, rgba(239, 179, 94, .2), transparent 60%), var(--cb-creme); min-height: 100vh; }
main:focus, h1:focus { outline: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Estrutura: barra do topo, conteúdo, barra de abas ou barra de ações fixas */
.appbar { padding-inline: max(var(--sp-3), calc((100% - 560px) / 2 + var(--sp-3))); }
.appbar .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view { display: block; max-width: 560px; margin: 0 auto; padding: var(--sp-2) var(--page-x) var(--sp-12); }
#view.has-tabbar { padding-bottom: 104px; }
#view.has-dock { padding-bottom: 120px; }
#view.has-tabbar.has-dock { padding-bottom: 188px; }
#view > section > * + *, #view form > * + * { margin-top: var(--sp-4); }
#view > section > h2, #view > section > h3, #view form > h2 { margin-top: var(--sp-8); }
#view > section > h1 + p, #view > section > .kicker + h1 { margin-top: var(--sp-2); }
.dock.above-tabbar { bottom: 72px; padding-bottom: var(--sp-3); }
.dock .btn { width: auto; }
.dock .btn.primary { flex: 1; }
.dock .btn:not(.primary) { flex: 0 0 auto; }
.dock.even .btn { flex: 1; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.actions .btn { margin: 0; }

/* Botões que o sistema do diretor de arte não tinha */
.btn.danger { background: transparent; color: var(--cb-erro); box-shadow: inset 0 0 0 1.5px var(--cb-erro); }
.btn.locked { background: transparent; color: var(--cb-texto-2); box-shadow: inset 0 0 0 1.5px var(--cb-borda-campo); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.brandmark img { object-fit: cover; }

/* Campos: o helper field() monta rótulo + .control + dica + erro */
.field label, .field .label { font-size: var(--fs-md); }
.control select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--sp-2); }
.control:has(select)::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--cb-texto-2); border-bottom: 2px solid var(--cb-texto-2); transform: translateY(-3px) rotate(45deg); pointer-events: none; }
.control:has(input[aria-invalid=true]), .control:has(select[aria-invalid=true]) { border-color: var(--cb-erro); box-shadow: 0 0 0 4px #F7DADA; }
.control input::placeholder { color: var(--cb-texto-3); font-weight: 400; }
.control input[type=date] { font-size: var(--fs-md); }
.err, .err-text { color: var(--cb-erro); font-weight: 700; font-size: var(--fs-sm); margin-top: 6px; line-height: 1.35; }
.err:empty { display: none; }
.status { color: var(--cb-texto-2); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.subtotal, .line-cost { font-weight: 800; }
.line-cost { color: var(--cb-terracota); font-size: var(--fs-sm); }
.empty { color: var(--cb-texto-2); padding: var(--sp-3) 0; }
.support { font-size: var(--fs-sm); color: var(--cb-texto-2); }

/* Avisos e selos */
.notice { display: block; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--cb-caramelo-100); box-shadow: inset 0 0 0 1px #E6C48A; color: var(--cb-texto); font-size: var(--fs-sm); line-height: 1.45; }
.notice a { font-weight: 700; }
.example-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; background: var(--cb-caramelo-100); border: 1px solid #E6C48A; color: var(--cb-texto); }
details.help { border-radius: var(--r-lg); border: 1px solid var(--cb-linha); background: var(--cb-surface); padding: 0 var(--sp-5) var(--sp-1); }
details.help > p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--cb-texto-2); }
details.help summary, .details summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: 700; cursor: pointer; list-style: none; }
details.help summary::-webkit-details-marker { display: none; }
details.help summary::after, .details summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--cb-texto-2); border-bottom: 2px solid var(--cb-texto-2); transform: rotate(-45deg); transition: transform var(--t-base) var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
.details > :not(summary) { margin-inline: var(--sp-5); }
.details > * + * { margin-top: var(--sp-3); }
.details > :last-child { margin-bottom: var(--sp-5); }
.details summary .lead { display: flex; align-items: center; gap: var(--sp-3); }
.details summary .lead .ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--cb-terracota-100); color: var(--cb-terracota); }
.details summary .lead small { display: block; font-weight: 400; color: var(--cb-texto-3); font-size: var(--fs-sm); line-height: 1.3; }

/* Cartões, listas e fieldsets */
fieldset { min-width: 0; margin: 0; }
fieldset.card { padding: var(--sp-5); border: 1px solid var(--cb-linha); }
fieldset.card legend { font-weight: 800; padding: 0 var(--sp-2); margin-left: calc(var(--sp-2) * -1); font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: var(--fs-lg); }
fieldset.card > * + * { margin-top: var(--sp-3); }
ul.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
ul.cards > li.card > * + * { margin-top: var(--sp-3); }
ul.cards h2, ul.cards h3 { font-size: var(--fs-lg); }
.card .hint { margin-top: var(--sp-1); }

/* Controle segmentado feito de radios (a pessoa toca no rótulo; o radio real fica por cima, invisível) */
.seg label { position: relative; display: grid; place-items: center; min-height: 48px; border-radius: 12px; font: 700 var(--fs-sm)/1.15 var(--font-text); color: var(--cb-texto-2); cursor: pointer; text-align: center; padding: 0 var(--sp-2); transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.seg label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--cb-surface); color: var(--cb-texto); box-shadow: var(--sh-1), 0 0 0 1px var(--cb-linha); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--cb-foco); outline-offset: 2px; }

/* Linha marcável (o checkbox real fica escondido por cima do rótulo) */
.check { position: relative; cursor: pointer; }
.check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check:has(input:checked) { border-color: var(--cb-terracota); background: var(--cb-terracota-100); }
.check:has(input:checked) .box { background: var(--cb-terracota); border-color: var(--cb-terracota); color: var(--cb-creme); }
.check:has(input:focus-visible) { outline: 3px solid var(--cb-foco); outline-offset: 2px; }
.check:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.check .grow { flex: 1; min-width: 0; }
.check .p { white-space: nowrap; }

/* Rótulo + radio (temas da tabela) */
.radio { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; font-weight: 700; cursor: pointer; }
.radio input { width: 28px; height: 28px; flex: none; margin: 0; accent-color: var(--cb-terracota); }

/* Ingredientes recolhidos em linha (passo 2) */
.ing-list { padding: 0; overflow: hidden; }
.ing-list .recipe-row { width: 100%; min-height: 60px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ing-list .recipe-row + .recipe-row { border-top: 1px solid var(--cb-linha); }
.ing-list .dot { width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; font-family: var(--font-text); }
.ing-list .price { font-size: var(--fs-md); }

/* Início */
.recipe-row { cursor: pointer; }
.see-all { font-weight: 700; font-size: var(--fs-sm); }

/* Resultado */
.compare-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare-box { padding: 14px; border-radius: var(--r-md); background: var(--cb-massa-50); min-width: 0; }
.compare-box.win { background: var(--cb-ganho-100); color: var(--cb-ganho); }
.compare-box .label { display: block; margin: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.compare-box:not(.win) .label { color: var(--cb-texto-3); font-weight: 500; }
.compare-box .num { display: block; margin-top: 2px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.015em; line-height: 1.15; }
.compare-box .cap { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.compare-box:not(.win) .cap { color: var(--cb-texto-3); }
.compare-box.win .cap { font-weight: 700; }
.compare-sentence { font-weight: 700; display: flex; gap: var(--sp-2); align-items: flex-start; }
.compare-sentence .win-text { color: var(--cb-ganho); }
.compare-sentence .i { flex: none; margin-top: 1px; }
.compare-sentence:empty { display: none; }
.error-card { padding: var(--sp-5); border-radius: var(--r-xl); background: var(--cb-surface); box-shadow: var(--sh-2); border: 1px solid var(--cb-linha); }
.error-card h2 + p { margin-top: var(--sp-2); }

/* Tabela: a prévia fica sobre a "mesa" de massa */
.previews { display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-xl); background: var(--cb-massa); box-shadow: inset 0 0 0 1px var(--cb-linha); }
.previews:empty { display: none; }
canvas.preview { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 30px -12px rgba(42, 29, 21, .5); background: #fff; }
.table-info { color: var(--cb-texto-2); font-size: var(--fs-sm); font-weight: 700; }

pre.copytext { white-space: pre-wrap; background: var(--cb-surface); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--cb-linha); font-family: var(--font-text); }
.message-text { color: var(--cb-texto-2); }
.thanks-code { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: var(--fs-lg); }
.dock { margin-top: 0 !important; }
ul.cards > li.date-row { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
ul.cards > li.date-row > * + * { margin-top: 0 !important; }
#view[data-page] > * + * { margin-top: var(--sp-4); }
.dock { pointer-events: none; }
.dock .btn { pointer-events: auto; }
/* focus and scrollIntoView keep fields clear of the fixed bars */
html { scroll-padding-top: 80px; scroll-padding-bottom: 200px; }
.cost-line { color: var(--cb-texto-2); font-size: var(--fs-sm); }
.ing-list .recipe-row { gap: var(--sp-2); padding: var(--sp-3); }
.ing-list .recipe-row .name { flex: 1; min-width: 0; }
.ing-list .recipe-row .price { margin-left: 0; }
.ing-list .example-tag { font-size: var(--fs-xs); padding: 2px 8px; }
.compare-sentence { display: block; }
.compare-sentence .i { display: inline-block; vertical-align: -5px; margin-right: var(--sp-2); }

/* Orçamento de encomenda (core): o cartão escuro do Resultado com o total do pedido, a diferença em número grande verde */
.quote-qty { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.quote-qty .field { margin: 0; }
.result-card .quote-total { font-size: var(--fs-hero); letter-spacing: -0.03em; }
.quote-message-box .actions .btn { min-width: 0; padding-inline: var(--sp-3); }
.quote-lines { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px dashed rgba(185, 228, 164, .4); display: grid; gap: var(--sp-1); }
.quote-lines .row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: #E8D9C3; }
.quote-lines dt { min-width: 0; overflow-wrap: anywhere; }
.quote-lines dd { margin: 0; color: var(--cb-creme); font-weight: 700; white-space: nowrap; }
.quote-compare > * + * { margin-top: var(--sp-3); }
.quote-compare h2 { font-size: var(--fs-lg); }
.quote-diff { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--cb-ganho-100); color: var(--cb-ganho); animation: rise var(--t-slow) var(--ease) both; }
.quote-diff .label { display: block; font-size: var(--fs-sm); font-weight: 700; }
.quote-diff .num { display: block; margin-top: 2px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: var(--fs-hero); letter-spacing: -0.03em; line-height: 1.05; }
.quote-diff .cap { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); }
.quote-message { white-space: pre-line; padding: var(--sp-4); border-radius: var(--r-md); background: var(--cb-surface); border: 1px solid var(--cb-linha); overflow-wrap: anywhere; }
.quote-message:empty { display: none; }
.quote-message-box > * + *, .quote-identity > * + * { margin-top: var(--sp-3); }