/* Board frame: page layout, device outlines, wallpapers and annotations around the designs.
   This file is presentation only and is exempt from the token-only rule in check-boards.mjs.
   Everything inside a .screen or .widget element is design and must use tokens.css. */

:root {
  --frame-bg: #e6e6eb;
  --frame-ink: #1c1c22;
  --frame-muted: #5d5d68;
  --frame-line: #c9c9d2;
  --frame-device: #0c0c10;
  --frame-note-bg: #fffbe6;
  --frame-wallpaper-light: linear-gradient(160deg, #b9c7e8 0%, #d9c9e6 55%, #f0d9c8 100%);
  --frame-wallpaper-dark: linear-gradient(160deg, #1b2440 0%, #2c1f3d 60%, #3a2a2a 100%);
  --frame-wallpaper-tinted: linear-gradient(160deg, #1d1d1f 0%, #2b2b2e 100%);
}

* { box-sizing: border-box; }
body.board {
  margin: 0;
  padding: 32px;
  background: var(--frame-bg);
  color: var(--frame-ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.board-header { max-width: 1100px; margin: 0 0 32px; }
.board-header h1 { font-size: 28px; margin: 0 0 8px; }
.board-header p { margin: 4px 0; color: var(--frame-muted); max-width: 820px; }
.board-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.board-toc a { color: var(--frame-ink); }

.board-section { margin: 0 0 56px; }
.board-section > h2 { font-size: 20px; margin: 0 0 4px; padding-top: 8px; border-top: 1px solid var(--frame-line); }
.board-section > p { margin: 0 0 16px; color: var(--frame-muted); max-width: 900px; }
.board-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }

.artboard { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.artboard > figcaption { font-size: 12px; color: var(--frame-muted); max-width: 420px; }
.artboard > figcaption strong { color: var(--frame-ink); }

/* Phones: logical sizes of an iPhone 16 (393×852pt) and a Pixel 9 (412×923dp). */
.device {
  position: relative;
  border-radius: 48px;
  padding: 10px;
  background: var(--frame-device);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}
.device.android { border-radius: 32px; }
.device > .screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 38px;
  overflow: hidden;
}
.device.android > .screen { width: 412px; height: 923px; border-radius: 24px; }
.device.tall > .screen { height: auto; min-height: 852px; }
.device.android.tall > .screen { min-height: 923px; }
/* Smallest supported phones: iPhone SE 2nd/3rd gen (375×667pt, home button, 20pt status bar; the
   smallest iPhone that runs iOS 17) and a small Android (360×800dp). Landscape: iPhone 16 on its side,
   with the sensor-housing safe area on the start side and home indicator at the bottom. */
.device.se { border-radius: 36px; padding: 44px 10px; }
.device.se > .screen { width: 375px; height: 667px; border-radius: 0; }
.device.se .status-bar { height: 20px; }
.device.se .home-indicator { height: 0; }
.device.android.small > .screen { width: 360px; height: 800px; }
.device.landscape > .screen { width: 852px; height: 393px; padding-inline: 59px; }
.device.landscape .status-bar { height: 0; }
.device.landscape .home-indicator { height: 21px; }
.status-bar { height: 54px; flex: none; }
.device.android .status-bar { height: 36px; }
.home-indicator { height: 34px; flex: none; }
.device.android .home-indicator { height: 24px; }

/* Home-screen context for widgets. */
.wallpaper {
  padding: 24px;
  border-radius: 28px;
  background: var(--frame-wallpaper-light);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.wallpaper.dark { background: var(--frame-wallpaper-dark); }
.wallpaper.tinted { background: var(--frame-wallpaper-tinted); }

/* Widget families. iOS sizes are the iPhone 16 Pro Max family sizes (largest phone), which
   designs must also fit at the smallest supported size (iPhone SE: 148×148 / 321×148). */
.widget-frame { position: relative; overflow: hidden; flex: none; }
.widget-frame.ios-small { width: 170px; height: 170px; border-radius: 24px; }
.widget-frame.ios-medium { width: 364px; height: 170px; border-radius: 24px; }
.widget-frame.ios-small.min { width: 148px; height: 148px; border-radius: 20px; }
.widget-frame.ios-medium.min { width: 321px; height: 148px; border-radius: 20px; }
/* Android: responsive layouts, shown at a typical 2×2 (compact) and 4×2 (expanded) cell span. */
.widget-frame.android-compact { width: 180px; height: 180px; border-radius: 24px; }
.widget-frame.android-expanded { width: 372px; height: 180px; border-radius: 24px; }
.widget-frame.android-expanded.tall { height: 256px; }

/* Annotations. */
.spec { font-size: 12px; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.spec th, .spec td { text-align: start; padding: 6px 10px; border-bottom: 1px solid var(--frame-line); vertical-align: top; }
.spec th { background: #f3f3f6; font-weight: 600; }
.spec code, .note code { font-size: 11px; }
.note {
  font-size: 12px;
  background: var(--frame-note-bg);
  border: 1px solid #eadf9f;
  border-radius: 8px;
  padding: 8px 12px;
  max-width: 520px;
}
.redline { outline: 1px dashed #e0417b; outline-offset: -1px; }
.frame-label { font: 600 11px/1 system-ui; color: var(--frame-muted); text-transform: uppercase; letter-spacing: 0.04em; }