{{- /*
  The Vantage email shell.

  Every colour in the email system lives in this file and nowhere else, in the
  same way no component in web/, site/ or adminsite/ carries a hex. The values
  are web/app/globals.css's tokens — an email is read before the recipient
  clicks through to the control plane, so the two should not look like
  different products. They are written as literal hex here because email
  clients support neither var() nor a reliable prefers-color-scheme, so the
  usual token indirection is not available: when you change a token in the
  three globals.css files, change it here too.

    --ground     #071628      --rule       #1e3855
    --panel      #0d2138      --accent     #5b9be8
    --panel-2    #102842      --up         #4fb484
    --ink        #e4ecf6      --down       #e2705a
    --ink-2      #9fb3ca      --pend       #d6a63f
    --ink-3      #71879f      --well       #04101f

  Layout is tables and inline styles throughout, which is not a stylistic
  choice — it is the only thing Outlook renders predictably.

  A message file overrides "title", "pill" and "body"; the empty defaults below
  exist so that a message needing no pill does not have to define one.
*/ -}}
{{- define "title"}}{{end -}}
{{- define "pill"}}{{end -}}
{{- define "body"}}{{end -}}

{{- /* p renders one paragraph of body copy. */ -}}
{{- define "p" -}}
<p style="margin:0 0 16px;color:#9fb3ca;font-size:14px;line-height:1.6;">{{.}}</p>
{{- end -}}

{{- /* lead is the first paragraph: same size, brighter, sets the subject. */ -}}
{{- define "lead" -}}
<p style="margin:0 0 16px;color:#e4ecf6;font-size:15px;line-height:1.6;">{{.}}</p>
{{- end -}}

{{- /* button takes dict "label" "…" "url" "…".

     The bare URL is printed underneath on purpose: a plain-text-preferring
     client, a stripped-styles inbox and a forwarded message all lose the
     anchor, and a verification email whose link cannot be reached is a
     support ticket. */ -}}
{{- define "button" -}}
<table role="presentation" cellpadding="0" cellspacing="0" style="margin:4px 0 16px;">
  <tr>
    <td style="border-radius:4px;background:#5b9be8;">
      <a href="{{.url}}" style="display:inline-block;padding:10px 20px;color:#04101f;font-size:14px;font-weight:600;text-decoration:none;">{{.label}}</a>
    </td>
  </tr>
</table>
<p style="margin:0 0 20px;color:#71879f;font-size:12px;line-height:1.5;word-break:break-all;">
  Or paste this into your browser:<br>
  <a href="{{.url}}" style="color:#5b9be8;text-decoration:none;">{{.url}}</a>
</p>
{{- end -}}

{{- /* well shows machine output — a licence blob, an install ID. Mirrors
     web/'s --well surface, the floor beneath the ground. */ -}}
{{- define "well" -}}
<pre style="margin:0 0 20px;padding:14px;background:#04101f;border:1px solid #1e3855;border-radius:4px;color:#9fb3ca;font-family:ui-monospace,'Cascadia Mono','SF Mono',Menlo,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all;">{{.}}</pre>
{{- end -}}

{{- /* note is a quoted callout, used for a free-text message we did not
     write ourselves. */ -}}
{{- define "note" -}}
<p style="margin:0 0 20px;padding:12px 14px;background:#102842;border:1px solid #1e3855;border-radius:4px;color:#e4ecf6;font-size:13px;line-height:1.6;">{{.}}</p>
{{- end -}}

{{- /* rows takes a list of dict "k" "…" "v" "…". */ -}}
{{- define "rows" -}}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:4px 0 8px;border-top:1px solid #1e3855;">
  {{- range .}}
  <tr>
    <td style="padding:9px 0;border-bottom:1px solid #172c44;color:#71879f;font-size:13px;width:130px;vertical-align:top;">{{.k}}</td>
    <td style="padding:9px 0;border-bottom:1px solid #172c44;color:#e4ecf6;font-size:13px;font-weight:500;">{{.v}}</td>
  </tr>
  {{- end}}
</table>
{{- end -}}

{{- /* chip takes dict "label" "…" "tone" "up|down|pend|accent". Tone is
     never the only signal: the label spells the state out. */ -}}
{{- define "chip" -}}
{{- $fg := "#5b9be8"}}{{if eq .tone "up"}}{{$fg = "#4fb484"}}{{else if eq .tone "down"}}{{$fg = "#e2705a"}}{{else if eq .tone "pend"}}{{$fg = "#d6a63f"}}{{end -}}
<span style="display:inline-block;margin:0 0 12px;padding:4px 11px;border:1px solid {{$fg}};border-radius:9999px;color:{{$fg}};font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;">{{.label}}</span>
{{- end -}}

<!DOCTYPE html>
<html>
<body style="margin:0;padding:0;background:#071628;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#071628;padding:32px 12px;">
  <tr>
    <td align="center">
      <table role="presentation" width="520" cellpadding="0" cellspacing="0" style="max-width:520px;width:100%;background:#0d2138;border:1px solid #1e3855;border-radius:4px;overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
        <tr><td style="height:3px;background:#5b9be8;"></td></tr>
        <tr>
          <td style="padding:26px 28px 8px;">
            <span style="font-size:16px;font-weight:700;letter-spacing:-.01em;color:#7fb2f0;">Vantage</span>
          </td>
        </tr>
        <tr>
          <td style="padding:10px 28px 26px;">
            {{template "pill" .}}
            <h1 style="margin:2px 0 14px;font-size:20px;font-weight:700;line-height:1.3;color:#e4ecf6;">{{template "title" .}}</h1>
            {{template "body" .}}
          </td>
        </tr>
        <tr>
          <td style="padding:14px 28px;border-top:1px solid #1e3855;background:#04101f;">
            <p style="margin:0;color:#71879f;font-size:12px;line-height:1.5;">Sent by Vantage · infrastructure control plane</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>