/* The public pages the API makes (ADR 0031): the invite request page and the
   legal pages. Built from earl.css's tokens and parts; this file adds only
   reading type for long pages, the invite form's fields, and the trap field
   no person sees. */

.public-links{display:flex;flex-wrap:wrap;gap:4px}

/* Long reading: the legal pages. */
.prose{max-width:760px;margin-inline:auto}
.prose h1{font:800 34px/1.15 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.prose h2{font:700 22px/1.25 var(--display);margin:28px 0 6px}
.prose h3{font:700 18px/1.3 var(--display);margin:20px 0 4px}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.3em;margin:6px 0 12px}
.prose li{margin:4px 0}
.prose blockquote{margin:0;padding:12px 16px;border-left:4px solid var(--warn);background:var(--warn-soft);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0}
.prose code{font-family:var(--mono);font-size:.92em}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--line)}

.draft-banner{margin:0 0 4px;padding:10px 14px;border-radius:10px;background:var(--warn-soft);color:var(--ink);font-size:15px}
.draft-banner strong{color:var(--warn)}

/* The invite request page. */
.invite h1{font:800 clamp(28px,4.6vw,40px)/1.12 var(--display);letter-spacing:-.015em;margin:0}
.invite-form{display:grid;gap:6px;max-width:520px}
.invite-form[hidden]{display:none}
.field-label{font-weight:700;margin-top:8px}
.invite-form textarea{resize:vertical;min-height:84px;font:inherit}
.invite-form .row{margin-top:10px}

/* The trap: off screen and out of the tab order, so only a bot fills it in. */
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Staff's list of requests, in the dashboard's People page. */
.invite-request .name{display:flex;flex-direction:column;gap:2px;font-weight:400;min-width:0}
.invite-request .message-text{font-style:italic}

/* Taking a site away, in the dashboard. A command wraps rather than widening the page. */
.export-result{display:grid;gap:12px;min-width:0}
.export-result .card{min-width:0}
.export-command{display:block;font-family:var(--mono);font-size:14px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
/* The domain prices page (ADR 0042): a plain table that fits a phone. */
.price-table{width:100%;border-collapse:collapse;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.price-table th,.price-table td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.price-table thead th{font-weight:700;color:var(--ink-2);font-size:14px}
.price-table td:last-child{color:var(--ink-2);font-size:14px}

/* ---------- The pages that explain Earl (ADR 0079) ----------
   The homepage as served carries the landing and "What Earl is" for a reader
   with no script. Where script runs the dashboard draws its own landing, so the
   served one is hidden; with no script nothing un-hides the footer and "What
   Earl is", so they show by themselves. */
@media (scripting:enabled){.served-landing{display:none}}
@media (scripting:none){
  #home-about[hidden]{display:block !important}
  #shell-foot[hidden]{display:flex !important}
}
.home-about{width:100%;max-width:820px;margin:8px auto 0;padding:clamp(18px,4vw,34px);border-radius:16px;background:var(--surface);border:1px solid var(--line);min-width:0}
.public-read{display:grid;gap:12px;min-width:0}
.public-read h2{font:700 22px/1.25 var(--display);margin:14px 0 0}
.public-read h2:first-child{font:500 clamp(26px,5vw,34px)/1.15 var(--serif);letter-spacing:-.01em;margin:0}
.public-read .public-lead{font-size:17px;line-height:1.45}
.public-read p,.public-read li{max-width:68ch}
.public-read ul,.public-read ol{padding-left:1.3em;display:grid;gap:6px}
.public-steps li::marker{font-weight:700;color:var(--accent)}
.public-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.public-video{display:block;width:100%;max-width:360px;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.table-wrap{overflow-x:auto;max-width:100%}
.faq-item{display:grid;gap:8px}
.faq-item h2{margin-top:12px}