/* ----------------------------------------------------------------------------
 * code-gutter.css
 *
 * Provenance gutter for the "Generated Rust program" code box on /cli/.
 *
 * The gutter is a thin column of colored "bar segments" rendered to the left
 * of a <pre><code> block. Each bar segment maps to one or more lines in the
 * generated Rust program and corresponds to a single CLI flag whose value
 * influenced those lines. Hovering a column reveals a tooltip; clicking a
 * segment lets the JS lay a translucent overlay across the relevant lines
 * via the custom properties --hl-color, --hl-from, --hl-to.
 *
 * Highlight overlay strategy: we use a single ::after pseudo-element on the
 * .gen-rust container (no extra DOM required from the JS — it just toggles
 * the .is-highlighting class and sets the three custom properties on
 * .code-with-gutter).
 *
 * Line-height alignment with existing cli.css:
 *   <pre> uses font-size: 0.85rem and line-height: 1.5
 *     => one rendered code line = 0.85rem * 1.5 = 1.275rem
 *   <pre> uses padding: 1rem 1.25rem
 *     => the first code line starts 1rem below the <pre>'s top edge.
 * We mirror both numbers so the gutter rows land exactly on the code rows:
 *   --gutter-line-h: 1.275rem;  padding-top: 1rem;
 * ------------------------------------------------------------------------- */

/* --- container: gutter on the left, code on the right ------------------- */
.code-with-gutter {
  --gutter-line-h: 1.275rem;   /* 0.85rem * 1.5 — see header note         */
  --gutter-slot-w: 4px;        /* per-column slot width                   */
  --gutter-bar-w: 1px;         /* default bar thickness                   */
  --gutter-bar-w-hover: 3px;   /* thickened bar on column hover           */
  --gutter-pad-top: 1rem;      /* matches <pre>'s padding-top             */

  display: flex;
  align-items: stretch;
  position: relative;          /* anchor for the highlight overlay        */
  gap: 0.35rem;
}

/* --- the gutter itself -------------------------------------------------- */
.provenance-gutter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--gutter-slot-w);
  /* grid-template-rows is supplied inline by the JS:
     repeat(N, var(--gutter-line-h, 1.5em))                                */
  gap: 0;
  padding-top: var(--gutter-pad-top);
  position: relative;          /* tooltip is positioned relative to this  */
  flex: 0 0 auto;
}

/* --- one column per CLI flag ------------------------------------------- */
.gutter-col {
  display: grid;
  /* inherit grid-template-rows from parent so child rows align            */
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  justify-items: center;
  align-items: stretch;
  position: relative;
}

/* Fallback for browsers without subgrid support: stretch full height and
   rely on the inline `grid-row: A / B` on each segment.                   */
@supports not (grid-template-rows: subgrid) {
  .gutter-col {
    grid-template-rows: inherit;
  }
}

/* --- the visible colored bar ------------------------------------------- */
.bar-segment {
  /* reset native button styling */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  outline: none;

  /* the bar */
  display: block;
  width: var(--gutter-bar-w);
  justify-self: center;
  align-self: stretch;
  background: var(--flag-color, currentColor);
  border-radius: 1px;
  cursor: pointer;
  transition: width 120ms ease, opacity 120ms ease, filter 120ms ease;
}

.bar-segment:focus-visible {
  /* subtle accessibility ring without the default chunky focus background */
  outline: 2px solid var(--flag-color, currentColor);
  outline-offset: 1px;
}

.bar-segment:hover,
.gutter-col:hover .bar-segment {
  width: var(--gutter-bar-w-hover);
}

.bar-segment:active {
  filter: brightness(0.92);
}

/* --- the tooltip --------------------------------------------------------
   One shared tooltip re-aimed per column. Tinted with the flag's colour
   via the inline `--tooltip-color` JS sets when showing it. Pops up
   immediately — no fade-in — so hover feels responsive. The native
   [hidden] attribute (set/cleared by the JS) handles show/hide.

   Translate in from -50% so `left` = centre of the hovered column. */
.provenance-tooltip {
  /* Fixed to the viewport so it can follow the mouse cursor exactly,
     regardless of where the gutter element sits on the page or how
     much it has scrolled. JS sets `top` / `left` to the cursor's
     viewport-relative coordinates on every mousemove inside the
     gutter; the transform pulls the tooltip up + centres it
     horizontally so it sits *above* the cursor with a small gap. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;            /* above the topbar (z-index 1000) */

  display: flex;
  align-items: center;
  gap: 0.5rem;

  max-width: 18rem;
  padding: 0.45rem 0.7rem 0.45rem 0.55rem;
  border-radius: 6px;
  border-left: 4px solid var(--tooltip-color, var(--primary, #be6e34));

  /* Soft tint of the flag colour against the page background. */
  background: color-mix(
    in srgb,
    var(--tooltip-color, var(--primary, #be6e34)) 14%,
    var(--bg, #fafaf8)
  );
  color: var(--text, #2d2d2d);

  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);

  /* Place the tooltip's bottom-centre at (left, top), then lift by an
     extra 0.6 rem so the arrow sits cleanly above the pointer. */
  transform: translate(-50%, calc(-100% - 0.6rem));
}

.provenance-tooltip[hidden] { display: none; }

.provenance-tooltip .tooltip-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.95rem;
  color: var(--tooltip-color, var(--primary, #be6e34));
}

.provenance-tooltip .tooltip-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.provenance-tooltip .tooltip-flag-name {
  font-family: "Source Code Pro", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-dark, #6d2c0f);
}

.provenance-tooltip .tooltip-meta {
  font-size: 0.7rem;
  color: var(--text-light, #555);
  font-weight: 500;
}

/* Small triangle pointing down at the cursor (tooltip sits above it). */
.provenance-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-color, var(--primary, #be6e34));
}

/* --- the code side ------------------------------------------------------ */
/*
 * The right side of .code-with-gutter is a <div class="code-rows gen-rust">
 * containing one <div class="code-row" data-line="N"> per source line.
 * Each row holds a <span class="line-num"> and a <code class="line-content">.
 *
 * Highlighting is now done by per-row class toggling (.is-highlighted)
 * rather than a single ::after overlay — the JS sets --hl-color on the
 * #genRustRows container and toggles .is-highlighted on the matching rows.
 *
 * Line-height alignment with the gutter is preserved by keeping
 *   font-size: 0.85rem; line-height: 1.5  =>  1.275rem per row
 * which matches --gutter-line-h declared on .code-with-gutter.
 */
.code-rows.gen-rust,
.code-rows {
  display: block;
  flex: 1 1 auto;
  min-width: 0;                /* allow the column to shrink/scroll       */
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 0 1rem 0.5rem; /* top/bottom mirror old <pre>; left = breathing room */
  overflow-x: auto;
  /* Default highlight tint when --hl-color isn't set on the container.    */
  --row-hl: rgba(255, 255, 255, 0.18);
}

/* --- one row per source line ------------------------------------------- */
.code-row {
  display: flex;
  align-items: center;
  min-height: var(--gutter-line-h, 1.275rem);
  /* Without this, the row sizes to the visible area of the scroll
     container, but `.line-content { white-space: pre }` lets the text
     overflow it. The hover/highlight background then only paints up to
     the visible edge — most obvious on mobile where lines wrap past
     the screen. `max-content` makes each row stretch to fit its own
     text; block layout in `.code-rows` then gives every row the width
     of the widest row, so highlights span end-to-end consistently. */
  min-width: max-content;
  font-family: "Source Code Pro", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  transition: background 80ms ease;
}

/* Subtle but actually-visible hover tint — `color-mix` with --text gives
   a low-contrast bar in both themes. The previous rule used 4% white,
   which was invisible on the light --code-bg. */
.code-row:hover {
  background: color-mix(in srgb, var(--text, #2d2d2d) 7%, transparent);
}

[data-theme="dark"] .code-row:hover {
  background: color-mix(in srgb, var(--text, #e0e0e0) 9%, transparent);
}

/* --- the line-number column ------------------------------------------- */
.line-num {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding-right: 0.85rem;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-light, #888);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* --- the syntax-highlighted code on each row -------------------------- */
.line-content {
  flex: 1 1 auto;
  min-width: 0;
  /* Inherit the row's font; preserve indentation exactly. */
  font: inherit;
  white-space: pre;
  background: transparent;
}

/* --- ghost row: override-displaced code shown as a strikethrough so the
       user can see what the flag replaced. These rows do NOT appear in
       prog.rust, so the clipboard text matches the actual program. ----- */
.code-row.is-removed .line-content {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-light, #888);
  opacity: 0.55;
}

.code-row.is-removed .line-num {
  opacity: 0.45;
  text-decoration: line-through;
}

.code-row.is-removed:hover .line-content {
  opacity: 0.7;
}

/* --- highlighted row (JS toggles .is-highlighted) --------------------- */
.code-row.is-highlighted {
  background: color-mix(in srgb, var(--hl-color, white) 22%, transparent);
}

.code-row.is-highlighted:hover {
  /* highlight should still win over the hover tint */
  background: color-mix(in srgb, var(--hl-color, white) 30%, transparent);
}

/* --- floating copy button -----------------------------------------------
   Fixed to the viewport corner so it stays put as the page scrolls.
   Hidden by default; cli.js adds `.is-active` once at least one flag is
   checked (no point offering "copy" when there's nothing distinctive to
   copy). */
.copy-floating {
  position: fixed;
  /* iOS Safari overlays a URL bar at the bottom — without env() the FAB
     sits under it. max() guarantees at least 1rem of visual padding on
     desktop where the inset is 0. */
  bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  right: max(1rem, env(safe-area-inset-right, 1rem));
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: none;                     /* hidden until .is-active */
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 120ms ease, color 120ms ease, transform 120ms ease,
              box-shadow 120ms ease, opacity 150ms ease;
  z-index: 50;                       /* sit above page content; below the
                                        topbar (which is at z-index 1000) */
}

.copy-floating.is-active {
  display: inline-flex;
}

.copy-floating:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.copy-floating:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.copy-floating:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Tooltip — child <span> inside the button reveals on hover/focus.
   Native `title` would also work but takes ~1 s to appear; custom
   gives instant feedback and matches the gutter tooltip styling. */
.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  right: 0;
  background: var(--text);
  color: var(--bg);
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 130ms ease;
  transform: translateY(2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0.85rem;
  border: 5px solid transparent;
  border-top-color: var(--text);
}

.copy-floating:hover .copy-tooltip,
.copy-floating:focus-visible .copy-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* --- dark theme tweaks -------------------------------------------------- */
[data-theme="dark"] .bar-segment {
  filter: brightness(1.15);
}

[data-theme="dark"] .provenance-tooltip {
  /* Stronger tint against the dark page bg, deeper shadow. */
  background: color-mix(
    in srgb,
    var(--tooltip-color, var(--primary, #d4894e)) 22%,
    #1a1a1a
  );
  color: var(--text, #e0e0e0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .provenance-tooltip .tooltip-flag-name {
  color: var(--text, #f0f0f0);
}

[data-theme="dark"] .provenance-tooltip .tooltip-meta {
  color: var(--text-light, #aaa);
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .code-with-gutter {
    --gutter-slot-w: 3px;
    --gutter-bar-w-hover: 2px;
    gap: 0.25rem;
  }
}

@media (max-width: 480px) {
  /* Tight on horizontal real estate, but keep the gutter — it's the only
     visual cue tying generated lines to the flags that produced them.
     Compress slot width and gap so the code panel still gets enough room. */
  .code-with-gutter {
    --gutter-slot-w: 2px;
    --gutter-bar-w: 1px;
    --gutter-bar-w-hover: 2px;
    gap: 0.2rem;
  }
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bar-segment,
  .provenance-tooltip,
  .code-row,
  .copy-floating {
    transition: none;
  }
}