/* The app's look for the public pages: the tokens of src/theme (colors, spacing, radius,
   shadows, the type scale) and its pieces (the hero with the brand row and the tilted
   receipt, the sheet, the segmented control, list rows, callouts). The fonts are served
   from here, not from Google Fonts, so opening the privacy policy doesn't hand the
   reader's IP to Google. */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/InstrumentSerif_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  --hero: #6b3936;
  --accent: #7e4642;
  --accent-soft: #f5eae8;
  --surface: #f6f4f0;
  --surface-raised: #fbf8f3;
  --surface-sunken: #efece6;
  --surface-inset: #ebe7e0;
  --surface-control: #ffffff;
  --ink: #17150f;
  --ink-secondary: #17150fb3;
  --ink-muted: #17150f8a;
  --ink-faint: #17150f59;
  --line: #17150f1f;
  --line-strong: #17150f26;
  --on-hero: #f6f4f0;
  --on-hero-muted: #f6f4f0b3;
  --on-hero-line: #f6f4f033;
  --warning: #c9973f;
  --warning-soft: #c9973f2e;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-sheet: 26px;
  --shadow-sm: 0 1px 3px rgba(23, 21, 15, 0.1);
  --shadow-md: 0 6px 18px rgba(42, 17, 15, 0.12);
  --shadow-lg: 0 10px 24px rgba(42, 17, 15, 0.33);
  --gutter: 22px;

  --display: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hero);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.coluna {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.icone {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Mono caps: "CONFERBASE", "EM POUCAS PALAVRAS", the section numbers. */
.rotulo {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Hero ------------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 338px;
  padding: 20px var(--gutter) 40px;
  color: var(--on-hero);
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  color: var(--on-hero);
  text-decoration: none;
}

.marca svg {
  width: 34px;
  height: 22px;
}

.marca .rotulo {
  color: var(--on-hero-muted);
}

.pitch {
  margin-top: 32px;
  max-width: calc(100% - 150px);
}

.pitch h1 {
  margin: 0 0 12px;
  font: 400 36px/1 var(--display);
  letter-spacing: -0.5px;
}

.pitch p {
  margin: 0;
  color: var(--on-hero-muted);
}

.pitch .rotulo {
  margin-top: 16px;
  color: var(--on-hero-muted);
}

/* The tilted receipt of the sign-in hero, here a summary of the page. Decorative. */
.recibo {
  position: absolute;
  top: 84px;
  right: max(16px, calc((100% - 720px) / 2));
  width: 136px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 16px;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: rotate(-5deg);
}

.recibo::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 6px;
  right: 6px;
  height: 9px;
  background: radial-gradient(circle at 4.5px 4.5px, var(--hero) 4.5px, transparent 5px) 0 0 / 14px 9px repeat-x;
}

.recibo-kicker,
.recibo-total-rotulo {
  font: 400 8px/11px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.recibo-kicker {
  color: var(--accent);
}

.recibo hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.recibo hr.forte {
  border-top-color: var(--line-strong);
}

.recibo-linha {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font: 400 10px/14px var(--sans);
  color: var(--ink-secondary);
}

.recibo-linha b {
  font: 400 10px/14px var(--mono);
  color: var(--ink);
  white-space: nowrap;
}

.recibo-total {
  font: 400 26px/1 var(--display);
  letter-spacing: -0.3px;
  color: var(--accent);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero {
    min-height: 372px;
    padding-bottom: 56px;
  }

  .pitch {
    max-width: calc(100% - 190px);
  }

  .pitch h1 {
    font-size: 48px;
  }

  .recibo {
    top: 72px;
    transform: rotate(-5deg) scale(1.15);
    transform-origin: top right;
  }
}

/* Too narrow for the pitch beside the receipt: drop the receipt, as the app does. */
@media (max-width: 359px) {
  .hero {
    min-height: 0;
  }

  .recibo {
    display: none;
  }

  .pitch {
    max-width: none;
  }
}

/* Sheet ------------------------------------------------------------------------------ */

.folha {
  flex: 1;
  padding: 24px var(--gutter) 40px;
  background: var(--surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}

/* The segmented control, as links between the three documents. */
.segmentos {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-inset);
  border-radius: var(--radius-lg);
}

.segmentos a {
  flex: 1;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font: 600 14px/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
}

.segmentos a[aria-current='page'] {
  background: var(--surface-control);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}

.segmentos .curto {
  display: none;
}

@media (max-width: 479px) {
  .segmentos .longo {
    display: none;
  }

  .segmentos .curto {
    display: inline;
  }
}

/* A card on the sheet. */
.cartao {
  margin: 20px 0;
  padding: 16px 16px 4px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.cartao > .rotulo {
  margin: 0 0 6px;
}

/* List rows: an icon in a soft square, the copy, a hairline under it. */
.linhas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linhas li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}

.linhas li:last-child {
  border-bottom: 0;
}

.caixa {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  color: var(--ink);
}

.caixa.acento {
  background: var(--accent-soft);
  color: var(--accent);
}

.linhas .texto {
  flex: 1;
  align-self: center;
}

.linhas .legenda {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
}

/* The table of contents, closed until asked for. */
.indice {
  margin: 20px 0;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.indice summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.indice summary::-webkit-details-marker {
  display: none;
}

.indice summary .rotulo {
  flex: 1;
  margin: 0;
}

.indice summary .icone {
  color: var(--ink-faint);
  transition: transform 0.2s;
}

.indice[open] summary .icone {
  transform: rotate(180deg);
}

.indice ol {
  list-style: none;
  margin: 0;
  padding: 0 16px 4px;
  counter-reset: secao;
}

.indice li {
  counter-increment: secao;
  border-top: 1px solid var(--line);
}

.indice li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.indice li a::before {
  content: counter(secao, decimal-leading-zero);
  width: 22px;
  font: 400 12px/1 var(--mono);
  color: var(--accent);
}

.indice li.anexo a::before {
  content: 'A';
}

.indice li a span {
  flex: 1;
}

.indice li a .icone {
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
}

/* Document --------------------------------------------------------------------------- */

.secao {
  margin-top: 44px;
  scroll-margin-top: 16px;
}

.secao > .rotulo {
  margin: 0 0 6px;
  color: var(--accent);
}

h2 {
  margin: 0 0 12px;
  font: 400 30px/32px var(--display);
  letter-spacing: -0.3px;
}

h3 {
  margin: 24px 0 6px;
  font: 600 16px/1.4 var(--sans);
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

strong,
b {
  font-weight: 600;
}

.secao ul,
.secao ol {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

.secao ul > li,
.secao ol > li {
  position: relative;
  padding-left: 20px;
}

.secao ul > li + li,
.secao ol > li + li {
  margin-top: 6px;
}

.secao ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.secao ul ul {
  margin-top: 6px;
}

.secao ul ul > li::before {
  background: transparent;
  border: 1.5px solid var(--accent);
}

.secao .linhas li {
  padding-left: 0;
  margin-top: 0;
}

.secao .linhas li::before {
  content: none;
}

/* Callout: neutral for a warning, accent for what matters most. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.5;
}

.callout.acento {
  background: var(--accent-soft);
}

.callout > .icone {
  margin-top: 3px;
  color: var(--accent);
}

.callout > div {
  flex: 1;
}

.callout p:last-child,
.callout ul:last-child {
  margin-bottom: 0;
}

/* Tables become cards; on a phone each row stacks, labeled by its column. */
.tabela {
  margin: 16px 0;
  padding: 4px 16px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

th {
  padding: 12px 12px 8px 0;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
}

td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

td:first-child {
  font-weight: 600;
}

@media (max-width: 599px) {
  table,
  tbody,
  tr,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  tr:first-child {
    border-top: 0;
  }

  td {
    padding: 2px 0;
    border: 0;
  }

  td + td {
    margin-top: 8px;
  }

  td + td::before {
    content: attr(data-label);
    display: block;
    font: 400 10px/1.4 var(--mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}

/* A gap the author still has to fill. None may be left when the page goes live. */
.a-definir {
  padding: 1px 6px;
  background: var(--warning-soft);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  font: 600 12px/1.6 var(--mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Footer ----------------------------------------------------------------------------- */

.rodape {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.rodape svg {
  width: 28px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;
}