:root { --ink: #1d2433; --muted: #6b7280; --line: #e5e7eb; --brand: #1d4ed8; --bg: #f5f6f8; --warn: #b45309; --ok: #047857; --bad: #b91c1c; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; }
body:not(.wide) { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 28px; width: 100%; max-width: 440px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card.list { max-width: 720px; }
h1 { font-size: 22px; margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
h1 .logo { height: 36px; }
h2 { font-size: 18px; margin: 0; }
.brand { margin: 0 0 20px; }
.brand h1 { margin: 0; }
.brand .tagline { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
/* The yoflow.io look (block W-1023-01): the logo with the tagline under it in Baloo 2 ExtraBold (SIL Open Font License,
   brand/font/), served from the editor's own files. The logo picture is 840 x 225 with its letters from x 25 to 816,
   so the tagline's letters start under the "y" and end under the last "o": its size and left edge are set in
   container widths (cqw) and scale with the logo. At 800 the line "Build Smart. Flow Better." is 11.139 em of ink,
   starting 0.06 em right of where the text starts. */
@font-face { font-family: "Baloo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url(/wi/brand/font/baloo-2-latin-800-normal.woff2) format("woff2"); }
.yf-brand { container-type: inline-size; width: min(300px, 100%); margin: 0 auto 24px; }
.yf-brand h1 { display: block; margin: 0; line-height: 0; }
.yf-brand h1 img { width: 100%; height: auto; display: block; }
.yf-tagline { margin: -0.1em 0 0 calc(100cqw * 25 / 840 - 0.06em); font: 800 calc(100cqw * 792 / 840 / 11.139) / 1.25 "Baloo 2", sans-serif; white-space: nowrap; }
.yf-dark { color: #1E2326; }
.yf-blue { color: #2487E3; }
/* A site's own look on its sign-in page: its logo at the top. */
.site-brand img { display: block; max-width: min(260px, 100%); max-height: 72px; object-fit: contain; margin: 0 auto; }
.lead { margin: 0 0 20px; color: var(--muted); }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
input[type=email] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 14px; }
button, .button { font: inherit; font-weight: 600; background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block; }
button.link { background: none; color: var(--brand); padding: 0; font-weight: 500; }
.error { color: var(--bad); background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 12px; }
.credit { display: block; margin-top: 28px; font-size: 12px; color: #9ca3af; text-decoration: none; }
.credit:hover { color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.user { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); margin: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.crumbs a { color: var(--brand); text-decoration: none; }
ul.sites, ul.pages { list-style: none; margin: 0; padding: 0; }
li.site a, li.page { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
li.site a img { height: 40px; max-width: 120px; object-fit: contain; }
li.site span, li.page > span:first-child { display: flex; flex-direction: column; }
li small { color: var(--muted); font-size: 13px; }
li.page { justify-content: space-between; flex-wrap: wrap; }
li.page .actions { display: flex; gap: 14px; align-items: center; }
li.page .actions a:not(.button) { color: var(--brand); font-size: 14px; }
li.empty { padding: 14px 0; color: var(--muted); }

/* Editor shell */
body.wide { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: #fff; }
.toolbar { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "brand status buttons" "credit credit credit"; align-items: center; gap: 6px 16px; padding: 8px 16px 4px; border-bottom: 1px solid var(--line); background: #fff; }
.toolbar .brand { grid-area: brand; display: flex; align-items: center; gap: 12px; min-width: 0; }
.toolbar .brand img { height: 40px; max-width: 160px; object-fit: contain; }
.toolbar .brand .site { font-weight: 700; white-space: nowrap; }
.toolbar .brand .pg { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar .status { grid-area: status; font-size: 14px; color: var(--muted); text-align: right; }
.toolbar .status.changed { color: var(--warn); font-weight: 600; }
.toolbar .status.ok { color: var(--ok); }
.toolbar .status.bad { color: var(--bad); font-weight: 600; }
.toolbar .status a { color: inherit; }
.toolbar .buttons { grid-area: buttons; display: flex; gap: 8px; }
.toolbar .credit-row { grid-area: credit; text-align: right; }
.toolbar .credit { margin: 0; font-size: 11px; }
.btn { font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-block; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.ghost { background: #fff; color: var(--ink); border-color: #cbd5e1; }
.btn:disabled { opacity: .45; cursor: default; }
#wi-frame { flex: 1; width: 100%; border: 0; display: block; }
@media (max-width: 600px) {
  .toolbar { grid-template-columns: 1fr auto; grid-template-areas: "brand buttons" "status status" "credit credit"; padding: 6px 10px 4px; }
  .toolbar .brand { flex-wrap: wrap; row-gap: 2px; }
  .toolbar .brand img { height: 32px; max-width: 110px; }
  .toolbar .brand .site { flex-basis: 100%; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .toolbar .brand .pg { display: none; }
  .toolbar .status { text-align: left; font-size: 13px; }
  .btn { padding: 7px 10px; font-size: 13px; }
  #wi-back { display: none; }
}
.note { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 14px; }

/* Sign-up, Connect your website, Billing (block W-1025-04) */
input[type=text] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 14px; }
.stack button { width: 100%; }
.small { font-size: 14px; color: var(--muted); }
.small a, .note a, .lead a, .error a { color: var(--brand); }
.yf-brand.yf-small { width: 120px; margin: 0; }
.status-off { font-weight: 600; color: var(--warn); background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; }
ol.steps { padding-left: 22px; margin: 8px 0 20px; }
ol.steps li { margin: 6px 0; }
.card h2 { margin-top: 18px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 16px 0 22px; }
dl.facts dt { color: var(--muted); font-size: 14px; padding-top: 1px; }
dl.facts dd { margin: 0; }
@media (max-width: 480px) { .card { padding: 24px 18px; } dl.facts { grid-template-columns: 1fr; gap: 2px; } dl.facts dd { margin: 0 0 10px; } }
.pill { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: #e5e7eb; }
.pill-trialing { background: #dbeafe; color: #1e40af; }
.pill-active { background: #d1fae5; color: var(--ok); }
.pill-past_due, .pill-unpaid, .pill-canceled { background: #fee2e2; color: var(--bad); }
details.acct { position: relative; }
details.acct summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
details.acct summary::-webkit-details-marker { display: none; }
.acct-menu { position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); min-width: 220px; padding: 6px; z-index: 50; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font: inherit; font-weight: 500; background: none; border: 0; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: #f1f4f9; }
.acct-menu form { margin: 0; }
.acct-email { padding: 8px 10px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; word-break: break-all; }