/* Device frames for live clocks (js/core/devices.js). See /DESIGN.md:
   flat tonal bezel (surface-2 rim, surface-1 edge, black glass), no
   shadows, no gradients. All geometry is in container units of the device
   body (cqmin = the short side), so frames scale with their column.
   Size a frame from outside with --dev-w (max width). */

.dev { display: block; margin: 0 auto; width: 100%; container-type: inline-size; }
.dev *, .dev *::before, .dev *::after { box-sizing: border-box; }
.dev-clock { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }

/* ---------- shared body ---------- */
.dev-body {
  position: relative;
  container-type: size;
  background: var(--surface-2);
}
.dev-bezel {
  position: absolute; inset: 0.8cqmin;
  background: #000;
  border: 0.35cqmin solid var(--surface-1);
}
.dev-screen {
  position: absolute;
  container-type: size;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
.dev-btn { position: absolute; background: var(--surface-2); }

/* Wallpaper for the Home and Lock Screens: a flat dark field (Raised
   Graphite) with faint concentric rings, like a dial seen from very close.
   A device surface, not a glow: one tone, no gradient. */
.dev-wallpaper {
  background-color: var(--surface-1);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 402 874" preserveAspectRatio="xMidYMid slice"%3E%3Cg transform="translate%28318 640%29" fill="none" stroke="%23f5f5f7" stroke-opacity=".045" stroke-width="1.2"%3E%3Ccircle r="36"/%3E%3Ccircle r="66"/%3E%3Ccircle r="96"/%3E%3Ccircle r="126"/%3E%3Ccircle r="156"/%3E%3Ccircle r="186"/%3E%3Ccircle r="216"/%3E%3Ccircle r="246"/%3E%3Ccircle r="276"/%3E%3Ccircle r="306"/%3E%3Ccircle r="336"/%3E%3Ccircle r="366"/%3E%3Ccircle r="396"/%3E%3Ccircle r="426"/%3E%3Ccircle r="456"/%3E%3Ccircle r="486"/%3E%3Ccircle r="516"/%3E%3Ccircle r="546"/%3E%3Ccircle r="576"/%3E%3Ccircle r="606"/%3E%3Ccircle r="636"/%3E%3C/g%3E%3C/svg%3E');
  background-size: cover; background-position: center;
}

@supports (corner-shape: superellipse(1.6)) {
  .dev-body, .dev-bezel, .dev-screen, .dev-tile { corner-shape: superellipse(1.6); }
}

/* ---------- iPhone 17 Pro: 71.9 × 150.0 mm, 6.3" 402 × 874 pt ---------- */
.dev-phone { max-width: var(--dev-w, 340px); padding-inline: 1.6%; }
/* The body's own radius is in the root's cqw (its own cqmin would resolve upward). */
.dev-phone .dev-body { aspect-ratio: 71.9 / 150; border-radius: 17cqw; }
.dev-phone .dev-bezel { border-radius: 16.8cqmin; }
.dev-phone .dev-screen { inset: 3cqmin; border-radius: 14.6cqmin; }

/* Side buttons, portrait: action + volume on the left, side + Camera Control
   on the right. --p = start along the edge, --l = length (% of height). */
.dev-btn-action  { --p: 19.5%; --l: 4.6%; }
.dev-btn-volup   { --p: 27.5%; --l: 8.6%; }
.dev-btn-voldown { --p: 38.5%; --l: 8.6%; }
.dev-btn-side    { --p: 30%;   --l: 13.5%; }
.dev-btn-camera  { --p: 58%;   --l: 11%; }
.dev-phone:not(.is-landscape) .dev-btn { top: var(--p); height: var(--l); width: 1.3cqmin; }
.dev-phone:not(.is-landscape) :is(.dev-btn-action, .dev-btn-volup, .dev-btn-voldown) { left: -1cqmin; border-radius: 0.8cqmin 0 0 0.8cqmin; }
.dev-phone:not(.is-landscape) :is(.dev-btn-side, .dev-btn-camera) { right: -1cqmin; border-radius: 0 0.8cqmin 0.8cqmin 0; }
.dev-phone:not(.is-landscape) .dev-btn-camera { width: 1.1cqmin; right: -0.7cqmin; background: var(--surface-1); }

/* Landscape (StandBy): top of the phone to the left, so the left edge becomes
   the bottom and the right edge the top. */
.dev-phone.is-landscape { max-width: var(--dev-w, 620px); padding-inline: 0; padding-block: 1.1% 0; }
.dev-phone.is-landscape .dev-body { aspect-ratio: 150 / 71.9; border-radius: 8.4cqw; }
.dev-phone.is-landscape .dev-btn { left: var(--p); width: var(--l); height: 1.3cqmin; }
.dev-phone.is-landscape :is(.dev-btn-action, .dev-btn-volup, .dev-btn-voldown) { bottom: -1cqmin; border-radius: 0 0 0.8cqmin 0.8cqmin; }
.dev-phone.is-landscape :is(.dev-btn-side, .dev-btn-camera) { top: -1cqmin; border-radius: 0.8cqmin 0.8cqmin 0 0; }
.dev-phone.is-landscape .dev-btn-camera { height: 1.1cqmin; top: -0.7cqmin; background: var(--surface-1); }

/* Dynamic Island: 126 × 37 pt, 11 pt from the top edge. */
.dev-island {
  position: absolute; z-index: 3; background: #000; border-radius: 999px;
  width: 31.3cqmin; height: 9.2cqmin; top: 2.7cqmin; left: 50%; translate: -50% 0;
}
.is-landscape .dev-island { width: 9.2cqmin; height: 31.3cqmin; top: 50%; left: 2.7cqmin; translate: 0 -50%; }

.dev-home {
  position: absolute; z-index: 3; bottom: 2cqmin; left: 50%; translate: -50% 0;
  width: 34cqmin; height: 1.3cqmin; border-radius: 999px; background: var(--text);
}

/* Status bar: time centred in the left ear, icons in the right ear. */
.dev-status {
  position: absolute; z-index: 2; inset: 0 0 auto; height: 14.5cqmin;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6cqmin 8.5cqmin 0 7cqmin;
}
.dev-status-time { width: 20cqmin; height: 5.5cqmin; }
.dev-status-time text { fill: var(--text); font: 600 17px var(--font-sans); letter-spacing: -0.2px; }
.dev-status-icons { width: 17cqmin; height: 3.1cqmin; color: var(--text); }

/* ---------- the app's clock screen ---------- */
.dev-app { display: flex; flex-direction: column; align-items: center; }
.dev-nav {
  position: absolute; top: 15cqmin; inset-inline: 4.6cqmin;
  display: flex; justify-content: space-between;
}
.dev-nav-btn {
  width: 11cqmin; height: 11cqmin; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  display: grid; place-items: center;
}
.dev-nav-btn svg { width: 6.4cqmin; height: 6.4cqmin; }
.dev-nav-btn.is-info { color: var(--dev-accent, var(--text)); }
.dev-hero {
  position: absolute; inset: 30cqmin 6cqmin 26cqmin;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.dev-hero-clock { flex: 0 1 auto; width: 88cqmin; height: 88cqmin; min-height: 0; }
.dev-hero-name {
  margin-top: 7cqmin; font-weight: 700; font-size: 7cqmin; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
}
.dev-hero-tagline {
  margin-top: 1.2cqmin; font-weight: 500; font-size: 3.8cqmin; line-height: 1.3;
  color: var(--dev-accent, var(--text-2)); text-wrap: balance;
}
.dev-dots {
  position: absolute; bottom: 9cqmin; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 2.4cqmin;
  padding: 2.6cqmin 4.4cqmin; border-radius: 999px; background: var(--surface-1);
}
.dev-dot { width: 1.7cqmin; height: 1.7cqmin; border-radius: 50%; background: var(--text-3); }
.dev-dot.is-on { background: var(--text); transform: scale(1.35); }
.dev-dot.is-far { transform: scale(0.6); }

/* ---------- Lock Screen ---------- */
.dev-lock-glyph {
  position: absolute; top: 15.5cqmin; left: 50%; translate: -50% 0;
  width: 3.4cqmin; color: var(--text);
}
.dev-lock-glyph svg { width: 100%; height: auto; }
.dev-lock-time { position: absolute; top: 22cqmin; left: 4cqmin; width: 92cqmin; height: auto; overflow: visible; }
.dev-lock-time text { fill: var(--text); font-family: var(--font-sans); }
.dev-lock-date { font-size: 21px; font-weight: 600; fill-opacity: .82; }
.dev-lock-hm { font-size: 124px; font-weight: 600; letter-spacing: -3px; }
.dev-lock-widgets {
  position: absolute; top: 71cqmin; left: 50%; translate: -50% 0;
  display: flex; gap: 3.6cqmin;
}
.dev-acc { height: 18cqmin; display: grid; place-items: center; }
/* accessory families render vibrant: luminance only, as iOS does. */
.dev-acc .dev-clock { filter: grayscale(1) brightness(1.3); }
.dev-acc.is-circ { width: 18cqmin; border-radius: 50%; background: color-mix(in srgb, var(--text) 13%, transparent); padding: 2.6cqmin; }
.dev-acc.is-rect { width: 39.6cqmin; padding: 0.6cqmin 0; }
.dev-lock-quick {
  position: absolute; bottom: 9cqmin; inset-inline: 11cqmin;
  display: flex; justify-content: space-between;
}
.dev-quick {
  width: 12.4cqmin; height: 12.4cqmin; border-radius: 50%;
  background: var(--surface-1); color: var(--text); display: grid; place-items: center;
}
.dev-quick svg { width: 6cqmin; height: 6cqmin; }

/* ---------- StandBy: widgets view, two systemSmall widgets on black ---------- */
.dev-standby {
  background: #000; display: flex; align-items: center; justify-content: space-evenly;
  padding-left: 6cqh; /* clear the Dynamic Island */
}
.dev-standby-widget { width: 78cqh; height: 78cqh; padding: 5cqh; }
.dev-standby-clock { width: 100%; height: 100%; }

/* ---------- iPhone Duo: book foldable, opened; inner display ~4:3 ---------- */
.dev-duo { margin: 0 auto; max-width: var(--dev-w, 900px); padding-block: 1%; }
.dev-duo .dev-body { aspect-ratio: 1.36; border-radius: 4.6cqw; }
.dev-duo .dev-bezel { inset: 0.6cqmin; border-radius: 5.9cqmin; }
.dev-duo .dev-screen { inset: 2.2cqmin; border-radius: 4.6cqmin; background: #000; }
/* Buttons on the top edge of the right-hand half. */
.dev-duo .dev-btn { top: -0.9cqmin; height: 1.1cqmin; border-radius: 0.7cqmin 0.7cqmin 0 0; }
.dev-duo .dev-btn-side    { right: 12%; width: 9%; }
.dev-duo .dev-btn-volup   { right: 25%; width: 6%; }
.dev-duo .dev-btn-voldown { right: 32.5%; width: 6%; }
/* Hinge caps where the two halves meet. */
.dev-hinge {
  position: absolute; left: 50%; translate: -50% 0; width: 3.2cqmin; height: 0.8cqmin;
  background: var(--surface-1);
}
.dev-hinge.is-top { top: 0; border-radius: 0 0 0.6cqmin 0.6cqmin; }
.dev-hinge.is-bottom { bottom: 0; border-radius: 0.6cqmin 0.6cqmin 0 0; }
.dev-crease {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 1px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  pointer-events: none;
}
.dev-punch {
  position: absolute; z-index: 2; top: 1.6cqmin; right: 21%;
  width: 2.3cqmin; height: 2.3cqmin; border-radius: 50%; background: #000;
  border: 0.25cqmin solid var(--surface-1);
}

/* WallModeView, landscape: 5 columns × 3 rows, 6 pt padding and spacing,
   14 pt inside each cell, on black. */
.dev-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 0.8cqmin; padding: 0.8cqmin;
}
.dev-wall-cell { position: relative; min-width: 0; min-height: 0; padding: 2cqmin; }
.dev-wall-clock { width: 100%; height: 100%; }

/* ---------- Home Screen widgets: 170 pt square, 364 × 170 pt medium ---------- */
.dev-widget.is-small { max-width: var(--dev-w, 170px); }
.dev-widget.is-medium { max-width: var(--dev-w, 364px); }
/* ClockTheme.background (white 0.06) = App Night. */
.dev-tile { background: var(--bg); }
.is-small .dev-tile { aspect-ratio: 1; border-radius: 13.5cqw; padding: 11cqw; }
.is-medium .dev-tile { aspect-ratio: 364 / 170; border-radius: 6.3cqw; padding: 5cqw 4.3cqw; }
.dev-widget-clock { width: 100%; height: 100%; }

/* ---------- Home Screen: 402 pt wide, 4 × 64 pt icons across 364 pt ----------
   Units are cqw of the screen (1cqw = 4.02 pt). One cell = 15.92cqw, gap
   8.96cqw, so a small widget is 2 × 2 cells and a medium one 4 × 2. */
.dev-hs-grid {
  position: absolute; top: 17.5cqw; inset-inline: 4.73cqw;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15.92cqw; gap: 8.96cqw;
}
.dev-hs .dev-widget { max-width: none; width: 100%; height: 100%; }
.dev-hs .dev-tile { aspect-ratio: auto; height: 100%; }
.dev-hs-medium { grid-column: 1 / -1; grid-row: span 2; }
.dev-hs-small { grid-column: span 2; grid-row: span 2; }
.dev-hs-icon { display: block; width: 100%; height: 100%; aspect-ratio: 1; border-radius: 22.4%; }
.dev-hs-icon.is-blank { background: var(--surface-2); }
.dev-hs-pages {
  position: absolute; bottom: 31cqw; left: 50%; translate: -50% 0;
  display: flex; gap: 2cqw; padding: 1.8cqw 3cqw; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.dev-hs-pages i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--text-3); }
.dev-hs-pages i.is-on { background: var(--text); }
.dev-hs-dock {
  position: absolute; inset-inline: 2.6cqw; bottom: 4.6cqw; height: 22.4cqw;
  padding-inline: 2.13cqw; border-radius: 9cqw;
  display: grid; grid-template-columns: repeat(4, 15.92cqw); justify-content: space-between; align-content: center;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
@supports (corner-shape: superellipse(1.6)) {
  .dev-hs-icon, .dev-hs-dock { corner-shape: superellipse(1.6); }
}