/* ==========================================================================
   The public pages.

   Loaded after app.css and only by templates/public/shell.html, so it inherits
   every colour token, the button rules, the table card-collapse and the safe
   area insets without redefining any of them. It adds the four things the
   signed-in application has no use for: a navigation bar for somebody who is
   not signed in, a page that reads as prose rather than as a dense work tool,
   the unmissable treatment for a [NEEDS ZACH: ...] marker, and the honeypot
   field on the demo form.

   No inline styles anywhere, here or in the templates. The application's
   Content-Security-Policy allows none (see app/security.py), and the one
   exception it does make — the per-tenant accent colour — is not something a
   public page has or should have.
   ========================================================================== */

/* ------------------------------------------------------------- the shell -- */

.pubbar {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding-top: var(--sat);
}

.pubbar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px calc(var(--gap) + var(--sal)) 8px calc(var(--gap) + var(--sar));
  display: flex;
  align-items: center;
  gap: 4px 14px;
  /* Wraps rather than collapsing behind a toggle. There are five links and no
     JavaScript on these pages at all, and a menu button that needs a script is
     a menu button that does nothing on a bad connection before the script
     arrives — which is the exact visitor this page is for. */
  flex-wrap: wrap;
  min-height: 48px;
}

.pubbrand {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: 6px;
  /* 22px high before this, and it is a link to the front page. 2.5.8 again. */
  display: inline-flex; align-items: center; min-height: var(--target-min);
}

.pubnav {
  display: flex;
  align-items: center;
  gap: 2px 10px;
  flex-wrap: wrap;
  /* Full basis so it takes a row of its own on a phone instead of being
     squeezed to zero beside the brand. The same trap the signed-in nav fell
     into; see test_mobile_layout.test_mobile_nav_claims_its_own_flex_line. */
  flex: 1 1 100%;
}

.pubnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  font-size: .875rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius);
}

.pubnav a:hover { color: var(--text); background: var(--panel-2); }
.pubnav a.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

@media (min-width: 700px) {
  .pubnav { flex: 1 1 auto; }
}

.pubpage {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--gap) calc(var(--gap) + var(--sal))
           calc(var(--gap) + var(--sab)) calc(var(--gap) + var(--sar));
}

.pubfoot {
  border-top: 1px solid var(--line);
  margin-top: calc(var(--gap) * 2);
  padding-top: var(--gap);
  font-size: .8125rem;
  color: var(--muted);
}

.pubfoot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
/* 24px, for the same reason the signed-in side has it: WCAG 2.2 2.5.8 asks
   it of a target and these measured 19px high in a browser at both widths.
   The public pages are the ones a customer meets first and they were outside
   the accessibility suite's walk, which only visits pages behind a login. */
.pubfoot-links a {
  color: var(--muted);
  display: inline-flex; align-items: center; min-height: var(--target-min);
}
.pubfoot-links a:hover { color: var(--text); }

/* ---------------------------------------------------------------- prose -- */

.prose { max-width: 68ch; }
.prose h1 { font-size: 1.5rem; margin-top: 0; }
.prose h2 { font-size: 1.125rem; margin-top: 1.6em; text-transform: none; letter-spacing: 0; }
.prose h3 { font-size: .9375rem; margin-top: 1.4em; text-transform: none; letter-spacing: 0; color: var(--text); }
.prose h4 { font-size: .875rem; margin-top: 1.2em; color: var(--muted); }
.prose p, .prose li { line-height: 1.6; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }
.prose code {
  font-family: var(--mono); font-size: .875em;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 2px; padding: 0 3px;
  /* A path or a constant name has no spaces in it, so it has to be told it may
     break or it widens the page past a phone's viewport. */
  overflow-wrap: anywhere;
}
.prose blockquote {
  margin: 0 0 1em; padding-left: var(--gap);
  border-left: 2px solid var(--line); color: var(--muted);
}
.prose .table-wrap { overflow-x: auto; margin: 0 0 1.2em; }

.lede { font-size: 1.0625rem; color: var(--muted); }

/* --------------------------------------------------------------- claims -- */

.claim { margin: 0 0 var(--gap); }
.claim h3 { margin-bottom: .3em; }

.pubcta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: calc(var(--gap) * 1.5) 0;
}

/* ---------------------------------------------------- the draft warnings -- */

/* The legal draft notice. Loud on purpose: the whole point of publishing an
   unreviewed document is that nobody can mistake it for a reviewed one. */
.legal-draft {
  border: 2px solid var(--bad);
  border-radius: var(--radius);
  background: rgba(168, 67, 67, .12);
  padding: 12px var(--gap);
  margin: 0 0 var(--gap);
}
.legal-draft h2 {
  margin: 0 0 .4em; font-size: .9375rem; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
}
.legal-draft p { margin: 0; font-size: .875rem; }

/* A fact only Zach can supply. Rendered rather than hidden in a comment,
   because a tidy page with a quiet TODO in the source is how a half-finished
   document ends up in front of a customer. */
.needs-zach {
  background: var(--accent-dim);
  color: var(--text);
  border-radius: 2px;
  padding: 0 4px;
  font-size: .9375em;
  /* The marker text is a whole sentence, so it has to wrap like one. */
  overflow-wrap: anywhere;
}

.placeholder-count {
  display: inline-block;
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: .75rem;
  /* The border is the accent; the number is not. D-123. */
  color: var(--muted);
}

/* ----------------------------------------------------------- the one form -- */

/* The honeypot. Taken out of the layout, out of the tab order and out of the
   accessibility tree, so a person using a screen reader is not asked to fill
   in a field that must stay empty. `display: none` would be simpler and some
   form-filling bots skip a field they can see is not rendered, which defeats
   the point. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px var(--gap);
  margin: 0 0 var(--gap);
  font-size: .875rem;
}
.form-note p:last-child { margin-bottom: 0; }

.problems {
  border: 1px solid var(--bad);
  border-left-width: 2px;
  border-radius: var(--radius);
  padding: 10px var(--gap);
  margin: 0 0 var(--gap);
}
.problems ul { margin: 0; padding-left: 1.2em; }

.reference {
  font-family: var(--mono);
  font-size: 1.125rem;
  letter-spacing: .08em;
  color: var(--text);
}