/* Cork site: the iPhone "Show me how" page (shortcuts.html), cork-howto.css v1, 2026-09-29.
   Loaded after cork.css and cork-pages.css by shortcuts.html only. No new colours: ink and red ink on paper,
   the changelog tint for the key step, print borders from cork.css. Pairs in tools/contrast-manifest.json. */
article.howto .lead{margin-top:.2rem}
article.howto ol.hsteps{list-style:none;margin:1rem 0 0;padding:0;counter-reset:step}
article.howto ol.hsteps > li{counter-increment:step;padding:1.3rem 0 1.5rem;border-top:1px dashed var(--prule)}
article.howto ol.hsteps > li:first-child{border-top:0;padding-top:.6rem}
article.howto .say{display:flex;gap:.75rem;align-items:flex-start}
article.howto .say::before{content:counter(step);flex:0 0 auto;width:2rem;height:2rem;margin-top:.1rem;border-radius:50%;
  border:2px solid var(--pred);color:var(--pred);font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.75rem;text-align:center}
article.howto .say .txt{flex:1 1 auto;min-width:0}
article.howto .say p{margin:0}
article.howto .say p+p{margin-top:.5rem}
article.howto .shots{display:flex;flex-direction:column;align-items:center;gap:14px;margin:1rem 0 0}
article.howto .shots img{display:block;width:100%;max-width:280px;height:auto;border:5px solid var(--print);border-radius:10px;
  box-shadow:0 1px 1px rgba(0,0,0,.22),0 12px 20px -10px rgba(30,12,2,.55)}
article.howto ol.hsteps > li.key{margin:.6rem 0;padding:1.2rem 14px 1.4rem;border-top:0;border-left:4px solid var(--mustard);border-radius:3px;background:rgba(201,162,39,.13)}
article.howto ol.hsteps > li.key + li{border-top:0}
article.howto .keytag{display:block;margin:0 0 .35rem;color:var(--pred);font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
article.howto .android{margin-top:.8rem}
@media (min-width:700px){
  article.howto ol.hsteps > li{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start}
  article.howto .shots{margin-top:0}
}