/* Segora - the product lockup (ribbon-cube mark + wordmark) used in every page header and banner.
   Markup:
     <b class="sg-lockup"><img class="sg-mark" src="/brand/segora-mark.svg" alt=""><span class="sg-word">Segora</span><span class="sg-section">Settings</span></b>
   The wordmark is Space Grotesk Bold, the same face as the logo artwork. If the font can't load, a system sans-serif
   is used instead, so the header always shows the name. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

.sg-lockup { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.sg-mark { height: 34px; width: auto; flex: none; display: block; }
.sg-word {
  font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 700; font-size: 21px; letter-spacing: -.4px; color: #fff;
}
.sg-section { font-weight: 500; font-size: 16px; color: #9fb3c8; }
.sg-section::before { content: "\00B7"; margin: 0 8px 0 2px; color: #54D6C5; }
.sg-by {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: 3px; color: #54D6C5; text-transform: uppercase;
}

/* Mapper page: header, tab row and panels run the full width with the same 28px left edge as every other page,
   so the logo sits where it does elsewhere and "Load mapping from file" lines up with the left panel. */
.app-header .app-header-inner, .tab-strip .tab-strip-inner, div.main { max-width: none; margin: 0; }
.app-header .app-header-inner { padding: 16px 28px; }
.tab-strip .tab-strip-inner { padding: 0 28px; }
div.main { padding: 24px 28px; }

/* Ecosystem header: the lockup replaces the plain page title. */
.eco-header h1 { font-size: inherit; }

/* Every dark page header starts the logo 28px from the left edge, as on Settings and Integrations. */
.eco-header, .wf-page-header { padding-left: 28px; }

/* Sign-in page: a large lockup is the first thing on the dark brand panel; the headline below it is kept smaller. */
.sg-login { display: flex; align-items: center; gap: 22px; }
.sg-login .sg-mark { height: 110px; }
.sg-login .sg-word { font-size: 60px; letter-spacing: -1.6px; line-height: 1; }
.sg-login .sg-by { display: block; margin-top: 10px; font-size: 13px; letter-spacing: 5px; }
.brand .hero h1 { font-size: clamp(20px, 2.2vw, 34px); margin-bottom: 12px; letter-spacing: -.4px; white-space: nowrap; }
.brand .hero p { font-size: clamp(11px, 0.95vw, 15px); max-width: none; white-space: nowrap; }
.sg-about-link { display:flex; width:fit-content; align-items:center; gap:8px; margin-top:16px; padding:9px 16px; border-radius:999px;
  border:1.5px solid rgba(84,214,197,.6); color:#fff; font-weight:600; font-size:14px; text-decoration:none; background:rgba(84,214,197,.10); }
.sg-about-link:hover { background:rgba(84,214,197,.22); border-color:#54D6C5; }
.brand .hero .flow { display: block; margin-top: 24px; width: min(560px, 100%); }

/* Narrow screens: keep the header to the logo and name, so it doesn't wrap into the links on the right. */
@media (max-width: 600px) { .sg-section { display: none; } }

/* ---- Demo mode notice (shared/demo.js) ----
   Two parts: a slim heading band in the logo's orange (#FF8A3D), and a body in a very light orange, both with the logo's
   navy text. The sign-in confirmation window (login.css) uses the same look. */
.sg-demo-notice { background:#FFF4EB; color:#101D30; border:1px solid #FFD2B3; border-radius:10px; overflow:hidden; padding:0 0 2px;
  margin:0 0 18px; box-shadow:0 3px 10px rgba(255,138,61,.15); font-size:13px; line-height:1.5; text-align:left; }
.sg-demo-notice .sg-demo-title { background:#FF8A3D; color:#101D30; font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:6px 14px; margin:0 0 9px; }
.sg-demo-notice p { margin:0 14px 8px; color:#101D30; }
.sg-demo-notice .sg-demo-limits { font-size:12px; color:#4a3b30; }
/* sign-in page: the same, shorter */
.sg-demo-notice.short { margin-bottom:16px; }
.sg-demo-notice.short .sg-demo-title { font-size:12px; padding:5px 12px; margin-bottom:7px; }
.sg-demo-notice.short p { margin:0 12px 7px; font-size:12.5px; }
html.sg-demo-mode .demo-hide { display:none !important; }
html:not(.sg-demo-mode) .demo-only { display:none !important; }

/* Trademark mark next to the name (legal.trademark) and the footer notice (shared/legal.js) */
.sg-word .sg-tm { font-size:.38em; font-weight:600; vertical-align:super; line-height:0; margin-left:.12em; letter-spacing:0; }
/* The legal footer (shared/legal.js fills it), the same on every page: one font, size and grey, teal underlined links.
   Each page only places it (margins, or fixed in a corner on the sign-in page). */
#legalFooter { font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.5; color:#5d6b82; text-align:center; }
#legalFooter a { color:#0e8f82; text-decoration:underline; }
#legalFooter a:hover { color:#0b7366; }
/* The Terms and privacy links: their own line, and a link never breaks in the middle ("Privacy | notice"). */
#legalFooter .legal-links { margin-top:2px; }
#legalFooter a { white-space:nowrap; }
.legal-tm { margin-top:3px; font-size:11px; opacity:.85; }

/* The registered mark after FHIR (FHIR is a registered trademark of HL7). */
sup.sg-reg { font-size: .6em; line-height: 0; vertical-align: super; font-weight: 400; margin-left: .05em; }

/* "Built by implementers, for implementers": the same mark wherever it appears (sign-in, About, Features). Two linked
   nodes, then the words, in amber on the dark brand panels. */
.sg-impl { width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; padding:7px 14px; border-radius:999px;
  border:1.5px solid rgba(255,181,71,.65); background:rgba(255,181,71,.12); color:#ffd08a;
  font:700 12.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.sg-impl svg { flex:none; width:22px; height:14px; }
.sg-impl b { color:#fff; font-weight:800; }
.sg-impl span { white-space:nowrap; }
@media (max-width:420px) { .sg-impl { font-size:10.5px; letter-spacing:.04em; padding:6px 11px; } }
/* The AI icon: on every button that uses the organisation's AI (the same mark as the Suggest with AI dialog). */
.ai-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; flex: none;
  margin-right: 7px; vertical-align: middle; position: relative; top: -1px; background: linear-gradient(135deg, #7c3aed, #14b8a6); color: #fff;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .25); }
.ai-icon::before { content: '\2726'; font-size: 10px; line-height: 1; }
button:disabled .ai-icon { opacity: .55; }