/* Shell of the embed page (layout A: instructions | demo app + docked guide). Look follows the other Leobit proof-of-concept
   pages: green accent #57b12d, Futura headings, Source Sans body, a card with a soft shadow. The demo app inside keeps its
   own styles.css. The fonts are the same files the other Leobit PoCs ship. */
@font-face { font-family: 'Futura XBlk'; src: url('fonts/FuturaExtraBlack.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Bold'; src: url('fonts/Futura-Bold.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('fonts/source-sans-pro/SourceSansPro-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('fonts/source-sans-pro/SourceSansPro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

body.embed {
  /* Embedded, the host sizes the iframe to this document's content height: never 100% here. */
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  background: #f9f9f9;          /* the light section background of the other Leobit PoC pages */
  color: #1e1e1e;
  font-family: 'Source Sans Pro', 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
.embed [hidden] { display: none !important; }

/* Layout like the other PoC pages: instructions on the left, the tool (title above a card) on the right.
   Below 1100 px the instructions go above the tool. Inside the card the guide sits beside the app while the card is wide
   enough and goes under it otherwise (container queries: they follow the card, not the window, so browser zoom and
   a narrow iframe behave the same way). */
.poc {
  box-sizing: border-box;
  width: 100%;
  /* the percentage refers to the page width: content is 1224 px wide and centered, 24 px at least on each side */
  padding: 40px max(24px, calc((100% - 1224px) / 2));
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .poc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; padding-bottom: 24px; }
}

/* Instructions: same look as the other PoCs (Futura Bold heading, plain numbered list with bold lead-ins) */
.poc-info { min-width: 0; }
.poc-info h2 {
  margin: 0 0 24px;
  font-family: 'Futura Bold', Futura, 'Trebuchet MS', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #191919;
}
.poc-info ol { margin: 0; padding: 0 0 0 43px; font-size: 18px; line-height: 1.5; }
.poc-info ol > li { margin-bottom: 12px; padding-left: 0; }
.poc-info ul { margin: 12px 0 0; padding-left: 27px; }
.poc-info ul > li { margin-bottom: 12px; }
.poc-info ul > li:last-child { margin-bottom: 0; }

/* Tool: title above the card */
.tool { min-width: 0; }
.tool-title {
  margin: 0 0 18px;
  font-family: 'Futura XBlk', 'Arial Black', Futura, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: #191919;
}
.tool-card {
  container: toolcard / inline-size;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.tool-body { display: flex; flex-wrap: wrap; align-items: stretch; }
.tool-app { container: app / inline-size; flex: 1 1 420px; min-width: 0; background: var(--bg, #f3f4f6); }
.tool-app .content { padding: 16px; }
.tool-app .page-header { margin-bottom: 14px; }
.tool-app .card { padding: 16px; }
.tool-app .table-wrap { overflow-x: auto; }
.tool-app table th, .tool-app table td { white-space: nowrap; padding-left: 8px; padding-right: 8px; }   /* never break an email character by character */
.tool-app table th:nth-child(4), .tool-app table td:nth-child(4) { display: none; }   /* Status */
@container app (max-width: 560px) {
  .tool-app table th:nth-child(3), .tool-app table td:nth-child(3) { display: none; }   /* Role: keeps Edit and Delete in view */
}
.tool-guide {
  flex: 0 0 clamp(290px, 32%, 340px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #d9d9d9;
}
.tool-guide guide-widget { flex: 1 1 auto; height: auto; min-height: 0; }
/* The card is too narrow for app + guide side by side: the guide goes under the app */
@container toolcard (max-width: 839px) {
  .tool-guide { flex: 1 1 100%; border-left: 0; border-top: 1px solid #d9d9d9; min-height: 400px; }
}

/* "Runs on leobit.com" notice, shown instead of the demo when the page is opened directly and standalone is blocked */
.standalone {
  box-sizing: border-box; min-height: 360px; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #f6f7f5; color: #1c1c1c; text-align: center;
}
.standalone__card { max-width: 30rem; }
.standalone__rule { width: 48px; height: 4px; margin: 0 auto 24px; background: #57b12d; border-radius: 2px; }
.standalone__title { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.standalone__body { margin: 0 0 28px; font-size: 1rem; line-height: 1.6; color: #4a4a4a; }
.standalone__link {
  display: inline-block; padding: 12px 28px; border-radius: 4px; background: #57b12d; color: #0b1907;
  font-weight: 700; text-decoration: none;
}
.standalone__link:hover { background: #2c6b12; color: #ffffff; }