/* Site do Lar3D em lar3d.kifactory.app. Mesma estrutura do site.css dos outros sites da KIF
     (captionui.kifactory.app), com a paleta do Lar3D: verde-petróleo #0B4D3C sobre off-white #F6F1E7.
     Sem fontes da web, sem scripts, sem recursos externos. */
  :root {
    --bg: #f6f1e7;
    --fg: #1c2420;
    --muted: #5b625e;
    --rule: #ddd5c5;
    --link: #0b4d3c;
    --accent: #0b4d3c;
    --code-bg: #ebe4d6;
    --note-bg: #efe8da;
    --spark: #b9761b;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101815;
      --fg: #e9e6df;
      --muted: #a3aca7;
      --rule: #2c3833;
      --link: #7cc7ae;
      --accent: #7cc7ae;
      --code-bg: #1c2622;
      --note-bg: #17211d;
      --spark: #e5a13c;
    }
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
    padding: 2.5rem 1.25rem 5rem;
    overflow-wrap: break-word;
  }

  main {
    max-width: 38rem;
    margin: 0 auto;
  }

  .lang {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0 0 2.5rem;
  }

  .lang a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
  }

  .lang a:hover { color: var(--link); border-bottom-color: var(--link); }

  h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
  }

  h2 {
    font-size: 1.1875rem;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--accent);
    margin: 2.75rem 0 0.85rem;
    padding-top: 0.35rem;
  }

  h3 {
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 650;
    margin: 1.75rem 0 0.4rem;
  }

  p { margin: 0 0 1.15rem; }

  ul, ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
  }

  li { margin-bottom: 0.6rem; }
  li > ul { margin: 0.5rem 0 0; }

  strong { font-weight: 650; }

  em { font-style: italic; }

  .dates {
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 2.25rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
  }

  .dates strong { color: var(--fg); }

  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--code-bg);
    padding: 0.1em 0.35em;
    border-radius: 4px;
  }

  /* Comandos: quebram linha em vez de rolar na horizontal (tela de 360 px). */
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    background: var(--code-bg);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin: 0 0 1.15rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  pre code { background: none; padding: 0; font-size: 1em; }

  a { color: var(--link); text-underline-offset: 2px; }

  a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }

  @media (max-width: 30rem) {
    body { padding: 2rem 1rem 4rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.125rem; }
  }

  .tag { color: var(--muted); font-size: 1.0625rem; margin: -0.75rem 0 2rem; }
  .links { list-style: none; padding: 0; margin: 0 0 1.15rem; }
  .links li { margin-bottom: 0.45rem; }
  footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
           color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
  footer a { color: var(--muted); }
  footer .nav { margin: 0 0 0.6rem; }

  /* Cabeçalho: símbolo + nome. Quebra linha em tela estreita em vez de rolar na horizontal. */
  .site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
               gap: 0.5rem 1rem; margin: 0 0 2.25rem; }
  .site-head .lang { margin: 0; }
  .brand { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--fg);
           text-decoration: none; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
           line-height: 1; }
  .brand .symbol { width: 2.25rem; height: 2.25rem; flex: none; }
  .brand .d3 { color: var(--accent); }

  /* Passos numerados */
  .steps { padding-left: 1.6rem; }
  .steps > li { padding-left: 0.2rem; }
  .steps > li::marker { color: var(--accent); font-weight: 700; }

  /* Seção em inglês da página de suporte */
  .lang-section { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--accent); }

  /* Política: o que o app usa (lista em vez de tabela, para caber em 360 px) */
  .uses li { margin-bottom: 0.9rem; }
  .uses .where { display: block; color: var(--muted); font-size: 0.9375rem; }

  /* Seção que NÃO está em vigor */
  .draft { margin-top: 3.5rem; padding: 0.25rem 1.1rem 0.4rem; border: 2px dashed var(--spark);
           border-radius: 10px; }
  .draft h2 { color: var(--fg); margin-top: 1.25rem; }
  .draft-label { display: inline-block; background: var(--spark); color: #1c1505; font-size: 0.75rem;
                 font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
                 padding: 0.15rem 0.6rem; border-radius: 999px; margin: 1rem 0 0; }
  .draft-notice { background: var(--note-bg); border-left: 4px solid var(--spark); border-radius: 4px;
                  padding: 0.75rem 0.9rem; }
  .draft ol { color: var(--muted); }
  .draft ol strong { color: var(--fg); }

  /* Marcador da política ainda sem valor decidido */
  mark.pending { background: #f2d27e; color: #1c1505; padding: 0 0.25em; border-radius: 3px; }

  /* Endosso no rodapé: o selo KIF + "por/by Kingdom Ideas Factory", como nos outros sites. */
  .endorse { margin: 0 0 0.6rem; }
  .endorse a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0;
               text-decoration: none; }
  .endorse a:hover span { text-decoration: underline; }
  .kif-seal { width: 1.1rem; height: 1.1rem; flex: none; }