/* =========================================================================
   BACKBENCH — the guided tour
   -------------------------------------------------------------------------
   The tour wears whatever the app is wearing. Nothing in here picks a colour
   of its own: every surface is built from the same tokens the rest of the app
   uses, so Paper gets a printed card on warm cream, Ink gets a deep panel with
   a lit rim, and Premium gets the same real glass as every other pane in that
   theme. Auto follows the phone.

   The dark is painted as four panels around the target rather than as one
   overlay with a hole cut in it: four plain rectangles animate on the
   compositor, cost nothing on a three-year-old phone, and never leave the grey
   seam an SVG mask leaves on a fractional device pixel.

   Everything is namespaced .tr-* and nothing outside this file is touched.
   ========================================================================= */

.tr-on { overflow: hidden !important; }
.tr-on .tabs { z-index: 1 }

.tr {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  font-family: inherit;

  /* ---- the tour's own dials, set per theme below ---- */
  --tr-scrim: rgba(6, 6, 10, .64);
  --tr-face: var(--bg-2);
  --tr-face-2: var(--bg-2);
  --tr-edge: var(--line-2, var(--line));
  --tr-blur: 0px;
  --tr-sat: 1;
  --tr-sheen: rgba(255, 255, 255, 0);
  --tr-rim: rgba(255, 255, 255, 0);
  --tr-sh: 0 30px 70px -20px rgba(0, 0, 0, .5), 0 5px 18px -8px rgba(0, 0, 0, .3);
  --tr-r: var(--r-lg, 22px);
}
.tr[hidden] { display: none }

/* ---- PAPER --------------------------------------------------------------
   A printed card on a table: opaque, warm, a hairline edge and a shadow that
   sits under it rather than glowing out of it. No blur — paper is not glass. */
html:root[data-theme="light"] .tr {
  --tr-scrim: rgba(38, 30, 18, .44);
  --tr-face: #FFFDF8;
  --tr-face-2: #FBF8F0;
  --tr-edge: #DCD5C2;
  --tr-blur: 0px;
  --tr-sheen: rgba(255, 255, 255, .7);
  --tr-rim: rgba(255, 255, 255, .9);
  --tr-sh: 0 26px 56px -20px rgba(58, 46, 26, .34),
           0 3px 12px -5px rgba(58, 46, 26, .18);
}

/* ---- INK ----------------------------------------------------------------
   A deep panel lifted off the page by a lit top edge, with just enough blur
   to separate it from whatever is behind. */
html:root[data-theme="dark"] .tr,
:root:not([data-theme]) .tr {
  --tr-scrim: rgba(4, 4, 8, .66);
  --tr-face: rgba(23, 25, 33, .93);
  --tr-face-2: rgba(13, 14, 20, .95);
  --tr-edge: rgba(255, 255, 255, .13);
  --tr-blur: 20px;
  --tr-sat: 1.5;
  --tr-sheen: rgba(255, 255, 255, .13);
  --tr-rim: rgba(255, 255, 255, .12);
  --tr-sh: 0 30px 74px -20px rgba(0, 0, 0, .8),
           0 4px 16px -6px rgba(0, 0, 0, .55);
}
/* Auto, on a phone set to light, should still be paper */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tr {
    --tr-scrim: rgba(38, 30, 18, .44);
    --tr-face: #FFFDF8;
    --tr-face-2: #FBF8F0;
    --tr-edge: #DCD5C2;
    --tr-blur: 0px;
    --tr-sat: 1;
    --tr-sheen: rgba(255, 255, 255, .7);
    --tr-rim: rgba(255, 255, 255, .9);
    --tr-sh: 0 26px 56px -20px rgba(58, 46, 26, .34),
             0 3px 12px -5px rgba(58, 46, 26, .18);
  }
}

/* ---- PREMIUM ------------------------------------------------------------
   The same pane as every other surface in that theme: a white gradient at low
   opacity over a heavy blur, a lit top edge, and the room showing through. */
html:root[data-theme="premium"] .tr {
  --tr-scrim: rgba(2, 3, 5, .62);
  --tr-face: rgba(255, 255, 255, .085);
  --tr-face-2: rgba(255, 255, 255, .038);
  --tr-edge: rgba(255, 255, 255, .17);
  --tr-blur: var(--lq-blur, 30px);
  --tr-sat: var(--lq-sat, 1.75);
  --tr-sheen: rgba(255, 255, 255, .14);
  --tr-rim: rgba(255, 255, 255, .22);
  --tr-sh: 0 34px 90px -26px rgba(0, 0, 0, .8),
           0 2px 10px -4px rgba(0, 0, 0, .5);
}

/* ---- the dark, in four pieces ---- */
.tr-sh {
  position: fixed; background: var(--tr-scrim);
  pointer-events: auto;
  transition: all .42s var(--ease, cubic-bezier(.2, .72, .28, 1));
}
html:root[data-theme="premium"] .tr-sh,
html:root[data-theme="dark"] .tr-sh {
  backdrop-filter: blur(2px) saturate(.92);
  -webkit-backdrop-filter: blur(2px) saturate(.92);
}

/* ---- the ring around whatever is being explained ---- */
.tr-ring {
  position: fixed; pointer-events: none;
  border-radius: var(--r-sm, 12px);
  box-shadow: 0 0 0 2px var(--accent),
              0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent),
              0 18px 50px -12px rgba(0, 0, 0, .5);
  transition: all .42s var(--ease, cubic-bezier(.2, .72, .28, 1));
}
.tr-ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent);
  animation: trPulse 2.1s var(--ease, ease) infinite;
}
@keyframes trPulse {
  0%   { opacity: .9; transform: scale(1) }
  70%  { opacity: 0;  transform: scale(1.055) }
  100% { opacity: 0;  transform: scale(1.055) }
}

/* the step that is about the whole screen: no ring, and the dark lifts a
   little so the page stays readable behind the card */
.tr[data-wide="1"] .tr-ring { opacity: 0 }
.tr[data-wide="1"] .tr-sh { filter: brightness(.86) }

/* ---- the card ---- */
.tr-c {
  position: fixed; pointer-events: auto;
  width: min(372px, calc(100vw - 28px));
  padding: 17px 18px 15px;
  border-radius: var(--tr-r);
  color: var(--tx);
  background: linear-gradient(168deg, var(--tr-face), var(--tr-face-2));
  border: 1px solid var(--tr-edge);
  box-shadow: var(--tr-sh);
  backdrop-filter: blur(var(--tr-blur)) saturate(var(--tr-sat));
  -webkit-backdrop-filter: blur(var(--tr-blur)) saturate(var(--tr-sat));
  transition: top .42s var(--ease, cubic-bezier(.2, .72, .28, 1)),
              left .42s var(--ease, cubic-bezier(.2, .72, .28, 1)),
              opacity .3s var(--ease, cubic-bezier(.2, .72, .28, 1));
}
/* the lit top edge — a sheen on ink and glass, a paper highlight on paper */
.tr-c::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, var(--tr-rim), transparent 26%),
    radial-gradient(128% 62% at 12% -16%, var(--tr-sheen), transparent 58%);
}
.tr-c > * { position: relative; z-index: 1 }
.tr-c.in { animation: trIn .34s var(--ease, cubic-bezier(.2, .72, .28, 1)) both }
@keyframes trIn {
  from { opacity: 0; transform: translateY(9px) scale(.976) }
  to   { opacity: 1; transform: none }
}

/* Paper is not glass: no backdrop filter at all, rather than a zero-radius
   blur that still costs a compositing layer on every phone that draws it. */
html:root[data-theme="light"] .tr-c,
html:root[data-theme="light"] .tr-c .tr-tip,
html:root[data-theme="light"] .tr-help { backdrop-filter: none; -webkit-backdrop-filter: none }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tr-c,
  :root:not([data-theme]) .tr-c .tr-tip,
  :root:not([data-theme]) .tr-help { backdrop-filter: none; -webkit-backdrop-filter: none }
}

/* the little arrow that points at the thing */
.tr-c .tr-tip {
  position: absolute; width: 13px; height: 13px; z-index: 0;
  background: var(--tr-face); border: 1px solid var(--tr-edge);
  border-radius: 3px; transform: rotate(45deg);
  backdrop-filter: blur(var(--tr-blur)) saturate(var(--tr-sat));
  -webkit-backdrop-filter: blur(var(--tr-blur)) saturate(var(--tr-sat));
}
.tr-c[data-p="bottom"] .tr-tip { top: -7px; border-right: 0; border-bottom: 0 }
.tr-c[data-p="top"]    .tr-tip { bottom: -7px; border-left: 0; border-top: 0 }
.tr-c[data-p="right"]  .tr-tip { left: -7px; border-right: 0; border-top: 0 }
.tr-c[data-p="left"]   .tr-tip { right: -7px; border-left: 0; border-bottom: 0 }
.tr-c[data-p="center"] .tr-tip { display: none }

.tr-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.tr-k i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 9px 1px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tr-c h3 {
  margin: .5em 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.11rem; font-weight: 700; line-height: 1.25; letter-spacing: -.018em;
  color: var(--tx);
}
.tr-c p {
  margin: .5em 0 0; font-size: .875rem; line-height: 1.55;
  color: var(--tx-2);
}
.tr-c p b { color: var(--tx); font-weight: 600 }

/* ---- progress and the buttons ---- */
.tr-f {
  display: flex; align-items: center; gap: 8px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.tr-dots { display: flex; gap: 4px; margin-right: auto; align-items: center }
.tr-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--tx-3) 55%, transparent);
  transition: all .3s var(--ease, ease);
}
.tr-dots i.on { background: var(--accent); width: 16px; border-radius: 3px }
.tr-dots i.did { background: var(--tx-3) }
.tr-n { font-size: .68rem; color: var(--tx-3); margin-right: auto;
  font-family: "JetBrains Mono", monospace }

.tr-b {
  border: 1px solid transparent; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 600;
  padding: 8px 15px; border-radius: 100px;
  transition: all .18s var(--ease, ease);
  white-space: nowrap;
}
.tr-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.tr-b-p { background: var(--solid); color: var(--solid-tx) }
.tr-b-p:hover { transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--solid) 55%, transparent) }
.tr-b-q { background: var(--bg-3); color: var(--tx); border-color: var(--line) }
.tr-b-q:hover { background: var(--bg-4); border-color: var(--line-2) }
html:root[data-theme="premium"] .tr-b-q {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14);
}
.tr-skip {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .74rem; color: var(--tx-3);
  padding: 4px 2px; margin-right: 2px;
}
.tr-skip:hover { color: var(--tx-2) }

/* the small line that says which device this step is about */
.tr-dev {
  margin-left: 6px; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--tx-3);
  border: 1px solid var(--line); border-radius: 100px; padding: 2px 7px;
}

/* ---- the help button that lives in the corner ---- */
.tr-help {
  position: fixed; z-index: 880;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--tx-2);
  cursor: pointer; opacity: .6;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .4);
  transition: all .2s var(--ease, ease);
}
html:root[data-theme="premium"] .tr-help {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(var(--lq-blur, 30px)) saturate(var(--lq-sat, 1.75));
  -webkit-backdrop-filter: blur(var(--lq-blur, 30px)) saturate(var(--lq-sat, 1.75));
}
.tr-help:hover { opacity: 1; transform: translateY(-2px); color: var(--tx);
  border-color: var(--line-2) }
.tr-help svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.tr-help.ping::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.tr-on .tr-help { display: none }
@media (max-width: 900px) {
  /* clear of the tab bar, which is the one thing that must never be covered */
  .tr-help { bottom: calc(var(--tabh, 62px) + max(12px, env(safe-area-inset-bottom))) }
}

/* ---- phone: the card sits at the bottom like a sheet ---- */
@media (max-width: 620px) {
  .tr-c {
    left: 10px !important; right: 10px;
    width: auto; max-width: none;
    padding: 16px 16px 14px;
  }
  .tr-c .tr-tip { display: none }
  .tr-f { flex-wrap: wrap; row-gap: 10px }
  .tr-b { flex: 1; text-align: center; justify-content: center }
  .tr-dots, .tr-n { order: 3; margin-right: 0 }
  .tr-skip { order: 4; margin-left: auto; margin-right: 0 }
  .tr-dev { order: 3 }
}

@media (prefers-reduced-motion: reduce) {
  .tr-sh, .tr-ring, .tr-c { transition: none }
  .tr-ring::after, .tr-c.in { animation: none }
}