:root {
    --bg:        #f3f4f2;
    --surface:   #ffffff;
    --sunken:    #eceee9;
    --ink:       #16191e;
    --muted:     #5c626b;
    --line:      #dbdcd7;
    --accent:    #86680d;
    --accent-bg: #f2ead2;
    --stop:      #8f3a1c;
    --stop-bg:   #f7e6df;

    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --measure: 66ch;
    --radius: 10px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:        #131519;
      --surface:   #1b1e23;
      --sunken:    #23272d;
      --ink:       #e9ebee;
      --muted:     #99a0a9;
      --line:      #2b2f36;
      --accent:    #d2a934;
      --accent-bg: #2c2512;
      --stop:      #e2856a;
      --stop-bg:   #33201a;
    }
  }
  /* O botão de tema do leitor tem de ganhar à preferência do sistema, nos dois sentidos. */
  :root[data-theme="dark"] {
    --bg:#131519; --surface:#1b1e23; --sunken:#23272d; --ink:#e9ebee;
    --muted:#99a0a9; --line:#2b2f36; --accent:#d2a934; --accent-bg:#2c2512;
    --stop:#e2856a; --stop-bg:#33201a;
  }
  :root[data-theme="light"] {
    --bg:#f3f4f2; --surface:#ffffff; --sunken:#eceee9; --ink:#16191e;
    --muted:#5c626b; --line:#dbdcd7; --accent:#86680d; --accent-bg:#f2ead2;
    --stop:#8f3a1c; --stop-bg:#f7e6df;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
  }

  .wrap {
    max-width: var(--measure);
    margin-inline: auto;
    padding: 0 20px 96px;
  }

  /* ---------------------------------------------------------------- topo */

  header { padding: 44px 0 26px; }

  .kicker {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px;
  }

  h1 {
    font-size: clamp(28px, 6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    text-wrap: balance;
  }

  .lede { margin: 0; color: var(--muted); font-size: 18px; }

  /* ------------------------------------------------------ código de acesso */

  .acesso {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
  }

  .acesso h2 {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
    font-weight: 600;
  }

  .codigo {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
  }

  .codigo code {
    flex: 1 1 240px;
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: .04em;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-wrap: anywhere;
    user-select: all;
  }

  .codigo button {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 12px 18px;
    min-height: 46px;
    cursor: pointer;
  }
  .codigo button:hover { filter: brightness(1.08); }
  .codigo button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .codigo button[data-copiado="sim"] { background: var(--surface); color: var(--accent); }

  .acesso p { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

  /* -------------------------------------------------------------- navegação */

  nav {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 30px -20px 0;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav ol {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
  }

  nav a {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
  }
  nav a:hover { color: var(--ink); border-color: var(--line); }
  nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* --------------------------------------------------------------- secções */

  section { padding-top: 46px; scroll-margin-top: 60px; }

  h2.titulo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 23px;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    text-wrap: balance;
  }

  /* O número é informação — as secções são mesmo uma sequência. */
  h2.titulo .n {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: .08em;
    flex: none;
  }

  h3 {
    font-size: 16px;
    margin: 30px 0 10px;
    letter-spacing: -.005em;
  }

  p { margin: 0 0 14px; }
  a { color: var(--accent); }

  .sub { color: var(--muted); margin-top: -2px; }

  ul, ol.passos { padding-left: 22px; margin: 0 0 16px; }
  li { margin-bottom: 7px; }

  code:not(.codigo code) {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--sunken);
    padding: 2px 6px;
    border-radius: 5px;
  }

  /* ------------------------------------------------------ as 5 fotografias */

  .fotos { display: grid; gap: 10px; margin: 18px 0 8px; }

  .foto {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
  }

  .foto .num {
    grid-row: 1 / 3;
    align-self: start;
    font-family: var(--mono);
    font-size: 20px;
    color: var(--accent);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }

  .foto b { font-size: 16px; }

  .foto .obrig {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
    white-space: nowrap;
  }

  .foto span { color: var(--muted); font-size: 15px; }

  /* ------------------------------------------------------------- destaques */

  .nota {
    border-left: 3px solid var(--accent);
    background: var(--accent-bg);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    margin: 18px 0;
  }
  .nota p:last-child { margin-bottom: 0; }

  .nota.parar { border-left-color: var(--stop); background: var(--stop-bg); }

  /* ------------------------------------------------------------- checklist */

  .check { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }

  .check li { margin: 0; }

  .check label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-size: 15.5px;
  }
  .check input { margin: 4px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
  .check input:checked + span { color: var(--muted); text-decoration: line-through; }

  /* --------------------------------------------------------------- avarias */

  .avarias { display: grid; gap: 10px; margin-top: 16px; }

  .avaria {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 13px 16px;
  }
  .avaria b { display: block; font-size: 15.5px; margin-bottom: 3px; }
  .avaria span { color: var(--muted); font-size: 15px; }

  /* ------------------------------------------------------------ rodapé/gestão */

  .gestao {
    margin-top: 56px;
    padding: 22px 20px;
    background: var(--sunken);
    border-radius: var(--radius);
    font-size: 15px;
  }
  .gestao h2 {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
    font-weight: 600;
  }
  .gestao ul { margin: 0; padding-left: 20px; color: var(--muted); }
  .gestao strong { color: var(--ink); }

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

  @media (min-width: 760px) {
    .fotos { grid-template-columns: 1fr 1fr; }
    .foto:first-child, .foto:nth-child(2) { grid-column: span 1; }
  }

/* --------------------------------------- servido dentro da própria aplicação */

.voltar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px 20px 0;
  font-family: var(--mono);
  font-size: 13px;
}
.voltar a { color: var(--muted); text-decoration: none; }
.voltar a:hover { color: var(--accent); }
.voltar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sem código impresso: esta página é servida sem autenticação. */
.acesso .sem-codigo { margin: 0; font-size: 15px; color: var(--muted); }