html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  /* Stop iOS from auto-inflating the banner text when it thinks a column is too narrow. */
  -webkit-text-size-adjust: 100%;
}

/*
 * Scale the photo down to fit entirely on screen without ever cropping it, and centre it.
 *
 * This is what "object-fit: contain" does, written the long way on purpose: object-fit isn't
 * supported before iOS 10, and the point of this app is to not care how old the iPad is.
 * Absolute positioning on all four edges plus "margin: auto" centres both axes, while the
 * max-* pair caps the image at the viewport in either dimension.
 */
#cam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/*
 * Overlaid in the top-right corner, on top of the photo.
 *
 * Two rows: the camera name, which opens the picker, and the auto-rotate switch under it.
 * The typography that used to live here has moved down to #banner-name, because the controls
 * row must not inherit the 28px "read it from across the room" sizing.
 */
#banner {
  position: absolute;
  top: 0;
  right: 0;
  /* No "left", so the box shrinks to fit the name instead of spanning the screen. The cap stops
     a long name from reaching most of the way across, and gives text-overflow something to
     measure against -- ellipsis does nothing without a width limit. */
  max-width: 60%;
  /* So the cap covers the padding too, rather than 60% + 48px of padding. */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  padding: 14px 24px 11px;
  /* Right-aligned so the shorter controls row tucks under the end of the name rather than
     stranding it against the left edge of a wide box. */
  text-align: right;
}

#banner-name {
  display: block;
  color: #fff;
  text-decoration: none;
  /* Large enough to read from across the room. */
  font-size: 28px;
  font-weight: 500;
  /* Long camera names stay on one line instead of reflowing the box to two rows. */
  white-space: nowrap;
}

#banner-text {
  display: inline-block;
  /* Leaves room for the chevron beside it. Both are middle-aligned rather than sitting on the
     baseline, because an inline-block that clips its overflow takes its bottom edge as its
     baseline, which would drag the chevron out of line. */
  vertical-align: middle;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

#banner-chevron {
  vertical-align: middle;
  margin-left: 7px;
  opacity: 0.6;
}

#banner-controls {
  margin-top: 3px;
  /* Reset the name's display sizing -- these are inherited, so they have to be undone. */
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.65);
}

#autorotate {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  /* Padded out to a finger-sized target; the switch alone is only 20px tall. */
  padding: 5px 0 3px;
}

#autorotate-track {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 34px;
  height: 20px;
  margin-left: 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

#autorotate-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #fff;
  -webkit-transition: left 0.15s ease;
  transition: left 0.15s ease;
}

/* setAutoRotate() in app.js sets and clears this class. */
#autorotate.is-on #autorotate-track {
  background: #34c759;
}

#autorotate.is-on #autorotate-thumb {
  left: 16px;
}

/*
 * ---- First-visit welcome, bottom-right ----
 *
 * Starts hidden and is revealed by setupWelcome() in app.js, so a browser that has already
 * dismissed it -- or that is already running from a Home Screen icon -- never sees it flash.
 * Deliberately much quieter than #banner: that one is sized to be read from across the room,
 * this is a one-time note for someone holding a phone.
 */
#welcome {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  /* No "left", so the box shrinks to fit its text and wraps at the cap, the same way
     #banner does at the other end of the same edge. */
  max-width: 340px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  padding: 14px 18px 12px;
}

/* Margins are set per-paragraph rather than as a reset plus overrides, because "#welcome p"
   outranks a bare "#welcome-hint" and would otherwise win. */
#welcome-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#welcome-hint {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

/* Nudged down so the glyph sits on the text baseline rather than riding above it. */
#share-glyph {
  position: relative;
  top: 2px;
  margin: 0 1px;
}

#welcome-actions {
  margin: 8px 0 0;
}

#welcome-actions a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  /* Padding rather than margin between the two, so each stays a comfortable tap target
     without the underline growing to match. */
  margin-right: 14px;
}

/*
 * Collapsed welcome. Same corner as #welcome, inset slightly because a circle sitting flush
 * into the corner reads as a clipped shape rather than a button.
 */
#welcome-toggle {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  /* line-height equal to height centres the glyph vertically without flexbox, which old iOS
     only supports in its obsolete 2009 syntax. */
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/*
 * ---- Shared dialog chrome ----
 *
 * Used by both the About text and the camera picker. Centred with a prefixed translate rather
 * than flexbox, which old iOS only supports in its obsolete 2009 syntax.
 */
.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.82);
  /* Above #banner and #welcome, which are painted later than #cam but earlier than this. */
  z-index: 10;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 86%;
  max-width: 460px;
  max-height: 80%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #1c1c1c;
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  padding: 22px 26px 26px;
}

.modal-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  /* Padded out to a finger-sized target rather than the 16px the glyph alone would give. */
  padding: 6px 10px;
}

/* Subheads inside the dialog. Sized below .modal-title so "About" stays the heading for the
   whole thing rather than competing with the sections under it. The top margin is the gap that
   separates a subhead from the paragraph above it, so no subhead should be the first child. */
#about-body h3 {
  margin: 18px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

#about-body p {
  margin: 0 0 12px;
}

/* Otherwise the last paragraph's margin stacks on the modal's own bottom padding. */
#about-body p:last-child {
  margin-bottom: 0;
}

#about-body a {
  color: #6cb6ff;
}

/*
 * ---- Camera picker ----
 *
 * The list scrolls inside the dialog rather than the dialog scrolling as a whole, so the
 * title and close button stay put with thirty cameras in the list.
 */
#picker-modal {
  overflow: visible;
  padding-bottom: 18px;
}

#picker-list {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Full-bleed rows: cancel the dialog's side padding so the highlight on the current camera
     runs to both edges. */
  margin: 0 -26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.picker-item {
  display: block;
  padding: 11px 26px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Match the banner: one line, clipped, rather than a two-line row. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-item.is-current {
  color: #6cb6ff;
  font-weight: 600;
  background: rgba(108, 182, 255, 0.1);
}

#picker-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}