/* =========================================================================
   RENDRD · Base + shared components — "Sendable" (light / consumer)
   ========================================================================= */
@import url("tokens.css");

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand); color: #fff; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--ink); }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font-family: inherit; }

/* ---------- Type utilities ---------- */
.display-xl { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display-l  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-l);  line-height: 1.02; letter-spacing: var(--tracking-display); }
.display-m  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m);  line-height: 1.05; letter-spacing: var(--tracking-display); }
.lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.brandtext { color: var(--brand); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }

/* =========================================================================
   Buttons — pill, friendly, confident
   ========================================================================= */
.btn {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .ic { width: 18px; height: 18px; }
.btn.primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: var(--shadow-brand); }
.btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); box-shadow: 0 14px 36px -10px var(--brand-glow); transform: translateY(-1px); }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.dark:hover { background: #000; transform: translateY(-1px); }
.btn.outline { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.outline:hover { border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.ghost:hover { color: var(--ink); background: rgba(30,26,21,0.05); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.sm { font-size: 14px; padding: 9px 16px; }
.btn.lg { font-size: 17px; padding: 16px 30px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* =========================================================================
   Status dots & chips
   ========================================================================= */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }
.dot.live { background: var(--live); box-shadow: 0 0 0 4px var(--live-glow); }
.dot.live.pulse { animation: dotpulse 1.9s var(--ease) infinite; }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.dot.dead { background: var(--ink-4); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
@keyframes dotpulse { 0%,100% { box-shadow: 0 0 0 0 var(--live-glow); } 50% { box-shadow: 0 0 0 7px rgba(25,160,107,0.04); } }

.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface);
}
.chip.live { color: var(--live); border-color: transparent; background: var(--live-soft); }
.chip.warn { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.chip.danger { color: var(--danger); border-color: transparent; background: var(--danger-soft); }
.chip.brand { color: var(--brand); border-color: transparent; background: var(--brand-soft); }

/* =========================================================================
   The link card — the payoff object (friendly, not techy)
   ========================================================================= */
.linkbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill); padding: 8px 8px 8px 22px; box-shadow: var(--shadow-1);
}
.linkbar .url { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.linkbar .url .host { color: var(--ink-3); font-weight: 500; }
.linkbar .url .slug { color: var(--brand); }
.linkbar .copy {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; margin-left: auto;
  background: var(--ink); border: 0; border-radius: var(--r-pill);
  color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.linkbar .copy:hover { background: var(--brand); transform: translateY(-1px); }
.linkbar .copy .ic { width: 16px; height: 16px; }

/* =========================================================================
   Inputs
   ========================================================================= */
.field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.input {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-1);
  padding: 14px 16px; width: 100%; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.input::placeholder { color: var(--ink-4); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.inputgroup { display: flex; align-items: stretch; }
.inputgroup .prefix {
  display: inline-flex; align-items: center; padding: 0 14px; background: var(--canvas-2);
  border: 1.5px solid var(--line-2); border-right: 0; border-radius: var(--r-1) 0 0 var(--r-1);
  font-size: 15px; color: var(--ink-3); white-space: nowrap;
}
.inputgroup .input { border-radius: 0 var(--r-1) var(--r-1) 0; }

/* toggle */
.toggle { width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); border: 0; position: relative; cursor: pointer; flex: none; transition: background var(--dur-base) var(--ease); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--spring); }
.toggle.on { background: var(--brand); }
.toggle.on::after { transform: translateX(20px); }

/* =========================================================================
   Nav
   ========================================================================= */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(251,246,238,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo .wm { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.04em; }

/* =========================================================================
   Footer
   ========================================================================= */
.foot { border-top: 1px solid var(--line); background: var(--canvas-2); }
.foot-inner { max-width: var(--max-w); margin: 0 auto; padding: 64px var(--gutter) 36px; }
.foot-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-2); }
.foot h5 { font-size: 13px; text-transform: none; color: var(--ink-3); margin: 0 0 16px; font-weight: 700; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: var(--ink-3); }

/* =========================================================================
   Served-page badge bar (free tier chrome) — light, unobtrusive
   ========================================================================= */
.rendrd-badge {
  display: flex; align-items: center; gap: 12px; padding: 11px 20px;
  background: var(--surface); color: var(--ink-2); border-top: 1px solid var(--line);
  font-size: 14px;
}
.rendrd-badge .b-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; }
.rendrd-badge .b-cta { color: var(--brand); text-decoration: none; font-weight: 600; }
.rendrd-badge .b-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.rendrd-badge .spacer { margin-left: auto; }
.rendrd-badge .report { color: var(--ink-3); text-decoration: none; font-size: 13px; }
.rendrd-badge .report:hover { color: var(--ink-2); }

/* =========================================================================
   Cards
   ========================================================================= */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-1); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* entrance */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--dur-slow) var(--ease-out) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.pop { animation: pop var(--dur-slow) var(--spring) both; }

/* Shared site footer (Layout, non-hideNav pages) */
.site-foot { border-top: 1px solid var(--line); margin-top: 48px; }
.site-foot-inner { max-width: 1080px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot .sf-copy { color: var(--ink-3); font-size: 13px; }
.site-foot .sf-links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot .sf-links a { color: var(--ink-3); font-size: 13.5px; text-decoration: none; }
.site-foot .sf-links a:hover { color: var(--ink); }