/* ==========================================================================
   AXI-x Shore v0.1 — the score.                      (extension; not SNX core)
   shore.js writes numbers; everything visible about a shore is here.
   A shore (.sh) is a container; its stage (.sh-stage) is an ordinary SNX
   stage on the PAGE's grid — open by default (no box: the sea is the paper),
   boxed on the bench (data-box: the box's floor is the paper too). Pieces are
   the engine's own blocks; the only new marks are the chart (sea cells,
   shown on request) and the staircase of floats a text block wraps.
   ========================================================================== */
.sh{position:relative;z-index:2;--sh-rows:8}
.sh-stage{min-height:calc(var(--snx-row)*var(--sh-rows,8))}
/* the bench: boxed for measuring; the sea inside the box is the paper */
.sh[data-box] .sh-stage{background:var(--snx-paper)}
/* the chart: every sea cell of the box, hatched, on request */
.sh-sea{
  grid-column:calc((var(--c,1) - 1)*var(--snx-over) + 1)/span var(--snx-over);
  grid-row:var(--r,1)/span 1;
  position:relative;z-index:0;pointer-events:none;opacity:0;transition:opacity 200ms ease;
  background:repeating-linear-gradient(135deg,var(--snx-ink-18) 0 1px,transparent 1px 8px);
  outline:1px dashed var(--snx-ink-40);outline-offset:-1px;
}
.sh.sh-chart .sh-sea{opacity:1}
/* both grids and the rows, revealed on request: the engine's own gridlines element
   (not a pseudo-element of the stage — ::before and ::after there are the slivers) */
.sh .snx-gridlines{opacity:0;transition:opacity 200ms ease;
  background-image:linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px),linear-gradient(to right,rgba(27,42,155,.28) 0 1px,transparent 1px),linear-gradient(to bottom,var(--snx-ink-18) 0 1px,transparent 1px);
  background-size:calc(100%/var(--snx-base)) 100%,calc(100%/var(--snx-over)) 100%,100% var(--snx-row)}
.sh.sh-lines .snx-gridlines{opacity:1}
/* a shadow on the water (law 5) is the engine's shadow; nothing to add — but the chart marks it */
.sh.sh-chart .sh-wet::after{outline:1px dashed var(--snx-ai-deep)}
/* the corner label: entirely from what the script wrote */
.sh::after{
  content:attr(data-pair) ' · ' attr(data-rows) 'r · land ' attr(data-land) ' · islands ' attr(data-islands) ' · capes ' attr(data-capes) ' · coves ' attr(data-coves) ' · coast ×' attr(data-coast);
  position:absolute;left:5px;top:4px;z-index:8;pointer-events:none;white-space:nowrap;
  font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--snx-ink-60);
}
.sh[data-label=none]::after{content:none}
@media (max-width:639px){.sh::after{content:attr(data-pair) ' · land ' attr(data-land) ' · coast ×' attr(data-coast)}}

/* ---------- the sky at the shore (law 7) ---------- */
/* an ordinary text block on the page's grid, set on the paper; line boxes on the half-row */
.sh-sky{
  --bg:transparent;z-index:2;
  --sh-gut:clamp(14px,4cqw,28px);--sh-unit:calc(var(--snx-row)/2);
  padding:0 var(--sh-gut);
  font-size:var(--snx-s2);line-height:var(--sh-unit);
}
@media (min-width:1440px){.sh-sky{font-size:var(--snx-s3)}}
.sh-sky p{margin:0;padding-top:var(--sh-unit);text-wrap:pretty;hyphens:auto;hanging-punctuation:first}
.sh-sky p + p{padding-top:var(--sh-unit)}
/* the staircase: each step is --w base columns by --h rows; the gutter is kept clear of the land */
.sh-shore{
  float:left;clear:left;
  width:calc(var(--w,1)*var(--snx-over)*100cqw/var(--snx-union) - var(--sh-gut));
  height:calc(var(--h,1)*var(--snx-row));
  margin:0 var(--sh-gut) 0 0;
}
.sh-shore[data-side=r]{float:right;clear:right;margin:0 0 0 var(--sh-gut)}
.sh-shore[data-gap]{width:0;margin:0}
.sh-shore.sh-off{display:none}
/* with the chart on, the staircase shows itself */
.sh.sh-chart .sh-shore:not([data-gap]){outline:1px dashed var(--snx-ai-deep);outline-offset:-1px}
@media (prefers-reduced-motion:reduce){.sh-sea,.sh .snx-gridlines{transition:none}}