/* Cenergi namecard — fin "Executive Brief" tokens on one mobile viewport.
   Ink #16303F, secondary #3D5261, accent #1D71A8, hairline #CFDEE8. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: light; }

body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: #F2F7FA;
  color: #16303F;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  max-width: 420px;
  min-height: 100dvh;
  background: #ffffff;
  border-top: 3px solid #1D71A8;
  display: flex;
  flex-direction: column;
  padding: 18px 24px calc(14px + env(safe-area-inset-bottom));
}

/* admin preview of an unpublished card */
.preview-banner {
  margin: -18px -24px 14px;
  padding: 8px 12px;
  background: #FDF3E4;
  border-bottom: 1px solid #E8C98A;
  color: #8A5A16;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center;
}

/* masthead (landing / unavailable pages) — same logo size as the card */
.masthead { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #CFDEE8; }
.logo { height: 76px; }

/* identity — the logo leads the card (no staff avatars, user decision) */
.identity { text-align: center; padding: 14px 0 4px; }
.card-logo { height: 84px; width: auto; }
.name {
  font-family: "Newsreader", serif;
  font-weight: 700; font-size: 28px; line-height: 1.15;
  margin-top: 12px;
}
.title {
  margin-top: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #3D5261;
}
.division {
  margin-top: 5px;
  font-size: 13px; line-height: 1.45;
  letter-spacing: 0.03em;
  color: #3D5261;
}
.org { margin-top: 4px; font-size: 14px; color: #3D5261; }

/* actions */
.actions { padding: 16px 0 6px; }
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 16px;
  background: #1D71A8; color: #ffffff;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.btn-primary:active { background: #175A86; }
.quick { display: flex; gap: 8px; margin-top: 8px; }
.btn-quick {
  flex: 1; text-align: center; padding: 11px 0;
  border: 1px solid #CFDEE8; color: #1D71A8;
  font-size: 14px; font-weight: 600; text-decoration: none;
  background: #ffffff; font-family: inherit; cursor: pointer;
  appearance: none; border-radius: 0;
}
.btn-quick:active { background: #F2F7FA; }

/* detail rows — T/F/M/E per the printed card */
.details { flex: 1; margin-top: 10px; }
.row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid #E4EDF3;
}
.row:last-child { border-bottom: 0; }
.k {
  flex: 0 0 26px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #1D71A8;
}
.v { font-size: 15px; color: #16303F; text-decoration: none; overflow-wrap: anywhere; }
a.v:active { color: #1D71A8; }
.addr { font-size: 12.5px; line-height: 1.45; color: #3D5261; }

/* social media icons */
.socials {
  display: flex; justify-content: center; gap: 26px;
  padding: 10px 0 12px;
}
.social { color: #3D5261; display: inline-flex; }
.social:active { color: #1D71A8; }
.social svg { width: 20px; height: 20px; }

/* company block — the "back" of the printed card */
.companyblock {
  border-top: 1px solid #CFDEE8;
  padding: 12px 0 4px;
  text-align: center;
}
.cb-name { font-size: 14px; font-weight: 700; color: #16303F; }
.cb-reg { display: block; font-size: 12px; font-weight: 400; color: #3D5261; margin-top: 1px; }
.cb-addr { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #3D5261; }
.cb-web { display: inline-block; margin-top: 5px; font-size: 13px; font-weight: 600; color: #1D71A8; text-decoration: none; }

/* footer (landing/unavailable pages) */
.foot {
  padding-top: 10px; border-top: 1px solid #CFDEE8;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; color: #8AA0AF; text-align: center;
}

/* QR overlay — full-screen so a partner can scan off the owner's phone */
.qr-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.qr-overlay.open {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .qr-overlay, .qr-overlay.open { transition: none; transform: none; }
}
.qr-logo { height: 64px; margin-bottom: 8px; }
.qr-name { font-family: "Newsreader", serif; font-weight: 700; font-size: 20px; }
.qr-img {
  width: min(72vw, 300px); height: auto;
  border: 1px solid #CFDEE8; padding: 10px; background: #fff;
}
.qr-hint { font-size: 14px; font-weight: 600; color: #3D5261; }
.qr-url { font-size: 12px; color: #8AA0AF; overflow-wrap: anywhere; }
.qr-close { margin-top: 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8AA0AF; }

/* landing page (self-service card lookup) — centered block like a login page */
.landing { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.landing-logo { height: 84px; width: auto; align-self: center; margin-bottom: 20px; }
.landing-title {
  font-family: "Newsreader", serif; font-weight: 700;
  font-size: 26px; text-align: center;
}
.landing-sub {
  margin-top: 10px; text-align: center;
  font-size: 14px; line-height: 1.55; color: #3D5261;
}
.landing-form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.landing-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #3D5261;
}
.landing-emailrow {
  display: flex; align-items: stretch;
  border: 1px solid #CFDEE8;
}
.landing-emailrow:focus-within { border-color: #1D71A8; }
.landing-input {
  flex: 1; min-width: 0;
  padding: 13px 4px 13px 14px; font-size: 16px; color: #16303F;
  background: #fff; border: 0; border-radius: 0;
  font-family: inherit;
}
.landing-input:focus { outline: none; }
.landing-domain {
  display: flex; align-items: center; padding-right: 14px;
  font-size: 15px; color: #3D5261; white-space: nowrap;
  background: #fff;
}
.landing-form .btn-primary { border: 0; cursor: pointer; font-family: inherit; font-size: 16px; }
.landing-form .btn-primary:disabled { opacity: 0.55; }
.landing-error {
  border-left: 3px solid #B3402E; background: #FBEDEA;
  padding: 10px 12px; font-size: 14px; font-weight: 600; color: #B3402E;
}
.foot a { color: #8AA0AF; }

/* unavailable page */
.unavail { text-align: center; margin: auto 0; padding: 40px 0; }
.unavail h1 { font-family: "Newsreader", serif; font-size: 24px; font-weight: 700; }
.unavail p { margin-top: 10px; font-size: 14px; color: #3D5261; line-height: 1.5; }
.unavail a { color: #1D71A8; }

/* short screens: tighten so everything still fits one viewport */
@media (max-height: 760px) {
  .card-logo { height: 68px; }
  .name { font-size: 24px; }
  .identity { padding-top: 12px; }
  .row { padding: 7px 0; }
  .actions { padding-top: 12px; }
  .socials { padding: 6px 0 8px; }
}