/* App-only styles. The base is style.css, copied verbatim from the marketing site by
   tools/sync-style.mjs. Never edit style.css here: edit it on the site and re-sync, or the
   two drift and the app slowly stops looking like the brand. */

/* order form and delivered documents */
.tester label{display:block;font-size:.92rem;color:var(--quiet);margin:.9rem 0 .3rem}
.tester input[type=text],.tester input[type=email]{width:100%;padding:.75rem 1rem;border:1px solid var(--rule);
  border-radius:2px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.tester input:focus{outline:2px solid var(--signal);outline-offset:1px}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.doc h2{font-size:1.5rem;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.doc h3{margin-top:1.6rem}
/* The Desk's ruling: a person's block above the document, ruled in signal so it reads as the
   judgement rather than as section zero. */
.doc.ruling{border-left:3px solid var(--signal);padding-left:1.2rem;margin:1rem 0 2rem}
.doc.ruling h2{border-top:0;margin-top:0;padding-top:0}
.doc pre{background:var(--ink);color:var(--paper);padding:1.2rem;border-radius:3px;overflow-x:auto;font-size:.85rem;line-height:1.5}
.doc code{font-size:.9em}
.doc :not(pre)>code{background:var(--rule);padding:.1em .35em;border-radius:2px}
.tablewrap{overflow-x:auto;margin:1.2rem 0}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.94rem}
.tablewrap td,.tablewrap th{border:1px solid var(--rule);padding:.5rem .7rem;text-align:left;vertical-align:top}
.tablewrap tr:first-child td,.tablewrap th{background:var(--card);font-family:var(--display);font-weight:600}

/* Competitor rows on the Soundalike form: a name and an address belong together, and
   pairing them visually stops somebody filling in three addresses and no names. */
.rival{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.rival label{grid-column:1 / -1;margin-bottom:0}
@media (max-width:560px){.rival{grid-template-columns:1fr}}

/* Take-away and installation blocks on a delivered document. Screen only: printing these
   would put "click here to print" into the printed artefact. */
.takeaway,.install{margin:2.4rem 0;padding:1.4rem 1.6rem;background:var(--card);border-radius:3px}
.takeaway h2,.install h2{margin:0 0 .8rem;font-size:1.15rem;border:0;padding:0}
.takeaway p{margin:.5rem 0;font-size:.95rem}
.install dl{margin:0}
.install dt{font-family:var(--display);font-weight:600;margin-top:.9rem}
.install dd{margin:.15rem 0 0;font-size:.95rem;color:var(--quiet)}

/* ---------------------------------------------------------------------------------------
   Print.

   The site sells "fifteen to twenty-five pages", which is a promise about a paginated
   document, and until now the artefact was a scrolling web page with no pages in it. This
   is what closes that gap: Save as PDF gives a branded document rather than a screenshot of
   a website with navigation in the margin.

   No page numbers here on purpose. CSS @page margin boxes are not supported by Chrome or
   Safari, so a rule that appeared to add them would silently do nothing. The browser's own
   print footer supplies them.
   --------------------------------------------------------------------------------------- */
@media print {
  @page { margin: 18mm 16mm 20mm; }

  html,body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  header.site,.takeaway,.install,hr,footer{display:none !important}
  main,section,.wrap,.narrow{margin:0;padding:0;max-width:none;width:auto}

  /* The masthead only exists on paper: a printed page that does not say whose it is, and
     who made it, is a stack of anonymous A4 within a week of being filed. */
  .doc::before{
    content:"smarticulate";
    display:block;font-family:var(--display);font-weight:600;letter-spacing:.02em;
    font-size:9pt;color:#34374C;border-bottom:1.5pt solid #E0503A;
    padding-bottom:4pt;margin-bottom:16pt;
  }

  .doc h1{font-size:20pt;margin:0 0 4pt;break-after:avoid}
  .doc h2{font-size:13pt;margin:16pt 0 5pt;padding-top:0;border-top:0;break-after:avoid;break-inside:avoid}
  .doc h3{font-size:11pt;margin:11pt 0 3pt;break-after:avoid}
  .doc p,.doc li{orphans:3;widows:3}

  /* A ruling split across a page break loses its reasoning, which is the part being paid
     for. Same for a move and the quotation that shows it. */
  .doc li,blockquote{break-inside:avoid}

  /* The pack is the one thing somebody retypes if it breaks badly, so it stays whole where
     it can, and stays legible in ink rather than reversed out of a solid block. */
  .doc pre{
    background:#fff;color:#000;border:0.75pt solid #34374C;border-left:2.5pt solid #E0503A;
    padding:8pt 10pt;font-size:8.5pt;line-height:1.45;white-space:pre-wrap;break-inside:avoid;
  }
  .doc :not(pre)>code{background:transparent;border:0.5pt solid #bbb;padding:0 .2em}

  .tablewrap{overflow:visible;break-inside:avoid}
  .tablewrap table{font-size:9pt}
  .tablewrap td,.tablewrap th{border:0.5pt solid #999}
  .tablewrap tr:first-child td{background:#eee}
  .tablewrap tr{break-inside:avoid}

  a{color:#000;text-decoration:none}
  .quiet{font-size:8.5pt;color:#444}
}