/* ============================================================
   mac — the window a motion design lands in.

   A shared primitive, not the hero's private markup: every
   feature in the loop gets one of these later, and the strip
   below the hero may too. Anything that needs "this is a screen
   from the product" uses this and nothing else.

   The screen is deliberately EMPTY. It is a marked slot, not a
   mock trying to look finished — the real motion designs are
   authored separately and drop in here. An empty slot that
   admits it is empty is honest; a half-drawn fake screen is not.

   Sizes come from the shell it sits in, not from here. Give the
   element a max-width where you place it.
   ============================================================ */

.mac {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-win);
  /* --sh-lift is the b2c "floating above the page" shadow. This
     is the one place on the page that is meant to float. */
  box-shadow: var(--sh-lift);
  overflow: hidden;
}

/* Nested inside a card that already has its own elevation — a
   feature card, say. Same window, less lift, tighter corner. */
.mac-sm {
  box-shadow: var(--sh-card);
  border-radius: var(--r-field);
}

.mac-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px var(--s-3);
  background: var(--scene-chrome);
  border-bottom: 1px solid var(--scene-line);
}

/* Decoration, and named as such: these are not controls, nothing
   here is clickable, and a screen reader has no use for them. */
.mac-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.mac-bar i:nth-child(1) { background: #F0625A; }
.mac-bar i:nth-child(2) { background: #F5BE4F; }
.mac-bar i:nth-child(3) { background: #61C554; }

/* Optically centred: the three dots on the left have no twin on
   the right, so the title is nudged back by their width. */
.mac-title {
  margin-inline: auto;
  padding-inline-end: 33px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mac-screen {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  /* A quiet hatch, so the slot reads as "nothing here yet"
     rather than "a white box that failed to load". */
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(14, 21, 38, .022) 11px 22px),
    var(--scene-fill);
}

.mac-slot {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--card);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

/* Narrow screens: a 16:9 box at 320px is 180px of nothing. Give
   it a squarer shape so it still reads as a window. */
@media (max-width: 599px) {
  .mac-screen { aspect-ratio: 4 / 3; }
}