/* Step screens (js/core/stepViews.js). Composed from ui.css components; tokens only. */
/* An app shell: the document itself never scrolls, so the browser's own bars cannot move the top bar or the dock. The lists scroll inside .sp-scroll / .sp-player. */
body.sp-on { position: fixed; inset: 0; overflow: hidden; padding: 0; background: var(--c-bg); }
body.sp-on #header { display: none; }
body.sp-on .content { padding: 0; }   /* the bars and cards bring their own gutter */
.sp { max-width: 28rem; margin: 0 auto; color: var(--c-text); font-family: var(--font-ui); }
.ui-icon-btn--bare { background: none; box-shadow: none; color: var(--c-soft); width: var(--h-cell); }

/* Player: card (about a third) above the chart (the rest), between the bar and the dock.
   --sp-top / --sp-bottom are measured in JS (spSyncPlayerLayout); vh units mis-report
   inside Chrome Custom Tabs, so the container is pinned between the two bars instead. */
/* The text column is 28rem wide and centred; the gutter is what is left each side. The chart bleeds by exactly that
   gutter, so it reaches the screen edges however wide the phone is. */
.sp-player { --sp-gutter: max(var(--s-4), calc((100vw - 28rem) / 2)); position: fixed; left: 0; right: 0; top: var(--sp-top, var(--h-bar)); bottom: var(--sp-bottom, var(--h-dock));
  display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--sp-gutter); overflow-y: auto; }
.sp-card { flex: 1 0 33%; }
.sp-card--nochart { flex: 0 0 auto; }
.sp-card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.sp-read, .sp-pass { font-size: var(--fs-meta); color: var(--c-muted); }
.sp-ins { margin: var(--s-3) 0 var(--s-5); font-size: var(--fs-instruction); font-weight: var(--fw-medium); line-height: 1.3; color: var(--c-text); }

.sp-chart-region { flex: 1 1 67%; min-height: var(--h-chart-min); margin: 0 calc(-1 * var(--sp-gutter)); display: flex; flex-direction: column;
  background: var(--c-card); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.sp-cw-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The window never scrolls vertically (a full-chart view comes later); sideways it does. */
.sp-cw-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; background: var(--c-well); }
.sp-cw { display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 100%; min-height: 100%; justify-content: center; align-items: stretch; padding: var(--s-2) 0 var(--s-3); user-select: none; }
.sp-cw-head, .sp-cw-row { display: grid; grid-template-columns: var(--cw-cols); justify-content: center; align-items: center; gap: 2px; text-align: center; }
.sp-cw-head { padding-bottom: var(--s-1); font-size: var(--fs-caps); color: var(--c-muted); }
.sp-cw-n { font-size: var(--fs-caps); color: var(--c-muted); text-align: center; }
.sp-cw-row { opacity: .5; padding: 1px 0; }
.sp-cw-row.d1 { opacity: .8; }
.sp-cw-row.d2 { opacity: .65; }
.sp-cw-row.active { opacity: 1; }
.sp-cw-row.active .sp-cw-n { color: var(--c-sage-strong); font-weight: var(--fw-bold); }
.sp-cw-row .cc { width: var(--h-cell); height: var(--h-cell); aspect-ratio: 1; background: var(--c-card); border: 0; border-radius: var(--r-cell); }
.sp-cw-row .cc-sym { color: var(--c-cell-ink); }
.sp-cw-row .cc.cc-e { background: transparent !important; }
.sp-cw-row .cc.cc-col, .sp-cw-row.active .cc.cc-col:not(.cc-e) { background: var(--cc-bg); }
.sp-cw-row .cc.cc-col .cc-sym { color: var(--cc-fg); }
.sp-cw-mark { box-shadow: 0 0 0 2px var(--c-sage-strong); }

.sp-legend { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-meta); color: var(--c-soft); white-space: nowrap; overflow: hidden; }
.sp-leg { display: inline-flex; align-items: center; gap: var(--s-2h); }
.sp-leg-cc { width: var(--h-cell-mini); height: var(--h-cell-mini); display: inline-flex; background: var(--c-cell); border-radius: var(--r-cell); color: var(--c-cell-ink); }
.sp-leg-more { color: var(--c-muted); }
.sp-legend .ui-icon-btn { margin-left: auto; }

/* Repeat state */
.sp-repeat-label { margin-bottom: var(--s-1); }
.sp-pass-line { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.sp-pass-n { flex: 1; font-size: var(--fs-heading); font-weight: var(--fw-semibold); }
.sp-rlist { list-style: none; margin: var(--s-2) 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: var(--s-2h); }
.sp-rrow { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-3); border-radius: var(--r-small); font-size: var(--fs-lead); line-height: 1.4; color: var(--c-soft); cursor: pointer; }
.sp-rrow.sel { background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-text); font-size: var(--fs-instruction); font-weight: var(--fw-medium); line-height: 1.3; }
.sp-rrow.done { color: var(--c-muted); }
.sp-rrow-n { width: var(--h-cell); flex: none; font-size: var(--fs-caps); font-weight: var(--fw-bold); letter-spacing: var(--ls-small); }
.sp-rrow-t { flex: 1; }
.sp-rrow-c { flex: none; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--c-muted); }
.sp-rrow.sel .sp-rrow-c { color: var(--c-sage-strong); font-weight: var(--fw-bold); }

/* Playlist */
.sp-lh { padding: var(--s-1) var(--s-4) var(--s-3); }
.sp-lh-desc { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--c-soft); }
.sp-notes { margin: 0 var(--s-4) var(--s-3); background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.sp-notes-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-3h); background: none; border: 0; font: inherit; font-size: var(--fs-caps); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-soft); cursor: pointer; }
.sp-notes-hint { font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--ls-hint); text-transform: none; color: var(--c-sage-strong); }
.sp-notes-body { padding: 0 var(--s-3h) var(--s-3); font-size: var(--fs-body); line-height: 1.5; color: var(--c-soft); }
.sp-notes-body p { margin: 0 0 var(--s-2); }
.sp-list { padding: 0 var(--s-4); max-width: 28rem; margin: 0 auto; }
.sp-row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3h) var(--s-1); border-bottom: 1px solid var(--c-line); font-size: var(--fs-lead); line-height: 1.4; cursor: pointer; }
.sp-row.selected { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: var(--s-3) 0; padding: var(--s-5) var(--s-5) var(--s-4); cursor: default; }
.sp-row.selected .sp-ins { cursor: pointer; margin-bottom: var(--s-4); }
.sp-row-n { width: var(--w-rownum); flex: none; white-space: nowrap; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text); }
.sp-row-t { flex: 1; }
.sp-row-c { flex: none; font-size: var(--fs-meta); color: var(--c-muted); }
.sp-row.done { color: var(--c-muted); }
.sp-row.done .sp-row-n { color: var(--c-muted); }
.sp-open-btn { height: var(--h-tap); margin-top: var(--s-3); background: var(--c-card); color: var(--c-soft); border: 0; border-radius: var(--r-control); box-shadow: 0 0 0 1px var(--c-line); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); cursor: pointer; }
.sp-mc-wrap { margin: 0 calc(-1 * var(--s-5)) var(--s-4); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); cursor: pointer; }
.sp-mc-wrap .sp-cw-scroll { overflow-x: auto; }
.sp-browse { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 var(--s-4) var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3h); background: var(--c-line); border-radius: var(--r-control); font-size: var(--fs-meta); color: var(--c-soft); }
.sp-browse button { padding: var(--s-2h) var(--s-3); background: var(--c-sage-strong); color: var(--c-card); border: 0; border-radius: var(--r-small); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.sp-list-head { display: flex; justify-content: space-between; padding: var(--s-2) 0; font-size: var(--fs-caps); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-soft); }
.sp-task { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--c-line); font-size: var(--fs-lead); cursor: pointer; }
.sp-task.done { color: var(--c-muted); text-decoration: line-through; }
.sp-check { width: var(--h-check); height: var(--h-check); flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--c-muted); border-radius: var(--r-cell); font-size: var(--fs-body); color: var(--c-card); }
.sp-task.done .sp-check { background: var(--c-sage-strong); border-color: var(--c-sage-strong); }

.sp-row-sub { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--c-muted); }

.sp-scroll { position: fixed; left: 0; right: 0; top: var(--sp-top, var(--h-bar)); bottom: var(--sp-bottom, var(--h-dock)); max-width: 28rem; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-4); }
.sp-player { overscroll-behavior: contain; }

/* Player heading above the card: a step quieter than the instruction (--fs-instruction) */
.sp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-1) 0; }
.sp-head-t { margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--c-text); }

.sp-legend--bare { border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-card); }

.sp-sh-h { margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-caps); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--c-muted); }
.sp-sh-full { margin-top: var(--s-5); width: 100%; }

.sp-mini .sp-cw-row .cc { width: var(--h-cell-mini); height: var(--h-cell-mini); }

/* Reversed: a slightly darker well with the stitches standing out as light cells; the current row
   is full strength on a sage band, the rest fade into the well. */
.sp-cw-row > :first-child, .sp-cw-head > :first-child, .sp-cw-row > :last-child, .sp-cw-head > :last-child { background: var(--c-well); }
/* The row numbers of whichever end the chart is nearer stay in view while it scrolls sideways. */
.sp-cw-scroll:not(.sp-side-right) .sp-cw-row > :first-child, .sp-cw-scroll:not(.sp-side-right) .sp-cw-head > :first-child { position: sticky; left: 0; z-index: 1; }
.sp-cw-scroll.sp-side-right .sp-cw-row > :last-child, .sp-cw-scroll.sp-side-right .sp-cw-head > :last-child { position: sticky; right: 0; z-index: 1; }

/* A stitch has two states. Default: a light cell with an ink symbol. Current (every stitch of the current
   row, knit included; no-stitch cells stay as they are): the active background, a border ring and a
   coloured symbol. A colourwork cell keeps its yarn colour (inline style wins) and rides its own
   contrast-computed ring (--cc-ring) and symbol colour, as the original chart did. */
.sp-cw-row.active .cc:not(.cc-e) { background: var(--ch-active-bg); box-shadow: inset 0 0 0 1.5px var(--cc-ring, var(--ch-active-border)); }
.sp-cw-row.active .cc-sym { color: var(--ch-active-symbol); }
.sp-cw-row.active .cc.cc-col:not(.cc-e) { background: var(--cc-bg); }
.sp-cw-row.active .cc.cc-col .cc-sym { color: var(--cc-fg); }

/* A card that opens on tap says so; pressed states for the step screens' own buttons */
.sp-row.selected { cursor: pointer; }
.sp-open-btn:active, .sp-rrow:active { background: var(--c-line); }
/* A row change eases in once (after Done, − / +, Mark not done) */
@keyframes sp-enter { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
.sp-enter { animation: sp-enter .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .sp-enter { animation: none; } }

/* The section's name heads the playlist, with its switcher */
.sp-sec-btn { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; background: none; border: 0; font: inherit; font-size: var(--fs-heading); font-weight: var(--fw-semibold); color: var(--c-text); cursor: pointer; }
.sp-lh .sp-lh-desc { margin-top: var(--s-1); }

/* Row names are a first-class piece of information: a real heading on the selected card, a strong
   label on the plain rows, and the status as a small tag. */
.sp-row-h { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--c-soft); }
.sp-row.selected .sp-card-top { align-items: center; justify-content: flex-start; gap: var(--s-2); }
.sp-card-top-r { margin-left: auto; display: inline-flex; gap: var(--s-2); align-items: baseline; }

.sheet-actions--col { flex-direction: column; }

/* The marker flag sits at the right of the row heading, in the playlist card and above the player card alike. */
.sp-card-top-r { align-items: center; }
.sp-head .ui-icon-btn { align-self: center; }