/*  ════════════════════════════════════════════════════════════════════════
    RE·STATICA TIP FAMILIAR  —  a small Φ glyph that lives in the bottom-right
    corner and, at idle moments, surfaces one contextual tip about a feature
    you might not have found (theme, panel folds, calc-tree trace, Practice
    modes …). Charm of Clippy, none of the interruption: corner-anchored,
    never blocks content, always killable, remembers what it has shown.
    Driven entirely by tip_familiar.js. Palette borrows the app tokens so it
    re-skins for free across dark / light.
    ════════════════════════════════════════════════════════════════════════  */

.tip-familiar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1020;                 /* ABOVE OFFCANVAS (1000), BELOW MODAL (1200) / AI (1100) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;          /* CHILDREN RE-ENABLE — KEEPS THE EMPTY GUTTER CLICK-THROUGH */
}

/*  HIDE WHEN ANOTHER SURFACE OWNS THE SCREEN — AUTH VIEW, OPEN MODAL,
    AI CHAT, OR THE PDF OVERLAY. JS ALSO GATES, THIS IS THE CSS BACKSTOP.  */
.main-container--auth ~ .tip-familiar,
body:has(.modal.show) .tip-familiar,
body:has(.ai-chat-column:not(.d-none)) .tip-familiar {
  display: none;
}

/* ───────────────────────────── THE GLYPH ───────────────────────────── */
.tip-glyph {
  pointer-events: auto;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: transparent;   /* OUTLINE + SYMBOL ONLY — NO FILLED DISC */
  color: var(--primary);
  font-size: 1.45rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease;
  animation: tip-float 6s ease-in-out infinite;
}

.tip-glyph:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: color-mix(in srgb, var(--primary) 70%, transparent);
}

.tip-glyph-mark {
  /* SERIF Φ READS AS A MATHEMATICAL FAMILIAR, NOT A UI ICON */
  font-family: "Cambria Math", "Latin Modern Math", Georgia, serif;
  /* DEAD-CENTRE THE GLYPH: NO BASELINE NUDGE, COLLAPSE LINE-BOX TO THE CAP HEIGHT */
  display: block;
  line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent);
}

/*  SOFT ORBITING HALO — ONLY BREATHES WHEN A TIP IS WAITING / SHOWING  */
.tip-familiar.has-tip .tip-glyph {
  border-color: color-mix(in srgb, var(--primary) 75%, transparent);
  animation: tip-float 6s ease-in-out infinite, tip-halo 2.4s ease-in-out infinite;
}

/*  UNREAD DOT  */
.tip-glyph-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tertiary);
  box-shadow: 0 0 6px color-mix(in srgb, var(--tertiary) 80%, transparent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity .3s ease, transform .3s ease;
}
.tip-familiar.has-tip .tip-glyph-dot { opacity: 1; transform: scale(1); }

/*  MUTED — DIMS THE FAMILIAR, STILLS THE FLOAT  */
.tip-familiar.is-muted .tip-glyph {
  opacity: 0.5;
  color: var(--text-muted-color);
  border-color: color-mix(in srgb, var(--text-muted-color) 35%, transparent);
  animation: none;
}
.tip-familiar.is-muted .tip-glyph-mark { text-shadow: none; }

/* ───────────────────────────── THE CARD ───────────────────────────── */
.tip-card {
  pointer-events: auto;
  position: relative;
  width: 286px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 9px;
  padding: 14px 14px 11px 14px;
  border-radius: 12px;
  background: var(--popover-bg-color);
  border: 1px solid var(--popover-border-color);
  color: var(--popover-text-color);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.40);
  transform-origin: bottom right;
  /*  HIDDEN STATE — TUCKED DOWN INTO THE GLYPH, FADED  */
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  visibility: hidden;
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}
.tip-familiar.is-open .tip-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.tip-card-icon {
  grid-row: 1 / span 2;
  align-self: start;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.tip-card-body { min-width: 0; }

.tip-card-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted-color);
  margin-bottom: 3px;
}

.tip-card-text {
  font-size: 0.86rem;
  line-height: 1.42;
  color: var(--popover-text-color);
}
.tip-card-text .kbd {
  font-family: inherit;
  font-weight: 600;
  color: var(--primary);
  padding: 0 2px;
}

/*  FOOTER — MUTE ON THE LEFT, NEXT ON THE RIGHT  */
.tip-card-foot {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
}

.tip-card-mute,
.tip-card-next {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--text-muted-color);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  transition: color .2s ease, background-color .2s ease;
}
.tip-card-mute:hover,
.tip-card-next:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.tip-card-next { font-size: 0.9rem; padding: 3px 6px; }

/*  CLOSE (×) — TOP-RIGHT CORNER OF THE CARD  */
.tip-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-muted-color);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .2s ease, background-color .2s ease;
}
.tip-card-close:hover {
  color: var(--text-color);
  background: var(--hover-bg);
}

/* ───────────────────────────── MOTION ───────────────────────────── */
@keyframes tip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes tip-halo {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--primary) 46%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%,  transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tip-glyph,
  .tip-familiar.has-tip .tip-glyph { animation: none; }
  .tip-card { transition: opacity .2s ease, visibility .2s; transform: none; }
  .tip-familiar.is-open .tip-card { transform: none; }
}

/*  STAY OUT OF THE WAY ON SMALL SCREENS — THE FEATURE SET IT ADVERTISES
    IS A DESKTOP WORKFLOW, AND THE CORNER IS PRECIOUS ON A PHONE.  */
@media (max-width: 768px) {
  .tip-familiar { display: none; }
}