/* devices.css: owned by the devices and phone kit task (065/004), design package §6.3, §6.5. */

/*
  The MacBook Pro 14 and the iPhone 14 Pro (§6.3) and the MacBook's chrome. Markup to copy:
  scripts/landing-v2/kit/index.html, served at /__kit/ by `pnpm landing-v2:serve`.

  A device (.mac, .iph) takes a width; its height follows the image. The screen (__screen) sits
  under the image (__frame, pointer-events: none), so the bezel, the notch and the Dynamic Island
  draw over it and a press reaches it. The screen is a size container holding a fixed layout,
  1512 × 982 or 393 × 852, sized in --mac-u (100cqw / 1512, here) or --ph-u (100cqw / 393,
  phone.css): it scales with no JS (§6.8).

  Inside a device, boxes use physical left and top: the image does not mirror in RTL. The
  MacBook's chrome stays English and left to right (§6.3). Its colours are device-only tokens in
  tokens.css (--mac-*), read here alone.
*/

@property --mac-u {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* ---------- The devices ---------- */

.mac,
.iph {
  position: relative;
  width: 100%;
}
.mac {
  aspect-ratio: 3648 / 2204;
  direction: ltr;
}
.iph {
  aspect-ratio: 1096 / 2228;
}

.mac__frame,
.iph__frame {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.mac__screen,
.iph__screen {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  background: var(--night);
  container-type: inline-size;
}
/* The screen boxes are §6.3's, measured to the bezel's first fully opaque pixel (1 to 3 px of
   the masters outward), so the bezel's antialiased inner edge never lets the page or the other
   device show through.
   MacBook: §6.3's left 10.24%, top 2.45%, width 79.52%, height 85.50% of the image is, to the
   opaque edge, x 372 to 3275 and y 53 to 1938 of the 3648 × 2204 master. The top corners are
   1.45% of the screen's width (2.233% of its height); the bottom is square. */
.mac__screen {
  top: 2.4047%;
  left: 10.1974%;
  width: 79.5779%;
  height: 85.5263%;
  border-radius: 1.45% 1.45% 0 0 / 2.233% 2.233% 0 0;
}
/* iPhone: the shipped image is the 2130 × 2412 export cropped to the phone's own 1096 × 2228 box
   at (516, 92). §6.3's left 27.04%, top 6.02%, width 45.92%, height 88.05% of the export is, to
   the opaque edge, x 573 to 1557 and y 143 to 2270 of it. The corners are 13.7% of the screen's
   width (6.338% of its height). */
.iph__screen {
  top: 2.289%;
  left: 5.2007%;
  width: 89.781%;
  height: 95.4668%;
  border-radius: 13.7% / 6.338%;
}

/* Optional: the device's shadow (--shadow-device, §2), cast by the whole device so the screen
   is never shaded by its own bezel. */
.dev-shadow {
  filter: drop-shadow(var(--shadow-device));
}

/* ---------- The MacBook's screen: a 1512 × 982 layout ---------- */

.mac__ui {
  --mac-u: calc(100cqw / 1512);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ivory);
  font-family: var(--font-plex), var(--font-system);
  line-height: 1;
}

/* The 1512 × 945 area under the 37px menu bar: the old 1440 × 900 layout at 1.05x. */
.mac__area {
  position: absolute;
  top: calc(37 * var(--mac-u));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--night);
}

/* A screenshot that fills its box from the top: a 16:10 capture loses only its foot. */
.mac__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* ---------- The menu bar: 37px, split by the notch ----------
   NOCTS in bold and the five menus left of the notch, the date and time at the end. At 14px
   the menus end near x = 340 and the clock starts near x = 1370; the notch spans 664 to 848,
   so nothing sits under it. */
.mac-menu {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--mac-u));
  height: calc(37 * var(--mac-u));
  padding-inline: calc(20 * var(--mac-u)) calc(18 * var(--mac-u));
  background: var(--mac-menu-bg);
  font-size: calc(14 * var(--mac-u));
  white-space: nowrap;
}
.mac-menu__app {
  font-weight: 600;
}
.mac-menu__clock {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}
/* A full-screen app: macOS paints the strip beside the notch black, with nothing in it. */
.mac-menu--black {
  background: var(--mac-strip-bg);
}

/* ---------- The traffic lights: 12px, in their real colours ---------- */
.mac-lights {
  position: absolute;
  top: 50%;
  left: calc(14 * var(--mac-u));
  display: flex;
  gap: calc(8 * var(--mac-u));
  translate: 0 -50%;
}
.mac-lights > i {
  width: calc(12 * var(--mac-u));
  height: calc(12 * var(--mac-u));
  border-radius: 50%;
  background: var(--mac-red);
}
.mac-lights > i:nth-child(2) {
  background: var(--mac-yellow);
}
.mac-lights > i:nth-child(3) {
  background: var(--mac-green);
}

/* ---------- The desktop app window ----------
   The shipping desktop app on macOS (titleBarStyle: 'hiddenInset'): a 38px title bar with the
   traffic lights, then the screenshot. The bar is the screenshot's own top edge, set by
   --mac-bar (a .mac-bar--<file> class), so it reads as the app's top and nothing covers the
   app's logo. It fills the area; .mac-app--window makes it a window that the page places
   itself. */
.mac-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--night);
}
.mac-app__bar {
  position: relative;
  flex: none;
  height: calc(38 * var(--mac-u));
  background: var(--mac-bar, var(--mac-app-bg));
}
.mac-app > .mac__shot {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
.mac-app--window {
  border: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
  border-radius: calc(12 * var(--mac-u));
  box-shadow: var(--shadow-float);
}

/* The screenshots' top edges (tokens.css, --mac-bar-<file>): each title bar continues its
   screenshot, so it reads as the app's own top. They are gradients because the screenshots' top
   edges are (tokens.css says how they were sampled); this is not a design gradient, so §2's flat
   rule is kept. Add a class and a token for each new screenshot. */
.mac-bar--calendar-day {
  --mac-bar: var(--mac-bar-calendar-day);
}
.mac-bar--calendar-week {
  --mac-bar: var(--mac-bar-calendar-week);
}
.mac-bar--chat-approval {
  --mac-bar: var(--mac-bar-chat-approval);
}
.mac-bar--chat-brief {
  --mac-bar: var(--mac-bar-chat-brief);
}
.mac-bar--composer-models {
  --mac-bar: var(--mac-bar-composer-models);
}
.mac-bar--mail-inbox {
  --mac-bar: var(--mac-bar-mail-inbox);
}
.mac-bar--messengers {
  --mac-bar: var(--mac-bar-messengers);
}
.mac-bar--needs-you {
  --mac-bar: var(--mac-bar-needs-you);
}
.mac-bar--proactivity-digest {
  --mac-bar: var(--mac-bar-proactivity-digest);
}
.mac-bar--sources {
  --mac-bar: var(--mac-bar-sources);
}

/* ---------- The browser, full screen (21:00) ----------
   One strip under the black notch strip: the traffic lights and the URL pill, "chat.nocts.ae"
   in mono 11px, Ash on Surface 2. */
.mac-browser {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--night);
}
.mac-browser__bar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  height: calc(55 * var(--mac-u));
  border-block-end: 1px solid var(--hairline);
  background: var(--surface-1);
}
.mac-browser__bar .mac-lights {
  left: calc(19 * var(--mac-u));
}
.mac-browser__url {
  display: grid;
  place-items: center;
  width: calc(440 * var(--mac-u));
  height: calc(32 * var(--mac-u));
  border-radius: calc(8 * var(--mac-u));
  background: var(--surface-2);
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: calc(11 * var(--mac-u));
}
.mac-browser > .mac__shot {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}