/* ==========================================================================
   Curve sheet - screen presentation layer
   ==========================================================================

   Owns only the on-screen behaviour of the catalogue curve sheet: gesture
   routing for the touch readout, the touch-only readout affordance, and the
   narrow-viewport treatment of the sheet's scroll container.

   Deliberately no colours for anything inside the SVG. The sheet paints itself
   from the Graph Designer tokens in chart-spec.js (inline attributes, so screen
   / PNG / PDF can never drift), and hardcoding colours here would silently
   override a customer's configured graph palette. Everything below is layout,
   hit-testing, and gesture behaviour only.

   Loaded after styles.css, so the few rules that restate a selector from there
   (.curve-chart, .graph-chart-wrap) intentionally win on source order.
   ========================================================================== */

/* --------------------------------------------------------------- gestures */

/*
 * Unpinned the sheet must not swallow scrolling: the modal scrolls vertically
 * and .graph-chart-wrap scrolls horizontally, and on a phone both gestures
 * start on top of the sheet. Once a readout is pinned by an explicit tap the
 * sheet takes the pointer stream so a finger can be dragged along the curve.
 */
.catalogue-sheet {
  touch-action: pan-x pan-y;
}

.catalogue-sheet.is-readout-pinned {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The crosshair chip only makes sense where there is no hover state to
 * discover the readout with. */
.curve-readout-toggle {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .curve-readout-toggle {
    display: block;
  }
}

.catalogue-sheet.is-readout-pinned .curve-readout-toggle {
  display: none;
}

/* Nothing in the readout should be selectable or draggable as text/image. */
.curve-readout text,
.curve-readout-toggle text {
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------- narrow viewports */

/*
 * The sheet is a 1000-unit-wide technical drawing; below roughly 820 CSS px of
 * render width its 11px tick digits fall under ~9px and stop being readable.
 * So on small screens it keeps a fixed legible width inside a horizontal
 * scroller rather than shrinking, and gets a scroll affordance instead.
 */
@media (max-width: 900px) {
  .curve-chart {
    min-width: 820px;
  }
}

.graph-chart-wrap {
  position: relative;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 900px) {
  .graph-chart-wrap {
    /* A soft right edge reads as "there is more sheet this way" without
     * adding a decorative element to the drawing itself. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
}

/* Printing and PNG/PDF export must never inherit the screen-only layer. */
@media print {
  .curve-readout,
  .curve-readout-toggle {
    display: none !important;
  }
}