/* /suunto (public/suunto.php): how to send routes to a Suunto watch. Built on the walk pages' head and the devices page's status pills (walks.css, devices.css);
   nothing here changes another page. Logical properties throughout, so Hebrew and Arabic (dir="rtl" on <html>) mirror by themselves. */

html[lang=ko] .suunto-page { word-break: keep-all; }
.suunto-page .su-sec { margin-top: 32px; }
.suunto-page .su-sec h2 { margin: 0 0 12px; text-wrap: balance; }
.suunto-page .su-sec p { max-width: 70ch; margin: 0 0 10px; }
.suunto-page .su-sec .su-note { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.suunto-page .su-sec .device-marks { margin-top: 26px; }
.suunto-page .su-inen { color: var(--muted); }

/* the two lines of "where this stands" */
.su-status { max-width: 760px; }

/* the steps: a card for each, numbered in a round badge at the start edge */
.su-steps { list-style: none; counter-reset: step; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.su-steps > li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
                 padding: 14px 18px; padding-inline-start: 64px; min-height: 58px; line-height: 1.55; font-size: 15.5px; }
.su-steps > li::before { content: counter(step); position: absolute; inset-inline-start: 16px; inset-block-start: 12px; width: 32px; height: 32px; border-radius: 50%;
                         background: var(--pine); color: #fff; font: 700 16px/32px var(--sans); text-align: center; }
@media (max-width: 480px) {
  .su-steps > li { padding: 12px 14px; padding-inline-start: 54px; }
  .su-steps > li::before { inset-inline-start: 12px; inset-block-start: 10px; }
}