/* Painel da Torre: tokens copiados do :root das pranchetas do painel (prototipo/canvas/project),
   sem a aurora e sem --term-*. Mobile-first (375 px); desktop a partir de 820 px. */
:root {
  /* fundo e superfícies */
  --bg: #ffffff; --bg-card: #fafafa; --card: #ffffff; --hover: rgba(0,0,0,.024); --inset: rgba(0,0,0,.016);
  --bd: #e8e8e8; --bd-card: #efefef; --bd-strong: #d0d0d0; --divider: #f0f0f0;
  /* texto (preto com alfa, como no Openship) */
  --t-heading: #000; --t-title: rgba(0,0,0,.92); --t-strong: rgba(0,0,0,.82);
  --t-body: rgba(0,0,0,.58); --t-secondary: rgba(0,0,0,.6); --t-label: rgba(0,0,0,.56);
  /* botões */
  --btn: rgba(0,0,0,.92); --btn-hover: rgba(0,0,0,.8); --btn-text: #fff;
  --ghost-bd: #e0e0e0; --ghost-bd-hover: #c8c8c8; --ghost-text: rgba(0,0,0,.66);
  /* semântica da Torre (fundo / borda / texto com contraste ≥ 4,5) */
  --contrato: #6c5ce7; --contrato-bg: rgba(108,92,231,.08); --contrato-bd: rgba(108,92,231,.18); --contrato-tx: #5240d4;
  --colisao: #e05874;  --colisao-bg: rgba(224,88,116,.08);  --colisao-bd: rgba(224,88,116,.18);  --colisao-tx: #b3304d;
  --duplicata: #f5b301; --duplicata-bg: rgba(253,224,71,.16); --duplicata-bd: rgba(245,179,1,.30); --duplicata-tx: #8a5a00;
  --pousou: #00b894;   --pousou-bg: rgba(0,184,148,.08);    --pousou-bd: rgba(0,184,148,.18);    --pousou-tx: #007a63;
  /* forma */
  --r-pill: 999px; --r-card: 16px; --r-input: 10px; --r-chip: 8px;
  --sh-card: 0 1px 3px rgba(0,0,0,.04);
  /* tipo */
  --f-sans: "Albert Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-sans); font-size: 15px; line-height: 1.45; background: var(--bg); color: var(--t-body); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--contrato); outline-offset: 2px; }
.mono { font-family: var(--f-mono); }
.forte { color: var(--t-title); font-weight: 500; }

/* botões e chips (alvos ≥ 44 px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 10px 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.btn { text-decoration: none; }
.btn-pri { background: var(--btn); color: var(--btn-text); }
.btn-pri:hover { background: var(--btn-hover); }
.btn-sec { background: transparent; border-color: var(--ghost-bd); color: var(--ghost-text); }
.btn-sec:hover { border-color: var(--ghost-bd-hover); }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: progress; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-chip); border: 1px solid var(--bd); background: var(--bg-card); color: var(--t-secondary); font-family: var(--f-mono); font-size: 11px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.chip.colisao { background: var(--colisao-bg); border-color: var(--colisao-bd); color: var(--colisao-tx); }
.chip.colisao::before { background: var(--colisao); opacity: 1; }
.chip.contrato { background: var(--contrato-bg); border-color: var(--contrato-bd); color: var(--contrato-tx); }
.chip.contrato::before { background: var(--contrato); opacity: 1; }
.chip.duplicata { background: var(--duplicata-bg); border-color: var(--duplicata-bd); color: var(--duplicata-tx); }
.chip.duplicata::before { background: var(--duplicata); opacity: 1; }
.chip.pousou { background: var(--pousou-bg); border-color: var(--pousou-bd); color: var(--pousou-tx); }
.chip.pousou::before { background: var(--pousou); opacity: 1; }
.chip.nd::before { display: none; }
.chip.id { text-transform: none; }

/* casca */
.top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--divider); background: var(--bg-card); }
.brand { color: var(--t-heading); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.repo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--t-strong); }
.status { margin: 0 16px; padding-top: 8px; font: 12px var(--f-mono); color: var(--t-strong); }
.status:empty { padding: 0; }
.rodape { padding: 8px 16px 32px; font-size: 11px; color: var(--t-label); }

.tabs { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--divider); }
.tabs [role=tab] { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-input); background: transparent; font-size: 14px; color: var(--t-secondary); cursor: pointer; transition: background .2s var(--ease); }
.tabs [role=tab]:hover { background: var(--hover); color: var(--t-title); }
.tabs [role=tab][aria-selected=true] { background: var(--card); border-color: var(--bd-card); box-shadow: var(--sh-card); color: var(--t-heading); font-weight: 500; }
.bd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: rgba(0,0,0,.06); font: 11px var(--f-mono); color: var(--t-strong); }

.vista { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ph h2 { font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--t-heading); }
.ph p { margin-top: 4px; font-size: 14px; }
.card { border: 1px solid var(--bd-card); border-radius: var(--r-card); background: var(--card); box-shadow: var(--sh-card); min-width: 0; }
.vazio { padding: 16px; font-size: 14px; }
.sub { font: 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-label); }

/* cartões de Mudança e Pergunta */
.mudanca, .pergunta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fonte { margin-left: auto; font-size: 12px; color: var(--t-label); }
.fonte.viva { color: var(--pousou-tx); }
.intencao { color: var(--t-strong); }
.caminho { font-size: 13px; color: var(--t-strong); }
.arquivos { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--divider); }
.arquivos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linhas { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r-input); background: var(--inset); font-size: 12px; color: var(--t-secondary); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pergunta dl { display: flex; flex-direction: column; gap: 4px; }
.pergunta dt { margin-top: 6px; }
.pergunta dd { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--t-strong); }
.sempre { display: inline-flex; flex-basis: 100%; align-items: center; gap: 8px; min-height: 44px; color: var(--t-strong); cursor: pointer; }
.sempre input { width: 20px; height: 20px; margin: 0; accent-color: var(--contrato); }

/* colisões em destaque */
.colisoes { padding: 14px 16px; background: var(--colisao-bg); border-color: var(--colisao-bd); }
.colisoes .sub { color: var(--colisao-tx); }
.colisoes ul { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.colisoes li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.colisoes .forte, .colisoes .caminho { color: var(--colisao-tx); }

/* Linguagens: lista no celular, tabela no desktop */
.tabela { display: block; width: 100%; border-collapse: collapse; }
.tabela thead { display: none; }
.tabela tbody, .tabela tr, .tabela td { display: block; }
.tabela tr { padding: 10px 16px; border-bottom: 1px solid var(--divider); }
.tabela tr:last-child { border-bottom: 0; }
.tabela td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; color: var(--t-strong); }
.tabela td::before { content: attr(data-rotulo); font: 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-label); }
.num { font-variant-numeric: tabular-nums; }

/* lista de repos (sem ?repo=) */
.repos { display: flex; flex-direction: column; gap: 8px; }
.repo-link { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; font-size: 14px; color: var(--t-title); text-decoration: none; transition: border-color .2s var(--ease); }
.repo-link:hover { border-color: var(--bd-strong); }

/* login */
.login { display: flex; justify-content: center; padding: 24px 16px; }
.login-card { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; padding: 20px; }
.login-card h1 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--t-heading); }
.login-card p { margin-bottom: 8px; font-size: 14px; }
.login-card label { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--t-title); }
.login-card input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--r-input); background: var(--card); font-size: 15px; color: var(--t-title); }
.login-card input:focus { border-color: var(--bd-strong); }
.login-card .btn { margin-top: 12px; }

@media (min-width: 820px) {
  .top, .tabs, .vista, .rodape { padding-left: max(28px, calc((100vw - 960px) / 2)); padding-right: max(28px, calc((100vw - 960px) / 2)); }
  .status { margin: 0 max(28px, calc((100vw - 960px) / 2)); }
  .tabs { display: flex; }
  .ph h2 { font-size: 28px; }
  .tabela { display: table; }
  .tabela thead { display: table-header-group; }
  .tabela tbody { display: table-row-group; }
  .tabela tr { display: table-row; }
  .tabela th, .tabela td { display: table-cell; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--divider); }
  .tabela th { font: 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-label); font-weight: 400; }
  .tabela td::before { content: none; }
  .tabela tr:last-child td { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}