/* Simple Smooth Safe — Método FAROL landing pages.
 *
 * Loaded *after* /assets/doc.css, which supplies every token, the masthead,
 * the callouts, the tables and the footer. Nothing in this file defines a
 * colour, a spacing step or a type size of its own: FAROL is three layout
 * patterns on top of the document system, not a second design system.
 *
 * The three patterns exist because the landing makes an argument the legal
 * pages never make — five named principles and four ordered phases — and
 * .doc-grid flattens both into undifferentiated cards. Everything else on the
 * page (head, callouts, differentiator cards, footer) is stock doc.css.
 *
 * Used by /farol/ (English) and /pt/farol/ (Portuguese), which are the same
 * page in two languages and must stay identical in shape.
 */

/* ACRONYM — the five FAROL principles. A letter column and a body column,
   because the acronym is the mnemonic and has to be readable as one. */
.acronym{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--s-4);
  margin:0 0 var(--s-8);padding:0}
.acronym li{display:grid;grid-template-columns:var(--s-10) minmax(0,1fr);gap:var(--s-5);
  align-items:start;margin:0;background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);padding:var(--s-5) var(--s-6);box-shadow:var(--shadow-sm)}
.acronym .ltr{font-family:var(--font-mono);font-size:var(--fs-display);line-height:1;
  font-weight:var(--fw-bold);color:var(--accent)}
.acronym h3{margin:0 0 var(--s-2);font-size:var(--fs-h4)}
.acronym p{margin:0;font-size:var(--fs-detail);color:var(--fg-body)}
/* The English and Portuguese words for a principle differ; the gloss carries
   the one the reader is not seeing. */
.acronym .gloss{color:var(--fg-muted);font-weight:var(--fw-regular)}

/* PHASES — the four phases of a cycle, in order. An <ol>, because the order
   is the content: P1 is meaningless without P0. */
.phases{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--s-4);
  margin:0 0 var(--s-8);padding:0}
.phases li{margin:0;background:var(--bg-card);border:1px solid var(--border-color);
  border-left:2px solid var(--accent);border-radius:var(--radius-md);
  padding:var(--s-5) var(--s-6);box-shadow:var(--shadow-sm)}
.phases .tag{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-2)}
.phases h3{margin:0 0 var(--s-2);font-size:var(--fs-h4)}
.phases p{margin:0;font-size:var(--fs-detail);color:var(--fg-body)}
.phases .out{margin-top:var(--s-3);font-size:var(--fs-detail);color:var(--fg-muted)}
.phases .out strong{color:var(--fg-body)}

/* CTA — ghost button. Filled would need a foreground token that survives the
   theme flip: --accent is teal-dark on light and teal-bright on dark, and
   white text fails on the second. Border-and-text inverts to --bg on hover,
   which is correct in both themes without inventing a token. */
.btn{display:inline-block;border:2px solid var(--accent);color:var(--accent);
  font-weight:var(--fw-bold);font-size:var(--fs-sm);padding:var(--s-3) var(--s-6);
  border-radius:var(--radius-pill);text-decoration:none}
.btn:hover{background:var(--accent);color:var(--bg);text-decoration:none}

/* ARTEFACT — a rendered canvas is a form, not a document. Its tables are mostly
   empty because the ministry fills them in, so the columns must be shared out
   evenly rather than collapsed onto whatever text happens to be there: with
   auto layout the question column eats the width and the answer column ends up
   too narrow to write in. */
.artefact table{table-layout:fixed}
.artefact td{height:var(--s-10);word-wrap:break-word}

/* Artefact colophon — the version-and-authorship line that closes a rendered
   artefact. Set as a footnote so it does not read as body copy. */
.colophon{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--fg-muted);
  border-top:1px solid var(--border-color);padding-top:var(--s-4);margin-top:var(--s-10)}

/* Language switch, mirroring the pair of pages this file serves. */
.langswitch{font-family:var(--font-mono);font-size:var(--fs-detail);color:var(--fg-muted);
  margin:0 0 var(--s-6)}

@media(max-width:720px){
  .acronym li{grid-template-columns:1fr;gap:var(--s-2)}
}

/* PRINT — A4 leave-behind.
 *
 * The landing is a page people take into a meeting, so it has to survive a
 * print. Two things have to happen: the dark theme must not print (a visitor
 * whose OS is dark would otherwise get slate paper), and the chrome must go.
 *
 * The theme is undone by re-pointing the semantic roles at the raw tokens
 * doc.css already defines — no literal colours are introduced here.
 */
@media print{
  @page{size:A4;margin:16mm}

  :root{
    --bg:var(--sss-white);
    --bg-card:var(--sss-white);
    --bg-subtle:var(--sss-white);
    --bg-accent-soft:var(--sss-white);
    --fg-primary:var(--sss-slate-900);
    --fg-body:var(--sss-slate-900);
    --fg-muted:var(--sss-slate-700);
    --accent:var(--sss-teal-dark);
    --border-color:var(--sss-slate-300);
    --shadow-sm:none;
    --shadow-card-hover:none;
  }

  /* Navigation, buttons and the footer link row are screen furniture. The
     footer's legal identity line stays — on paper it is the letterhead. */
  .masthead,.btn,.langswitch,footer .links,.no-print{display:none}

  body{background:var(--bg);font-size:11pt;line-height:1.45}
  .wrap{max-width:none;padding:0}
  header.doc-head{padding:0 0 var(--s-4)}
  main{padding:var(--s-6) 0 0}

  /* Nothing that is one idea may be split across two sheets. */
  .acronym li,.phases li,.doc-card,.callout,table,tr,figure{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  h2{margin-top:var(--s-8)}

  a{color:var(--fg-primary);text-decoration:none}
  /* An emailed PDF loses its hyperlinks, so the contact address has to be
     legible as text. Only that one — expanding every href is noise. */
  a.print-url::after{content:" (" attr(href) ")";font-family:var(--font-mono);
    font-size:var(--fs-micro);color:var(--fg-muted)}
  a.print-url[href^="mailto:"]::after{content:""}

  .acronym{gap:var(--s-3)}
  .phases{gap:var(--s-3)}
  .doc-grid{gap:var(--s-3)}

  /* A printed canvas is filled in by hand, so an empty cell needs room for
     handwriting rather than just enough height to exist. */
  .artefact td{height:var(--s-16)}
  .colophon{margin-top:var(--s-6)}
}