/* First-time tips (s12): the desktop's yellow balloon look, our own CSS. A window's tip sits above its
   body but under its menus; a desktop tip sits under every window (windows start at z-index 1). */
.tip {
  position: absolute; z-index: 15; width: 240px; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: 8px 28px 9px 11px; background: #ffffe1; color: var(--ink);
  border: 1px solid #000; border-radius: 8px; box-shadow: 2px 3px 6px rgb(0 0 0 / 0.35);
  font: 11px/1.4 var(--ui-font); animation: tip-in 0.2s ease-out both;
}
.desktop > .tip { z-index: 0; }
.tip__title { display: block; margin-bottom: 2px; font-weight: 700; }
.tip__text { margin: 0; }
.tip__close {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; padding: 0; border: 1px solid transparent;
  border-radius: 2px; background: none; color: #4a4a4a; font: 15px/1 var(--ui-font); cursor: pointer; touch-action: manipulation;
}
.tip__close:hover, .tip__close:focus-visible { border-color: #a9a9a9; background: #fff; color: #000; }
.tip__close:focus-visible { outline: 2px solid #0c32a5; outline-offset: 1px; }

/* The tail points at what the tip explains. */
.tip::before, .tip::after { content: ""; position: absolute; width: 0; height: 0; }
/* --tail is where the tail's point meets the edge, set from the named control (tips.js aim); the defaults are the
   s12 fixed spots for a tip with no target. */
.tip[data-tail="up"]::before { left: var(--tail, 22px); top: -13px; border-bottom: 13px solid #000; border-right: 13px solid transparent; }
.tip[data-tail="up"]::after { left: calc(var(--tail, 22px) + 1px); top: -11px; border-bottom: 11px solid #ffffe1; border-right: 11px solid transparent; }
.tip[data-tail="left"]::before { left: -13px; top: var(--tail, 12px); border-right: 13px solid #000; border-bottom: 13px solid transparent; }
.tip[data-tail="left"]::after { left: -11px; top: calc(var(--tail, 12px) + 1px); border-right: 11px solid #ffffe1; border-bottom: 11px solid transparent; }
.tip[data-tail="down"]::before { left: calc(var(--tail, calc(100% - 30px)) - 13px); bottom: -13px; border-top: 13px solid #000; border-left: 13px solid transparent; }
.tip[data-tail="down"]::after { left: calc(var(--tail, calc(100% - 30px)) - 12px); bottom: -11px; border-top: 11px solid #ffffe1; border-left: 11px solid transparent; }
@keyframes tip-in { from { opacity: 0; } }

@media (pointer: coarse) {
  .tip { padding-right: 40px; font-size: 14px; }
  .tip__close { top: 0; right: 0; width: 44px; height: 44px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }

/* A tip with no tail (s13: Welcome) marks the icon it names with the desktop's own selected look, until the visitor
   selects an icon themselves. These two rules copy the focus look in desktop.css (.icon__button:focus); change both together. */
.tip[data-tail="none"]::before, .tip[data-tail="none"]::after { display: none; }
@media not ((orientation: landscape) and (pointer: coarse) and (max-height: 500px)) { /* no mark on a phone turned sideways (s14) */
  #icons:not(:focus-within) .icon__button.is-tip-target .icon__label { background: var(--select); text-shadow: none; outline: 1px dotted #fff; }
  #icons:not(:focus-within) .icon__button.is-tip-target img { filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.45)) sepia(1) hue-rotate(180deg) saturate(3) brightness(0.85); }
}

/* A phone turned sideways shows no tips; they come back upright (s14, his call A). Same query as SIDEWAYS in
   js/ui/tips.js. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) { .tip { display: none; } }