/* Diálogo da doutrina (M2-17). O index.html já liga este arquivo. Nenhum font-size abaixo de 11px (typography.test.mjs). */
/* Os três ★ lado a lado, para comparar de uma vez: em 844×390 (e 740×360) cabem sem rolar, por isso o cabeçalho leva o
   "Decidir depois" e os textos do cartão vêm com o rótulo na mesma linha. */
#doctrine-dialog{width:min(860px,calc(100% - 24px));padding:16px 18px 18px}
.doctrine-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
#doctrine-dialog h2{font:500 32px/1 var(--display);margin:0}
#doctrine-dialog .doctrine-lead{font-size:13px;line-height:1.4;margin:6px 0 0;max-width:75ch}
.doctrine-later{flex-shrink:0;min-height:44px;padding:5px 14px;border:1px solid #9bbec045;border-radius:10px;background:transparent;color:var(--text);font:600 14px var(--body);text-align:right}
.doctrine-later small{display:block;font:11px var(--body);color:var(--muted);margin-top:2px}
.doctrine-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.doctrine-card{display:flex;flex-direction:column;gap:6px;padding:11px 12px 12px;border:1px solid #9bbec02b;border-radius:13px;background:#ffffff04}
.doctrine-card h3{font:500 23px/1.05 var(--display);margin:0}
#doctrine-dialog .doctrine-card p{font-size:12px;line-height:1.4;margin:0;color:#b3c5c9}
.doctrine-card b{font:600 11px var(--mono);letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-right:6px}
/* Quebra: "13/55 países · falta Robótica autônoma" não cabe numa linha em 740×360. */
.doctrine-progress{color:var(--amber)}
/* Marcos da meta (rodada 7): os pagos em verde; a nota "+1 PE cada" apagada. */
.doctrine-marks span.done{color:var(--green)}
.doctrine-marks em{font-style:normal;color:var(--muted)}
/* Rodada 8: o marco de antes da Ruptura em âmbar (⏳); expirado, riscado. A linha do aviso repete em âmbar. */
/* Na escolha, o aviso vai na linha da meta (uma linha a mais por cartão rolava o diálogo em 844×390). */
.doctrine-marks span.early,.doctrine-card .doctrine-early{color:var(--amber)}
#doctrine-dialog[data-mode=offer] .doctrine-head{margin-bottom:8px}
#doctrine-dialog[data-mode=offer] .doctrine-card{gap:4px}
.doctrine-marks span.expired{color:var(--muted);text-decoration:line-through}
.doctrine-card small{font:11px/1.35 var(--body);color:var(--red)}
/* Mercados do Cerco (rodada 6): fechados por padrão, para os três cartões caberem sem rolar; abertos, duas colunas e o
   diálogo rola (pedido do jogador). Fechada, a lista sai do layout. */
.doctrine-markets:not([open]) ol{display:none}
.doctrine-markets summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 12px var(--body);color:var(--amber)}
.doctrine-markets ol{columns:2;column-gap:12px;margin:0 0 4px;padding-left:22px;font:11px/1.5 var(--body);color:#b3c5c9}
.doctrine-markets li span{font-variant-numeric:tabular-nums;color:var(--muted)}
.doctrine-markets li.hit,.doctrine-markets li.hit span{color:var(--green)}
/* Acompanhamento da meta depois da escolha: um cartão só, sem o botão de escolher; a lista em 4 colunas cabe sem rolar. */
#doctrine-dialog[data-mode=goal]{width:min(680px,calc(100% - 24px))}
#doctrine-dialog[data-mode=goal] .doctrine-markets ol{columns:4}
#doctrine-dialog[data-mode=goal] .doctrine-cards{grid-template-columns:1fr}
/* margin-top:auto alinha os botões no pé dos três cartões, mesmo com textos de alturas diferentes. */
.doctrine-card button{margin-top:auto;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border:1px solid #6b8d5b;border-radius:8px;background:#b9f77d15;color:var(--green);font:600 14px var(--body)}
.doctrine-card button span:last-child{font:500 12px var(--mono)}
/* Pílula do adiamento: logo abaixo do relógio (o topo da coluna da direita fica livre). Na esquerda, entre as Camadas
   (até y 226) e o CP (desde y 264 em 740×360), não cabem 44px. */
#doctrine-pill{position:fixed;z-index:5;right:max(12px,env(safe-area-inset-right));top:58px;min-height:44px;padding:0 16px;border:1px solid var(--amber);border-radius:22px;background:#2a2316e6;color:var(--amber);font:600 14px var(--body);box-shadow:0 6px 20px #0007;animation:pin-in .45s cubic-bezier(.16,1,.3,1) both}
#doctrine-pill[hidden]{display:none}
/* 740×360: tudo um pouco mais justo, e o diálogo ganha 16px de altura para os botões não saírem da tela. */
@media(max-height:370px){#doctrine-dialog{padding:12px 14px 14px;max-height:calc(100svh - 16px)}.doctrine-head{margin-bottom:8px}#doctrine-dialog h2{font-size:28px}#doctrine-dialog .doctrine-lead{margin-top:4px}.doctrine-card{gap:4px;padding:9px 10px 10px}.doctrine-card h3{font-size:21px}
 /* Rodada 8: o ⏳ na linha da meta; a entrelinha mais justa devolve os ~10px que ele toma. */
 #doctrine-dialog .doctrine-card p{line-height:1.3}}
@media(prefers-reduced-motion:reduce){#doctrine-pill{animation:none}}