/* idealbusiness.ai components — plain CSS on top of tokens.css. Class prefix: ib- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,200..800&family=IBM+Plex+Mono:wght@400;500&display=swap");

.ib-root, body.ib-root {
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
.ib-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Logo lockup ---------- */
.ib-logo { display: inline-flex; align-items: center; gap: 0.42em; color: var(--ink); text-decoration: none; font-size: 22px; line-height: 1; }
.ib-logo svg { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.ib-logo__word { font-family: var(--font-sans); font-variation-settings: "wdth" 112; letter-spacing: 0.005em; white-space: nowrap; }
.ib-logo__ideal { font-weight: 300; }
.ib-logo__business { font-weight: 650; }
.ib-logo__tld { font-weight: 300; color: var(--brand-teal); }
.ib-logo .ib-mark-frame, .ib-logo .ib-mark-stem { stroke: currentColor; fill: none; }
.ib-logo .ib-mark-stem { fill: currentColor; stroke: none; }
.ib-logo--on-midnight { color: var(--ink-inverse); }
.ib-logo--on-midnight .ib-logo__tld { color: var(--lumen-mint); }

/* ---------- Midnight brand block ---------- */
.ib-brand {
  background: radial-gradient(circle at 50% 40%, var(--midnight-glow) 0%, var(--midnight) 64%);
  color: var(--ink-inverse); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
}
.ib-brand .ib-muted { color: var(--ink-inverse-muted); }

/* ---------- Buttons ---------- */
.ib-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
  font: 600 16px/1 var(--font-sans); letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ib-btn--primary { background: var(--ink); color: var(--surface-raised); }
.ib-btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--action)); }
.ib-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.ib-btn--secondary:hover { border-color: var(--ink); }
.ib-btn--lumen { background: var(--lumen-mint); color: var(--on-lumen); box-shadow: var(--shadow-lumen); }
.ib-btn--lumen:hover { background: #7AF4CE; }
.ib-btn--text { background: none; color: var(--action); padding: 0 var(--space-1); min-height: 44px; }
.ib-btn--text:hover { text-decoration: underline; }
.ib-btn:disabled, .ib-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- URL check (hero form) ---------- */
.ib-urlcheck { display: flex; max-width: 560px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: calc(var(--radius-sm) + 4px); padding: 4px; }
.ib-urlcheck:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.ib-urlcheck input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 17px/1.4 var(--font-sans); padding: 0 var(--space-3); min-height: 48px; }
.ib-urlcheck input::placeholder { color: var(--ink-muted); }
.ib-urlcheck input:focus { outline: none; }
.ib-urlcheck .ib-btn { min-height: 48px; }
.ib-brand .ib-urlcheck { background: rgba(242,245,251,0.06); border-color: rgba(242,245,251,0.28); }
.ib-brand .ib-urlcheck input { color: var(--ink-inverse); }
.ib-brand .ib-urlcheck input::placeholder { color: var(--ink-inverse-muted); }
.ib-brand .ib-urlcheck:focus-within { border-color: var(--lumen-mint); box-shadow: 0 0 0 1px var(--lumen-mint); }
@media (max-width: 520px) { .ib-urlcheck { flex-direction: column; gap: 4px; } }

/* ---------- Stamps ---------- */
.ib-stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  font: 600 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.ib-stamp svg { width: 12px; height: 12px; flex-shrink: 0; }
.ib-stamp--pass { color: var(--status-pass); }
.ib-stamp--fail { color: var(--status-fail); }
.ib-stamp--partial { color: var(--status-partial); }
.ib-stamp--unknown { color: var(--status-unknown); }
.ib-stamp--overall {
  flex-direction: column; gap: 2px; padding: 10px 16px 9px; border-width: 1px; outline: 1px solid currentColor; outline-offset: 3px;
  transform: rotate(-4deg); background: var(--surface-raised); font-size: 13px; letter-spacing: 0.14em;
}
.ib-stamp--overall small { font: 400 11px/14px var(--font-mono); letter-spacing: 0.02em; text-transform: none; color: var(--ink-muted); }

/* ---------- Protocol check row ---------- */
.ib-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.ib-check__name { font: 600 17px/24px var(--font-sans); margin: 0; }
.ib-check__note { grid-column: 1 / 2; margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 23px; max-width: 40em; }
.ib-check__ref { font: 400 13px/18px var(--font-mono); color: var(--ink-muted); }
.ib-check--locked { filter: blur(3px); user-select: none; }

/* ---------- Panel / protocol sheet ---------- */
.ib-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-5); }
.ib-panel__eyebrow { font: 600 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.ib-panel__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font: 400 13px/18px var(--font-mono); color: var(--ink-muted); }