/*
 * Our own right-click menu and the share button for phones (menu.js).
 * Identical on trivolut.com and bot.trivolut.com. Plain CSS, no build: the
 * colours are my.trivolut.com's (slate, blue-600, ground #0b0f19), light
 * under .tvpm and dark under html.dark. Three looks, .is-a, .is-b and .is-c,
 * on one structure. Motion stays under 160 ms and stops for reduced motion.
 */
.tvpm, .tvpm-toast, .tvpm-fab {
    --pm-bg: #ffffff;
    --pm-sunk: #f8fafc;
    --pm-line: rgba(15, 23, 42, 0.08);
    --pm-line-2: rgba(15, 23, 42, 0.12);
    --pm-ink: #0f172a;
    --pm-ink-2: #475569;
    --pm-ink-3: #94a3b8;
    --pm-hover: #f1f5f9;
    --pm-press: #e2e8f0;
    --pm-acc: #2563eb;
    --pm-acc-ink: #2563eb;
    --pm-acc-tint: rgba(37, 99, 235, 0.08);
    --pm-ok: #059669;
    --pm-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px -8px rgba(15, 23, 42, 0.18);
    --pm-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
html.dark .tvpm, html.dark .tvpm-toast, html.dark .tvpm-fab {
    --pm-bg: #0f172a;
    --pm-sunk: #0b1222;
    --pm-line: rgba(255, 255, 255, 0.07);
    --pm-line-2: rgba(255, 255, 255, 0.12);
    --pm-ink: #f1f5f9;
    --pm-ink-2: #cbd5e1;
    --pm-ink-3: #64748b;
    --pm-hover: rgba(255, 255, 255, 0.06);
    --pm-press: rgba(255, 255, 255, 0.1);
    --pm-acc: #2563eb;
    --pm-acc-ink: #60a5fa;
    --pm-acc-tint: rgba(96, 165, 250, 0.1);
    --pm-ok: #34d399;
    --pm-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
}

/* ---- The menu ---------------------------------------------------------- */

.tvpm {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483600;
    box-sizing: border-box;
    max-height: calc(100vh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pm-bg);
    color: var(--pm-ink);
    box-shadow: var(--pm-shadow);
    font: 400 13px/1.35 var(--pm-font);
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 120ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tvpm.is-open { opacity: 1; transform: none; }
.tvpm.is-closing { opacity: 0; transform: scale(0.985); transition-duration: 90ms; }
.tvpm *, .tvpm *::before, .tvpm *::after { box-sizing: border-box; }
.tvpm svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.tvpm-group { display: flex; flex-direction: column; }
.tvpm-sep { height: 1px; background: var(--pm-line); margin: 5px 0; }
.tvpm-label { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--pm-ink-3); }

.tvpm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
    outline: none;
    transition: background-color 80ms ease, color 80ms ease;
}
.tvpm-item .tvpm-ic { color: var(--pm-ink-2); display: inline-flex; }
.tvpm-item:hover, .tvpm-item:focus-visible, .tvpm-item.is-active { background: var(--pm-hover); }
.tvpm-item:active { background: var(--pm-press); }
.tvpm-item[aria-disabled="true"] { color: var(--pm-ink-3); pointer-events: none; }
.tvpm-item[aria-disabled="true"] .tvpm-ic { color: var(--pm-ink-3); }
.tvpm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.tvpm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvpm-sub { font: 400 11.5px/1.3 var(--pm-mono); color: var(--pm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.tvpm-kbd { flex: none; font-size: 12px; color: var(--pm-ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tvpm-item.is-primary .tvpm-ic { color: var(--pm-acc-ink); }
.tvpm-item.is-primary .tvpm-name { font-weight: 500; }

.tvpm-foot { display: flex; flex-direction: column; gap: 6px; padding: 7px 10px 5px; font-size: 11.5px; color: var(--pm-ink-3); }
.tvpm-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The look switch for staff while the menu is a beta: a small segmented control. */
.tvpm-beta { display: flex; align-items: center; gap: 8px; }
.tvpm-beta-label { flex: 1; min-width: 0; }
.tvpm-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 7px; background: var(--pm-hover); }
.tvpm-seg button, .tvpm-beta-off {
    min-width: 24px; height: 20px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent;
    color: var(--pm-ink-2); font: 500 11px/20px var(--pm-font); cursor: default; outline: none;
    transition: background-color 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.tvpm-seg button:hover { color: var(--pm-ink); }
.tvpm-seg button[aria-pressed="true"] { background: var(--pm-bg); color: var(--pm-ink); box-shadow: 0 0 0 1px var(--pm-line-2), 0 1px 2px rgba(15, 23, 42, 0.08); }
.tvpm-beta-off { color: var(--pm-ink-3); }
.tvpm-beta-off:hover { background: var(--pm-hover); color: var(--pm-ink); }
.tvpm-seg button:focus-visible, .tvpm-beta-off:focus-visible { box-shadow: 0 0 0 2px var(--pm-acc); color: var(--pm-ink); }

/* The short link as a field (b and c). */
.tvpm-field {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 0 4px 0 10px; height: 34px;
    border: 1px solid var(--pm-line-2); border-radius: 8px; background: var(--pm-sunk); color: var(--pm-ink);
    font: inherit; text-align: left; cursor: default; outline: none; transition: border-color 100ms ease, background-color 100ms ease;
}
.tvpm-field:hover { border-color: var(--pm-ink-3); }
.tvpm-field:focus-visible { border-color: var(--pm-acc); box-shadow: 0 0 0 3px var(--pm-acc-tint); }
.tvpm-field .tvpm-ic { color: var(--pm-ink-3); display: inline-flex; }
.tvpm-field-url { flex: 1; min-width: 0; font: 400 12px/1 var(--pm-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvpm-field-url.is-empty { color: var(--pm-ink-3); font-family: var(--pm-font); }
.tvpm-field-dots { color: var(--pm-ink-3); letter-spacing: 0; }
.tvpm-field-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px;
    font-size: 12px; font-weight: 500; color: var(--pm-ink-2); background: var(--pm-bg); box-shadow: 0 0 0 1px var(--pm-line-2);
}
.tvpm-field-btn svg { width: 14px; height: 14px; }
.tvpm-field-btn.is-icon { width: 26px; padding: 0; justify-content: center; }

/* ---- a: the list ---- */
.tvpm.is-a { width: 252px; padding: 5px; border-radius: 10px; }
.tvpm.is-a .tvpm-sep { margin: 5px -5px; }
.tvpm.is-a .tvpm-foot { border-top: 1px solid var(--pm-line); margin: 5px -5px -5px; padding: 8px 15px; background: var(--pm-sunk); }

/* ---- b: the toolbar ---- */
.tvpm.is-b { width: 276px; padding: 6px; border-radius: 12px; }
.tvpm.is-b .tvpm-sep { margin: 6px -6px; }
.tvpm-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.tvpm-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; margin: 0; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--pm-ink-2); font: 500 11px/1 var(--pm-font); cursor: default; outline: none;
    transition: background-color 80ms ease, color 80ms ease;
}
.tvpm-tool svg { width: 18px; height: 18px; }
.tvpm-tool:hover, .tvpm-tool:focus-visible, .tvpm-tool.is-active { background: var(--pm-hover); color: var(--pm-ink); }
.tvpm-tool:active { background: var(--pm-press); }
.tvpm-tool[aria-disabled="true"] { color: var(--pm-ink-3); opacity: 0.6; pointer-events: none; }
.tvpm-tool.is-primary { color: var(--pm-acc-ink); }
.tvpm.is-b .tvpm-strip { padding: 2px 0 0; }
.tvpm.is-b .tvpm-foot { padding: 9px 4px 3px; }

/* ---- c: the panel ---- */
.tvpm.is-c { width: 312px; padding: 0; border-radius: 14px; }
.tvpm-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--pm-line); }
.tvpm-head-text { flex: 1; min-width: 0; padding-top: 1px; }
.tvpm-kind { font-size: 11.5px; font-weight: 500; color: var(--pm-ink-3); }
.tvpm-title { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--pm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.tvpm-title.is-mono { font: 500 12.5px/1.4 var(--pm-mono); letter-spacing: 0; }
.tvpm-nav { display: flex; gap: 2px; flex: none; }
.tvpm-nav .tvpm-tool { width: 28px; height: 28px; border-radius: 7px; }
.tvpm-nav .tvpm-tool svg { width: 15px; height: 15px; }
.tvpm.is-c .tvpm-body { padding: 4px 6px 6px; }
.tvpm.is-c .tvpm-label { padding: 8px 8px 4px; }
.tvpm.is-c .tvpm-item { min-height: 32px; padding: 0 8px; }
.tvpm.is-c .tvpm-strip { padding: 10px 12px 12px; border-top: 1px solid var(--pm-line); }
.tvpm.is-c .tvpm-strip .tvpm-label { padding: 0 2px 6px; }
.tvpm.is-c .tvpm-field-btn { color: #fff; background: var(--pm-acc); box-shadow: none; }
.tvpm.is-c .tvpm-foot { padding: 9px 14px; border-top: 1px solid var(--pm-line); background: var(--pm-sunk); }
.tvpm.is-c.is-open .tvpm-body > * { animation: tvpm-rise 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tvpm.is-c.is-open .tvpm-body > *:nth-child(2) { animation-delay: 20ms; }
.tvpm.is-c.is-open .tvpm-body > *:nth-child(3) { animation-delay: 40ms; }
.tvpm.is-c.is-open .tvpm-body > *:nth-child(n+4) { animation-delay: 60ms; }
@keyframes tvpm-rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---- The note after an action ------------------------------------------ */

.tvpm-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483601;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    background: var(--pm-bg);
    color: var(--pm-ink);
    box-shadow: var(--pm-shadow);
    font: 400 13px/1.4 var(--pm-font);
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.tvpm-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tvpm-toast svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--pm-ok); }
.tvpm-toast.is-warn svg { color: var(--pm-ink-3); }
.tvpm-toast-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tvpm-toast-url { font: 400 12px/1.3 var(--pm-mono); color: var(--pm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvpm-toast-btn {
    flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--pm-acc); color: #fff;
    font: 500 13px/30px var(--pm-font); cursor: pointer;
}

/* ---- The share button on phones and tablets ---------------------------- */

/* z 39: under every page bar or dock at the bottom (40 to 60, the shop and
   checkout bars), the dropdowns, the cookie notice (80) and every dialog
   (100 and up); it used to be 990 and sat on top of all of them. */
.tvpm-fab {
    position: fixed;
    z-index: 39;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    border: 0;
    background: var(--pm-bg);
    color: var(--pm-ink);
    box-shadow: var(--pm-shadow);
    font: 500 14px/1 var(--pm-font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
}
.tvpm-fab svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.tvpm-fab:active { transform: scale(0.94); }
.tvpm-fab:focus-visible { outline: 2px solid var(--pm-acc); outline-offset: 2px; }
.tvpm-fab[aria-busy="true"] { opacity: 0.7; }
.tvpm-fab.is-a { left: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; border-radius: 22px; }
.tvpm-fab.is-b { left: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); height: 38px; padding: 0 14px 0 12px; border-radius: 19px; }
.tvpm-fab.is-c { left: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: 40px; height: 44px; border-radius: 0 12px 12px 0; }
.tvpm-fab.is-hidden, html.tv-sheet-open .tvpm-fab { opacity: 0; pointer-events: none; transform: translateY(8px); }
.tvpm-fab.is-c.is-hidden, html.tv-sheet-open .tvpm-fab.is-c { transform: translateX(-100%); }

/* Reduced motion: the system's setting, or the site's own (data-motion, theme-wave.js). */
@media (prefers-reduced-motion: reduce) {
    .tvpm, .tvpm-toast, .tvpm-fab, .tvpm-item, .tvpm-tool { transition: none; }
    .tvpm { transform: none; }
    .tvpm-toast, .tvpm-toast.is-open { transform: translate(-50%, 0); }
    .tvpm.is-c.is-open .tvpm-body > * { animation: none; }
}
html[data-motion="reduced"] .tvpm, html[data-motion="reduced"] .tvpm-toast, html[data-motion="reduced"] .tvpm-fab { transition: none; }
html[data-motion="reduced"] .tvpm { transform: none; }
html[data-motion="reduced"] .tvpm.is-c.is-open .tvpm-body > * { animation: none; }
@media print {
    .tvpm, .tvpm-toast, .tvpm-fab { display: none !important; }
}