/* iOS page (spec L10), both languages: intro, six numbered step cards, the two Shortcut screenshots and the database-ID
   extractor. One page, no tabs. js-class.v1.js (sync, in <head>) adds .js to <html> before first paint; ios.v1.js only
   wires behaviour. Everything is neutral (spec R2): greys from the tokens. Plum appears only on the buttons, links and
   focus rings (L2). */

.ios { padding-block-end: clamp(48px, 7vw, 88px); }
.ios-head { padding-block: clamp(24px, 5vw, 64px) clamp(24px, 4vw, 40px); }
.ios-head h1 { max-width: 14em; }
.ios-head .lede { max-width: var(--measure); }

/* Copy buttons can't work without JS, so they appear only once the script runs; so do the words that point at the
   extractor box ("The box below finds it for you."), which is hidden then too. */
html:not(.js) :is(.btn-copy, .needs-js) { display: none; }

/* ---------- Steps ---------- */
.steps-wrap {
  --num: 36px;
  --num-gap: 20px;
  --num-top: 22px;
  --steps-gap: 20px;
}
.steps { display: grid; gap: var(--steps-gap); margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: var(--num) minmax(0, 1fr); column-gap: var(--num-gap); align-items: start; }
.step-num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  inline-size: var(--num); block-size: var(--num); margin-block-start: var(--num-top);
  border: 1.5px solid var(--line-2); border-radius: 50%;
  background: var(--bg); color: var(--text);
  font-weight: 650; font-size: 0.9375rem;
}
.step-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg);
}
.step-card > .step-text { max-inline-size: var(--measure); }

/* ---------- Screenshots ----------
   The real screenshots sit under the step text in a neutral frame (1px --line-2, 12px radius, --bg-2 padding). The frame hugs the
   image; the image is never wider than its width attribute (its readable size) or the card. In dark mode the light screenshots
   stay as they are inside the dark frame. The red circles are the source's own annotation. */
.shot {
  justify-self: start;
  inline-size: fit-content; max-inline-size: 100%;
  margin: 0; padding: 8px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--bg-2);
}
.shot > a { display: block; border-radius: 6px; text-decoration: none; } /* opens the full-size (2x) file */
.shot img {
  display: block;
  max-inline-size: 100%; block-size: auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line);
}
/* The screenshots load lazily and block-size is auto, so Chrome wants each one's ratio in CSS too (DevTools issue "Lazy-loaded
   images should have explicit dimensions"); these match their width/height attributes. */
.shot img[src$="shortcut-database-id-1x.jpg"] { aspect-ratio: 512 / 539; }
.shot img[src$="shortcut-api-key-1x.jpg"] { aspect-ratio: 512 / 314; }
.step-text { min-inline-size: 0; }
.step-text :is(h2, h3) { font-size: 1.1875rem; margin-block-end: 8px; }
.step-text p { color: var(--text-2); }
.step-text p + p, .step-text p + ul, .step-text ul + p { margin-block-start: 12px; }
.step-text .step-action { margin-block: 16px 0; } /* the card's own padding is the space below */
.step-text code, .extractor code, .step-card > .step-body code {
  padding: 0.1em 0.35em; border-radius: 4px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); font: 500 0.875em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.btn-copy { min-block-size: 36px; padding-inline: 14px; font-size: 0.875rem; cursor: pointer; font-family: var(--font); }

@media (max-width: 520px) {
  .steps-wrap { --num: 30px; --num-gap: 10px; --num-top: 16px; --steps-gap: 16px; }
  .step-num { font-size: 0.875rem; }
  .step-card { padding: 16px 14px; gap: 16px; }
}

/* ---------- Extractor ---------- */
/* No card of its own (owner, 2026-11-10): the link field, then the ID in a code block styled like the step's inline code,
   with its label and Copy button in the block's header row. */
.extractor { display: grid; gap: 8px; }
.extractor label { font-weight: 600; }
.extractor input {
  min-block-size: 44px; inline-size: 100%; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text);
  font: 400 1rem/1.4 var(--font);
}
.extractor input::placeholder { color: var(--text-2); opacity: 1; }
.extractor input:focus-visible { outline-offset: 0; border-color: var(--text); }
/* Without JS the finder can't work: hide the form, keep the help text that explains where the ID sits in the link. */
.extractor-form { display: contents; }
html:not(.js) .extractor-form { display: none; }
.extractor-form > label, .extractor-form > input { order: -1; }
.extractor-form > :not(label):not(input) { order: 1; }
/* The help is the end of step 5's text: a paragraph of the card, just above the box. Without JS the box has nothing to
   show, so only that paragraph stays, without its last words about the box (.needs-js, above). */
.step-card > .step-body { max-inline-size: var(--measure); color: var(--text-2); }
html:not(.js) .ios .extractor { display: none; }
.extractor-error { color: var(--text); font-weight: 600; font-size: 0.9375rem; }
/* The error is neutral text, so a warning icon (not colour) sets it apart. The icon is a mask over currentColor; the words
   stay in the markup and data-msg-invalid. */
.extractor-error:not([hidden]) { display: flex; align-items: flex-start; gap: 8px; }
.extractor-error::before {
  content: ""; flex: none;
  inline-size: 16px; block-size: 16px; margin-block-start: calc(0.5lh - 8px);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2 15.2 14H.8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.9' r='.95'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2 15.2 14H.8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.9' r='.95'/%3E%3C/svg%3E") center / contain no-repeat;
}
.extractor-result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  margin-block-start: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2);
}
.extractor-result label {
  grid-row: 1; grid-column: 1; padding-inline: 14px;
  font-weight: 500; font-size: 0.8125rem; color: var(--text-2);
}
.extractor-result .btn-copy { grid-row: 1; grid-column: 2; margin: 6px; }
.extractor-result output {
  grid-row: 2; grid-column: 1 / -1;
  min-block-size: 48px; display: flex; align-items: center; padding: 12px 14px;
  border-block-start: 1px solid var(--line);
  color: var(--text);
  font: 500 0.9375rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
}
/* The ID is Latin and reads left to right on the Arabic page too. */
.extractor-result output { direction: ltr; unicode-bidi: isolate; }
:lang(ar) .extractor-result output { justify-content: flex-end; }

@supports (corner-shape: squircle) {
  .step-card { corner-shape: squircle; }
}