/* Overview homepage: Task and Matter legends joined by dotted arrows to a simple picture of
   the app, with a desktop/mobile toggle. The picture is HTML (overview-mock.css,
   which sizes it from this stage's width); the page script draws the arrows to the
   selected task and the Matter pane. Loaded after style.css. */
.ge-preview {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.ge-visuals {
  /* Turning room for the arrows left of the stage (cqw resolves against this
     container wherever the token is used inside it). */
  --ov-arrow-reserve: clamp(2.5rem, 7cqw, 3rem);
  /* How far the desktop window's right edge sits inside this container's: the stage
     is centred, and the window (45em at up to 17px) is centred in it. From 1200px
     both keep the right edge instead (see below). */
  --ov-window-inset-end: calc((100cqw - min(var(--om-window-font-cap) * var(--om-window-ems), 100cqw - var(--ov-arrow-reserve))) / 2);
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.ge-legend {
  position: relative;
  min-width: 0;
  padding: 0 0.5rem 1rem clamp(1.75rem, 7cqw, 3.5rem);
}

/* Mode switches change the mock's width, font size and stage gap together. Do not
   let the shared reduced-motion duration animate these independent dimensions:
   arrow routing must measure one coherent layout, including before fonts load. */
.ge-visuals,
.ge-visuals * {
  transition-property: none;
}

/* Only the Matter heading uses title gold. Both bullet lists and both arrows,
   including their arrowheads, use Task ink. */
.ge-legend--task,
.ge-legend-trail--task,
.ge-legend-arrowhead--task,
.ge-legend-trail--matter,
.ge-legend-arrowhead--matter {
  color: var(--tm-ink);
}

.ge-legend--matter {
  color: var(--tm-title-gold);
}

.ge-legend h2 {
  width: max-content;
  margin: 0 0 0.45rem;
  font-family: var(--tm-font);
  font-size: clamp(1.125rem, 3.8cqw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ge-legend ul {
  color: var(--tm-ink);
  margin: 0;
  padding-left: 1.1em;
  font-size: clamp(0.65rem, 2cqw, 0.9375rem);
  line-height: 1.6;
}

.ge-legend-arrows {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ge-legend-trail {
  stroke: currentColor;
  stroke-dasharray: 0.1 6;
}

/* A marker's content inherits from the marker, not from the path using it.
   Both markers explicitly use the same ink as their trails. */
.ge-legend-arrowhead {
  overflow: visible;
}

.ge-legend-arrowhead use {
  stroke: currentColor;
  stroke-dasharray: none;
}

/* Paint the same round-capped geometry beneath the ink, 0.8px wider per side.
   userSpaceOnUse markers keep the arrowhead size independent of stroke width. */
.ge-legend-trail--outline,
.ge-legend-arrowhead--outline {
  color: var(--ge-page);
  stroke-width: 3.4;
}

/* The stage reserves turning room for the arrows on the left, just enough for the
   Task trail's swing into the selected task (owner: the desktop screen as big as
   possible); the mock's soft shadow may spill past it, but never sideways out of
   the page. */
.ge-visual-images {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(100% - var(--ov-arrow-reserve));
  min-width: 0;
}

/* In desktop mode the Matter legend's longest line ends at the window's right edge
   (owner request): the legend then sits above the Matter pane, and its arrow loops
   into the pane like the Task one instead of crossing over from the middle. Phone
   widths keep both legends filling their columns. */
@media (min-width: 641px) {
  .ge-visuals[data-preview-mode="desktop"] .ge-legend--matter {
    justify-self: end;
    margin-right: var(--ov-window-inset-end);
    padding-right: 0;
  }
}

/* Room above the desktop window for both arrows' sweep from their legends into the
   window. */
.ge-visuals[data-preview-mode="desktop"] .ge-visual-images {
  margin-top: 0.75rem;
}

.goal-examples-page .ge-availability {
  grid-area: auto;
}

@media (max-width: 640px) {
  /* Leave enough turning room above the Focus bar with fallback fonts too. */
  .ge-visuals[data-preview-mode="desktop"] .ge-visual-images {
    margin-top: max(1rem, calc(100cqw / var(--om-window-ems) * 2));
  }

  .goal-examples-page .ge-availability,
  .goal-examples-page .ap-shot-mode-button {
    font-size: 1rem;
    line-height: 1.6;
  }

  .goal-examples-page .ap-shot-mode-button {
    min-height: 2.75rem;
    padding-inline: 0.5rem;
  }

  .ge-preview-options {
    display: inline-block;
    white-space: nowrap;
  }

  .ge-legend {
    padding-inline: 1rem 0;
  }

  .ge-legend h2 {
    font-size: 1.25rem;
  }

  .ge-legend ul {
    font-size: 1rem;
  }

  .ge-legend li + li {
    margin-top: 0.35rem;
  }

  .ge-visuals {
    column-gap: 0.5rem;
  }

  .ge-visual-images {
    /* Use the phone width, leaving 8px outside the transparent image canvas. */
    width: calc(100% + 1rem);
  }
}

@media (min-width: 1200px) {
  /* The goal-examples page's fixed 616px visual column suits its compact example card, not a
     landscape app window: here the preview takes the larger share (owner requests:
     a larger right side, then a bigger desktop screen), and the copy column (with
     its width-capped wordmark) the smaller one. */
  .goal-examples-page .ge-hero-layout {
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  }

  /* The copy stays the taller column, so the preview sits level with its middle
     rather than pinned to the top. */
  .goal-examples-page .ge-preview {
    align-self: center;
    margin-top: 0;
  }

  /* The arrows only need turning room on the left: the stage, and the desktop
     window in it (overview-mock.css), keep the page's right content edge, like the
     header's call to action above it. */
  .ge-visuals {
    --ov-window-inset-end: 0px;
  }

  .ge-visual-images {
    justify-self: end;
  }

  .ge-legend h2 {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
}