/* ap_hint.css - guidance hint, anchored note form (v2, 2026-08-10).

   v1 was a full-width strip in the document flow above the table. It failed:
   Main View already stacks a Glance band and a topbar, so a third bar of the
   same width and weight read as new permanent chrome instead of a passing note,
   and it cost layout height on a page whose complaint was clutter.
   See docs/HINTS.md.

   v2 is a small card floating over the rows, tied to the column it talks about
   by a notch. Rules that make it read as a note and not as UI:
     - it never takes layout space (fixed, positioned from the target's rect)
     - softer material than the page chrome: 14px radius, shadow, no hard border
     - narrow measure so the text scans as a remark, not a paragraph
     - it arrives late and gently, after the page has settled */

.ap-hint {
  position: fixed;
  z-index: 40;              /* over the table, under modals */
  width: 268px;
  max-width: calc(100vw - 24px);
  padding: 13px 14px 12px;
  border-radius: 14px;
  background: var(--ap-navy-800, #23283a);
  box-shadow:
    0 12px 28px -8px rgba(var(--ap-black-rgb), .45),
    0 0 0 1px rgba(var(--ap-white-rgb), .07);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.ap-hint[hidden] { display: none; }
.ap-hint.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Target scrolled out of view: keep the element (and its measurements) but stop
   showing a note pointing at nothing. */
.ap-hint.is-off { opacity: 0; pointer-events: none; }

/* Toast variant: not anchored to a column (no notch, no scroll tracking),
   used for "you've landed somewhere unusual" notices rather than a nudge
   about a specific control. Positioned near the golden-ratio point of the
   viewport (38.2% from the left and top) - close enough to centre to be
   seen immediately, off-centre enough to read as a passing note rather
   than a modal. Dismisses itself; see ap_hint.js TOAST_MS. */
.ap-hint--toast {
  top: 38.2%;
  left: 38.2%;
  transform: translate(-50%, -50%) scale(.96) translateY(4px);
  transition: opacity 340ms cubic-bezier(.2, .7, .2, 1), transform 340ms cubic-bezier(.2, .7, .2, 1);
}
.ap-hint--toast.is-in { transform: translate(-50%, -50%) scale(1) translateY(0); }
/* Closing gets the plainer half of the motion: a fade only, no scale or
   shift, and quicker - nobody is waiting to admire a note leaving. Set by
   ap_hint.js right before hiding so it overrides the entrance transition. */
.ap-hint--toast.is-leaving {
  transition: opacity 160ms ease-in;
  transform: translate(-50%, -50%) scale(1) translateY(0);
}
.ap-hint--toast::before { display: none; }

html.light .ap-hint {
  background: #ffffff;
  box-shadow:
    0 12px 28px -8px rgba(15, 23, 42, .18),
    0 0 0 1px rgba(15, 23, 42, .08);
}

/* The notch. A rotated square sharing the card's background, so it reads as the
   card itself narrowing to a point rather than as a separate arrow glyph.
   --ap-hint-notch is set by ap_hint.js to sit under the column's centre. */
.ap-hint::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--ap-hint-notch, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.ap-hint__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fd-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fd-accent, var(--ap-sky));
}
.ap-hint__body {
  margin: 0 0 11px;
  padding-right: 14px;      /* clear of the close button */
  font-size: 13px;
  line-height: 1.5;
  color: var(--ap-text-primary);
}

.ap-hint__action {
  display: inline-block;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--fd-accent, var(--ap-sky));
  color: var(--ap-navy-950, #0a0c14);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 140ms;
}
.ap-hint__action:hover { filter: brightness(1.08); }

/* The escape hatch, stated quietly in the note itself: the hint comes back on
   later visits, so the reader must be able to see how to stop it without
   hunting for the setting. Tertiary weight - it is an exit, not an offer. */
.ap-hint__opt {
  display: block;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ap-text-tertiary);
  text-align: left;
  cursor: pointer;
  transition: color 140ms;
}
.ap-hint__opt:hover {
  color: var(--ap-text-secondary);
  text-decoration: underline;
}

.ap-hint__close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ap-text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.ap-hint__close:hover {
  color: var(--ap-text-primary);
  background: rgba(var(--ap-white-rgb), .07);
}

/* The column the note points at. A steady ring, never a pulse: the note may sit
   there a while, and a repeating animation at the edge of vision turns into
   noise. Colour is not the only cue - the note's own text names the column. */
.ap-hint-target {
  box-shadow: inset 0 0 0 1px var(--fd-accent, var(--ap-sky));
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ap-hint {
    transform: none;
    transition: opacity 120ms linear;
  }
  .ap-hint.is-in { transform: none; }
  .ap-hint__action, .ap-hint__close { transition: none; }
}