/* ---------------------------------------------------------------------------
   In-app tips. See tips.js for why these are built and destroyed rather than
   shown and hidden, and for the placement rules.

   The first version was too heavy: 262px boxes with a big drop shadow, no
   pointer, and a hard green ring on every target. Seven of them at once read as
   sticky notes thrown at the screen. This one is smaller, quieter, and — the
   part that actually matters — visibly attached to the thing it describes.
--------------------------------------------------------------------------- */

.tips-layer {
  position: fixed; inset: 0;
  z-index: 9000;              /* over the map overlays (8), under confirm (9999) */
  pointer-events: none;       /* the page stays usable while tips are up */
}

/* Invisible host for the collapsed-tip marker — no wash of its own.

   Arian, 2026-08-09: "can you get rid of that green overlay? why is it even
   necessary? the settings dropdown menu is now behind that green overlay."
   Both points are right. The pointer on each callout already connects the tip to
   its control, so the tinted wash was a second indicator doing the first one's
   job. And because the whole tips layer sits at z-index 9000, that wash painted
   over anything opening above the page — the settings dropdown most visibly.
   The element stays only to carry the "+" marker, which positions itself in
   viewport space and so needs nothing from the ring. */
.tip-ring {
  position: fixed;
  pointer-events: none;
}

/* The marker for a tip that had to collapse. HIDDEN while its callout is open —
   an open tip already has an arrow pointing at its control, so a badge next to
   it was a second indicator doing the first one's job. Positioned in viewport
   space by JS so it can never be clipped by the window edge. */
.tip-badge {
  position: fixed;
  width: 20px; height: 20px; padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--panel, #10231b);
  background: var(--cc-lt); color: #04160e;
  font: 800 13px/1 system-ui, sans-serif;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-lt) 26%, transparent);
}
.tip-badge.collapsed { display: flex; }
.tip-badge:focus-visible { outline: 2px solid var(--cc-lt); outline-offset: 2px; }
.tip-badge.collapsed:hover { transform: scale(1.12); }

.tip {
  position: fixed;
  width: 232px;
  padding: 9px 11px 10px;
  background: var(--panel, #10231b);
  border: 1px solid color-mix(in srgb, var(--cc-lt) 62%, transparent);
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  pointer-events: auto;
  transition: left .1s ease, top .1s ease;
}

.tip-head { padding-right: 18px; margin-bottom: 3px; }
.tip-h { font-size: 12px; line-height: 1.3; color: var(--cc-lt); }
.tip-b { margin: 0; font-size: 11.5px; line-height: 1.48; color: var(--muted); }

/* The pointer. A rotated square so it inherits the panel fill and the border
   colour, which a CSS-triangle cannot do on a bordered box. JS sets the offset
   along the relevant edge so it aims at the middle of the control. */
.tip-arrow {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--panel, #10231b);
  border: 1px solid color-mix(in srgb, var(--cc-lt) 62%, transparent);
  transform: rotate(45deg);
}
.tip[data-side="right"] .tip-arrow { left: -5.5px; border-top: 0; border-right: 0; }
.tip[data-side="left"]  .tip-arrow { right: -5.5px; border-bottom: 0; border-left: 0; }
.tip[data-side="below"] .tip-arrow { top: -5.5px; border-bottom: 0; border-right: 0; }
.tip[data-side="above"] .tip-arrow { bottom: -5.5px; border-top: 0; border-left: 0; }

/* Bridges the gap when a callout had to clear the app's chrome — a toolbar
   button's tip has to sit below both the header and the day tabs, and an arrow
   pointing across 99px of bar reads as pointing at nothing. */
.tip-leader {
  position: fixed;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--cc-lt) 70%, transparent);
}
.tip-leader.v { width: 0; border-left: 1px dashed; }
.tip-leader.h { height: 0; border-top: 1px dashed; }

/* Sized for a finger as well as a mouse — a 12px "x" is a control only a
   designer can hit. */
.tip-x {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 5px;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.tip-x:hover { background: var(--panel-2); color: var(--ink); }
.tip-x:focus-visible { outline: 2px solid var(--cc-lt); outline-offset: 1px; }

/* The toggle in the shell. Deliberately quiet — it sits beside the bell and
   the gear and reads as one of them, not as an advert for itself. */
#tipsBtn.on {
  background: var(--cc-lt);
  border-color: var(--cc-lt);
  color: #04160e;
}
#tipsBtn.on svg { stroke: #04160e; }

@media (max-width: 560px) {
  .tip { width: min(232px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .tip, .tip-ring { transition: none; }
}

/* A tip printed onto a route sheet is a defect the office would only find
   after handing paper to a crew. */
@media print {
  .tips-layer { display: none !important; }
}