/**
 * demos-ios.css: the iPhone that runs demos-ios.js.
 *
 * Everything is prefixed .ios- and nothing reuses a dossier.css or
 * demo-kit.css class name. Inside the phone the palette, type and metrics
 * are the app's own (GPTheme in Theme.swift), so what a visitor taps here
 * looks like the thing they are about to install. Site type and colour stop
 * at the bezel.
 *
 * The frame is CSS. No device picture, nothing to download, and it holds its
 * shape from 390px up.
 *
 * Controls are descendant-scoped (.ios .ios-x) wherever dossier.css styles
 * the same element type: an element selector beats a lone class, and that
 * once rendered a control at full site scale inside a 320px pane.
 */

.ios{ margin:var(--s-4) 0 0; }

/* ── the chrome around the phone ────────────────────────────────────── */

.ios-pills{ display:flex; gap:6px; margin-bottom:var(--s-3); flex-wrap:wrap; }
.ios .ios-pill{
  font-family:var(--sans); font-size:var(--t-xs); letter-spacing:.02em;
  padding:0.4rem 0.95rem; border:1px solid var(--rule); border-radius:999px;
  background:var(--paper-2); color:var(--ink-2); cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.ios .ios-pill:hover{ border-color:var(--rule-strong); color:var(--ink); }
.ios .ios-pill.on{ background:var(--blue); border-color:var(--blue); color:#f4f9fd; }

.ios-under{ display:flex; justify-content:center; margin-top:0.7rem; }
.ios .ios-restart{
  background:none; border:1px solid var(--rule); border-radius:3px;
  color:var(--ink-2); font-family:var(--sans); font-size:var(--t-xs);
  padding:0.22rem 0.6rem; cursor:pointer;
}
.ios .ios-restart:hover{ border-color:var(--rule-strong); color:var(--ink); }
.ios .ios-restart[hidden]{ display:none; }

/* ── the phone ──────────────────────────────────────────────────────── */

.ios-phone{
  width:min(332px,100%); height:684px; margin:0 auto; padding:9px;
  background:#1b1c20; border-radius:47px;
  box-shadow:0 22px 48px -26px rgba(10,25,45,.6), 0 0 0 1px rgba(10,25,45,.25);
  display:flex; flex-direction:column;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  color:#111111;
}
.ios-phone *{ box-sizing:border-box; }
.ios-phone p, .ios-phone h1{ margin:0; }

.ios-status{
  flex:0 0 auto; height:38px; background:#f6f7f8;
  border-radius:38px 38px 0 0; display:flex; align-items:center;
  padding:6px 24px 0; position:relative;
}
.ios-time{ font-size:12.5px; font-weight:600; letter-spacing:-.2px; }
.ios-notch{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:92px; height:23px; background:#1b1c20; border-radius:999px;
}
.ios-signal{ margin-left:auto; display:flex; gap:2px; align-items:flex-end; }
.ios-signal i{ width:3.3px; background:#111; border-radius:1.5px; display:block; }
.ios-signal i:nth-child(1){ height:4.7px; }
.ios-signal i:nth-child(2){ height:7px; }
.ios-signal i:nth-child(3){ height:9.7px; }

.ios-home{
  flex:0 0 auto; height:22px; background:#f6f7f8;
  border-radius:0 0 38px 38px; display:flex; align-items:center;
  justify-content:center;
}
.ios-home::after{
  content:''; width:108px; height:4px; border-radius:999px;
  background:#111; opacity:.75;
}

.ios-screen{
  flex:1 1 auto; min-height:0; background:#f6f7f8;
  display:flex; flex-direction:column;
}

/* ── the page being read ────────────────────────────────────────────── */

/* The app opens the page in a web view and reads it there. So the page is
   really here, really scrolling, sitting behind the screen. It shows through
   while the scan runs and is covered the rest of the time, which is what the
   app looks like. */
.ios-web{
  position:absolute; left:9px; right:9px; top:47px; bottom:31px;
  background:#f6f7f8; overflow:hidden; pointer-events:none;
}
.ios-web iframe{
  width:100%; height:100%; border:0; display:block;
  transform:scale(.78); transform-origin:0 0; width:128%; height:128%;
}
.ios-phone{ position:relative; }
/* The app is drawn over the page it is reading, not under it. */
.ios-status, .ios-screen, .ios-home{ position:relative; z-index:1; }
.ios-phone:not(.web-on) .ios-web{ visibility:hidden; }
/* Only the sign-in sheet shows the page. Everywhere else the app is over it. */
.ios-phone.web-on .ios-screen{ background:transparent; }

/* The notice the app floats over its own navigation bar while a run is in
   flight. It sits ON the bar, not above the list, and the list behind it is
   opaque: the web view is underneath the whole screen, never seen through it. */
.ios-working{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  z-index:5; display:inline-flex; align-items:center; white-space:nowrap;
  background:rgba(233,235,238,.96); border-radius:999px;
  padding:5px 12px; font-size:11.5px; font-weight:500; color:#111111;
  box-shadow:0 8px 20px -14px rgba(10,25,45,.55);
}
.ios-live-dot{
  width:6px; height:6px; border-radius:50%; background:#ec4b4b;
  display:inline-block; margin-right:6px; vertical-align:middle;
}
/* The null mark stands in the count line while the run is finding. */
.ios-finding{
  display:inline-block; width:16px; height:16px; vertical-align:-3px;
  margin-right:6px;
  animation:iosrock 2.4s ease-in-out infinite;
}
@keyframes iosrock{
  0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); }
}
.ios-finding-row{
  display:flex; align-items:center; width:100%; gap:8px;
}
.ios-finding-row .ios-foot-note{ text-align:left; }

/* ── the sign-in sheet ──────────────────────────────────────────────── */

.ios-sheet-top{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:9px 12px; background:#f6f7f8;
  border-radius:14px 14px 0 0;
}
.ios-sheet-title{ font-size:15.5px; font-weight:700; letter-spacing:-.2px; }
.ios-sheet-sp{ flex:1 1 auto; }
.ios-sheet-top .ios-link{ min-width:56px; text-align:left; }
.ios-loadbar{ flex:0 0 auto; height:3px; background:#e4e7ea; overflow:hidden; }
.ios-loadbar i{
  display:block; height:100%; width:38%; background:#365899;
  animation:iosload 1.5s ease-in-out infinite;
}
@keyframes iosload{
  0%{ transform:translateX(-100%); } 100%{ transform:translateX(320%); }
}
.ios-sheet-body{ flex:1 1 auto; min-height:0; }

/* ── navigation bar ─────────────────────────────────────────────────── */

.ios-nav{
  flex:0 0 auto; height:42px; display:flex; align-items:center;
  padding:0 5px; border-bottom:1px solid #dddddd; position:relative;
}
.ios-nav-l, .ios-nav-r{ flex:1 1 0; min-width:0; display:flex; align-items:center; }
.ios-nav-r{ justify-content:flex-end; }
.ios-nav-t{
  position:absolute; left:50%; transform:translateX(-50%);
  max-width:58%; font-size:14px; font-weight:600; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ios .ios-back{
  background:none; border:0; color:#365899; font-family:inherit;
  font-size:14px; cursor:pointer; padding:5px 4px 5px 2px;
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ios-chev{ display:inline-flex; }
.ios-chev svg{ width:8px; height:13px; display:block; }
.ios-chev-r{ color:#6a6a6a; transform:scaleX(-1); }
/* Circled, the way the app wears it. */
.ios .ios-ell{
  background:#ffffff; border:1px solid #c9d4e6; border-radius:50%;
  color:#365899; cursor:pointer;
  width:30px; height:30px; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.ios .ios-ell:hover{ background:#eaeef5; }

/* Home wears the mark and the wordmark, with two glyphs on the right. Those
   two are scenery: inert, and hidden from anything that reads the page. */
.ios-nav-home{ padding:0 13px; gap:7px; }
.ios-brand{ display:inline-flex; align-items:center; gap:7px; min-width:0; }
.ios-brand img{ display:block; width:20px; height:20px; }
.ios-brand b{ font-size:15px; font-weight:700; letter-spacing:-.4px; }
.ios-glyph{
  flex-shrink:0; width:26px; height:26px; color:#365899;
  display:flex; align-items:center; justify-content:center;
}
.ios-glyph svg{ width:19px; height:19px; display:block; }

.ios-menu{
  position:absolute; top:40px; right:6px; width:196px; z-index:5;
  background:#ffffff; border:1px solid #dddddd; border-radius:13px;
  overflow:hidden; box-shadow:0 12px 28px -14px rgba(10,25,45,.45);
  display:flex; flex-direction:column;
}
.ios .ios-menu-b{
  background:none; border:0; border-bottom:1px solid #eeeeee;
  font-family:inherit; font-size:14px; color:#111111; text-align:left;
  padding:0 13px; min-height:42px; cursor:pointer;
}
.ios .ios-menu-b:last-child{ border-bottom:0; }
.ios .ios-menu-b:hover{ background:#eaeef5; }
.ios .ios-menu-b:disabled{ color:#6a6a6a; cursor:default; background:none; }
.ios .ios-menu-b.on{ color:#365899; font-weight:600; }
.ios .ios-menu-b.on::after{ content:' \2713'; }
/* The filter menu belongs to the control row, not to the bar. */
.ios-menu.under{ top:42px; right:0; width:168px; }

/* ── the scrolling screen ───────────────────────────────────────────── */

.ios-view{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:13px 14px 18px; display:flex; flex-direction:column; gap:11px;
}
/* A flex column squeezes its children when the content overflows, and the
   progress bar has no content of its own to hold it open. It measured 0px
   tall and simply was not there. */
.ios-view > *{ flex:0 0 auto; }
.ios-foot{
  flex:0 0 auto; background:#f6f7f8; border-top:1px solid #dddddd;
  padding:9px 14px 9px; display:flex; flex-direction:column; gap:5px;
}

.ios-h1{
  font-size:27px; font-weight:700; letter-spacing:-.9px; line-height:1.08;
  color:#111111;
}
.ios-h1.tight{ font-size:22px; letter-spacing:-.6px; }
.ios-h1.big{ font-size:31px; letter-spacing:-1px; }
/* On the detail screen the item is the heading: it is what was opened. */
.ios-h1.read{
  font-size:19px; font-weight:400; letter-spacing:-.25px; line-height:1.4;
  white-space:pre-line;
}
.ios-price{ font-size:21px; font-weight:600; color:#111111; }
.ios-h1:focus{ outline:none; }
.ios-h1:focus-visible{ outline:2px solid #365899; outline-offset:3px; }

.ios-acct-line{ font-size:11.5px; color:#666666; }
.ios-count{ font-size:13px; font-weight:600; color:#111111; }
.ios-count.big{ font-size:17px; }
.ios-lede{ font-size:13px; color:#666666; line-height:1.4; }
.ios-line2{ font-size:18px; font-weight:600; color:#111111; }
.ios-line2.sm{ font-size:15px; }
.ios-strong{ font-size:13px; font-weight:600; color:#111111; }
.ios-foot-note{ font-size:11.5px; color:#666666; }
.ios-foot-note.tall{
  min-height:40px; display:flex; align-items:center; justify-content:center;
}
.ios-mark{ display:block; width:58px; height:58px; margin-top:2px; }

/* A link inside the phone, which is a link: it takes you to the app, where
   the account is yours. */
.ios .ios-alink{
  align-self:flex-start; color:#365899; font-size:14px; font-weight:600;
  text-decoration:none; margin-top:-4px;
}
.ios .ios-alink:hover{ text-decoration:underline; }

/* ── sort, filter and search ────────────────────────────────────────── */

.ios-tools{ display:flex; align-items:center; gap:8px; position:relative; }
.ios .ios-sort{
  display:inline-flex; align-items:center; gap:7px; font-family:inherit;
  font-size:13.5px; font-weight:600; color:#365899; background:#ffffff;
  border:1px solid #dddddd; border-radius:999px; padding:8px 14px;
  cursor:pointer;
}
.ios .ios-sort:hover{ background:#eaeef5; }
.ios-sortg{ display:flex; }
.ios-sortg svg{ width:15px; height:15px; display:block; }
.ios .ios-round{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:#ffffff; border:1px solid #dddddd; color:#365899;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  padding:0;
}
.ios .ios-round svg{ width:17px; height:17px; display:block; }
.ios .ios-round:hover{ background:#eaeef5; }
.ios .ios-round.on{ background:#eaeef5; border-color:#365899; }

.ios-search{ display:flex; }
.ios input.ios-find{
  width:100%; font-family:inherit; font-size:14px; color:#111111;
  background:#ffffff; border:1px solid #cccccc; border-radius:11px;
  min-height:38px; padding:0 13px;
}
.ios input.ios-find:focus{ outline:none; border:2px solid #365899; padding:0 12px; }

/* ── cards ──────────────────────────────────────────────────────────── */

.ios-card{
  background:#ffffff; border:1px solid #dddddd; border-radius:17px;
  padding:13px; display:flex; flex-direction:column; gap:8px; width:100%;
}
.ios-card.on{
  background:#eaeef5; border-color:#365899;
  box-shadow:inset 0 0 0 .5px #365899;
}
.ios-card-h{ display:flex; align-items:center; gap:7px; min-height:26px; }
.ios-kind{ font-size:11.5px; color:#666666; flex-shrink:0; }
.ios-badge{
  font-size:11.5px; font-weight:600; color:#365899; background:#eaeef5;
  border-radius:999px; padding:3px 8px; flex-shrink:0;
}
.ios-note{
  font-size:10.5px; color:#6a6a6a; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ios-ronly{ font-size:10.5px; color:#6a6a6a; flex-shrink:0; }
.ios-sp{ flex:1 1 auto; }
.ios-detail{ font-size:11.5px; color:#666666; }
.ios-when{ font-size:11px; font-weight:600; color:#365899; }

.ios-text{
  font-size:16px; line-height:1.34; letter-spacing:-.2px; color:#111111;
  white-space:pre-line;
}
.ios-text.clamp, .ios-text.two{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.ios-text.clamp{ -webkit-line-clamp:6; }
.ios-text.two{ -webkit-line-clamp:2; font-size:13px; letter-spacing:0; }
.ios-read{ display:flex; flex-direction:column; gap:5px; }
/* The small picture a row carries when the item had one. */
.ios-thumb{
  display:block; width:54px; height:54px; border-radius:11px; flex-shrink:0;
  border:1px solid #dddddd; object-fit:cover;
  background:linear-gradient(170deg, #c6d9ea 0%, #dce6ed 50%, #e2d8c7 100%);
}
.ios-thumb.big{ width:112px; height:112px; border-radius:14px; }
.ios .ios-more{
  background:none; border:0; color:#365899; font-family:inherit;
  font-size:13px; font-weight:600; padding:2px 0; cursor:pointer;
  align-self:flex-start;
}

.ios .ios-pick{
  background:none; border:0; cursor:pointer; flex-shrink:0;
  width:34px; height:34px; margin:-4px -6px -4px 0;
  display:flex; align-items:center; justify-content:center;
}
.ios-dot{
  width:23px; height:23px; border-radius:50%; background:#ffffff;
  border:1.5px solid #666666; display:block; position:relative;
  transition:background .14s ease, border-color .14s ease;
}
.ios .ios-pick.on .ios-dot{ background:#365899; border-color:#365899; }
.ios-dot::after{
  content:''; position:absolute; left:6.5px; top:4px;
  width:6px; height:10px; border:2px solid #ffffff; border-top:0;
  border-left:0; border-radius:1px; transform:rotate(42deg) scale(0);
  transition:transform .14s ease;
}
.ios .ios-pick.on .ios-dot::after{ transform:rotate(42deg) scale(1); }

.ios-stack{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.ios-line{
  display:flex; flex-direction:column; gap:3px;
  border-top:1px solid #dddddd; padding-top:6px;
}
/* A preview row is a line, not a card: it does not need a card's header. */
.ios-line .ios-card-h{ min-height:0; }
.ios-counts{ gap:9px; }
.ios-facts{ gap:0; }
.ios-fact{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; font-size:13px;
}
.ios-fact span{ color:#666666; }
.ios-fact b{ color:#111111; font-weight:400; font-variant-numeric:tabular-nums; }
.ios-fact + .ios-fact{
  border-top:1px solid #dddddd; margin-top:9px; padding-top:9px;
}

.ios-jobtitle{ font-size:15px; font-weight:600; color:#111111; }

/* ── home, the platform picker ──────────────────────────────────────── */

.ios-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ios .ios-pcard{
  align-items:flex-start; text-align:left; gap:6px; cursor:pointer;
  font-family:inherit; padding:11px;
}
.ios .ios-pcard:hover{ border-color:#c9d4e6; background:#fcfdff; }
.ios-mono{
  width:35px; height:35px; border-radius:10px; background:#eaeef5;
  color:#365899; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ios-pname{ font-size:15px; font-weight:700; color:#111111; letter-spacing:-.3px; }
.ios-pcoll{ font-size:11.5px; color:#666666; line-height:1.3; }

.ios-tabs{
  flex:0 0 auto; display:flex; background:#f6f7f8;
  border-top:1px solid #dddddd; padding:6px 0 4px;
}
.ios-tab{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9.5px; color:#8a8f98;
}
.ios-tab.on{ color:#365899; }
.ios-tab svg{ width:19px; height:19px; display:block; }

/* ── buttons ────────────────────────────────────────────────────────── */

.ios .ios-b{
  width:100%; font-family:inherit; font-size:15px; font-weight:600;
  border-radius:13px; min-height:46px; padding:10px 14px; cursor:pointer;
  border:0; text-align:center;
}
.ios .ios-b1{ background:#365899; color:#ffffff; }
.ios .ios-b1:hover{ background:#2b477a; }
.ios .ios-b1.bad{ background:#ff3b30; }
.ios .ios-b1.bad:hover{ background:#e6352b; }
.ios .ios-b1:disabled, .ios .ios-b1.bad:disabled{
  background:#eeeeee; color:#6a6a6a; cursor:default;
}
.ios .ios-b2{ background:#ffffff; color:#365899; border:1px solid #cccccc; }
.ios .ios-b2:hover{ background:#eaeef5; }
.ios .ios-b3{
  background:none; color:#365899; font-weight:400; min-height:38px;
  border-radius:10px;
}
.ios .ios-b3:hover{ background:#eaeef5; }
.ios .ios-keep{ width:auto; padding:6px 9px; font-size:13.5px; min-height:34px; }
.ios-row{ display:flex; align-items:center; gap:8px; }
/* Two links on one row, one at each end, the way the receipt carries them. */
.ios-row.split{ justify-content:space-between; }
.ios-row.split .ios-b{ width:auto; padding:10px 4px; }
.ios-cap{ font-size:11px; color:#666666; flex-shrink:0; }
.ios .ios-link{
  background:none; border:0; color:#365899; font-family:inherit;
  font-size:13.5px; font-weight:600; padding:6px 4px; cursor:pointer;
}

.ios-field{ display:flex; flex-direction:column; gap:7px; }
.ios-label{ font-size:13px; font-weight:500; color:#111111; }
.ios input.ios-input{
  width:100%; font-family:inherit; font-size:16px; font-weight:600;
  letter-spacing:2px; color:#111111; background:#ffffff;
  border:1px solid #cccccc; border-radius:11px; min-height:46px;
  padding:0 13px; text-transform:uppercase;
}
.ios input.ios-input:focus{ outline:none; border:2px solid #365899; padding:0 12px; }

/* ── the unlock sheet and the share card ─────────────────── */

.ios-over{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.ios-behind{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  pointer-events:none;
}
.ios-dim{ position:absolute; inset:0; background:rgba(17,17,17,.32); }
.ios-sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:80%;
  background:#f6f7f8; border-radius:14px 14px 0 0;
  display:flex; flex-direction:column;
}
.ios-sheetbody{
  padding:2px 14px 20px; display:flex; flex-direction:column; gap:11px;
}
.ios-grab{
  flex:0 0 auto; height:22px; display:flex; align-items:center;
  justify-content:center;
}
.ios-grab::after{
  content:''; width:38px; height:5px; border-radius:999px; background:#dddddd;
}

/* A 9:16 card, the shape it is shared as, sized so the switch under it is
   on the screen with it. */
.ios-poster{
  aspect-ratio:9 / 16; height:326px; width:auto; max-width:100%;
  align-self:center; background:#ffffff;
  border:1px solid #dddddd; border-radius:15px; padding:14px;
  display:flex; flex-direction:column; gap:7px; overflow:hidden;
}
.ios-poster-mark{ display:block; width:26px; height:26px; }
.ios-poster-h{
  font-size:21px; font-weight:700; letter-spacing:-.8px; line-height:1.05;
  color:#111111; margin-top:4px;
}
.ios-poster-n{ font-size:11px; font-weight:500; color:#365899; }
.ios-poster-f{
  font-size:11px; font-weight:700; letter-spacing:-.3px; color:#111111;
  border-top:1px solid #dddddd; padding-top:7px;
}

.ios .ios-switch{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:10px; min-height:52px; cursor:pointer; text-align:left;
  font-family:inherit;
}
.ios-knob{
  flex-shrink:0; width:45px; height:27px; border-radius:999px;
  background:#dddddd; position:relative; transition:background .16s ease;
}
.ios-knob::after{
  content:''; position:absolute; top:2px; left:2px; width:23px; height:23px;
  border-radius:50%; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .16s ease;
}
.ios-knob.on{ background:#365899; }
.ios-knob.on::after{ transform:translateX(18px); }

/* ── run progress ───────────────────────────────────────────────────── */

.ios-bar{ display:flex; gap:3px; height:7px; }
.ios-seg{ flex:1 1 0; background:#e3e6ea; border-radius:2px; overflow:hidden; }
.ios-seg > span{ display:block; height:100%; background:#365899; transition:width .22s ease; }
.ios-prog{
  font-size:12px; font-weight:600; color:#365899;
  display:flex; align-items:center; gap:7px;
}
.ios-spin{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  border:2px solid #cfd8e6; border-top-color:#365899;
  animation:ios-spin .7s linear infinite;
}
@keyframes ios-spin{ to{ transform:rotate(360deg); } }

.ios button:focus-visible, .ios input:focus-visible{
  outline:2px solid #365899; outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .ios-spin{ animation:none; }
  .ios-knob, .ios-knob::after{ transition:none; }
  .ios-seg > span{ transition:none; }
  .ios-dot, .ios-dot::after{ transition:none; }
}

@media (max-width:520px){
  .ios-phone{ height:652px; }
  .ios-h1{ font-size:25px; }
  .ios-h1.big{ font-size:28px; }
  .ios-h1.read{ font-size:18px; }
}

/* A heading that exists for focus and for assistive technology, not for the eye.
   The share screen's title is the poster itself. */
.ios-view .ios-h1.vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Status bar glyphs. Scenery, hidden from assistive technology with the bar. */
.ios-signal i:nth-child(4){ height:12.3px; }
.ios-wifi{
  width:17px; height:12.3px; margin-left:5px; display:block; color:#111;
}
.ios-batt{
  width:25px; height:12px; margin-left:5px; border:1px solid rgba(17,17,17,.38);
  border-radius:3.5px; padding:1.5px; box-sizing:border-box; position:relative;
}
.ios-batt b{ display:block; width:100%; height:100%; background:#111; border-radius:1.5px; }
.ios-batt::after{
  content:""; position:absolute; right:-3px; top:4px; width:2px; height:4px;
  background:#111; border-radius:0 1px 1px 0; opacity:.38;
}

/* ── a long list ────────────────────────────────────────────────────── */

.ios .ios-grow{
  align-self:center; background:#ffffff; border:1px solid #dddddd;
  border-radius:999px; color:#365899; font-family:inherit; font-size:13px;
  font-weight:600; padding:7px 15px; cursor:pointer;
}
.ios .ios-grow:hover{ background:#eef2f7; }
.ios-end{
  align-self:center; color:#666666; font-size:12.5px; padding:3px 0 1px;
}

/* The row body is the way in to one item, as it is in the app: the circle
   picks it, the words open it. */
.ios .ios-body-tap{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:15.5px; line-height:1.36; color:#111111;
  text-align:left; display:block; width:100%; letter-spacing:-.1px;
  white-space:pre-wrap;
}
.ios .ios-body-tap.clamp{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ios .ios-body-tap:hover{ color:#365899; }

.ios-step{ display:flex; align-items:center; width:100%; }

/* ── the door into a platform ───────────────────────────────────────── */

.ios-door{
  display:flex; flex-direction:column; gap:11px; align-items:flex-start;
  margin-top:24px;
}
.ios-door .ios-mark{ display:block; }
.ios-door .ios-b, .ios-door .ios-blink{ width:100%; }
.ios .ios-blink{
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}

@media (prefers-reduced-motion: reduce){
  .ios-loadbar i{ animation:none; width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .ios-finding{ animation:none; }
}