/* ============================================================================
   swipe.css — ปัดเพื่อเปลี่ยนมาตรา, and the ‹ › strip that says you can.

   Two things, one file, because they are one feature: the gesture is invisible
   and the strip is how a reader ever finds out it is there. Tokens live in
   app.css :root; use them, do not redefine them.
   ========================================================================= */

/* ===================== the swipe zone ==================================
   `[data-swipe-zone]` is put on the element by swipe.js, never by the markup:
   the attribute means "a gesture is armed here", and these rules are only ever
   correct while one is. */

[data-swipe-zone] {
  /*
   * THIS LINE IS THE GESTURE.
   *
   * Pointer Events cannot cancel a pan the browser has already started, so
   * taking the horizontal axis is a declarative act, not a preventDefault():
   * `pan-y` leaves the vertical scroll entirely to the browser (we never fight
   * it) and hands sideways movement to the page. `pinch-zoom` is kept
   * explicitly — touch.css promises the statute keeps pinch-zoom, and `pan-y`
   * alone would have quietly taken it away.
   */
  touch-action: pan-y pinch-zoom;

  /* The drag is painted with a transform, so the element needs its own layer
     and a stable one — promoting it on first touch costs a frame exactly when
     the finger is moving. */
  will-change: transform;
}

/*
 * …and while the page IS pinch-zoomed, the gesture stands down and the axis
 * goes back. A reader who has zoomed in on มาตรา ๑๕๑๖ needs to pan ACROSS the
 * enlarged Thai; that movement is horizontal, and it is theirs, not ours.
 * swipe.js puts this class on from a visualViewport listener.
 */
[data-swipe-zone].is-zoomed {
  touch-action: auto;
  transform: none;
}

/* Only while settling back (or sliding out). During the drag the transform
   follows the finger and must not be interpolated. */
[data-swipe-zone].is-settling {
  transition: transform var(--trc-dur) var(--trc-ease);
}

@media (prefers-reduced-motion: reduce) {
  [data-swipe-zone],
  [data-swipe-zone].is-settling {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
}

/* ---- the peek label -------------------------------------------------- */

/*
 * What you are about to get, named before you commit to it. A swipe with no
 * target label is a guess, and on a 1,849-มาตรา code a guess is not good
 * enough — the next item may be the มาตรา after this one, the next thing in
 * the คิว, or the next row of a folder, and they are rarely the same.
 *
 * FIXED, AND IN THE <body>, NOT IN THE ZONE. It used to sit inside the element
 * being dragged, which meant it was dragged too: at a full pull it had left
 * the screen, so the one label that says where you are going was the one thing
 * you could not read. It is a HUD over the page, not a part of it — and out
 * here nothing the stage does to its own children can throw it away either.
 */
.trc-swipe-peek {
  position: fixed;
  top: 50%;
  z-index: var(--trc-z-pop);
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: var(--trc-s1);
  padding: var(--trc-s1) var(--trc-s3);
  border: var(--trc-border-w) solid var(--trc-border-strong);
  border-radius: var(--trc-radius-pill);
  background: var(--trc-bg);
  box-shadow: none;             /* flat CI: a hairline edge, no shadow (R3) */
  font-size: var(--trc-fs-sm);
  font-weight: 600;
  line-height: var(--trc-lh-heading);
  color: var(--trc-text-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  --trc-i-size: 14px;
  transition: opacity var(--trc-dur-fast) var(--trc-ease);
}
.trc-swipe-peek.is-on { opacity: 1; }

/* It sits at the edge the มาตรา is coming IN from — ถัดไป arrives from the
   right, so the label waits there — which makes the direction readable from
   position alone and not only from the chevron. */
.trc-swipe-peek { right: var(--trc-s4); left: auto; }
.trc-swipe-peek.is-next { right: var(--trc-s4); }
.trc-swipe-peek:not(.is-next) { right: auto; left: var(--trc-s4); }

@media (prefers-reduced-motion: reduce) {
  .trc-swipe-peek { transition: none; }
}

/* ===================== the ‹ › strip =================================== */

/*
 * THE GESTURE CANNOT BE THE ONLY WAY.
 *
 * A swipe is invisible, it does not exist on a desktop, and it is not
 * reachable by keyboard or by a screen reader. This strip is the same
 * navigation as a control: two real links, server-rendered from
 * `LawBundle::neighbours()`, so prev/next มาตรา works with JavaScript off and
 * is crawlable. swipe.js then REWRITES the two hrefs when a คิว or a folder
 * is the active track — the strip and the gesture always agree, because they
 * are the same track object.
 */
.trc-provnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--trc-s2);
  margin: var(--trc-s5) 0 0;
  padding-top: var(--trc-s4);
  border-top: var(--trc-hairline, 1px) solid var(--trc-separator, var(--trc-border));
  max-width: var(--trc-read-width);
}

.trc-provnav-link {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  min-height: 52px;             /* a comfortable thumb target, not a 13px row */
  padding: var(--trc-s2) var(--trc-s3);
  border: 0;                    /* plain text on the paper — no white tile */
  border-radius: var(--trc-radius);
  background: transparent;
  color: var(--trc-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.trc-provnav-link:hover {
  background: var(--trc-surface-hover);
  text-decoration: none;
}
.trc-provnav-link:active { background: var(--trc-surface-active); }
.trc-provnav-next { grid-column: 3; justify-content: flex-end; text-align: right; }

/* The first and the last มาตรา of a law. It stays in the layout — the strip
   must not change shape as you read along it — but says plainly that there is
   nothing that way. swipe.js gives the gesture the same answer. */
.trc-provnav-link.is-off {
  background: transparent;
  color: var(--trc-text-3);
  cursor: default;
}
.trc-provnav-link.is-off:hover, .trc-provnav-link.is-off:active { background: transparent; }

.trc-provnav-dir { color: var(--trc-text-3); flex: 0 0 auto; --trc-i-size: 18px; }
.trc-provnav-body { display: flex; flex-direction: column; min-width: 0; }
/* Never below 12px on Thai text (R3 R5). */
.trc-provnav-kind { font-size: var(--trc-fs-sm); color: var(--trc-text-3); }
.trc-provnav-label {
  font-family: var(--trc-font-display); font-size: var(--trc-fs-lg); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trc-provnav-link.is-off .trc-provnav-label { font-weight: 500; }

/* Which track the two links are following — "คิว 3/12", "แพ่ง ๑ 4/20". Hidden
   for the law itself: "the มาตรา after this one" needs no caption. */
.trc-provnav-track {
  grid-column: 2; grid-row: 1;
  align-self: center;
  padding: 2px var(--trc-s2);
  border-radius: var(--trc-radius-pill);
  background: var(--trc-fill, var(--trc-surface-sunk));
  font-size: var(--trc-fs-sm);
  font-weight: 600;
  color: var(--trc-text-2);
  white-space: nowrap;
}

/* A phone: two plain 64px cells, edge to edge of the text column (R3 §2.1). */
@media (max-width: 860px) {
  .trc-provnav-link { min-height: 64px; padding-left: 0; padding-right: 0; border-radius: 0; }
}

/* ---- the swipe hint and every toast on the reader page ------------------
   They clear the docked player by its LIVE height (--trc-playbar-h, kept by
   reader.js's ResizeObserver), so a toast never lands on the strip or on the
   Now Playing it opens into (G11). */
@media (max-width: 860px) {
  .trc-body-reader .trc-toast-host { bottom: calc(var(--trc-tabbar-total) + var(--trc-playbar-h) + 12px); }
}

@media (max-width: 480px) {
  /* The caption drops to its own row rather than squeezing the two labels,
     which are the part a reader actually reads. */
  .trc-provnav { grid-template-columns: 1fr 1fr; }
  .trc-provnav-next { grid-column: 2; }
  .trc-provnav-track { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ===================== the folder stage ================================
   /folders/{id} swipes too, and there it must NOT navigate: the middle column
   swaps in place so that speech keeps running (user/folder.php says so in as
   many words). folders.js arms the same gesture on the stage's article. */

/* The stage's paragraphs are replaced on every swap, so the zone can be
   mid-transform with nothing in it for a frame. A floor under it stops the
   column collapsing and snapping back as the next มาตรา paints. */
.trc-folder-text[data-swipe-zone] { min-height: 4em; }