/* Email countdown ticker: the builder page.
   One ground, black ink, hairlines between steps; Raleway (the brand font the
   ticker is drawn in) for headings and buttons, the system face for the rest.
   The preview of the ticker is the one loud thing on the page. */

@font-face {
  font-family: "Raleway UI";
  src: url("/ui/raleway.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ground: #f3f3f1;
  --paper: #ffffff;
  --ink: #1b1b1b;
  --ink-2: #565653;
  --rule: #8d8d88;      /* input borders, 3:1 on paper */
  --hair: #dcdcd7;      /* lines between steps */
  --placeholder: #6f6f6b; /* example text in empty fields, 4.9:1 on paper */
  --frame: #e6e6e2;     /* what an email sits on in a mail app */
  --accent: #1b1b1b;
  --focus: #2459c9;
  --error: #b3261e;
  --brand: "Raleway UI", "Raleway", system-ui, sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 var(--ui);
  font-synthesis: none;
}
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }

/* Header */
.top { padding-block: 32px 8px; }
h1 {
  font: 700 28px/1.15 var(--brand);
  letter-spacing: 0.2px;
  margin: 0 0 8px;
  text-wrap: balance;
}
.lede { margin: 0; max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }

/* Two columns from 960px: the form, and the preview that stays in view */
.layout { display: grid; gap: 40px; padding-block: 24px 64px; }
@media (min-width: 960px) {
  .layout { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; }
  .out { position: sticky; top: 24px; align-self: start; }
}

/* Steps */
.step { padding: 24px 0 8px; border-top: 1px solid var(--hair); }
.step:first-child { border-top: 0; padding-top: 0; }
h2 {
  display: flex; align-items: baseline; gap: 10px;
  font: 700 19px/1.25 var(--brand);
  margin: 0 0 16px;
}
h2 .n {
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-2);
  font-weight: 600;
  min-width: 1ch;
}
h3 { font: 700 15px/1.3 var(--brand); margin: 24px 0 10px; }
.step-hint { margin: -6px 0 16px; }

/* Fields */
.field { margin: 0 0 16px; min-width: 0; }
fieldset.field { border: 0; padding: 0; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
label, .label {
  display: block;
  font-size: 14px; font-weight: 600;
  margin: 0 0 6px;
  padding: 0;
}
.opt { font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.hint { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 6px 0 0; max-width: 62ch; text-wrap: pretty; }
.hint b { color: var(--ink); font-weight: 600; }

input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=color]):not([type=radio]), select {
  width: 100%; height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper);
}
input::placeholder { color: var(--placeholder); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--error); }
.field-error:empty { display: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Colour: a swatch to pick, and the code to type or paste */
.swatch { position: relative; display: flex; gap: 8px; }
.swatch input[type=color] {
  flex: none; width: 44px; height: 44px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); cursor: pointer;
}
.swatch .hash { position: absolute; left: 64px; top: 0; line-height: 44px; color: var(--ink-2); pointer-events: none; }
.swatch input[data-swatch] { padding-left: 22px; font-variant-numeric: tabular-nums; }

/* Starting points */
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.preset {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 10px 0 8px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); cursor: pointer;
  font-weight: 500;
}
.preset:hover { border-color: var(--ink); }
.preset .chip {
  font: 700 12px/1 var(--brand); letter-spacing: 0.5px;
  font-variant-numeric: lining-nums;
  padding: 6px 7px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

/* Segmented choice (position, preview width) */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); padding: 3px; gap: 3px; }
.seg label, .seg button { margin: 0; font-weight: 500; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .seg button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; min-width: 76px; padding: 0 14px;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer;
}
.seg input:checked + span, .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg-small span, .seg-small button { min-height: 32px; min-width: 0; font-size: 14px; }

/* Spacing: a picture of the ticker with a number on each side */
.box {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  grid-template-areas: ". t ." "l c r" ". b .";
  align-items: center; justify-items: center;
  gap: 6px; padding: 26px 8px 8px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--fill, #fff);
}
.box-in { grid-area: c; width: 100%; border-style: dashed; }
.box + .field-error, .box + .field-error + .row { margin-top: 12px; }
.box-name {
  position: absolute; top: 5px; left: 8px;
  font-size: 12px; font-weight: 600; line-height: 1;
  background: var(--paper); color: var(--ink-2);
  padding: 3px 6px; border-radius: 3px;
}
.side { width: 60px !important; height: 44px; text-align: center; padding: 0 4px !important; font-variant-numeric: tabular-nums; }
.side-t { grid-area: t; }
.side-l { grid-area: l; }
.side-r { grid-area: r; }
.side-b { grid-area: b; }
.core {
  grid-area: c;
  font: 700 12px/1 var(--brand); letter-spacing: 0.5px;
  color: var(--tick-ink, #000);
  padding: 10px 4px;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Preview */
.out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.out-head h2 { margin: 0; }
.frame { background: var(--frame); padding: 20px 12px; border-radius: 6px; overflow-x: auto; }
.email { max-width: 600px; margin: 0 auto; background: var(--paper); transition: max-width 200ms ease; }
.out.phone .email { max-width: 375px; }
.summary { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.out.busy .frame, .out.busy .summary { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .email { transition: none; } }

.copy { margin: 24px 0 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--paper); cursor: pointer;
  font: 700 15px/1 var(--brand); letter-spacing: 0.3px;
}
.btn.primary { background: var(--accent); color: var(--paper); }
.btn.big { width: 100%; min-height: 52px; font-size: 17px; }
.btn:disabled { cursor: progress; opacity: 0.6; }

details { border-top: 1px solid var(--hair); padding: 12px 0; }
details:last-of-type { border-bottom: 1px solid var(--hair); }
summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.steps { margin: 8px 0 0; padding-left: 22px; }
.steps li { margin: 0 0 8px; max-width: 62ch; }
.platforms { margin: 6px 0; padding-left: 18px; }
.platforms li { margin: 0 0 2px; }
textarea {
  display: block; width: 100%; height: 220px; margin-top: 8px; padding: 10px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; resize: vertical;
}

.problem { background: var(--paper); border: 1px solid var(--error); border-radius: 6px; padding: 14px 16px; }
.problem p { margin: 0 0 6px; }
.problem ul { margin: 0; padding-left: 20px; color: var(--error); }

@media (max-width: 420px) {
  h1 { font-size: 24px; }
  .row { gap: 10px; }
  .box { grid-template-columns: 56px minmax(0, 1fr) 56px; padding: 26px 6px 6px; gap: 4px; }
  .side { width: 56px !important; }
}