/* =============================================================================
   Opsy website — the Så fungerar det view.

   Same rules as css/site.css: flat plain CSS, kit tokens, the `op-` prefix.
   Loaded after css/home.css, which this view needs as well: its opening and
   the drawing system live there.
   The brief shows this view as a tab widget, one step at a time. Here it is a
   list of the ten steps that stays in view beside ten sections that scroll,
   after the user's two images of 2026-10-06; the copy is the brief's,
   verbatim. The page itself is written in the site repo
   (src/pages/process.njk): this file is its source, copied across by
   scripts/sync-site.mjs.
   Spec: docs/specs/2026-10-06-website-sa-fungerar-det-page.md
   ========================================================================== */

/* --- The process: the navigator beside the steps ----------------------------- */
/* Three tenths and seven, the gap the home page's flow panel has between its
   two columns. The opening above leaves its own 64px, so the block adds no
   step on top; a new section's step separates it from the footer.
   --op-pinned is what stays at the top of the screen while this block
   scrolls: the header, at every width, now that a phone's step bar is at the
   bottom of the screen (Narrow, below). The navigator hangs under it on a
   wide screen and a jump stops clear of it. */
.op-process {
  --op-pinned: var(--op-header-h);
}
.op-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  column-gap: var(--space-10);
  align-items: start;
}
/* The step to the footer is this column's own padding, and so inside the
   grid: the grid is the track the pinned navigator runs along, and the
   navigator is taller than the last step. On the block itself that room lay
   outside the track, and at the last step the navigator was pushed up under
   the header. */
.op-process__body {
  min-width: 0;
  padding-bottom: var(--op-space-section);
}

/* --- The navigator ----------------------------------------------------------- */
/* All ten steps, in view the whole way down: pinned 24px under the header. No
   frame and no ground of its own (the user's image of 2026-10-06; it was a
   card with a guide line through the numbers first): the discs carry it. A
   window too low for ten rows scrolls the list inside itself, so the last
   steps stay reachable.
   A link is padded by 8px so its focus ring has room inside that scrolling
   box, which clips what is drawn outside it; the navigator is pulled out by
   the same 8px, so the discs stand on the page's left axis. */
.op-steps {
  position: sticky;
  top: calc(var(--op-pinned) + var(--space-6));
  max-height: calc(100vh - var(--op-pinned) - var(--space-6) * 2);
  margin-left: calc(var(--space-2) * -1);
  overflow-y: auto;
}
.op-steps__list {
  display: flex;
  flex-direction: column;
}
/* A row is one link, so the whole row is the target, well over the 32px the
   audience needs. Its height comes from the window's: 64px where ten rows
   have the room, down to 56px where they do not, so the list fits a low
   laptop window without scrolling inside itself. The sum: the room under the
   header, less the 72px of the one title that takes two lines, shared among
   the other nine. The body ink, named outright: a link does not inherit it.
   Positioned, to hold its own title where that is taken out of sight (Narrow,
   below): left to a box further out, the hidden titles of the chips beyond
   the screen's edge widen the page. */
.op-steps__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: clamp(56px, (100vh - var(--op-pinned) - var(--space-6) * 2 - 72px) / 9, 64px);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
}
.op-steps__link:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}
/* The number on its disc; its type is the markup's (label-md). The disc is
   one step deeper than the picture panels' mint -- a primitive: the kit's
   only alias for it names a hover -- and one more under the pointer. */
.op-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--genoa-100);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.op-steps__link:hover .op-steps__num {
  background: var(--genoa-200);
}
/* The current step: the one dark disc. Styled off aria-current, which
   js/steps.js moves, so what is shown and what a screen reader announces
   cannot drift apart. After the hover rule, which it outranks by coming
   later: the current disc stays dark under the pointer. */
.op-steps__link[aria-current] .op-steps__num {
  background: var(--brand-primary);
  color: var(--white);
}
.op-steps__link[aria-current] .op-steps__title {
  font-weight: 600;
  color: var(--brand-primary);
}
/* Title over who, with no gap of their own: their leading spaces them. */
.op-steps__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Who does the step, in the quieter ink so the title leads: the secondary
   ink's second job on the site, the user's ruling (website/CLAUDE.md, Text
   ink). */
.op-steps__who {
  color: var(--text-secondary);
}

/* --- A step ------------------------------------------------------------------ */
/* Ten of them down the page, 96px between two: the near step, a block that
   belongs to the one above. No line between them (the user's image of
   2026-10-06; a hairline stood here first). The gap is the step's own padding
   and not a margin, so the steps touch and the middle of the screen is
   always inside one of them (js/steps.js).
   A jump from the navigator stops with the step's first line 24px under what
   is pinned, level with the navigator's top. */
.op-step {
  padding-bottom: var(--op-space-near);
  scroll-margin-top: calc(var(--op-pinned) + var(--space-6));
}
.op-step:last-child {
  padding-bottom: 0;
}
.op-step__title {
  margin-top: var(--space-4);
}
/* Held to the descriptions' one width (css/home.css, .op-intro__lead): 800px,
   the user's ruling, where it was 60ch. At this text's 16px that is some 105
   characters a line where the column gives it the room. */
.op-step__text {
  max-width: 800px;
  margin-top: var(--space-4);
}
/* The picture's panel is the offers' (css/home.css, .op-offer__media) on the
   brand's pale mint: mint is the ground the drawings rule gives a picture of
   the flow, and the pale one lets the white paper, the lit rows and the tag
   stand out (it was one step deeper first). Wider than tall here, with the
   drawing at about three fifths of it, so ten pictures do not make the page
   ten screens long; on a phone it changes shape (Narrow, below). It is also
   the box the tag is placed in. */
.op-step__media {
  position: relative;
  --op-panel: var(--brand-bg);
  aspect-ratio: 2 / 1;
  margin-top: var(--space-8);
}
.op-step__media .op-art {
  width: 62%;
}
/* Who does the step: the tag (css/site.css, Tag) in the panel's top left
   corner, 16px in -- one mint for all four, the user's ruling. Its fill is
   the drawings' lit one, two steps deeper than the panel so it shows there
   -- a primitive: the kit's only alias for it names a border. */
.op-step__who {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--genoa-200);
}

/* --- Motion ------------------------------------------------------------------ */
/* A jump from the navigator scrolls there, and the chip row follows the
   current step, for a reader who has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  :root:has(.op-steps) {
    scroll-behavior: smooth;
  }
  .op-steps__list {
    scroll-behavior: smooth;
  }
}

/* --- Narrow ------------------------------------------------------------------ */
/* One column. The navigator becomes a bar fixed to the bottom of the screen,
   there from the first screen and all the way down the page: the ten numbers
   as chips in one row that scrolls sideways, and nothing else. It was pinned
   to the top first, and the header let go here so that two bars did not
   share the top; the user moved it to the bottom on seeing that (spec, Rev
   4), so the header is pinned on this page as on every other and a jump
   stops clear of the header (--op-pinned keeps its wide value). The current
   step's title stood on a line under the row at first; the user took it out
   (spec, Rev 3): the filled chip says where one is, and the title heads the
   step on the screen. */
@media (max-width: 960px) {
  /* The bar lies over the page's last 69px -- 8px, the row's 4px, a 44px
     chip, 4px, 8px and its hairline -- so the page keeps that much clear
     under its footer and the bar covers nothing. On a phone with a home bar
     both grow by the screen's own inset. */
  .op-page:has(.op-steps) {
    padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  }
  .op-process__grid {
    display: block;
  }
  /* Edge to edge, the row padded by the wrap's 24px gutter so the first chip
     starts on the page's left axis. Here the navigator does have a ground,
     the header's frosted white, since this is a bar that stays and the page
     passes under it. */
  .op-steps {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-topbar);
    max-height: none;
    overflow: visible;
    margin: 0;
    padding-block: var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--brand-border);
    background: color-mix(in srgb, var(--white) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* A scrolling box clips its children's focus ring, so the row is padded by
     the ring's reach. */
  .op-steps__list {
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .op-steps__item {
    flex: none;
  }
  .op-steps__link {
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-full);
  }
  .op-steps__link:focus-visible {
    outline-offset: var(--focus-ring-offset);
  }
  /* Number chips: the same discs, a little larger. 44px is a comfortable
     touch target and 16px numerals are the home page's chips' (css/home.css,
     the flow on a phone). */
  .op-steps__num {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  /* Out of sight, still the chip's name for a screen reader and voice
     control. */
  .op-steps__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* A phone. The drawing takes the offers' share of the panel (css/home.css,
   .op-offer__media) and comes to about 300px, the size the drawings rule
   judges a picture at. That leaves no clear corner for the tag, so the tag
   takes a row of its own above the drawing and the panel is as tall as the
   two need. Between this and 960px the column is still wide and the panel
   keeps its wide shape -- the phone's shape there made each picture most of
   a screen tall. */
@media (max-width: 560px) {
  .op-step__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    aspect-ratio: auto;
    margin-top: var(--space-6);
    padding-block: var(--space-3) var(--space-4);
  }
  .op-step__who {
    position: static;
    align-self: flex-start;
    margin-left: var(--space-3);
  }
  .op-step__media .op-art {
    width: 86%;
  }
}