/* Ezina bed builder, embedded in the Kahchunk case study.
   Vendored from the Ezina marketing site (iter5 build): scripts/sec-beds*.js,
   styles/sec-beds.css, data/beds-crops.json, assets/beds/*.

   The tool keeps Ezina's own type and palette on purpose — it is the product,
   running, not a Kahchunk-styled reskin of it. Everything here is scoped to
   .ez-bed-embed so none of it leaks into the case study around it. */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/CabinetGrotesk_Complete/Fonts/WEB/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* The case study's media container is 1168 wide. 24px of padding each side
   leaves 1120 for the tool, split the same way the site splits 1273. */
.ez-bed-embed {
  /* The site's own tokens. sec-beds.css and the tabbed folder both read these
     off :root on getezina.com; here they have to come with the tool, or the
     bed loses its fill and the panels lose their card. */
  --ink: #281207;
  --paper: #faf6ec;
  --manila: #f5f0e2;
  --manila-tab: #ede5d2;
  --card-light: #f1e9d8;
  --hairline: #c5b49f;
  --green: #477c51;
  --radius: 12px;
  --radius-sm: 4px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --mustard: #dba605;
  --tab-shadow: 8px 3px 14px rgba(41, 18, 8, 0.32);

  /* sec-beds.css hangs these off #beds, the marketing page's own section. We
     copy the block rather than borrow the id, which would also drag in that
     section's padding, ornament and header rules. */
  --beds-muted: #6d5441;
  --beds-brown-6: #4a3324;
  --beds-card: #f1e9d8;
  --beds-tab-off: #e2dbcc;
  --beds-bed: #c5b49f;
  --beds-envelope: #f5ebde;
  --beds-sticker: #f6bc02;
  --beds-red: #c8402f;
  --beds-warn: #9a710a;
  --beds-good: #2c5f39;
  --f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-sans: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  box-sizing: border-box;
  width: 100%;
  max-width: 1168px;
  margin-inline: auto;
  /* The sticker hangs 76px above the left column, the way it does under the
     site's section header; the top padding is what holds it. */
  padding: 132px 24px 22px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

.ez-bed-embed *,
.ez-bed-embed *::before,
.ez-bed-embed *::after { box-sizing: border-box; }

/* The site resets these on the document; the case study does not, so every
   <p> inside the tool was carrying a UA margin and pushing the rows apart. */
.ez-bed-embed p,
.ez-bed-embed h1,
.ez-bed-embed h2,
.ez-bed-embed h3,
.ez-bed-embed h4,
.ez-bed-embed ul,
.ez-bed-embed ol,
.ez-bed-embed figure,
.ez-bed-embed fieldset { margin: 0; }
.ez-bed-embed ul,
.ez-bed-embed ol { padding-left: 0; list-style: none; }
.ez-bed-embed img,
.ez-bed-embed svg { display: block; max-width: 100%; }
.ez-bed-embed button { font: inherit; color: inherit; cursor: pointer; }

/* 566 + 40 + 514 = 1120. The canvas measures its own stage, so the bed simply
   draws smaller — no transform scaling, nothing goes blurry. */
.ez-bed-embed .beds__app {
  grid-template-columns: minmax(0, 566px) minmax(0, 514px);
  gap: 40px;
  padding-block: 0;
}

/* The site hangs this under its section header. Here the top padding is the
   only room there is, so the offset is set from the arrow: its tip has to
   stop above the sun slider rather than crossing the track. */
.ez-bed-embed .beds__sticker { left: 226px; top: -112px; }

/* Screen-reader-only helper the site defines globally. */
.ez-bed-embed .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Below the two-column breakpoint the site stacks; keep that behaviour and
   drop the sticker, which has nowhere sensible to sit. */
@media (max-width: 980px) {
  .ez-bed-embed { padding: 20px 16px; }
  .ez-bed-embed .beds__app { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ez-bed-embed .beds__sticker { display: none; }
}


/* ── Tabbed folder ──────────────────────────────────────────────────────────
   Warnings / Ecosystem Impact is the site's generic .tabbed component, which
   lives in the marketing site's main.css. Vendored here, scoped, because the
   case study loads none of that file. Behaviour comes from scripts/tabs.js. */
.ez-bed-embed .tabbed { isolation: isolate; }

.ez-bed-embed .tabbed__bar { display: flex; align-items: flex-end; flex-wrap: wrap; }

.ez-bed-embed .tabbed__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  position: relative;
  padding: var(--s3) 20px var(--s3) var(--s4);
  color: var(--ink);
  background: var(--manila-tab);
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--tab-shadow);
  font: inherit;
  cursor: pointer;
}
.ez-bed-embed .tabbed__tab + .tabbed__tab { margin-left: -1px; }
/* leftmost on top, so each tab's shadow falls on the next tab's upper-left */
.ez-bed-embed .tabbed__bar > .tabbed__tab:nth-child(1) { z-index: 9; }
.ez-bed-embed .tabbed__bar > .tabbed__tab:nth-child(2) { z-index: 8; }

/* The selected tab sits above the body and drops 1px so its fill covers the
   body's top hairline; its shadow is clipped at its own bottom edge so it
   never falls on the body. */
.ez-bed-embed .tabbed__tab[aria-selected="true"] {
  background: var(--manila);
  z-index: 40 !important;
  margin-bottom: -1px;
  padding-bottom: calc(var(--s3) + 1px);
  clip-path: inset(-32px -32px 0 -32px);
}
.ez-bed-embed .tabbed__tab:focus { outline: none; }
.ez-bed-embed .tabbed__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

.ez-bed-embed .tabbed__body {
  position: relative;
  z-index: 30;
  background: var(--manila);
  border: 1px solid var(--hairline);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
}

/* A caption under the tool, in the case study's voice rather than Ezina's. */
.ez-bed-caption {
  max-width: 1168px;
  margin: 12px auto 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #b5cfde;
}